<div class="card-body p-0">
    <div class="table-responsive--md  table-responsive">
        <table class="table table--light style--two">
            <thead>
                <tr>
                    <th>@lang('Booking Time')</th>
                    <th>@lang('Date of Journey')</th>
                    <th>@lang('Departure')</th>
                    <th>@lang('PNR Number')</th>
                    <th>@lang('Trip')</th>
                    <th>@lang('Ticket Count')</th>
                    <th>@lang('Amount')</th>
                    <th>@lang('Status')</th>
                    <th>@lang('Action')</th>
                </tr>
            </thead>
            <tbody>
                @forelse($soldTickets as $soldTicket)
                    @php
                        $sourceDestination = getStoppageInfo($soldTicket->source_destination)->pluck('name');
                        $source = $sourceDestination[0];
                        $destination = $sourceDestination[1];
                    @endphp
                    <tr>
                        <td>{{ showDateTime($soldTicket->created_at) }}</td>
                        <td>{{ showDateTime($soldTicket->date_of_journey, 'M d, Y') }}</td>
                        <td>
                            {{ showDateTime($soldTicket?->trip?->start_time, 'h:i a') }}
                            <span class="d-block">{{ __($soldTicket?->trip?->startingPoint?->name) }}</span>
                        </td>
                        <td>{{ __($soldTicket->pnr_number) }}</td>
                        <td class="trip_title">{{ __($soldTicket?->trip?->title) }}</td>
                        <td>{{ __($soldTicket->ticket_count) }}</td>
                        <td>
                            {{ gs('cur_sym') }}
                            {{ showAmount($soldTicket->sub_total, currencyFormat: false) }}
                        </td>
                        <td>
                            @php
                                echo $soldTicket->statusBadge;
                            @endphp
                        </td>
                        <td>
                            <button class="btn btn-outline--info btn-sm" data-bs-toggle="dropdown" type="button"
                                aria-expanded="true">
                                <i class="las la-ellipsis-v"></i>@lang('More')
                            </button>
                            <div class="dropdown-menu" data-popper-placement="bottom-end">
                                <button class="dropdown-item btn btn-outline--dark detailBtn"
                                    data-ticket="{{ $soldTicket }}" data-from="{{ __($source) }}"
                                    data-to="{{ __($destination) }}"
                                    data-cancel-time="{{ showDateTime($soldTicket->cancel_time) }}"
                                    data-boarding-point="{{ __($soldTicket->boarding->name) }}">
                                    <i class="la la-desktop"></i> @lang('Details')
                                </button>
                                @if ($soldTicket->status != Status::BOOKED_CANCELED && $soldTicket->trip->status != Status::TRIP_COMPLETED)
                                    <a href="{{ route('counter.manager.booking.ticket.print', $soldTicket->id) }}"
                                        class="dropdown-item btn btn-outline--dark" target="_blank">
                                        <i class="la la-print"></i> @lang('Print')
                                    </a>
                                    @if (
                                        \Carbon\Carbon::parse(now()) <
                                            \Carbon\Carbon::parse($soldTicket?->trip?->start_time)->subHours(gs('ticket_cancel_time') ?? 0))
                                        @php
                                            $message = 'Are you sure you want to cancel this booking?';
                                            if (gs('ticket_cancel_fee') > 0) {
                                                $message .=
                                                    ' A cancellation fee of ' .
                                                    showAmount(gs('ticket_cancel_fee')) .
                                                    ' per ticket will be applied, with a total fee of ' .
                                                    showAmount(gs('ticket_cancel_fee') * $soldTicket->ticket_count) .
                                                    '.';
                                            }
                                        @endphp
                                        <button class="dropdown-item btn btn-outline--dark confirmationBtn"
                                            data-action="{{ route('counter.manager.bookings.cancel', $soldTicket->id) }}"
                                            data-question="{{ __($message) }}">
                                            <i class="la la-times"></i> @lang('Cancel Booking')
                                        </button>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td class="text-muted text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@if (!blank($soldTickets) && $soldTickets->hasPages())
    <div class="card-footer py-4">
        {{ paginateLinks($soldTickets) }}
    </div>
@endif

<div class="modal fade" id="detailModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@lang('Ticket Details')</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <i class="las la-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold trip-title"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Date of Journey')</span>
                        <span class="date-of-journey"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Pickup Point')</span>
                        <span class="from"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Dropping Point')</span>
                        <span class="to"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Boarding Point')</span>
                        <span class="boarding-point"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Total Seats')</span>
                        <span class="ticket-count"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Unit Price')</span>
                        <span class="ticket-unit-price"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Total Amount')</span>
                        <span class="ticket-price"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Seat Number')</span>
                        <span class="seat-number"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between d-none cancelTimeArea">
                        <span class="fw-bold">@lang('Cancel Time')</span>
                        <span class="cancel-time"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-center">
                        <span class="fw-bold text--cyan">@lang('Passenger Details')</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Name')</span>
                        <span class="passenger-name"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Mobile Number')</span>
                        <span class="passenger-mobile"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span class="fw-bold">@lang('Email')</span>
                        <span class="passenger-email"></span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between border-0">
                        <span class="fw-bold">@lang('Gender')</span>
                        <span class="passenger-gender"></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.detailBtn').on('click', function() {
                var modal = $('#detailModal');
                var ticket = $(this).data('ticket');
                let userName = '';
                let mobile = '';
                let email = '';
                let gender = '';
                let cancelTime = $(this).data('cancel-time');
                if (ticket.user_id > 0) {
                    userName = ticket.user?.firstname + ' ' + ticket.user?.lastname;
                    mobile = ticket.user?.mobile;
                    email = ticket.user?.email;
                    gender = (ticket.user?.gender == 1) ? "@lang('Male')" : ((ticket.user?.gender == 2) ?
                        "@lang('Female')" : "@lang('Others')");
                } else if (ticket.guest_user_id > 0) {
                    userName = ticket.guest_user?.name;
                    mobile = ticket.guest_user?.mobile;
                    email = ticket.guest_user?.email;
                    gender = (ticket.guest_user?.gender == 1) ? "@lang('Male')" : ((ticket.guest_user
                        ?.gender == 2) ? "@lang('Female')" : "@lang('Others')");
                }

                modal.find('.trip-title').text(ticket.trip.title);
                modal.find('.date-of-journey').text(ticket.date_of_journey);
                modal.find('.from').text($(this).data('from'));
                modal.find('.to').text($(this).data('to'));
                modal.find('.boarding-point').text($(this).data('boarding-point'));
                modal.find('.ticket-count').text(parseFloat(ticket.ticket_count).toFixed(2));
                modal.find('.ticket-unit-price').text(parseFloat(ticket.unit_price).toFixed(2));
                modal.find('.ticket-price').text(parseFloat(ticket.sub_total).toFixed(2));
                modal.find('.seat-number').text(ticket.seats);
                modal.find('.passenger-name').text(userName);
                modal.find('.passenger-mobile').text(mobile);
                modal.find('.passenger-email').text(email);
                modal.find('.passenger-gender').text(gender);
                if (cancelTime != '-' && cancelTime != '') {
                    modal.find('.cancelTimeArea').removeClass('d-none');
                    modal.find('.cancel-time').text(cancelTime);
                } else {
                    modal.find('.cancelTimeArea').addClass('d-none');
                    modal.find('.cancel-time').text("");
                }
                modal.modal('show');
            });

        })(jQuery);
    </script>
@endpush
@push('style')
    <style>
        .trip_title {
            max-width: 310px;
            white-space: wrap !important;
        }
    </style>

@endpush
