@extends($activeTemplate . 'layouts.frontend')
@section('content')
    <!-- booking history Starts Here -->
    <section class="dashboard-section padding-top padding-bottom">
        <div class="container">
            <div class="dashboard-wrapper">
                <div class="booking-table-wrapper">
                    <div class="d-flex justify-content-between mb-2">
                        <div>
                            <h5>@lang('Active Booking')</h5>
                        </div>
                        <div>
                            <a href="{{ route('user.ticket.history') }}" class="btn btn--base">@lang('Booking History')</a>
                        </div>
                    </div>
                    <table class="booking-table">
                        <thead>
                            <tr>
                                <th>@lang('PNR Number')</th>
                                <th>@lang('Starting Point')</th>
                                <th>@lang('Dropping Point')</th>
                                <th>@lang('Boarding Point')</th>
                                <th>@lang('Journey Date')</th>
                                <th>@lang('Pickup Time')</th>
                                <th>@lang('Booked Seats')</th>
                                <th>@lang('Trip Status')</th>
                                <th>@lang('Total Fare')</th>
                                <th>@lang('Action')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($bookedTickets as $bookedTicket)
                                <tr>
                                    <td class="ticket-no" data-label="@lang('PNR Number')">{{ __($bookedTicket->pnr_number) }}</td>
                                    <td class="pickup" data-label="Starting Point">{{ __($bookedTicket->pickup->name) }}</td>
                                    <td class="drop" data-label="Dropping Point">{{ __($bookedTicket->drop->name) }}</td>
                                    <td class="drop" data-label='Boarding Point'>{{ __($bookedTicket->boarding->name) }}</td>
                                    <td class="date" data-label="Journey Date">{{ showDateTime($bookedTicket->date_of_journey, 'd M, Y') }}</td>
                                    <td class="time" data-label="Pickup Time">{{ showDateTime($bookedTicket->trip->start_time, 'h:i a') }}</td>
                                    <td class="seats" data-label="Booked Seats">{{ implode(',', $bookedTicket->seats) }}</td>
                                    <td data-label="@lang('Trip Status')">
                                        @php
                                            echo $bookedTicket->trip->statusBadge
                                        @endphp
                                    </td>
                                    <td class="fare" data-label="Fare">{{ showAmount($bookedTicket->sub_total) }}</td>
                                    <td class="action" data-label="Action">
                                        <div class="action-button-wrapper">
                                            <a href="{{ route('user.booking.detail', $bookedTicket->pnr_number) }}" class="checkinfo me-1" data-bs-toggle="tooltip" data-bs-title="@lang('Booking Detail')"><i class="las la-desktop"></i></a>
                                            @if($bookedTicket->status == Status::BOOKED_APPROVED)
                                                <a href="{{ route('user.ticket.print', $bookedTicket->id) }}" target="_blank" class="print" data-bs-toggle="tooltip" data-bs-title="@lang('Download Ticket')"><i class="las la-file-download"></i></a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="text-center" colspan="100%">{{ __($emptyMessage) }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <!-- booking history end Here -->

    <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"> @lang('Ticket Booking History')</h5>
                    <button type="button" class="w-auto btn--close" data-bs-dismiss="modal"><i class="las la-times"></i></button>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--danger w-auto btn--sm px-3" data-bs-dismiss="modal"></i>
                        @lang('Close')
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('style')
    <style>
        .modal-body p:not(:last-child) {
            border-bottom: 1px dashed #ebebeb;
            padding: 5px 0;
        }
    </style>
@endpush

@push('script')
    <script>
        "use strict"

        $('.checkinfo').on('click', function() {
            var info = $(this).data('info');
            var modal = $('#infoModal');
            var html = '';
            html += `
                    <p class="d-flex flex-wrap justify-content-between pt-0"><strong>@lang('Journey Date')</strong>  <span>${info.date_of_journey}</span></p>
                    <p class="d-flex flex-wrap justify-content-between"><strong>@lang('PNR Number')</strong>  <span>${info.pnr_number}</span></p>
                    <p class="d-flex flex-wrap justify-content-between"><strong>@lang('Route')</strong>  <span>${info.trip.start_from.name} @lang('to') ${info.trip.end_to.name}</span></p>
                    <p class="d-flex flex-wrap justify-content-between"><strong>@lang('Fare')</strong>  <span>${parseInt(info.sub_total).toFixed(2)} {{ __(gs('cur_text')) }}</span></p>
                    <p class="d-flex flex-wrap justify-content-between"><strong>@lang('Status')</strong>  <span>${info.status == 1 ? '<span class="badge badge--success">@lang('Successful')</span>' : info.status == 2 ? '<span class="badge badge--warning">@lang('Pending')</span>' : '<span class="badge badge--danger">@lang('Rejected')</span>'}</span></p>
                `;
            modal.find('.modal-body').html(html);
        })
    </script>
@endpush
