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

        .suggestions {
            border: 1px solid #ccc;
            background-color: #fff;
            max-height: 150px;
            overflow-y: auto;
            position: absolute;
            z-index: 1000;
            width: 100%;
            display: none;
        }
        .suggestion-item {
            padding: 8px;
            cursor: pointer;
        }
        .suggestion-item:hover {
            background-color: #f0f0f0;
        }

    </style>
        <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
        <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
@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="flex-lg-row-fluid">
                <div class="d-flex flex-column flex-lg-row">
                    <div class="flex-column flex-lg-row-auto w-100 w-lg-250px w-xxl-250px mb-8 mb-lg-0 me-lg-4 me-5">
                        <form action="#" id="search_form">
                            <div class="card">
                                <div class="card-body">
                                    <div class="position-relative">
                                        <i
                                            class="ki-outline ki-magnifier fs-3 text-gray-500 position-absolute top-50 translate-middle ms-6"></i>
                                        <input type="text" class="form-control form-control-solid ps-10" name="search"
                                            value="" 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 = $hasRepair ? '' : date('Y-m-d');
                                                $endDate = $hasRepair ? '' : date('Y-m-d');
                                            @endphp
                                           <!--  <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"> -->
                                             <input type="hidden" class="form-control sm" name="start_date" id="start_date">
                                            <input type="hidden" class="form-control sm" name="end_date" id="end_date">
                                        </div>
                                </div>




                              <div class="mb-5">
                                <label class="fs-6 form-label fw-bold text-gray-900">Status</label>
                                <select class="form-select form-control form-control-solid" name="STATUS"
                                    id="STATUS" data-control="select2" data-hide-search="true">
                                    <option value="">ALL</option>
                                    <option value="Open" @if(request('status') == 'Open') selected @endif>OPEN</option>
                                    <option value="Closed" @if(request('status') == 'Closed') selected @endif>CLOSED</option>
                                </select>
                             </div>

                             <div class="mb-5">
                                        <label class="fs-6 form-label fw-bold text-gray-900">Type</label>
                                        <select class="form-select form-control form-control-solid" name="reptype"
                                            id="reptype" data-control="select2" data-hide-search="true">

                                            <option value="">Please select</option>
                                            @foreach($repairTypes as $key => $repairType)
                                                <option value="{{$repairType->REPID}}" >{{strtoupper($repairType->NAME)}}</option>
                                            @endforeach

                                        </select>
                                  </div>


                              <!--   <div class="mb-5 d-flex">
                                        <label class="form-check form-switch form-switch-sm form-check-custom form-check-solid flex-stack">
                                            <span class="form-check-label ms-0 fw-bold fs-4 text-gray-900">
                                                Status
                                            </span>
                                        </label>
                                        <label class="switch" style="margin-left: 24px;">
                                            <input class="switch-input" type="checkbox" id="STATUS" checked="">
                                            <span class="switch-label fw-bold" data-on="Open" data-off="Closed"></span>
                                            <span class="switch-handle"></span>
                                        </label>
                              </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">Repairs
                                </h3>
                            </div>

                            <div class="card-body">
                            <a href="{{route('repair_type.index')}}" class="btn btn-primary btn-sm float-end me-2">Repair Type</a>
                                <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>
                                 <div class="float-end">
                                 @php
                                        $currentStatus = request('status'); // Get the 'status' parameter from the URL
                                    @endphp

                                    <a href="{{ route('assets.repair.index') }}?status=All"
                                    class="btn btn-primary pt-2 pb-2 {{ $currentStatus == 'All' || $currentStatus == '' ? 'bg-black' : '' }}">
                                    View All
                                    </a>

                                    <a href="{{ route('assets.repair.index') }}?status=Open"
                                    class="btn btn-danger pt-2 pb-2 {{ $currentStatus == 'Open' ? 'bg-black' : '' }}">
                                    Open
                                    </a>

                                    <a href="{{ route('assets.repair.index') }}?status=Closed"
                                    class="btn btn-success pt-2 pb-2 me-1 {{ $currentStatus == 'Closed' ? 'bg-black' : '' }}">
                                    Closed
                                    </a>

                                </div>


                                <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 class="row">
                                            <div class="col-md-6">
                                            <span id="total_income" class="font-weight-bold"></span>
                                            <!-- <div id="totalOrigAmt" class="mb-3 font-weight-bold"></div> -->
                                            </div>
                                            <div class="col-md-6">
                                            <div style="float:inline-end">
                                            <span id="totallLaborAmt" class="mb-3 font-weight-bold"  ></span><br>
                                            <span id="totalPartAmt" class="mb-3 font-weight-bold"></span>
                                        </div>
                                            </div>
                                        </div>



                                            {!! $dataTable->table() !!}
                                        </div>
                                    </div>
                                </div>
                            </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 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']}}">{{strtoupper($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}}">{{strtoupper($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 showPicker" 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>

                <hr/>
                <div class="row" id="parts-row-container">

                </div>
                <hr/>

                <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>
                <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 ">Next Odometer</label>
                            <div class="col-lg-8 fv-row fv-plugins-icon-container ps-0">
                                <input type="text" class="form-control" id="NEXT_ODOMETER" name="NEXT_ODOMETER"
                                    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">Mileage Next date</label>
                            <div class="col-lg-9 fv-row fv-plugins-icon-container">
                                <input type="date" class="form-control showPicker" id="NEXT_MILEAGE" name="NEXT_MILEAGE"
                                    value="ssssss">
                                <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>


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

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

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



@endsection()
@section('script')
    <script>
        $(document).ready(function(){
            var request_start_date = '{{ !empty(request()->get('start_date')) ? request()->get('start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('end_date')) ? request()->get('end_date') : '' }}';
            var request_type = '{{ !empty(request()->get('Type')) ? request()->get('Type') : '' }}';
            if(request_start_date != ''){
                $('#start_date').val(request_start_date);
            }
            if(request_end_date != ''){
                $('#end_date').val(request_end_date);
            }
            if(request_type != ''){
                $('#reptype').val(request_type);
                $('#reptype').trigger('change');
            }
        });
    </script>
    <script>

    $(document).on('change', '.parts_qty', function() {

        let qty = $(this).val() || 0;
        let originalAmount =  $(this).parent().parent().parent().parent().find('.parts_original_amount').val() || 0;

        let totalAmount = qty * originalAmount;

        $(this).parent().parent().parent().parent().find('.parts_amount').val(totalAmount.toFixed(2));

    });


        function showSuggestions(filteredNames, objinput) {
    var suggestionsBox = $(objinput).parent().find('.suggestions');

    suggestionsBox.empty();

    if (filteredNames.length > 0) {
        suggestionsBox.show();
        filteredNames.forEach(function(part) {
            suggestionsBox.append('<div class="suggestion-item" data-price="' + part.parts_amount + '">' + part.parts_name + '</div>');
        });

        $('.suggestion-item').on('click', function() {
            $(this).parent().parent().find('.parts_name_autocomplete').val($(this).text());
            $(this).parent().parent().parent().parent().parent().find('.parts_amount').val($(this).data('price'));
            $(this).parent().parent().parent().parent().parent().find('.parts_original_amount').val($(this).data('price'));
            $(this).parent().parent().parent().parent().parent().find('.parts_qty').val(1);
            suggestionsBox.hide();
        });
    } else {
        suggestionsBox.hide();
    }
    calculateAndSetPartsTotal();
    calculateTotal();
}

    $(document).ready(function() {
        $('.parts_name_autocomplete').on('input', function() {
            var inputVal = $(this).val().toLowerCase();

        var availableParts = [];

        $.ajax({
            url: "{{ route('assets.trucks.getPartNames') }}",
            method: 'get',
            success: function(response) {
                availableParts = response;
            }
        });
            var filteredNames = availableParts.filter(function(part) {
                return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
            });
            showSuggestions(filteredNames,this);
            calculateAndSetPartsTotal();
            calculateTotal();
        });

        $(document).on('click', function(e) {
            if (!$(e.target).closest('.parts_name_autocomplete').length && !$(e.target).closest('.suggestions').length) {
                $('.suggestions').hide();
            }
            calculateAndSetPartsTotal();
            calculateTotal();
        });
    });


// Define the addData function first
function addData(search, startDate, endDate, reptype, status, chart, dataPoints) {
    $('#chartLable').text('Repair by Category');
    let labelParts = [];

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

    // Start by adding search if it exists
    if (search) {
        labelParts.push(search); // Add search without a slash
    }

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

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


    if (endDate) {

        const formattedEndDate = formatDate(endDate);

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

    // Check if status exists
    if (status) {
        // Add a slash before status if any part exists
        if (labelParts.length > 0) {
            labelParts.push(`/${status}`);
        } else {
            labelParts.push(status); // Add status without a slash if it's the first part
        }
    }

    // Check if reptype exists
    if (reptype) {
        var optionText = $('#reptype option[value="' + reptype + '"]').text();
        // Add a slash before reptype if any part exists
        if (labelParts.length > 0) {
            labelParts.push(`/${optionText}`);
        } else {
            labelParts.push(optionText); // Add reptype without a slash if it's the first part
        }
    }

    // Clear the previous dataPoints
    dataPoints.length = 0;

    $.ajax({
        url: '{{ route('assets.repair.chart_data') }}',
        type: 'GET',
        data: {
            search: search,
            start_date: startDate,
            end_date: endDate,
            reptype: reptype,
            status: status // Ensure this variable is defined
        },
        success: function(response) {
            // Check if response is an array
            if (Array.isArray(response)) {
                for (var i = 0; i < response.length; i++) {
                    console.log(response[i]);
                    dataPoints.push({
                        label: `${response[i].name}`,
                        y: parseFloat(response[i].amount)
                    });
                }
                chart.render();

                // Append the label parts to the chart label
                if (labelParts.length > 0) {
                    $('#chartLable').append(' (' + labelParts.join(' ') + ' )');
                }
            } else {
                console.error("Unexpected response format:", response);
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error:", status, error);
        }
    });
}


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

    var chart = new CanvasJS.Chart("repairBarChart", {
        animationEnabled: true,
        theme: "light2",

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

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

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

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

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

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


        const table = $('#repairs-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'
        });

        $('#submit').on('click', function() {
            table.DataTable().ajax.reload();
            var dataPoints = [];

            var chart = new CanvasJS.Chart("repairBarChart", {
                animationEnabled: true,
                theme: "light2",

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

           var search = $('#search').val();
           var start_date = $('#start_date').val();
           var end_date = $('#end_date').val();
           var reptype = $('#reptype').val();
           var status1 = $('#STATUS').val();

           addData(search,start_date,end_date,reptype,status1,chart, dataPoints);

        });

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

        $('#clear').on('click', function() {
            $('#search').val('');
            // $('#range span').html('');
            // $('input[name="start_date"]').val('');
            // $('input[name="end_date"]').val('');
            // $('#STATUS').val('').trigger('change');
            //  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'));

            // $("#start_date").val();
            // $("#end_date").val();


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

            var request_start_date = '{{ !empty(request()->get('start_date')) ? request()->get('start_date') : '' }}';
            var request_end_date = '{{ !empty(request()->get('end_date')) ? request()->get('end_date') : '' }}';
            var request_type = '{{ !empty(request()->get('Type')) ? request()->get('Type') : '' }}';

            if(request_start_date != '' || request_end_date != '' || request_type != ''){
                var route = '{{ route('assets.repair.index') }}';
                var newUrl = route.split('?')[0];
                window.location.href = newUrl;
            } else{
                table.DataTable().ajax.reload();
            }
            // updateChartData();
        });

        var repairBarChart;

// function updateChartData() {
//     var startDate = $('#start_date').val();
//     var endDate = $('#end_date').val();
//     var reptype = $('#reptype').val();
//     var status1 = $('#STATUS').val();


//     $.ajax({
//         url: '{{ route('assets.repair.chart_data') }}',
//         type: 'GET',
//         data: {
//             start_date: startDate,
//             end_date: endDate,
//             reptype: reptype,
//             status: status
//         },
//         success: function(response) {
//             repairBarChart.data.labels = Object.values(response.labels);
//             repairBarChart.update();
//         }
//     });
// }

        // Default 29 Days Display
        // $(function() {
        //    var start = moment();
        //    var end = moment();

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

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

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

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

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

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

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

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

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

    // Check if the repair parameter exists
    if (params.repair) {
        // 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 != "") {
                $('#downloadOptions option[value=""]').prop('selected', true);
                $('#downloadOptions').trigger('change');
            }
        }

        function editRepair(repairId, type) {
    $("#vendoraddtab").val('repair');
    $("#vendoraddtype").val('edit');
    $("#vendoraddissueid").val(repairId);

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

    $.ajax({
        url: url,
        method: 'GET',
        success: function(data) {
            if (data.success == true) {
                var repair = data.data.repair;
                var parts = data.data.parts;

                $("#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);
                $("#NEXT_ODOMETER").val(repair.NEXT_ODOMETER);
                $("#NEXT_MILEAGE").val(repair.NEXT_MILEAGE);


                const partsRowContainer = document.getElementById('parts-row-container');
                partsRowContainer.innerHTML = '';
                var i=0;
                // Check if parts exist
                if (parts.length > 0) {
            parts.forEach(part => {
            const partRow = document.createElement('div');
            partRow.className = 'row mb-3';

            partRow.innerHTML = `
                <div class="col-md-3">
                    <div class="row mb-6">
                        <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Name</label>
                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                            <input type="text" class="form-control parts_name_autocomplete" name="parts_name[]" value="${part.parts_name ? part.parts_name : ''}">
                              <div class="suggestions"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row mb-6">
                        <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Quantity</label>
                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                            <input type="number" class="form-control parts_qty" name="parts_qty[]" step="1" min="1" value="${part.parts_qty ? part.parts_qty : ''}">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row mb-6">
                        <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Amount</label>
                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                            <input type="text" class="form-control parts_amount" name="parts_amount[]" step="1" value="${part.parts_amount ? part.parts_amount :''}">
                             <input type="hidden" class="form-control parts_original_amount" step="1" min="1" value="${part.parts_amount ? part.parts_amount :''}">
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="row mb-6">
                        <div class="col-lg-8 fv-row fv-plugins-icon-container">

                            ${i === 0 ? `
                                <button type="button" class="btn btn-success btn-sm" onclick="addPartType();">
                                    <i class="fa-solid fa-plus"></i> Add Parts
                                </button>
                            ` : ''}
                             <button type="button" class="btn btn-danger btn-sm" onclick="removePartType(this);">
                                <i class="fa-solid fa-minus"></i> Remove
                            </button>
                        </div>
                    </div>
                </div>
            `;
            partsRowContainer.appendChild(partRow);
            i++;
        if (data.data.type == 'Truck') {

            var availableParts = [];

            $.ajax({
                url: "{{ route('assets.trucks.getPartNames') }}",
                method: 'get',
                success: function(response) {
                    availableParts = response;
                }
            });

             $('.parts_name_autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var filteredNames = availableParts.filter(function(part) {
                    return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
                });

                showSuggestions(filteredNames,this);
                 calculateAndSetPartsTotal();
                calculateTotal();
            });

          } else if (data.data.type == 'Trailer') {
             var availableParts = [];

            $.ajax({
                url: "{{ route('assets.trailers.getPartNames') }}",
                method: 'get',
                success: function(response) {
                    availableParts = response;
                }
            });

             $('.parts_name_autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var filteredNames = availableParts.filter(function(part) {
                    return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
                });

                showSuggestions(filteredNames,this);
                 calculateAndSetPartsTotal();
                calculateTotal();
            });
          }

        });


                } else {
                    // Add an empty row if no parts are found
                    const emptyPartRow = document.createElement('div');
                    emptyPartRow.className = 'row mb-3';
                    emptyPartRow.innerHTML = `
                        <div class="col-md-3">
                            <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Name</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="text" class="form-control parts_name_autocomplete" name="parts_name[]" value="">
                                      <div class="suggestions"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Quantity</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="number" class="form-control parts_qty" name="parts_qty[]" step="1" min="1" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="row mb-6">
                                <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Amount</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="text" class="form-control parts_amount" name="parts_amount[]" step="1" value="">
                                    <input type="hidden" class="form-control parts_original_amount" step="1" min="1" value="">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="row mb-6">
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                  <button type="button" class="btn btn-success btn-sm" onclick="addPartType();">
                                    <i class="fa-solid fa-plus"></i> Add Parts
                                </button>
                                </div>
                            </div>
                        </div>
                    `;
                    partsRowContainer.appendChild(emptyPartRow);


             if (data.data.type == 'Truck') {

            var availableParts = [];

            $.ajax({
                url: "{{ route('assets.trucks.getPartNames') }}",
                method: 'get',
                success: function(response) {
                    availableParts = response;
                }
            });

             $('.parts_name_autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var filteredNames = availableParts.filter(function(part) {
                    return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
                });

                showSuggestions(filteredNames,this);
                 calculateAndSetPartsTotal();
                calculateTotal();
            });

          } else if (data.data.type == 'Trailer') {
             var availableParts = [];

            $.ajax({
                url: "{{ route('assets.trailers.getPartNames') }}",
                method: 'get',
                success: function(response) {
                    availableParts = response;
                }
            });

             $('.parts_name_autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var filteredNames = availableParts.filter(function(part) {
                    return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
                });

                showSuggestions(filteredNames,this);
                 calculateAndSetPartsTotal();
                calculateTotal();
            });
          }

                }
                calculateAndSetPartsTotal();
                // applyAutocompleteToPartsName();
                calculateTotal();



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




                setTimeout(function() {
                // Setting VENDOR_ID
                $('#VENDOR_ID').val(repair.VENDOR_ID).trigger('change');

                // Setting RepairStatus
                $('#RepairStatus').val(repair.STATUS).trigger('change');

                // Setting Type
                $('#Type').val(repair.Type).trigger('change');
            }, 500); // Adjust timeout as necessary if options take longer to load

              // Setting SERVICE_CODES
                let serviceCodes = [];

                if (repair && repair.SERVICE_CODES) {
                    serviceCodes = repair.SERVICE_CODES.split(",");
                } else {
                    console.warn("SERVICE_CODES is null or undefined");
                }

                // Ensure serviceCodes is an array before proceeding
                serviceCodes.forEach(function(code) {
                    $('#SERVICE_CODES option[value="' + code + '"]').prop('selected', true);
                });

                // Trigger change event on the select element
                $('#SERVICE_CODES').trigger('change');


                // 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 = '';

                        if (data.data.type == 'Trailer') {
                            docUrl = '{{ asset('trailers/documents/') }}/' + docData;
                        } else if (data.data.type == 'Truck') {
                            docUrl = '{{ 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);
                }
                else {
                    $("#documentLink").html('<div class="col-md-12">No documents available.</div>');
                }

                // 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) {
            toastr.error('Error occurred while fetching data.');
        }
    });
}


        $('#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();
                        $('#repairs-table').DataTable().ajax.reload();
                        location.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 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 filterByView() {
        var view = document.getElementById('viewall').value;
        var url = new URL(window.location.href);
        url.searchParams.set('status', view);
        window.location.href = url.href;
    }
    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');
                        } else if(response.success == false){
                            toastr.error(response.message);
                        } else {
                            toastr.error("OOPS! Something went wrong");
                        }
                    },
                    error: function (response) {
                        let errors = response.responseJSON.errors;


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

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

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

    function addPartType() {
    const partsRowContainer = document.getElementById('parts-row-container');
    const partRow = document.createElement('div');
    partRow.className = 'row mb-3';
    partRow.innerHTML = `
        <input type="hidden" name="parts_id[]" value="">
        <div class="col-md-3">
            <div class="row mb-6">
                <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Name</label>
                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                    <input type="text" class="form-control parts_name_autocomplete" name="parts_name[]" value="">
                    <div class="suggestions"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row mb-6">
                <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Quantity</label>
                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                    <input type="number" class="form-control parts_qty" name="parts_qty[]" step="1" min="1" value="">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row mb-6">
                <label class="col-lg-4 col-form-label fw-semibold fs-6">Parts Amount</label>
                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                    <input type="text" class="form-control parts_amount" name="parts_amount[]" step="1" value="">
                    <input type="hidden" class="form-control parts_original_amount" step="1" min="1" value="">
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="row mb-6">
                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removePartType(this);">
                        <i class="fa-solid fa-minus"></i> Remove
                    </button>
                </div>
            </div>
        </div>
    `;
    partsRowContainer.appendChild(partRow);

        var issueType = $('#issueType').val();

     var availableParts = [];

     if (issueType == 'Truck') {

            var availableParts = [];

            $.ajax({
                url: "{{ route('assets.trucks.getPartNames') }}",
                method: 'get',
                success: function(response) {
                    availableParts = response;
                }
            });

             $('.parts_name_autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var filteredNames = availableParts.filter(function(part) {
                    return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
                });

                showSuggestions(filteredNames,this);
                 calculateAndSetPartsTotal();
                calculateTotal();
            });

          } else if (issueType == 'Trailer') {
             var availableParts = [];

            $.ajax({
                url: "{{ route('assets.trailers.getPartNames') }}",
                method: 'get',
                success: function(response) {
                    availableParts = response;
                }
            });

             $('.parts_name_autocomplete').on('input', function() {
                var inputVal = $(this).val().toLowerCase();
                var filteredNames = availableParts.filter(function(part) {
                    return part.parts_name.toLowerCase().indexOf(inputVal) === 0;
                });

                showSuggestions(filteredNames,this);
                 calculateAndSetPartsTotal();
                calculateTotal();
            });
          }

    }

    function removePartType(button) {
        const row = button.closest('.row.mb-3');
        row.remove();
        calculateAndSetPartsTotal();
        calculateTotal();
    }

    function calculateAndSetPartsTotal() {
        let partsAmountInputs = document.querySelectorAll('input[name="parts_amount[]"]');
        let partsQtyInputs = document.querySelectorAll('input[name="parts_qty[]"]');

        let total = 0;

        partsAmountInputs.forEach(input => {
            let amount = parseFloat(input.value) || 0;
            total += amount;
        });

        // partsAmountInputs.forEach((input, index) => {
        //     let amount = parseFloat(input.value) || 0;

        //     let qty = parseFloat(partsQtyInputs[index].value) || 0;
        //     // total += amount;
        //     if (qty > 0) {
        //         total += amount * qty;
        //     }
        //     else{
        //         total += amount;
        //     }
        // });

        document.getElementById('PARTS').value = total.toFixed(2);
    }

    document.addEventListener('input', function(event) {
        if (event.target.name === 'parts_amount[]') {
            calculateAndSetPartsTotal();
            calculateTotal();
        }
    });

    const observer = new MutationObserver(function(mutationsList, observer) {
        mutationsList.forEach(mutation => {
            if (mutation.type === 'childList') {
                // When inputs are added or removed, recalculate the total
                calculateAndSetPartsTotal();
                calculateTotal();
            }
        });
    });

    const container = document.querySelector('#parts-container');
    if (container) {
        observer.observe(container, { childList: true });
    }

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

                },
                success: function(response) {
                    var formattedTotalIncome = response.toLocaleString("en-US", { style: "currency", currency: "USD" });
                    $("#total_income").html("<b>Total Amount : $" + formattedTotalIncome + "</b>");
                },
                error: function(xhr, status, error) {
                    $("#success-message").hide();
                }
            });
        }
        $("#search_form").submit(function name(e) {
            e.preventDefault();           
            
        });

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

        $('.showPicker').on('click', function () {
    this.showPicker();
});

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

    {!! $dataTable->scripts() !!}
@endsection()