@extends('modules.head') @section('contenido')
<div class="delivery-orders-container">
    <div class="orders-board">
        <div class="orders-logistic-title">
            <h3>Logistic</h3>
        </div>
        <div class="orders-feed-title">
            <h3>Orders Feed</h3>
        </div>
        <div class="orders-selected-title">
            <h3>Plan Delivery</h3>
        </div>
        <div class="orders-search-input-container">
            <div id="fa-search-container" class="fa-search-container"><i class="fa fa-search" aria-hidden="true"></i></div>
            <input type="text" id="orders-search-input" class="search-input" data-is-edit="false">
        </div>
        <div id="dropdowns-content" class="dropdowns-content">
            <div>
                <!-- date selection -->
                <div id="date-selection-container">
                    <input class="form-control" id="delivery-datepicker" data-date-format="mm/dd/yyyy" value="" placeholder="Choose date...">
                </div>
                <!-- vehicle selection -->
                <div class="select-vehicle-container">
                    <select class="form-control vehicle-select hidden" name="vehicle-select" id="vehicle-select" data-vehicles="{{ $vehicles }}">
                        <option value="0" selected>Choose vehicle...</option>
                        @foreach($vehicles as $vehicle)
                        <option value="{{ $vehicle->id }}" data-max-weight="{{ $vehicle->max_weight }}" data-volume="{{ $vehicle->volume }}" data-largest-side="{{ $vehicle->largest_side }}">{{ $vehicle->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                <!-- driver selection -->
                <div class="select-driver-container">
                    <select class="form-control driver-select hidden" name="driver-select" id="driver-select">
                        <option value="0" selected>Choose driver...</option>
                        @foreach($drivers as $driver)
                        <option value="{{ $driver->id }}">{{ $driver->first_name }} {{ $driver->last_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <!-- vehicle data -->
            <div id="vehicle-data-container" class="vehicle-data-container hidden">
            </div>
        </div>
        <div id="orders-feed" class="orders-feed drop-areas" data-orders="{{ $orders }}">
        </div>
        <div id="orders-selected" class="orders-selected drop-areas">
        </div>
    </div>
    <br>
    <div id="global-delivery-stats" class="global-delivery-stats">
        <div id="total-weight" class="total-weight">
            <b>Weight:</b> <span>0</span> lbs
        </div>
        <div id="volume" class="volume">
            <b>Volume:</b> <span>0</span> cub. inches
        </div>
        <div id="largest-side" class="largest-side">
            <b>Largest Side:</b> <span>0</span> inches
        </div>
    </div>
    <br>
    <div class="submit-data-btn-container">
        <button id="submit-data-btn">Schedule Delivery</button>
    </div>
</div>

<!-- ASSIGN DAY TO VEHICLE AND COUNTIES MODAL -->
<button id="showAssignmentModalBtn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#assignmentModal" style="display:none"></button>
<div id="assignmentModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <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-default" data-dismiss="modal">Close</button>
                <button id="submitAssignmentBtn" type="button" class="btn btnAux btn-danger">Submit</button>
            </div>
        </div>

    </div>
</div>
<input type="hidden" name="branch-id" id="branch-id" value="{{ session('branch_id') }}">
@include('orders.infoOrder')
<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="{{ asset('js/orders.js') }}"></script>
<script src="{{ asset('js/deliveries/delivery_class.js') }}"></script>
<link rel="stylesheet" href="{{ asset('css/deliveries/manual/add.css') }}" type="text/css" />
<script type="text/javascript">
    // *** DATEPICKER ***
    $(function() {
        // Activate datepicker
        $('#delivery-datepicker').datepicker({
            todayHighlight: true,
            format: 'mm/dd/yyyy',
            startDate: '0d', // only pick date after current day
            daysOfWeekDisabled: [0, 6] // only weekdays
        });
        // Datepicker on change event handler
        $('#delivery-datepicker').datepicker().on('changeDate', function(ev) {
            let stringDate = ev.date ? ev.date.toISOString().slice(0, 10) : '';
            getAssignedVehicles($('#vehicle-select'), stringDate);

            $(this).datepicker('hide');
            $('#vehicle-data-container').empty().addClass('hidden');
            $('#driver-select').removeClass('hidden');
        });
    });


    // *** VEHICLE ***
    // Request vehicles assigned for selected branch and date
    function getAssignedVehicles(selector, date) {
        if (date.length == 10) {
            $.ajax({
                type: 'get',
                url: '/delivery-orders/get-vehicles-available/' + date,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(r) {
                    showAssignedVehicles(selector, r);
                }
            })
        } else {
            swal("", "Check selected date", "info");
        }
    }
    // Print on screen assigned vehicles or the option to assign counties to vehicle
    function showAssignedVehicles(selector, r) {
        selector.empty();
        let options = '<option value="0" selected>Choose vehicle...</option>';
        if (!r.length) {
            options += '<option value="assignVehicle">-- Assign Vehicle --</option>';
        }
        for (let v = 0; v < r.length; v++) {
            let vehicle = r[v];
            options += `<option value="${vehicle.id}" 
                                data-max-weight="${vehicle.max_weight}" 
                                data-volume="${vehicle.volume}"
                                data-largest-side="${vehicle.largest_side}">
                                  ${vehicle.name}
                        </option>`;
        }
        selector.append(options).removeClass('hidden');
    }
    // Handling vehicle on change
    $('#vehicle-select').on('change', function() {
        if ($(this).val() == 'assignVehicle') {
            getBranchVehiclesAndZonedCounties();
        } else {
            showVehicleStatsBox($(this));
        }
    });
    // Request vehicles in branch and counties assigned to that branch
    function getBranchVehiclesAndZonedCounties() {
        $.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;
                }
                let date = $("#delivery-datepicker").datepicker("getDate");
                let stringDate = $.datepicker.formatDate('yy-mm-dd', date);
                displayVehiclesAndCountiesInBranch(stringDate, r.data.vehicles, r.data.counties);
            },
            error: function(e) {
                console.log(e);
            }
        })

    }
    // Set first letter to upper case
    const capitalize = s => s && s[0].toUpperCase() + s.slice(1).toLowerCase();
    // Get checkboxes checked
    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;
    }
    // Shows the modal to assign new counties to vehicle
    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-to-be-assigned" 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

        // When hitting submit in assignment modal
        $('#submitAssignmentBtn').click(function() {
            let vehicle = $('#vehicles-to-be-assigned').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
            };
            saveVehicleAndCountiesNewRelation(data);
        });

        $('#showAssignmentModalBtn').click(); // Showing the modal by triggering a click
    }
    // Save the new relation between vehicle and counties
    function saveVehicleAndCountiesNewRelation(data) {
        $.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)
            }
        })
    }
    // Show properties of vehicle selected after onchange
    function showVehicleStatsBox(selector) {
        if (selector.val() > 0) {
            let selected_vehicle_name = selector.find(':selected').text();
            let selected_vehicle_max_weight = selector.find(':selected').attr('data-max-weight');
            let selected_vehicle_volume = selector.find(':selected').attr('data-volume');
            let selected_vehicle_largest_side = selector.find(':selected').attr('data-largest-side');

            let dynamic_vehicle_info = `<div><label for="vehicle-data-container"><b>${selected_vehicle_name} capacities</b></label></div>
                                    <div>Max weight: ${selected_vehicle_max_weight} lbs.</div>
                                    <div>Volume: ${selected_vehicle_volume} cubic inches.</div>
                                    <div>Largest side: ${selected_vehicle_largest_side} inches.</div>
                                    <div><label style="margin: 5px 0px"><b>Linked counties </b></label></div>
                                    <div id='counties-tag-input' class='counties-tag-input'></div>`;

            $('#vehicle-data-container').empty().html(dynamic_vehicle_info).removeClass('hidden');
            showVehicleCounties(selector.val());
        } else {
            $('#vehicle-data-container').empty().addClass('hidden');
        }
    }


    // *** RENDERING ORDERS ***
    // Gets all orders for delivery (without scheduled_delivery_id) in Packed & Ready in branch
    function renderOrders(id) {
        let ordersArray = $(`#${id}`).attr('data-orders') ? JSON.parse($(`#${id}`).attr('data-orders')) : []; // data orders
        let ordersHTML = `<div id="${id}-dropZone">Drop order</div>`; // drop zone for the box
        ordersArray.forEach(order => {
            ordersHTML += `<div class="card feed-order" id="feed-order-${order.id}" data-order-id="${order.id}" data-weight="${order.weight}" 
                            data-largest-side="${order.largest_side}" data-volume="${order.volume}" data-total-packages="${order.number_packages}" draggable="true">
                          <div class="card-body">
                            <h4 class="card-title"><b>${formatDateMonthDayYear(order.bo_delivery_date)}</b></h4>
                            <h5 class="card-subtitle mb-2 text-muted"><a class="orders-details-link" data-id="${order.id}">${order.code}</a></h5>
                            <h5 class="card-subtitle mb-2 text-muted">${order.client.document} - ${order.client.first_name}</h5>
                            <h5 class="card-subtitle mb-2 text-muted">$${(order.subtotal).toFixed(2)} | ${(order.weight).toFixed(2)} lbs | ${(order.volume).toFixed(2)} cub. inches | ${(order.largest_side).toFixed(2)} inches</h5>
                            <div class="address-line-container"><h5 class="card-subtitle mb-2 text-muted">${order.address.direction}</h5> <div>${renderAddressIcon(order.address.type, order.address.id)}</div></div>
                          </div>
                        </div>`;
        });
        $(`#${id}`).append(ordersHTML);
    }
    renderOrders('orders-feed');
    renderOrders('orders-selected');
    // Show modal with order details
    $(".orders-details-link").on('click', function() {
        let orderId = $(this).data('id');
        clickInfoOrder(orderId, false);
    });
    // Get the address type of the order (residential, commercial, etc.)
    $(".check-address-btn").on('click', function() {
        let addressId = $(this).data('address-id');
        if (!addressId) {
            swal('', 'No address in this order', 'info');
            return false;
        }
        let data = {
            id: addressId
        }
        let _this = $(this);
        $.ajax({
            type: 'post',
            url: `/deliveries/address-type`,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            data: data,
            success: function(r) {
                if (r.status) {
                    $(_this).text('').append(renderAddressIcon(r.address_status, null));
                } else {
                    swal('', r.message, 'info');
                }
            },
            error: function(e) {
                console.log(e)
            },
        })
    });
    // Show icon depending on address type of the order
    function renderAddressIcon(addressType, addressId) {
        let html = '';
        switch (addressType) {
            case 'business':
            case 'poBox':
                html = '<span class="commercial-span">Commercial <i class="fa-solid fa-building"></i></span>';
                break;
            case 'residential':
                html = '<span class="residential-span">Residential <i class="fa-solid fa-house"></i></span>';
                break;
            default:
                html = `<span class="check-address-btn" data-address-id="${addressId}">Check Address <i class="fa-solid fa-map-location-dot"></i></span>`;
        }
        return html;
    }


    // *** DRAG AND DROP ***
    function allowDragFunctionality(selector) {
        for (let i = 0; i < selector.length; i++) {
            selector[i].addEventListener('dragstart', function(ev) {
                ev.currentTarget.classList.add("dragging");
                // Clear the drag data cache (for all formats/types)
                ev.dataTransfer.clearData();
                // Use the event target's id for the data
                ev.dataTransfer.setData("text/plain", ev.target.id);
            }, false);
            selector[i].addEventListener("dragend", (ev) =>
                ev.target.classList.remove("dragging"),
            );
        }
    }
    allowDragFunctionality($(".feed-order"));
    function allowDropFunctionality(selector, potentialDropAreas) {
        for (let i = 0; i < selector.length; i++) {
            selector[i].addEventListener("dragover", (ev) => {
                ev.currentTarget.classList.add("dragOver");
                ev.preventDefault();
            });
            selector[i].addEventListener("drop", (ev) => {
                ev.currentTarget.classList.remove("dragOver");
                ev.preventDefault();
                // Get the data, which is the id of the source element
                const data = ev.dataTransfer.getData("text");
                const source = document.getElementById(data);

                if (source && (potentialDropAreas.includes(ev.target.id))) {
                    let containerDropAreaId = ev.target.id.slice(0, ev.target.id.lastIndexOf('-'));
                    document.getElementById(`${containerDropAreaId}`).children[0].after(source);
                    getDynamicStats();
                }
            });
        }
    }
    allowDropFunctionality($(".drop-areas"), ['orders-feed-dropZone', 'orders-selected-dropZone']);
    // Getting and printing global stats
    function getDynamicStats() {
        let selectedOrders = getSelectedOrders($('#orders-selected .feed-order'));
        const delivery = new Delivery(selectedOrders);
        let weight = document.querySelector('#global-delivery-stats #total-weight > span');
        weight ? weight.innerHTML = delivery.calcOrdersWeight().toFixed(2) : null;
        let volume = document.querySelector('.global-delivery-stats #volume > span');
        volume ? volume.innerHTML = delivery.calcOrdersVolume().toFixed(2) : null;
        let largest_side = document.querySelector('.global-delivery-stats #largest-side > span');
        largest_side ? largest_side.innerHTML = delivery.getOrdersLargestSide().toFixed(2) : null;
    }
    // Get array of orders in the selected area
    function getSelectedOrders(selected_cards) {
        let orders = [];
        selected_cards.each(function(index, card) {
            let order = {};
            order.index = index;
            order.id = card.dataset.orderId;
            order.weight = card.dataset.weight;
            order.largest_side = card.dataset.largestSide;
            order.total_packages = card.dataset.totalPackages;
            order.volume = card.dataset.volume;
            order.branchId = card.dataset.branchId;
            orders.push(order);
        });
        return orders;
    }


    // *** SEARCHING ORDERS ***
    function handlingFocusOnTheSearchBar() {
        let orders_search_input = document.querySelector('#orders-search-input');
        let search_icon_container = document.querySelector('#fa-search-container');
        orders_search_input.addEventListener('focus', function() {
            search_icon_container.style.display = 'none';
        });
        orders_search_input.addEventListener('focusout', function() {
            if (!document.querySelector('#orders-search-input').value.trim()) {
                search_icon_container.style.display = 'block';
            }
        });
    }
    handlingFocusOnTheSearchBar()
    // Getting orders available for searching
    function getSearchableOrders() {
        let allOrdersInitiallyInFeed = JSON.parse(document.querySelector('#orders-feed').dataset.orders); // all the orders in the feed
        let selectedOrders = document.getElementById('orders-selected').children; // orders in selected section
        let selectedOrdersIds = [];
        for (let i = 0; i < selectedOrders.length; i++) {
            selectedOrdersIds.push(selectedOrders[i].dataset.orderId);
        }
        return allOrdersInitiallyInFeed.filter(function(o) {
            return selectedOrdersIds.indexOf(o.id.toString()) == -1;
        });
    }
    // Handling the keyup event in the searching input
    document.querySelector('#orders-search-input').addEventListener("keyup", function() {
        let searchableOrders = getSearchableOrders();
        let input_value = this.value.trim();
        document.querySelector('#orders-feed').innerHTML = '<div id="orders-feed-dropZone">Drop order</div>';
        if (input_value) {
            searchableOrders.forEach(function(order) {
                if (meetQueryCriteria(order, input_value)) {
                    fillOrdersFeedAfterSearched(order);
                }
            });
        } else {
            searchableOrders.forEach(function(order) {
                fillOrdersFeedAfterSearched(order);
            });
        }
        allowDragFunctionality($(".feed-order"));
        allowDropFunctionality($(".drop-areas"), ['orders-feed-dropZone', 'orders-selected-dropZone']);
        $(".orders-details-link").on('click', function() {
            let orderId = $(this).data('id');
            clickInfoOrder(orderId, false);
        });
    });
    // Searching by order code, client first name and client BP code
    function meetQueryCriteria(o, val) {
        if (o.code.toLowerCase().indexOf(val) != -1 || o.code.includes(val) ||
            o.client.first_name.toLowerCase().indexOf(val) != -1 || o.client.first_name.includes(val) ||
            o.client.document.toLowerCase().indexOf(val) != -1 || o.client.document.includes(val)) {
            return true;
        }
        return false;
    }
    function fillOrdersFeedAfterSearched(order) {
        document.querySelector('#orders-feed').innerHTML +=
            `<div class="card feed-order" id="feed-order-${order.id}" data-order-id="${order.id}" data-weight="${order.weight}" 
                data-largest-side="${order.largest_side}" 
                data-volume="${order.volume}" 
                data-total-packages="${order.number_packages}"
          draggable="true">
             <div class="card-body">
              <h4 class="card-title"><b>${formatDateMonthDayYear(order.bo_delivery_date)}</b></h4>
              <h5 class="card-subtitle mb-2 text-muted"><a class="orders-details-link" data-id="${order.id}">${order.code}</a></h5>
              <h5 class="card-subtitle mb-2 text-muted">${order.client.document} - ${order.client.first_name}</h5>
              <h5 class="card-subtitle mb-2 text-muted">$${order.total_price} | ${order.weight} lbs | ${order.volume} cub. inches | ${order.largest_side} inches </h5>
              <div class="address-line-container"><h5 class="card-subtitle mb-2 text-muted">${order.address.direction}</h5> <div>${renderAddressIcon(order.address.type, order.address.id)}</div></div>
            </div>
          </div>`;
    }
    function formatDateMonthDayYear(date) {
        if (date) {
            let splittedDate = date.split('-');
            return `${splittedDate[1]}/${splittedDate[2]}/${splittedDate[0].slice(2)}`;
        }
        return null;
    }


    // *** SUBMITTING DATA TO CREATE DELIVERY ***
    function validateFields(picker_select, vehicle_select, date_select) {
        if ($(picker_select).val() != '0' && $(vehicle_select).val() != '0' && date_select != 'Invalid Date') {
            return true;
        }
        return false;
    }
    // When user clicks to create a delivery
    $('#submit-data-btn').click(function() {
        let datepickerDate = $("#delivery-datepicker").datepicker("getDate");
        if (validateFields($('#driver-select'), $('#vehicle-select'), datepickerDate)) {
            let stringDate = $.datepicker.formatDate('yy-mm-dd', datepickerDate);
            let selectedOrders = getSelectedOrders($('#orders-selected .feed-order'));
            let vehicleMaxWeight = $('#vehicle-select').find(":selected").attr('data-max-weight');
            let vehicleVolume = $('#vehicle-select').find(":selected").attr('data-volume');
            let vehicleLargestSide = $('#vehicle-select').find(":selected").attr('data-largest-side');

            const delivery = new Delivery(selectedOrders);
            if (!delivery.getTotalOrders()) {
                swal({
                    title: 'Alert',
                    text: 'Select at least one order for delivery.',
                    icon: 'info'
                })
                return false;
            }

            if (!delivery.doOrdersFitInVehicleWeight(vehicleMaxWeight)) {
                showCustomSwalMessage("The weight of your orders <br><b>is greater than the max weight of the vehicle.</b>");
                return false;
            }

            if (!delivery.doOrdersFitInVehicleVolume(vehicleVolume)) {
                showCustomSwalMessage("The volume of your orders <br><b>is greater than the max volume of the vehicle.</b>");
                return false;
            }

            if (!delivery.doOrdersFitInVehicleLargestSide(vehicleLargestSide)) {
                showCustomSwalMessage("Largest side of products in your orders <br><b>exceeds vehicle's.</b>");
                return false;
            }

            let orders_ids = selectedOrders.map(o => o.id); // getting order IDs array
            let data = {
                driver_id: $('#driver-select').val(),
                vehicle_id: $('#vehicle-select').val(),
                orders_id: orders_ids,
                branch_id: $('#branch-id').val(),
                delivery_date: stringDate,
            }
            $.ajax({
                type: 'post',
                url: '/delivery-orders/create-deliver',
                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((val) => {
                            if (val) {
                                $(location).attr('href', '/created-deliveries');
                            }
                        })
                    } else {
                        swal({
                            text: r.message,
                            icon: 'warning'
                        })
                    }
                }
            })
        } else {
            swal({
                title: 'Alert',
                text: 'Make sure that you selected all the required fields.',
                icon: 'info'
            })
        }
    });
    function showCustomSwalMessage(message) {
        let title = document.createElement("h3");
        title.innerHTML = message;
        swal({
            content: title,
        });
    }


    // Showing counties linked to vehicle
    function showVehicleCounties(vehicleId) {
        let datepickerDate = $("#delivery-datepicker").datepicker("getDate");
        let stringDate = $.datepicker.formatDate('yy-mm-dd', datepickerDate);
        $.ajax({
            type: 'get',
            url: `/delivery/get-vehicle-counties/${vehicleId}/${stringDate}`,
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            success: function(r) {
                let container = $("#counties-tag-input");
                container.empty();
                let counties = "";
                let countyNames = r.map(i => capitalize(i.bo_sales_tax_code.code));
                countyNames.forEach(function(county){
                    counties += `<span class="badge">${county}</span>`;
                });
                container.append(counties);
            },
            error: function(e) {
                console.log(e);
            }
        })
    }
</script>
@endsection