@extends('layouts.master')
@section('style')
    <style>
        .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: 68px;
        height: 20px;
        /* padding: 3px; */
        margin: 0 10px 10px 20px;
        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: 70px;
        position: relative;
        display: block;
        height: 28px;
        font-size: 14px;
        text-transform: uppercase;
        background: #eceeef;
        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: #aaaaaa;
        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: #1b84ff;
        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: 42px;
        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">
                                <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-8"></div>
                                <div class="mb-10">
                                        <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>
                                           @php
                                                $startDate = $hasVendor ? null : null;
                                                $endDate = $hasVendor ? null : null;
                                            @endphp

                                            <!-- <input type="hidden" class="form-control sm" value="{{date('Y-m-d')}}" name="start_date" id="start_date">
                                            <input type="hidden" class="form-control sm" value="{{date('Y-m-d')}}" name="end_date" id="end_date"> -->
                                            <input type="hidden" class="form-control sm" value="{{ $startDate }}" name="start_date" id="start_date">
                                            <input type="hidden" class="form-control sm" value="{{ $endDate }}" name="end_date" id="end_date">
                                        </div>
                            </div>

                               <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Type</label>
                                    <select class="form-select form-control form-control-solid" name="exptype" id="exptype" data-control="select2" data-hide-search="true">
                                        <option value="">Please select</option>
                                        @foreach($expenseTypes as $key => $expenseType)
                                            <option value="{{$expenseType->EXPID}}" {{ old('exptype') == $expenseType->EXPID ? 'selected' : '' }}>
                                                {{$expenseType->NAME}}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-5">
                                    <label class="fs-6 form-label fw-bold text-gray-900">Paid Status</label>
                                    <select class="form-select form-control form-control-solid" name="paid_status" id="paid_status" data-control="select2" data-hide-search="true">
                                        <option value="">Please select</option>
                                        <option value="YES">YES</option>
                                        <option value="NO">NO</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>

                            @php
                                    $expires_30_day = now()->addDays(30)->format('Y-m-d');
                                    $expired = now()->format('Y-m-d');
                                @endphp

                                <a href="?mode=past_30_day" type="button" class="btn btn-success btn-lg btn-block {{ request()->get('mode') == 'past_30_day' ? 'active' : '' }}" name="past_30_day" id="expires_30_day">
                                Open 30 Days+
                                </a>
                                <a href="?mode=past_60_day" type="button" class="btn mt-3 mb-3 btn-warning btn-lg btn-block {{ request()->get('mode') == 'past_60_day' ? 'active' : '' }}" name="past_60_day" id="expires_30_day">
                                Open 60 Days+
                                </a>
                                <a href="?mode=past_90_day" type="button" class="btn btn-danger btn-lg btn-block {{ request()->get('mode') == 'past_90_day' ? 'active' : '' }}" name="past_90_day" id="expires_30_day">
                                Open 90 Days+
                                </a>
<!--
                                <a href="?mode=expired&date={{ $expired }}" type="button" class="btn btn-danger btn-lg btn-block mt-5 {{ request()->get('mode') == 'expired' ? 'active' : '' }}" name="expired" id="expired">
                                    Expired
                                </a> -->
                        </div>
                    </form>
                </div>
                <div class="flex-lg-row-fluid">
                    <div class="d-flex flex-wrap flex-stack mb-5">
                        <div class="d-flex flex-wrap align-items-center my-1">
                            <h3 class="fw-bold me-5 my-1">Expense
                            </h3>
                             @if(getAuthMemberId() == 28)
                                <div class="float-end">
                                        <button type="button" class="btn btn-success btn-sm me-2 d-none" data-bs-toggle="modal"
                                            data-bs-target="#moneyCodeModal">
                                            Issue Money Code
                                        </button>
                                </div>
                             @endif
                             <div class="float-end">
                                <button type="button" class="btn btn-success btn-sm me-2 d-none" onclick="showLoadCashModal();">
                                    Load Cash on Card
                                </button>
                            </div>
                        </div>

                        <div class="card-body">
                             <button type="button" class="btn btn-primary btn-sm float-end me-2" onclick="window.open('{{ route('expense_type.index') }}')" >Expense Types </button>

                            <div class="float-end me-2">
                                <select name="downloadOptions" id="downloadOptions"
                                    class="form-select bg-primary form-select-solid form-select-sm"
                                    data-control="select2" data-hide-search="true" data-placeholder="Export">
                                    <option value="">Export</option>
                                    <option value="excel">Excel</option>
                                    <option value="csv">CSV</option>
                                    <option value="print">Print</option>
                                    <option value="reset">Reset</option>
                                    <option value="reload">Reload</option>
                                </select>
                           <!--  </div>
                            <a href="{{route('assets.trucks.allTruckReport')}}" class="btn btn-primary p-2 float-end me-1" style="font-size: 13px;">Truck Report</a>
                            <a href="{{route('assets.trucks.allDriverReport')}}" class="btn btn-primary p-2 float-end me-1" style="font-size: 13px;">Driver Report</a>   -->
                            </div>
                            <button class="btn btn-primary dropdown-toggle float-end me-2" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 7px 10px;">
                                       <i class="fa-solid fa-chart-simple"></i>Reports
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                        <li><a class="dropdown-item" target="_blank" href="{{ route('assets.trucks.allTruckReport') }}">Truck Report</a> </li>
                                        <li><a class="dropdown-item" target="_blank" href="{{ route('assets.trucks.allDriverReport') }}">Driver Report</a> </li>
                                        <!-- <li><a class="dropdown-item" target="_blank" href="{{ route('assets.trucks.allPandLReport') }}">Truck P&L Report</a> </li> -->
                                        <li><a class="dropdown-item" target="_blank" href="{{route('assets.loads.allLoadReport')}}">Load P&L Report</a>  </li>
                                        <li><a class="dropdown-item" target="_blank" href="{{route('assets.loads.allLoadsMonthReport')}}?start_date={{ date('Y-m-d', strtotime('first day of this month')) }}&end_date={{ date('Y-m-d', strtotime('last day of this month')) }}">P&L Monthly Report</a>  </li>
                                        <li><a class="dropdown-item" target="_blank" href="{{route('assets.loads.allOfficeExpenseReport')}}?start_date={{ date('Y-m-d', strtotime('first day of this month')) }}&end_date={{ date('Y-m-d', strtotime('last day of this month')) }}">Office Expense</a>  </li>
                                    </ul>
                                    <button type="button" class="btn btn-success btn-sm float-end me-2" onclick="addExpenses()"  data-bs-toggle="modal" data-bs-target="#expenseModal" id="addExpense">Quick Add </button>
                                    @if(getAuthMemberId() == 28)
                                        <a href="{{ route('assets.drivers.openDriverPayDataTableNew') }}" class="btn btn-success btn-sm float-end me-2">Driver Pay </a>
                                    @else
                                        <a href="{{ route('assets.drivers.openDriverDataTable') }}" class="btn btn-success btn-sm float-end me-2">Driver Pay </a>
                                    @endif



                            <div class="float-end">

                                <!-- <a href="{{ route('assets.trailers.add') }}" class="btn btn-primary btn-sm me-2">Add</a> -->
                            </div>

                        </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 id="totalOrigAmt" class="mb-3 font-weight-bold"></div> -->
                                    <span id="total_income" class="font-weight-bold"></span>
                                    <br>

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


{{-- <div class="modal fade" id="addExpenseModal" tabindex="-1" aria-labelledby="addExpenseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="addExpenseModalLabel">Add Driver Expense</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <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="AP_ID" id="AP_ID" value="">
                                    <input type="hidden" name="opration" id="opration" value="">
                                    <input type="hidden" id="efsvendor" name="efsvendor" value="">
                                    <input type="hidden" id="loadexpenstatus" name="loadexpenstatus" value="{{ request()->get('addExpense') }}">
                                    <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">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <label class="col-lg-3 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 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 required">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_REFERENCError"></p>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                    <input type="hidden" class="form-control" id="truck" name="truck"
                                        value="{{request()->route('driverId')}}" readonly>
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                </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">Is Paid?</label>
                                    <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 class="col-md-6" id="paidDateContainer">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id='paidDateLable' >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>
                        <div class="row">
                            <div class="col-md-12">
                                <label class="col-lg-6 col-form-label fw-semibold fs-6">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>

                        <hr class="mt-5">

                        <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="addexpensebtn" class="btn btn-primary">submit</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
            </div>
            </div>
        </form>
        </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" name="opration" id="opration" 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 showPicker" >
                                <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">

                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0">Is Paid?</label>
                            <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 class="col-md-6" id="paidDateContainer">
                        <label class="col-lg-6 col-form-label fw-semibold fs-6 pt-0" id='paidDateLable' >Paid Date</label>
                        <div class="col-lg-12 fv-row fv-plugins-icon-container">
                            <input type="date" class="form-control showPicker" 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="moneyCodeModal" 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">Issue Money Code</h5>
                </div>
                <form method="post" id="addVendorForm">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">

                            <input type="hidden" id="x_CID" name="x_CID" value="{{!empty($vendorsefsname->VENDOR_ID) ? $vendorsefsname->VENDOR_ID : ''}}" >
                        </div>

                        <div class="form-group">
                            <label>Amount</label>
                            <input name="x_amount" id="x_amount" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>Issue To</label>

                            <select class="form-control" class="form-select" data-control="select2"
                                data-hide-search="true" id="x_issueto" name="x_issueto">
                                <option value="">Please select</option>
                                @foreach($issueTos as $key => $issueTo)
                                    <option value="{{$issueTo['DRIVER_ID']}}">{{$issueTo['FIRST_NAME'] .' '.$issueTo['FIRST_NAME']}}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label>Notes</label>
                            <textarea data-field="money_notes" name="money_notes" id="money_notes" cols="35" rows="4" class="form-control"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <input type="hidden" name="TX_DUE_date" id="TX_DUE_date" class="form-control col-md-8" value="{{ date('Y-m-d H:i:s') }}">
                        <input type="hidden" name="TYPE" id="TYPE" class="form-control col-md-8" value="{{$expenseType_id->EXPID ?? ''}}">
                        <input type="hidden" name="BAL_ZERO" id="BAL_ZERO" class="form-control col-md-8" value="True">
                        <input type="hidden" name="x_PO_NUMBER" id="x_PO_NUMBER" class="form-control col-md-8" value="">
                        <button type="button" class="btn btn-secondary closed" data-dismiss="modal" onclick=" $('#moneyCodeModal').modal('hide');">Close</button>
                        <button type="button" class="btn btn-primary" id="btnAddSchedule" onclick=addMoneyCode()>Add</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>

<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>


<div class="row justify-content-center">
    <div class="col-md-10">
        <div class="card shadow-sm">
            <div class="card-body">
                <div class="container">
                    <h3 class="text-center" id="chartLable">Expense by Category </h3>
                    <hr>
                    <div id="expenseBarChart" style="height: 370px; width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection()
@section('script')
<script>
        const urlParams = new URLSearchParams(window.location.search);
        const mode = urlParams.get('mode');
        const date = urlParams.get('date');
    $(document).ready(function(){
        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') : '' }}';
        var request_type = '{{ !empty(request()->get('Type')) ? request()->get('Type') : '' }}';
        var request_paid_status = '{{ !empty(request()->get('paid_status')) ? request()->get('paid_status') : '' }}';
        if(request_start_date != ''){
            $('#start_date').val(request_start_date);
        }
        if(request_end_date != ''){
            $('#end_date').val(request_end_date);
        }
        if(request_type != ''){
            $('#exptype').val(request_type);
            $('#exptype').trigger('change');
        }
        if(request_start_date != ''){
            $('#paid_status').val(request_start_date);
            $('#paid_status').trigger('change');
        }
    });
</script>
    {!! $dataTable->scripts() !!}

    <script>
// Define the addData function first

window.onload = function() {
var dataPoints = [];

var chart = new CanvasJS.Chart("expenseBarChart", {
    animationEnabled: true,
    theme: "light2",
    axisY: {
        title: "Amount",
        titleFontSize: 24,
        includeZero: true,
        labelFormatter: function(e) {
            return "$" + CanvasJS.formatNumber(e.value); // Prepend $ to each y-axis label
        }
    },
    data: [{
        type: "column",
        yValueFormatString: "#,###",
        dataPoints: dataPoints
    }]
});

// Initial chart load with null parameters
addData(null, $('#start_date').val(), $('#end_date').val(), $('#exptype').val(),null,$('#paid_status').val(),mode, chart, dataPoints);

$('#submit').on('click', function(event) {
    event.preventDefault(); // Prevent default form submission

    // Retrieve values from form fields
    var search = $('#search').val();
    var start_date = $('#start_date').val();
    var end_date = $('#end_date').val();
    var reptype = $('#exptype').val();
    var status = $('#STATUS').val(); // Ensure this is defined
    var paid_status = $('#paid_status').val();

    // Reload the DataTable (if applicable)
    if (typeof table !== 'undefined' && table.DataTable) {
        table.DataTable().ajax.reload();
    }

    // Update the chart data
    addData(search, start_date, end_date, reptype, status,paid_status,mode, chart, dataPoints);
});
};





        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.exptype = $('#exptype').val();
            data.paid_status = $('#paid_status').val();
            data.mode = mode;
            data.date = date;
        });

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

        $('#downloadOptions').on('change', function() {
            var downloadOptions = this.value;
            $(".buttons-" + downloadOptions).click();
            var datatableId = 'expense-table';
            downloadDataTable(downloadOptions, datatableId);
        });

        $('#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');
            $('#paid_status').val('').trigger('change')
            $('#STATUS').val('').trigger('change');

            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') : '' }}';
            var request_type = '{{ !empty(request()->get('Type')) ? request()->get('Type') : '' }}';

            if(request_start_date != '' || request_end_date != '' || request_type != ''){
                var route = '{{ route('assets.expense.index') }}';
                var newUrl = route.split('?')[0];
                window.location.href = newUrl;
            } else{
                table.DataTable().ajax.reload();
                // addData(null, null, null, null, null, chart, dataPoints);
            }
            var mode = '{{ !empty(request()->get('mode')) ? request()->get('mode') : '' }}';
            if(mode != ''){
                var route = '{{ route('assets.expense.index') }}';
                var newUrl = route.split('?')[0];
                window.location.href = newUrl;
            } else{
                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);

            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() {
    // 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 {
        // Set up moment.js for date handling
        // var start = moment();
        // var end = moment();

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

        // // 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'));
            }

            $('#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 addData(search, startDate, endDate, reptype, status,paid_status,mode, chart, dataPoints) {


    function formatDate(dateString) {
        const date = new Date(dateString);
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const year = date.getFullYear();
        return `${month}/${day}/${year}`;
    }


    $('#chartLable').text('Expense by Category');
    let labelParts = [];


    if (search) {
        labelParts.push(search);
    }

    if (startDate) {
        const formattedStartDate = formatDate(startDate);

        if (labelParts.length > 0) {
            labelParts.push(`/${formattedStartDate}`);
        } else {
            labelParts.push(formattedStartDate);
        }
    }


    if (endDate) {

        const formattedEndDate = formatDate(endDate);

        if (labelParts.length > 0) {
            labelParts.push(`- ${formattedEndDate}`);
        } else {
            labelParts.push(formattedEndDate);
        }
    }

    if (reptype) {
        var optionText = $('#exptype option[value="' + reptype + '"]').text();

        if (labelParts.length > 0) {
            labelParts.push(`/${optionText}`);
        } else {
            labelParts.push(optionText);
        }
    }



    dataPoints.length = 0;

    $.ajax({
        url: '{{ route('assets.expense.chart_data') }}',
        type: 'GET',
        data: {
            search: search,
            start_date: startDate,
            end_date: endDate,
            exptype: reptype,
            status: status,
            paid_status:paid_status,
            mode:mode
        },
        success: function(response) {

            if (Array.isArray(response)) {
                for (var i = 0; i < response.length; i++) {
                    console.log(response[i]);
                    dataPoints.push({
                        label: `${response[i].name}`,
                        y:  (parseFloat(response[i].amount))
                    });
                }
                chart.render();

                if (labelParts.length > 0) {
                    $('#chartLable').append(' (' + labelParts.join(' ') + ' )');
                }

            } else {
                console.error("Unexpected response format:", response);
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", status, error);
        }
    });

}


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
}
}

        function changeExport(){
          var value =   $("#downloadOptions").val();
           if(value != "" ){
             console.log("inside");
            $('#downloadOptions option[value=""]').prop('selected', true);
            $('#downloadOptions').trigger('change');
           }
           console.log("outside",value);

        }

        function addExpenses(){
            $("#vendoraddtab").val('expense');
            $("#vendoraddtype").val('add');
            $("#issueSubmitbtn").text("Add");
            $("#expenseModalLabel").text('Add Expense');
            $("#ORIG_AMT").val("");
            $("#BILL_NUMBER").val("");
            $("#TX_DUE").val("");
            $("#TX_REFERENCE").val("");
            $("#repair_issue").val("");
            $("#AP_ID").val("");
            $("#NOTES").text("");
            $("#exp_TYPE").val("");
            $("#opration").val('add');
            $("#old_exp_document").val("");
            $('#exp_vendor_id').val('').trigger('change');
            $('#repair_issue').val(null).trigger('change');
            $('#exp_TYPE').val(null).trigger('change');
            $("#expdocumentLink a").css('display','none');
            $('#paid_toggle').prop('checked', false);
            $('#paidDateContainer').hide();
        }

        $('#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) {

            $("#vendoraddtab").val('expense');
            $("#opration").val('edit');
            $("#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;
                } else {
                    var expenurl = '{{asset('expense/')}}/'+ 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('');
}

function showLoadCashModal() {
    $("#amount").val('');
    $("#issue_to").val('').trigger('change');
    $("#notes").val('');
    $('#loadCashModal').modal('show');
}

$(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');
                        } else if(response.success == false){
                            toastr.error(response.message);
                        } else {
                            toastr.error("OOPS! Something went wrong");
                        }
                    },
                    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.');
                    }
                });
            });

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

});

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

    function getTotalIncome(){
            $.ajax({
                type: "GET",
                url: "{{ route('assets.expense.totalincome') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    search : $("#search").val(),
                    start_date:$("#start_date").val(),
                    end_date:$("#end_date").val(),
                    exptype:$("#exptype").val(),
                    paid_status:$("#paid_status").val(),



                },
                success: function(response) {
                    var formattedTotalIncome = response.toLocaleString("en-US", { style: "currency", currency: "USD" });
                    $("#total_income").html("<b>Total Amount : $" + formattedTotalIncome + "</b>");
                },
                error: function(xhr, status, error) {
                    $("#success-message").hide();
                }
            });
        }
        $("#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;
            }         
            
        });
        $('.showPicker').on('click', function () {
    this.showPicker();
});

function downloadDataTable(option, datatableId) {
           
           switch (option) {
               case 'excel':
                   $('#' + datatableId).DataTable().buttons('.buttons-excel').trigger();
                   break;
               case 'csv':
                   $('#' + datatableId).DataTable().buttons('.buttons-csv').trigger();
                   break;
               case 'print':
                   $('#' + datatableId).DataTable().buttons('.buttons-print').trigger();
                   break;
               case 'reset':
                   $('#' + datatableId).DataTable().buttons('.buttons-reset').trigger();
                   break;
               case 'reload':
                   $('#' + datatableId).DataTable().buttons('.buttons-reload').trigger();
                   break;
               default:
                   break;
           }
       }
    </script>
@endsection()