@extends('layouts.master')
@section('content')
    <div class="container-xxl">
        <x-breadcrumb model="Bookings"></x-breadcrumb>
        <div class="card">
            <div class="card-body">
                 <div class="d-flex justify-content-end mb-3">
                {{-- <a href="{{ route('admin.bookings.export') }}" class="btn btn-primary">
                    Export Bookings
                </a> --}}
            </div>
                <div class="d-flex justify-content-end">
                <a href="{{route('admin.bookings.create')}}" class="btn btn-sm btn-dark mb-2"><i class='bx bx-xs bx-plus'> </i>Create</a>
            </div>
                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">
                        <x-table.header :headers="['first_name','last_name', 'phone', 'package', 'Received On',  'Actions']" />
                        <tbody id="tablecontents"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="viewModel" tabindex="-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    {{-- <h5 class="modal-title">Booking Detail</h5> --}}
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>
@endsection
@push('custom_js')
    <script>
        $(document).on('show.bs.modal', '.modal', function(event) {
            let button = $(event.relatedTarget);
            let contactId = button.data('show-id');
            let modal = $(this);

            let url = "{{ route('admin.bookings.show', ':id') }}".replace(':id', contactId);
            modal.find('.modal-body').html("<p class='d-flex justify-content-center'>Loading...</p>");
            $.ajax({
                url: url,
                type: 'get',
                dataType: 'html',
                success: function(response) {
                    modal.find('.modal-body').html(response);
                }
            });
        });
    </script>
    @include('_helpers.yajra', ['url' => route('admin.bookings.index'), 'columns' => $columns])
    @include('_helpers.swal_delete')
    @include('_helpers.status_change', ['url' => route('admin.bookings.status')])
@endpush