{{-- Extends layout --}}
@extends('layout.default')

@section('styles')
    <!--begin::Page Custom Styles(used by this page)-->
    <link href="{{asset('css/pages/wizard/wizard-1.css')}}" rel="stylesheet" type="text/css" />
    <style>


        .invoice-logo{
            max-width: 100px;
        }

        .qty-group{
            min-width: 100px;
            max-width: 120px;
            margin: auto;
        }

        .discount-group{
            min-width: 70px;
            max-width: 90px;
            margin: auto;
        }

        .discountInput{
            min-width: 50px;
            max-width: 60px;
            margin: auto;
            text-align: center;
        }
        .select2-container {
            width: 100% !important;
        }
        .cursor-pointer{
            cursor: pointer !important;
        }

    </style>
	<!--end::Page Custom Styles-->

@endsection

{{-- Content --}}
@section('content')

    <!-- begin::Card-->
    <div class="card card-custom overflow-hidden">

        @if (session('status'))

            {{-- Success Alert --}}
            <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
                <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
                <div class="alert-text">{{session('status')}}</div>
                <div class="alert-close">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true"><i class="ki ki-close"></i></span>
                    </button>
                </div>
            </div>

        @endif

        {{-- <div class="alert alert-custom alert-notice alert-light-danger fade show gutter-b" role="alert">
            <div class="alert-icon"><i class="flaticon2-check-mark"></i></div>
            <div class="alert-text">OFFER!!!! 30 PCS CONE BISCUIT FREE <a href="">See details</a></div>
            <div class="alert-close">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true"><i class="ki ki-close"></i></span>
                </button>
            </div>
        </div> --}}

        <div class="card-body p-0">
            <!--begin::Wizard-->
            <div class="wizard wizard-1" id="kt_delivery_wizard" data-wizard-state="step-first" data-wizard-clickable="true">
                <!--begin::Wizard Nav-->
                <div class="wizard-nav border-bottom">
                    <div class="wizard-steps p-8 p-lg-10">
                        <!--begin::Wizard Step 1 Nav-->
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="current">
                            <div class="wizard-label">
                                <i class="wizard-icon flaticon-list"></i>
                                <h3 class="wizard-title">1. Add Products</h3>
                            </div>
                            <span class="svg-icon svg-icon-xl wizard-arrow">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Arrow-right.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24" />
                                        <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1" />
                                        <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                        </div>
                        <!--end::Wizard Step 1 Nav-->
                        <!--begin::Wizard Step 2 Nav-->
                        <div class="wizard-step" data-wizard-type="step">
                            <div class="wizard-label">
                                <i class="wizard-icon flaticon-truck"></i>
                                <h3 class="wizard-title">2. Delivery Details</h3>
                            </div>
                            <span class="svg-icon svg-icon-xl wizard-arrow">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Arrow-right.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24" />
                                        <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1" />
                                        <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                        </div>
                        <!--end::Wizard Step 2 Nav-->
                        
                        <!--begin::Wizard Step 4 Nav-->
                        <div class="wizard-step" data-wizard-type="step">
                            <div class="wizard-label">
                                <i class="wizard-icon flaticon-globe"></i>
                                <h3 class="wizard-title">3. Review and Submit</h3>
                            </div>
                            <span class="svg-icon svg-icon-xl wizard-arrow last">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Navigation/Arrow-right.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24" />
                                        <rect fill="#000000" opacity="0.3" transform="translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000)" x="11" y="5" width="2" height="14" rx="1" />
                                        <path d="M9.70710318,15.7071045 C9.31657888,16.0976288 8.68341391,16.0976288 8.29288961,15.7071045 C7.90236532,15.3165802 7.90236532,14.6834152 8.29288961,14.2928909 L14.2928896,8.29289093 C14.6714686,7.914312 15.281055,7.90106637 15.675721,8.26284357 L21.675721,13.7628436 C22.08284,14.136036 22.1103429,14.7686034 21.7371505,15.1757223 C21.3639581,15.5828413 20.7313908,15.6103443 20.3242718,15.2371519 L15.0300721,10.3841355 L9.70710318,15.7071045 Z" fill="#000000" fill-rule="nonzero" transform="translate(14.999999, 11.999997) scale(1, -1) rotate(90.000000) translate(-14.999999, -11.999997)" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>
                        </div>
                        <!--end::Wizard Step 4 Nav-->
                    </div>
                </div>
                <!--end::Wizard Nav-->
                <!--begin::Wizard Body-->
                <div class="row justify-content-center my-10 px-8 my-lg-15 px-lg-10">
                    <div class="col-xl-12 col-xxl-10">
                        <!--begin::Wizard Form-->
                        <form class="form" id="kt_delivery_form" method="POST" action="{{ route('home-delivery.store') }}">
                            @csrf
                            
                            {{--=========================================
                                Step 1
                            ==========================================--}}
                            <input type="hidden" name="sdp_id" value="1322940">
                            
                            <!--begin::Wizard Step 1-->
                            <div class="pb-5" data-wizard-type="step-content" data-wizard-state="current">
                                <h3 class="mb-10 font-weight-bold text-dark">Add Products for the delivery</h3>
                                <!--begin::Input-->
                                <label>Select product from the list</label>
                                <div class="form-group row">
                                    <div class="col-lg-6 col-md-8 mb-3">
                                        <select class="form-control addItemSelect2" id="edit_post_cart_add_item_select2" name="">
                                            <option value="" class="text-muted" selected hidden disabled>Search an Item from the list</option>
                                            @foreach ($productPrices as $productPrice)
                                                <option value="{{$productPrice->ProductId}}">{{$productPrice->Name}}</option>
                                            @endforeach
                                        </select>
                                        {{-- <span class="form-text text-muted mt-3">You can also search items here</span> --}}
                                        <div class="valid-feedback">Looks good!</div>
                                        <div class="invalid-feedback">Please select an item to add</div>
                                    </div>
                                    <div class="col-lg-6 col-md-4">
                                        <div class="row">
                                        <div class="col text-left">
                                            <a class="btn btn-success font-weight-bold btn-add-item">Add Item</a>
                                        </div>
                                        <div class="col text-right">
                                            {{-- <a class="btn btn-outline-warning font-weight-bold btn-add-item">Add Gift</a> --}}
                                        </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input-->

                                <!--begin::Input-->
                                <div>
                                    <div class="row justify-content-center pb-4 px-8 pb-md-5 px-md-0">
                                        <div class="col-md-12">
                                            <div class="table-responsive item-list-table">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th class="pl-0 font-weight-bold text-muted text-uppercase"></th>
                                                            {{-- <th class="pl-0 font-weight-bold text-muted text-uppercase">Gift</th> --}}
                                                            <th class="pl-0 font-weight-bold text-muted text-uppercase">Description</th>
                                                            <th class="text-center font-weight-bold text-muted text-uppercase">Qty</th>
                                                            <th class="text-center font-weight-bold text-muted text-uppercase">Discount (%)</th>
                                                            <th class="text-center font-weight-bold text-muted text-uppercase">Unit</th>
                                                            <th class="text-right font-weight-bold text-muted text-uppercase">Rate</th>
                                                            <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">Amount</th>
                                                            <th class="text-right pr-0 font-weight-bold text-muted text-uppercase">Net Amount</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                         
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end: Invoice body-->
                                    <!-- begin: Invoice footer-->
                                    <div class="row justify-content-center bg-gray-100 py-8 px-8 py-md-10 px-md-0">
                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-between flex-column flex-md-row font-size-lg">
                                                <div class="d-flex flex-column mb-10 mb-md-0">
                                                </div>
                                                <div class="d-flex flex-column text-md-right">
                                                    <span class="font-size-lg font-weight-bolder mb-1">TOTAL AMOUNT</span>
                                                    <span class="font-size-h2 font-weight-boldest text-success mb-1 total-amount">0.00</span>
                                                    <span class="font-size-lg font-weight-bolder mb-1">DISCOUNT</span>
                                                    <span class="font-size-h4 font-weight-boldest text-danger mb-1 discount-amount">0.00</span>
                                                    <span class="font-size-lg font-weight-bolder mb-1">NET AMOUNT</span>
                                                    <span class="font-size-h2 font-weight-boldest text-warning mb-1 total-net-amount">0.00</span>
                                                    
                                                    <input type="hidden" name="totalAmount" value="">
                                                    <input type="hidden" name="totalDiscount" value="">
                                                    <input type="hidden" name="netAmount" value="">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end: Invoice footer-->
                                </div>
                                <!--end::Input-->

                            </div>
                            <!--end::Wizard Step 1-->

                            {{--=========================================
                                Step 2 
                            ==========================================--}}

                            <!--begin::Wizard Step 2-->
                            <div class="pb-5" data-wizard-type="step-content">
                                
                                <div class="row">
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <h3 class="mb-10 font-weight-bold text-dark">Enter Customer Details</h3>
                                        <!--begin::Input-->
                                        <div class="form-group">
                                            <label>Customer Phone Number</label>
                                            <div class="input-group input-group-solid">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">
                                                        +88
                                                    </span>
                                                </div>
                                                <input type="text" class="form-control form-control-solid form-control-lg" id="customer_phone" name="CustomerPhone" placeholder="01730000000 - Example" value="" />
                                            </div>
                                            <span class="form-text text-muted">Please enter customer phone number.</span>
                                        </div>
                                        <!--end::Input-->
                                        <!--begin::Input-->
                                        <div class="form-group">
                                            <label>Customer Address</label>
                                            <input type="text" class="form-control form-control-solid form-control-lg" name="customerAddress" placeholder="Example - Somewhere in Jessore" value="" />
                                            <span class="form-text text-muted">Please enter customer Address.</span>
                                        </div>
                                        <!--end::Input-->
                                        <!--begin::Input-->
                                        <div class="form-group">
                                            <label>Customer Name</label>
                                            <input type="text" class="form-control form-control-solid form-control-lg" name="customerName" placeholder="Example - Sumaiya Sultana" value="" />
                                            <span class="form-text text-muted">Please enter customer name here.</span>
                                        </div>
                                        <!--end::Input-->
                                        
                                    </div>
                                    <div class="col-xl-6 col-lg-6 col-md-6">
                                        <h3 class="mb-10 font-weight-bold text-dark">Enter Delivery Details</h3>

                                        <!--begin::Input-->
                                        <div class="form-group">
                                            <label>Delivery Time</label>
                                            <div class="input-group input-group-solid date" id="home_delivery_datetimepicker" data-target-input="nearest">
                                                <input type="text" class="form-control form-control-solid datetimepicker-input" name="deliveryDateTime" placeholder="Select date & time" data-target="#home_delivery_datetimepicker"/>
                                                <div class="input-group-append cursor-pointer" data-target="#home_delivery_datetimepicker" data-toggle="datetimepicker">
                                                    <span class="input-group-text">
                                                        <i class="ki ki-calendar"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <span class="form-text text-muted">Please enter delivery Time here.</span>
                                        </div>
                                        <!--end::Input-->
                                        
                                        <!--begin::Select-->
                                        <div class="form-group">
                                            <label>Payment Status</label>
                                            <select name="paymentStatus" id="payment_status" class="form-control form-control-solid form-control-lg">
                                                <option selected disabled hidden value="">Select a payment status</option>
                                                <option value="paid">Paid</option>
                                                <option value="cash">Cash</option>
                                            </select>
                                            <span class="form-text text-muted">Please select a payment status</span>
                                        </div>
                                        <!--end::Select-->
                                        
                                        
                                        <!--begin::Select-->
                                        <div class="form-group">
                                            <label>Area To Assign</label>
                                            <select class="form-control select2" id="select2_home_delivery_area_assigned" name="areaToAssign">
                                                <option label="Label"></option>
                                                <optgroup label="Dhaka North">
                                                <option value="15">Abul Hotel Bus Stop</option>
                                                <option value="15">Adabor</option>
                                                <option value="15">Adarsha Bag</option>
                                                <option value="15">Aftab nagar</option>
                                                <option value="15">Agargaon</option>
                                                <option value="15">Ahmed Nagar</option>
                                                <option value="15">Ajompur</option>
                                                <option value="15">Ananda Nagar</option>
                                                <option value="15">Apollo Hospital</option>
                                                <option value="15">Arjat Para</option>
                                                <option value="15">Armanitola</option>
                                                <option value="15">Army Stadium</option>
                                                <option value="15">Asad Gate</option>
                                                <option value="15">Ashalota</option>
                                                <option value="15">Ashkona</option>
                                                <option value="15">Badda</option>
                                                <option value="15">Badda Hossain Market</option>
                                                <option value="15">Bashundhara R/A</option>
                                                <option value="15">Uttara 2</option>
                                                <option value="15">Uttara 4</option>
                                                <option value="15">Uttara 6</option>
                                                <option value="15">Uttara 8</option>
                                                </optgroup>
                                                <optgroup label="Dhaka South">
                                                <option value="16">Abdul bani road</option>
                                                <option value="16">Abdul Hadi Lane</option>
                                                <option value="16">Abed Dali Road</option>
                                                <option value="16">Abhidas Lane</option>
                                                <option value="16">Abul hasnat lane</option>
                                                <option value="16">Abul Hasnat Road</option>
                                                <option value="16">Abul khairat Road</option>
                                                <option value="16">AC Roy road</option>
                                                <option value="16">Aga sadek road</option>
                                                <option value="16">Agamasi Lane</option>
                                                <option value="16">Ahmedbagh</option>
                                                <option value="16">Ahsan Ullah Road</option>
                                                <option value="16">Akshay Das Lane</option>
                                                <option value="16">Al Amin Road</option>
                                                <option value="16">Alamganj Road</option>
                                                <option value="16">Ali h</option>
                                                </optgroup>
                                            </select>
                                            <span class="form-text text-muted">Please select an area from the list</span>
                                        </div>
                                        <!--end::Select-->

                                        <!--begin::Input-->
                                        <div class="form-group">
                                            <label>Gift <span class="text-muted">(Optional)</span></label>
                                            <input type="text" class="form-control form-control-solid form-control-lg" name="gift" placeholder="Example - Scooper" value="" />
                                            <span class="form-text text-muted">Specify a gift here</span>
                                        </div>
                                        <!--end::Input-->

                                        <!--begin::Input-->
                                        <div class="form-group">
                                            <label>Remarks <span class="text-muted">(Optional)</span></label>
                                            <textarea class="form-control form-control-solid" id="" name="remarks" rows="3"></textarea>
                                            <span class="form-text text-muted">Please write a remarks.</span>
                                        </div>
                                        <!--end::Input-->
                                    </div>
                                </div>
                            </div>
                            <!--end::Wizard Step 2-->
                            
                            <!--begin::Wizard Step 3-->
                            <div class="pb-5" data-wizard-type="step-content">
                                <!--begin::Section-->
                                <h4 class="mb-10 font-weight-bold text-dark">Review your Details and Submit</h4>
                                <h6 class="font-weight-bolder mb-3">Customer Details:</h6>
                                <div class="text-dark-50 line-height-lg">
                                    <div class="review-customer-name"></div>
                                    <div class="review-customer-phone"></div>
                                    <div class="review-customer-address"></div>
                                </div>
                                <div class="separator separator-dashed my-5"></div>
                                <!--end::Section-->
                                <!--begin::Section-->
                                <h6 class="font-weight-bolder mb-3">Delivery Details:</h6>
                                <div class="text-dark-50 line-height-lg">
                                    <div><span class="font-weight-bold">Delivery Time:</span> <span class="review-delivery-time"></span></div>
                                    <div><span class="font-weight-bold">Payment Status:</span> <span class="review-payment-status"></span></div>
                                    <div><span class="font-weight-bold">Area To Assign:</span> <span class="review-area-assigned"></span></div>
                                </div>
                                <div class="separator separator-dashed my-5"></div>
                                <!--end::Section-->
                                <!--begin::Section-->
                                <h6 class="font-weight-bolder mb-3">Products List:</h6>
                                <div class="text-dark-50 line-height-lg product-list-wrapper">
                                </div>
                                <div class="separator separator-dashed my-5"></div>
                                <!--end::Section-->
                                <!--begin::Section-->
                                <h6 class="font-weight-bolder mb-3">Cost Details & Remarks:</h6>
                                <div class="text-dark-50 line-height-lg">
                                    <div><span class="font-weight-bold">Total Amount:</span> <span class="review-total-amount"></span> BDT</div>
                                    <div><span class="font-weight-bold">Discount:</span> <span class="review-discount"></span> BDT</div>
                                    <div><span class="font-weight-bold">Net Amount:</span> <span class="review-net-amount"> BDT</span></div>
                                    <div><span class="font-weight-bold">Gift:</span> <span class="review-gift"></span></div>
                                    <div><span class="font-weight-bold">Remarks:</span> <span class="review-remarks"></span></div>
                                </div>
                                <div class="separator separator-dashed my-5"></div>
                                <!--end::Section-->
                            </div>
                            <!--end::Wizard Step 3-->
                            <!--begin::Wizard Actions-->
                            <div class="d-flex justify-content-between border-top mt-5 pt-10">
                                <div class="mr-2">
                                    <button type="button" class="btn btn-light-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-prev">Previous</button>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-success font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-submit">Submit</button>
                                    <button type="button" class="btn btn-primary font-weight-bolder text-uppercase px-9 py-4" data-wizard-type="action-next">Next</button>
                                </div>
                            </div>
                            <!--end::Wizard Actions-->
                        </form>
                        <!--end::Wizard Form-->
                    </div>
                </div>
                <!--end::Wizard Body-->
            </div>
            <!--end::Wizard-->
        </div>
    </div>
    <!-- end::Card-->

@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script>
        function zeroIfNull(field){
            let fieldValue = $(field).val();
            console.log(fieldValue)
            console.log(isNaN(parseInt(fieldValue)))
            if(isNaN(parseInt(fieldValue))){
                $(field).val(0);
            }
        }
    </script>
    <script>
        $(function(){
            var addItemSelect2 = $('#edit_post_cart_add_item_select2');
            addItemSelect2.on('change', function(){

                let productId = addItemSelect2.val();

                if(productId==""){
                    addItemSelect2.addClass("is-invalid");
                }
                else{
                    addItemSelect2.removeClass("is-invalid");
                    addItemSelect2.addClass("is-valid");
                }
            });

            $(document).on("click", ".btn-add-item", function() {
        
                let productList = @json($productPrices);
                // console.log(productList);
                let productId = addItemSelect2.val();
                let product = "";
                let tdProductName = $(".td-name");
                let itemDoesNotExist = true;

                // console.log(tdProductName)
                if(productId == null){
                    addItemSelect2.removeClass("is-valid");
                    addItemSelect2.addClass("is-invalid");
                }
                else{
                    for (let i = 0; i < productList.length; i++) {
                        if(productId == productList[i].ProductId){
                            product = productList[i]
                        }
                    }

                    for (let i = 0; i < tdProductName.length; i++) {
                        
                        if(product.ProductId == $(tdProductName[i]).data("product")){
                            console.log(tdProductName[i].closest("tr"));
                            // tdProductName[i].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
                            $('html, body').animate({
                                scrollTop: $(tdProductName[i].closest("tr")).offset().top - 160
                            }, 500);

                            let productRow = $(tdProductName[i].closest("tr"));

                            productRow.addClass("table-success")

                            
                            setTimeout(function() {
                                productRow.css("transition", "background-color .6s")
                                productRow.removeClass("table-success")

                            }, 2000);

                            itemDoesNotExist = false;

                            break;
                        }

                    }

                    if(itemDoesNotExist){
                        $(".top-tr").children("td").removeClass("pt-7");
                        $(".top-tr").children("td").addClass("border-top-0 py-4");
                        $(".item-list-table").children("table").children("tbody").prepend(`
                            <tr class="font-weight-boldest top-tr">
                                <td class="pl-0 pt-7 align-middle">
                                    <a class="btn btn-xs btn-danger btn-icon inv-item-remove"><i class="fa la-minus icon-sm"></i></a>
                                </td>
                                
                                <td class="pl-0 pt-7 td-name align-middle" data-field="Product" data-product="`+product.ProductId+`">
                                    `+product.Name+`
                                </td>
                                <td class="text-right pt-7 align-middle" data-field="Qty">
                                    <div class="input-group qty-group">
                                        <div class="input-group-prepend inv-qty-minus">
                                            <button type="button" class="btn btn-light-primary">-</button>
                                        </div>
                                        <input type="text" class="form-control text-center qtyInput font-weight-bolder px-0" onClick="this.select()" name="order_qty[`+product.Code+`]" value="0" />
                                        <div class="input-group-append inv-qty-plus">
                                            <button type="button" class="btn btn-light-primary">+</button>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-right pt-7 align-middle" data-field="Discount">
                                    <input type="text" class="form-control discountInput" name="order_discount[`+product.Code+`]" onClick="this.select()" onfocusout="zeroIfNull(this)"  value="0" />
                                </td>
                                <td class="text-center pt-7 align-middle" data-field="Unit">
                                    `+product.Unit+`
                                </td>
                                <td class="text-right pt-7 align-middle" data-field="Rate">
                                    `+product.Price+`
                                </td>
                                <td class="text-success pr-0 pt-7 text-right align-middle" data-field="Amount">0</td>
                                <td class="text-warning pr-0 pt-7 text-right align-middle" data-field="NetAmount">0</td>
                                
                                <input type="hidden" name="productName[`+product.Code+`]" value="`+product.Name+`"></input>
                                <input type="hidden" name="price[`+product.Code+`]" value="`+product.Price+`"></input>
                                <input type="hidden" name="unit[`+product.Code+`]" value="`+product.Unit+`"></input>
                            </tr>
                            
                        `);
                    }


                    
                }

                
            });

            
        });
        
    </script>
    <script>
        $(document).on("keyup", "#customer_phone", function() {
            // alert();
            let phoneNumber = $(this).val();
            url = "{{route('homeDelivery.customerDetailsByNumber')}}";

            console.log(phoneNumber.length);
            if (phoneNumber.length == 11) {
                $.ajax({
                    url: url,
                    type: "POST",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    data: {
                        phoneNumber: phoneNumber
                    },
                    dataType: "json",
                    success: function(response) {
                        // console.log(response.customerDetails.length);
                        // console.log(response.customerDetails.length == 1);
                        if (response.customerDetails.length == 1) {
                            console.log(response.customerDetails[0]);
                            $('input[name="customerAddress"]').val(
                                response.customerDetails[0].CustomerAddress
                            );
                            $('input[name="customerName"]').val(
                                response.customerDetails[0].CustomerName
                            );
                        }
                    }
                });
            }
        });
    </script>
    <script src="{{ asset("js/pages/custom/order/select2.js") }}" type="module"></script>
    <script src="{{ asset('js/pages/custom/order/home-delivery-cart.js') }}" type="module"></script>
    <script src="{{ asset('js/pages/custom/wizard/wizard-home-delivery.js') }}" type="module"></script>
    <script src="{{ asset('js/pages/crud/forms/widgets/select2.js') }}" type="module"></script>
    <script src="{{ asset('js/pages/crud/forms/widgets/bootstrap-datetimepicker-custom.js') }}" type="module"></script>

@endsection


{{-- <td class="pl-0 pt-7 align-middle">
    <label class="checkbox checkbox-lg checkbox-outline checkbox-outline-2x checkbox-warning">
        <input type="checkbox" name="Checkboxes16" />
        <span></span>
    </label>
</td> --}}