@extends('layouts.master')

@section('style')
    <style>
        .table-responsive{
            max-height: 500px;
        }

        .box{
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 2px solid #ccc;
        border-radius: 8px;
       }
       .cnt{font-size:15px;color:#1b84ff;}
       h6{border-bottom: 1px solid #eee;
        padding-bottom: 5px;}

    </style>
@endsection()

@section('content')
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div id="kt_content_container" class="container-xxl">
        <div class="row g-5 g-xl-10">
        <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                            <h3 class="text-gray-900 fw-bold fs-3">
                            <i class="fa-solid fa-dolly" style="font-size: 20px; !important"></i>Loads <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.loads.index')}}?status=All">{{$totalLoad}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                        <h6 class="text-gray-900 fw-bold  ">Open Load: <a href="{{route('assets.loads.index')}}?status=Open" class="cnt">{{$totalOpenLoad}}</a></h6>

                        <h6 class="text-gray-900 fw-bold ">Delivered Load:  <a href="{{route('assets.loads.index')}}?status=Delivered" class="cnt">{{$totalDeliveredLoad}}</a></h6>
                        </div>
                    </div>
                </span>
            </div>
            <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                            <h3 class="text-gray-900 fw-bold fs-3">
                            <i class="fa-solid fa-user" style="font-size: 20px; !important"></i> Drivers <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.drivers.index')}}?status=All">{{$driverCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                        <h6 class="text-gray-900 fw-bold  ">Active: <a href="{{route('assets.drivers.index')}}" class="cnt">{{$activeDriver}}</a></h6>

                        <h6 class="text-gray-900 fw-bold ">Inactive:  <a href="{{route('assets.drivers.index')}}?status=INACTIVE" class="cnt">{{$inActiveDriver}}</a></h6>
                        </div>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-truck" style="font-size: 20px; !important"></i> Trucks <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.trucks.index')}}?status=All">{{$truckCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                            <h6 class="text-gray-900 fw-bold ">Active: <a href="{{route('assets.trucks.index')}}" class="cnt">{{$activeTruck}}</a> </h6>

                        <h6 class="text-gray-900 fw-bold ">Inactive: <a href="{{route('assets.trucks.index')}}?status=INACTIVE" class="cnt">{{$inActiveTruck}}</a></h6>
                        </div>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span  class="card card-xl-stretch mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-trailer" style="font-size: 20px; !important"></i> Trailers <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.trailers.index')}}?status=All">{{$trailerCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                        <h6 class="text-gray-900 fw-bold">Active:<a href="{{route('assets.trailers.index')}}" class="cnt">{{$activeTrailer}}</a> </h6>

                        <h6 class="text-gray-900 fw-bold ">Inactive: <a href="{{route('assets.trailers.index')}}?status=INACTIVE" class="cnt">{{$inActiveTrailer}}</a></h6>
                        </div>
                    </div>
                </span>
            </div>


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


            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-magnifying-glass-dollar" style="font-size: 20px; !important"></i> Profit <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{ route('assets.trucks.allPandLReport') }}" class="cnt" style="color: {{ $gtotal > 0 ? 'green' : ($gtotal < 0 ? 'red' : 'black') }}; margin: 0;"> $({{ number_format($gtotal,2) }}) </a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                            <h6 class="text-gray-900 fw-bold ">Expense : <a href="{{route('assets.expense.index')}}?status=All"  class="cnt">({{$expenseCount}})</a> Amount: {{number_format($expensesTotal,2)}} </h6>
                            <!-- <h6 class="text-gray-900 fw-bold ">Revenue Amount: {{number_format($loadAmount,2)}} </h6> -->

                                <!-- <h6 class="text-gray-900 fw-bold">Profit/Loss: </h6> -->
                        </div>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                            <h3 class="text-gray-900 fw-bold fs-3">
                            <i class="fa-solid fa-screwdriver-wrench" style="font-size: 20px; !important"></i> Amount
                                <span>${{ number_format($issuesSum, 2) }}</span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                            <h6 class="text-gray-900 fw-bold">
                            Repair: <a href="{{route('assets.repair.index')}}?status=All">({{$issuesCount}})</a>

                            </h6>


                                <h6 class="text-gray-900 fw-bold ">Open: <a href="{{route('assets.repair.index')}}?status=Open" class="cnt" >({{$openIssuesCount}})</a> Amount: ${{ number_format($openIssuesSum, 2) }} </h6>

                        <h6 class="text-gray-900 fw-bold ">Closed: <a href="{{route('assets.repair.index')}}?status=Closed" class="cnt" >({{$closedIssuesCount}})</a>  Amount: ${{ number_format($closedIssuesSum, 2) }}</h6>
                        </div>
                    </div>
                </span>
            </div>

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3 ">
                        <i class="fa-solid fa-truck" style="font-size: 20px; !important"></i> Dispatch Trucks <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.trucksBoard.index')}}?DISPATCH_STATUS=All">{{$totalDISPATCHT}}</a></span>
                            </h3>
                        </div>
                        <div class="mb-4 mt-2">
                            <h6 class="text-gray-900 fw-bold ">Booked: <a href="{{route('assets.trucksBoard.index')}}?DISPATCH_STATUS=Booked">({{$totalBookedTrucks }})</a></h6>

                        <h6 class="text-gray-900 fw-bold ">Available: <a href="{{route('assets.trucksBoard.index')}}?DISPATCH_STATUS=Dispatch">({{$totalDispatchTrucks }})</a></h6>
                        </div>

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

            <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-user" style="font-size: 20px; !important"></i> Customers <i class="fa fa-arrow-circle-right"></i>
                         <span><a href="{{route('assets.customers.index')}}?status=All">{{$customerCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                            <h6 class="text-gray-900 fw-bold "></h6>

                        <h6 class="text-gray-900 fw-bold"></h6>
                        </div>
                    </div>
                </span>
            </div>


            <!-- <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body" style="background-color: #cef4cb">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3 mb-4">
                                Total Reminders <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.vendors.index')}}?status=All">{{$vendorCount}}</a></span>
                            </h3>
                        </div>

                        <div class="pt-5 mb-5">
                            <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-7">Active Vendor: <a href="{{route('assets.vendors.index')}}">({{$activeVendor}})</a></h6>
                        </div>
                        <h6 class="text-gray-900 fw-bold fs-1x lh-0 mt-7">Inactive Vendor: <a href="{{route('assets.vendors.index')}}?status=True">({{$inActiveVendor}})</a></h6>
                    </div>
                </span>
            </div> -->
        </div>
        <div class="row">
        <div class="col-xl-3">
                <span class="card card-xl-stretch mb-5 mb-xl-8 theme-dark-bg-body box">
                    <div class="card-body d-flex flex-column">
                        <div class="d-flex flex-column">
                        <h3 class="text-gray-900 fw-bold fs-3">
                        <i class="fa-solid fa-industry" style="font-size: 20px; !important"></i> Vendors <i class="fa fa-arrow-circle-right"></i>
                                <span><a href="{{route('assets.vendors.index')}}?status=All">{{$vendorCount}}</a></span>
                            </h3>
                        </div>

                        <div class="mb-4 mt-2">
                            <h6 class="text-gray-900 fw-bold ">Active: <a href="{{route('assets.vendors.index')}}" class="cnt">{{$activeVendor}}</a></h6>

                        <h6 class="text-gray-900 fw-bold ">Inactive: <a href="{{route('assets.vendors.index')}}?status=True" class="cnt">{{$inActiveVendor}}</a></h6>
                        </div>
                    </div>
                </span>
            </div>
        </div>
    </div>
<div class="container">

<button type="button" id="current_location" class="btn btn-success mt-5">Current Location</button>
<button type="button" id="delivery_location" class="btn btn-danger mt-5">Delivery Location</button>
<div id="map" style="width: 100%; height: 400px;" class="mt-2"></div>

 <div class="row">
        <div class="col-md-6">
        <div class="card-body pt-5">
                        <div class="card card-flush h-xl-100">
                            <div class="card-header">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">6 Month Gallons Report</span>
                                </h3>
                            </div>
                            <div class="chart">
                                <canvas id="gallons" width="400" height="200"></canvas>
                            </div>
                        </div>
             </div>

        </div>
        <div class="col-md-6">
        <div class="card-body pt-5">
                        <div class="card card-flush h-xl-100">
                            <div class="card-header">
                                <h3 class="card-title align-items-start flex-column">
                                    <span class="card-label fw-bold text-gray-800">MTD Gallons by State</span>
                                </h3>
                            </div>
                            <div class="chart">
                                <canvas id="gallonsByState" width="400" height="200"></canvas>
                            </div>
                        </div>
                    </div>
        </div>
    </div>
    <div class="row">
    <div class="col-md-6">
            <div class="card-body pt-5">
                <div class="card card-flush h-xl-100">
                    <div class="card-header">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Current Month Expense Type</span>
                        </h3>
                    </div>
                    <div class="chart">
                        <canvas id="dashboardexpenseBarChart" width="400" height="200"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card-body pt-5">
                <div class="card card-flush h-xl-100">
                    <div class="card-header" style="min-height: 25px; margin-top: 18px;">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Open Repair</span>
                        </h3>
                        <a href="{{route('assets.repair.index')}}">View All</a>

                    </div>
                    <div style="margin: 0px 10px;">
                         {!! $dataTable->table() !!}
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
    <div class="col-md-6">
            <div class="card-body pt-5">
                <div class="card card-flush h-xl-100">
                    <div class="card-header ">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-gray-800">Open Loads</span>
                        </h3>
                    </div>
                    <div style="margin: 0px 10px;">
                    <table id="allOpenLoadList"  class="table table-striped table-row-bordered table-row-dashed gy-4 align-middle fw-bold dataTable no-footer">
                            <thead>
                                <tr class="thead-bg-color">
                                    <th class="fs-7 text-gray-500 text-uppercase">CUSTOMER</th>
                                    <th class="fs-7 text-gray-500 text-uppercase">REF#</th>
                                    <th class="fs-7 text-gray-500 text-uppercase">PICKUP</th>
                                    <th class="fs-7 text-gray-500 text-uppercase">DELEVERY
                                    </th>
                                    <th class="fs-7 text-gray-500 text-uppercase">TRUCK#
                                    </th>


                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
   </div>
</div>

</div>

<div class="modal fade" id="repairLogModal" 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="repairLogModalLabel">Edit Repair Issue Id - </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <div class="row">
                    @php
                    $modalId = 'addIssueForm';
                    if(!empty($truckRepair->ISSUE_ID)){
                    $modalId = 'updateIssuForm';
                    }
                    @endphp

                    <form method="post" id="addIssueForm" enctype="multipart/form-data">
                        @csrf
                        <div class="col-md-12">
                            <div class="row mb-6">
                                <label class="col-lg-2 col-form-label fw-semibold pe-0 ">Description<span
                                        style="color:red">*</span>
                                </label>
                                <div class="col-lg-10 fv-row fv-plugins-icon-container ps-0">
                                    <input type="text" name="SUMMARY" id="SUMMARY"
                                        value=""
                                        class="form-control">
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                    </div>
                                    <p class="text-danger" id="SUMMARYError"></p>
                                </div>
                            </div>
                        </div>
                </div>
                <div class="row">
                                                <div class="col-md-5">
                                                        <div class="row mb-6">
                                                        <label class="col-lg-5 col-form-label fw-semibold fs-6 pt-0 pe-0">Vendor </label>
                                                                <div class="col-lg-7 fv-row fv-plugins-icon-container ps-0">
                                                                    <select class="form-control" class="form-select" data-control="select2"
                                                                        data-hide-search="true" id="VENDOR_ID" name="VENDOR_ID">
                                                                        <option value="">Please select</option>
                                                                        @foreach($vendorslist as $vendor)
                                                                        <option value="{{$vendor['VENDOR_ID']}}">{{$vendor['NAME']}}</option>
                                                                        @endforeach
                                                                    </select>
                                                                    <div
                                                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                                                    </div>
                                                                </div>
                                                        </div>
                                                    </div>
                                                        <div class="col-md-2">
                                                            <div class="">
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-primary btn-sm vendorAdd" id="vendorsadd">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 class="col-md-5">

                                                                <div class="row mb-6">
                                                                <label class="col-lg-4 col-form-label fw-semibold fs-6 pt-0">Status </label>
                                                                    <div class="col-lg-8 fv-row fv-plugins-icon-container">

                                                                        <select class="form-select" data-control="select2" data-hide-search="true"
                                                                            data-placeholder="Select a status" id="RepairStatus" name="RepairStatus">
                                                                            <option value="Open"
                                                                                >
                                                                                Open</option>
                                                                            <option value="Closed"
                                                                              >
                                                                                Closed</option>
                                                                        </select>
                                                                        <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-5">
                        <div class="row mb-6">
                            <label class="col-lg-4 col-form-label fw-semibold fs-6 pt-0 required">Repair Type</label>
                            <div class="col-lg-8 fv-row fv-plugins-icon-container ps-0">
                                <select class="form-control" class="form-select" data-control="select2"
                                        data-hide-search="true" id="Type" name="Type">
                                        <option value="">Please select</option>
                                        @foreach($repairTypes as $key => $repairType)

                                        <option value="{{$repairType->REPID}}">{{$repairType->NAME}}</option>
                                        @endforeach
                                </select>
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                                <p class="text-danger" id="REPAIRTypeError"></p>
                            </div>
                        </div>
                    </div>
                        <div class="col-md-2 mt-1">
                        <button type="button" class="btn btn-primary btn-sm" id="addRepairTypebtn">Add Type</button>
                        </div>
                    <div class="col-md-4">
                        <div class="row mb-6">
                            <label class="col-lg-3 col-form-label fw-semibold fs-6 required">Date</label>
                            <div class="col-lg-9 fv-row fv-plugins-icon-container">
                                <input type="date" class="form-control" id="DATE" name="COMPLETE_DATE"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                                <p class="text-danger" id="REPAIRDateError"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-4">
                        <div class="row mb-6">
                            <label class="col-lg-4 col-form-label fw-semibold fs-6 ">Parts</label>
                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                <input type="text" class="form-control" id="PARTS" name="PARTS"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row mb-6">
                            <label class="col-lg-4 col-form-label fw-semibold fs-6">Labor</label>
                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                <input type="text" class="form-control" id="LABOR" name="LABOR"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="row mb-6">
                            <label class="col-lg-4 col-form-label fw-semibold fs-6">Total</label>
                            <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                <input type="text" name="amount" id="amount"
                                    value="{{  old('amount')  }}"
                                    class="form-control " readonly>
                                    <input type="hidden" name="TRAILER_ID" id="TRAILER_ID" value=""class="form-control">
                                            <input type="hidden" name="TRUCK_ID" id="TRUCK_ID" value="" class="form-control">
                                            <input type="hidden" name="MEM_ID" id="MEM_ID" value="{{ getAuthMemberId() }}" class="form-control">
                                            <input type="hidden" name="ISSUE_ID" id="ISSUE_ID" value=""
                                                class="form-control">
                                    <input type="hidden" name="issueType" id="issueType" value=""
                                    class="form-control">
                                <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-12">
                        <div class="row mb-6">
                            <label class="col-lg-2 col-form-label fw-semibold fs-6 pt-0">Location
                                on Truck </label>
                            <div class="col-lg-10 fv-row fv-plugins-icon-container ps-0">
                                <input type="text" name="LOCATION" id="LOCATION"
                                    value=""
                                    class="form-control " {{ old('location') }}>
                                <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-12">
                        <div class="row mb-12">
                            <label class="col-lg-2 col-form-label fw-semibold fs-6 pt-0">Service
                                Codes </label>

                            <div class="col-lg-10 fv-row fv-plugins-icon-container ps-0">
                                <select value="" class="form-select" data-control="select2" data-hide-search="true"
                                    id="SERVICE_CODES" name="SERVICE_CODES[]" multiple="">
                                    <option value="">Please select</option>
                                    @foreach($serviceCode as $key => $serviceCodes)
                                    <option value="{{$serviceCodes->SERVICEID }}">
                                        {{$serviceCodes->Description}} </option>
                                    @endforeach
                                </select>
                                <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">
                        <div class="row mb-6">
                            <label class="col-lg-4 col-form-label fw-semibold fs-6 ">Odometer</label>
                            <div class="col-lg-8 fv-row fv-plugins-icon-container ps-0">
                                <input type="text" class="form-control" id="ODOMETER_iss" name="ODOMETER_iss"
                                    value="">
                                <div
                                    class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="row mb-6">
                            <label class="col-lg-3 col-form-label fw-semibold fs-6 pt-0">WO#</label>
                            <div class="col-lg-9 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>
                </div>



                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="row mb-6">
                            <label class="col-lg-3 col-form-label fw-semibold fs-6 pt-0">Document(optional)</label>
                            <div class="col-lg-9 fv-row fv-plugins-icon-container">
                                <input type="file" name="repair_DOCUMENTS[]" id="repair_DOCUMENTS" class="form-control"
                                    accept=".png,.jpg,.jpeg,.csv,.xls,.xlsx" multiple>
                                <input class="form-control" type="hidden" name="old_repairDOCUMENTS"
                                    id="old_repairDOCUMENTS"
                                    value="">

                                <div class="mt-2 col-md-12">
                                    <div class="row" id="documentLink">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" 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="addRepairTypeModal" 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 Repair Type</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="#" method="POST" id="addrepairtypeform">
                @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="REPAIR_NAME" name="REPAIR_NAME"
                                    value="{{ old('REPAIR_NAME') }}">
                                @error('REPAIR_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="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>

@endsection()
@section('script')
{!! $dataTable->scripts() !!}
<!-- <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.min.js"></script> -->
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5BQa0hFcyKzBa_dA2cbKt3QvdiWhxOvY&callback=initMap"  defer></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js"></script>
<script>
     function editRepair(repairId, type) {
    $("#vendoraddtab").val('repair');
    $("#vendoraddtype").val('edit');
    $("#vendoraddissueid").val(repairId);

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

    $.ajax({
        url: url,
        method: 'GET',
        success: function(data) {
            if (data.success) {
                var repair = data.data.repair;
                $("#repairLogModal").modal("show");

                // Set values
                $("#SUMMARY").val(repair.SUMMARY);
                $("#amount").val(repair.amount);
                $("#LOCATION").val(repair.LOCATION);
                $("#ODOMETER_iss").val(repair.ODOMETER);
                $("#PO_NUMBER").val(repair.PO_NUMBER);
                $("#ISSUE_ID").val(repair.ISSUE_ID);
                $("#issueType").val(data.data.type);
                $("#PARTS").val(repair.PARTS);
                $("#LABOR").val(repair.LABOR);
                $("#DATE").val(repair.COMPLETE_DATE);

                // Set Trailer or Truck IDs
                if (data.data.type === 'Trailer') {
                    $("#TRAILER_ID").val(repair.TRAILER_ID);
                    $('#repairLogModalLabel').text(`Edit Repair Issue id - #${repair.ISSUE_ID} Trailer - #${repair.ID}`);
                } else if (data.data.type === 'Truck') {
                    $("#TRUCK_ID").val(repair.TRUCK_ID);
                    $('#repairLogModalLabel').text(`Edit Repair Issue id - #${repair.ISSUE_ID} Truck - #${repair.UNIT_ID}`);
                } else {
                    $('#repairLogModalLabel').text(`Edit Repair Issue id - #${repair.ISSUE_ID}`);
                }

                // Set old documents
                $("#old_repairDOCUMENTS").val(repair.DOCUMENTS);
                $("#old_IMAGES").val(repair.IMAGES);

                // Setting vendor and status with timeout
                setTimeout(function() {
                    $('#VENDOR_ID').val(repair.VENDOR_ID).trigger('change');
                    $('#RepairStatus').val(repair.STATUS).trigger('change');
                    $('#Type').val(repair.Type).trigger('change');

                    // Setting SERVICE_CODES
                    let serviceCodes = repair.SERVICE_CODES.split(",");
                    $('#SERVICE_CODES option').prop('selected', false); // Clear previous selections
                    serviceCodes.forEach(function(code) {
                        $('#SERVICE_CODES option[value="' + code + '"]').prop('selected', true);
                    });
                    $('#SERVICE_CODES').trigger('change');
                }, 500); // Adjust timeout as necessary if options take longer to load

                // Set Image (Truck or Trailer based)
                var imageUrl = '';
                if (data.data.type === 'Trailer') {
                    imageUrl = repair.IMAGES ? '{{ asset('trailers/profiles/') }}/' + repair.IMAGES : '{{ asset('assets/media/svg/avatars/blank.svg') }}';
                } else if (data.data.type === 'Truck') {
                    imageUrl = repair.IMAGES ? '{{ asset('trucks/profiles/') }}/' + repair.IMAGES : '{{ asset('assets/media/svg/avatars/blank.svg') }}';
                }
                $(".Photo_optional").css("background-image", "url(" + imageUrl + ")");

                // Set Document Links
                if (repair.DOCUMENTS) {
                    let documentLinks = '';
                    repair.DOCUMENTS.split(",").forEach(function(docData) {
                        var docUrl = data.data.type === 'Trailer'
                            ? '{{ asset('trailers/documents/') }}/' + docData
                            : '{{ asset('trucks/documents/repairsDocuments/') }}/' + docData;
                        documentLinks += `<div class="col-md-6"><a href="${docUrl}" download><i class="fas fa-file"></i> ${docData}</a></div>`;
                    });
                    $("#documentLink").html(documentLinks);
                }

                // Set module values
                if (data.data.type === 'Trailer') {
                    $("#module").val('trailer');
                    $("#vendoraddissueid").val(repair.TRAILER_ID);
                } else if (data.data.type === 'Truck') {
                    $("#module").val('truck');
                    $("#vendoraddissueid").val(repair.TRUCK_ID);
                }
            } else {
                toastr.error(data.message || 'OOPS! Something Went Wrong');
            }
        },
        error: function(error) {
            console.error(error); // Log the error for debugging
            toastr.error('Error occurred while fetching data.');
        }
    });
}


        document.addEventListener('DOMContentLoaded', function () {
        var ctx = document.getElementById('dashboardexpenseBarChart').getContext('2d');
        var dashboardexpenseBarChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: @json($matchedLabels),
                datasets: [{
                    label: 'Expenses (in USD)',
                    data: @json($amounts),
                    backgroundColor: [
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(75, 192, 192, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });


        displaymap();
        let map;
        let markers = [];
        let geocoder;

        function displaymap() {
           // $("#displaymapModal").modal("show");
            fetchMapData();
        }


        function fetchMapData() {
            fetch("{{ route('truckBoard.showMap') }}")
                .then(response => response.json())
                .then(data => {
                    initMap(data);
                })
                .catch(error => console.error('Error fetching map data:', error));
        }

        function initMap(data) {
            const defaultCenter = { lat: 37.0902, lng: -95.7129 };

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 4,
                center: defaultCenter
            });

            geocoder = new google.maps.Geocoder();

            // Button click events for toggling
            document.getElementById('current_location').addEventListener('click', function() {
                toggleAddress(data, true);
            });

            document.getElementById('delivery_location').addEventListener('click', function() {
                toggleAddress(data, false);
            });

            // Initially show the current location
            toggleAddress(data, true);
        }

        function toggleAddress(data, showCurrentAddress) {
        markers.forEach(marker => marker.setMap(null));
        markers = [];
        if(data) {
            data.forEach(item => {
                const address = showCurrentAddress ? item.current_address : item.dispatch_address;
                const title = showCurrentAddress ? 'Current Location: ' + item.current_address : 'Delivery Location: ' + item.dispatch_address;

                if (address) {

                    const truckEditUrl = "{{ route('assets.trucksBoard.edit', ['id' => '']) }}/" + item.TRUCK_ID;

                    const infoContent = `
                        <div>
                            <div style="margin-bottom:10px;">UNIT ID:<strong><a  href="${truckEditUrl}"> ${item.UNIT_ID}</a></strong></div>
                            ${showCurrentAddress ? 'Current Location: <strong>' + item.current_address : 'Delivery Address: <strong>' + item.dispatch_address + '</strong>'}
                        </div>
                    `;
                    geocodeAddress(address, title, infoContent);
                }
            });
        }
    }

    function geocodeAddress(address, title, infoContent, item) {
        geocoder.geocode({ 'address': address }, function(results, status) {
            if (status === 'OK') {
                const position = results[0].geometry.location;

                const truckIcon = {
                    url: "{{ asset('assets/media/gif/truck.png') }}",
                    scaledSize: new google.maps.Size(50, 50)
                };

                const marker = new google.maps.Marker({
                    map: map,
                    position: position,
                    title: title,
                    icon: truckIcon
                });

                const infoWindow = new google.maps.InfoWindow({
                    content: infoContent
                });

                marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });

                markers.push(marker);
            } else {
                console.error('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    function addMarker(lat, lng, title) {
        const marker = new google.maps.Marker({
            position: { lat, lng },
            map: map,
            title: title
        });

        const infoWindow = new google.maps.InfoWindow({
            content: title
        });

        marker.addListener('mouseover', function() {
            infoWindow.open(map, marker);
        });

        marker.addListener('mouseout', function() {
            infoWindow.close();
        });

        markers.push(marker);
    }

        var gallons = document.getElementById('gallons').getContext('2d');

var myChart = new Chart(gallons, {
    type: 'bar',
    data: {
        labels: [
            @php
                $labels = [];
                $data = [];
                for ($i = 5; $i >= 0; $i--) {
                    $month = date("F", mktime(0, 0, 0, $currentMonth - $i));
                    $labels[] = "'$month'";

                    $monthData = null;
                    if ($i == 5) {
                        $monthData = $rowPrevious5thMonth->Total ?? 0;
                    } elseif ($i == 4) {
                        $monthData = $rowPrevious4thMonth->Total ?? 0;
                    } elseif ($i == 3) {
                        $monthData = $rowPrevious3rdMonth->Total ?? 0;
                    } elseif ($i == 2) {
                        $monthData = $rowPrevious2ndMonth->Total ?? 0;
                    } elseif ($i == 1) {
                        $monthData = $rowPreviousMonth->Total ?? 0;
                    } else {
                        $monthData = $rowCurrentMonth->Total ?? 0;
                    }
                    $data[] = $monthData;
                }
                echo implode(', ', $labels);
            @endphp
        ],
        datasets: [{
            label: 'Gallons (Diesel Only)',
            data: [
                @php
                    echo implode(', ', $data);
                @endphp
            ],
            backgroundColor: '#0073b7',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins: {
            legend: {
                display: false
            }
        }
    }
});

var gallonsByState = document.getElementById('gallonsByState').getContext('2d');
    var myChart = new Chart(gallonsByState, {
        type: 'bar',
        data: {
            labels: null,
        datasets: [{
            label: 'Gallons by State',
            data: null,
            backgroundColor: 'rgb(27, 132, 255)',
            borderWidth: 1
                }]
            },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        legend: {
            display: false
        },
    }
});


const table = $('#Openrepairs-table');
        var statusFromRequest = "{{ request('status') }}";
        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.reptype = $('#reptype').val();

            if (statusFromRequest === "Closed") {
                data.status = 'Closed';
            } else {
                data.status = $('#STATUS').val();
            }

            // data.status = $('#STATUS').prop('checked') ? 'Open' : 'Closed'
        });

        const table1 = $('#allOpenLoadList');
        table1.on('preXhr.dt', function(e, setting, data) {
    data.truckid = '{{request()->route('truckId')}}';
    data.status = '{{request()->route('status')}}';

});


$('#allOpenLoadList').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'csv', 'excel', 'print', 'reset', 'reload'
    ],
    processing: true,
    serverSide: true,
    searching: false,
    ajax: '{!! route('assets.assetsDashboard.allOpenLoadDatatable') !!}',
    data: {
        formName: 'afscpMcn',
        action: 'search',
    },
    pageLength: 6,
    order: [
        [0, 'desc']
    ],
    columns: [{
            data: 'customer_name',
            name: 'customer_name'
        },
        {
            data: 'loadid',
            name: 'Ref #'
        },
        {
            data: 'pickupaddress',
            name: 'PICUP'
        },
        {
            data: 'deliveraddress',
            name: 'DELIVERY'
        },
        {
            data: 'truckid',
            name: 'Truck #'
        },

    ],
    initComplete: function(settings, json) {
        $(".dt-buttons").addClass("d-none");
    }

});



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

            $.ajax({
                url: "{{ route('assets.repair.update') }}",
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success == true) {
                        toastr.success(response.message);
                        $("#repairLogModal").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);
                    $('#REPAIRDateError').text(error.responseJSON.errors.COMPLETE_DATE);
                    $('#REPAIRTypeError').text(error.responseJSON.errors.Type);
                }
            });
        });

        $('#addRepairTypebtn').click(function() {
        $('#addRepairTypeModal').modal('show');


            });

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

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

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

            });

        $('#vendorsadd').click(function() {
            $('#vendorAddModal').modal('show');
        });
        $('#vendorAddModal').on('show.bs.modal', function() {
            $('#repairLogModal').modal('hide');
        });
        $('#vendorAddModal').on('hidden.bs.modal', function() {
            $('#repairLogModal').modal('show');
        });
        $('.closed').click(function() {
            $('#vendorAddModal').modal('hide');
        });

        $('#vandolListbtn').click(function() {
            $('.vendorlistTable').DataTable().destroy();
            $('#vendorList').val('vendorList');
                if($('#vendorList').val() == 'vendorList'){
                    $('#vendorListModal').modal('show');
                    vendorList();
                }
        });
    $('#vendorListModal').on('show.bs.modal', function () {
        if($('#vendorList').val() == 'vendorList'){
            $('#repairLogModal').modal('hide');
        }
    });
    $('#vendorListModal').on('hidden.bs.modal', function () {
        if($('#vendorList').val() == 'vendorList'){
            $('#repairLogModal').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) {
                    $("#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');
                },
                error: function(error) {
                    $("#VendorNAMEError").html(error.responseJSON.errors.NAME[0]);
                }
            });
        }
        function formatToTwoDecimals(value) {
         return Math.round(value * 100) / 100;
    }

function calculateTotal() {
    var parts = parseFloat($('#PARTS').val()) || 0;
    var labor = parseFloat($('#LABOR').val()) || 0;
    var total = (parts + labor).toFixed(2);

    $('#amount').val(total);
}

$(document).ready(function () {
$('#PARTS, #LABOR').on('blur', function () {
    var value = parseFloat($(this).val()) || 0;
    $(this).val(value.toFixed(2));
    calculateTotal();
});

$('#PARTS, #LABOR').on('input', function () {
    calculateTotal();
});

        $('#addrepairtypeform').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    url: '{{ route('repair_type.addRepairType') }}',
                    method: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {

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

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


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

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

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

</script>

@endsection()