@extends('modules.head') @section('contenido')
<div class="calendar_container">
    <div>
        <h3>Logistics planning</h3>
    </div>
    <div id="calendar" 
         data-blocked-vehicles="{{ $blocked_vehicles_in_branch_starting_tomorrow }}" 
         data-vehicles-in-deliveries="{{ $vehicles_committed_in_deliveries_starting_tomorrow }}">
    </div>
</div>
<!-- Modal Html -->
<button id="captureDateModalBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#captureDateModal" style="display:none">Show modal</button>
<div class="modal fade" id="captureDateModal" data-vehicles="{{ $vehicles }}" tabindex="-1" role="dialog" aria-labelledby="captureDateModalLabel" aria-hidden="true">
</div>
<input type="hidden" name="branch_id" id="branch_id" value="{{ session('branch_id') }}">
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
<style>
    .calendar_container {
        padding: 10px;
    }

    .calendar_container h3 {
        font-weight: 700;
        font-size: 30px;
    }

    .calendar_container>div {
        margin-top: 20px;
    }

    #calendar {
        border-radius: 10px;
        padding: 10px;
        background-color: white;
        max-width: 600px;
    }

    .fc-toolbar-chunk>.fc-button {
        display: none !important;
    }

    table.fc-scrollgrid a {
        color: black !important;
    }

    table td {
        cursor: pointer;
    }

    td.fc-day-disabled {
        cursor: not-allowed;
    }

    .modal-dialog {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    #vehicleCheckBoxesContainer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    #vehicleCheckBoxesContainer>div.form-check {
        margin-bottom: 5px;
    }

    #vehicleCheckBoxesContainer .form-check input[type="checkbox"] {
        margin-right: 5px;
    }

    #optionsRadiosContainer {
        display: flex;
        flex-direction: row;
    }

    #optionsRadiosContainer input[type='radio'] {
        width: 18px;
        height: 18px;
    }

    #optionsRadiosContainer label {
        margin-right: 5px;
        font-size: 20px;
    }
</style>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        // Getting tomorrow date formatted
        let today = new Date();
        let next_day = new Date(today);
        next_day.setDate(today.getDate() + 1);
        let tomorrow_formatted = next_day.toISOString().slice(0, 10);

        // Instantiating the calendar
        let calendarEl = document.getElementById('calendar');
        let blocked_vehicles = JSON.parse(document.getElementById('calendar').getAttribute('data-blocked-vehicles'));
        let vehicles_in_deliveries = JSON.parse(document.getElementById('calendar').getAttribute('data-vehicles-in-deliveries'));

        let calendar = new FullCalendar.Calendar(calendarEl, {
            hiddenDays: [0, 6], // hides sundays and saturdays
            showNonCurrentDates: false, // show only current month dates
            validRange: { // disabled all dates before tomorrow
                start: tomorrow_formatted,
            },
            dateClick: function(info) { // when client selects date
                let selected_date = info.dateStr;
                let all_vehicles = JSON.parse(document.getElementById('captureDateModal').getAttribute('data-vehicles')); // get all vehicles data in branch
                
                // If no vehicles in the branch
                if (!all_vehicles.length) {
                    swal('', 'No vehicles in this branch.', 'warning');
                    return false;
                }

                // Returns available vehicles that day
                function getAvailableVehiclesThatDay() {
                    $.ajax({
                        type: 'get',
                        url: '/delivery-orders/get-vehicles-available/' + selected_date,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function(r) {
                            let available_vehicles = r;
                            if (available_vehicles) {
                                let not_available_vehicles = getNotAvailableVehicles(all_vehicles, available_vehicles);
                                // If no vehicle is available the selected day
                                if (not_available_vehicles.length == all_vehicles.length) {
                                    swal('', 'No available vehicles for this day.', 'info');
                                    return false;
                                }

                                // If at least one vehicle is available the selected day
                                if (selected_date) {
                                    displayWhatToBlockModal(selected_date, available_vehicles);
                                }
                            }
                        }
                    })
                }
                getAvailableVehiclesThatDay();
            },
            eventClick: function(e) { 
                let event_id = e.event._def.publicId;
                let event_title = e.event._def.title;
                let event_date = e.event.start;

                // Only is click is on vehicle blocked
                if (isBlockedEvent(event_title)) {
                    removeEvent(event_id, event_title, event_date);
                }
                else {
                    swal('', "You can't remove a delivery.", 'warning');
                }
            },
            eventSources: [
                {
                    events: blocked_vehicles,
                },
                {
                    events: vehicles_in_deliveries,
                    color: 'orange',
                    textColor: 'white'
                },
            ]
        });

        function isBlockedEvent(event_title){
            if (event_title.includes("blocked")) {
               return true;
            }
            return false;
        }

        function getNotAvailableVehicles(all_vehicles, available_vehicles) {
            let available_vehicles_ids = available_vehicles.map(v => v.id);
            return all_vehicles.filter(function(v) {
                return available_vehicles_ids.indexOf(v.id) == -1;
            });
        }

        function displayWhatToBlockModal(selected_date, available_vehicles) {
            let modal = document.getElementById('captureDateModal');
            modal.innerHTML = '';
            let modal_content = `<div class="modal-dialog" role="document">
                                <div class="modal-content">
                                 <div class="modal-header">
                                  <h2 class="modal-title" id="captureDateModalLabel">Block day or vehicle(s)?</h2>
                                  <h4>Selected day: ${selected_date}</h4>
                                 </div>
                                 <div class="modal-body">
                                   <div id="optionsRadiosContainer" class="btn-group btn-group-toggle" data-toggle="buttons">
                                    <div>
                                      <input type="radio" id="day" name="radio_btn_option" value="day"/>
                                      <label for="day">Day</label>
                                    </div>
                                    <div>
                                      <input type="radio" id="vehicles" name="radio_btn_option" value="vehicles" />
                                      <label for="vehicles">Vehicles</label>
                                    </div>
                                   </div>
                                   <div id="vehicleCheckBoxesContainer" class="form-group form-check" style="display:none">
                       
                                   </div>
                                 </div>
                                 <div class="modal-footer">
                                  <button id="close_btn" type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                  <button id="block_btn" type="button" class="btn btn-danger">Block</button>
                                 </div>
                                </div>
                        </div>`;

            modal.innerHTML = modal_content; // Appending modal content

            let vehicle_check_box_container = document.getElementById("vehicleCheckBoxesContainer"); // Appending vehicles options
            vehicle_check_box_container.innerHTML = renderAllVehicles(available_vehicles);

            let captureDateModalBtn = document.querySelector('#captureDateModalBtn'); // Showing the modal by triggering a click
            captureDateModalBtn.click();

            let radios = document.getElementsByName('radio_btn_option'); // Handling the radio buttons
            for (i = 0; i < radios.length; i++) {
                let radio = radios[i];
                radio.addEventListener("click", function(e) {
                    document.getElementById("vehicleCheckBoxesContainer").style.display = "none";
                    if (e.target.value == "vehicles") {
                        document.getElementById("vehicleCheckBoxesContainer").style.display = "block";
                    }
                })
            }

            block_btn.addEventListener("click", function() { // Handling submission
                blockDayOrVehicles(selected_date);
            }, false);
        }

        function blockDayOrVehicles(selected_day) {
            if (!selected_day) { // Validating date
                swal('Alert!', 'Please, select a day.', 'info');
                return false;
            }
            let radioButtonChecked = document.querySelector("input[name=radio_btn_option]:checked"); // Validating user selects an option between Day and Vehicles
            if (!radioButtonChecked) {
                swal('Alert!', 'Please, choose an option.', 'info');
                return false;
            }

            let selected_vehicles = [];
            if (radioButtonChecked.value == "day") {
                let branch_vehicles = JSON.parse(document.getElementById('captureDateModal').getAttribute('data-vehicles'));
                let all_vehicles_ids = branch_vehicles.map(e => e.id);
                selected_vehicles = all_vehicles_ids;
            } else {
                let vehicle_checkedBoxes = getCheckedBoxes("vehicle_checkbox");
                if (!vehicle_checkedBoxes) {
                    swal('Alert', 'Please select at least one vehicle.', 'info');
                    return false;
                } else {
                    for (let i = 0; i < vehicle_checkedBoxes.length; i++) {
                        selected_vehicles.push(vehicle_checkedBoxes[i].value);
                    }
                }
            }

            let data = {
                selected_day: selected_day,
                selected_vehicles: selected_vehicles,
                branch_id: document.getElementById('branch_id').value,
            }
            $.ajax({
                type: 'post',
                url: `/deliveries/calendar/block-day`,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: data,
                success: function(r) {
                    if (r.status) {
                        swal({
                            title: 'Success!',
                            text: r.message,
                            icon: 'success'
                        }).then(function(ok) {
                            if (ok) {
                                location.reload();
                            }
                        })
                    } else {
                        swal({
                            title: '',
                            text: r.message,
                            icon: 'warning'
                        }).then(function(ok) {
                            if (ok) {
                                document.getElementById('close_btn').click(); // closing modal
                            }
                        })
                    }
                },
                error: function(e) {
                    console.log(e);
                },
            })

        }

        // Render all vehicles in checkboxes
        function renderAllVehicles(vehicles) {
            let options = '';
            vehicles.forEach(vehicle => {
                options +=
                    `<div class="form-check">
                   <label class="form-check-label">
                     <input type="checkbox" name="vehicle_checkbox" class="form-check-input" value="${vehicle.id}">${vehicle.name}
                   </label>
                 </div>`;
            });
            return options;
        }

        // Pass the checkbox name to the function
        function getCheckedBoxes(checkbox_name) {
            let checkboxes = document.getElementsByName(checkbox_name);
            let checkboxesChecked = [];
            // loop over them all
            for (let i = 0; i < checkboxes.length; i++) {
                // And stick the checked ones onto an array...
                if (checkboxes[i].checked) {
                    checkboxesChecked.push(checkboxes[i]);
                }
            }
            // Return the array if it is non-empty, or null
            return checkboxesChecked.length > 0 ? checkboxesChecked : null;
        }

        function removeEvent(event_id, event_title, event_date) {
            if (event_id) {
                event_title = event_title.split(" ")[0];
                event_date = event_date.toISOString().split('T')[0];
                swal({
                        text: `Do you want to unblock ${event_title} on ${event_date}?`,
                        icon: "info",
                        buttons: ["Cancel", "Ok"],
                    })
                    .then((value) => {
                        if (value) {
                            // removing event logic
                            $.ajax({
                                url: `/deliveries/calendar/unblock/${event_id}`,
                                type: "GET",
                                contentType: "application/json",
                                headers: {
                                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                                    "Content-Type": "application/json",
                                },
                                success: function(r) {
                                    if (r.status) {
                                        swal({
                                            title: "Success",
                                            text: "It was successfully removed.",
                                            icon: "success",
                                        }).then((ok) => {
                                            if (ok) {
                                                location.reload(true);
                                            }
                                        })
                                    } else {
                                        swal({
                                            title: "Alert",
                                            text: "It was an error while trying to remove.",
                                            icon: "warning"
                                        })
                                    }
                                },
                                error: function(e) {
                                    console.log(e);
                                },
                            });
                        }
                    });
            }
        }

        calendar.render();
    });
</script>
@endsection