@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        @php
            use Carbon\Carbon;
            $currentTime = Carbon::now();

            $hour = $currentTime->hour;

            if ($hour >= 5 && $hour < 12) {
                $greeting = 'Good morning';
            } elseif ($hour >= 12 && $hour < 17) {
                $greeting = 'Good afternoon';
            } else {
                $greeting = 'Good evening';
            }

            $user = Auth::user();
            $payment_amount = $user->ticket_type;

            if ($payment_amount == '8000') {
                $amount = 8000;
                $currency = 'KSH';
                $description = 'Regular Delegate (Full Access 3-Day Pass) – KES 8,000 /=';
            } elseif ($payment_amount == '10000') {
                $amount = 10000;
                $currency = 'KSH';
                $description = 'Regular Delegate (Full Access 3-Day Pass) – KES 10,000 /=';
            } elseif ($payment_amount == '12000') {
                $amount = 12000;
                $currency = 'KSH';
                $description = 'Regular Delegate (Full Access 3-Day Pass) – KES 12,000 /=';
            } elseif ($payment_amount == '2000') {
                $amount = 2000;
                $currency = 'KSH';
                $description = 'Students (Full Access 3-Day Pass) – KES 2,000 /=';
            } elseif ($payment_amount == '3000') {
                $amount = 3000;
                $currency = 'KSH';
                $description = '1-Day Pass (Single Day Attendees) – KES 3,000 /=';
            } elseif ($payment_amount == '4000') {
                $amount = 4000;
                $currency = 'KSH';
                $description = '1-Day Pass (Single Day Attendees) – KES 4,000 /=';
            } elseif (strpos($payment_amount, 'usd-') === 0) {
                // Check if payment_amount starts with 'usd-'
                $amount = (int) str_replace('usd-', '', $payment_amount);
                $currency = 'USD';
                if ($amount == 60) {
                    $description = 'International Delegate (Full Access 3-Day Pass) - USD 60';
                } elseif ($amount == 50) {
                    $description = 'Full Access 3-Day Pass - USD 50 per attendee (from USD 150 per group)';
                } elseif ($amount == 15) {
                    $description = 'Full Access 1-Day Pass - USD 15 per attendee (from USD 45 per group)';
                } elseif ($amount == 50) {
                    $description = 'Full Access 3-Day Pass - USD 50 per attendee (from USD 150 per group)';
                } elseif ($amount == 80) {
                    $description = 'International Delegate (Full Access 3-Day Pass) - USD 80';
                } elseif ($amount == 30) {
                    $description = 'International Delegate (1-Day Pass) - USD 30';
                } else {
                    $description = 'Unknown';
                }
            } elseif ($payment_amount == '7000') {
                $amount = 7000;
                $currency = 'KSH';
                $description = '3-Day Pass – KES 7,000 /= per attendee (from KES 21,000 /= per group)';
            } elseif ($payment_amount == '2500') {
                $amount = 2500;
                $currency = 'KSH';
                $description = '1-Day Pass – KES 2,500 /= per attendee (from KES 7,500 /= per group)';
            } else {
                // Default description and amount if none of the conditions match
                $amount = 0; // You can set a default amount here
                $currency = 'KSH'; // Default currency is KSH
                $description = 'Unknown Payment Amount';
            }
        @endphp
        <div class="mt-4">
            @role('system_user')
                <div class="p-3 col-12">
                    <div class="row g-3">
                        <div class="col-md-6">
                            @php
                                // $deduction = $currency == 'KSH' ? round($amount / 150) : $amount;
                                if ($currency == 'KSH') {
                                    $deduction = round(($amount * ($groupusers->count() + 1)) / 150);
                                } else {
                                    $deduction = $amount * ($groupusers->count() + 1);
                                }
                            @endphp
                            <p>
                                {{ $greeting }}, {{ Auth::user()->name }}
                            </p>
                            @if ($user->ticket_type == 'kdhc-null')
                                <p>Please update your ticket application below.</p>
                                <form action="{{ route('tickets.update') }}" method="post">
                                    @csrf
                                    <div class="row g-2">
                                        <div class="col-md-6">
                                            <div class="row g-2">
                                                <div class="col-md-4 mb-2">
                                                    <select name="ticket_number" id="ticket_number" class="form-control ">
                                                        <option value="1" selected>Individual tickets</option>
                                                        <option value="2">Group international tickets</option>
                                                        <option value="3">Group local tickets</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-8">
                                                    <select name="ticket_type" id="ticket_type" class="form-control">
                                                        <option value="" selected disabled>Choose</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-success px-3">Submit</button>
                                    </div>
                                </form>
                            @else
                                <div class="fw-bold mb-2">Your ticket</div>
                                <div class="fst-italic ">
                                    {{ $description }}
                                </div>
                                @if ($user->payment == null)
                                    @php
                                        $groupmembers = $groupusers->count() + 1;
                                    @endphp
                                    <div>You are expected to pay {{ $currency . ' ' . $amount * ($groupusers->count() + 1) }},
                                        Kindly click the below button to complete transaction
                                    </div>
                                    @if ($amount == 50 || ($amount == 15 || ($amount == 7000 || $amount == 2500)))
                                        <div class="py-3">
                                            <h6 class="text-success fw-bold mb-2">Your group has
                                                {{ $groupmembers . ($groupmembers == 1 ? ' member' : ' members') }}
                                            </h6>
                                            @if (!$groupmembers > 2)
                                                <div class="">
                                                    Your group should have at least 3 members. Please add your group members.
                                                </div>
                                            @endif
                                        </div>
                                        @if ($groupmembers > 2)
                                            <div class="mt-3 p-2">
                                                <!-- Nav tabs -->
                                                <ul class="nav nav-tabs" id="paymentOptions" role="tablist">
                                                    @if ($currency == 'KSH')
                                                        <li class="nav-item" role="presentation">
                                                            <button
                                                                class="nav-link @if ($currency == 'KSH') active @endif"
                                                                id="m-pesa-tab" data-bs-toggle="tab" data-bs-target="#m-pesa"
                                                                type="button" role="tab" aria-controls="m-pesa"
                                                                aria-selected="true">M-Pesa</button>
                                                        </li>
                                                    @else
                                                        <li class="nav-item" role="presentation">
                                                            <button
                                                                class="nav-link @if ($currency == 'USD') active @endif"
                                                                id="pay-pal-tab" data-bs-toggle="tab" data-bs-target="#pay-pal"
                                                                type="button" role="tab" aria-controls="pay-pal"
                                                                aria-selected="false">PayPal</button>
                                                        </li>
                                                    @endif
                                                    <li class="nav-item" role="presentation">
                                                        <button class="nav-link" id="bank-transfer-tab" data-bs-toggle="tab"
                                                            data-bs-target="#bank-transfer" type="button" role="tab"
                                                            aria-controls="bank-transfer" aria-selected="false">Bank
                                                            Transfer</button>
                                                    </li>
                                                </ul>

                                                <!-- Tab panes -->
                                                <div class="tab-content">
                                                    <div class="tab-pane  @if ($currency == 'KSH') active @endif"
                                                        id="m-pesa" role="tabpanel" aria-labelledby="m-pesa-tab">
                                                        <div class="px-2">
                                                            <div class="py-2 text-info">
                                                                Pay the above amount via M-Pesa Paybill
                                                            </div>
                                                            <ol class="mb-3">
                                                                <li>Go to M-Pesa Menu</li>
                                                                <li>Lipa na M-Pesa</li>
                                                                <li>Choose Paybill option</li>
                                                                <li>Enter Paybill <strong>4101463</strong></li>
                                                                <li>Enter Account number <strong>{{ $account_number }}</strong>
                                                                </li>
                                                                <li>Enter amount
                                                                    <strong>{{ $currency == 'USD' ? $amount * ($groupusers->count() + 1) * 150 : $amount * ($groupusers->count() + 1) }}</strong>
                                                                </li>
                                                                <li>Enter your pin to confirm transaction</li>
                                                            </ol>
                                                            <p class="mb-3">
                                                                Once complete enter transaction code below and submit to
                                                                complete
                                                                payment
                                                            </p>
                                                            <form action="{{ route('mpesa.transaction') }}" method="POST">
                                                                @csrf
                                                                <div class="form-group mb-3">
                                                                    <input type="hidden"
                                                                        value="{{ $amount * ($groupusers->count() + 1) }}"
                                                                        name="amount">
                                                                    <input type="hidden" value="{{ $account_number }}"
                                                                        name="account_number">
                                                                    <input type="text"
                                                                        class="form-control text-uppercase @error('transaction_code') is-invalid @enderror"
                                                                        name="transaction_code" value=""
                                                                        placeholder="e.g HJY56TGFR5">
                                                                </div>
                                                                <div class="form-group">
                                                                    <button type="submit"
                                                                        class="btn btn-success">Submit</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane @if ($currency == 'USD') active @endif"
                                                        id="pay-pal" role="tabpanel" aria-labelledby="pay-pal-tab">
                                                        <div class="p-2">

                                                            <div class="py-2">
                                                                <p>
                                                                    A total of USD {{ $deduction }} will be deducted
                                                                    from
                                                                    your PayPal account
                                                                </p>
                                                            </div>
                                                            <form action="{{ route('payment.paypal') }}" method="POST">
                                                                @csrf
                                                                <input type="hidden" value="{{ $deduction }}"
                                                                    name="amount" id="integer_amount">
                                                                <button class="btn btn-info">Pay Now</button>
                                                            </form>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane" id="bank-transfer" role="tabpanel"
                                                        aria-labelledby="bank-transfer-tab">
                                                        <div class="p-2">
                                                            @livewire('registrations.bank-transfer', ['user' => $user], key($user->id))
                                                            <button class="btn border-0 " type="button" disabled>
                                                                <span class="spinner-border spinner-border-sm" role="status"
                                                                    aria-hidden="true"></span>
                                                                Coming soon...
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @else
                                        <div class="mt-3 p-2">
                                            <!-- Nav tabs -->
                                            <ul class="nav nav-tabs" id="paymentOptions" role="tablist">
                                                @if ($currency == 'KSH')
                                                    <li class="nav-item" role="presentation">
                                                        <button
                                                            class="nav-link @if ($currency == 'KSH') active @endif"
                                                            id="m-pesa-tab" data-bs-toggle="tab" data-bs-target="#m-pesa"
                                                            type="button" role="tab" aria-controls="m-pesa"
                                                            aria-selected="true">M-Pesa</button>
                                                    </li>
                                                @else
                                                    <li class="nav-item" role="presentation">
                                                        <button
                                                            class="nav-link @if ($currency == 'USD') active @endif"
                                                            id="pay-pal-tab" data-bs-toggle="tab" data-bs-target="#pay-pal"
                                                            type="button" role="tab" aria-controls="pay-pal"
                                                            aria-selected="false">PayPal</button>
                                                    </li>
                                                @endif
                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="bank-transfer-tab" data-bs-toggle="tab"
                                                        data-bs-target="#bank-transfer" type="button" role="tab"
                                                        aria-controls="bank-transfer" aria-selected="false">Bank
                                                        Transfer</button>
                                                </li>
                                            </ul>

                                            <!-- Tab panes -->
                                            <div class="tab-content">
                                                <div class="tab-pane  @if ($currency == 'KSH') active @endif"
                                                    id="m-pesa" role="tabpanel" aria-labelledby="m-pesa-tab">
                                                    <div class="px-2">
                                                        <div class="py-2 text-info">
                                                            Pay the above amount via M-Pesa Paybill
                                                        </div>
                                                        <ol class="mb-3">
                                                            <li>Go to M-Pesa Menu</li>
                                                            <li>Lipa na M-Pesa</li>
                                                            <li>Choose Paybill option</li>
                                                            <li>Enter Paybill <strong>4101463</strong></li>
                                                            <li>Enter Account number <strong>{{ $account_number }}</strong>
                                                            </li>
                                                            <li>Enter amount
                                                                <strong>{{ $currency == 'USD' ? $amount * ($groupusers->count() + 1) * 150 : $amount }}</strong>
                                                            </li>
                                                            <li>Enter your pin to confirm transaction</li>
                                                        </ol>
                                                        <p class="mb-3">
                                                            Once complete enter transaction code below and submit to complete
                                                            payment
                                                        </p>
                                                        @php
                                                            // $deduction = $currency == 'KSH' ? round($amount / 150) : $amount;
                                                            if ($currency == 'KSH') {
                                                                $deduction = round(($amount * ($groupusers->count() + 1)) / 150);
                                                            } else {
                                                                $deduction = $amount * ($groupusers->count() + 1);
                                                            }
                                                        @endphp
                                                        <form action="{{ route('mpesa.transaction') }}" method="POST">
                                                            @csrf
                                                            <div class="form-group mb-3">
                                                                <input type="hidden"
                                                                    value="{{ $amount * ($groupusers->count() + 1) }}"
                                                                    name="amount">
                                                                <input type="hidden" value="{{ $account_number }}"
                                                                    name="account_number">
                                                                <input type="text"
                                                                    class="form-control text-uppercase @error('transaction_code') is-invalid @enderror"
                                                                    name="transaction_code" value=""
                                                                    placeholder="e.g HJY56TGFR5">
                                                            </div>
                                                            <div class="form-group">
                                                                <button type="submit" class="btn btn-success">Submit</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="tab-pane @if ($currency == 'USD') active @endif"
                                                    id="pay-pal" role="tabpanel" aria-labelledby="pay-pal-tab">
                                                    <div class="p-2">

                                                        <div class="py-2">
                                                            <p>
                                                                A total of USD {{ $deduction }} will be deducted
                                                                from
                                                                your PayPal account
                                                            </p>
                                                        </div>
                                                        <form action="{{ route('payment.paypal') }}" method="POST">
                                                            @csrf
                                                            <input type="hidden" value="{{ $deduction }}" name="amount"
                                                                id="integer_amount">
                                                            <button class="btn btn-info">Pay Now</button>
                                                        </form>
                                                    </div>
                                                </div>
                                                <div class="tab-pane" id="bank-transfer" role="tabpanel"
                                                    aria-labelledby="bank-transfer-tab">
                                                    <div class="p-2">
                                                        @livewire('registrations.bank-transfer', ['user' => $user], key($user->id))
                                                        <button class="btn border-0 " type="button" disabled>
                                                            <span class="spinner-border spinner-border-sm" role="status"
                                                                aria-hidden="true"></span>
                                                            Coming soon...
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    {{--  || $user->payment->payment_status == 'pending' --}}
                                    <div class="table-responsive mt-3 ">
                                        <table class="table table-primary shadow ">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Payment status</th>
                                                    <th scope="col">Payment date</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr class="">
                                                    <td scope="row">1</td>
                                                    <td class="text-capitalize">
                                                        {{ optional(optional($user)->payment)->payment_status }}</td>
                                                    <td>{{ date('jS M Y', strtotime(optional(optional($user)->payment)->created_at)) }}
                                                    </td>
                                                    <td>
                                                        @if (optional(optional($user)->payment)->payment_status == 'COMPLETED')
                                                            <a class="d-flex align-items-center "
                                                                href="{{ route('download.resource') }}" target="_blank">
                                                                <i style="cursor: pointer;" class="bi bi-download"
                                                                    title="Download"></i>
                                                            </a>
                                                        @else
                                                            <div class="d-flex">
                                                                <a class="d-flex align-items-center "
                                                                    href="{{ route('download.resource') }}"
                                                                    onclick="event.preventDefault();">
                                                                    <span>
                                                                        <div
                                                                            class="px-2 d-flex justify-content-start align-items-center">
                                                                            <div class="spinner-border text-warning spinner-border-sm"
                                                                                role="status">
                                                                                <span class="visually-hidden">Loading...</span>
                                                                            </div>
                                                                        </div>
                                                                    </span>
                                                                </a>
                                                                @if (!$user->paypal == null && $user->payment->payment_status == 'pending')
                                                                    <form action="{{ route('payment.paypal') }}"
                                                                        method="POST">
                                                                        @csrf
                                                                        <input type="hidden" value="{{ $deduction }}"
                                                                            name="amount" id="integer_amount">
                                                                        <button type="submit" class="btn btn-info">Pay
                                                                            Now</button>
                                                                    </form>
                                                                @endif
                                                            </div>
                                    </div>
                                @endif
                                </td>
                                </tr>
                                </tbody>
                                </table>
                        </div>
                        @endif
                        @endif
                    </div>
                    <div class="col-md-6">
                        @if ($amount == 50 || ($amount == 15 || ($amount == 7000 || $amount == 2500)))
                            <div class="card shadow border-0 border-end border-start ">
                                <div class="card-header text-uppercase border-0 bg-light border-bottom ">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>My Group</div>
                                        @if ($user->payment == null)
                                            <button class="btn btn-success rounded-1 " data-bs-toggle="modal"
                                                data-bs-target="#addGroupUser">
                                                Add Participant
                                            </button>
                                        @endif
                                    </div>
                                </div>
                                <div class="card-body">
                                    @if (isset($groupusers) && count($groupusers) > 0)
                                        <div class="table-responsive">
                                            <table class="table table-light ">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">#</th>
                                                        <th scope="col">Name</th>
                                                        <th scope="col">Email</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($groupusers as $key => $group)
                                                        <tr class="">
                                                            <td scope="row">{{ $key + 1 }}</td>
                                                            <td>{{ $group->name }}</td>
                                                            <td>{{ $group->email }}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    @else
                                        <div class="py-3">No one in your group</div>
                                    @endif
                                </div>
                            </div>
                            <div class="modal fade rounded-1 " id="addGroupUser" tabindex="-1" data-bs-backdrop="static"
                                data-bs-keyboard="false" role="dialog" aria-labelledby="addUserTitle" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md"
                                    role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title text-uppercase " id="addUserTitle">Add user</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            @livewire('registrater-group-user', ['user' => $user], key($user->id))
                                        </div>
                                        <div class="modal-footer d-none">
                                            <button type="button" class="btn btn-secondary"
                                                data-bs-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @else
                        @endif
                    </div>
                </div>
                <div class="row g-3 d-none">
                    <div class="col-sm-6 com-md-4 col-lg-3">
                        <h6>Name</h6>
                        <p>{{ $user->name }}</p>
                    </div>
                    <div class="col-sm-6 com-md-4 col-lg-3">
                        <h6>Email</h6>
                        <p>{{ $user->email }}</p>
                    </div>
                    <div class="col-sm-6 com-md-4 col-lg-3">
                        <h6>Contact</h6>
                        <p>{{ $user->phone_number }}</p>
                    </div>
                    <div class="col-sm-6 com-md-4 col-lg-3">
                        <h6>Country</h6>
                        <p>{{ $user->country->country }}</p>
                    </div>
                    <div class="col-sm-6 com-md-4 col-lg-3">
                        <h6>County</h6>
                        <p>{{ $user->county->county }}</p>
                    </div>
                </div>
            @endrole

            @role('system_administrator')
                <div class="row">
                    <a class="col-6 col-xl-3 col-lg-3 col-sm-6 text-decoration-none " href="{{ route('admin.users') }}">
                        <div class="panel mb-g">
                            <div class="panel-body">
                                <div class="sale-top-box">
                                    <div class="part-icon bg-primary">
                                        <span><i class="bi bi-graph-up-arrow"></i></span>
                                    </div>
                                    <div class="part-txt">
                                        <h5><small>Registrations</small>
                                            {{ number_format($tickets->count()) }}</h5>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a class="col-6 col-xl-3 col-lg-3 col-sm-6 text-decoration-none "
                        href="{{ route('admin.posts.index') }}">
                        <div class="panel mb-g">
                            <div class="panel-body">
                                <div class="sale-top-box">
                                    <div class="part-icon bg-success">
                                        <span><i class="bi bi-file-bar-graph"></i></span>
                                    </div>
                                    <div class="part-txt">
                                        <h5><small>Posts</small> {{ number_format($posts->count()) }}
                                        </h5>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a class="col-6 col-xl-3 col-lg-3 col-sm-6 text-decoration-none " href="{{ route('admin.feedback') }}">
                        <div class="panel mb-g">
                            <div class="panel-body">
                                <div class="sale-top-box">
                                    <div class="part-icon bg-danger">
                                        <span><i class="bi bi-display-fill"></i></span>
                                    </div>
                                    <div class="part-txt">
                                        <h5><small>Feedback</small>
                                            {{ number_format($feedback->count()) }}</h5>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                    <a class="col-6 col-xl-3 col-lg-3 col-sm-6 text-decoration-none " href="{{ route('admin.wallet') }}">
                        <div class="panel mb-g">
                            <div class="panel-body">
                                <div class="sale-top-box">
                                    <div class="part-icon bg-info">
                                        <span><i class="bi bi-cash-stack"></i></span>
                                    </div>
                                    <div class="part-txt">
                                        <h5><small>Wallet</small> {{ 'Ksh. ' . number_format($mpesaamounts + $paypalamount) }}
                                        </h5>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <a class="col-6 col-xl-3 col-lg-3 col-sm-6 text-decoration-none " href="{{ route('admin.event.registrations') }}">
                        <div class="panel mb-g">
                            <div class="panel-body">
                                <div class="sale-top-box">
                                    <div class="part-icon bg-warning">
                                        <span><i class="bi bi-people-fill"></i></span>
                                    </div>
                                    <div class="part-txt">
                                        <h5><small>Event Applications</small></h5>
                                        <p>Speaker, Partner, Exhibitor, Volunteer</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>

                    <a class="col-6 col-xl-3 col-lg-3 col-sm-6 text-decoration-none " href="https://qrcodescan.in/">
                        <div class="panel mb-g">
                            <div class="panel-body">
                                <div class="sale-top-box">
                                    <div class="part-icon bg-info">
                                        <span><i class="bi bi-qr-code"></i></span>
                                    </div>
                                    <div class="part-txt">
                                        <h5><small>Scan QRCode</small></h5>
                                        <p></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Modal -->
                <div class="modal fade" id="launchScanner" tabindex="-1" role="dialog" aria-labelledby="scannerId"
                    aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg " role="document">
                        <div class="modal-content">
                            <div class="modal-header border-bottom-0 ">
                                <h5 class="modal-title" id="scannerId">Scanner</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <iframe src="https://qrcodescan.in/" frameborder="0" width="100%"
                                        height="400"></iframe>
                                </div>
                            </div>
                            <div class="modal-footer d-none ">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            @endrole

            @role('system_editor')
                <div class="">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div></div>
                        <div><button class="btn btn-info px-3 rounded-1" data-bs-target="#addMedia"
                                data-bs-toggle="modal">Add Media</button></div>
                    </div>
                    @if (isset($resources) && count($resources) > 0)
                        <div class="table-responsive">
                            <table class="table table-primary">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Description</th>
                                        <th scope="col">File</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($resources as $key => $resource)
                                        <tr class="">
                                            <td scope="row">{{ $key + 1 }}</td>
                                            <td>{{ $resource->description }}</td>
                                            <td>
                                                <audio controls>
                                                    <source src="{{ asset('storage/resource/' . $resource->file) }}"
                                                        type="audio/mpeg">
                                                    Your browser does not support the audio element.
                                                </audio>
                                            </td>
                                            <td><i class="bi bi-eye"></i></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="p-2">
                            <button class="btn border-0" type="button" disabled>
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                No resources added
                            </button>
                        </div>
                    @endif

                </div>

                <!-- Modal -->
                <div class="modal fade" id="addMedia" tabindex="-1" role="dialog" aria-labelledby="mediaTitleId"
                    aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="mediaTitleId">Add media</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    @livewire('administration.add-media', ['user' => Auth::user()], key(Auth::user()->id))
                                </div>
                            </div>
                            <div class="modal-footer d-none ">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save</button>
                            </div>
                        </div>
                    </div>
                </div>

                <script>
                    var addMedia = document.getElementById('addMedia');

                    addMedia.addEventListener('show.bs.modal', function(event) {
                        // Button that triggered the modal
                        let button = event.relatedTarget;
                        // Extract info from data-bs-* attributes
                        let recipient = button.getAttribute('data-bs-whatever');

                        // Use above variables to manipulate the DOM
                    });
                </script>
            @endrole
        </div>
    </div>
    </div>

    <script>
        window.onload = () => {
            let ticketNumberSelect = document.getElementById('ticket_number');
            let ticketTypeSelect = document.getElementById('ticket_type');
            if (ticketNumberSelect) {
                ticketNumberSelect.addEventListener('change', () => {
                    let ticketNumber = ticketNumberSelect.value;
                    ticketTypeSelect.innerHTML = '';
                    if (ticketNumber == 1) {
                        ticketTypeSelect.innerHTML += `
                    <option value="8000">Regular Delegate (Full Access 3-Day Pass) – KES 8,000 /=
                    </option>
                    <option value="2000">Students (Full Access 3-Day Pass) – KES 2,000 /=
                    </option>
                    <option value="3000">1-Day Pass (Single Day Attendees) – KES 3,000 /=
                    </option>
                    <option value="usd-75">International Delegate (Full Access 3-Day Pass) - $75
                    </option>
                `;
                    } else if (ticketNumber == 2) {
                        ticketTypeSelect.innerHTML += `
                    <option value="usd-50">Full Access 3-Day Pass - $50 per attendee (from $150 per group)</option>
                    <option value="usd-15">Full Access 1-Day Pass - $15 per attendee (from $45 per group)</option>
                `;
                    } else if (ticketNumber == 3) {
                        ticketTypeSelect.innerHTML += `
                    <option value="7000">3-Day Pass – KES 7,000/= per attendee (from KES 21,000/= per group)</option>
                    <option value="2500">1-Day Pass – KES 2,500/= per attendee (from KES 7,500/= per group)</option>
                `;
                    } else {
                        ticketTypeSelect.innerHTML += `
                    <option selected disabled>Choose Ticket</option>
                `;
                    }
                });

                // Trigger change event to load options based on initial ticket_number value
                ticketNumberSelect.dispatchEvent(new Event('change'));
            }
        }
    </script>
@endsection