@extends('layout.base')

@section('css')
<link href="{{ asset('plugins/custom/fullcalendar/fullcalendar.bundle.css') }}" rel="stylesheet" type="text/css" />
<style>
    .select2-container--default .select2-selection--single {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        color: #212529 !important;
        height: 38px !important;
        border-radius: 4px !important;
    }

    /* Style teks yang ditampilkan */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #212529 !important;
        background-color: transparent !important;
        line-height: 36px !important;
    }

    /* Panah dropdown */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px !important;
    }

    /* Style dropdown saat terbuka */
    .select2-container--open .select2-dropdown {
        background-color: #ffffff !important;
        color: #212529 !important;
        border: 1px solid #ced4da !important;
        z-index: 9999 !important;
    }
</style>
@endsection

@section('action')

@endsection

@section('content')
<div class="row gy-5">
    <div class="col-md-4">
        <div class="card text-bg-primary text-white card-stretch card-flush rounded-5 p-0">
            <div class="card-header py-3">
                <div class="w-100 d-flex align-items-center justify-content-center">
                    <span class="card-title text-white text-center fw-bold fs-1">Total <br> Schedule</span>
                </div>
            </div>
            <div class="card-body d-flex flex-column gy-3 align-items-center justify-content-center pt-0 mt-0">
                <p class="card-text text-white text-center fw-bold fs-3x" id="totalSchedule">0</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-bg-danger text-white card-stretch card-flush rounded-5" p-0>
            <div class="card-header py-3">
                <div class="w-100 d-flex align-items-center justify-content-center">
                    <span class="card-title text-white text-center fw-bold fs-1">Total <br> Unmapped Schedule</span>
                </div>
            </div>
            <div class="card-body d-flex flex-column gy-3 align-items-center justify-content-center pt-0 mt-0">
                <p class="card-text text-white text-center fw-bold fs-3x" id="totalUnMapSchedule">0</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-bg-success text-white card-stretch card-flush rounded-5 p-0">
            <div class="card-success py-3">
                <div class="w-100 d-flex align-items-center justify-content-center">
                    <span class="card-title text-white text-center fw-bold fs-1">Total <br> Mapped Schedule</span>
                </div>
            </div>
            <div class="card-body d-flex flex-column gy-3 align-items-center justify-content-center pt-0 mt-0">
                <p class="card-text text-white text-center fw-bold fs-3x" id="totalMapSchedule">0</p>
            </div>
        </div>
    </div>

    <div class="col-md-12 w-100 h-100" id="containerCalendar">
        <div class="card">
            <div class="card-header pt-5">
                <ul class="nav nav-tabs flex-nowrap text-nowrap">
                    <li class="nav-item">
                        <a class="nav-link btn btn-active-light fs-3 btn-color-gray-600 btn-active-color-primary rounded-bottom-0 active" data-bs-toggle="tab" href="#kt_tab_pane_1">Calendar View</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn btn-active-light fs-3 btn-color-gray-600 btn-active-color-primary rounded-bottom-0" data-bs-toggle="tab" href="#kt_tab_pane_2">Tablist View</a>
                    </li>
                </ul>
            </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">
                        <div id="kt_docs_fullcalendar_basic"></div>
                    </div>
                    <div class="tab-pane fade" id="kt_tab_pane_2" role="tabpanel">
                        <div class="table-responsive">
                            <table class="table table-row-bordered gs-7 gy-7" id="tableTravelMapping">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Federation</th>
                                        <th>Country</th>
                                        <th>Arrival Date</th>
                                        <th>Arrival Time</th>
                                        <th>Arrival Person</th>
                                        <th>Arrival Luggage</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('modal')
<div class="modal fade" id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Detail Travel Schedule
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body row" id="bodyModalDetail">
                <div class="col-md-8 row gy-3">
                    <div class="col-md-4 d-flex flex-column">
                        <span>Federation</span>
                        <span class="fw-bold" id="inputFederationName"></span>
                    </div>
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="" class="form-label">Contact Person</label>
                            <input type="text" id="inputContactPerson" class="form-control" disabled readonly autocomplete="off"/>
                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">Phone</label>
                            <input type="text" id="inputPhone" class="form-control" disabled readonly autocomplete="off"/>
                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">E-Mail</label>
                            <input type="text" id="inputEmail" class="form-control" disabled readonly autocomplete="off"/>
                        </div>
                    </div>

                    <div class="col-md-12 accordion" id="kt_accordion_1">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="kt_accordion_1_header_1">
                                <button class="accordion-button fs-4 fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#kt_accordion_1_body_1" aria-expanded="true" aria-controls="kt_accordion_1_body_1">
                                    Arrival information
                                </button>
                            </h2>
                            <div id="kt_accordion_1_body_1" class="accordion-collapse collapse show" aria-labelledby="kt_accordion_1_header_1" data-bs-parent="#kt_accordion_1">
                                <div class="accordion-body row gy-3">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="" class="form-label"># of persons</label>
                                            <input type="text" id="inputArrivalPerson" class="form-control" disabled readonly autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="" class="form-label"># of luggage</label>
                                            <input type="text" id="inputArrivalLuggage" class="form-control" disabled readonly autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="" class="form-label">Date</label>
                                            <input type="date" id="inputArrivalDate" class="form-control" disabled readonly autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="" class="form-label">Time</label>
                                            <input type="time" id="inputArrivalTime" class="form-control" disabled readonly autocomplete="off"/>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-check"><input class="form-check-input" autocomplete="off" readonly disabled type="checkbox" id="inputByAir">
                                            <label class="form-check-label" for="byAir">By Airplane</label>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col"><input type="text" class="form-control" placeholder="Airport"  id="inputArrivalAirport" disabled readonly autocomplete="off"></div>
                                            <div class="col"><input type="text" class="form-control" placeholder="Flight #" id="inputArrivalFlight" disabled readonly autocomplete="off"></div>
                                            <div class="col"><input type="text" class="form-control" placeholder="From"  id="inputArrivalAirplaneFrom" disabled readonly autocomplete="off"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-check"><input class="form-check-input" autocomplete="off" readonly disabled type="checkbox" id="inputByTrain">
                                            <label class="form-check-label" for="byAir">By Train</label>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col"><input type="text" class="form-control" placeholder="Station"  id="inputArrivalTrainStation" disabled readonly autocomplete="off"></div>
                                            <div class="col"><input type="text" class="form-control" placeholder="Train #" id="inputArrivalTrain" disabled readonly autocomplete="off"></div>
                                            <div class="col"><input type="text" class="form-control" placeholder="From"  id="inputArrivalTrainlFrom" disabled readonly autocomplete="off"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-check"><input class="form-check-input" autocomplete="off" readonly disabled type="checkbox" id="inputByBus">
                                            <label class="form-check-label" for="byAir">By Bus</label>
                                        </div>
                                        <div class="row mt-1">
                                            <div class="col"><input type="text" class="form-control" placeholder="Station"  id="inputArrivalBusStation" disabled readonly autocomplete="off"></div>
                                            <div class="col"><input type="text" class="form-control" placeholder="Bus #" id="inputArrivalBus" disabled readonly autocomplete="off"></div>
                                            <div class="col"><input type="text" class="form-control" placeholder="From"  id="inputArrivalBuslFrom" disabled readonly autocomplete="off"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 border-start">
                    <div class="mb-3">
                        <label for="" class="form-label">Transportation</label>
                        <select name="" id="inputTransportation" class="form-select" autocomplete="off">
                            <option value="" selected></option>
                            @foreach ($transportations as $transportation)
                                <option value="{{ $transportation->id }}">[{{ $transportation->sticker }}][{{ $transportation->police_number }}] {{ $transportation->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    Close
                </button>
                <button type="button" class="btn btn-primary" id="submitTransportation">
                    Save
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('plugins/custom/fullcalendar/fullcalendar.bundle.js') }}"></script>
<script>
    const csrfToken = "{{ csrf_token() }}"
    const travelUrls = {
        _datatable: "{{ route('travel-mapping.datatable') }}",
        _update_transportation: "{{ route('travel-mapping.update_transportation') }}",
        _check_transportation: "{{ route('travel-mapping.check_transportation') }}",
        _schedule: "{{ route('travel-mapping.data_schedule') }}",
        _schedule_detail: "{{ route('travel-mapping.detail_schedule', ':id') }}",
    }
    let blockUI = new KTBlockUI(document.getElementById("containerCalendar"), {
        message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Loading...</div>',
    })
    let blockUIModal = new KTBlockUI(document.getElementById("bodyModalDetail"), {
        message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Loading...</div>',
    })

    $(function () {
        $("#inputTransportation").select2({
            width: "100%",
            placeholder: "- Select Data -",
            allowClear: false,
        })

        function renderModal(id) {
            if (!blockUI.isBlocked())
                blockUI.block()

            $.ajax({
                url: travelUrls._schedule_detail.replace(":id", id),
                dataType: "json",
                success: function (response) {
                    if (blockUI.isBlocked())
                        blockUI.release()

                    $("#inputFederationName").html(response.user.name);
                    $("#inputContactPerson").val(response.contact_person);
                    $("#inputPhone").val(response.phone);
                    $("#inputEmail").val(response.email);
                    $("#inputArrivalPerson").val(response.arrival_persons);
                    $("#inputArrivalLuggage").val(response.arrival_luggage);
                    $("#inputArrivalDate").val(response.arrival_date);
                    $("#inputArrivalTime").val(response.arrival_time);

                    if (response.arrival_by_air == 1)
                        $("#inputByAir").prop('checked', true)

                    $("#inputArrivalAirport").val(response.arrival_airport)
                    $("#inputArrivalFlight").val(response.arrival_flight)
                    $("#inputArrivalAirplaneFrom").val(response.arrival_from)
                    if (response.arrival_by_train == 1)
                        $("#inputByTrain").prop('checked', true)

                    $("#inputArrivalTrainStation").val(response.arrival_train_station)
                    $("#inputArrivalTrain").val(response.arrival_train_number)
                    $("#inputArrivalTrainlFrom").val(response.arrival_train_from)
                    if (response.arrival_by_bus == 1)
                        $("#inputByBus").prop('checked', true)

                    $("#inputArrivalBusStation").val(response.arrival_bus_station)
                    $("#inputArrivalBus").val(response.arrival_bus_number)
                    $("#inputArrivalBuslFrom").val(response.arrival_bus_from)

                    $("#submitTransportation").attr('data-id', id)

                    if (response.mapping == null)
                        $("#inputTransportation").val("").trigger('change')
                    else
                        $("#inputTransportation").val(response.mapping.id_transportation).trigger('change')


                    $("#modalDetail").modal('show')
                },
                error: function() {
                    Swal.fire("Oops Something Went Wrong", "", "error")
                    if (blockUI.isBlocked())
                        blockUI.release()
                }
            });
        }


        function renderCalendar() {
            $.ajax({
                url: travelUrls._schedule,
                dataType: "json",
                success: function (response) {
                    var todayDate = moment().startOf('day');
                    var TODAY = todayDate.format('YYYY-MM-DD');

                    let totalSchedule = response.length
                    let totalUnMapSchedule = 0
                    let totalMapSchedule = 0
                    var events = $.map(response, function (item,_) {
                        color = "blue";
                        if (item.travel_mapping_id == null) {
                            color = "red";
                            totalUnMapSchedule++
                        } else {
                            totalMapSchedule++
                        }

                        return {
                            travel_id: item.id,
                            mapping_id: item.travel_mapping_id,
                            title: item.name,
                            start: item.arrival_date,
                            className: "fc-event-danger fc-event-solid-warning",
                            color: color
                        }
                    });
                    $("#totalSchedule").html(totalSchedule)
                    $("#totalUnMapSchedule").html(totalUnMapSchedule)
                    $("#totalMapSchedule").html(totalMapSchedule)

                    var calendarEl = document.getElementById('kt_docs_fullcalendar_basic');
                    var calendar = new FullCalendar.Calendar(calendarEl, {
                        headerToolbar: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                        },

                        height: 800,
                        contentHeight: 780,
                        aspectRatio: 3,  // see: https://fullcalendar.io/docs/aspectRatio

                        nowIndicator: true,
                        now: TODAY + 'T09:25:00', // just for demo

                        views: {
                            dayGridMonth: { buttonText: 'month' },
                            timeGridWeek: { buttonText: 'week' },
                            timeGridDay: { buttonText: 'day' }
                        },

                        initialView: 'dayGridMonth',
                        initialDate: TODAY,

                        editable: true,
                        dayMaxEvents: true, // allow "more" link when too many events
                        navLinks: true,
                        events: events,
                        eventClick: function(info) {
                            popover = $(document).find("div.fc-popover.fc-more-popover.fc-day.fc-day-future")
                            if (popover.length > 0)
                                popover.remove()

                            renderModal(info.event.extendedProps.travel_id)
                        }

                    });

                    calendar.render();
                }
            });
        }

        renderCalendar()

        $(document).on('click', '#submitTransportation', function() {
            let id = $(this).data('id')
            let date = $("#inputArrivalDate").val()
            let transportation = $("#inputTransportation").val();
            if (transportation == "")
                return Swal.fire("Please Fill Transportation", "", "error")

            $.ajax({
                type: "post",
                url: travelUrls._check_transportation,
                data: {
                    _token: csrfToken,
                    date: date,
                    id_transportation: transportation
                },
                dataType: "json",
                complete: function(response) {
                    let count = response.responseJSON.data;
                    if (count > 1) {
                        Swal.fire({
                            title: 'Are you sure you want to save this data?',
                            text: `Transportation already has ${count} schedule on ${date}`,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: 'Yes',
                            cancelButtonText: 'Cancel',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.ajax({
                                    type: "POST",
                                    url: travelUrls._update_transportation,
                                    data: {
                                        _token: csrfToken,
                                        id: id,
                                        id_transportation: transportation
                                    },
                                    dataType: "json",
                                    success: function (response) {
                                        renderCalendar()

                                        Swal.fire("Update Data Success", "", "success")
                                        $("#modalDetail").modal('hide')

                                        if (blockUIModal.isBlocked())
                                            blockUIModal.release()
                                    },
                                    error: function() {
                                        if (blockUIModal.isBlocked())
                                            blockUIModal.release()
                                    }
                                });
                            }
                        });
                    } else {
                        $.ajax({
                            type: "POST",
                            url: travelUrls._update_transportation,
                            data: {
                                _token: csrfToken,
                                id: id,
                                id_transportation: transportation
                            },
                            dataType: "json",
                            success: function (response) {
                                renderCalendar()

                                Swal.fire("Update Data Success", "", "success")
                                $("#modalDetail").modal('hide')

                                if (blockUIModal.isBlocked())
                                    blockUIModal.release()
                            },
                            error: function() {
                                if (blockUIModal.isBlocked())
                                    blockUIModal.release()
                            }
                        });
                    }
                }
            });
        })

        const datatable = $("#tableTravelMapping").DataTable({
            scrollY: true,
            scrollX: true,
            scrollCollapse: true,
            serverSide: true,
            processing: true,
            ajax: travelUrls._datatable,
            columns: [
                // {
                //     className: 'dt-control',
                //     orderable: false,
                //     data: null,
                //     defaultContent: '',
                // },
                {
                    data: "DT_RowIndex",
                    orderable: false,
                    searchable: false,
                },
                {
                    data: 'name',
                    name: "users.name",
                    defaultContent: '-'
                },
                {
                    data: 'country',
                    name: "countries.name",
                    defaultContent: '-'
                },
                {
                    data: 'arrival_date',
                    defaultContent: '-'
                },
                {
                    data: 'arrival_time',
                    defaultContent: '-'
                },
                {
                    data: 'arrival_persons',
                },
                {
                    data: 'arrival_luggage',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    defaultContent: '-'
                },
            ]
        })

        $(document).on('click', '.view-transport', function() {
            let id = $(this).data('id')
            return renderModal(id)
        })

        $(".nav-link").click(function() {
            setTimeout(() => {
                $('window').trigger('resize')
            }, 1000);
        })
    });
</script>
@endsection