@extends('front.layouts.master')

@section('title', 'Home Page')

@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
            margin-right: 8px;
            vertical-align: middle;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #d3d3d3;
            transition: 0.4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #FF7101;
        }

        input:checked+.slider:before {
            transform: translateX(26px);
        }

        input:focus+.slider {
            box-shadow: 0 0 5px rgba(251, 109, 0, 0.5);
        }

        .label-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 5px;
        }

        .select2-container {
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            height: 40px;
            border-radius: 8px;
            border: 2px solid #ddd;
            background-color: #fafafa;
            font-size: 14px;
            font-weight: 500;
            padding: 0 20px;
            transition: all 0.3s ease;
        }

        .select2-container .select2-selection--single:hover {
            border-color: #FF7101;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        .select2-container .select2-selection--single:focus {
            border-color: #FF7101;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            line-height: 36px;
            color: #495057;
        }

        .select2-container--default .select2-results__option {
            padding: 12px 20px;
            font-size: 14px;
            font-weight: 400;
            color: #495057;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        .select2-container--default .select2-results__option:hover {
            background-color: #FF7101;
            color: white;
            cursor: pointer;
        }

        .select2-container--default .select2-results__option--highlighted {
            background-color: #FF7101;
            color: white;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #FF7101;
        }

        .select2-selection__arrow {
            top: 50% !important;
            transform: translateY(-50%) !important;
            right: 15px !important;
            position: absolute !important;
            height: 20px !important;
            width: 20px !important;
        }

        .select2-container--default .select2-selection--single:focus-within {
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.3);
        }

        .img-style {
            position: relative;
            display: inline-block;
        }

        .img-style a {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
        }

        .img-style a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            z-index: 1000000000000 !important;
        }

        .img-style img {
            width: 100%;
            height: auto;
            display: block;
            position: relative;
        }
    </style>


    <section class="flat-title">
        <div class="container2">
            <div class="row">
                <div class="col-lg-12">
                    <div class="title-inner style">
                        <div class="title-group fs-12"><a class="home fw-6 text-color-3" href="index-2.html">Home</a><span>Used
                                cars for sale</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="listing-grid tf-section3" style="margin-top:100px;">
        <div class="container">
            <div class="row">

                <div class="col-lg-12 flex gap-30 text-start">
                    <div class="sidebar-right-listing style-2">
                        <div class="sidebar-title flex-two flex-wrap">
                            <h4>Search by Location</h4>
                        </div>

                        <div class="d-flex align-items-end">
                            <div class="flex-grow-1">
                                <label for="savedFilters" class="form-label fw-bold">Saved Filters</label>
                                <select id="savedFilters" class="form-control select2">
                                    <option value="" disabled selected>Select your Saved filters...</option>
                                </select>
                            </div>
                            <button id="manageFiltersBtn"
                                class="btn ms-2 p-2 d-flex align-items-center justify-content-center" style="height: 38px;">
                                <i class="bi bi-pencil-square fs-5"></i>
                            </button>
                        </div>


                        <div class="form-filter-siderbar">
                            <form method="post">
                                <div class="mt-4">
                                    <div class="mb-4">
                                        <div>
                                            <label for="pickup" class="form-label fw-bold">Pickup Location</label>
                                            <select id="pickup" class="form-control search select2"
                                                name="pickup"></select>
                                        </div>
                                        <div class="mt-2">
                                            <label for="delivery" class="form-label fw-bold">Delivery Location</label>
                                            <select id="delivery" class="form-control search select2"
                                                name="delivery"></select>
                                        </div>
                                    </div>


                                    <div class="mb-4">
                                        <label for="category" class="form-label fw-bold">Category</label>
                                        <select id="category" class="form-control search" name="category">
                                            <option disabled selected>Select a category</option>
                                            <option value="1">Vehicles & Boats</option>
                                            <option value="2">Heavy Equipment</option>
                                            <option value="3">Freight</option>
                                        </select>
                                    </div>

                                    <div class="mb-4">
                                        <h5 class="text-dark">Auction Type</h5>

                                        <div class="label-container">
                                            <label class="switch">
                                                <input type="checkbox" id="listings">
                                                <span class="slider round"></span>
                                            </label>
                                            <label class="form-check-label fw-medium" for="listings">Listings</label>
                                        </div>

                                        <div class="label-container">
                                            <label class="switch">
                                                <input type="checkbox" id="offers">
                                                <span class="slider round"></span>
                                            </label>
                                            <label class="form-check-label fw-medium" for="offers">Offers</label>
                                        </div>
                                    </div>

                                    <div>
                                        <h5 class="text-dark">Service Type</h5>

                                        <div class="label-container">
                                            <label class="switch">
                                                <input type="checkbox" id="openTransport">
                                                <span class="slider round"></span>
                                            </label>
                                            <label class="form-check-label fw-medium" for="openTransport">Open
                                                Transport</label>
                                        </div>

                                        <div class="label-container">
                                            <label class="switch">
                                                <input type="checkbox" id="enclosedTransport">
                                                <span class="slider round"></span>
                                            </label>
                                            <label class="form-check-label fw-medium" for="enclosedTransport">Enclosed
                                                Transport</label>
                                        </div>
                                    </div>

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

                    </div>
                    <div class="sidebar-left-listing">
                        <div class="row">
                            <div class="col-lg-12 listing-list-car-wrap">
                                <div class="category-filter flex justify-space align-center mb-30 flex-wrap gap-8">
                                    <div class="box-1 flex align-center flex-wrap gap-8">
                                        <p class="result">Showing 1–16 of 20 results</p>
                                        <div class="filter-mobie">
                                            <a data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
                                                aria-controls="offcanvasRight" class="filter">Filter<i
                                                    class="icon-autodeal-filter"></i></a>
                                        </div>
                                    </div>
                                    <div class="box-2 flex flex-wrap gap-8">
                                        <a href="#" class="btn-view grid ">
                                            <svg width="25" height="25" viewBox="0 0 25 25" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M5.04883 6.40508C5.04883 5.6222 5.67272 5 6.41981 5C7.16686 5 7.7908 5.62221 7.7908 6.40508C7.7908 7.18801 7.16722 7.8101 6.41981 7.8101C5.67241 7.8101 5.04883 7.18801 5.04883 6.40508Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M11.1045 6.40508C11.1045 5.62221 11.7284 5 12.4755 5C13.2229 5 13.8466 5.6222 13.8466 6.40508C13.8466 7.18789 13.2227 7.8101 12.4755 7.8101C11.7284 7.8101 11.1045 7.18794 11.1045 6.40508Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M19.9998 6.40514C19.9998 7.18797 19.3757 7.81016 18.6288 7.81016C17.8818 7.81016 17.2578 7.18794 17.2578 6.40508C17.2578 5.62211 17.8813 5 18.6288 5C19.3763 5 19.9998 5.62215 19.9998 6.40514Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M7.74249 12.5097C7.74249 13.2926 7.11849 13.9147 6.37133 13.9147C5.62411 13.9147 5 13.2926 5 12.5097C5 11.7267 5.62419 11.1044 6.37133 11.1044C7.11842 11.1044 7.74249 11.7266 7.74249 12.5097Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M13.7976 12.5097C13.7976 13.2927 13.1736 13.9147 12.4266 13.9147C11.6795 13.9147 11.0557 13.2927 11.0557 12.5097C11.0557 11.7265 11.6793 11.1044 12.4266 11.1044C13.1741 11.1044 13.7976 11.7265 13.7976 12.5097Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M19.9516 12.5097C19.9516 13.2927 19.328 13.9147 18.5807 13.9147C17.8329 13.9147 17.209 13.2925 17.209 12.5097C17.209 11.7268 17.8332 11.1044 18.5807 11.1044C19.3279 11.1044 19.9516 11.7265 19.9516 12.5097Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M5.04297 18.5947C5.04297 17.8118 5.66709 17.1896 6.4143 17.1896C7.16137 17.1896 7.78523 17.8116 7.78523 18.5947C7.78523 19.3778 7.16139 19.9997 6.4143 19.9997C5.66714 19.9997 5.04297 19.3773 5.04297 18.5947Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M11.0986 18.5947C11.0986 17.8118 11.7227 17.1896 12.47 17.1896C13.2169 17.1896 13.8409 17.8117 13.8409 18.5947C13.8409 19.3778 13.2169 19.9997 12.47 19.9997C11.7225 19.9997 11.0986 19.3774 11.0986 18.5947Z"
                                                    stroke="CurrentColor"></path>
                                                <path
                                                    d="M17.252 18.5947C17.252 17.8117 17.876 17.1896 18.6229 17.1896C19.3699 17.1896 19.9939 17.8117 19.9939 18.5947C19.9939 19.3778 19.3702 19.9997 18.6229 19.9997C17.876 19.9997 17.252 19.3774 17.252 18.5947Z"
                                                    stroke="CurrentColor"></path>
                                            </svg>
                                        </a>
                                        <a href="#" class="btn-view list active">
                                            <svg width="25" height="25" viewBox="0 0 25 25" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M19.7016 18.3317H9.00246C8.5615 18.3317 8.2041 17.9743 8.2041 17.5333C8.2041 17.0923 8.5615 16.7349 9.00246 16.7349H19.7013C20.1423 16.7349 20.4997 17.0923 20.4997 17.5333C20.4997 17.9743 20.1426 18.3317 19.7016 18.3317Z"
                                                    fill="CurrentColor"></path>
                                                <path
                                                    d="M19.7016 13.3203H9.00246C8.5615 13.3203 8.2041 12.9629 8.2041 12.5219C8.2041 12.081 8.5615 11.7236 9.00246 11.7236H19.7013C20.1423 11.7236 20.4997 12.081 20.4997 12.5219C20.5 12.9629 20.1426 13.3203 19.7016 13.3203Z"
                                                    fill="CurrentColor"></path>
                                                <path
                                                    d="M19.7016 8.30919H9.00246C8.5615 8.30919 8.2041 7.95179 8.2041 7.51083C8.2041 7.06986 8.5615 6.71246 9.00246 6.71246H19.7013C20.1423 6.71246 20.4997 7.06986 20.4997 7.51083C20.4997 7.95179 20.1426 8.30919 19.7016 8.30919Z"
                                                    fill="CurrentColor"></path>
                                                <path
                                                    d="M5.5722 8.64465C6.16436 8.64465 6.6444 8.16461 6.6444 7.57245C6.6444 6.98029 6.16436 6.50024 5.5722 6.50024C4.98004 6.50024 4.5 6.98029 4.5 7.57245C4.5 8.16461 4.98004 8.64465 5.5722 8.64465Z"
                                                    fill="CurrentColor"></path>
                                                <path
                                                    d="M5.5722 13.5942C6.16436 13.5942 6.6444 13.1141 6.6444 12.522C6.6444 11.9298 6.16436 11.4498 5.5722 11.4498C4.98004 11.4498 4.5 11.9298 4.5 12.522C4.5 13.1141 4.98004 13.5942 5.5722 13.5942Z"
                                                    fill="CurrentColor"></path>
                                                <path
                                                    d="M5.5722 18.5438C6.16436 18.5438 6.6444 18.0637 6.6444 17.4716C6.6444 16.8794 6.16436 16.3994 5.5722 16.3994C4.98004 16.3994 4.5 16.8794 4.5 17.4716C4.5 18.0637 4.98004 18.5438 5.5722 18.5438Z"
                                                    fill="CurrentColor"></path>
                                            </svg>
                                        </a>
                                        <div class="wd-find-select flex gap-8">
                                            <div class="group-select">
                                                <div class="nice-select" id="resultsPerPage" tabindex="0">
                                                    <span class="current">Show: 50</span>
                                                    <ul class="list style">
                                                        <li data-value="10" class="option">Show: 10</li>
                                                        <li data-value="30" class="option">Show: 30</li>
                                                        <li data-value="50" class="option selected">Show: 50</li>
                                                        <li data-value="100" class="option">Show: 100</li>
                                                    </ul>
                                                </div>
                                            </div>

                                            <div class="group-select">
                                                <div class="nice-select" id="sorting" tabindex="0"><span
                                                        class="current">Default
                                                        order</span>
                                                    <ul class="list style">
                                                        <li data-value="" class="option selected">Default order
                                                        </li>
                                                        <li data-value="by-latest" class="option">All </li>
                                                        <li data-value="low-to-high" class="option">Low to high
                                                        </li>
                                                        <li data-value="high-to-low" class="option">High to low
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="list-car-list-1">


                                </div>


                            </div>
                        </div>

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

    <div id="filterModal" class="modal fade" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title" id="filterModalLabel">Manage Search Filters</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead class="table-light">
                            <tr>
                                <th>Search Filter Name</th>
                                <th>Notification</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="filtersList"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>


    <script>
        $(document).ready(function() {

            $("#savedFilters").select2({
                placeholder: "Select a saved filter",
                allowClear: true
            }).on("select2:clear", function() {
                resetFilters();
            });

            function saveLatestFilter() {
                let filterData = {
                    "Pickup Location": {
                        name: $("#pickup option:selected").text() || "Unknown",
                        value: $("#pickup").val() || ""
                    },
                    "Delivery Location": {
                        name: $("#delivery option:selected").text() || "Unknown",
                        value: $("#delivery").val() || ""
                    },
                    "Category": {
                        name: $("#category option:selected").text() || "Unknown",
                        value: $("#category").val() || ""
                    }
                };

                let savedFilters = JSON.parse(localStorage.getItem("savedFilters")) || [];

                savedFilters = savedFilters.filter(filterObj => {
                    let filterName = Object.keys(filterObj)[0];
                    return filterObj[filterName].enabled !== false;
                });

                Object.entries(filterData).forEach(([key, {
                    name,
                    value
                }]) => {
                    if (value && value.toString().trim() !== "") {
                        savedFilters.unshift({
                            [key]: {
                                name,
                                value,
                                enabled: true
                            }
                        });
                    }
                });

                savedFilters = savedFilters.slice(0, 15);
                localStorage.setItem("savedFilters", JSON.stringify(savedFilters));

                loadSavedFilters();
            }


            function loadSavedFilters() {
                let savedFilters = JSON.parse(localStorage.getItem("savedFilters")) || [];
                let $savedFiltersDropdown = $("#savedFilters");
                $savedFiltersDropdown.find("option:not(:first)").remove();

                let filtersContainer = $("#filtersList");
                filtersContainer.html("");

                savedFilters.forEach((filterObj, index) => {
                    let filterName = Object.keys(filterObj)[0];
                    let filterData = filterObj[filterName];

                    if (filterData && filterData.name) {
                        let optionText = `${filterName}: ${filterData.name}`;

                        if (filterData.enabled !== false) {
                            $savedFiltersDropdown.append(new Option(optionText, index));
                        }

                        let isChecked = filterData.enabled ? "checked" : "";
                        let filterRow = `
                        <tr>
                            <td>${optionText}</td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" class="toggleFilter" data-index="${index}" ${isChecked}>
                                    <span class="slider"></span>
                                </label>
                                enabled
                            </td>
                            <td>
                                <button class="deleteFilter" data-index="${index}">🗑️</button>
                            </td>
                        </tr>
                    `;
                        filtersContainer.append(filterRow);
                    }
                });
            }


            let dummyPickValue = null;
            let dummyDeliveryValue = null;

            $("#savedFilters").on("change", function() {
                let selectedFilterIndex = parseInt($(this).val(), 10);
                let savedFilters = JSON.parse(localStorage.getItem("savedFilters")) || [];
                dummyPickValue = 0;
                dummyDeliveryValue = 0;
                $("#category").val("");

                if (!isNaN(selectedFilterIndex) && savedFilters[selectedFilterIndex]) {
                    let selectedFilterObj = savedFilters[selectedFilterIndex];

                    let filterName = Object.keys(selectedFilterObj)[0];
                    let filterData = selectedFilterObj[filterName];
                    let filterValue = filterData.value;

                    switch (filterName) {
                        case "Pickup Location":
                            dummyPickValue = filterValue;
                            break;
                        case "Delivery Location":
                            dummyDeliveryValue = filterValue;
                            break;
                        case "Category":
                            $("#category").val(filterValue);
                            break;
                    }

                    fetchFilteredResults();
                }
            });

            function resetFilters() {
                dummyPickValue = null;
                dummyDeliveryValue = null;
                $("#category").val("").trigger("change");
                fetchFilteredResults();
            }

            $(document).on("change", ".toggleFilter", function() {
                let index = $(this).data("index");
                let savedFilters = JSON.parse(localStorage.getItem("savedFilters")) || [];

                if (savedFilters[index]) {
                    let filterName = Object.keys(savedFilters[index])[0];
                    savedFilters[index][filterName].enabled = $(this).is(":checked");

                    localStorage.setItem("savedFilters", JSON.stringify(savedFilters));
                    loadSavedFilters();
                }
            });

            $(document).on("click", ".deleteFilter", function() {
                let index = $(this).data("index");
                let savedFilters = JSON.parse(localStorage.getItem("savedFilters")) || [];

                if (confirm("Are you sure you want to delete this filter?")) {
                    savedFilters.splice(index, 1);
                    localStorage.setItem("savedFilters", JSON.stringify(savedFilters));
                    loadSavedFilters();
                }
            });

            loadSavedFilters();

            $("#manageFiltersBtn").on("click", function() {
                $("#filterModal").modal('show');
                loadSavedFilters();
            });

            $("#closeModal").on("click", function() {
                $("#filterModal").hide();
            });

            function fetchFilteredResults(resultsPerPage = 50, sortOrder = '') {
                let listings = $("#listings").is(":checked") ? 1 : 0;
                let offers = $("#offers").is(":checked") ? 1 : 0;
                let openTransport = $("#openTransport").is(":checked") ? 1 : 0;
                let enclosedTransport = $("#enclosedTransport").is(":checked") ? 1 : 0;
                let pickup = $("#pickup").val() || dummyPickValue;
                let delivery = $("#delivery").val() || dummyDeliveryValue;
                let category = $("#category").val();

                $.ajax({
                    url: '{{ route('findShipment') }}',
                    type: "GET",
                    data: {
                        listings: listings,
                        offers: offers,
                        openTransport: openTransport,
                        enclosedTransport: enclosedTransport,
                        pickup: pickup,
                        delivery: delivery,
                        category: category,
                        perPage: resultsPerPage,
                        sortOrder: sortOrder
                    },
                    success: function(response) {
                        if (!response.success || !response.data || !response.data.data) {
                            console.error("Invalid response format");
                            return;
                        }

                        $(".list-car-list-1").empty();

                        let shipmentHtml = ''; 

                        response.data.data.forEach(function(item, index) {
                            let acceptOfferUrl = `{{ route('front.acceptOfferShipment', ['id' => '__ID__']) }}`.replace('__ID__', item.id);

                            let priceHtml = item.price ?
                                `<a href="${acceptOfferUrl}" class="view-car place-offer">
                                    Accept offer: $${item.price} <i class="icon-autodeal-btn-right"></i>
                                </a>` :
                                `<a href="${acceptOfferUrl}" class="view-car place-bid">
                                    Place Bid <i class="icon-autodeal-btn-right"></i>
                                </a>`;

                            let transportType = item.open ? "Open Transport" : "Enclosed Transport";
                            let runningStatus = item.running ? "Running" : "Non-Running";

                            console.log(item);
                            console.log(item.type);
                            console.log(item.name);

                            shipmentHtml += `
                                <div class="box-car-list style-2 hv-one">
                                    <div class="image-group relative">
                                        <div class="top flex-two">
                                            <ul class="d-flex gap-8">
                                                <li class="flag-tag success">Featured</li>
                                                <li class="flag-tag style-1">
                                                    <div class="icon">
                                                        <svg width="16" height="13" viewBox="0 0 16 13" fill="none">
                                                            <path d="M1.5 9L4.93933 5.56067C5.07862 5.42138 5.24398 5.31089 5.42597 5.2355C5.60796 5.16012 5.80302 5.12132 6 5.12132C6.19698 5.12132 6.39204 5.16012 6.57403 5.2355C6.75602 5.31089 6.92138 5.42138 7.06067 5.56067L10.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>
                                                    </div>
                                                    ${item.featured_count || 1} 
                                                </li>
                                            </ul>
                                            <div class="year flag-tag">${item.year || '2024'}</div>
                                        </div>
                                        <div class="img-style">
                                            <a href="${acceptOfferUrl}" target="_blank" rel="noopener noreferrer">
                                                <img class="lazyload" data-src="${item.image}" src="${item.image}" alt="image">
                                            </a>
                                        </div>
                                    </div>
                                    <div class="content">
                                        <div class="inner1">
                                            <div class="text-address">
                                                <p class="text-color-3 font">${item.type || 'Sedan'}</p>
                                            </div>
                                            <h5 class="link-style-1">
                                                <a href="${acceptOfferUrl}">${item.name || 'Car Name'}</a>
                                            </h5>
                                            <div class="icon-box flex flex-wrap">
                                                <div class="icons flex-three">
                                                    <i class="bi bi-geo-alt text-warning"></i>
                                                    <span>Pickup: ${item.pickup || 'Unknown'}</span>
                                                </div>
                                                <div class="icons flex-three">
                                                    <i class="bi bi-geo-alt-fill text-warning"></i>
                                                    <span>Delivery: ${item.delivery || 'Unknown'}</span>
                                                </div>
                                            </div>
                                            <div id="offer_show${index}">${priceHtml}</div>
                                            <div class="mt-2 flex items-center gap-2 text-gray-700 text-sm">
                                                <div class="flex items-center gap-1">
                                                    <i class="bi bi-car-front-fill"></i>
                                                    <span>${runningStatus}</span>
                                                </div>
                                                <div class="flex items-center gap-1">
                                                    <i class="bi bi-box-seam"></i>
                                                    <span>${transportType}</span>
                                                </div>
                                                <div class="flex items-center gap-1">
                                                    <i class="bi bi-clock"></i>
                                                    <div class="countdown-timer" data-end-date="${item.end_date || ''}">No Expiration</div>
                                                </div>
                                            </div>                       
                                        </div>
                                        <div class="inner2">
                                            <div class="days-box">
                                                <div class="img-author">
                                                    <img class="lazyload" data-src="${item.user_image_shipment}" src="${item.user_image_shipment}" alt="image">
                                                    <span class="font text-color-2 fw-5">${item.user_name_shipment}</span>
                                                </div>
                                                <a href="listing-detail-v1.html" class="view-car">View car</a>
                                                <a href="#" class="chat">
                                                    <div class="icon">
                                                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                                                            <path d="M8.99982 0.875C7.59706 0.874694 6.21811 1.23757 4.9972 1.9283C3.77629 2.61904 2.75501 3.6141 2.03277 4.81664C1.31052 6.01918 0.911915 7.38822 0.875748 8.79052C0.839581 10.1928 1.16709 11.5806 1.82638 12.8188L0.939664 15.4789C0.866215 15.6992 0.855555 15.9355 0.908881 16.1615C0.962207 16.3874 1.07741 16.5941 1.24158 16.7582C1.40575 16.9224 1.61239 17.0376 1.83836 17.0909C2.06432 17.1443 2.30067 17.1336 2.52091 17.0602L5.18107 16.1734C6.27073 16.753 7.47811 17.0767 8.71156 17.12C9.94501 17.1633 11.1721 16.925 12.2997 16.4232C13.4273 15.9215 14.4258 15.1694 15.2194 14.2241C16.0129 13.2789 16.5807 12.1652 16.8796 10.9678C17.1785 9.77029 17.2007 8.52047 16.9445 7.31315" fill="CurrentColor"/>
                                                        </svg>
                                                    </div>
                                                    <span>Chat</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;
                        });

                        if (shipmentHtml) {
                            $(".list-car-list-1").append(shipmentHtml);
                        } else {
                            $(".list-car-list-1").html('<p class="text-center fw-bold mt-3">No shipment found that matches with your shipper type.</p>');
                        }

                        initializeCountdownTimers();

                        let currentPage = response.data.current_page;
                        let perPage = response.data.per_page;
                        let totalResults = response.data.total;
                        let from = (currentPage - 1) * perPage + 1;
                        let to = Math.min(currentPage * perPage, totalResults);

                        $(".result").text(`Showing ${from}–${to} of ${totalResults} results`);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error loading data:", error);
                    }
                });
            }

            $(".switch input").change(function() {
                fetchFilteredResults();
            });

            $('.search').on('change', function() {
                fetchFilteredResults();
                saveLatestFilter();
            });

            let selectedValue = 50;

            $("#resultsPerPage").on("click", ".option", function() {
                selectedValue = $(this).data("value");
                fetchFilteredResults(selectedValue);
            });

            $("#sorting").on("click", ".option", function() {
                let selectedSort = $(this).attr("data-value");
                fetchFilteredResults(selectedValue, selectedSort);
            });

            $('#category').select2({
                placeholder: "Select a category",
                allowClear: true
            });

            $('#savedFilters').select2({
                placeholder: "Select a saved filter",
                allowClear: true
            }).on("select2:clear", function() {
                dummyPickValue = 0;
                dummyDeliveryValue = 0;
                $("#category").val('')
                fetchFilteredResults();
            });


            function initializeSelect2(elementId) {
                $('#' + elementId).select2({
                    placeholder: 'Select Location',
                    allowClear: true,
                    minimumInputLength: 4,
                    ajax: {
                        url: '{{ route('user.searchLocations') }}',
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term,
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.locations.map(function(location) {
                                    return {
                                        id: location.id,
                                        text: location.city + ', ' + location.state + ' - ' +
                                            location.zipcode
                                    };
                                })
                            };
                        },
                        cache: true
                    }
                });
            }

            function initializeCountdownTimers() {
                $(".countdown-timer").each(function(index, el) {
                    let endDate = $(this).data("end-date");
                    let currentValue = index;

                    if (!endDate) return;

                    let endTime = new Date(endDate);

                    function updateTimer(element, endTime) {
                        let now = new Date();
                        let timeDiff = endTime - now;

                        if (timeDiff <= 0) {
                            $(element).text("Expired");
                            $(`#offer_show${currentValue}`).addClass('d-none');
                            return;
                        }

                        let days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
                        timeDiff %= 1000 * 60 * 60 * 24;

                        let hours = Math.floor(timeDiff / (1000 * 60 * 60));
                        timeDiff %= 1000 * 60 * 60;

                        let minutes = Math.floor(timeDiff / (1000 * 60));
                        let seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

                        $(element).text(`${days}D ${hours}H ${minutes}M ${seconds}S`);
                    }

                    let element = this;
                    updateTimer(element, endTime);
                    setInterval(function() {
                        updateTimer(element, endTime);
                    }, 1000);
                });
            }


            initializeSelect2('pickup');
            initializeSelect2('delivery');
            fetchFilteredResults();
        });
    </script>
@endpush