@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
                 {{-- - <b>{{$delivery_order->ScheduleID}}</b> --}}
                </h5>
        </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>
                        <!-- 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">{{$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 readonly rows="3" class="form-control bg-light" id="delivery_remark" name="delivery_remark"> {{$delivery_order->delivery_remark}}</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  -->
                <div class="card-body p-4 border-top border-top-dashed">
                    <div class="texttitle mb-2"><u>Recipient Details</u></div>

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

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

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

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

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

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

                    <div class="mb-2">
                        <div class="row">
                            <div class="col-lg-3 col-sm-3">
                                <input readonly type="text" class="form-control bg-light" id="city" name="city" value="{{$delivery_order->city}}" placeholder="Enter City" value=""/>
                            </div>
                            <div class="col-lg-3 col-sm-3">
                                <input readonly type="text" class="form-control bg-light" id="state" name="state" value="{{$delivery_order->state}}" placeholder="Enter State" value=""/>
                            </div>
                            <div class="col-lg-3 col-sm-3">
                                <input readonly type="text" class="form-control bg-light" id="postcode" name="postcode" value="{{$delivery_order->postcode}}" placeholder="Enter Postcode" value=""/>       
                            </div>
                            <div class="col-lg-3 col-sm-3">
                                <input readonly type="text" class="form-control bg-light" id="country" name="country" value="{{$delivery_order->country}}" value="Malaysia"/>
                            </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 Driver</u></div>
              
                        <div class="mb-2">
                                <button type="button" class="btn btn-primary btn-label rounded-pill" data-bs-toggle="modal" data-bs-target="#selectDriverModal" hidden>
                                    <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" hidden 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="{{ $delivery_order->zone_id}}" />
                            </div>
                        </div>

                        <div class="mb-2">
                            <label>
                                Delivery Date:
                            </label>
                            <div>   
                                <input type="text" class="form-control bg-light" readonly id="delivery_date" name="delivery_date" value="{{$delivery_order->delivery_date}}" 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="{{$delivery_order->time_slot}}"/>
                                <input type="text" class="form-control bg-light" id="show_time_slot" name="show_time_slot" value="{{$delivery_order->time_slot}}" readonly/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End :: Driver  -->
                

                 <!-- ******************************** 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" style="width: 20px;" class="text-end">Quantity</th>
                                </tr>
                            </thead>
             
                            <tbody>
                                @foreach($item_list as $key=>$stock)
                                <tr>
                                    <td>
                                        {{ $loop->iteration }}
                                    </td>
                                    <td>
                                        <div style="word-wrap: break-word; width: 300px;">{{ $stock['stock_id']}}  {{ $stock['so_item_name'] }}</div>
                                    </td>
                                    
                                    <td class="text-end">{{ $stock['quantity'] }}
                                    </td>
                                </tr>
                                
                                @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">
                        
                        <button type="submit" class="btn btn-sm btn-info" hidden><i class="ri-printer-line align-bottom me-1"></i> Save Order</button>
                        
             
                        @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  -->

               

               
               
               
                
                
            </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">Driver Schedule</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">Narrow the search to fasten the process.</small>
                        <div class="modal-body pb-0">
                            <form id="add_schedule_form">
                                <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/libs/prismjs/prism.js') }}"></script> --}}
<script src="{{ URL::asset('build/js/app.js') }}"></script>
{{-- <script src="{{ URL::asset('build/libs/dropzone/dropzone-min.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;

    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</th>
                    <th scope="col">Option</th>
                </tr>
            </thead>
            <tbody>
                ${firstSchedule.map(slot => `
                    <tr>
                        <td>${slot.TimeSlot}</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}</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();
    }
</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 driver_id = document.getElementById('driver_id').value;

        if(driver_id == null || driver_id == ''){
            Swal.fire({
                icon: 'warning',
                title: 'Oops...',
                text: 'Please select driver!',
                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>
@endsection