@extends('modules.head') @section('contenido')
<div id="edit-delivery-container" class="edit-delivery-container" data-delivery-id="{{ $delivery->id }}" 
     data-delivery-date="{{ $delivery->scheduled_date }}" data-delivery-vehicle-id="{{ $delivery?->vehicle->id }}">
    <div>
        <label for="vehicle">Edit vehicle</label>
        <select id="vehicle" class="form-control">
            @foreach($availableVehicles as $vehicle)
            @if ($delivery->vehicle_id == $vehicle->id)
            <option selected value="{{ $vehicle->id }}" data-max-weight="{{ $vehicle->max_weight }}" data-volume="{{ $vehicle->volume }}" data-largest-side="{{ $vehicle->largest_side }}">
                {{ $vehicle->name }}
            </option>
            @else
            <option value="{{ $vehicle->id }}" data-max-weight="{{ $vehicle->max_weight }}" data-volume="{{ $vehicle->volume }}" data-largest-side="{{ $vehicle->largest_side }}">
                {{ $vehicle->name }}
            </option>
            @endif
            @endforeach
        </select>
    </div>
    <div>
        <label for="driver">Edit driver</label>
        <select id="driver" class="form-control">
            <option value="">N/A</option>
            @foreach($drivers as $driver)
            @if ($delivery->picker_id == $driver->id)
            <option value="{{ $driver->id }}" selected>{{ $driver->first_name }} {{ $driver->last_name }}</option>
            @else
            <option value="{{ $driver->id }}">{{ $driver->first_name }} {{ $driver->last_name }}</option>
            @endif
            @endforeach
        </select>
    </div>
    <div id="vehicle-and-route-data-container" class="vehicle-and-route-data-container">
        <div class="vehicle-data-container">
            <div><label for="vehicle-data-container">{{ $delivery->vehicle->name }} capacities</label></div>
            <div>Max weight: {{ number_format($delivery->vehicle->max_weight, 2) }} lbs</div>
            <div>Volume: {{ number_format($delivery->vehicle->volume, 2) }} cubic inches</div>
            <div>Largest side: {{ number_format($delivery->vehicle->largest_side, 2) }} inches</div>
            <div><label style="margin: 5px 0px"><b>Linked counties </b></label></div>
            <div id='counties-tag-input' class='counties-tag-input'>
                @foreach( $countiesLinked as $county)
                  <span class="badge">{{ ucfirst(strtolower($county)) }}</span>
                @endforeach
            </div>
        </div>
        @if ($delivery->deliveryRoute)
        <div class="route-data-container">
            <div><label for="route-data-container">Route details</label></div>
            <div class="goomaps-a-tag">View map: <img onclick="seeOnGoogleMapsDynamically()" data-img-src="{{asset('img/goomaps.png')}}" src="" /></div>
            <div id="route-distance">Distance: <span>{{ number_format($delivery->deliveryRoute->distance, 1) }}</span> miles </div>
            <div id="route-eta">ETA: <span>{{ number_format($delivery->deliveryRoute->eta, 0) }} </span> minutes </div>
            <div id="route-subtotal">Subtotal: $<span>{{ number_format($delivery->deliveryRoute->orders_subtotal, 2) }}</span> </div>
            <div id="route-stops">Stops: <span>{{ $delivery->deliveryRoute->stops }}</span> </div>
        </div>
        @endif
    </div>
    <div id="delivery-stats-container" class="delivery-stats-container">
        <div>
            <div>
                <div><label for="delivery-code">Delivery code:</label> <span>{{ $delivery->app_id }}</span></div>
                <div><label for="scheduled-date">Scheduled date:</label> <span>{{ $delivery->scheduled_date }}</span></div>
                <div><label for="branch">Branch:</label> <span>{{ $delivery->branch->short_name }}</span></div>
                <div><label for="status">Status:</label> <span>{{ $delivery->status }}</span></div>
                <div><label for="created-date">Created date:</label> <span>{{ $delivery->created_at }}</span></div>
            </div>
            <div>
                <div><label for="total-orders">Total Orders:</label> <span id="total-orders">{{ $delivery->total_orders }}</span></div>
                <div><label for="total-packages">Total Packages:</label> <span id="total-packages">{{ $delivery->total_packages }}</span></div>
                <div><label for="largest-side">Largest Side:</label> <span id="total-largest-side">{{ $delivery->largest_side }} inches</span></div>
                <div><label for="total-weight">Total Weight:</label> <span id="total-weight">{{ $delivery->total_weight }} lbs</span></div>
                <div><label for="total-volume">Total Volume:</label> <span id="total-volume">{{ $delivery->total_volume }} cubic inches</span></div>
            </div>
        </div>
    </div>
    <div class="orders-feed-title">
        <label>Orders Feed</label>
    </div>
    <div class="orders-selected-title">
        <label>Plan Delivery</label>
    </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="true">
    </div>
    <div id="orders-feed" class="orders-feed" data-orders="{{ $orders }}">
    </div>
    <div id="orders-selected" class="orders-feed" data-orders="{{ $delivery->orders }}">
    </div>
    <div class="update-btn-container">
        <button id="update-btn">Update Delivery</button>
        <button id="cancel-delivery-btn">Cancel Delivery</button>
    </div>
</div>
@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/edit.css') }}" type="text/css" />
<script type="text/javascript">
    //  *** VEHICLE LOGIC ***
    $('#vehicle').on('change', function() {
        showVehicleStatsBox($(this));
    });

    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">${selected_vehicle_name} capacities</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-and-route-data-container .vehicle-data-container').empty().html(dynamic_vehicle_info).removeClass('hidden');
            showVehicleCounties(selector.val());
        } else {
            $('#vehicle-and-route-data-container .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($(".orders-feed"));

    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();

                    let ordersIds = getSelectedOrders($('#orders-selected .feed-order')).map(function(order) {
                        return order.id;
                    });
                    getRoute(ordersIds)
                }
            });
        }
    }
    allowDropFunctionality($(".orders-feed"), ['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);

        // Global stats when editing delivery
        let total_orders = document.querySelector('#total-orders');
        total_orders ? total_orders.innerHTML = delivery.getTotalOrders() : null;
        let total_packages = document.querySelector('#total-packages');
        total_packages ? total_packages.innerHTML = delivery.calcOrdersTotalPackages() : null;
        let total_largest_side = document.querySelector('#total-largest-side');
        total_largest_side ? total_largest_side.innerHTML = `${delivery.getOrdersLargestSide().toFixed(2)} inches` : null;
        let total_weight = document.querySelector('#total-weight');
        total_largest_side ? total_largest_side.innerHTML = `${delivery.getOrdersLargestSide().toFixed(2)} inches` : null;
        total_weight ? total_weight.innerHTML = `${delivery.calcOrdersWeight().toFixed(2)} lbs` : null;
        let total_volume = document.querySelector('#total-volume');
        total_volume ? total_volume.innerHTML = `${delivery.calcOrdersVolume().toFixed(2)} cubic inches` : 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);
            });
        }
        $(".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;
    }


    //  *** ROUTE LOGIC ***
    $('.goomaps-a-tag').find('img').each(function(e) {
        let src = $(this).attr("data-img-src");
        if (src.length) {
            $(this).attr("src", src);
        }
    })

    function seeOnGoogleMapsDynamically() {
        let ordersIds = getSelectedOrders($('#orders-selected .feed-order')).map(function(order) {
            return order.id;
        });
        if (ordersIds.length) {
            let data = {
                ordersIds: ordersIds,
            }
            $.ajax({
                type: 'post',
                url: `/deliveries/see-on-google-maps`,
                data: data,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(r) {
                    if (r.status) {
                        window.open(decodeURI(r.link));
                    } else {
                        swal('', 'Google Maps link could not be generated', 'info');
                    }
                }
            })
        } else {
            swal('', 'No addresses to create a route.', 'info');
        }
    }

    function getRoute(ordersIds) {
        if (ordersIds.length) {
            let data = {
                ordersIds: ordersIds
            }
            $.ajax({
                type: 'post',
                url: `/deliveries/get-route`,
                data: data,
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                success: function(r) {
                    if (!r.status) {
                        swal('Check addresses', r.message, 'warning');
                    } else {
                        let d = (r.route['distance']).toFixed(1);
                        $('#route-distance span').html(d);
                        let eta = (r.route['eta']).toFixed(0);
                        $('#route-eta span').html(eta);
                        let subtotal = (r.route['subtotal']).toFixed(2);
                        $('#route-subtotal span').html(subtotal);
                        let stops = r.route['stops'];
                        $('#route-stops span').html(stops);
                    }
                }
            })
        } else {
            cleanRouteDataContainer();
        }
    }

    function cleanRouteDataContainer() {
        $('#route-distance span').html(0);
        $('#route-eta span').html(0);
        $('#route-subtotal span').html(0);
        $('#route-stops span').html(0);
    }


    // *** UPDATE DELIVERY ***
    let updateBtn = document.querySelector('#update-btn');
    updateBtn.addEventListener("click", (e) => {
        // Validations before swal confirmation
        let selectedOrders = getSelectedOrders($('#orders-selected .feed-order'));
        let vehicleMaxWeight = $('#vehicle').find(":selected").attr('data-max-weight');
        let vehicleVolume = $('#vehicle').find(":selected").attr('data-volume');
        let vehicleLargestSide = $('#vehicle').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;
        }
        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this.",
            icon: 'info',
            buttons: {
                confirm: {
                    text: 'Yes, update it!',
                    className: 'btn btn-primary'
                },
                cancel: {
                    visible: true,
                    className: 'btn btn-danger'
                }
            }
        }).then(function(val) {
            if (val) {
                let delivery_id = $('#edit-delivery-container') ? $('#edit-delivery-container').attr('data-delivery-id') : null;
                let orders_ids = selectedOrders.map(o => o.id); // getting order IDs array
                let data = {
                    delivery_id: delivery_id,
                    driver_id: $('#driver').val(),
                    vehicle_id: $('#vehicle').val(),
                    orders_id: orders_ids,
                }
                $.ajax({
                    type: 'post',
                    url: `/deliveries/update`,
                    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() {
                                location.reload();
                            })
                        } else {
                            swal({
                                text: r.message,
                                icon: 'warning'
                            })
                        }
                    }
                })
            }
        })
    });
    function showCustomSwalMessage(message) {
        let title = document.createElement("h3");
        title.innerHTML = message;
        swal({
            content: title,
        });
    }


    // *** CANCEL DELIVERY ***
    let cancelDeliveryBtn = document.querySelector('#cancel-delivery-btn');
    cancelDeliveryBtn.addEventListener('click', function() {
        swal({
            title: 'Are you sure?',
            text: "This process will not be undone.",
            icon: 'warning',
            buttons: {
                confirm: {
                    text: 'Yes, cancel it',
                    className: 'btn btn-primary'
                }
            }
        }).then(function(val) {
            if (val) {
                let delivery_id = $('#edit-delivery-container') ? $('#edit-delivery-container').attr('data-delivery-id') : null;
                if (!delivery_id) {
                    swal('', 'No delivery id was found.', 'info');
                    return false;
                }
                let data = {
                    delivery_id: delivery_id
                }
                
                $.ajax({
                    type: 'post',
                    url: `/deliveries/cancel`,
                    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() {
                                location.reload();
                            })
                        } else {
                            swal({
                                text: r.message,
                                icon: 'warning'
                            })
                        }
                    }
                })
            }
        });
    });


    // Showing counties related to chosen vehicle
    const capitalize = s => s && s[0].toUpperCase() + s.slice(1).toLowerCase();
    function showVehicleCounties(vehicleId) {
        let deliveryDate = $('#edit-delivery-container') ? $('#edit-delivery-container').attr('data-delivery-date') : null;
        $.ajax({
            type: 'get',
            url: `/delivery/get-vehicle-counties/${vehicleId}/${deliveryDate}`,
            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