@extends('vendor.header.header')
@section('content')
    <div class="header pb-6 d-flex align-items-center"
        style="min-height: 200px; background-image;background-size: cover; background-position: center top;">
        <span class="mask bg-gradient-default opacity-8"></span>
    </div>

        <input type="hidden" value="1" id="pageNum">
    <div class="container-fluid mt--6">
        <div class="row">
            <div class="offset-xl-2 col-xl-8 order-xl-1 ">
                <div class="card">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{ __('create-shipment-order') }} </h3>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="user_id" value="{{ auth()->user()->id }}">
                    <input type="hidden" id="paymentMethod" value="cash">
                    <input type="hidden" id="tax" value="0">
                    <div class="card-body" id="page1">
                        <div class="row">
                            <div class="col-lg-3 mb-3" style="margin-bottom: 0px !important;">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Order Number') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="order_number"
                                            placeholder="{{ __('Order Number') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-3" style="margin-bottom: 0px !important;">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Date Time') }}</label>
                                    <div class="input-group">
                                        <input type="date" class="form-control" id="date"
                                            title="{{ __('The date the package was received') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-3" style="margin-bottom: 0px !important;">
                                <div class="form-group">
                                    <label class="control-label">{{ __('From time') }}</label>
                                    <div class="input-group">
                                        <input type="time" class="form-control" id="time_from">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 mb-3" style="margin-bottom: 0px !important;">
                                <div class="form-group">
                                    <label class="control-label">{{ __('To time') }}</label>
                                    <div class="input-group">
                                        <input type="time" class="form-control" id="time_to">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 mb-3">
                                <div class="form-group">
                                    <label class="control-label">{{ __('pick-up-location') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="locationSearch{{ $page }}"
                                            placeholder="{{ __('Location on the Map') }}">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary"
                                                onclick="searchLocation({{ $page }})">{{ __('Search') }}</button>
                                        </div>
                                    </div>
                                    <div id="map{{ $page }}" class="col-lg-12 mt-3"
                                        style="width: 100%; height: 226px; border: 2px solid #ccc;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="justify-content: end;">
                            <button class="btn btn-primary"
                                onclick="nextPage({{ $page }})" style="cursor: pointer;">{{ __('Next') }}</button>
                        </div>
                        <div class="row" id="latLng">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden" name="lat"
                                        id="lat{{ $page }}" placeholder="{{ __('Enter lat') }}"
                                        value="{{ inputValue('lat') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden" name="long"
                                        id="lng{{ $page }}" placeholder="{{ __('Enter Lng') }}"
                                        value="{{ inputValue('lng') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_name" id="pick_up_place_name{{ $page }}"
                                        value="">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_street" id="pick_up_place_street{{ $page }}"
                                        value="">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_isoCountryCode"
                                        id="pick_up_place_isoCountryCode{{ $page }}"
                                        value="{{ inputValue('pick_up_place_isoCountryCode') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_country" id="pick_up_place_country{{ $page }}"
                                        value="{{ inputValue('pick_up_place_country') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_postalCode" id="pick_up_place_postalCode{{ $page }}"
                                        value="{{ inputValue('pick_up_place_postalCode') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_administrativeArea"
                                        id="pick_up_place_administrativeArea{{ $page }}"
                                        value="{{ inputValue('pick_up_place_administrativeArea') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_subAdministrativeArea"
                                        id="pick_up_place_subAdministrativeArea{{ $page }}"
                                        value="{{ inputValue('pick_up_place_subAdministrativeArea') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_locality" id="pick_up_place_locality{{ $page }}"
                                        value="{{ inputValue('pick_up_place_locality') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_subLocality"
                                        id="pick_up_place_subLocality{{ $page }}"
                                        value="{{ inputValue('pick_up_place_subLocality') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_thoroughfare"
                                        id="pick_up_place_thoroughfare{{ $page }}"
                                        value="{{ inputValue('pick_up_place_thoroughfare') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_subThoroughfare"
                                        id="pick_up_place_subThoroughfare{{ $page }}"
                                        value="{{ inputValue('pick_up_place_subThoroughfare') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: none;" id="addPage">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('js-scripts')
    <script type="text/javascript">
        var pageNum = $("#pageNum").val();

        function nextPage(page) {
            if (
                ($("#lat" + page).val() == null || $("#lat" + page).val() == "") ||
                ($("#lng" + page).val() == null || $("#lng" + page).val() == "")
            ) {
                toastr.error("{{ __('Please select a location') }}");
                return;
            } else if ($("#date").val() == null || $("#date").val() == "") {
                toastr.error("{{ __('Please choose the date on which the package will be received') }}");
                return;
            } else if (
                ($("#time_from").val() == null || $("#time_from").val() == "") ||
                ($("#time_to").val() == null || $("#time_to").val() == "")
            ) {
                toastr.error("{{ __('Please choose the time range when the package will be received') }}");
                return;
            } else if (($("#order_number").val() == null || $("#order_number").val() == "")) {
                toastr.error("{{ __('Please do not leave the order number blank') }}");
                return;
            }else if ($("#phone_number" + page).length != 0 && ($.trim($("#phone_number" + page).val()) == null || $.trim($("#phone_number" + page).val()) == "")) {
                toastr.error("{{ __('Please do not leave the phone number blank') }}");
                return;
            }else if ($("#order_price" + page).length != 0 && ($.trim($("#order_price" + page).val()) == null || $.trim($("#order_price" + page).val()) == "")) {
                toastr.error("{{ __('Please do not leave the order price blank') }}");
                return;
            }else if ($("#delivery_price" + page).length != 0 && ($.trim($("#delivery_price" + page).val()) == null || $.trim($("#delivery_price" + page).val()) == "")) {
                toastr.error("{{ __('Please do not leave the delivery price blank') }}");
                return;
            }

            $("#page" + page).hide();
            $("#pageEnd").hide();
            $("#addPage").show();
            if ($("#page" + (parseInt(page) + 1) + ".card-body").length === 0) {
                $("#addPage").append(`
                    <div class="card-body" id="page${parseInt(page) + 1}">
                        <div class="row">
                            <div class="col-lg-12 mb-3">
                                <div class="form-group">
                                    <label class="control-label">{{ __('pick-off-location') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="locationSearch${parseInt(page) + 1}"
                                            placeholder="{{ __('Location on the Map') }}">
                                        <div class="input-group-append">
                                            <button class="btn btn-primary" onclick="searchLocation(${parseInt(page) + 1})">{{ __('Search') }}</button>
                                        </div>
                                    </div>
                                    <div id="map${parseInt(page) + 1}" class="col-lg-12 mt-3"
                                        style="width: 100%; height: 226px; border: 2px solid #ccc;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-9">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Order Details') }}</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="details${parseInt(page) + 1}"
                                            placeholder="{{ __('enter-note') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">{{ __('All Size') }}</label>
                                    <div class="input-group">
                                        <select id="size_id${parseInt(page) + 1}" class="form-control" >
                                            @foreach ($sizes as $size)
                                                <option selected value="{{ $size->id }}">{{ $size->value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="control-label">{{ __('All Weights') }}</label>
                                    <div class="input-group">
                                        <select id="weights_id${parseInt(page) + 1}" class="form-control" >
                                            @foreach ($weights as $weight)
                                                <option selected value="{{ $weight->id }}">{{ $weight->from }}-{{ $weight->to }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label class="control-label">{{ __('All Withins') }}</label>
                                    <div class="input-group">
                                        <select id="withins_id${parseInt(page) + 1}" class="form-control" >
                                            @foreach ($withins as $within)
                                                <option selected value="{{ $within->id }}">{{ $within->value }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label for="phone_number${parseInt(page) + 1}" class="control-label">{{ __('Phone number') }}</label>
                                    <div class="input-group">
                                        <input type="tel" class="form-control" id="phone_number${parseInt(page) + 1}"
                                            placeholder="{{ __('Enter Phone number ') }}" autocomplete="tel">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Unpaid') }}</label>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="unpaid${parseInt(page) + 1}" onclick="rowPrice(${parseInt(page) + 1})">
                                        <label class="form-check-label" for="unpaid${parseInt(page) + 1}">{{ __('Open-price') }}</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="form-group">
                                    <label class="control-label">{{ __('Delivery') }}</label>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="include_delivery${parseInt(page) + 1}">
                                        <label class="form-check-label" for="include_delivery${parseInt(page) + 1}">{{ __('include-delivery') }}</label>
                                    </div>
                                </div>
                        </div>
                        </div>
                        <div class="row" id="rowPrice${parseInt(page) + 1}">
                        </div>
                        <div class="row" style="justify-content: end;">
                             <button class="btn btn-primary" onclick="previousPage(${parseInt(page) + 1})" style="cursor: pointer;">{{ __('back') }}</button>
                             <button class="btn btn-primary" onclick="nextPage(${parseInt(page) + 1})" style="cursor: pointer;">{{ __('Next') }}</button>
                             <button class="btn btn-primary" onclick="end(${parseInt(page) + 1})" style="cursor: pointer;">{{ __('Finished') }}</button>
                        </div>
                        <div class="row" id="latLng">
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden" name="lat"
                                        id="lat${parseInt(page) + 1}" placeholder="{{ __('Enter lat') }}" value="{{ inputValue('lat') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden" name="long"
                                        id="lng${parseInt(page) + 1}" placeholder="{{ __('Enter Lng') }}" value="{{ inputValue('lng') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden" name="pick_up_place_name"
                                        id="pick_up_place_name${parseInt(page) + 1}" value="">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_street" id="pick_up_place_street${parseInt(page) + 1}" value="">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_isoCountryCode" id="pick_up_place_isoCountryCode${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_isoCountryCode') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_country" id="pick_up_place_country${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_country') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_postalCode" id="pick_up_place_postalCode${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_postalCode') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_administrativeArea" id="pick_up_place_administrativeArea${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_administrativeArea') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_subAdministrativeArea"
                                        id="pick_up_place_subAdministrativeArea${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_subAdministrativeArea') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_locality" id="pick_up_place_locality${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_locality') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_subLocality" id="pick_up_place_subLocality${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_subLocality') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_thoroughfare" id="pick_up_place_thoroughfare${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_thoroughfare') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="form-group">
                                    <input readonly="readonly" class="form-control" type="hidden"
                                        name="pick_up_place_subThoroughfare" id="pick_up_place_subThoroughfare${parseInt(page) + 1}"
                                        value="{{ inputValue('pick_up_place_subThoroughfare') }}">
                                    <div class="invalid-feedback" style="display: none"></div>
                                </div>
                            </div>
                        </div>
                    </div>
            `);
            } else {
                $("#page" + (parseInt(page) + 1)).show();
            }
            $("#pageNum").val((parseInt(page) + 1));
            initMap((parseInt(page) + 1));
            if (page != 1)
                TotalPrice(page)
        }

        function previousPage(page) {
            $("#page" + page).hide();
            $("#pageEnd").hide();
            $("#page" + (parseInt(page) - 1)).show();
        }

        function end(page) {
            var baseUrl = window.location.origin;
            var dataArray = [];
            var formData = new FormData();

            if (
                ($("#lat" + page).val() == null || $("#lat" + page).val() == "") ||
                ($("#lng" + page).val() == null || $("#lng" + page).val() == "")
            ) {
                toastr.error("{{ __('Please select a location') }}");
                return;
            }else if ($("#phone_number" + page).length != 0 && ($.trim($("#phone_number" + page).val()) == null || $.trim($("#phone_number" + page).val()) == "")) {
                toastr.error("{{ __('Please do not leave the phone number blank') }}");
                return;
            }else if ($("#order_price" + page).length != 0 && ($.trim($("#order_price" + page).val()) == null || $.trim($("#order_price" + page).val()) == "")) {
                toastr.error("{{ __('Please do not leave the order price blank') }}");
                return;
            }else if ($("#delivery_price" + page).length != 0 && ($.trim($("#delivery_price" + page).val()) == null || $.trim($("#delivery_price" + page).val()) == "")) {
                toastr.error("{{ __('Please do not leave the delivery price blank') }}");
                return;
            }

            var puck_up_lat = $("#lat" + 1).val();
            var puck_up_lng = $("#lng" + 1).val();
            var puck_off_lat = $("#lat" + page).val();
            var puck_off_lng = $("#lng" + page).val();

            const dataObj = {
                puck_up_lat: puck_up_lat,
                puck_up_lng: puck_up_lng,
                puck_off_lat: puck_off_lat,
                puck_off_lng: puck_off_lng
            };
            dataArray.push(dataObj);


            formData.append("points", JSON.stringify(dataArray));
            $.ajax({
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: baseUrl + `/api/totalPriceShipment/index`,
                dataType: 'json',
                contentType: false,
                processData: false,
                data: formData,
                success: function(response) {
                    if (response["status"] === 200) {
                        $("#price" + page).remove();
                        $("#CoverStats" + page).remove();
                        $("#page" + page).append(`
                            <input type="hidden" id="price${page}" value="${response.data[0].Price}" />
                            <input type="hidden" id="CoverStats${page}" value="${response.data[0].CoverStats}" />
                        `);
                        $("#page" + page).hide();
                        $("#pageEnd").remove();
                        $("#addPage").append(`
                            <div class="card-body" id="pageEnd">
                                <div class="rowr">
                                    <div class="col-12" style="padding-left: 0;">
                                        <h4 class="mb-0">{{ __('order number') }} : ${$("#order_number").val()}</h4>
                                    </div>
                                </div>
                                <hr style="margin:15px">
                                <div class="row">
                                    ${(() => {
                                        let result = '';
                                        for (let i = 0; i < parseInt(page) - 1; i++) {
                                            let price = 0;
                                            let includeDelivery = false;                                          
                                            let orderPriceInput = $("#order_price" + (parseInt(page) - parseInt(i)));
                                            let deliveryPriceInput = $("#delivery_price" + (parseInt(page) - parseInt(i)));
                                            let includeDeliveryCheckbox = $("#include_delivery" + (parseInt(page) - parseInt(i)));                                            
                                            if (orderPriceInput.length && deliveryPriceInput.length) {
                                                price = parseInt(orderPriceInput.val()) + parseInt(deliveryPriceInput.val());
                                            }                                            
                                            if (includeDeliveryCheckbox.length) {
                                                includeDelivery = includeDeliveryCheckbox.prop('checked');
                                            }                                            
                                            result += `
                                                <div class="col-lg-6 mb-3" style="padding: 10px;">
                                                   <div class="row">
                                                       <div class="col-lg-5 mb-3">
                                                           <img src="{{ asset('assets/truck.png') }}" alt="Logo" style="width: 100%">
                                                       </div>
                                                       <div class="col-lg-7 mb-1">
                                                           <div class="col-lg-12 mb-1">
                                                               <span style="color:black">{{ __('Size') }}</span> : ${$("#size_id" + (parseInt(page) - parseInt(i))).find("option:selected").text().charAt(0).toUpperCase() + $("#size_id" + (parseInt(page) - parseInt(i))).find("option:selected").text().slice(1)}
                                                           </div>
                                                           <div class="col-lg-12 mb-1">
                                                               <span style="color:black">{{ __('Weight') }}</span> : ${$("#weights_id" + (parseInt(page) - parseInt(i))).find("option:selected").text()}
                                                           </div>
                                                           <div class="col-lg-12 mb-1">
                                                               <span style="color:black">{{ __('within-time') }}</span> : ${$("#withins_id" + (parseInt(page) - parseInt(i))).find("option:selected").text()}
                                                           </div>
                                                           <div class="col-lg-12 mb-1">
                                                               <span style="color:black">{{ __('Price') }}</span> : ${price}
                                                           </div>
                                                           <div class="col-lg-12 mb-1">
                                                                <span style="color:black">{{ __('Include Delivery') }}</span> : ${ includeDelivery ? "Yes" : "No"}
                                                           </div>
                                                           <div class="col-lg-12 mb-1">
                                                               <span style="color:black">{{ __('Cover Stats') }}</span> : ${$("#CoverStats" + (parseInt(page) - parseInt(i))).val()}
                                                           </div>
                                                       </div>
                                                   </div>
                                                   <div class="row">
                                                       <div class="col-lg-6 mb-3">
                                                           <div id="map${parseInt(page) + 200 + parseInt(i)}" style="border: 2px solid #ccc; width: 100%; height: 226px;"></div>
                                                           <input type="hidden" id="lat${parseInt(page) + 200 + parseInt(i)}" value="${$("#lat1").val()}">
                                                           <input type="hidden" id="lng${parseInt(page) + 200 + parseInt(i)}" value="${$("#lng1").val()}">
                                                       </div>
                                                       <div class="col-lg-6 mb-3">
                                                           <div id="map${parseInt(page) + 100 + parseInt(i)}" style="border: 2px solid #ccc; width: 100%; height: 226px;"></div>
                                                           <input type="hidden" id="lat${parseInt(page) + 100 + parseInt(i)}" value="${$("#lat" + (parseInt(page)  - parseInt(i))).val()}">
                                                           <input type="hidden" id="lng${parseInt(page) + 100 + parseInt(i)}" value="${$("#lng" + (parseInt(page)  - parseInt(i))).val()}">
                                                       </div>
                                                   </div>
                                               </div>
                                            `;
                                        }
                                        return result;
                                    })()}
                                </div>
                                <div class="row" style="justify-content: end;">
                                    <button class="btn btn-primary" onclick="previousPage(${parseInt(page) + 1})" style="cursor: pointer;">{{ __('back') }}</button>
                                    <button class="btn btn-primary" id="btn" type="button"
                                        style="padding: 4px; margin: 0 10px 0 10px;cursor: pointer;"><i class="fa fa-fw fa-lg fa-check-circle"
                                        style="font-size: 14px;margin-right: 0pc !important;"></i><i
                                        class="loading-icon fa-lg fas fa-spinner fa-spin hide"
                                        style="display: none"></i><span id="textSpan"
                                        onclick="checkout(${parseInt(page)})"
                                        style="font-size: 14px;padding: 10px;padding-left: 5px;">{{ __('CheckOut') }}</span>
                                    </button>
                                </div>
                            </div>
                        `);
                        for (let i = 200; i < parseInt(page) - 1 + 200; i++) {
                            initMap(parseInt(page) + parseInt(i))
                        }
                        for (let j = 100; j < parseInt(page) - 1 + 100; j++) {
                            initMap(parseInt(page) + j);
                        }
                    }
                }
            });
        }

        function checkout(page) {
            var baseUrl = window.location.origin;
            var dataArray = [];
            var formData = new FormData();

            if (page == 2) {
                for (let i = 1; i <= page; i++) {
                    if (i != 1) {
                        var puck_up_lat = $("#lat" + 1).val();
                        var puck_up_lng = $("#lng" + 1).val();
                        var puck_off_lat = $("#lat" + page).val();
                        var puck_off_lng = $("#lng" + page).val();

                        let Totalprice1 = parseInt($("#order_price" +   parseInt(i)).val() ) + parseInt($("#delivery_price" +  parseInt(i)).val());
                        if ($("#include_delivery" +  parseInt(i)).prop('checked')) {
                            includeDelivery = 1;
                        } else {
                            includeDelivery = 0;
                        }

                        const dataObj = {
                            lat_pick_up: puck_up_lat,
                            long_pick_up: puck_up_lng,
                            pick_up_place_mark: {
                                name: $("#pick_up_place_name" + 1).val(),
                                street: $("#pick_up_place_street" + 1).val(),
                                isoCountryCode: $("#pick_up_place_isoCountryCode" + 1).val(),
                                country: $("#pick_up_place_country" + 1).val(),
                                postalCode: $("#pick_up_place_postalCode" + 1).val(),
                                administrativeArea: $("#pick_up_place_administrativeArea" + 1).val(),
                                subAdministrativeArea: $("#pick_up_place_subAdministrativeArea" + 1).val(),
                                locality: $("#pick_up_place_locality" + 1).val(),
                                subLocality: $("#pick_up_place_subLocality" + 1).val(),
                                thoroughfare: $("#pick_up_place_thoroughfare" + 1).val(),
                                subThoroughfare: $("#pick_up_place_subThoroughfare" + 1).val(),
                            },
                            lat_drop_off: puck_off_lat,
                            long_drop_off: puck_off_lng,
                            pick_off_place_mark: {
                                name: $("#pick_up_place_name" + i).val(),
                                street: $("#pick_up_place_street" + i).val(),
                                isoCountryCode: $("#pick_up_place_isoCountryCode" + i).val(),
                                country: $("#pick_up_place_country" + i).val(),
                                postalCode: $("#pick_up_place_postalCode" + i).val(),
                                administrativeArea: $("#pick_up_place_administrativeArea" + i).val(),
                                subAdministrativeArea: $("#pick_up_place_subAdministrativeArea" + i).val(),
                                locality: $("#pick_up_place_locality" + i).val(),
                                subLocality: $("#pick_up_place_subLocality" + i).val(),
                                thoroughfare: $("#pick_up_place_thoroughfare" + i).val(),
                                subThoroughfare: $("#pick_up_place_subThoroughfare" + i).val(),
                            },
                            phone_number: $("#phone_number" + i).val(),
                            size: $("#size_id" + i).val(),
                            order_details: $("#details" + i).val(),
                            weight: $("#weights_id" + i).val(),
                            within: $("#withins_id" + i).val(),
                            total: Totalprice1,
                            includeDelivery: includeDelivery,
                            paymentMethod: $("#paymentMethod").val(),
                            FCM_TOKEN: "",
                            tax: $("#tax").val(),
                            user_id: $("#user_id").val(),
                            date: $("#date").val(),
                            time_from: $("#time_from").val(),
                            time_to: $("#time_to").val(),
                        };
                        dataArray.push(dataObj);
                    }
                }

                formData.append("orders", JSON.stringify(dataArray));
                formData.append("order_number", $("#order_number").val());
                let user_id = $("#user_id").val();
                $(".hide").css({
                    'display': ''
                });
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{ __('Create') }}");
                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: `${baseUrl}/api/order-shipment?user_id=${user_id}&lang_code=en`,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(response) {
                        swal({
                            closeOnClickOutside: false,
                            title: "{{ __('Shipment Order Createa Successfully') }}",
                            icon: "success",
                        }).then(function() {
                            window.location.href =
                                "{{ route('vendor.shipmentOrders') }}";
                        });                    },
                    error: function(xhr, error) {
                        console.log(xhr);
                    }
                });
            } else {
                for (let i = 1; i <= page; i++) {
                    if (i != 1) {
                        var puck_up_lat = $("#lat" + 1).val();
                        var puck_up_lng = $("#lng" + 1).val();
                        var puck_off_lat = $("#lat" + page).val();
                        var puck_off_lng = $("#lng" + page).val();

                        let Totalprice1 = parseInt($("#order_price" + i).val()) + parseInt($("#delivery_price" + i).val())
                        if ($("#include_delivery" +  parseInt(i)).prop('checked')) {
                            includeDelivery = 1;
                        } else {
                            includeDelivery = 0;
                        }

                        const dataObj = {
                            lat_pick_up: puck_up_lat,
                            long_pick_up: puck_up_lng,
                            pick_up_place_mark: {
                                name: $("#pick_up_place_name" + 1).val(),
                                street: $("#pick_up_place_street" + 1).val(),
                                isoCountryCode: $("#pick_up_place_isoCountryCode" + 1).val(),
                                country: $("#pick_up_place_country" + 1).val(),
                                postalCode: $("#pick_up_place_postalCode" + 1).val(),
                                administrativeArea: $("#pick_up_place_administrativeArea" + 1).val(),
                                subAdministrativeArea: $("#pick_up_place_subAdministrativeArea" + 1).val(),
                                locality: $("#pick_up_place_locality" + 1).val(),
                                subLocality: $("#pick_up_place_subLocality" + 1).val(),
                                thoroughfare: $("#pick_up_place_thoroughfare" + 1).val(),
                                subThoroughfare: $("#pick_up_place_subThoroughfare" + 1).val(),
                            },
                            lat_drop_off: puck_off_lat,
                            long_drop_off: puck_off_lng,
                            pick_off_place_mark: {
                                name: $("#pick_up_place_name" + i).val(),
                                street: $("#pick_up_place_street" + i).val(),
                                isoCountryCode: $("#pick_up_place_isoCountryCode" + i).val(),
                                country: $("#pick_up_place_country" + i).val(),
                                postalCode: $("#pick_up_place_postalCode" + i).val(),
                                administrativeArea: $("#pick_up_place_administrativeArea" + i).val(),
                                subAdministrativeArea: $("#pick_up_place_subAdministrativeArea" + i).val(),
                                locality: $("#pick_up_place_locality" + i).val(),
                                subLocality: $("#pick_up_place_subLocality" + i).val(),
                                thoroughfare: $("#pick_up_place_thoroughfare" + i).val(),
                                subThoroughfare: $("#pick_up_place_subThoroughfare" + i).val(),
                            },
                            phone_number: $("#phone_number" + i).val(),
                            size: $("#size_id" + i).val(),
                            order_details: $("#details" + i).val(),
                            weight: $("#weights_id" + i).val(),
                            within: $("#withins_id" + i).val(),
                            total: Totalprice1,
                            includeDelivery: includeDelivery,
                            paymentMethod: $("#paymentMethod").val(),
                            FCM_TOKEN: "",
                            tax: $("#tax").val(),
                            user_id: $("#user_id").val(),
                            date: $("#date").val(),
                            time_from: $("#time_from").val(),
                            time_to: $("#time_to").val(),
                        };
                        dataArray.push(dataObj);
                    }
                }
                formData.append("orders", JSON.stringify(dataArray));
                formData.append("order_number", $("#order_number").val());
                let user_id = $("#user_id").val();
                $(".hide").css({
                    'display': ''
                });
                $(".fa-check-circle")[0].style.display = "none";
                $("#btn").attr("disabled", true);
                $("#textSpan").html("{{ __('Create') }}");
                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: `${baseUrl}/api/addMultiItemsToShipmentOrder?user_id=${user_id}&lang_code=en`,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(response) {
                        swal({
                            closeOnClickOutside: false,
                            title: "{{ __('Shipment Order Createa Successfully') }}",
                            icon: "success",
                        }).then(function() {
                            window.location.href =
                                "{{ route('vendor.shipmentOrders') }}";
                        }); 
                    }
                });
            }
        }

        function TotalPrice(page) {
            var baseUrl = window.location.origin;
            var dataArray = [];
            var formData = new FormData();
            var puck_up_lat = $("#lat" + 1).val();
            var puck_up_lng = $("#lng" + 1).val();
            var puck_off_lat = $("#lat" + page).val();
            var puck_off_lng = $("#lng" + page).val();

            const dataObj = {
                puck_up_lat: puck_up_lat,
                puck_up_lng: puck_up_lng,
                puck_off_lat: puck_off_lat,
                puck_off_lng: puck_off_lng
            };
            dataArray.push(dataObj);

            formData.append("points", JSON.stringify(dataArray));
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: `${baseUrl}/api/totalPriceShipment/index`,
                dataType: 'json',
                contentType: false,
                processData: false,
                data: formData,
                success: function(response) {
                    if (response["status"] === 200) {
                        $("#price" + page).remove();
                        $("#CoverStats" + page).remove();
                        $("#page" + page).append(`
                            <input type="hidden" id="price${page}" value="${response.data[0].Price}" />
                            <input type="hidden" id="CoverStats${page}" value="${response.data[0].CoverStats}" />
                        `);
                        console.log(response.data[0].Price);
                        console.log(response.data[0].CoverStats);
                    } else if (response["status"] === 201) {}
                },
                error: function(xhr) {
                    console.log(xhr);
                }
            });
        }

        function rowPrice(page) {
            if ($("#unpaid" + parseInt(page)).prop('checked')) {
                $(`#rowPrice${parseInt(page)}`).append(`
                    <div class="col-lg-4" id="order_price_row${parseInt(page)}">
                        <div class="form-group">
                            <label for="order_price${parseInt(page)}" class="control-label">{{ __('order_price') }}</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="order_price${parseInt(page)}" placeholder="{{ __('enter_order_price') }}" min="0" step="0.01">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4" id="delivery_price_row${parseInt(page)}">
                        <div class="form-group">
                            <label for="delivery_price${parseInt(page)}" class="control-label">{{ __('delivery_price') }}</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="delivery_price${parseInt(page)}" placeholder="{{ __('enter-delivery_price') }}" min="0" step="0.01">
                            </div>
                        </div>
                    </div>
                `);
            } else {
                $("#order_price_row" + parseInt(page)).remove();
                $("#delivery_price_row" + parseInt(page)).remove();
            }
        }

    </script>
    <script src="{{ asset('assets/js/maps.js') }}"></script>
    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCp1bU8kQHy3-Dk1UfkwP05aymvbKhVwHM&callback=initMap&libraries=&v=weekly"
        async></script>
@endsection