@extends('layout.base')

@if(!$noReservation)
@section('action')
    <a class="btn btn-light-primary btn-sm rounded" id="btn-add">
        <i class="fas fa-plus"></i> Add Schedule
    </a>
@endsection


@section('content')
<div class="card card-flush">
    <!--begin::Card header-->
    <div class="card-header">
        <!--begin::Card title-->
        <div class="card-title flex-column">
            <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_1">Arrival</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_2">Departure</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="kt_tab_pane_1" role="tabpanel">
                <table class="table table-striped" id="datatableArrival">
                    <thead>
                        <tr>
                            <th></th> <!-- Kolom expand -->
                            <th>Arrival Date</th>
                            <th>Arrival Time</th>
                            <th>Arrival Person</th>
                            <th>Arrival Luggage</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
                <table class="table table-striped" id="datatableDeparture">
                    <thead>
                        <tr>
                            <th></th> <!-- Kolom expand -->
                            <th>Departure Date</th>
                            <th>Departure Time</th>
                            <th>Departure Person</th>
                            <th>Departure Luggage</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</div>
@endsection
@endif

@section('scripts')
<script>
    @if($noReservation)
    Swal.fire({
        icon: 'error',
        title: 'Access Denied',
        text: 'You must complete all reservations before continuing.'
    }).then(() => {
        window.location.href = "{{ url()->previous() }}";
    });
    @endif

    const CompactUrls = {
        _datatableArrival: "{{ route('travel-schedule.table_country_arrival', $id) }}",
        _datatableDeparture: "{{ route('travel-schedule.table_country_departure', $id) }}",
    }

    console.log(CompactUrls);

    $('#datatableArrival').DataTable({
        scrollY: true,
        scrollX: true,
        scrollCollapse: true,
        serverSide: true,
        processing: true,
        ajax: CompactUrls._datatableArrival,
        columns: [{
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
        },
            {
                data: 'arrival_date',
                defaultContent: '-'
            },
            {
                data: 'arrival_time',
                defaultContent: '-'
            },
            {
                data: 'arrival_persons',
            },
            {
                data: 'arrival_luggage',
                orderable: false,
                searchable: false
            },
            {
                data: 'action',
                defaultContent: '-'
            },
        ]
    });

    $('#datatableDeparture').DataTable({
        scrollY: true,
        scrollX: true,
        scrollCollapse: true,
        serverSide: true,
        processing: true,
        ajax: CompactUrls._datatableDeparture,
        columns: [{
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            {
                data: 'departure_date',
                defaultContent: '-'
            },
            {
                data: 'departure_time',
                defaultContent: '-'
            },
            {
                data: 'departure_persons',
            },
            {
                data: 'departure_luggage',
                orderable: false,
                searchable: false
            },
            {
                data: 'action',
                defaultContent: '-'
            },
        ]
    });

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        const target = $(e.target).attr("href");

        if (target === '#kt_tab_pane_1') {
            $('#datatableArrival').DataTable().ajax.reload(null, false); // Reload Arrival
        } else if (target === '#kt_tab_pane_2') {
            $('#datatableDeparture').DataTable().ajax.reload(null, false); // Reload Departure
        }
    });

    document.getElementById('btn-add').onclick = function () {
        const form = document.createElement('form');
        form.method = 'GET';
        form.action = "{{ route('arrival-departure') }}";

        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'user_id';
        input.value = "{{ $id }}";

        const returnUrl = document.createElement('input');
        returnUrl.type = 'hidden';
        returnUrl.name = 'return_url';
        returnUrl.value = window.location.href;

        form.appendChild(input);
        form.appendChild(returnUrl);
        document.body.appendChild(form);
        form.submit();
    };

</script>
@endsection