<!DOCTYPE html>
<html lang="en">
<?php include './includes/head.php'; ?>

<body>

    <div id="global-loader">
        <div class="whirly-loader"> </div>
    </div>

    <!-- Main Wrapper -->
    <div class="main-wrapper">

        <?php include './includes/navbar.php'; ?>

        <?php $page = 'add-customer';
        include './includes/sidebar.php'; ?>
        <div class="page-wrapper">
            <div class="content">
                <div class="page-header">
                    <div class="add-item d-flex">
                        <div class="page-title">
                            <h4>New Customer Information</h4>
                            <h6>Create new customer</h6>
                        </div>
                    </div>
                    <ul class="table-top-head">
                        <li>
                            <div class="page-btn">
                                <a href="customer.php" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Customer</a>
                            </div>
                        </li>
                        <li>
                            <a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
                        </li>
                    </ul>

                </div>
                <form action="php/addCustomer.php" method="post" enctype="multipart/form-data">
                    <?php
                    require_once 'php/databaseConnection.php';
                    $mysqli = db_connect();

                    $mysqli->begin_transaction();
                    $mysqli->query("LOCK TABLES customerField WRITE");

                    $result = $mysqli->query("
    SELECT job_number 
    FROM customerField 
    WHERE job_number LIKE '182.%' 
    ORDER BY 
        CAST(SUBSTRING_INDEX(job_number, '.', 1) AS UNSIGNED) DESC,
        CAST(SUBSTRING_INDEX(job_number, '.', -1) AS UNSIGNED) DESC 
    LIMIT 1
");

                    if ($result && $result->num_rows > 0) {
                        $row = $result->fetch_row();
                        $last_job_number = $row[0];
                        $parts = explode('.', $last_job_number);

                        if (count($parts) === 2 && is_numeric($parts[1])) {
                            $last_num = (int)$parts[1];
                            $job_number = "182." . ($last_num + 1);
                        } else {
                            $job_number = "182.600";
                        }
                    } else {
                        $job_number = "182.600";
                    }

                    $check_result = $mysqli->query("SELECT COUNT(*) FROM customerField WHERE job_number = '$job_number'");
                    $check_row = $check_result->fetch_row();

                    if ($check_row[0] > 0) {
                        $parts = explode('.', $job_number);
                        $last_num = (int)$parts[1];
                        $job_number = "182." . ($last_num + 1);
                    }

                    $mysqli->query("UNLOCK TABLES");
                    $mysqli->commit();
                    $mysqli->close();
                    ?>
                    <div class="card">
                        <div class="card-body add-product pb-0">
                            <div class="accordion-card-one accordion" id="accordionExample">
                                <!-- here -->
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingOne">
                                        <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
                                            <div class="addproduct-icon">
                                                <h5><i data-feather="info" class="add-info"></i><span>Vehicle Information</span></h5>
                                                <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="input-blocks add-product list">
                                                        <label class="form-label">Job Number</label>
                                                        <input type="text" class="form-control" name="jobNumber" value="<?php echo $job_number; ?>" readonly>
                                                        <button type="button" class="btn btn-primaryadd">
                                                            Generate
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="input-blocks add-product list">
                                                        <label class="form-label">Search Customer</label>
                                                        <input type="text" class="jobNumberSearch form-control" placeholder="Register No.">
                                                        <button type="button" class="btn btn-primaryadd">
                                                            Search
                                                        </button>
                                                        <div class="jobNumberSearchResults search-results"></div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Job Date</label>
                                                        <input type="date" name="jobDate" class="form-control" id="jobDate">
                                                    </div>
                                                </div>

                                                <script>
                                                    document.addEventListener("DOMContentLoaded", function() {
                                                        let today = new Date().toISOString().split('T')[0]; // Get today's date in YYYY-MM-DD format
                                                        document.getElementById("jobDate").value = today;
                                                    });
                                                </script>

                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Registration Number</label>
                                                        <input type="text" name="registerNumber" class="form-control" placeholder="Enter Vehicle Reg. No.">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Year</label>
                                                        <input type="text" name="year" class="form-control" placeholder="Enter Vehicle Year">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Date/ Time In:</label>
                                                        <input type="text" name="dateTimeIn" id="dateTimeIn" class="form-control" placeholder="Entrance Date and Time">
                                                    </div>
                                                </div>

                                                <script>
                                                    function getCurrentDateTime() {
                                                        let now = new Date();
                                                        let date = now.toISOString().split('T')[0]; // YYYY-MM-DD format
                                                        let time = now.toLocaleTimeString('en-US', {
                                                            hour: '2-digit',
                                                            minute: '2-digit',
                                                            second: '2-digit',
                                                            hour12: true
                                                        }); // 12-hour format with AM/PM
                                                        return `${date} ${time}`;
                                                    }

                                                    document.addEventListener("DOMContentLoaded", function() {
                                                        document.getElementById("dateTimeIn").value = getCurrentDateTime();
                                                    });
                                                </script>

                                            </div>
                                            <div class="row">
                                                <div class="col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Millage</label>
                                                        <input type="text" name="millage" class="form-control"" placeholder=" Enter Vehicle Millage in km/hr">
                                                    </div>
                                                </div>
                                                <div class=" col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Vehicle Brand</label>
                                                        <input type="text" name="vehicleBrand" class="form-control" placeholder="Enter Vehicle Brand">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Vehicle Model</label>
                                                        <input type="text" name="vehicleModel" class="form-control" placeholder="Enter Vehicle Model">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Vehicle Colour</label>
                                                        <input type="text" name="vehicleColour" class="form-control" placeholder="Enter Vehicle Colour">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Date/ Time Out:</label>
                                                        <input type="text" name="dateTimeOut" class="form-control" placeholder="Departure Date and Time">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Engine/Motor No.</label>
                                                        <input type="text" name="engineNumber" class="form-control"" placeholder=" Enter Vehicle Engine No.">
                                                    </div>
                                                </div>
                                                <div class=" col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">VIN No.</label>
                                                        <input type="text" name="vinNumber" class="form-control" placeholder="Enter Vehicle VIN No.">
                                                    </div>
                                                </div>
                                                <div class=" col-lg-4 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Purpose Visit</label>
                                                        <?php require_once 'php/purposeDataFromDatabase.php'; ?>
                                                        <select class="select" name="purpose[]" multiple>
                                                            <option value="">Select Purpose Visit</option>
                                                            <?php
                                                            foreach ($purposes as $purpose) {
                                                                echo "<option value='" . htmlspecialchars($purpose['purpose']) . "'>" . htmlspecialchars($purpose['purpose']) . "</option>";
                                                            }
                                                            ?>
                                                        </select>
                                                    </div>
                                                </div>
                                                <!-- Fuel/Battery Selection -->
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Select Type</label>
                                                        <div class="d-flex gap-3">
                                                            <input type="radio" name="fuelBattery" id="fuelOption" value="Fuel" checked>
                                                            <label for="fuelOption">Fuel</label>
                                                            <input type="radio" name="fuelBattery" id="batteryOption" value="Battery">
                                                            <label for="batteryOption">Battery</label>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class=" col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Customer Name</label>
                                                        <input type="text" name="customerName" class="form-control" placeholder="Enter Customer Name">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Address</label>
                                                        <input type="text" name="customerAddress" class="form-control" placeholder="Enter Customer Address">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">VAT No.</label>
                                                        <input type="text" name="customerVAT" class="form-control" placeholder="Enter VAT No.">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Contact Number</label>
                                                        <input type="text" name="contactNumber" class="form-control" placeholder="Enter Customer Contact">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">JobCard Status</label>
                                                        <select class="select" name="jobCardStatus">
                                                            <option value="">Select</option>
                                                            <option value="Not Opened">Not Opened</option>
                                                            <option value="Opened">Opened</option>
                                                            <option value="Closed">Closed</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Fuel/Battery Level</label>
                                                        <div class="fuel-battery-indicator">
                                                            <span>E</span>
                                                            <input type="range" class="form-range" min="0" max="60" step="1" value="30" id="fuelBatteryLevel" oninput="updateHiddenValue()">
                                                            <span>F</span>
                                                            <span id="fuelBatteryValue">30L</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Hidden input to store the selected value for submission -->
                                                <input type="hidden" name="powerValue" id="powerValue" value="30">
                                            </div>
                                            <!-- Editor -->
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="input-blocks summer-description-box transfer mb-3">
                                                        <label>Reported Defects/Demanded Repairs</label>
                                                        <textarea class="form-control h-100" name="reportedDefects" rows="5"></textarea>
                                                        <p class="mt-1">Maximum 60 Characters</p>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="input-blocks summer-description-box transfer mb-3">
                                                        <label>Completed Actions</label>
                                                        <textarea class="form-control h-100" name="completedAction" rows="5"></textarea>
                                                        <p class="mt-1">Maximum 60 Characters</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- /Editor -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/here -->
                            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                            <script>
                                $(document).ready(function() {
                                    $(".jobNumberSearch").on("input", function() {
                                        let query = $(this).val();
                                        if (query.length > 0) {
                                            $.ajax({
                                                url: "php/searchByRegisterNumber.php",
                                                method: "GET",
                                                data: {
                                                    query: query
                                                },
                                                dataType: "json",
                                                success: function(data) {
                                                    let dropdown = $(".jobNumberSearchResults");
                                                    dropdown.empty().show();
                                                    if (data.length > 0) {
                                                        data.forEach(job => {
                                                            dropdown.append(`<div class="dropdown-item job-suggestion">${job}</div>`);
                                                        });
                                                    } else {
                                                        dropdown.hide();
                                                    }
                                                }
                                            });
                                        } else {
                                            $(".jobNumberSearchResults").hide();
                                        }
                                    });

                                    // Select job from dropdown
                                    $(document).on("click", ".job-suggestion", function() {
                                        let jobNumber = $(this).text();
                                        $(".jobNumberSearch").val(jobNumber);
                                        $(".jobNumberSearchResults").hide();

                                        // Fetch and fill all fields
                                        $.ajax({
                                            url: "php/getJobDetails.php",
                                            method: "GET",
                                            data: {
                                                jobNumber: jobNumber
                                            },
                                            dataType: "json",
                                            success: function(data) {
                                                if (data.status !== "error") {
                                                    $("input[name='registerNumber']").val(data.register_number);
                                                    $("input[name='year']").val(data.year);
                                                    $("input[name='vehicleBrand']").val(data.vehicle_brand);
                                                    $("input[name='vehicleModel']").val(data.vehicle_model);
                                                    $("input[name='vehicleColour']").val(data.vehicle_colour);
                                                    $("input[name='engineNumber']").val(data.engine_number);
                                                    $("input[name='vinNumber']").val(data.vin_number);
                                                    $("input[name='customerName']").val(data.customer_name);
                                                    $("input[name='contactNumber']").val(data.contact_number);
                                                    $("input[name='customerAddress']").val(data.customer_address);
                                                    $("input[name='customerVAT']").val(data.customerVAT);
                                                    $("textarea[name='reportedDefects']").val(data.reported_defects);
                                                    $("textarea[name='completedAction']").val(data.completed_action);
                                                    $("input[name='contactPerson']").val(data.contactPerson);
                                                    $("input[name='personContactNumber']").val(data.personContactNumber);
                                                } else {
                                                    alert("Job details not found!");
                                                }
                                            }
                                        });
                                    });

                                    // Hide dropdown when clicking outside
                                    $(document).click(function(e) {
                                        if (!$(e.target).closest(".jobNumberSearch, .jobNumberSearchResults").length) {
                                            $(".jobNumberSearchResults").hide();
                                        }
                                    });
                                });
                            </script>
                            <style>
                                .search-results {
                                    position: absolute;
                                    background: white;
                                    border: 1px solid #ccc;
                                    width: 100%;
                                    max-height: 200px;
                                    overflow-y: auto;
                                    display: none;
                                    z-index: 1000;
                                }

                                .search-results div {
                                    padding: 10px;
                                    cursor: pointer;
                                }

                                .search-results div:hover {
                                    background: #f0f0f0;
                                }
                            </style>
                            <div class="accordion-card-one accordion" id="accordionExample4">
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingFour">
                                        <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-controls="collapseFour">
                                            <div class="text-editor add-list">
                                                <div class="addproduct-icon list">
                                                    <h5><i data-feather="list" class="add-info"></i><span>Custom Fields</span></h5>
                                                    <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseFour" class="accordion-collapse collapse show" aria-labelledby="headingFour" data-bs-parent="#accordionExample4">
                                        <div class="accordion-body">
                                            <div class="text-editor add-list add">
                                                <div class="container-fluid">
                                                    <div class="row justify-content-center">
                                                        <div class="col-md-8">
                                                            <div class="mb-3 car-body-container">
                                                                <h5 class="mb-3">Vehicle Body Report (Mark P-Paint, D-Dent, S-Scratch)</h5>
                                                                <h6 class="mb-3"><span class="text-primary">[Note: </span> It can't be edited further.</h6>

                                                                <!-- Canvas for Drawing -->
                                                                <div class="car-body-diagram">
                                                                    <canvas id="carCanvas" class="w-100"></canvas>
                                                                </div>

                                                                <!-- Buttons for Marking -->
                                                                <div class="marker-options mt-3">
                                                                    <button type="button" class="marker-btn" onclick="setMarker('P', 'green')">P - Paint</button>
                                                                    <button type="button" class="marker-btn" onclick="setMarker('D', 'blue')">D - Dent</button>
                                                                    <button type="button" class="marker-btn" onclick="setMarker('S', 'red')">S - Scratch</button>
                                                                    <button type="button" class="marker-btn clear-markers" onclick="clearCanvas()">Clear Marks</button>
                                                                    <button type="button" class="marker-btn" onclick="saveImage()">Save Marked Image</button>
                                                                    <button type="button" class="marker-btn" onclick="undoMark()">Undo</button>
                                                                </div>

                                                                <!-- Upload Button to send image to database -->
                                                                <div class="upload-section mt-4">
                                                                    <label for="uploadImage" class="form-label">Upload Saved Image to Database</label>
                                                                    <input type="file" class="form-control" name="imageOfCar" multiple>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <script>
                                                    const canvas = document.getElementById('carCanvas');
                                                    const ctx = canvas.getContext('2d');
                                                    let img = new Image();
                                                    let markerType = 'S';
                                                    let markerColor = 'red';
                                                    let drawnMarks = [];

                                                    // Load predefined image directly
                                                    img.onload = function() {
                                                        canvas.width = img.width;
                                                        canvas.height = img.height;
                                                        ctx.drawImage(img, 0, 0);
                                                    };
                                                    img.src = 'images/images.jpg'; // Your static image path

                                                    function setMarker(type, color) {
                                                        markerType = type;
                                                        markerColor = color;
                                                    }

                                                    canvas.addEventListener('click', function(event) {
                                                        const rect = canvas.getBoundingClientRect();
                                                        const x = event.clientX - rect.left;
                                                        const y = event.clientY - rect.top;

                                                        ctx.fillStyle = markerColor;
                                                        ctx.font = '20px Arial';
                                                        ctx.fillText(markerType, x, y);

                                                        drawnMarks.push({
                                                            type: markerType,
                                                            color: markerColor,
                                                            x,
                                                            y
                                                        });
                                                    });

                                                    function clearCanvas() {
                                                        ctx.drawImage(img, 0, 0);
                                                        drawnMarks = [];
                                                    }

                                                    function saveImage() {
                                                        const link = document.createElement('a');
                                                        link.download = 'marked_car_image.png';
                                                        link.href = canvas.toDataURL();
                                                        link.click();
                                                    }

                                                    function undoMark() {
                                                        drawnMarks.pop();
                                                        redrawCanvas();
                                                    }

                                                    function redrawCanvas() {
                                                        ctx.drawImage(img, 0, 0);
                                                        drawnMarks.forEach(mark => {
                                                            ctx.fillStyle = mark.color;
                                                            ctx.font = '20px Arial';
                                                            ctx.fillText(mark.type, mark.x, mark.y);
                                                        });
                                                    }
                                                </script>

                                                <style>
                                                    .car-body-container {
                                                        text-align: center;
                                                    }

                                                    .car-body-diagram {
                                                        position: relative;
                                                        display: inline-block;
                                                    }

                                                    canvas {
                                                        border: 2px solid #f0f0f0;
                                                        cursor: crosshair;
                                                    }

                                                    .marker-options {
                                                        margin-top: 10px;
                                                    }

                                                    .marker-btn {
                                                        margin: 5px;
                                                        padding: 10px 20px;
                                                        cursor: pointer;
                                                        border: none;
                                                        background-color: #007bff;
                                                        color: white;
                                                        border-radius: 5px;
                                                        transition: background-color 0.3s ease;
                                                    }

                                                    .marker-btn:hover {
                                                        background-color: #0056b3;
                                                    }

                                                    .clear-markers {
                                                        background-color: red;
                                                    }

                                                    .clear-markers:hover {
                                                        background-color: darkred;
                                                    }

                                                    .container-fluid {
                                                        padding-left: 0;
                                                        padding-right: 0;
                                                    }

                                                    .row {
                                                        display: flex;
                                                        justify-content: center;
                                                    }

                                                    .col-md-8 {
                                                        padding: 20px;
                                                    }

                                                    .upload-section {
                                                        margin-top: 20px;
                                                    }

                                                    .upload-section input {
                                                        display: inline-block;
                                                        margin-bottom: 10px;
                                                    }

                                                    @media (max-width: 767px) {
                                                        .marker-btn {
                                                            padding: 8px 16px;
                                                        }
                                                    }
                                                </style>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="accordion-card-one accordion" id="accordionExample">
                                <div class="accordion-item">
                                    <div class="accordion-header" id="headingOne">
                                        <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne">
                                            <div class="addproduct-icon">
                                                <h5><i data-feather="info" class="add-info"></i><span>Privacy Information</span></h5>
                                                <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            <div class="row">
                                                <div class="col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Contact Person</label>
                                                        <input type="text" name="contactPerson" class="form-control" placeholder="Enter Contact Person">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Contact Number</label>
                                                        <input type="text" name="personContactNumber" class="form-control" placeholder="Enter Person's Contact Number">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Technician Name</label>
                                                        <input type="text" name="technicianName" class="form-control" placeholder="Enter Technician Name">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-sm-6 col-12">
                                                    <div class="mb-3 add-product">
                                                        <label class="form-label">Supervisor</label>
                                                        <input type="text" name="supervisor" class="form-control" placeholder="Enter Supervisor Name">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="btn-addproduct mb-4">
                                    <button type="button" class="btn btn-cancel me-2">Cancel</button>
                                    <button type="submit" class="btn btn-submit">Save Customer</button>
                                </div>
                            </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Main Wrapper -->
    <div class="customizer-links" id="setdata">
        <ul class="sticky-sidebar">
            <li class="sidebar-icons">
                <a href="#" class="navigation-add" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-original-title="Theme">
                    <i data-feather="settings" class="feather-five"></i>
                </a>
            </li>
        </ul>
    </div>
    <!-- jQuery -->
    <script src="js/jquery-3.7.1.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Feather Icon JS -->
    <script src="js/feather.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Slimscroll JS -->
    <script src="js/jquery.slimscroll.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Datatable JS -->
    <script src="js/jquery.dataTables.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>
    <script src="js/dataTables.bootstrap5.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Bootstrap Core JS -->
    <script src="js/bootstrap.bundle.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Select2 JS -->
    <script src="js/select2.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Datetimepicker JS -->
    <script src="js/moment.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>
    <script src="js/bootstrap-datetimepicker.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Bootstrap Tagsinput JS -->
    <script src="js/bootstrap-tagsinput.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Sweetalert 2 -->
    <script src="js/sweetalert2.all.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>
    <script src="js/sweetalerts.min.js" type="37d26908286f2aa006113b6d-text/javascript"></script>

    <!-- Custom JS -->

    <script src="js/script.js" type="37d26908286f2aa006113b6d-text/javascript"></script>


    <script src="js/rocket-loader.min.js" data-cf-settings="37d26908286f2aa006113b6d-|49" defer=""></script>

    <style>
        .fuel-battery-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .fuel-battery-indicator input {
            width: 100%;
        }
    </style>

    <!-- Fuel Battery Indicator Ajax -->
    <?php include './includes/fuelBatteryAjax.php'; ?>
    <!-- /Fuel Battery Indicator Ajax -->
</body>


</body>

</html>