@extends('layout.base')

@section('action')
@endsection


@section('content')
<div class="card card-flush">
    <!--begin::Card header-->
    <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>Federation</th>
                            <th>Country</th>
                            <th>Last Update</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    const CompactUrls = {
        _datatableArrival: "{{ route('travel-schedule.datatable_arrival') }}",
        _datatableDeparture: "{{ route('travel-schedule.datatable_departure') }}",
    }

    $('#datatableArrival').DataTable({
        scrollY: true,
        scrollX: true,
        scrollCollapse: true,
        serverSide: true,
        processing: true,
        ajax: CompactUrls._datatableArrival,
        columns: [
            {
                data: 'name',
                defaultContent: '-'
            },
            {
                data: 'country',
                defaultContent: '-'
            },
            {
                data: 'last_update',
                defaultContent: '-'
            },
            {
                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: 'name',
                defaultContent: '-'
            },
            {
                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
        }
    });

</script>
@endsection