@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: 85px;
            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: 95px;
            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: 60px;
            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: 70px;
            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;
        }
   
    </style>
@endsection
<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="#">
                        <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>
                           
                            <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="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>
                            <div class="float-end">
                                    <button type="button" class="btn btn-success btn-sm me-2" data-bs-toggle="modal"
                                        data-bs-target="#moneyCodeModal">
                                        Issue Money Code
                                    </button>
                            </div>
                            
                        </div>

                        <div class="card-body">
                           
                        
                            <div class="float-end">
                                <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-1" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" style="padding: 7px 10px;">
                                       Report
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">                                                                        
                                        <li><a class="dropdown-item" href="{{ route('assets.trucks.allTruckReport') }}" class="btn btn-primary btn-sm me-2">Truck Report</a> </li>
                                        <li><a class="dropdown-item" href="{{ route('assets.trucks.allDriverReport') }}" class="btn btn-primary btn-sm me-2">Driver Report</a> </li>
                                        <li><a class="dropdown-item" href="{{ route('assets.trucks.allPandLReport') }}" class="btn btn-primary btn-sm me-2">Truck P&L Report</a> </li>
                                        
                                    </ul>  
                        
                            <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>
                                        {!! $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">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="AP_ID" id="AP_ID" value="">                                      
                                        <select class="form-control" class="form-select" data-control="select2"
                                            data-hide-search="true" id="exp_vendor_id" name="VENDOR_ID">
                                            <option value="">Please select</option>
                                            @foreach($vendorslist as $key => $vendorslists)
                                            <option value="{{$vendorslists['VENDOR_ID']}}">{{$vendorslists['NAME']}}</option>
                                            @endforeach
                                         

                                        </select>
                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>                                  
                                    </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 expVendorListbtn" id="expVendorListbtn">Vendor
                                                List</a>

                                        </div>
                                    </div>
                                </div>
                                </div>  
                    <div class="row"> 
                            <div class="col-md-6">                               
                                    <label class="col-lg-6 col-form-label fw-semibold fs-6">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>
                                    </div>                                
                            </div>                       
                                     
                                      
                        <div class="col-md-6">                            
                                    <label class="col-lg-6 col-form-label fw-semibold fs-6 ">Reference Number   
                                    </label>
                                    <div class="col-lg-12 fv-row fv-plugins-icon-container">
                                        <input type="text" name="BILL_NUMBER" id="BILL_NUMBER"  value="" class="form-control ">
                                        <div
                                            class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        </div>
                                        <p class="text-danger" id="BILL_NUMBERrror"></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">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>
                            </div>
                        </div>
                        <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="TX_REFERENCE" name="TX_REFERENCE"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </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">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">
                                        <option value="">Please select</option>
                                        @foreach($repairTypes as $key => $repairType)
                                        <option value="{{$key}}" @if(!empty($trailer_issues) && $key==$trailer_issues->Type)
                                            {{'selected'}}@endif>{{$repairType}}</option>
                                        @endforeach

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

                <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>
                <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">
                            <label>Vendor</label>
                            <select class="form-control" class="form-select" data-control="select2"
                                data-hide-search="true" id="x_CID" name="x_CID">
                                <option value="">Please select</option>
                                @foreach($vendorslist as $key => $vendorslists)
                                    <option value="{{$vendorslists['VENDOR_ID']}}">{{$vendorslists['NAME']}}</option>
                                @endforeach
                            </select>
                        </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>
                            <!-- <input name="x_issueto" id="x_issueto" class="form-control" value=""> -->
                            <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->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>


@endsection()
@section('script')
    {!! $dataTable->scripts() !!}
    <script>
        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();
        });

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

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

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

            table.DataTable().ajax.reload();
            // 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('');
        $('#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 changeExport(){
          var value =   $("#downloadOptions").val();
           if(value != "" ){           
             console.log("inside");
            $('#downloadOptions option[value=""]').prop('selected', true);
            $('#downloadOptions').trigger('change');           
           }
           console.log("outside",value);

        }

        function editExpense(expenseId, type) {          
            $("#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("");
            } else if (type === "Trailer") {
                $("#trailer_id").val(expense.TRAILER_ID);
                $("#driver_id").val("");
                $("#truck_id").val("");
            } else if (type === "Truck") {
                $("#truck_id").val(expense.TRUCK_ID);
                $("#trailer_id").val("");
                $("#driver_id").val("");
            }
            
            $("#expenseModal").modal("show");
            $("#AP_ID").val(expense.AP_ID);
            $("#exp_vendor_id").val(expense.VENDOR_ID);
            $("#ORIG_AMT").val(parseFloat(expense.ORIG_AMT).toFixed(2));
            $("#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_vendor_id option[value="' + expense.VENDOR_ID + '"]').prop('selected', true);
            $('#exp_vendor_id').trigger('change');
            $('#exp_TYPE option[value="' + expense.TYPE + '"]').prop('selected', true);
            $('#exp_TYPE').trigger('change');
            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) {
                        toastr.error(response.message);
                    } else {
                        toastr.error('OOPS! Something Went Wrong.');
                    }
                },
                error: function(error) {
                    $('#SUMMARYError').text(error.responseJSON.errors.SUMMARY[0]);
                }
            });
        });


        
    $('#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();
        }
    });
    $('#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_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){
                    $("#btnAddSchedule").prop('disabled', false);
                    $("#btnAddSchedule").html('Add');
                    var data=res;
                    console.log(data);
                    console.log(data.status);
                    $("#x_amount").val('');
                    $("#x_issueto").val('');
                    $("#x_notes").val('');
                    $("#moneyCodeModal").modal("hide");
                    if(data.error)
                    {
                        toastr.error(data.faultstring);
                    } else if(data.status == 'success'){
                        toastr.success('Expense added Successfully.');
                    }
                    location.reload();
                },
                error:function(err){
                    alert(err.status);
                }

            });

        }else{
            alert("please fill all fileds");
        }
}
         
$(document).ready(function() {
    $('.js-example-data-multiple').select2();
    $('#VENDOR_ID').prop('multiple', false).select2();
   
});
    </script>
@endsection()