@extends('layouts.customer')

@section('title') Vendor Quotation @endsection
@section('styles')

@endsection
@push('head-scripts')

@endpush
@section('content')
<div class="main-div">
    <!-- Slider Start -->
    <section class="inner_banner">
        <div class="container-fluid">
                            <h2>Quotation</h2>
                            <p>Brief overview of the quotation process and what information is needed. <br>
Please fill up the details for Quick Quote :
</p>
        </div>
    </section>
    <section class="contect-sec enquiryn-page">
        <div class="container-fluid">
        <div class="contect-form quotation_form">
            <form id="reqForm" tabindex="500"  action="{{ route('quotation.store') }}" method="POST" autocomplete="off"> 
                {{ csrf_field() }}                   
                <div class="container centerDiv">
                    <div class="row">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if (session()->has('success'))
                            <div class="alert alert-success">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                {{ session('success') }}
                            </div>
                            @endif

                            @if (session()->has('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                    @endif
                        <div class="col-md-6">
                            <h5 class="modal-title" id="pickupModalLabel">1. Pickup / From</h5>
                            <fieldset>
                                <legend>Pickup Address</legend>
                                <div class="row"> 
                                    <div class="col-md-12 col-sm-12 ">
                                        <p id="errmsg" class="errmsg"></p>
                                        <label for="sender_address">Address</label>
                                        <!--<input id="sender_address" class="form-control address" type="text" placeholder="Address" name="street-address" />-->
                                        <select id="pickup_address" required class="form-control address" name="pickup_address" type="text" placeholder="Address" onchange="codeAddress()">
                                            <option>- Choose Pickup Location -</option>
                                            @foreach($vendor->vendorAddresses as $locations)
                                            <option value="" @selected(old('pickup_address') === str_replace('%', ',', $locations->vendor_address ))></option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" id="pickup_zip_code" name="pickup_zip_code" value="{{ old('pickup_zip_code') }}">
                                        <input id="pickup_latitude" name="pickup_latitude" value="{{ old('pickup_latitude') }}" type="hidden"></p>
                                        <input id="pickup_longitude" name="pickup_longitude" value="{{ old('pickup_longitude') }}" type="hidden"></p>
                                    </div>
                                    <div class="text-center mt-3">
                                        <label for="">OR</label>
                                    </div>
                                    <div class="col-md-12 col-sm-12 text-center">
                                        <p id="errmsg" class="errmsg"></p>
                                        <button type="button" id="diffrentAddressEnabledBtn" class="btn btn-primary" onclick="diffrentAddressEnabled()" > Enable Different Address  </button>
                                        <input id="diffrent_address" class="form-control address" value="" type="text" placeholder="Different Pickup Address" name="diffrent_address" onclick="codeAddress()" disabled/>
                                    </div>
                                </div>
                            </fieldset>
                            {{-- <fieldset>
                                <legend>Pickup Detail</legend>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6">
                                        <label for="pickup_date">Pickup Date</label>
                                        <input type="date" id="pickup_date" value="{{ old('pickup_date') }}" required class="form-control ng-untouched ng-pristine ng-invalid" style="text-transform: capitalize;text-transform: capitalize" type="text" name="pickup_date" >
                                    </div>
                                </div>
                            <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3190.4877697402508!2d174.72395845136666!3d-36.902600490129174!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d0d468ca3136c07%3A0xd97546787bdb53e9!2s157%20Stoddard%20Road%2C%20Mount%20Roskill%2C%20Auckland%201041!5e0!3m2!1sja!2snz!4v1636929932308!5m2!1sja!2snz" width="400" height="270" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                                    </div>
                                </div>
                            </fieldset> --}}
                        </div>
                        <div class="col-md-6">
                            <h5 class="modal-title" id="deliverModalLabel">2. Deliver / To</h5>

                            <fieldset>
                                <legend>Delivery Address</legend>
                                <div class="row">
                                    <div  class="col-md-12 col-sm-12">
                                        <label for="receiver_address">Address</label>
                                        <input id="receiver_address" class="form-control address" value="{{ old('receiver_address') }}" type="text" placeholder="Address" name="receiver_address" />
                                        <p id="errReceiverAddress" class="errmsg"></p>
                                        <input type="hidden" id="receiver_zip_code" name="receiver_zip_code" value="{{ old('receiver_zip_code') }}">
                                        <input id="receiver_latitude" name="receiver_latitude" value="{{ old('receiver_latitude') }}" type="hidden"></p>
                                        <input id="receiver_longitude" name="receiver_longitude" value="{{ old('receiver_longitude') }}" type="hidden"></p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12 align-items-baseline">
                                        <label for="drop_off_access" class="mb-2">Drop Off Access</label><br>
                                        <label for="stair" class="labelbox">
                                            <input type="radio" id="stair" name="drop_off_access" value="Stairs" onclick="dropOffAccess('stair')" @checked(old('drop_off_access') === 'Stairs')> Stair
                                        </label>
                                        <label for="lift" class="labelbox">
                                            <input type="radio" id="lift" name="drop_off_access" value="Lift" onclick="dropOffAccess('lift')"  @checked(old('drop_off_access') === 'Lift')> Lift
                                        </label>
                                        <label for="groundfloor" class="labelbox">
                                            <input type="radio" id="groundfloor" name="drop_off_access" value="Ground" onclick="dropOffAccess('groundfloor')"
                                            {{ old('drop_off_access','Ground') === 'Ground' ? 'checked' : '' }}> Ground Floor
                                        </label>
                                        <br>
                                        <p id="errStairOrLift" class="errmsg"></p>
                                    </div>
                                    
                                    <div class="col-12 align-items-baseline">
                                        <label for="floor" class="mb-2">Floor</label><br>
                                        <select class="form-control" id="floor" name="floor" disabled style="background-color:#cccccc"
                                                @disabled(old('drop_off_access') =='Ground' )
                                                @if(old('drop_off_access')==='Ground' ) style="background-color:#cccccc" @endif>
                                                    @foreach($vendor->vendorFloorFares as $key=>$value)
                                                    <option value="{{ $value->floor_num }}" @selected(old('floor') === $value->floor_num)>{{ $value->floor_num }}</option>
                                                    @endforeach
                                                </select>
                                        <p id="errFloor" class="errmsg"></p>
                                    </div>
                                </div>
                            </fieldset>

                            <fieldset>
                                <legend>Delivery Detail</legend>
                                <div class="row">
            
                                </div>
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        Estimated Distance: <input id="estimated_km" type="text" value="{{ old('totalEstimatedKm') }}" name="totalEstimatedKm"> km
                                    </div>
                                    <div class="col-md-12 col-sm-12" style="display:none">
                                        <div id="map" style="height: 300px;"></div>
                                    </div>
                                </div>
                            </fieldset>    
                        </div>
                    </div>
                </div>

                <div class="container centerDiv">
                                    <h5 class="modal-title" id="AddItemsModalLabel">Order Invoice</h5>
                                    <fieldset>
                                <legend>Item Detail</legend>
                                @php
                                $packages = old('packages', [])
                                @endphp
                                @forelse($packages as $key => $package)
                                <div class="form-group" id="list">
                                    <div class="list_var">
                                        <div class="duplicate mb-2" style="background-color: #fdf5e0; padding: 20px; border-radius: 1rem;">
                                            <div class="row">
                                                <div class="col-2">       be l>
                                                    <input id="refNum_{{ $key }}" value="{{ $package['refNum'] }}" name="packages[{{ $key }}][refNum]" data-name-format="packages[%d][refNum]" class="form-control readOnly" type="text" placeholder="ref001" readonly />
                                                    <p id="errRefNum_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col-3">
                                                    <label for="productType_0">Product Type</label>
                                                    <select class="form-control" id="productType_{{ $key }}" type="text" name="packages[{{ $key }}][product_type]" data-name-format="packages[%d][product_type]" onchange="calcOrderNumAndRefNum()">

                                                        <option value="Select">Select</option>
                                                        <option value="Carton" @selected($package['product_type']==='Carton' )>Carton</option>
                                                        <option value="Pallets" @selected($package['product_type']==='Pallets' )>Pallets</option>
                                                        <option value="Stock move" @selected($package['product_type']==='Stock move' )>Stock move</option>
                                                        <option value="Appliances" @selected($package['product_type']==='Appliances' )>Appliances</option>
                                                        <option value="Furniture" @selected($package['product_type']==='Furniture' )>Furniture</option>
                                                        <option value="Hazardous goods" @selected($package['product_type']==='Hazardous goods' )>Hazardous goods</option>
                                                        <option value="others" @selected($package['product_type']==='others' )>others</option>
                                                    </select>
                                                    <p id="errProductType_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="description_{{ $key }}">Description</label>
                                                    <input id="description_{{ $key }}" class="form-control" style="min-width: fit-content;" type="text" placeholder="Description" name="packages[{{ $key }}][description]" data-name-format="packages[%d][description]" value="{{ $package['description'] }}" />
                                                    <p id="errDescription_{{ $key }}" class="errmsg"></p>
                                                </div>

                                            </div>
                                            <div class="row justify-content-center align-items-start">

                                                <div class="col align-items-baseline" style="min-width: fit-content">
                                                    <label for="options_0" class="mb-2">Options</label><br>
                                                    <label for="installation_0" class="labelbox">
                                                        <input type="checkbox" id="installation_{{ $key }}" name="packages[{{ $key }}][installation]" data-name-format="packages[%d][installation]" value="1" onclick="selectedOptions('installation')" @checked(array_key_exists('installation', $package))> Installation
                                                    </label>
                                                    <label for="unwrap_0" class="labelbox">
                                                        <input type="checkbox" id="unwrap_{{ $key }}" name="packages[{{ $key }}][unwrap]" data-name-format="packages[%d][unwrap]" value="1" onclick="selectedOptions('unwrap')" @checked(array_key_exists('unwrap', $package))> Unwrap
                                                    </label>
                                                    <label for="fragile_0" class="labelbox">
                                                        <input type="checkbox" id="fragile_{{ $key }}" name="packages[{{ $key }}][fragile]" data-name-format="packages[%d][fragile]" value="1" onclick="selectedOptions('fragile')" @checked(array_key_exists('fragile', $package))> Fragile
                                                    </label>
                                                    <label for="none_0" class="labelbox">
                                                        <input type="checkbox" id="none_{{ $key }}" name="packages[{{ $key }}][none]" data-name-format="packages[0][none]" value="1" data-empty-val="false" onclick="selectedOptions('none')" @checked(array_key_exists('none', $package))> None
                                                    </label>
                                                </div>

                                            </div>
                                            <div class="row justify-content-center align-items-end">
                                                <div class="col">
                                                    <label for="unit_{{ $key }}">Unit</label>
                                                    <select id="unit_{{ $key }}" name="packages[{{ $key }}][unit]" data-name-format="packages[%d][unit]" class="form-control" style="width: fit-content;" type="text" onchange="units()">
                                                        <option value="mm" @selected($package['unit']==='mm' )>mm</option>
                                                        <option value="cm" @selected($package['unit']==='cm' ) @if(empty($package['unit'])) selected @endif>cm</option>
                                                        <option value="m" @selected($package['unit']==='m' )>m</option>
                                                    </select>
                                                    <p id="errUnit_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="quantity_{{ $key }}">Quantity</label>
                                                    <input id="quantity_{{ $key }}" class="form-control" type="text" value="{{ $package['quantity'] }}" placeholder="0" name="packages[{{ $key }}][quantity]" data-name-format="packages[%d][quantity]" onchange="measurements()" />
                                                    <p id="errQuantity_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="length_{{ $key }}">Length <br>(<label id="unit_l_{{ $key }}" name="unit_l_{{ $key }}">cm</label>)</label>
                                                    <input id="length_{{ $key }}" name="packages[{{ $key }}][length]" value="{{ $package['length'] }}" data-name-format="packages[%d][length]" class="form-control" type="number" placeholder="-.-" onchange="measurements()" />
                                                    <p id="errLength_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="height_{{ $key }}">Height <br>(<label id="unit_h_{{ $key }}" name="unit_h_{{ $key }}">cm</label>)</label>
                                                    <input id="height_{{ $key }}" name="packages[{{ $key }}][height]" value="{{ $package['height'] }}" data-name-format="packages[%d][height]" class="form-control" type="number" placeholder="-.-" onchange="measurements()" />
                                                    <p id="errHeight_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="width_{{ $key }}">Width <br>(<label id="unit_w_{{ $key }}" name="unit_w_{{ $key }}">cm</label>)</label>
                                                    <input id="width_{{ $key }}" name="packages[{{ $key }}][width]" value="{{ $package['width'] }}" data-name-format="packages[%d][width]" class="form-control" type="number" placeholder="-.-" onchange="measurements()" />
                                                    <p id="errWidth_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col" style="margin-bottom: 15px;">
                                                    <label for="cubic_{{ $key }}">Cubic <br>(m3)</label>
                                                    <input id="cubic_{{ $key }}" name="packages[{{ $key }}][cubic]" value="{{ $package['cubic'] }}" data-name-format="packages[%d][cubic]" class="form-control cubic" type="text" placeholder="-.-" onchange="cubic()" />
                                                </div>
                                                <div class="col">
                                                    <label for="weight_{{ $key }}">Weight (kg)</label>
                                                    <input id="weight_{{ $key }}" class="form-control" type="text" value="{{ $package['weight'] }}" placeholder="0.0" name="packages[{{ $key }}][weight]" data-name-format="packages[%d][weight]" value="" />
                                                    <p id="errWeight_{{ $key }}" class="errmsg"></p>
                                                </div>
                                                <div class="col-2" style="padding: 5px; margin-bottom: 15px;">
                                                    <button id="plus_{{ $key }}" name="plus_{{ $key }}" type="button" class="list_add btn btn-info btn-round"><i class="fas fa-plus"></i></button>
                                                    <button id="minus_{{ $key }}" name="minus_{{ $key }}" type="button" class="list_del btn btn-danger btn-round"><i class="fas fa-minus"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                @empty
                                <div class="form-group" id="list">
                                    <div class="list_var">
                                        <div class="duplicate mb-2" style="background-color: #fdf5e0; padding: 20px; border-radius: 1rem;">
                                            <div class="row">
                                                <div class="col-md-2 col-sm-6">
                                                    <label for="refNum_0">Reference#</label>
                                                    <input id="refNum_0" name="packages[0][refNum]" data-name-format="packages[%d][refNum]" class="form-control readOnly" type="text" placeholder="ref001" readonly />
                                                    <p id="errRefNum_0" class="errmsg"></p>
                                                </div>
                                                <div class="col-md-3 col-sm-6">
                                                    <label for="productType_0">Product Type</label>
                                                    <select class="form-control" id="productType_0" type="text" name="packages[0][product_type]" data-name-format="packages[%d][product_type]" onchange="calcOrderNumAndRefNum()">

                                                        <option value="Select">Select</option>
                                                        <option value="Carton">Carton</option>
                                                        <option value="Pallets">Pallets</option>
                                                        <option value="Stock move">Stock move</option>
                                                        <option value="Appliances">Appliances</option>
                                                        <option value="Furniture">Furniture</option>
                                                        <option value="Hazardous goods">Hazardous goods</option>
                                                        <option value="others">others</option>
                                                    </select>
                                                    <p id="errProductType_0" class="errmsg"></p>
                                                </div>
                                                <div class="col-md-7 col-sm-12">
                                                    <label for="description_0">Description</label>
                                                    <input id="description_0" class="form-control" style="min-width: fit-content;" type="text" placeholder="Description" name="packages[0][description]" data-name-format="packages[%d][description]" value="" />
                                                    <p id="errDescription_0" class="errmsg"></p>
                                                </div>

                                            </div>
                                            <div class="row justify-content-center align-items-start">

                                                <div class="col align-items-baseline" style="min-width: fit-content">
                                                    <label for="options_0" class="mb-2">Options</label><br>
                                                    <label for="installation_0" class="labelbox">
                                                        <input type="checkbox" id="installation_0" name="packages[0][installation]" data-name-format="packages[%d][installation]" value="1" onclick="selectedOptions('installation')"> Installation
                                                    </label>
                                                    <label for="unwrap_0" class="labelbox">
                                                        <input type="checkbox" id="unwrap_0" name="packages[0][unwrap]" data-name-format="packages[%d][unwrap]" value="1" onclick="selectedOptions('unwrap')"> Unwrap
                                                    </label>
                                                    <label for="fragile_0" class="labelbox">
                                                        <input type="checkbox" id="fragile_0" name="packages[0][fragile]" data-name-format="packages[%d][fragile]" value="1" onclick="selectedOptions('fragile')"> Fragile
                                                    </label>
                                                    <label for="none_0" class="labelbox">
                                                        <input type="checkbox" id="none_0" name="packages[0][none]" data-name-format="packages[0][none]" value="1" data-empty-val="false" onclick="selectedOptions('none')" checked> None
                                                    </label>
                                                </div>

                                            </div>
                                            <div class="row justify-content-center align-items-end small_scn">
                                                <div class="col">
                                                    <label for="unit_0">Unit</label>
                                                    <select id="unit_0" name="packages[0][unit]" data-name-format="packages[%d][unit]" class="form-control" type="text" onchange="units()">
                                                        <option value="mm">mm</option>
                                                        <option value="cm" selected>cm</option>
                                                        <option value="m">m</option>
                                                    </select>
                                                    <p id="errUnit_0" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="quantity_0">Quantity</label>
                                                    <input id="quantity_0" class="form-control" type="text" placeholder="0" name="packages[0][quantity]" data-name-format="packages[%d][quantity]" onchange="measurements()" />
                                                    <p id="errQuantity_0" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="length_0">Length (<label id="unit_l_0" name="unit_l_0" class="w-auto">cm</label>)</label>
                                                    <input id="length_0" name="packages[0][length]" data-name-format="packages[%d][length]" class="form-control" type="text" placeholder="-.-" onchange="measurements()" />
                                                    <p id="errLength_0" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="height_0">Height (<label id="unit_h_0" name="unit_h_0" class="w-auto">cm</label>)</label>
                                                    <input id="height_0" name="packages[0][height]" data-name-format="packages[%d][height]" class="form-control" type="text" placeholder="-.-" onchange="measurements()" />
                                                    <p id="errHeight_0" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="width_0">Width (<label id="unit_w_0" name="unit_w_0" class="w-auto">cm</label>)</label>
                                                    <input id="width_0" name="packages[0][width]" data-name-format="packages[%d][width]" class="form-control" type="text" placeholder="-.-" onchange="measurements()" />
                                                    <p id="errWidth_0" class="errmsg"></p>
                                                </div>
                                                <div class="col">
                                                    <label for="cubic_0">Cubic (m3)</label>
                                                    <input id="cubic_0" name="packages[0][cubic]" data-name-format="packages[%d][cubic]" class="form-control cubic" type="text" placeholder="-.-" onchange="cubic()" />
                                                </div>
                                                <div class="col">
                                                    <label for="weight_0">Weight (kg)</label>
                                                    <input id="weight_0" class="form-control" type="text" placeholder="0.0" name="packages[0][weight]" data-name-format="packages[%d][weight]" value="" />
                                                    <p id="errWeight_0" class="errmsg"></p>
                                                </div>
                                                <div class="col" style="padding: 5px; margin-bottom: 15px;">
                                                    <button id="plus_0" name="plus_0" type="button" class="list_add btn btn-info btn-round"><i class="fas fa-plus"></i></button>
                                                    <button id="minus_0" name="minus_0" type="button" class="list_del btn btn-danger btn-round"><i class="fas fa-minus"></i></button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforelse
                            </fieldset>
                    <!-- OrderInvoiceModal -->
                    
                    </div>
                    
        
                </div>

                <div class="text-center mb-5">
                    <button type="button" class="btn btn-primary quick_quote-btn" onclick="pickupValidate()">Quick Quote</button>
                </div>
            </form>
                                </div>
                                </div>
</section>
                                </div>
@endsection

@section('script')
<script>
    function diffrentAddressEnabled()
    {
        // alert('Hello');
        var diffrentAddressisDisabled = $('#diffrent_address').prop('disabled');
        if(diffrentAddressisDisabled == true)
        {
            $('#diffrent_address').removeAttr('disabled');
            $('#pickup_address').val('- Choose Pickup Location -');
            $('#diffrentAddressEnabledBtn').html('Disable Different Address');
        }else{
            $('#diffrent_address').attr('disabled',true);
            $('#pickup_address').removeAttr('disabled');
            $('#diffrentAddressEnabledBtn').html('Enable Different Address');
            $('#diffrent_address').val(null);
        }
    }
</script>
<script>
    function calcOrderNumAndRefNum() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);
        var ref = 'refNum_' + elemId;
        if (!document.getElementById(ref).value) {
            document.getElementById(ref).value = "Ref" + Math.floor(Math.random() * 1000);
        }
    }
</script>

<script>
    function openShelf() {
        document.getElementById("nav_shelf").style.width = "300px";
    }

    function closeShelf() {
        document.getElementById("nav_shelf").style.width = "0";
    }
    jQuery('.site-content').click(function() {
        return closeShelf();
    });
    $(document).ready(function() {
        $(".close").click(function() {
            $(".modal").fadeOut(1000);
        });
        $("#myBtn").click(function() {
            $(".modal").fadeIn(1000);
        });
        $("#myBtn1").click(function() {
            $(".modal").fadeIn(1000);
        });

        $(".close").click(function() {
            $(".btnreq").removeClass("active");
        });
        $(".close").click(function() {
            $(".active1").addClass("active");
        });
    });
</script>

<!-- Google API -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyB9AnSA3IsTgIhUwWzn0E-ToPs30axhDzU&libraries=places"></script>

<script>
    $(document).ready(function() {
        $("#latitudeArea").addClass("d-none");
        $("#longtitudeArea").addClass("d-none");
        let pickupLat = parseFloat(document.getElementById('pickup_latitude').value);
        let pickupLng = parseFloat(document.getElementById('pickup_longitude').value);
        let receiverLat = parseFloat(document.getElementById('receiver_latitude').value);
        let receiverLng = parseFloat(document.getElementById('receiver_longitude').value);
        const pickupLatLng = {
            lat: pickupLat,
            lng: pickupLng
        };

        const receiverLatLng = {
                lat: receiverLat,
                lng: receiverLng
            };
        if(pickupLat || pickupLng || receiverLat || receiverLng) {
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: receiverLatLng,
            });

            pickup = new google.maps.Marker({
                position: pickupLatLng,
                map,
                title: "Pickup Address",
                icon: "https://maps.google.com/mapfiles/kml/paddle/P.png"
            });
            console.log(pickup);
            delivery = new google.maps.Marker({
                position: receiverLatLng,
                map,
                title: "Delivery Address",
                icon: "https://maps.google.com/mapfiles/kml/paddle/D.png"
            });
        }
    });
</script>
<script>
    // google.maps.event.addDomListener(window, 'load', initSenderAddress);
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("map"), {
        center: {
            lat: -36.859482,
            lng: 174.4259345
        },
        zoom: 10,
        mapTypeControl: false,
    });

    function codeAddress() {
        var address = document.getElementById('pickup_address').value;
        var diffrent_address = document.getElementById('diffrent_address').value;
        if(diffrent_address){
            // alert(diffrent_address);
            console.log(address);
            geocoder.geocode({
                'address': diffrent_address
            }, function(results, status) {
                if (status == 'OK') {
                    document.getElementById('pickup_latitude').value = results[0].geometry.location.lat();
                    document.getElementById('pickup_longitude').value = results[0].geometry.location.lng();
                    // document.getElementById('diffrent_address_db_filed').value = 1;
                    $.each(results[0].address_components,function(index,value){
                        if(value.types[0] === "postal_code"){
                            $('#pickup_zip_code').val(value.long_name);
                        }
                    });
                    console.log(results[0].geometry.location.lat());
                    console.log(results[0].geometry.location.lng());
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }else{
            // alert(address);
            console.log(address);
            geocoder.geocode({
                'address': address
            }, function(results, status) {
                if (status == 'OK') {
                    document.getElementById('pickup_latitude').value = results[0].geometry.location.lat();
                    document.getElementById('pickup_longitude').value = results[0].geometry.location.lng();
                //    document.getElementById('diffrent_address_db_filed').value = 0;
                    $.each(results[0].address_components,function(index,value){
                        if(value.types[0] === "postal_code"){
                            $('#pickup_zip_code').val(value.long_name);
                        }
                    });
                    console.log(results[0].geometry.location.lat());
                    console.log(results[0].geometry.location.lng());
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
        
    }
</script>
<script>
    google.maps.event.addDomListener(window, 'load', initReceiverAddress);

    function haversine_distance(pickup, delivery) {
        var R = 6371.0710; // Radius of the Earth in meters
        var rlat1 = pickup.position.lat() * (Math.PI / 180);
        // Convert degrees to radians
        var rlat2 = delivery.position.lat() * (Math.PI / 180);
        // Convert degrees to radians
        var difflat = rlat2 - rlat1; // Radian difference (latitudes)
        var difflon = (delivery.position.lng() - pickup.position.lng()) *
            (Math.PI / 180); // Radian difference (longitudes)

        var d = 2 * R *
            Math.asin(Math.sqrt(Math.sin(difflat / 2) * Math.sin(difflat / 2) +
                Math.cos(rlat1) * Math.cos(rlat2) *
                Math.sin(difflon / 2) * Math.sin(difflon / 2)));
        return d;
    }

    function initReceiverAddress() {
        var input = document.getElementById('receiver_address');
        // var input = document.getElementById('diffrent_address');
        var options = {
            componentRestrictions: {
                country: "nz"
            }
        };
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            console.log(place);
            document.getElementById('receiver_latitude').value = place.geometry['location'].lat();
            document.getElementById('receiver_longitude').value = place.geometry['location'].lng();
            var deliveryLat = place.geometry['location'].lat();
            var deliveryLng = place.geometry['location'].lng();
            for (var i = 0; i < place.address_components.length; i++) {
                    for (var j = 0; j < place.address_components[i].types.length; j++) {
                        if (place.address_components[i].types[j] == "postal_code") {
                            console.log(place.address_components[i].long_name);
                            document.getElementById('receiver_zip_code').value = place.address_components[i].long_name;

                            // var vendorpostcode = document.getElementById('vendorpostcode').value;
                            // var receiver_zip_code = document.getElementById('receiver_zip_code').value;
                            // var apply_postcode = document.getElementById('apply_postcode').value;
                            // // alert("Vendor" + vendorpostcode);
                            // // alert("Receiver" + receiver_zip_code);
                            // if(apply_postcode == 1)
                            // {
                            //     if(vendorpostcode != '' && receiver_zip_code != '')
                            //     {
                            //         if(vendorpostcode == receiver_zip_code){
                            //             $('#locationNextBtn').removeAttr('disabled');
                            //         }else{
                            //             $('#locationNextBtn').attr('disabled',true);
                            //             alert('Postcode dose not match');
                            //         }
                            //     }
                            // }
                        }
                    }
                }

            const deliveryLatLng = {
                lat: deliveryLat,
                lng: deliveryLng
            };
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: 10,
                center: deliveryLatLng,
            });

            let pickupLat = parseFloat(document.getElementById('pickup_latitude').value);
            let pickupLng = parseFloat(document.getElementById('pickup_longitude').value);

            const pickupLatLng = {
                lat: pickupLat,
                lng: pickupLng
            };
            pickup = new google.maps.Marker({
                position: pickupLatLng,
                map,
                title: "Pickup Address",
                icon: "https://maps.google.com/mapfiles/kml/paddle/P.png"
            });
            console.log(pickup);
            delivery = new google.maps.Marker({
                position: deliveryLatLng,
                map,
                title: "Delivery Address",
                icon: "https://maps.google.com/mapfiles/kml/paddle/D.png"
            });

            //var line = new google.maps.Polyline({path: [pickupLatLng, deliveryLatLng], map: map});

            // Calculate and display the distance between markers
            var distance = haversine_distance(pickup, delivery);
            console.log("Distance between markers: " + distance.toFixed(2) + " km.");

            //   document.getElementById('estimated_km').val(distance.toFixed(2));

            let directionsService = new google.maps.DirectionsService();
            let directionsRenderer = new google.maps.DirectionsRenderer();
            directionsRenderer.setMap(map); // Existing map object displays directions
            // Create route from existing points used for markers
            const route = {
                origin: pickup.position,
                destination: delivery.position,
                travelMode: 'DRIVING',
            }

            directionsService.route(route,
                function(response, status) { // anonymous function to capture directions
                if (status !== 'OK') {
                    window.alert('Directions request failed due to ' + status);
                    return;
                } else {
                    directionsRenderer.setDirections(response); // Add route to the map
                    // console.log(response);
                    var directionsData = response.routes[0].legs[0]; // Get data about the mapped route
                    if (!directionsData) {
                        window.alert('Directions request failed');
                        return;
                    } else {
                        console.log("Driving distance is " + directionsData.distance.text + " (" + directionsData.duration.text + ").");
                        distance = directionsData.distance.text.replace(/\,/g,'');
                        $("#estimated_km").val(distance.replace(" km", ""));
                    }
                }
            });
        });
    }
</script>

{{-- Different address script --}}

<script>

    google.maps.event.addDomListener(window, 'load', diffrentAddress);

    function diffrentAddress()
    {
        var input = document.getElementById('diffrent_address');
        console.log('Different Address');
        var options = {
                componentRestrictions: {
                    country: "nz"
                }
            };
            var autocomplete = new google.maps.places.Autocomplete(input, options);
            autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                codeAddress();
                console.log(place);
            });    
    }

</script>

{{-- Different address script --}}

<!-- Drop Off Access -->
<script>
    function dropOffAccess(access) {
        // const floor = document.getElementById('floor');
        if (access === "groundfloor") {
            document.getElementById('floor').disabled = true;
            document.getElementById('floor').style.backgroundColor = "#cccccc";
        } else {
            document.getElementById('floor').disabled = false;
            document.getElementById('floor').style.backgroundColor = "";
        }
    }
</script>

<!-- Measurement & Unit -->
<script>
    function cubic() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);

        var c = 'cubic_' + elemId;

        document.getElementById('length_' + elemId).value = "";
        document.getElementById('height_' + elemId).value = "";
        document.getElementById('width_' + elemId).value = "";
    }

    function units() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);

        var u = 'unit_' + elemId;
        console.log('u: ' + u)
        var selected = document.querySelector('[id="' + u + '"]');

        var idx = selected.selectedIndex;
        console.log('idx:' + idx);
        var val = selected.options[idx].text;
        console.log('val:' + val);
        document.getElementById('unit_l_' + elemId).textContent = val;
        document.getElementById('unit_h_' + elemId).textContent = val;
        document.getElementById('unit_w_' + elemId).textContent = val;
        measurements()
    }

    function measurements() {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);

        var quantity = document.getElementById('quantity_' + elemId).value;
        var length = document.getElementById('length_' + elemId).value;
        var height = document.getElementById('height_' + elemId).value;
        var width = document.getElementById('width_' + elemId).value;
        var result = parseFloat(height) * parseFloat(width) * parseFloat(length);
        var cubic = document.getElementById('cubic_' + elemId).value;
        var unit = document.getElementById('unit_' + elemId).value;

        if (unit === 'mm') {
            result = parseFloat(result) / 1000 / 1000 / 1000;
        } else if (unit === 'cm') {
            result = parseFloat(result) / 100 / 100 / 100;
        } else if (unit === 'm') {
            result = result;
        }
        result = (result * quantity * 100) / 100;
        if(!isNaN(result)) {
            document.getElementById('cubic_' + elemId).value = result;
        }
    }
</script>


<!-- Form Validation -->
<script>
    // =======================================================
    // Pickup modal
    // =======================================================
    // blank validation for pickup modal
    const pickupValidate = () => {

          // first box
        const sender_address = document.getElementById('pickup_address');
        const difference_address = document.getElementById('diffrent_address');

        const errmsg = document.getElementById('errmsg');
        // first box

        // second box
        const receiver_address = document.getElementById('receiver_address');
        const stair = document.getElementById('stair');
        const lift = document.getElementById('lift');
        const groundfloor = document.getElementById('groundfloor');
        
        // err msg
        const errReceiverAddress = document.getElementById('errReceiverAddress');
        const errStairOrLift = document.getElementById('errStairOrLift');
        const errDeliverydate = document.getElementById('errDeliverydate');
    
        // second box

        // third box

        const listRefNum = document.querySelectorAll(`[id^="refNum_"]`);
        const refNumLength = listRefNum.length;
        console.log('refNumLength: ' + refNumLength);

        // target id
        const orderNum = document.querySelectorAll(`[id^="orderNum_"]`);
        const refNum = document.querySelectorAll(`[id^="refNum_"]`);
        const description = document.querySelectorAll(`[id^="description_"]`);
        const productType = document.querySelectorAll(`[id^="productType_"]`);
        const quantity = document.querySelectorAll(`[id^="quantity_"]`);

        // // err msg
        const errOrderNum = document.querySelectorAll(`[id^="errOrderNum_"]`);
        const errRefNum = document.querySelectorAll(`[id^="errRefNum_"]`);
        const errDescription = document.querySelectorAll(`[id^="errDescription_"]`);
        const errProductType = document.querySelectorAll(`[id^="errProductType_"]`);
        const errHeight = document.querySelectorAll(`[id^="errHeight_"]`);
        const errWidth = document.querySelectorAll(`[id^="errWidth_"]`);
        const errLength = document.querySelectorAll(`[id^="errLength_"]`);
        const errWeight = document.querySelectorAll(`[id^="errWeight_"]`);
        const errQuantity = document.querySelectorAll(`[id^="errQuantity_"]`);

        // third box
        var errCnt = 0;
            // fist box
                if( 
                    (sender_address.value != "- Choose Pickup Location -" && difference_address.value == '') 
                                                        ||
                    (sender_address.value == "- Choose Pickup Location -" &&  difference_address.value != '') 
                
                ){
                    errmsg.innerText = "";
                }
                else if(sender_address.value != "- Choose Pickup Location -" && difference_address.value != '' )
                {
                    errmsg.innerText = "Please select only one address";
                    errCnt = 1;
                }
                else{
                    errmsg.innerText = "Please select every field.";
                    errCnt = 1;
                }
            // fist box

            // second box
                if (!receiver_address.value.trim()) {
                    errReceiverAddress.innerText = "Please enter delivery address.";
                    errCnt++;
                }
                else {
                    errReceiverAddress.innerText = "";
                }
                if (!stair.checked && !lift.checked && !groundfloor.checked) {
                    errStairOrLift.innerText = "Please select one of Drop off Access.";
                } else {
                    errStairOrLift.innerText = "";
                }
            
            // second box

            // third box 

             for (let i = 0; i < refNumLength; i++) {

                    // if (!refNum[i].value.trim()) {
                    //     errRefNum[i].innerText = "Please enter reference number.";
                    //     errCnt++;
                    // } else {
                    //     errRefNum[i].innerText = "";
                    // }
                    if (!description[i].value.trim()) {
                        errDescription[i].innerText = "Please enter product's description.";
                        errCnt++;
                    // } else if(description[i].value.trim().length > 40) {
                    //     errDescription[i].innerText = "Please limit the description to 40 characters";
                    //     errCnt++;
                    } else {
                        errDescription[i].innerText = "";
                    }
                    // if (stair[i].checked === false  && lift[i].checked === false) {
                    //     errStairOrLift[i].innerText = "Please select Stair or Lift.";
                    //     errCnt++;
                    // } else {
                    //     errStairOrLift[i].innerText = "";
                    // }
                    if (productType[i].value === "Select") {
                        errProductType[i].innerText = "Please select product's type.";
                        errCnt++;
                    } else {
                        errProductType[i].innerText = "";
                    }
                    // if( !height[i].value.trim() ) {
                    //     errHeight[i].innerText = "Please enter product's height.";
                    //     errCnt++;
                    // } else {
                    //     errHeight[i].innerText = "";
                    // }
                    // if( !width[i].value.trim() ) {
                    //     errWidth[i].innerText = "Please enter product's width.";
                    //     errCnt++;
                    // } else {
                    //     errWidth[i].innerText = "";
                    // }
                    // if( !length[i].value.trim() ) {
                    //     errLength[i].innerText = "Please enter product's length.";
                    //     errCnt++;
                    // } else {
                    //     errLength[i].innerText = "";
                    // }
                    // if( !weight[i].value.trim() ) {
                    //     errWeight[i].innerText = "Please enter product's weight.";
                    //     errCnt++;
                    // } else {
                    //     errWeight[i].innerText = "";
                    // }
                    if (!quantity[i].value.trim()) {
                        errQuantity[i].innerText = "Please enter quantity of product(s).";
                        errCnt++;
                    } else {
                        errQuantity[i].innerText = "";
                    }
                }
                // third box 

                if (errCnt === 0) {
                    document.getElementById("reqForm").submit();
                }else{
                    alert('Please fill all filed');
                    return errCnt;
                }
    }

    // =======================================================
    // Deliver modal
    // =======================================================
    // blank validation for deliver modal

    // =======================================================
    // Item modal
    // =======================================================
    const itemValidate = () => {

        const listRefNum = document.querySelectorAll(`[id^="refNum_"]`);
        const refNumLength = listRefNum.length;
        console.log('refNumLength: ' + refNumLength);

        // target id
        const invNum = document.getElementById('invNum');
        const orderNum = document.querySelectorAll(`[id^="orderNum_"]`);
        const refNum = document.querySelectorAll(`[id^="refNum_"]`);
        const description = document.querySelectorAll(`[id^="description_"]`);
        const productType = document.querySelectorAll(`[id^="productType_"]`);
        // const height = document.querySelectorAll(`[id^="height_"]`);
        // const width = document.querySelectorAll(`[id^="width_"]`);
        // const length = document.querySelectorAll(`[id^="length_"]`);
        // const weight = document.querySelectorAll(`[id^="weight_"]`);
        const quantity = document.querySelectorAll(`[id^="quantity_"]`);

        // // err msg
        const errInvNum = document.getElementById('errInvNum');
        const errOrderNum = document.querySelectorAll(`[id^="errOrderNum_"]`);
        const errRefNum = document.querySelectorAll(`[id^="errRefNum_"]`);
        const errDescription = document.querySelectorAll(`[id^="errDescription_"]`);
        const errProductType = document.querySelectorAll(`[id^="errProductType_"]`);
        const errHeight = document.querySelectorAll(`[id^="errHeight_"]`);
        const errWidth = document.querySelectorAll(`[id^="errWidth_"]`);
        const errLength = document.querySelectorAll(`[id^="errLength_"]`);
        const errWeight = document.querySelectorAll(`[id^="errWeight_"]`);
        const errQuantity = document.querySelectorAll(`[id^="errQuantity_"]`);

        var errCnt = 0;

        for (let i = 0; i < refNumLength; i++) {

            // if (!refNum[i].value.trim()) {
            //     errRefNum[i].innerText = "Please enter reference number.";
            //     errCnt++;
            // } else {
            //     errRefNum[i].innerText = "";
            // }
            if (!description[i].value.trim()) {
                errDescription[i].innerText = "Please enter product's description.";
                errCnt++;
            // } else if(description[i].value.trim().length > 40) {
            //     errDescription[i].innerText = "Please limit the description to 40 characters";
            //     errCnt++;
            } else {
                errDescription[i].innerText = "";
            }
            // if (stair[i].checked === false  && lift[i].checked === false) {
            //     errStairOrLift[i].innerText = "Please select Stair or Lift.";
            //     errCnt++;
            // } else {
            //     errStairOrLift[i].innerText = "";
            // }
            if (productType[i].value === "Select") {
                errProductType[i].innerText = "Please select product's type.";
                errCnt++;
            } else {
                errProductType[i].innerText = "";
            }
            // if( !height[i].value.trim() ) {
            //     errHeight[i].innerText = "Please enter product's height.";
            //     errCnt++;
            // } else {
            //     errHeight[i].innerText = "";
            // }
            // if( !width[i].value.trim() ) {
            //     errWidth[i].innerText = "Please enter product's width.";
            //     errCnt++;
            // } else {
            //     errWidth[i].innerText = "";
            // }
            // if( !length[i].value.trim() ) {
            //     errLength[i].innerText = "Please enter product's length.";
            //     errCnt++;
            // } else {
            //     errLength[i].innerText = "";
            // }
            // if( !weight[i].value.trim() ) {
            //     errWeight[i].innerText = "Please enter product's weight.";
            //     errCnt++;
            // } else {
            //     errWeight[i].innerText = "";
            // }
            if (!quantity[i].value.trim()) {
                errQuantity[i].innerText = "Please enter quantity of product(s).";
                errCnt++;
            } else {
                errQuantity[i].innerText = "";
            }
        }

        var errPickup = pickupValidate();
        console.log('errPickup:' + errPickup);
        if (errPickup > 0) {
            document.getElementById('errPickupModal').textContent = "[1. Pickup / From] has error(s). Please confirm every required filed.";
        }
        var errDeliver = deliverValidate();
        console.log('errDeliver:' + errDeliver);
        if (errDeliver > 0) {
            document.getElementById('errDeliverModal').textContent = "[2. Deliver / To] has error(s). Please confirm every required filed.";
        }

        errCnt = errCnt + errPickup + errDeliver;

        if (errCnt === 0) {
            // Go to next page as no blank
            var pickupModal = bootstrap.Modal.getInstance(document.getElementById('pickupModal'));
            pickupModal.hide();
            var deliverModal = bootstrap.Modal.getInstance(document.getElementById('deliverModal'));
            deliverModal.hide();
            document.getElementById("reqForm").submit();
            var currentModalEl = document.getElementById('AddItemsModal');
            var currentModal = bootstrap.Modal.getInstance();
            currentModal.hide();
            // location.href = "https://trustmoversfreight.spectreum.co.nz/vendor_datanew"
        }
    }

    function selectedOptions(val) {
        var e = e || window.event;
        var elem = e.target || e.srcElement;
        var elemId = elem.id;
        var arryElemId = elemId.split('_');
        elemOptions = arryElemId[0];
        elemId = arryElemId[1];
        console.log('elemId: ' + elemId);
        console.log('elemOptions: ' + elemOptions);

        installation = document.getElementById('installation_' + elemId);
        unwrap = document.getElementById('unwrap_' + elemId);
        fragile = document.getElementById('fragile_' + elemId);
        none = document.getElementById('none_' + elemId);

        if (elemOptions === "none") {
            installation.checked = false;
            unwrap.checked = false;
            fragile.checked = false;
            if (val === "none") {
                none.checked = true;
            }
        } else {
            none.checked = false;
        }
        if (!installation.checked && !unwrap.checked && !fragile.checked) {
            none.checked = true;
        }
    }
</script>

<!-- Duplicate inputs -->
<script type="text/javascript">
    $(function() {
        $('#list').addInputArea({
            maximum: 50
        });
    });
</script>

<!-- Tracking Details -->

@endsection