@extends('layouts.master')
@section('style')
    <style>
        .circle {
            border: 1px solid #aaa;
           /* width: 22px;
            height: 22px;*/
            width: 40px;
            height: 40px;
            border-radius: 100%;
            position: relative;
/*            margin: 4px;*/
            display: inline-block;
            vertical-align: middle;
            background-color: #D3D3D3 !important;
            font-size: 21px;
        }

        .circle:hover {
            background: #6363634f;
        }

        .circle:active {
            background: radial-gradient(#aaa, #fff);
        }

        .circle:before,
        .circle:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .circle.plus:before,
        .circle.plus:after {
            background: green;
        }

        .circle.plus:before {
            width: 2px;
            margin: 3px auto;
        }

        .circle.plus:after {
            margin: auto 3px;
            height: 2px;
        }

        .circle.minus:before {
            background: #cc0000;
            margin: auto 3px;
            height: 2px;
        }

        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__placeholder {
            color: white !important;
        }

        .select2-container--bootstrap5 .select2-selection--single.form-select-solid .select2-selection__rendered {
            color: white !important;
        }

        .form-switch.form-check-solid .form-check-input:not(:checked) {
            background-color: #818181 !important;
        }
        .switch {
            position: relative;
            display: block;
            vertical-align: top;
            width: 71px;
            height: 20px;
            /* padding: 3px; */
            margin: 0 10px 10px 0px;
            background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
            border-radius: 18px;
            box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            box-sizing: content-box;
        }

        .switch-input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            box-sizing: content-box;
        }

        .switch-label {
            width: 71px;
            position: relative;
            display: block;
            height: 28px;
            font-size: 10px;
            text-transform: uppercase;
            background: red;
            border-radius: inherit;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
            box-sizing: content-box;
        }

        .switch-label:before,
        .switch-label:after {
            position: absolute;
            top: 50%;
            margin-top: -.5em;
            line-height: 1;
            -webkit-transition: inherit;
            -moz-transition: inherit;
            -o-transition: inherit;
            transition: inherit;
            box-sizing: content-box;
        }

        .switch-label:before {
            content: attr(data-off);
            right: 11px;
            color: #FFFFFF;
            text-shadow: 0 1px rgba(255, 255, 255, 0.5);
        }

        .switch-label:after {
            content: attr(data-on);
            left: 11px;
            color: #FFFFFF;
            text-shadow: 0 1px rgba(0, 0, 0, 0.2);
            opacity: 0;
        }

        .switch-input:checked~.switch-label {
            background: green;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
        }

        .switch-input:checked~.switch-label:before {
            opacity: 0;
        }

        .switch-input:checked~.switch-label:after {
            opacity: 1;
        }

        .switch-handle {
            position: absolute;
            top: 2px;
            right: 46px;
            width: 24px;
            height: 24px;
            background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
            background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
            border-radius: 100%;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
        }

        .switch-handle:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -6px 0 0 -6px;
            width: 12px;
            height: 12px;
            background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
            border-radius: 6px;
            box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
        }

        .switch-input:checked~.switch-handle {
            left: 45px;
            box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
        }

        .switch-label,
        .switch-handle {
            transition: All 0.3s ease;
            -webkit-transition: All 0.3s ease;
            -moz-transition: All 0.3s ease;
            -o-transition: All 0.3s ease;
        }
          .card {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        margin-top: 20px;
    }

    .card-body {
        padding: 20px;
    }

    #expenseBarChart {
        margin-top: 20px;
    }

    </style>
@endsection
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
@section('content')
@php
$PayType = config('custom.PayType');
$states = config('custom.states');
$driverType = config('custom.driverType');
$bad_zone = config('custom.bad_zone');
$vendors = config('custom.vendors');
$repairTypes = config('custom.repairTypes');
@endphp
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">
        <div class="flex-lg-row-fluid">
            <div class="d-flex flex-column flex-lg-row">
                <div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xxl-250px mb-8 mb-lg-0 me-lg-4 me-5">
                    <form action="#" id="search_form">
                        <div class="card">
                            <div class="card-body">
                            <label class="fs-6 form-label fw-bold text-gray-900">Driver</label>
                                <select class="form-select form-control form-control-solid" name="DRIVER"
                                    id="DRIVER" data-control="select2" data-hide-search="true">
                                    <option value="">All</option>
                                   @foreach ($drivers as $driver)
                                          <option value="{{$driver->DRIVER_ID}}" {{ request()->get('DRIVER') == $driver->DRIVER_ID ? 'selected' : '' }}> {{ strtoupper($driver->FIRST_NAME.$driver->LAST_NAME) }}</option>
                                   @endforeach



                                </select>
                                <div class="separator separator-dashed my-4"></div>
                                <div class="position-relative">
                                    <i
                                        class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                    <input type="text" class="form-control form-control-solid ps-10" name="search"
                                        value="{{ $vendorsname ?? '' }}" id="search" placeholder="Search">
                                </div>
                                <div class="separator separator-dashed my-4"></div>
                                     @php
                                        // Default to first and last day of current month if not set in request
                                        $startDate = request()->get('start_date') ? now()->startOfMonth()->format('Y-m-d') : '';
                                        $endDate = request()->get('end_date') ? now()->endOfMonth()->format('Y-m-d'):'';
                                    @endphp

                                    {{-- <div class="mb-5">
                                        <label class="fs-4 form-label fw-bold text-gray-900">Date Range</label>
                                        <div class="d-flex">
                                            <div id="range"
                                                style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
                                                <i class="fa fa-calendar"></i>&nbsp;
                                                <span></span> <i class="fa fa-caret-down"></i>
                                            </div>

                                            <!-- Hidden inputs to store selected dates -->
                                            <input type="hidden" class="form-control sm" name="start_date" id="start_date" value="{{ $startDate }}">
                                            <input type="hidden" class="form-control sm" name="end_date" id="end_date" value="{{ $endDate }}">
                                        </div>
                                    </div> --}}

                            <div class="separator separator-dashed"></div>
                            <div class="mb-5 mt-5">
                                <label class="fs-6 form-label fw-bold text-gray-900">Status</label>
                                <select class="form-select form-control form-control-solid" name="paid"
                                    id="paid" data-control="select2" data-hide-search="true">
                                    @php
                                        $selectedAll = '';
                                        $selectedNo = 'selected'; // Default to "NO"
                                        $selectedYes = '';

                                        if (request()->get('paid') === 'All') {
                                            $selectedAll = 'selected';
                                            $selectedNo = '';
                                            $selectedYes = '';
                                        } elseif (request()->get('paid') === 'NO') {
                                            $selectedAll = '';
                                            $selectedNo = 'selected';
                                            $selectedYes = '';
                                        } elseif (request()->get('paid') === 'YES') {
                                            $selectedAll = '';
                                            $selectedNo = '';
                                            $selectedYes = 'selected';
                                        }
                                    @endphp

<option value="All" {{ $selectedAll }}>All</option>
<option value="NO" {{ $selectedNo }}>OPEN</option>
<option value="YES" {{ $selectedYes }}>PAID</option>

                                </select>
                            </div>
                            </div>

                            <div class="d-flex mt-5 mb-5" style="margin: 0 auto; !important">
                                <button type="button" id="submit" class="btn btn-primary me-5" onclick="changeExport()">Search</button>
                                <button type="button" id="clear" class="btn btn-primary me-5">Clear</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="flex-lg-row-fluid">
                    <div class="mb-5">
                    <div class="d-flex flex-wrap align-items-center justify-content-between my-1">
                            <h3 class="fw-bold my-1">Driver Pay Expense</h3>
                            <h3 id="totalOrigAmt" class="font-weight-bold text-end my-1" ></h3>
                        </div>
                        
                    </div>

                    <div class="tab-content">
                        <div id="kt_project_users_table_pane" class="tab-pane fade show active">
                            <div class="card card-flush">
                                <div class="pt-0">

                                    <div class="table-responsive p-5">

                                        <div class="row align-items-center">
                                        <div class="col-md-2">
                                        <div  class="mb-3 font-weight-bold"><b>Paid Amount:</b><b id="selectOrigAmt"></b></div>
                                    
                                        </div>
                                            <!-- Pay Selected Button (col-md-2) -->
                                            <div class="col-md-2">
                                                <button type="button" class="btn btn-primary btn-sm" onclick="allPaidStatus()" id="updatePaidButton">Pay Selected</button>
                                            </div>
                                            <div class="col-md-8" id="paidDateDiv">
                                                <div class="row">

                                                    <div class="col-md-2">
                                                        <label for="paymentdate" class="form-label">Payment Date</label>
                                                    </div>

                                                    <div class="col-md-3">
                                                        <input type="date" class="form-control" id="paid_date" value="">
                                                    </div>

                                                     <div class="col-md-2">
                                                        <label for="checkno" class="form-label">Check No</label>
                                                    </div>

                                                    <div class="col-md-2">
                                                        <input type="number" class="form-control" id="checkno" value="">
                                                    </div>

                                                    <div class="col-md-2">
                                                        <button type="button" class="btn btn-primary btn-sm" onclick="addpaidDate($('#paid_date').val(), $('#checkno').val())">Pay Now</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                        {!! $dataTable->table() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="expenseModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="expenseModalLabel">Edit Expense</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pt-0">
                <div class="row">
               <form method="post" id="addExpenseForm" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                                <div class="col-md-6">
                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Vendor</label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <input type="hidden" name="driver_id"  id ="driver_id"  value="">
                                        <input type="hidden" name="truck_id" id ="truck_id"  value="">
                                        <input type="hidden" name="trailer_id" id ="trailer_id" value="">
                                        <input type="hidden" name="load_id" id ="load_id" value="">
                                        <input type="hidden" name="AP_ID" id="AP_ID" value="">

                                         <input type="hidden" id="efsvendor" name="efsvendor" value="">
                                        <select class="form-control" class="form-select" data-control="select2"
                                            data-hide-search="true" id="exp_vendor_id" name="VENDOR_ID" data-placeholder="Please select">
                                            <option value="">Please select</option>
                                            @foreach($vendorslist as  $vendor)
                                            <option value="{{$vendor['VENDOR_ID']}}">{{strtoupper($vendor['NAME'])}}</option>
                                            @endforeach

                                        </select>

                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="vendorError"></p>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mt-15">
                                    <div class="btn-group">
                                            <button type="button" class="btn btn-primary btn-sm vendorAddExp" id="vendorsaddexp">Add Vendor</button>
                                    </div>
                                    <div class="btn-group">
                                        <!-- <a href="javascript:void(0)" class="btn btn-primary btn-sm " id="vandolListbtn">Vendor
                                            List</a> -->

                                    </div>
                                </div>
                            </div>

                        </div>
                    <div class="row">
                            <div class="col-md-3">

                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 required">Amount</label>
                                                                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="ORIG_AMT" id="ORIG_AMT"
                                            value=""
                                            class="form-control ">
                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="amountError"></p>
                                    </div>
                            </div>

                            <div class="col-md-4">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6  required">Expense Type</label>
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <select class="form-control" class="form-select" data-control="select2"
                                        data-hide-search="true" id="exp_TYPE" name="TYPE" data-placeholder = "Please Select" onchange="expenseTypeChange(this)">
                                        <option value="">Please select</option>
                                        @foreach($expenseTypes as $key => $expenseType)
                                            <option value="{{$expenseType->EXPID}}" >{{strtoupper($expenseType->NAME)}}</option>
                                        @endforeach

                                    </select>
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                    <p class="text-danger" id="expenseTypeError"></p>
                                </div>
                    </div>
                    <div class="col-md-2 mt-15">
                    <button type="button" class="btn btn-primary btn-sm" id="addExpenseTypebtn">Add Type</button>
                    </div>
                    <div class="col-md-3">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Due Date</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type="date" name="TX_DUE" id="TX_DUE" value="" class="form-control ">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                                <p class="text-danger" id="DueDateError"></p>
                            </div>
                        </div>

                        </div>
                        <div class = "row">

                        <div class="col-md-6">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">PO #</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type="text" class="form-control" id="PO_NUMBER" name="PO_NUMBER"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                    </div>
                    <div class="col-md-6 refno">
                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Reference Number
                                    </label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="TX_REFERENCE" id="TX_REFERENCE"  value="" class="form-control ">
                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="TX_REFERENCEerror"></p>
                                    </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-6" id="repair_issue_div">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id="repair_issue_lable">Truck Repair Issue</label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <select class="form-control" class="form-select" data-control="select2"
                                data-hide-search="true" id="repair_issue" name="repair_issue">
                                <option value="">Please select</option>
                             </select>
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">

                     <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Documents</label>

                     <div class="col-lg-12 fv-row fv-plugins-icon-container">
                         <input type="file" name="exp_document" id="exp_document" class="form-control"
                             accept=".png,.jpg,.jpeg,.csv,.xls,.xlsx" >
                         <input class="form-control" type="hidden" id="old_exp_document"
                             name="old_exp_document"
                             value="">
                             <div class="row" id="expdocumentLink">

                             </div>
                     </div>
         </div>

                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-1"> <label class="col-form-label fw-semibold fs-6 pt-0">Paid</label></div>
                            <div class="col-md-11">
                            <label class="switch">
                            <input class="switch-input" type="checkbox" name="PAID" value="YES"
                                   id="paid_toggle">
                            <span class="switch-label fw-bold" data-on="YES" data-off="NO"></span>
                            <span class="switch-handle"></span>
                        </label>
                            </div>
                        </div>


                    </div>
                    <div class="col-md-6" id="paidDateContainer" style="display: none;">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id='paidDateLabel'>Paid
                            Date</label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <input type="date" class="form-control" id="PAID_DATE" name="PAID_DATE"
                                   value="">
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                        </div>
                    </div>

                    <div class="col-md-6" id="checknoContainer" style="display: none;">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id='paidDateLabel'>Check No
                            </label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <input type="number" class="form-control" id="CHECK_ID" name="CHECK_ID"
                                   value="">
                            <div
                                class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback"></div>
                        </div>
                    </div>

                </div>
                <div class="row hide">

                <!-- <div class="col-md-6">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Truck</label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                <input type="text" class="form-control" id="truck" name="truck"
                                    value="{{request()->route('truckId')}}" readonly>
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                        </div>
                </div> -->
                </div>



                <hr>
                <div class="row">
                <div class="col-md-12">
                            <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Notes </label>
                            <div class="col-lg-12 fv-row fv-plugins-icon-container">
                              <textarea name="NOTES" id="NOTES" class="form-control"></textarea>
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                        </div>
                </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="submit" id="expensebtn" class="btn btn-primary">submit</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
            </div>
        </form>
        </div>
    </div>
</div>

    <div class="modal fade" id="vendorAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Vendor</h5>
                </div>
                <form method="post" id="addVendorForm">
                    @csrf
                    <div class="modal-body">
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-3 text-md-end">
                                    <label class="fs-6 fw-semibold form-label mt-3">
                                        <span class="required">NAME</span>
                                    </label>
                                </div>
                                <div class="col-md-9">
                                    <input type="hidden" value="trailer" name="module" id="module">
                                    <input type="hidden" value="" name="id" id="vendoraddid">
                                    <input type="hidden" value="" name="tab" id="vendoraddtab">
                                    <input type="hidden" value="" name="type" id="vendoraddtype">
                                    <input type="hidden" value="" name="issueId" id="vendoraddissueid">
                                    <input type="text" name="NAME" id="NAME" value=""
                                        class="form-control form-control-solid mb-2">
                                    <p class="text-danger" id="VendorNAMEError"></p>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary closed" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick=addvendors()>Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


<div class="modal fade" id="vendorListModal" tabindex="-1" aria-labelledby="vendorListModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="vendorListModalLabel">Vendor List</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="vendorList" value="vendorList" id="vendorList">
        <table class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer nowrap vendorlistTable" id="vendorlistTable">
            <thead>
                <tr class="thead-bg-color">
                    <th class="fs-7 text-gray-500 text-uppercase">NAME</th>
                    <th class="fs-7 text-gray-500 text-uppercase">STATUS</th>
                    <th class="fs-7 text-gray-500 text-uppercase">DATE</th>
                </tr>
            </thead>
        </table>
      </div>
    </div>
  </div>
</div>

<!-- moneyCodeModal -->


    <div class="modal fade" id="addExpenseTypeModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addDriverModalLabel">Add Expense Type</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="addexpensetypeform">
                @csrf

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label ">Name</label>
                                <input type="text" class="form-control" id="EXPENSE_NAME" name="EXPENSE_NAME"
                                    value="{{ old('EXPENSE_NAME') }}">
                                @error('NAME')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary closeExpensetype" data-bs-dismiss="modal"
                        aria-label="Close">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="loadCashModal" tabindex="-1" role="dialog" aria-labelledby="loadCashModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="loadCashModalLabel">Load Cash</h5>
                </div>
                <form method="post" id="loadCashForm">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="col-form-label fw-semibold">Amount <span class="text-danger">*</span></label>
                            <input name="amount" id="amount" class="form-control">
                        </div>

                        <div class="form-group mt-2">
                            <label class="col-form-label fw-semibold">Issue To <span class="text-danger">*</span></label>
                            <select class="form-control" class="form-select" data-control="select2"
                                data-hide-search="true" id="issue_to" name="issue_to">
                                <option value="">Please select</option>
                                @if($driver_cards->isNotEmpty())
                                    @foreach($driver_cards as $key => $driver_card)
                                        <option value="{{ $driver_card->DRID }}">{{ $driver_card->CARD_NO }} {{ !empty($driver_card->NAME) ? ' / ' . $driver_card->NAME : '' }}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="form-group mt-2">
                            <label class="col-form-label fw-semibold">Notes</label>
                            <textarea data-field="notes" name="notes" id="notes" cols="35" rows="4" class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary closed" data-dismiss="modal" onclick=" $('#loadCashModal').modal('hide');">Close</button>
                        <button type="button" class="btn btn-primary" id="addLoadCashBtn" onclick=addLoadCash()>Load Cash</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addExpenseTypeModal" tabindex="-1" aria-labelledby="addTruckModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addDriverModalLabel">Add Expense Type</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="addexpensetypeform">
                @csrf

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="max_weg" class="form-label ">Name</label>
                                <input type="text" class="form-control" id="EXPENSE_NAME" name="EXPENSE_NAME"
                                    value="{{ old('EXPENSE_NAME') }}">
                                @error('NAME')
                                <p class="text-danger">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary closeExpensetype" data-bs-dismiss="modal"
                        aria-label="Close">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>


@endsection()
@section('script')
    {!! $dataTable->scripts() !!}
    <script>
// Define the addData function first





        const table = $('#expense-table');

        table.on('preXhr.dt', function(e, setting, data) {

            data.search = $('#search').val();
            data.start_date = $('#start_date').val();
            data.end_date = $('#end_date').val();
           data.paid = $('#paid').val();
           data.DRIVER = $('#DRIVER').val();
        });

        $('#submit').on('click', function() {
            table.DataTable().ajax.reload();
            return false;
        });


        $('#clear').on('click', function() {
            $('#search').val('');
            // var start = moment();
            // var end = moment();
            // $('#range').data('daterangepicker').setStartDate(start);
            // $('#range').data('daterangepicker').setEndDate(end);

            // $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

            // $("#start_date").val(start.format('YYYY-MM-DD'));
            // $("#end_date").val(end.format('YYYY-MM-DD'));

            $('#range span').html('');
            $('input[name="start_date"]').val('');
            $('input[name="end_date"]').val('');
            $('#exptype').val('').trigger('change');

            $('#STATUS').val('').trigger('change');
            $('#DRIVER').val('').trigger('change');
            $('#selectOrigAmt').html("$0.00");

            table.DataTable().ajax.reload();
            addData(null, null, null, null, null, chart, dataPoints);
            // location.reload();
        });


        // $(function() {
        //     // var start = moment().subtract(29, 'days');
        //     // var end = moment();

        //     var start = moment();
        //     var end = moment();

        //     function cb(start, end) {
        //         $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        //         $("#start_date").val(start.format('YYYY-MM-DD'));
        //         $("#end_date").val(end.format('YYYY-MM-DD'));
        //     }

        //     $('#range').daterangepicker({
        //         startDate: start,
        //         endDate: end,
        //         ranges: {
        //             'Today': [moment(), moment()],
        //             'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        //             'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        //             'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        //             'This Month': [moment().startOf('month'), moment().endOf('month')],
        //             'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
        //                 'month').endOf('month')]
        //         }
        //     }, cb);
        //      cb(start, end);
        // });

         $(function() {
            // var start = moment().subtract(29, 'days');
            // var end = moment();

            var start = moment();
            var end = moment();

            function cb(start, end) {
                $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                $("#start_date").val(start.format('YYYY-MM-DD'));
                $("#end_date").val(end.format('YYYY-MM-DD'));
            }

            $('#range').daterangepicker({
                defaultDate: '',
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')]
                }
            }, cb);

        });

      $(function() {
    // Function to get query parameters from the URL
    function getQueryParams() {
        var params = {};
        var queryString = window.location.search.substring(1);
        if (queryString.length > 0) {
            queryString.split('&').forEach(function(param) {
                var pair = param.split('=');
                params[pair[0]] = decodeURIComponent(pair[1] || '');
            });
        }
        return params;
    }

    // Fetch the query parameters
    var params = getQueryParams();

    // Check if the vendor parameter exists
    if (params.vendor) {
        // Clear the date range values
        $("#start_date").val('');
        $("#end_date").val('');
        $("#exptype").val('');
        $('#range span').html('');  // Optionally clear the display text
    } else {


        // // Initialize the date range picker
        // $('#range').daterangepicker({
        //     startDate: start,
        //     endDate: end,
        //     ranges: {
        //         'Today': [moment(), moment()],
        //         'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        //         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        //         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        //         'This Month': [moment().startOf('month'), moment().endOf('month')],
        //         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        //     }
        // }, cb);

        // // Trigger the callback to set initial values
        // cb(start, end);

        // // Initialize the date range picker
        // $('#range').daterangepicker({
        //     startDate: start,
        //     endDate: end,
        //     ranges: {
        //         'Today': [moment(), moment()],
        //         'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        //         'Last 7 Days': [moment().subtract(6, 'days'), moment()],
        //         'Last 30 Days': [moment().subtract(29, 'days'), moment()],
        //         'This Month': [moment().startOf('month'), moment().endOf('month')],
        //         'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        //     }
        // }, cb);

        // // Trigger the callback to set initial values
        // cb(start, end);
        function cb(start, end) {
        $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $("#start_date").val(start.format('YYYY-MM-DD'));
        $("#end_date").val(end.format('YYYY-MM-DD'));
    }

    function cb(start, end) {
        $('#range span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        $("#start_date").val(start.format('YYYY-MM-DD'));
        $("#end_date").val(end.format('YYYY-MM-DD'));
    }

    // Retrieve values from hidden inputs
    var startDate = $("#start_date").val(); // Get value from hidden input
    var endDate = $("#end_date").val(); // Get value from hidden input

    // If the input values are empty, use default values
    if (!startDate) {
        startDate = moment().startOf('month'); // default to the start of the current month
    } else {
        startDate = moment(startDate); // convert string to moment object
    }

    if (!endDate) {
        endDate = moment().endOf('month'); // default to the end of the current month
    } else {
        endDate = moment(endDate); // convert string to moment object
    }

    // Initialize the date range picker
    $('#range').daterangepicker({
        startDate: startDate,
        endDate: endDate,
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    var request_start_date = '{{ !empty(request()->get('start_date')) ? request()->get('start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('end_date')) ? request()->get('end_date') : '' }}';
            if(request_start_date != '' && request_end_date != ''){
                $('#start_date').val(request_start_date);
                $('#end_date').val(request_end_date);
                var d_start = moment(request_start_date);
                var d_end = moment(request_end_date);
                cb(d_start, d_end);
            }
   }
});



function expenseTypeChange(select) {
    console.log('type changed');
    const selectedText = select.options[select.selectedIndex].text.replace(/\s+/g, '').toLowerCase();
    const vendorSelect = document.getElementById('exp_vendor_id');

    if (selectedText === 'efsmoneycode') {
    $('.refno').addClass('d-none');
    vendorSelect.disabled = true;

    @if(!empty($vendorsefsname->VENDOR_ID))
        $('#exp_vendor_id option[value="{{ $vendorsefsname->VENDOR_ID }}"]').prop('selected', true);
        $('#exp_vendor_id').trigger('change');
        $('#efsvendor').val('{{ $vendorsefsname->VENDOR_ID }}');
    @endif

} else {
    $('.refno').removeClass('d-none');
    vendorSelect.disabled = false;
    $('#efsvendor').val(''); // Clear efsvendor input
}
}

$('#paid_toggle').change(function () {
                            if ($(this).is(':checked')) {
                                $('#paidDateContainer').show();
                                $('#PAID_DATE').show();

                                $('#checknoContainer').show();
                                $('#CHECK_ID').show();

                                const today = new Date().toISOString().slice(0, 10);
                                $('#PAID_DATE').val(today);
                            } else {
                                $('#paidDateContainer').hide();
                                $('#PAID_DATE').hide();
                                 $('#checknoContainer').hide();
                                $('#CHECK_ID').hide();
                            }
                        });



        function editExpense(expenseId, type,name) {

            $("#expenseModalLabel").text('Edit Expense # '+name);
            $("#vendoraddtab").val('expense');
            $("#vendoraddtype").val('edit');
            $("#vendoraddissueid").val(expenseId);

            var url = "{{ route('assets.expense.edit', ['@', '#']) }}";
            url = url.replace('@', expenseId);
            url = url.replace('#', type);

            $.ajax({
    url: url,
    method: 'GET',
    success: function(data) {
        if (data.success == true) {
            var expense = data.data.expense;
         if (type === "Driver") {
                $("#driver_id").val(expense.DRIVER_ID);
                $("#trailer_id").val("");
                $("#truck_id").val("");
                $("#load_id").val("");
            } else if (type === "Trailer") {
                $("#trailer_id").val(expense.TRAILER_ID);
                $("#driver_id").val("");
                $("#truck_id").val("");
                $("#load_id").val("");
            } else if (type === "Truck") {
                $("#truck_id").val(expense.TRUCK_ID);
                $("#trailer_id").val("");
                $("#driver_id").val("");
                $("#load_id").val("");
            }
            else if (type === "Loads") {
                $("#load_id").val(expense.LOAD_ID);
                $("#trailer_id").val("");
                $("#driver_id").val("");
                $("#truck_id").val("");
            }

            $("#expenseModal").modal("show");
            $("#AP_ID").val(expense.AP_ID);
            $("#exp_vendor_id").val(expense.VENDOR_ID);
            $("#ORIG_AMT").val(expense.ORIG_AMT);
            $("#BILL_NUMBER").val(expense.BILL_NUMBER);
            if (expense.TX_DUE != '' && expense.TX_DUE !=  null && expense.TX_DUE != undefined && expense.TX_DUE != '0000-00-00 00:00:00') {
                var TX_DUE = expense.TX_DUE;
                var TX_DUE_formated = TX_DUE.substring(0, 10);
                $("#TX_DUE").val(TX_DUE_formated);
            }
            $("#TX_REFERENCE").val(expense.TX_REFERENCE);
            $("#exp_TYPE").val(expense.TYPE);

            $("#NOTES").text(expense.NOTES);
            $("#old_exp_document").val(expense.DOCUEMTNS);

            $('#exp_TYPE option[value="' + expense.TYPE + '"]').prop('selected', true);
            $('#exp_TYPE').trigger('change');
            $('#exp_vendor_id option[value="' + expense.VENDOR_ID + '"]').prop('selected', true);
            $('#exp_vendor_id').trigger('change');
            $("#PAID_DATE").val(expense.PAID_DATE);
            $("#CHECK_ID").val(expense.CHECK_ID);


                                if (expense.PAID === 'YES') {
                                    $('#paid_toggle').prop('checked', true);
                                    $('#PAID_DATE').show();
                                    $('#paidDateContainer').show();

                                    $('#CHECK_ID').show();
                                    $('#checknoContainer').show();
                                } else {
                                    $('#paidDateContainer').hide();
                                    $('#paid_toggle').prop('checked', false);
                                    $('#PAID_DATE').hide();
                                    $('#PAID_DATE').val("");

                                    $('#checknoContainer').hide();
                                    $('#CHECK_ID').hide();
                                    $('#CHECK_ID').val("");
                                }
            if(expense.DOCUEMTNS != null || expense.DOCUEMTNS != undefined){
                if (type === "Driver") {
                    var expenurl = '{{asset('driver/expenseDocuments/')}}/'+ expense.DOCUEMTNS;
                } else if (type === "Trailer") {
                    var expenurl = '{{asset('trailers/expenseDocuments/')}}/'+ expense.DOCUEMTNS;
                } else if (type === "Truck") {
                    var expenurl = '{{asset('truck/expenseDocuments/')}}/'+ expense.DOCUEMTNS;
                }
                $("#expdocumentLink").html(`<div class="col-md-6 mt-3"> <a href="${expenurl}" download><i class="fas fa-file"></i> ${expense.DOCUEMTNS}</a> </div>`);
                }


        } else if (data.success == false) {
            toastr.error(data.message);
        } else {
            toastr.error('OOPS ! Something Went Wrong');
        }
    },
    error: function(error) {
        toastr.error(error);
    }
});

        }

        $('#addExpenseForm').submit(function(e) {
            e.preventDefault();
            var form = document.getElementById('addExpenseForm');
            var formData = new FormData(form);

            $.ajax({
                url: "{{ route('assets.expense.update') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success == true) {
                        toastr.success(response.message);
                        $("#expenseModal").modal("hide");
                        table.DataTable().ajax.reload();
                    } else if (response.success == false) {
                        $("#expenseModal").modal("hide");
                        toastr.error(response.message);
                    } else {
                        toastr.error('OOPS! Something Went Wrong.');
                    }
                },
                error: function(error) {
                    $('#DueDateError').text(error.responseJSON.errors.TX_DUE);
                    $('#expenseTypeError').text(error.responseJSON.errors.TYPE);
                    $('#amountError').text(error.responseJSON.errors.ORIG_AMT);
                    $('#vendorError').text(error.responseJSON.errors.VENDOR_ID);
                }
            });
        });



    $('#vendorsaddexp').click(function() {
        if($('#vendoraddtab').val() == 'expense'){
            $('#vendorAddModal').modal('show');
        }
    });
    $('#vendorAddModal').on('show.bs.modal', function () {
        if($('#vendoraddtab').val() == 'expense'){
        $('#expenseModal').modal('hide');
        }
    });
    $('#vendorAddModal').on('hidden.bs.modal', function () {
        if($('#vendoraddtab').val() == 'expense'){
            $('#expenseModal').modal('show');
        }
    });
    $('.closed').click(function() {
        $('#vendorAddModal').modal('hide');
    });

    $('#expVendorListbtn').click(function() {
         $('.vendorlistTable').DataTable().destroy();
        $('#vendorList').val('vendorListExp');
        if($('#vendorList').val() == 'vendorListExp'){
            $('#vendorListModal').modal('show');
            vendorList();
        }
    });

    $('#addExpenseTypebtn').click(function() {
        $('#addExpenseTypeModal').modal('show');


});

$('#addExpenseTypeModal').on('show.bs.modal', function() {

        $('#expenseModal').modal('hide');
    });
$('#addExpenseTypeModal').on('hidden.bs.modal', function() {

        $('#expenseModal').modal('show');

});

$('.closeExpensetype').click(function() {
    $('#addExpenseTypeModal').modal('hide');

});
    $('#vendorListModal').on('show.bs.modal', function () {
        if($('#vendorList').val() == 'vendorListExp'){
            $('#expenseModal').modal('hide');


        }
    });
    $('#vendorListModal').on('hidden.bs.modal', function () {
        if($('#vendorList').val() == 'vendorListExp'){
            $('#expenseModal').modal('show');
        }
    });
    $('.closed').click(function() {
        $('#vendorListModal').modal('hide');
    });

        function addvendors(){

       var NAME = $("#NAME").val();
       var vendorAddModule = $("#module").val();
       var vendorAddId =  $("#vendoraddid").val();
       var vendorAddTab = $("#vendoraddtab").val();
       var vendorAddType =  $("#vendoraddtype").val();
       var vendoraddissueid = '';
       if(vendorAddType == 'edit'){
           vendoraddissueid = $("#vendoraddissueid").val();
       }
       $.ajax({
       url: "{{ route('assets.vendors.addvenors') }}",
       method: 'get',
       data: {NAME,vendorAddModule,vendorAddId,vendorAddTab,vendorAddType,vendoraddissueid,},
       success: function (response) {
           console.log(response);
           $("#NAME").val('');
           $('#vendorAddModal').modal('hide');
           var vendorSelect = $('#VENDOR_ID');
           vendorSelect.empty();
           vendorSelect.append(new Option('Please select', ''));
           $('#VENDOR_ID').val('');
           $.each(response.vendorslist, function(index, vendor) {
               vendorSelect.append(new Option(vendor.NAME, vendor.VENDOR_ID));
           });
           vendorSelect.val(response.vendor_id);
           vendorSelect.trigger('change');

           var exp_vendor_id = $('#exp_vendor_id');
           exp_vendor_id.empty();
           exp_vendor_id.append(new Option('Please select', ''));
           $('#exp_vendor_id').val('');
           $.each(response.vendorslist, function(index, vendor) {
               exp_vendor_id.append(new Option(vendor.NAME, vendor.VENDOR_ID));
           });
           exp_vendor_id.val(response.vendor_id);
           exp_vendor_id.trigger('change');
       },
           error: function (error) {
               console.log(error.responseJSON.errors.NAME[0]);
               $("#VendorNAMEError").html(error.responseJSON.errors.NAME[0]);
           }
        });

   }

   function vendorList() {

        $('#vendorlistTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'csv', 'excel', 'print', 'reset', 'reload'
            ],
            processing: true,
            serverSide: true,
            searching: false,
            ajax: {
                url: '{!! route('assets.vendors.vendorList') !!}',
                type: 'GET',
                data: function(d) {
                    d.formName = 'afscpMcn';
                    d.action = 'search';
                }
            },
            pageLength: 10,
            order: [
                [0, 'desc']
            ],
            columns: [
                { data: 'NAME', name: 'NAME' },
                { data: 'status', name: 'status' },
                { data: 'CREATED_WHEN', name: 'CREATED_WHEN' },
            ],
            initComplete: function(settings, json) {
                $(".dt-buttons").addClass("d-none");
            }
        });
    }

    function addMoneyCode(){
        var x_amount=$("#x_amount").val();
        var x_issueto=$("#x_issueto").val();
        var Notes =$("textarea#money_notes").val();
        var TX_DUE = $("#TX_DUE_date").val();
        var TYPE =  $("#TYPE").val();
        var BAL_ZERO =$("#BAL_ZERO").val();
        var x_CID = $("#x_CID").val();
        var x_PO_NUMBER= $("#x_PO_NUMBER").val();

        if (!x_CID) {
            alert("Please add a valid EFS Vendor before proceeding.");
            return false;
        }

        if(x_amount!="" && x_issueto !="" && Notes!="" )
        {
            $.ajax({
                url:"{{ route('assets.expense.addMoneyCode') }}",
                data:{_token:'{{csrf_token()}}',x_amount,x_issueto,Notes,TX_DUE,TYPE,BAL_ZERO,x_CID,x_PO_NUMBER},
                type:'POST',
                beforeSend:function(){
                    $("#btnAddSchedule").prop('disabled', true);
                    $("#btnAddSchedule").html('<i class="fas fa-spinner fa-spin"></i> Add');
                },

                success:function(res){

                    resetFormFields();
                    $("#btnAddSchedule").prop('disabled', false);
                    $("#btnAddSchedule").html('Add');
                    var data=res;

                    $("#x_amount").val('');
                    $("#x_issueto").val('');
                    $("#x_notes").val('');
                    $("#moneyCodeModal").modal("hide");

                    if (data.status == 'error') {
                            toastr.error(data.faultstring, '', { timeOut: 2000 }); // 3 seconds timeout
                            setTimeout(function() {
                                table.DataTable().ajax.reload();
                            }, 3000);
                        } else if (data.status == 'success') {
                            toastr.success('Expense added Successfully.', '', { timeOut: 2000 }); // 3 seconds timeout
                            setTimeout(function() {
                                table.DataTable().ajax.reload();
                            }, 3000); // Delay reload by 3 seconds
                        }
                },
                error:function(err){
                    alert(err.status);
                }

            });

        }else{
            alert("please fill all fileds");
        }
    }

    function addLoadCash(){
        var amount = $("#amount").val();
        var issue_to = $("#issue_to").val();
        var notes = $("#notes").val();

        if (amount == '' || issue_to == '') {
            toastr.error("Please fill in required fields");
            return false;
        }

        $.ajax({
            url:"{{ route('assets.expense.loadCash') }}",
            type:'POST',
            data:{
                _token:'{{ csrf_token() }}',
                amount: amount,
                issue_to: issue_to,
                notes: notes,
            },
            beforeSend:function(){
                $("#addLoadCashBtn").prop('disabled', true);
                $("#addLoadCashBtn").html('<i class="fas fa-spinner fa-spin"></i> Load Cash');
            },
            success: function (data){
                $("#addLoadCashBtn").prop('disabled', false);
                $("#addLoadCashBtn").html('Load Cash');
                if(data.status){
                    toastr.success(data.message);
                    $("#loadCashModal").modal("hide");
                } else if(data.status == false){
                    toastr.error(data.message);
                } else {
                    toastr.error('OOPS! Something went wrong');
                }
            },
            error: function(error) {
                $("#addLoadCashBtn").prop('disabled', false);
                $("#addLoadCashBtn").html('Load Cash');
                if (error.responseJSON && error.responseJSON.message) {
                    toastr.error(error.responseJSON.message);
                } else if (error.message) {
                    toastr.error(error.message);
                } else {
                    toastr.error('An unexpected error occurred. Please try again.');
                }
            }

        });
    }


function resetFormFields() {
    $("#x_amount").val('');
    $("#x_issueto").val('').trigger('change');
    $("#money_notes").val('');
}


$(document).ready(function() {
    $('.js-example-data-multiple').select2();
    $('#VENDOR_ID').prop('multiple', false).select2();



    $('#addexpensetypeform').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route('assets.expense_type.addExpenseType') }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {

                        if (response.success) {
                            toastr.success(response.message);

                            $('#addexpensetypeform')[0].reset();
                            $('#exp_TYPE').append(`<option value="${response.last_id}">${response.NAME}</option>`);
                            $('#addExpenseTypeModal').modal('hide');
                        }
                    },
                    error: function (response) {
                        let errors = response.responseJSON.errors;


                        $('.text-danger').text('');

                        // Loop through errors and display them
                        $.each(errors, function (key, value) {
                            $('#' + key).siblings('.text-danger').text(value[0]);
                        });

                        // Display error toast notification
                        toastr.error('Please check the form for errors and try again.');
                    }
                });
            });

            // $('#PAID_DATE').hide();
            // $('#paidDateLable').hide();
            // $('input[name="PAID"]').on('change', function() {
            //     if ($('#YES_PAID').is(':checked')) {
            //         $('#PAID_DATE').show();
            //         $('#paidDateLable').show();
            //     } else {
            //         $('#PAID_DATE').hide();
            //         $('#paidDateLable').hide();
            //     }
            // });

});

    document.getElementById('amount').addEventListener('input', function (e) {
        this.value = this.value.replace(/[^0-9.]/g, ''); // Replace anything that is not a number
    });

    function statusChange(element,id) {
            if (element.checked) {
                newStatus = 'YES';
            } else {
                newStatus = 'NO';
            }

            $.ajax({
                type: 'POST',
                url: '{{ route('assets.expense.status') }}',
                data: {
                    _token: '{{ csrf_token() }}',
                    expense_id: id,
                    status: newStatus
                },
                success: function(response) {
                    if (response.success) {
                        console.log('Driver status updated successfully.');
                        table.DataTable().ajax.reload();

                        $('#kt_wrapper').prepend('<h3 id="success-message" style="background-color: rgb(100, 219, 136); color:white; border-radius: 10px; margin: 0 auto; width: 93%;" class="p-5 mb-7"><i class="fa-solid fa-face-smile" style="color: white; font-size: 20px; margin-right: 8px;"></i> </h3>');
                        $('#success-message').text('Driver status updated successfully.').show();

                        $('#error-message').hide();
                        $("#success-message").delay(4000).fadeOut(400, function() {
                            $(this).slideUp(400);
                        });
                    } else {
                        console.error('Failed to update truck status:', response.message);

                        $('#kt_wrapper').prepend('<h3 id="error-message"  style="background-color: rgb(250, 102, 102); color:white; border-radius: 10px; margin: 0 auto; width: 93%;" class="p-5 mb-7"><i class="fa-solid fa-face-surprise" style="color: white; font-size: 20px; margin-right: 8px;"></i> '+response.message+' </h3>');

                        $('#error-message').text('Failed to update truck status:', response.message).show();
                        // Hide success message if shown
                        $('#success-message').hide();
                        $("#error-message").delay(4000).fadeOut(400, function() {
                            $(this).slideUp(400);
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    $('#error-message').text('Error: ' + error).show();
                    $('#success-message').hide();
                }
            });


        };

        $('#paidDateDiv').hide();
            function allPaidStatus(date=''){
                var currentDate = new Date().toISOString().split('T')[0];
                $('#paid_date').val(currentDate);


                var selectedRecords = [];
                $('input.status-checkbox:checked').each(function() {
                    selectedRecords.push($(this).val());  //
                });
                if (selectedRecords.length === 0) {
                    alert('Please select at least one record to update.');
                    return;
                }
                $('#paidDateDiv').toggle();

            }
            function addpaidDate(date,checkno){
                var selectedRecords = [];
                $('input.status-checkbox:checked').each(function() {
                    selectedRecords.push($(this).val());  //
                });
                if (selectedRecords.length === 0) {
                    alert('Please select at least one record to update.');
                    return;
                }

                 $.ajax({
                    url: '{{route('assets.drivers.multiplePaidexpense')}}',
                    type: 'get',
                    data: { selected_records: selectedRecords,paid_date:date,checkno: checkno },
                    success: function(response) {
                        if (response.success) {
                                console.log('Driver status updated successfully.');
                                table.DataTable().ajax.reload();

                                $('#kt_wrapper').prepend('<h3 id="success-message" style="background-color: rgb(100, 219, 136); color:white; border-radius: 10px; margin: 0 auto; width: 93%;" class="p-5 mb-7"><i class="fa-solid fa-face-smile" style="color: white; font-size: 20px; margin-right: 8px;"></i> </h3>');
                                $('#success-message').text('Driver status updated successfully.').show();

                                $('#error-message').hide();
                                $('#paidDateDiv').hide();
                                $("#success-message").delay(4000).fadeOut(400, function() {
                                    $(this).slideUp(400);
                                });

                            }
                    },
                    error: function(xhr, status, error) {
                        alert('An error occurred while updating the status: ' + error);
                    }
                });
            }

            $(document).ready(function() {

    $('#allClickable').change(function() {

        if ($(this).prop('checked')) {
            $('.status-checkbox').prop('checked', true);
        } else {

            $('.status-checkbox').prop('checked', false);
        }
    });


    $('.status-checkbox').change(function() {
        // If all checkboxes are checked, check the "Select All" checkbox
        if ($('.status-checkbox:checked').length === $('.status-checkbox').length) {
            $('#allClickable').prop('checked', true);
        } else {
            // If not all checkboxes are checked, uncheck the "Select All" checkbox
            $('#allClickable').prop('checked', false);
        }
    });
});


$(document).ready(function() {
   
    $('#allClickable').on('change', function() {
     
        let isChecked = $(this).prop('checked');
        
      
        $('#expense-table .status-checkbox').prop('checked', isChecked);

       
        updateTotalAmount();
    });

 
    $('#expense-table').on('change', '.status-checkbox', function() {
      
        updateTotalAmount();
    });

   

    updateTotalAmount();
});


function updateTotalAmount() {
        let totalOrigAmt = 0;

       
        $('#expense-table .status-checkbox:checked').each(function() {
            let row = $(this).closest('tr');

            let amount = row.find('td:eq(1)').text().replace(/[\$,]/g, '').trim();

       
            if (!isNaN(amount) && amount !== '') {
                totalOrigAmt += parseFloat(amount);
            }
        });

      
        let formattedTotalOrigAmt = totalOrigAmt.toLocaleString("en-US", { style: "currency", currency: "USD" });

     
        $('#selectOrigAmt').html(formattedTotalOrigAmt);
    }
    $("#search_form").submit(function name(e) {
            e.preventDefault();           
            
        });

        $("#search").keyup(function name(e) {
            var code = e.keyCode || e.which;
            var searchval = $(this).val();
            if(code == 13 || searchval == ''){
                table.DataTable().ajax.reload();
                return false;
            }         
            
        });
    </script>
@endsection()