@extends('layouts.master')
@section('title')
Pickup Confirmation Form
@endsection
@section('css')
<link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet">
<!-- Sweet Alert css-->
<link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet">
@endsection
@section('content')
<style>


.choices__inner {
    --vz-bg-opacity: 1;
    background-color: #FFF !important;
    border: var(--vz-border-width) solid var(--vz-input-border-custom) !important;
    border-radius: var(--vz-border-radius) !important;
}
.dateNow{
    --vz-bg-opacity: 1;
    background-color: rgba(var(--vz-light-rgb), var(--vz-bg-opacity)) !important;
    padding: 8px;
    display: flex
}
.floating-alert {
    position: fixed;
    bottom: 20px; /* Position it 20px from the bottom */
    left: 90%; /* Position it in the center horizontally */
    transform: translateX(-50%); /* Center it horizontally */
    z-index: 1000;
    width: 300px;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    text-align: center; /* Center text within the <strong> tag */
}

.floating-alert.hide {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

#error-alert.show {
    display: block !important;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

#error-alert.hide {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.choices {
    margin-bottom: 0 !important;
}
/* Pagination style */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    color: black;
    float: left;
    padding: 4px 12px;
    text-decoration: none;
    border: 1px solid #e2e2e2;
    margin: 0 4px;
    border-radius: 500px;
}

.pagination a.active {
    background-color: #e2e2e2;
    color: #000;
}

.pagination a:hover {
    background-color: #e2e2e2;
}

.spinner {
    border-top-color: rgba(255, 255, 255, 0.5) !important;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease infinite;
}

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}
.texttitle{
    text-transform: uppercase !important;
    font-size: 15px !important;
    font-weight: 500
}
.column1{
    width:100px; 
    display: inline-block
}
.column2{
    width:10px; 
    display: inline-block
}
.column3{
    font-weight: 500
}
    
</style>

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">Schedule Delivery Confirmation</h4>
        </div>
    </div>
</div>

<div class="alert alert-danger alert-solid floating-alert hide" role="alert" id="error-alert">
    <strong> Customer cannot be Empty</strong>
</div>


<div class="row justify-content-center">
    <div class="col-xxl-8">
        <div class="card live-preview ribbon-box right" style="background:#fff9f9">
            
            <form class="" method="POST" action="{{route('deliveryOrder.submitDelivery')}}" id="collection-form">
                @csrf
                <div class="card-body p-4" hidden>
                    <div class="row">
                        <!--  START :: Customer  -->
                        <div class="col-lg-4 col-sm-6" style="background:#ebebeb; border-radius:10px; padding:10px 20px">
                            <div class="texttitle">Customer</div>
                            <div>{{ $order_information->customer_id }}</div>
                            <div>{{ $order_information->contact1 }}</div>
                            <div>{{ $order_information->shipping_address1 }}</div>
                            <div>{{ $order_information->shipping_address2 }}</div>
                            <div>{{ $order_information->shipping_address3 }}</div>
                            <div>{{ $order_information->shipping_address4 }}</div>
                            <div>{{ $order_information->phone1 }}</div>
                        </div>
                        <!-- End :: Customer  -->
                        <!--  START :: Salesman  -->
                        <div class="col-sm-6 ms-auto">
                            <div class="texttitle">Salesman</div>
                            <div>AcSalesmanID AcSalesmanName</div>
                             <div class="row" hidden>
                                <div class="col-lg-12">
                                    <div>
                                        <label for="choices-customer">Salesman</label>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="AcSalesmanID" value="" name="AcSalesmanID" maxlength="12" placeholder="Registration No" readonly />
                                        <div class="invalid-feedback">
                                            Please enter a registration no
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <input type="text" class="form-control bg-light " id="AcSalesmanName" value="" name="AcSalesmanName" maxlength="12" placeholder="GST No" readonly />
                                        <div class="invalid-feedback">
                                            Please enter a GST no
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- End :: Salesman  -->
                    </div>
                </div>
               
                
                <div class="card-body p-4 border-top">
                    <div class="row g-3" style="background-color: rgba(33, 37, 41, 0.05); border-radius:5px; padding: 5px 5px 10px 5px">
                        <!-- ******************************** START :: Sales Order Details ******************************** -->
                        <div class="col-lg-4 col-sm-6">
                            <div class="row mb-3">
                                <div class="col-lg-12">
                                    <div class="texttitle mb-2"><u>Customer</u></label></div>
                                    <div class="mb-1">
                                        <span class="column3" style="margin-left:10px">{{$order['DocumentHeader']['AcCustomerID']}} - {{$order['DocumentHeader']['AcCustomerName']}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="texttitle mb-2 d-flex">
                                        <u>Payment Details</u>
                                        <div class="mb-1" >
                                            <span class="column3" style="margin-left:10px">
                                            @if($order_information->sales_type == 4)
                                            <span class="badge bg-dark-subtle text-dark text-uppercase">Draft</span>
                                            @elseif($order_information->sales_type == 9)
                                            <span class="badge bg-dark-subtle text-warning text-uppercase">Expired</span>
                                            @elseif($order_information->status == 3)
                                            <span class="badge bg-dark-subtle text-warning text-uppercase">Cancelled</span>
                                            @elseif($order_information->payment_status == 1)
                                            <span class="badge bg-success-subtle text-success text-uppercase">Full Paid</span>
                                            @elseif($order_information->payment_status == 2)
                                            <span class="badge bg-danger-subtle text-danger text-uppercase">Partially</span>
                                            @else
                                            <span class="badge bg-danger-subtle text-danger text-uppercase">Unpaid</span>
                                            @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div class="mb-1">
                                        <span class="column1">Total Amount</span>
                                        <span class="column2">:</span>
                                        <span class="column3">{{$order['DocumentHeader']['DocumentFinalAmount']}}</span>
                                    </div>
                                    <div class="mb-1">
                                        <span class="column1">Total Received</span>
                                        <span class="column2">:</span>
                                        <span class="column3">{{$order['DocumentHeader']['TotalPaymentReceived']}}</span>
                                    </div>
                                    <div class="mb-1">
                                        <span class="column1">Balance</span>
                                        <span class="column2">:</span>
                                        <span class="column3">{{$order['DocumentHeader']['DocumentFinalAmount'] - $order['DocumentHeader']['TotalPaymentReceived']}}</span>
                                    </div>
                                </div>
                            </div>    
                        </div>

                        <div class="col-sm-6 ms-auto">
                            <div class="texttitle mb-2"><u>Sales Order Details</u></div>
              
                            <div class="mb-1">
                                <span class="column1">Sales Order No</span>
                                <span class="column2">:</span>
                                <span class="column3">{{$order['DocumentHeader']['AcCusSalesOrderMID']}}</span>
                                <input name="sales_order_number" type="hidden" value="{{$order['DocumentHeader']['AcCusSalesOrderMID']}}">
                            </div>
                            <div class="mb-1">
                                <span class="column1">Document Date</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ \Carbon\Carbon::parse($order['DocumentHeader']['DocumentDate'])->format('Y-m-d') }}</span>
                            </div>
                            <div class="mb-1">
                                <span class="column1">Salesman</span>
                                <span class="column2">:</span>
                                <span class="column3">{{$order['DocumentHeader']['AcSalesmanID']}} - {{$order['DocumentHeader']['AcSalesmanName']}}</span>
                            </div>
                            <div class="mb-1">
                                <span class="column1">Delivery Date</span>
                                <span class="column2">:</span>
                                <span class="column3">{{$order['DocumentHeader']['DeliveryDate']}}</span>
                            </div>
                            <div class="mb-1" hidden>
                                <span class="column1">Collection Date</span>
                                <span class="column2">:</span>
                                <span class="column3">{{ Carbon\Carbon::now()->format('Y-m-d') }}</span>
                                <input type="hidden" class="form-control bg-light " id="collection_date" name="collection_date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}">
                            </div>
                            <!-- <div class="mb-1">
                                <span class="column1" style="margin-top:8px">Collection Date</span>
                                <span class="column3">
                                    <input type="text" class="form-control bg-light " id="collection_date" name="collection_date" value="{{ Carbon\Carbon::now()->format('Y-m-d') }}" readonly>
                                </span>
                            </div>  -->
                            <div class="mb-1">
                                <span class="column1" style="margin-top:8px">Remark</span>
                                <span class="column3">
                                    <textarea rows="3" class="form-control bg-light text-uppercase" id="delivery_remark" name="delivery_remark" @if((count($order["DocumentDetails"])) <= 0) readonly @endif></textarea>
                                </span>
                            </div>
                        </div>
                        <!-- ******************************** END :: Sales Order Details ******************************** -->
                    </div>
                </div>

                <!-- ******************************** START :: Remark ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" style="display: none">
                    <div class="row">
                        <div class="col-lg-12 col-sm-6">
                            <div class="col-lg-12">
                                <div>
                                    <label for="document_remark">Remark</label>
                                </div>
                                <div class="mb-1">
                                    <input type="text" class="form-control bg-light" id="document_remark" name="document_remark" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Remark ******************************** -->

                <!-- Start :: Customer  -->
                @if((count($order['DocumentDetails'])) > 0)
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="texttitle mb-2"><u>Recipient Details</u></div>
                    <input type="hidden" name="order_location_id" value="{{$order_location_id}}"/>

                    <div class="mb-2">
                        <label>
                            Recipient Name:
                        </label>
                        <div>
                            <input type="text" class="form-control bg-light text-uppercase" id="recipient_name" name="recipient_name" value="{{$order_information->contact1}}"/>
                        </div>
                    </div>

                    <div class="mb-2">
                        <label>
                            Mobile Number:
                        </label>
                        <div>
                            <input type="text" class="form-control bg-light" id="mobile_no" name="mobile_no" value="{{$order_information->phone1}}"/>
                        </div>
                    </div>

                    <div class="mb-2">
                        <label>
                            Email:
                        </label>
                        <div>
                            <input type="text" class="form-control bg-light" id="email" name="email" value="{{$email}}"/>
                        </div>
                    </div>

                    <div class="mb-2">
                        <label>
                            Address1:
                        </label>
                        <div>
                            <input type="text" class="form-control bg-light text-uppercase" id="address1" name="address1" value="{{$order_information->shipping_address1}}" placeholder="Enter Address 1" />
                        </div>
                    </div>

                    <div class="mb-2">
                        <label>
                            Address2:
                        </label>
                        <div>   
                            <input type="text" class="form-control bg-light text-uppercase" id="address2" name="address2" value="{{$order_information->shipping_address2}}" placeholder="Enter Address 2" />
                        </div>
                    </div>

                    <div class="mb-2"  hidden>
                        <label>
                            Address3:
                        </label>
                        <div>   
                            <input type="text" class="form-control bg-light" id="address3" name="address3" value="{{$order_information->shipping_address3}}" placeholder="Enter Address 3" />
                        </div>
                    </div>

                    <div class="mb-2">
                            <div class="row">
                                <div class="col-lg-3 col-sm-3">
                                    <input type="text" class="form-control bg-light text-uppercase" id="city" name="city" placeholder="Enter City" value="{{ $city }}" required/>
                                </div>
                                <div class="col-lg-3 col-sm-3">
                                    <input type="text" class="form-control bg-light text-uppercase" id="state" name="state" placeholder="Enter State" value="{{ $state }}" required/>
                                </div>
                                <div class="col-lg-3 col-sm-3">
                                    <input type="text" class="form-control bg-light" id="postcode" name="postcode" placeholder="ENTER POSTCODE" value="{{ $postCode }}" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required/>       
                                </div>
                                <div class="col-lg-3 col-sm-3">
                                    <input type="text" class="form-control bg-light text-uppercase" id="country" placeholder="COUNTRY" name="country" value="{{ $country }}" required/>
                                </div>
                            </div>
                    </div>
                
                </div>
                       


                <!-- Start :: Driver  -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="col-sm-6">
                        <div class="texttitle mb-2"><u>Select Time Slot</u></div>

                        <div class="mb-2">
                            <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" hidden data-bs-target="#selectDriverModal">
                                <i class="ri-user-add-fill label-icon align-middle rounded-pill fs-16 me-2"></i> Select Driver
                            </button>
                            <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" id="btnDisplaySelectDriverSchedule" data-bs-target="#selectDriverSchedule">
                                <i class="ri-user-add-fill label-icon align-middle rounded-pill fs-16 me-2"></i> Select Time Slot
                            </button>
                        </div>

                        <div class="mb-2">
                            <label>
                                Region Zone:
                            </label>
                            <div>   
                                <input type="hidden" id="driver_id" name="driver_id" value="" />
                                <input type="hidden" id="zone_id" name="zone_id" value="" />
                                <input type="hidden" class="form-control bg-light" id="driver_name" value=""/>
                                <input type="text" readonly class="form-control bg-light" id="zone_id_name" name="zone_id_name" value="{{ $order_information->order_region_id}}" />
                                
                            </div>
                        </div>

                        <div class="mb-2">
                            <label>
                                Delivery Date:
                            </label>
                            <div>   
                                <input type="text" class="form-control bg-light" id="delivery_date" name="delivery_date" value="" readonly/>
                            </div>
                        </div>

                        <div class="mb-2">
                            <label>
                                Time Slot:
                            </label>
                            <div>   
                                <input type="hidden" class="form-control bg-light" id="time_slot" name="time_slot" value=""/>
                                <input type="text" class="form-control bg-light" id="show_time_slot" name="show_time_slot" value="" readonly/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End :: Driver  -->
                @endif
                 <!-- ******************************** START :: Product Detail ******************************** -->
                 <div class="card-body border-top border-top-dashed p-4">
                    <div class="table-responsive">
                        @if((count($order['DocumentDetails'])) > 0)
                        <table class="invoice-table table table-borderless mb-0">
                            <thead class="align-middle">
                                <tr class="table-active">
                                    <th scope="col" style="width: 20px;">#</th>
                                    <th scope="col">Description</th>
                                    <th scope="col" hidden>Serial No.</th>
                                    <th scope="col" class="text-center">WH Balance</th>
                                    <th scope="col" class="text-center">Pick item to delivery</th>
                                    <th scope="col" style="width: 20px;" class="text-end">Quantity</th>
                                </tr>
                            </thead>
             
                            <tbody>
                                @php($count_item = 0)
                                @foreach($item_detail as $key=>$stock)
                                @if($stock['RemainingQuantity']>0)
                                                                <tr>
                                    <td>
                                        {{ $count_item }}
                                        <input type="hidden" name="stock-so_item_no-{{ $stock['ItemNo'] }}" value="{{ $stock['ItemNo'] }}">
                                        <input type="hidden" name="stock-id-{{ $stock['ItemNo'] }}" value="{{ $stock['AcStockID'] }}">
                                        <input type="hidden" name="stock-uom-{{ $stock['ItemNo'] }}" value="{{ $stock['AcStockUOMID'] }}">
                                    </td>
                                    <td>
                                        <div style="word-wrap: break-word; width: 300px;">{{ $stock['AcStockID'] }}  {{ $stock['ItemRemark1'] }}</div>
                                    </td>
                                    <td hidden>
                                        <!-- @if( $stock['ItemQuantity'] == 1)
                                        <input class="form-control bg-light" style="width:300px; border: 2px solid #bababa" placeholder="Enter Serial No." name="serial-number-{{$stock['ItemNo'] }}" type="text"/>
                                        @else

                                        @for ($i = 0; $i < $stock['ItemQuantity'] ; $i++)
                                            <input class="form-control bg-light mb-2" style="width:300px; border: 2px solid #bababa" placeholder="Enter Serial No." name="serial-number-{{$stock['ItemNo']}}-{{$i+1}}" type="text"/>
                                        @endfor

                                        @endif -->
                                        <input class="form-control bg-light" hidden style="width:300px; border: 2px solid #bababa" placeholder="Enter Serial No." name="serial-number-{{$stock['ItemNo'] }}" type="text"/>
                                    </td>
                                    <td class="text-center">
                                        
                                        <div style="display: flex; flex-direction: column; gap: 4px;">
                                            @foreach($stock['WarehouseBalance'] as $key => $value)
                                                @if($key == 'OnHandQty')
                                                <div style="border-radius: 20px">
                                                    <span class="badge bg-secondary-subtle text-dark">
                                                        OnHand: <span class="text-secondary">{{ $value }}</span>
                                                    </span>
                                                @elseif($key == 'ReservedQty')
                                                    <span class="badge bg-secondary-subtle text-dark">
                                                        Reserved: <span class="text-secondary">{{ $value }}</span>
                                                    </span>
                                                @else
                                                    <span class="badge bg-secondary-subtle text-dark">
                                                        Available: <span class="text-secondary">{{ $value }}</span>
                                                    </span>
                                                </div>
                                                @endif
                                            @endforeach
                                        </div>
                                    </td>
                                    <td class="text-center">
                                        <input type="checkbox" name="stock-option-{{ $stock['ItemNo'] }}" checked style="transform: scale(1.5);  margin-top:15px"/>
                                    </td>
                                    <td class="text-end">
                                        <select class="form-select bg-light" name="stock-quantity-{{ $stock['ItemNo'] }}" style="width: 100px;">
                                            @for ($i = 1; $i <= $stock['RemainingQuantity']; $i++)
                                                <option value="{{ $i }}" selected>{{ $i }}</option>
                                            @endfor
                                        </select>
                                    </td>
                                </tr>
                                @endif
                                @endforeach

                            </tbody>
                        </table>
                        @else
                        <div class="simpleBadgeBottom">
                            <div class="alert alert-success">
                                All items have been collected!
                            </div>
                        </div>
                        @endif

                    </div>
                    <!-- ******************************** END :: Product Detail ******************************** -->
                    <div class="hstack gap-2 justify-content-end d-print-none mt-4">
                        @if((count($order['DocumentDetails'])) > 0)
                        <button type="submit" class="btn btn-sm btn-info"><i class="ri-printer-line align-bottom me-1"></i> Update</button>
                        @endif
             
                        @if (!empty($qrcode))
                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalQR">EInvoice QR</button>
                        @endif
                        
                    </div>
                </div>
                <!-- ******************************** END :: Product Detail ******************************** -->

                </div>



                <!-- End :: Customer  -->

               

                <!-- ******************************** START :: Ship Via ******************************** -->
                <div class="card-body p-4 border-top border-top-dashed" style="display: none">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <label for="ship_from_location">Ship From</label>
                            </div>
                            <div class="mb-1">
                                <select class="form-select bg-light " required aria-label="select example" onchange="changeOrderLocation(this.value);" id="ship_from_location" name="ship_from_location" readonly>
                                    @foreach($locations as $location)
                                    @if($location->AcLocationID==$location_id)
                                    <option value="{{ $location->AcLocationID }}" selected>{{ $location->AcLocationID }} - {{ $location->AcLocationDesc }}</option>
                                    @endif
                                    @endforeach
                                </select>

                                <div class="invalid-feedback">Example invalid select feedback</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- ******************************** END :: Ship Via ******************************** -->
               
               
               
                
                
            </form>

            <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="selectDriverModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Search Driver</h5>
                            <br>
                            <button type="button" id="btnCloseSelectDriverModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small>
                        <div class="modal-body pb-0">
                            <form id="add_stock_form">
                                <div class="mb-2" hidden>
                                    <input type="text" id="txtSearchCustId" placeholder="By ID" class="form-control bg-light ">
                                </div>
                                <div class="mb-2" hidden>
                                    <input type="text" id="txtSearchCustName" placeholder="By Name" class="form-control bg-light ">
                                </div>
                                <div class="mb-2">
                                    <input type="text" id="txtSearchCustContact" placeholder="By Location" class="form-control bg-light ">
                                </div>
                                <div class="text-center">
                                    <button type="button" class="btn btn-primary rounded-pill" id="btnSearchDriver" onclick="searchDriver();"> 
                                        Search
                                    </button>
                                </div>
                            </form>
                                

                                <div>
                                <table class="table table-striped table-nowrap mb-0 mt-2" id="tableCustomerSearch">
                                        <!-- <thead class="align-middle">
                                            <tr class="table-active">
                                                <th scope="col">
                                                    Customer
                                                </th>
                                                <th scope="col" style="width: 120px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody> -->
                                </table>

                                    <div class="pagination" id="customerPagination">
                                        
                                    </div>
                                </div>
                                <!-- <div class="mx-auto">
                                    <a href="javascript:void(0);" onclick="checkSelectedStock();" class="btn btn-link fw-medium" data-bs-dismiss="modal" aria-label="Close">Add to order list<i class="ri-arrow-right-line ms-1 align-middle"></i></a>
                                </div> -->
                            
                        </div>
                        <div class="modal-footer">
                            
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="selectDriverSchedule" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Slot</h5>
                            <br>
                            <button type="button" id="btnCloseSelectDriverScheduleModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <small style="padding: 0rem 1.25rem">Select the available schedule below.</small>
                        <div class="modal-body pb-0">
                            <form id="add_schedule_form">
                                <div class="mb-2">
                                    <!-- <input type="text" readOnly class="form-control bg-light" value="{{$order_information->order_region_id}}" /> -->
                                    <select class="form-control bg-light" name="selectzone" id="selectzone" onchange="changeSlotZone(this.value)">
                                    @foreach($regions as $key=>$value) 
                                    <option value="{{$value['RegionID']}}" {{ $value['RegionID'] == $order_information->order_region_id ? 'selected' : '' }}>{{$value['RegionName']}}</option> 
                                    @endforeach
                                </select>
                                </div>
                                <div class="mb-2">
                                    <select class="form-control bg-light" id="selectScheduleDate" onchange="changeScheduleDate(this.value)"></select>
                                    <input type="hidden" id="selectedDriverID" value=""/>
                                </div>
           
                            </form>
                                

                            <div>
                                <table class="table table-striped table-nowrap mb-0 mt-2" id="tableDriverScheduleSearch">
                                        <!-- <thead class="align-middle">
                                            <tr class="table-active">
                                                <th scope="col">
                                                    Customer
                                                </th>
                                                <th scope="col" style="width: 120px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody> -->
                                </table>
                            </div>
                            <!-- <div class="mx-auto">
                                <a href="javascript:void(0);" onclick="checkSelectedStock();" class="btn btn-link fw-medium" data-bs-dismiss="modal" aria-label="Close">Add to order list<i class="ri-arrow-right-line ms-1 align-middle"></i></a>
                            </div> -->
                            
                        </div>
                        <div class="modal-footer">
                            
                        </div>
                    </div>
                </div>
            </div>


            {{-- Modal QR --}}
            <div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="modalQR" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">EInvoice QR</h5>
                            <button type="button" id="btnCloseSelectStockModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <!-- <small style="padding: 0rem 1.25rem">Narrow the search to fasten the process.</small> -->
                        <div class="modal-body pb-0" style="margin: 0 auto">
                            <h5 class="mb-3">
                                Scan the QR for EInvoice request
                            </h5>
                            <div style="text-align:center" class="mb-5">
                               
                            </div>
                            <div class="modal-footer" style="padding-right: 0">
                                
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            {{-- End Modal QR --}}
        </div>
    </div>
</div>

@endsection
@section('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="{{ URL::asset('build/js/app.js') }}"></script>
<script src="{{ URL::asset('build/libs/cleave.js/cleave.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/invoicecreate.init.js') }}"></script>
<script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('build/js/pages/sweetAlert.js') }}"></script>

<script>
    var drivers = null;
    var slots = @json($slots);

    function searchDriver(){

        var tableCustomerSearch = document.getElementById('tableCustomerSearch');
        var btnSearchCustomer = document.getElementById('btnSearchDriver');

        var choices_customer = document.getElementById('choices-customer');
        var txtSearchCustId = document.getElementById('txtSearchCustId').value;
        var txtSearchCustName = document.getElementById('txtSearchCustName').value;
        var txtSearchCustContact = document.getElementById('txtSearchCustContact').value;

        var counttxtSearchCustId = txtSearchCustId.length;
        var counttxtSearchCustName = txtSearchCustName.length;
        var counttxtSearchCustContact = txtSearchCustContact.length;

        var spinner = document.createElement('div');
        spinner.className = 'spinner';
        // alert(counttxtSearchCustContact);
        if(counttxtSearchCustId >= 3||counttxtSearchCustName >= 3||counttxtSearchCustContact >= 3){
            $.ajax({
                type:'get',
                url: "/deliveryOrder/get-drivers?id="+txtSearchCustId+"&name="+txtSearchCustName+"&location="+txtSearchCustContact,
                beforeSend: function(xhr) {
                    tableCustomerSearch.innerHTML = '';
                    btnSearchCustomer.innerHTML = '';
                    customerPagination.innerHTML = '';
                    btnSearchCustomer.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);
                    
                    tableCustomerSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    drivers = data.drivers;
                    console.log(drivers);

                    btnSearchCustomer.innerHTML = 'Search'; 
                    customerPagination.innerHTML = data.pagination;
                },
                error: function (data) {
                    btnSearchCustomer.innerHTML = 'Search'; 
                    alert('Invalid Driver Search');
                }
        });
        }

    }

    function loadDriverrSearchPage(page){

        var tableCustomerSearch = document.getElementById('tableCustomerSearch');
        var btnSearchCustomer = document.getElementById('btnSearchDriver');

        var choices_customer = document.getElementById('choices-customer');
        var txtSearchCustId = document.getElementById('txtSearchCustId').value;
        var txtSearchCustName = document.getElementById('txtSearchCustName').value;
        var txtSearchCustContact = document.getElementById('txtSearchCustContact').value;

        var counttxtSearchCustId = txtSearchCustId.length;
        var counttxtSearchCustName = txtSearchCustName.length;
        var counttxtSearchCustContact = txtSearchCustContact.length;

        var spinner = document.createElement('div');
        spinner.className = 'spinner';
        // alert(counttxtSearchCustContact);
        if(counttxtSearchCustId >= 3||counttxtSearchCustName >= 3||counttxtSearchCustContact >= 3){
            $.ajax({
                type:'get',
                url: "/deliveryOrder/get-drivers?id="+txtSearchCustId+"&name="+txtSearchCustName+"&location="+txtSearchCustContact+"&currentPage="+page,
                beforeSend: function(xhr) {
                    tableCustomerSearch.innerHTML = '';
                    btnSearchCustomer.innerHTML = '';
                    customerPagination.innerHTML = '';
                    btnSearchCustomer.appendChild(spinner);
                    },
                success: function (data) {
                    // console.log(data);
                    
                    tableCustomerSearch.insertAdjacentHTML('beforeend', `<tbody>${data.view}</tbody>`);
                    drivers = data.drivers;
                    console.log(drivers);

                    btnSearchCustomer.innerHTML = 'Search'; 
                    customerPagination.innerHTML = data.pagination;
                },
                error: function (data) {
                    btnSearchCustomer.innerHTML = 'Search'; 
                    alert('Invalid Driver Search');
                }
            });
        }

    }
    


    function showDriverSchedules(id){
        let selectScheduleDate = document.getElementById('selectScheduleDate');
        let tableDriverScheduleSearch = document.getElementById('tableDriverScheduleSearch');

        let selected_driver = drivers.filter(driver => driver.DriverInfo.DriverID == id);
        let schedule_date = selected_driver[0].Schedules;

        selectScheduleDate.innerHTML = '';
        schedule_date.forEach(schedule => {
            let option = document.createElement('option');
            option.value = schedule.DeliveryDate;
            option.text = schedule.DeliveryDate;
            selectScheduleDate.appendChild(option);

        });

        let firstSchedule = schedule_date[0].AvailableSlots;

        tableDriverScheduleSearch.innerHTML = '';
        tableDriverScheduleSearch.innerHTML = `
            <thead class="align-middle">
                <tr class="table-active">
                    <th scope="col">Time Slot</th>
                    <th scope="col">Available Slot</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                ${firstSchedule.map(slot => `
                    <tr>
                        <td>${slot.TimeSlot.replace(/(\d{2})-(\d{2})/, (match, p1, p2) => {
                            const startHour = parseInt(p1, 10);
                            const endHour = parseInt(p2, 10);
                            const startPeriod = startHour < 12 ? 'am' : 'pm';
                            const endPeriod = endHour < 12 ? 'am' : 'pm';
                            const formattedStartHour = startHour % 12 || 12;
                            const formattedEndHour = endHour % 12 || 12;
                            return `${formattedStartHour}${startPeriod} - ${formattedEndHour}${endPeriod}`;
                        })}</td>
                        <td>${slot.Available}</td>
                        <td>
                            ${slot.Available > 0 ? "<button class='form-control bg-light' onclick='selectDriverSchedule(\"" + slot.TimeSlot + "\", \"" + id + "\")'> Select </button>" : ""}
                        </td>
                    </tr>
                `).join('')}
            </tbody>
        `;

        document.getElementById('selectedDriverID').value = id;
        document.getElementById('btnCloseSelectDriverModal').click();
        document.getElementById('btnDisplaySelectDriverSchedule').click();
    }

    // function changeScheduleDate(date){

    //     let tableDriverScheduleSearch = document.getElementById('tableDriverScheduleSearch');
    //     let selectedDriverID = document.getElementById('selectedDriverID').value;
    //     let selected_driver = drivers.filter(driver => driver.DriverInfo.DriverID == selectedDriverID);
    //     let schedule_date = selected_driver[0].Schedules;

    //     let selected_schedule = schedule_date.find(schedule => schedule.DeliveryDate === date);
    //     let available_slots = selected_schedule.AvailableSlots;

    //     tableDriverScheduleSearch.innerHTML = '';
    //     tableDriverScheduleSearch.innerHTML = `
    //         <thead class="align-middle">
    //             <tr class="table-active">
    //                 <th scope="col">Time Slot</th>
    //                 <th scope="col">Available</th>
    //                 <th scope="col">Option</th>
    //             </tr>
    //         </thead>
    //         <tbody>
    //             ${available_slots.map(slot => `
    //                 <tr>
    //                     <td>${slot.TimeSlot.replace(/(\d{2})-(\d{2})/, (match, p1, p2) => {
    //                         const startHour = parseInt(p1, 10);
    //                         const endHour = parseInt(p2, 10);
    //                         const startPeriod = startHour < 12 ? 'am' : 'pm';
    //                         const endPeriod = endHour < 12 ? 'am' : 'pm';
    //                         const formattedStartHour = startHour % 12 || 12;
    //                         const formattedEndHour = endHour % 12 || 12;
    //                         return `${formattedStartHour}${startPeriod} - ${formattedEndHour}${endPeriod}`;
    //                     })}</td>
    //                     <td>${slot.Available}</td>
    //                     <td>
    //                          ${slot.Available > 0 ? "<button class='form-control bg-light' onclick='selectDriverSchedule(\"" + slot.TimeSlot + "\", \"" + selectedDriverID + "\")'> Select </button>" : ""}
    //                     </td>
    //                 </tr>
    //             `).join('')}
    //         </tbody>
    //     `;
    // }

    function selectDriverSchedule(timeslot,id){
        
        let selected_driver = drivers.filter(driver => driver.DriverInfo.DriverID == id);
        let selected_date = document.getElementById('selectScheduleDate').value;

        console.log(id);
        document.getElementById('time_slot').value = timeslot;
        document.getElementById('delivery_date').value = selected_date;
        document.getElementById('driver_id').value = selected_driver[0].DriverInfo.DriverID;
        document.getElementById('driver_name').value = selected_driver[0].DriverInfo.Name;
        document.getElementById('btnCloseSelectDriverScheduleModal').click();
    }

    function showScheduleList(){
        let selectScheduleDate = document.getElementById('selectScheduleDate');
        let tableDriverScheduleSearch = document.getElementById('tableDriverScheduleSearch');

        selectScheduleDate.innerHTML = '';
        slots.forEach(slot => {
            let option = document.createElement('option');
            option.value = slot.DeliveryDate;
            option.text = slot.DeliveryDate;
            selectScheduleDate.appendChild(option);

        });

        let firstSchedule = slots[0].AvailableSlots;

        tableDriverScheduleSearch.innerHTML = '';
        tableDriverScheduleSearch.innerHTML = `
            <thead class="align-middle">
                <tr class="table-active">
                    <th scope="col">Time Slot</th>
                    <th scope="col">Available Slot</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                ${firstSchedule.map(slot => `
                    <tr>
                        <td>${slot.TimeSlot.replace(/(\d{2})(\d{2})-(\d{2})(\d{2})/, (match, p1, p2, p3, p4) => {
                            const startHour = parseInt(p1, 10);
                            const startMinute = p2;
                            const endHour = parseInt(p3, 10);
                            const endMinute = p4;
                            const startPeriod = startHour < 12 ? 'am' : 'pm';
                            const endPeriod = endHour < 12 ? 'am' : 'pm';
                            const formattedStartHour = startHour % 12 || 12;
                            const formattedEndHour = endHour % 12 || 12;
                            return `${formattedStartHour}:${startMinute}${startPeriod} - ${formattedEndHour}:${endMinute}${endPeriod}`;
                        })}</td>
                        <td>${slot.Available}</td>
                        <td style="text-align:right">
                            ${slot.Available > 0 ? "<button class='btn btn-sm btn-info rounded-pill' onclick='selectSlot(\"" + slot.TimeSlot + "\", \"" + slots[0].ZoneID + "\")'> Select <i class='ri-arrow-right-line ms-1 align-middle'></i></button>" : ""}
                        </td>
                    </tr>
                `).join('')}
            </tbody>
        `;
        
    }

    function changeSlotZone(location_id){
        let tableDriverScheduleSearch = document.getElementById('tableDriverScheduleSearch');
        $.ajax({
                type:'get',
                url: "/pos/getSlot/"+location_id,
                beforeSend: function(xhr) {
                    tableDriverScheduleSearch.innerHTML = '<div class="spinner" style="border-top-color: black !important;"></div>';
                    },
                success: function (data) {
                    // console.log(data);

                    if(data.slot){
                        var call_slots = data;
                        slots = call_slots.Slots;
                        document.getElementById('zone_id_name').value = location_id;
                        showScheduleList();
                    }else{
                        tableDriverScheduleSearch.innerHTML = '<div style="color: red; text-align: center; font-weight: bold;">No available slot found</div>';
                    }
                    
                },
                error: function (data) {
                    // btnSearchCustomer.innerHTML = 'Search'; 
                    alert('Error');
                }
      });
    }

    function changeScheduleDate(date){

        let tableDriverScheduleSearch = document.getElementById('tableDriverScheduleSearch');
        // let selectedDriverID = document.getElementById('selectedDriverID').value;
        // let selected_driver = drivers.filter(driver => driver.DriverInfo.DriverID == selectedDriverID);
        // let schedule_date = selected_driver[0].Schedules;

        let selected_schedule = slots.find(slot => slot.DeliveryDate === date);
        let available_slots = selected_schedule.AvailableSlots;

        tableDriverScheduleSearch.innerHTML = '';
        tableDriverScheduleSearch.innerHTML = `
            <thead class="align-middle">
                <tr class="table-active">
                    <th scope="col">Time Slot</th>
                    <th scope="col">Available Slot</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                ${available_slots.map(slot => `
                    <tr>
                        <td>${slot.TimeSlot.replace(/(\d{2})(\d{2})-(\d{2})(\d{2})/, (match, p1, p2, p3, p4) => {
                            const startHour = parseInt(p1, 10);
                            const startMinute = p2;
                            const endHour = parseInt(p3, 10);
                            const endMinute = p4;
                            const startPeriod = startHour < 12 ? 'am' : 'pm';
                            const endPeriod = endHour < 12 ? 'am' : 'pm';
                            const formattedStartHour = startHour % 12 || 12;
                            const formattedEndHour = endHour % 12 || 12;
                            return `${formattedStartHour}:${startMinute}${startPeriod} - ${formattedEndHour}:${endMinute}${endPeriod}`;
                        })}</td>
                        <td>${slot.Available}</td>
                        <td style="text-align:right">
                            ${slot.Available > 0 ? "<button class='btn btn-sm btn-info rounded-pill' onclick='selectSlot(\"" + slot.TimeSlot + "\", \"" + selected_schedule.ZoneID + "\")'> Select </button>" : ""}
                        </td>
                    </tr>
                `).join('')}
            </tbody>
        `;
    }

    function selectSlot(timeslot,id){
        let selected_date = document.getElementById('selectScheduleDate').value;
        let show_time_slot = timeslot.replace(/(\d{2})(\d{2})-(\d{2})(\d{2})/, (match, p1, p2, p3, p4) => {
            const startHour = parseInt(p1, 10);
            const startMinute = p2;
            const endHour = parseInt(p3, 10);
            const endMinute = p4;
            const startPeriod = startHour < 12 ? 'am' : 'pm';
            const endPeriod = endHour < 12 ? 'am' : 'pm';
            const formattedStartHour = startHour % 12 || 12;
            const formattedEndHour = endHour % 12 || 12;
            return `${formattedStartHour}:${startMinute}${startPeriod} - ${formattedEndHour}:${endMinute}${endPeriod}`;
        });

        document.getElementById('time_slot').value = timeslot;
        document.getElementById('delivery_date').value = selected_date;
        document.getElementById('zone_id').value = id;
        // document.getElementById('zone_id_name').value = id;
        document.getElementById('show_time_slot').value = show_time_slot;   
        document.getElementById('btnCloseSelectDriverScheduleModal').click();
    }
</script>

<script>

    document.getElementById('collection-form').addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
                event.preventDefault();
                return false;
            }
    });

        document.getElementById('collection-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

        let time_slot = document.getElementById('time_slot').value;

        if(time_slot == null || time_slot == ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please select time slot for the delivery!',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK',
            });
            return;  // Stop submission if the check fails

        }

        let address1 = document.getElementById('address1').value;

        if(address1 == null || address1 == ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please fill in the address!',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK',
            });
            return;  // Stop submission if the check fails

        }

        let mobile_no = document.getElementById('mobile_no').value;

        if(mobile_no == null || mobile_no == ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please fill in the mobile number!',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK',
            });
            return;  // Stop submission if the check fails

        }

        // let postcode = document.getElementById('postcode').value;

        // if(postcode == null || postcode == ''){
        //     Swal.fire({
        //         icon: 'warning',
        //         title: 'Oops...',
        //         text: 'Please fill in the postcode!',
        //         confirmButtonColor: '#3085d6',
        //         confirmButtonText: 'OK',
        //     });
        //     return;  // Stop submission if the check fails

        // }

        // let city = document.getElementById('city').value;

        // if(city == null || city == ''){
        //     Swal.fire({
        //         icon: 'warning',
        //         title: 'Oops...',
        //         text: 'Please fill in the city!',
        //         confirmButtonColor: '#3085d6',
        //         confirmButtonText: 'OK',
        //     });
        //     return;  // Stop submission if the check fails

        // }

        // let state = document.getElementById('state').value;

        // if(state == null || state == ''){
        //     Swal.fire({
        //         icon: 'warning',
        //         title: 'Oops...',
        //         text: 'Please fill in the state!',
        //         confirmButtonColor: '#3085d6',
        //         confirmButtonText: 'OK',
        //     });
        //     return;  // Stop submission if the check fails

        // }

        let recipient_name = document.getElementById('recipient_name').value;

        if(recipient_name == null || recipient_name == ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please fill in the recipient name!',
                confirmButtonColor: '#3085d6',
                confirmButtonText: 'OK',
            });
            return;  // Stop submission if the check fails

        }

        Swal.fire({
            title: 'Are you sure?',
            text: "Do you want to proceed with the submission?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, submit it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, submit the form
                callLoaddingScreen('Submitting Delivery Order, Please wait...');
                this.submit();
            }
        });
    });
</script>
<script>
    document.getElementById('btnDisplaySelectDriverSchedule').addEventListener('click', function() {
        showScheduleList();
    });
    </script>
@endsection