@extends('modules.head') @section('contenido')
<div class="calendar_container">
    <div>
        <button id="showRemoveEventsModal" type="button" class="btn btnAux pull-right" style="margin-left:5px;" data-toggle="modal" data-target="#removeEventsModal">Remove events</button>
        <button id="showCopyEventsModal" type="button" class="btn btnAdd pull-right" data-toggle="modal" data-target="#copyEventsModal">Copy events</button>
    </div>
    <div>
        <h3>Assign counties per vehicle</h3>
    </div>
    <div id="calendar" data-assigned-vehicles="{{ $assignedVehicles }}" data-vehicles-in-replenish-orders="{{ $vehiclesInReplenishOrders }}">
    </div>
</div>


<!-- ASSIGN DAY TO VEHICLE AND COUNTIES -->
<button type="button" id="assignmentModalBtn" class="btn btn-primary" data-toggle="modal" data-target="#assignmentModal" style="display:none">
</button>
<div class="modal fade" id="assignmentModal" tabindex="-1" role="dialog" aria-labelledby="assignmentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-header-h2" class="headers">Plan ahead:</h2>
                <h4 id="modal-header-h4" class="headers"></h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button id="submitBtn" type="button" class="btn btnAux btn-danger">Submit</button>
            </div>
        </div>
    </div>
</div>

<!-- COPY MOVE EVENTS MODAL -->
<div id="copyEventsModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header" style="background-color: #2eae76; color: #fff;">
                <h3 class="modal-title">Select Range</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="start-date" class="col-form-label">Start Date:</label>
                        <input type="date" class="form-control" id="start-date">
                    </div>
                    <div class="form-group">
                        <label for="end-date" class="col-form-label">End Date:</label>
                        <input type="date" class="form-control" id="end-date">
                    </div>
                    <div class="form-group">
                        <label for="new-start-date" class="col-form-label">New Start Date:</label>
                        <input type="date" class="form-control" id="new-start-date">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="copyEventsBtn" type="button" class="btn copy-range"  data-dismiss="modal">Copy</button>
            </div>
        </div>

    </div>
</div>

<!-- REMOVE EVENTS MODAL -->
<div id="removeEventsModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header remove-range">
                <h3 class="modal-title">Select Range</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="start-date-delete" class="col-form-label">Start Date:</label>
                        <input type="date" class="form-control" id="start-date-delete">
                    </div>
                    <div class="form-group">
                        <label for="end-date-delete" class="col-form-label">End Date:</label>
                        <input type="date" class="form-control" id="end-date-delete">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id="removeEventsBtn" type="button" class="btn btnAux" data-dismiss="modal">Delete</button>
            </div>
        </div>

    </div>
</div>


<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: 700px;
    }

    .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-header {
        border-bottom: 0 none;
    }

    .headers {
        margin-left: 15px;
    }

    .modal-footer {
        border-top: 0 none;
    }

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

    .copy-range{
        background-color: #2eae76; color: #fff;
    }
    .remove-range{
        background-color: #c73535; color: #fff;
    }

</style>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        let today = new Date();
        let today_formatted = today.toISOString().slice(0, 10);
        // Instantiating the calendar
        let assignedVehicles = JSON.parse(document.getElementById('calendar').getAttribute('data-assigned-vehicles'));
        let vehiclesInReplenishOrders = JSON.parse(document.getElementById('calendar').getAttribute('data-vehicles-in-replenish-orders'));
        let calendarEl = document.getElementById('calendar');
        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: today_formatted,
            },
            dateClick: function(info) { // when client selects date
                let selectedDate = info.dateStr;
                if (selectedDate.length) {
                    $.ajax({
                        type: 'get',
                        url: '/deliveries/calendar/assignment/get-branch-vehicles-and-counties',
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function(r) {
                            if (!r.data.vehicles.length) {
                                swal('', 'No vehicles in this branch.', 'info');
                                return false;
                            }
                            if (!r.data.counties.length) {
                                swal('', 'No counties assigned to this branch.', 'info');
                                return false;
                            }
                            displayVehiclesAndCountiesInBranch(selectedDate, r.data.vehicles, r.data.counties);
                            $('#vehicles').on('change', function() {
                                $('.form-check-input').prop('checked', false).prop('disabled', false);
                                if ($(this).val()) {
                                    getVehicleCounties(r.data.counties, selectedDate, $(this).val());
                                }
                            });
                            // When hitting submit
                            $('#submitBtn').click(function() {
                                let vehicle = $('#vehicles').val();

                                if (vehicle.trim() == "") {
                                    swal('', 'Please select a vehicle.', 'info');
                                    return false;
                                }

                                let counties = getCheckedBoxes('counties');
                                if (!counties) {
                                    swal('', 'Select at least one county.', 'info');
                                    return false;
                                }

                                let countiesIds = counties.map(function(county) {
                                    return county.value;
                                });

                                let data = {
                                    date: selectedDate,
                                    vehicleId: vehicle,
                                    countiesIds: countiesIds
                                };

                                // Saving relationship between vehicle and counties
                                $.ajax({
                                    type: 'post',
                                    url: '/deliveries/calendar/assignment/plan-vehicle-and-counties',
                                    headers: {
                                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                                    },
                                    data: data,
                                    success: function(r) {
                                        if (r.status) {
                                            swal('', 'Day was successfully assigned.', 'success').then(function(val) {
                                                if (val) {
                                                    location.reload();
                                                }
                                            });
                                        } else {
                                            swal('', r.message, 'warning').then(function(val) {
                                                if (val) {
                                                    location.reload();
                                                }
                                            });
                                        }
                                    },
                                    error: function(e) {
                                        console.log(e)
                                    }
                                })
                            });
                        }
                    })
                } else {
                    swal('', 'No date has been selected.', 'info');
                }
            },
            eventClick: function(e) {
                // When Clicking On Replenish Order Vehicle
                if (e.event._def.extendedProps.code && e.event._def.extendedProps.code.startsWith('RO-')) {
                    swal('', 'Cannot remove vehicle from a replenish order.', 'info');
                    return false;
                }

                let eventId = e.event._def.publicId;
                let eventTitle = e.event._def.title;
                let eventDate = e.event.start;
                eventDate = eventDate.toISOString().split('T')[0];
                if (eventId) {
                    let data = {
                        eventId: eventId,
                        date: eventDate
                    }
                    swal({
                            title: 'Are you sure?',
                            text: 'Remove ' + eventTitle + ' from ' + formatDateMonthDayYear(eventDate) + '?',
                            icon: "info",
                            buttons: ["Cancel", "Ok"],
                        })
                        .then((value) => {
                            if (value) {
                                $.ajax({
                                    url: `/deliveries/calendar/assignment/remove-vehicle-event`,
                                    type: "post",
                                    contentType: "application/json",
                                    headers: {
                                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                                        "Content-Type": "application/json",
                                    },
                                    data: JSON.stringify(data),
                                    success: function(r) {
                                        if (r.status) {
                                            swal({
                                                title: "Success",
                                                text: r.message,
                                                icon: "success",
                                            }).then((ok) => {
                                                if (ok) {
                                                    location.reload();
                                                }
                                            })
                                        } else {
                                            swal({
                                                title: "Alert",
                                                text: r.message,
                                                icon: "warning"
                                            })
                                        }
                                    },
                                    error: function(e) {
                                        console.log(e);
                                    },
                                });
                            }
                        });

                }
            },
            eventSources: [{
                events: assignedVehicles,
                color: '#52c234',
            }, {
                events: vehiclesInReplenishOrders,
            }],
            eventDidMount: function(info) {
                setColorBasedOnVehicleName(info);
            }
        });

        function setColorBasedOnVehicleName(info) {
            let vehicleName = "";
            let vehicleNames = ["van", "hino", "npr"];
            for (let i = 0; i < vehicleNames.length; i++) {
                if (info.event.title.toLowerCase().startsWith(vehicleNames[i])) {
                    vehicleName = vehicleNames[i];
                }
            }
            let vehicleColors = {
                "van": "#6dd5ed",
                "hino": "#000046",
                'npr': "red"
            }
            info.el.style.backgroundColor = vehicleColors[vehicleName];
            info.el.style.borderColor = vehicleColors[vehicleName];
        }

        function getVehicleCounties(counties, date, vehicle) {
            for (let i = 0; i < counties.length; i++) {
                const county = counties[i];
                let assignedDays = county.delivery_assigned_day;
                for (let j = 0; j < assignedDays.length; j++) {
                    const assignedDay = assignedDays[j];
                    if (assignedDay.delivery_vehicle_id == vehicle && assignedDay.date == date) {
                        checkOrDisableCheckbox(assignedDay.bo_sales_tax_code_id, 'check')
                    } else if (assignedDay.delivery_vehicle_id != vehicle && assignedDay.date == date) {
                        checkOrDisableCheckbox(assignedDay.bo_sales_tax_code_id, 'disable')
                    }
                }

            }
        }

        function checkOrDisableCheckbox(countyId, param) {
            let checkboxes = document.getElementsByName('counties');
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].value == countyId) {
                    if (param == 'check') {
                        checkboxes[i].checked = true;
                    } else {
                        checkboxes[i].disabled = true;
                    }
                }
            }
        }

        function formatDateMonthDayYear(date) {
            let formattedDate = null;
            if (date) {
                let splittedDate = date.split('-');
                formattedDate = `${splittedDate[1]}/${splittedDate[2]}/${splittedDate[0].slice(2)}`;
            }
            return formattedDate;
        }

        function displayVehiclesAndCountiesInBranch(selectedDate, vehicles, counties) {
            let modal = $('#assignmentModal').find('.modal-body');
            let modalHeader = $('#assignmentModal').find('#modal-header-h4');
            modalHeader.text(`Selected day: ${formatDateMonthDayYear(selectedDate)}`);
            modal.empty();

            let modalContent = `<div class="form-group col-md-6">
                                     <label for="vehicles">Vehicles</label>
                                     <select id="vehicles" class="form-control">
                                     <option selected value="">Choose...</option>`;
            vehicles.forEach(function(vehicle) {
                modalContent += `<option value="${vehicle.id}">${vehicle.name}</option>`;
            });
            modalContent += `</select></div>`;

            modalContent += `<div class="form-group col-md-6">`
            counties.forEach(function(county) {
                modalContent += `<div class="form-check">
                                 <label class="form-check-label" for="counties">
                                   <input type="checkbox" class="form-check-input" name="counties" id="check_${county.id}" value="${county.id}"> ${capitalize(county.code)}
                                 </label>
                               </div>`;
            });
            modalContent += `</div>`;

            modal.append(modalContent); // Appending modal content
            let assignmentModalBtn = document.querySelector('#assignmentModalBtn'); // Showing the modal by triggering a click
            assignmentModalBtn.click();
        }

        // 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;
        }

        // Set first letter to upper case
        const capitalize = s => s && s[0].toUpperCase() + s.slice(1).toLowerCase();

        calendar.render();

    });

    // Copy vehicle assignment events in bulk
    $('#copyEventsBtn').click(function() {
        let startDate = $("#start-date").val();
        let endDate = $("#end-date").val();
        let newStartDate = $("#new-start-date").val();

        if (startDate == "" || endDate == "" || newStartDate == "") {
            swal('', 'All the fields are required.', 'info');
            return false;
        }

        let startDateAsWeekDay = new Date(startDate).getUTCDay();
        let endDateAsWeekDay = new Date(endDate).getUTCDay();
        let newStartDateAsWeekDay = new Date(newStartDate).getUTCDay();
        if ([6, 0].includes(startDateAsWeekDay) || [6, 0].includes(endDateAsWeekDay) || [6, 0].includes(newStartDateAsWeekDay)) {
            swal('', 'All dates must be weekdays.', 'info');
            return false;
        }

        const startDateParsed = Date.parse(startDate);
        const endDateParsed = Date.parse(endDate);
        const newStartDateParsed = Date.parse(newStartDate);

        if (startDateParsed > endDateParsed) {
            swal('', 'Start date should be sooner than end date.', 'info');
            return false;
        }

        if (startDateParsed >= newStartDateParsed) {
            swal('', 'Start date should be sooner than new start date.', 'info');
            return false;
        }

        if (endDateParsed >= newStartDateParsed) {
            swal('', 'End date should be sooner than new start date.', 'info');
            return false;
        }

        let data = {
            start_date: startDate,
            end_date: endDate,
            new_start_date: newStartDate
        };

        $.ajax({
            type: 'post',
            url: '/deliveries/calendar/assignment/copy-vehicles-assignments-events',
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: data,
            success: function(r) {
                console.log(r);
                if (r.status) {
                    swal('', r.message, 'success').then(function(val) {
                        if (val) {
                            location.reload();
                        }
                    });
                } else {
                    swal('', r.message, 'warning').then(function(val) {
                        if (val) {
                            location.reload();
                        }
                    });
                }
            },
            error: function(e) {
                console.log(e)
            }
        });
    });

    // Remove events in bulk
    $('#removeEventsBtn').click(function() {
        let startDate = $("#start-date-delete").val();
        let endDate = $("#end-date-delete").val();

        if (startDate == "" || endDate == "") {
            swal('', 'All the fields are required.', 'info');
            return false;
        }

        let startDateAsWeekDay = new Date(startDate).getUTCDay();
        let endDateAsWeekDay = new Date(endDate).getUTCDay();
        if ([6, 0].includes(startDateAsWeekDay) || [6, 0].includes(endDateAsWeekDay)) {
            swal('', 'All dates must be weekdays.', 'info');
            return false;
        }

        const startDateParsed = Date.parse(startDate);
        const endDateParsed = Date.parse(endDate);

        if (startDateParsed > endDateParsed) {
            swal('', 'Start date should be sooner than end date.', 'info');
            return false;
        }

        let data = {
            start_date: startDate,
            end_date: endDate,
        };

        swal({
            title: 'Are you sure?',
            text: 'None of these events will be recovered after deletion.',
            icon: "info",
            buttons: ["Cancel", "Ok"],
        }).then(function(val) {
            if (val) {
                $.ajax({
                    type: 'post',
                    url: '/deliveries/calendar/assignment/delete-vehicles-assignments-events',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    data: data,
                    success: function(r) {
                        if (r.status) {
                            swal('', r.message, 'success').then(function(val) {
                                if (val) {
                                    location.reload();
                                }
                            });
                        } else {
                            swal('', r.message, 'warning').then(function(val) {
                                if (val) {
                                    location.reload();
                                }
                            });
                        }
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            }
        })
    })

    // Resetting content when modal hidden
    $(".modal").on("hidden.bs.modal", function() {
        $("#start-date").val("");
        $("#end-date").val("");
        $("#new-start-date").val("");
        $("#start-date-delete").val("");
        $("#end-date-delete").val("");
    });
</script>
@endsection