@extends('front.layouts-user.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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

    <style>
        :root {
            --primary: #FF6B35;
            --secondary: #004E89;
            --accent: #00C49A;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }

        .card-modern {
            background: var(--glass);
            border-radius: 24px;
            border: 1px solid #fffcfc;
            box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08),
                inset 0 -2px 2px rgba(255, 255, 255, 0.5);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

        .card-modern:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12),
                inset 0 -4px 8px rgba(255, 255, 255, 0.6);
        }

        .countdown-badge {
            background: linear-gradient(45deg, var(--primary), #ff8247);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.9rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .bid-card {
            border-left: 4px solid var(--primary);
            background: linear-gradient(to right, rgba(255, 107, 53, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
        }

        .carousel-modern {
            border-radius: 16px;
            overflow: hidden;
            position: relative;
        }

        .carousel-modern img {
            height: 320px;
            object-fit: cover;
            transition: transform 0.3s;
        }

        .carousel-control-next,
        .carousel-control-prev {
            width: 48px;
            height: 48px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 50%;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .btn-modern {
            background: linear-gradient(45deg, var(--primary), #ff8247);
            color: white !important;
            border: none;
            padding: 12px 28px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(255, 107, 53, 0.3);
        }

        .input-modern {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 12px 16px;
            transition: all 0.3s;
        }

        .input-modern:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
        }

        .sticky-sidebar {
            position: sticky;
            top: 24px;
        }

        .status-badge {
            background: rgba(0, 206, 124, 0.15);
            color: var(--accent);
            padding: 6px 12px;
            border-radius: 8px;
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .carousel-modern img {
                height: 240px;
            }
        }
    </style>

    <style>
        .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-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);
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #FF7101;
            color: white;
        }
    </style>
    <style>
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.6);
            padding: 10px;
            border-radius: 50%;
        }

        .carousel-control-prev-icon:hover,
        .carousel-control-next-icon:hover {
            background-color: rgba(0, 0, 0, 0.8);
            transition: background-color 0.3s;
        }

        .carousel-control-prev-icon::after,
        .carousel-control-next-icon::after {
            color: white;
            font-size: 20px;
        }

        .carousel-control-prev,
        .carousel-control-next {
            width: 5%;
        }
    </style>

    <style>
        .ripple-loader {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 80px;
        }

        .ripple-loader::before,
        .ripple-loader::after {
            content: "";
            position: absolute;
            width: 80px;
            height: 80px;
            border: 4px solid #FF7101;
            opacity: 1;
            border-radius: 50%;
            animation: ripple-spin 1.5s infinite ease-out;
        }

        .ripple-loader::after {
            animation-delay: -0.75s;
        }

        @keyframes ripple-spin {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            50% {
                transform: scale(1);
                opacity: 0.5;
            }

            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
    </style>

    <style>
        .accordion-modern {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .accordion-item-modern {
            background: rgba(255, 255, 255, 0.95);
            border-bottom: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }

        .accordion-header-modern {
            background: #f8f9fa;
            border-radius: 8px;
            margin: 4px 0;
        }

        .accordion-button-modern {
            background: transparent;
            color: #212529;
            font-weight: 600;
            padding: 1.25rem 1.5rem;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .accordion-button-modern:not(.collapsed) {
            background: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .accordion-button-modern::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transition: transform 0.3s ease;
        }

        .accordion-button-modern:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FF6B35'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        }

        .accordion-body-modern {
            padding: 1.25rem 1.5rem;
            background: rgba(248, 249, 250, 0.5);
            border-top: 1px solid #e9ecef;
        }

        .answer-item-modern {
            padding: 1rem;
            margin: 0.75rem 0;
            background: white;
            border-radius: 8px;
            border: 1px solid #e9ecef;
            transition: transform 0.2s ease;
        }

        .answer-item-modern:hover {
            transform: translateX(4px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .answer-form-modern textarea {
            border-radius: 8px;
            border: 2px solid #e9ecef;
            transition: border-color 0.2s ease;
        }

        .answer-form-modern textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
        }

        .btn-answer-submit {
            background: var(--primary);
            color: white;
            padding: 0.5rem 1.25rem;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .btn-answer-submit:hover {
            background: #e65a25;
            transform: translateY(-1px);
        }
    </style>

    <style>
        .offer-card {
            transition: transform 0.2s, box-shadow 0.2s;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .offer-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        .company-brand {
            position: relative;
            width: 100px;
        }

        .company-logo {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .you-badge {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            white-space: nowrap;
        }

        .price-section {
            background: rgba(240, 240, 240, 0.3);
            border-radius: 12px;
            padding: 1rem;
        }

        .price-display {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 0.5rem;
        }

        .currency {
            font-size: 1.2rem;
            color: var(--primary);
        }

        .amount {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
        }

        .price-label {
            font-size: 0.9rem;
            color: #666;
        }

        .service-type {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #666;
        }

        .alert-note {
            background: rgba(255, 107, 53, 0.08);
            color: var(--primary);
            padding: 12px;
            border-radius: 8px;
            margin-top: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-pill {
            padding: 8px 16px;
            border-radius: 50px;
            border: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: all 0.2s ease;
        }

        .status-pill.deleted {
            background: rgba(220, 53, 69, 0.1);
            color: #dc3545;
        }

        .status-pill.declined {
            background: rgba(255, 193, 7, 0.1);
            color: #ffc107;
        }

        .status-pill.assigned {
            background: rgba(23, 162, 184, 0.1);
            color: #17a2b8;
        }

        .status-pill.active {
            background: rgba(40, 167, 69, 0.1);
            color: #28a745;
        }

        .status-pill:hover {
            filter: brightness(0.98);
            transform: translateY(-1px);
        }
    </style>

    <style>
        .details-container {
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.9) !important;
        }

        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.1rem;
            padding: 8px 12px;
            background: rgba(240, 240, 240, 0.5);
            border-radius: 8px;
        }

        .countdown-badge-lg {
            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
            transition: transform 0.2s;
        }

        .countdown-badge-lg:hover {
            transform: translateY(-2px);
        }

        .object-fit-cover {
            object-fit: cover;
            border: 2px solid #fff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    </style>

    <style>
        .settings-icon {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            color: #FF7101;
            cursor: pointer;
            transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
        }

        .nav-tabs .nav-link.active {
            background-color: #FF7101;
            color: white;
            border-radius: 5px;
        }

        .nav-tabs .nav-link {
            color: black;
        }

        .nav-tabs .nav-link:hover {
            background-color: rgba(255, 113, 1, 0.1);
            border-radius: 5px;
        }

        .btn-primary {
            background-color: #FF7101;
            border-color: #FF7101;
        }

        .btn-primary:hover {
            background-color: #e85c00;
            border-color: #e85c00;
        }

        .form-check-input:checked {
            background-color: #FF7101;
            border-color: #FF7101;
        }

        .fas.fa-info-circle {
            color: #FF7101;
        }

        .booked-icon {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: bold;
            font-size: 14px;
        }

        .booked {
            background-color: #FFD700;
            /* Gold */
            color: #333;
        }

        .available {
            background-color: #067d02;
            color: white;
            border: 2px solid #045c01;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .icon {
            color: white !important;
            padding: 4px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            font-size: 12px;
        }

        .orange {
            color: #FF7101;
        }

        .swal2-container {
            z-index: 999999 !important;
        }
    </style>


    <div class="container mt-3">
        <div id="loading" class="d-flex justify-content-center align-items-center" style="display: none;">
            <div class="spinner-border orange" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>

        <div id="shipment-container"></div>
    </div>


    <div class="container-fluid">
        <div class="row">
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offerDetailsCanvas"
                aria-labelledby="offerDetailsCanvasLabel" style="width: 50%;">
                <div class="offcanvas-header">
                    <h5 id="offerDetailsCanvasLabel" class="fw-bold">Offer Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body" id="offer-details-content">
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsModalLabel">Offer Settings</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="settingsTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="service-tab" data-bs-toggle="tab" href="#service" role="tab"
                                aria-controls="service" aria-selected="true">Service / Timeframe</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="payments-tab" data-bs-toggle="tab" href="#payments" role="tab"
                                aria-controls="payments" aria-selected="false">Payments / Terms</a>
                        </li>
                    </ul>

                    <form id="offerSettingsForm">
                        <div class="tab-content mt-3" style="padding: 20px">
                            <div class="tab-pane fade show active" id="service" role="tabpanel"
                                aria-labelledby="service-tab">
                                <div class="row">
                                    <div class="col-md-6 d-flex flex-column">
                                        <h5>Offer Expiration <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                                title="Expiration timeframe after offer acceptance"></i></h5>
                                        <div class="form-check">
                                            <input type="radio" id="offer-standard" name="offer_expiration"
                                                value="standard" class="form-check-input" checked>
                                            <label for="offer-standard" class="form-check-label">Standard: 24 hours after
                                                offer acceptance</label>
                                        </div>
                                    </div>

                                    <div class="col-md-6 d-flex flex-column">
                                        <h5>Note to Shipping Customer <i class="fas fa-info-circle" data-bs-toggle="tooltip"
                                                title="Provide any necessary notes to the shipping customer"></i></h5>
                                        <textarea class="form-control" rows="4" name="note_to_shipping_customer" id="note_to_shipping_customer"
                                            placeholder="We’re insured and bonded company."></textarea>
                                        <small class="text-muted mt-2">
                                            <i class="fas fa-info-circle"></i> Do not include any type of contact
                                            information.
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="payments" role="tabpanel" aria-labelledby="payments-tab">
                                <div class="row g-4">
                                    <div class="col-md-3">
                                        <h6 class="fw-bold">Payment Methods</h6>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="payment_methods[]"
                                                id="cash" value="cash">
                                            <label class="form-check-label" for="cash">Cash</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="payment_methods[]"
                                                id="paypal" value="paypal">
                                            <label class="form-check-label" for="paypal">Paypal</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="payment_methods[]"
                                                id="credit-card" value="credit-card">
                                            <label class="form-check-label" for="credit-card">Credit Card</label>
                                        </div>
                                    </div>

                                    <div class="col-md-3">
                                        <h6 class="fw-bold">Payment Accepted</h6>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="before-pickup"
                                                name="payment_accepted[]" value="before-pickup">
                                            <label class="form-check-label" for="before-pickup">Before Pickup</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="at-pickup"
                                                name="payment_accepted[]" value="at-pickup">
                                            <label class="form-check-label" for="at-pickup">At Pickup</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="at-delivery"
                                                name="payment_accepted[]" value="at-delivery">
                                            <label class="form-check-label" for="at-delivery">At Delivery</label>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <h6 class="fw-bold">Additional Payment Terms</h6>
                                        <textarea class="form-control" rows="3" name="additional_payment_terms" id="additional_payment_terms"></textarea>
                                        <small class="text-muted d-block">
                                            <i class="fas fa-info-circle"></i> Do not include any type of contact
                                            information.
                                        </small>
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <h6 class="fw-bold">Standard Terms & Conditions <i
                                            class="fas fa-info-circle text-muted" data-bs-toggle="tooltip"
                                            title="Standard terms and conditions"></i></h6>
                                    <textarea class="form-control" rows="6" name="standard_terms_conditions" id="standard_terms"></textarea>
                                    <small class="text-danger d-block">Minimum Character Length: 100</small>
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 mt-4">Update</button>
                    </form>
                </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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.0.0/polyline.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/polyline/1.1.1/polyline.min.js"></script>


    <script>
        $(document).ready(function() {
            let urlSegments = window.location.pathname.split('/');
            let shipmentId = urlSegments[urlSegments.length - 1];

            function fetchShipmentDetails(shipmentId) {
                $(".spinner-border").show();
                $.ajax({
                    url: '{{ route('findShipment') }}',
                    method: "GET",
                    data: {
                        id: shipmentId
                    },
                    dataType: "json",
                    success: function(response) {
                        $(".spinner-border").hide();
                        if (response.success) {
                            let data = response.data;
                            let timeRemaining = getTimeRemaining(data.end_date);
                            let transportType = data.open ? "Open Transport" : "Enclosed Transport";
                            let runningStatus = data.running ? "Running" : "Non-Running";
                            let answer_check = data.customer_check;
                            let isOffer = data.price ? "Offer" : "Bid";
                            let vehicleHtml = "";

                            $.each(response.multiple_shipment_details, function (index, vehicle) {
                                    let attributes = JSON.parse(vehicle.attributes);
                                    let attributeHtml = "";

                                    let vehicleTitle = (vehicle.year && vehicle.make && vehicle.model)
                                    ? `${vehicle.year} ${vehicle.make} ${vehicle.model}`
                                    : (vehicle.title || vehicle.description || vehicle.additional_info  || data.name || "N/A");

                                    $.each(attributes, function (key, value) {
                                        attributeHtml += `
                                            <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                                <span class="text-muted">${key.charAt(0).toUpperCase() + key.slice(1)}</span>
                                                <span class="fw-bold ${value ? 'text-success' : 'text-danger'}">
                                                    ${value ? '✅' : '❌'}
                                                </span>
                                            </div>`;
                                    });

                                    vehicleHtml += `
                                        <div class="card shadow-sm border-0 mb-4">
                                            <div class="card-body p-4">
                                                <h6 class="fw-bold mb-3">#${index + 1}. ${vehicleTitle}</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        ${attributeHtml}
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                                            <span class="text-muted">Dimensions</span>
                                                            <span class="fw-bold">${vehicle.dimension_formatted || 'N/A'}</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                                            <span class="text-muted">Weight</span>
                                                            <span class="fw-bold">${vehicle.weight_formatted || 'N/A'}</span>
                                                        </div>
                                                        <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                                            <span class="text-muted">Service Type</span>
                                                            <span class="fw-bold">${transportType || 'N/A'}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    `;
                                });

                            function renderAnswers(answers) {
                                return `
                                    <div class="answers-list">
                                        ${answers.map(a => `
                                            <div class="answer-item mt-3 p-3 card-modern">
                                                <div class="d-flex align-items-center gap-2 mb-2">
                                                    <div class="user-avatar">
                                                        <img src="${a.user.user_image}"
                                                                class="rounded-circle"
                                                                width="40"
                                                                height="40"
                                                                alt="${a.user.full_name}">
                                                    </div>
                                                    <div>
                                                        <h6 class="mb-0 fw-bold">${a.user.full_name}</h6>
                                                        <small class="text-muted">${new Date(a.created_at).toLocaleDateString()}</small>
                                                    </div>
                                                </div>
                                                <p class="mb-0">${a.answer}</p>
                                            </div>
                                        `).join('')}
                                    </div>
                                `;

                            }

                            let shipmentHtml = `
                                <div class="row g-4">
                                    <!-- Main Content -->
                                    <div class="col-lg-8">
                                        <!-- Vehicle Header -->
                                    <div class="card-modern p-4 mb-4">
                                            <div class="d-flex flex-column flex-md-row gap-4 align-items-start">
                                                <!-- Image Section -->
                                                <div class="flex-shrink-0 text-center text-md-start">
                                                    <img src="${data.image}"
                                                        class="rounded-3 object-fit-cover mb-3"
                                                        style="width: 240px; height: 180px;"
                                                        alt="${data.name}">
                                                </div>

                                                <div class="flex-grow-1">
                                                    <div class="d-flex flex-column h-100 gap-3">

                                                        <div class="details-container bg-light p-3 rounded-3">
                                                            <div class="d-flex flex-wrap gap-4 align-items-center">
                                                                <div class="detail-item">
                                                                    <i class="fas fa-hashtag text-muted"></i>
                                                                    <span class="fw-semibold">ID: ${data.id}</span>
                                                                </div>

                                                                <div class="detail-item">
                                                                    <i class="fas fa-truck text-muted"></i>
                                                                    <span class="fw-semibold">${data.name || 'General Shipment'}</span>
                                                                </div>

                                                                <div class="detail-item">
                                                                    <i class="fas fa-calendar-alt text-muted"></i>
                                                                    <span class="fw-semibold">${new Date(data.created_at).toLocaleDateString()}</span>
                                                                </div>

                                                                <div class="detail-item booked-icon ms-auto ${data.is_booked ? 'booked' : 'available'}">
                                                                    <i class="fas ${data.is_booked ? 'fa-star' : 'fa-check-circle'} icon"></i>
                                                                    <span class="fw-semibold">${data.is_booked ? 'Booked' : 'Available'}</span>
                                                                </div>

                                                            </div>
                                                        </div>

                                                        <div class="mt-auto">
                                                            <div class="countdown-badge-lg text-white p-3 rounded-3" style="background-color:#FF7101;">
                                                                <div class="d-flex align-items-center gap-2">
                                                                    <i class="fas fa-clock fs-5"></i>
                                                                    <div>
                                                                        <div class="text-uppercase small">Remaining Time</div>
                                                                        <div class="fs-4 fw-bold">${timeRemaining}</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Vehicle Specifications -->
                                        <div class="card-modern p-4 mb-4">
                                            <h4 class="fw-bold mb-4"> <i class="fas fa-car me-2"></i>Vehicle Specifications</h4>
                                            <div class="row g-4">
                                                ${vehicleHtml}
                                            </div>
                                        </div>

                                        <div class="card-modern p-4 mb-4">

                                            <h4 class="fw-bold mb-4"><i class="fa-solid fa-gavel me-2"></i>Active ${isOffer}s on this Shipment</h4>
                                            <div id="active-offers-container">
                                            <div class="d-flex justify-content-center align-items-center" style="display: none;">
                                                    <div class="spinner-border orange" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        ${[3, 4].includes(data.type_check) && !data.customer_check && data.status == 1 && timeRemaining != 'Expired' ? `
                                                                                                    <div class="card card-modern p-4 mb-4">
                                                                                                    <i class="fas fa-cog position-absolute" style="top: 40px; right: 25px; cursor: pointer;" data-bs-toggle="modal" data-bs-target="#settingsModal"></i>
                                                                                                        <h4 class="fw-bold mb-4"><i class="fa-solid fa-check-circle me-2"></i> Accept ${isOffer}</h4>
                                                                                                        <form id="acceptOfferForm">
                                                                                                            <input type="hidden" name="shipment_id" value="${data.id}">

                                                                                                            ${(!data.price || data.price == 0) ? `
                                                <div class="mb-4">
                                                    <label class="form-label fw-bold">Bid Amount</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">$</span>
                                                        <input type="text"
                                                            name="bid_price"
                                                            id="bid_price"
                                                            class="form-control input-modern"
                                                            placeholder="Enter bid amount">
                                                        <span class="input-group-text">
                                                            <i class="fas fa-calculator"
                                                            id="bidCalculatorIcon"
                                                            data-bs-toggle="tooltip"
                                                            data-bs-placement="top"
                                                            title="$0"></i>
                                                        </span>
                                                        <input type="hidden" name="bid_price_final" id="bid_price_final">
                                                    </div>
                                                    <small class="text-muted mt-2 d-block">
                                                        <i class="fas fa-calculator me-1"></i>Bid Calculator shows total amount including ATC fees
                                                    </small>
                                                </div>` : `
                                                <div class="alert-modern bg-light-primary border-primary p-3 rounded-3 mb-4">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                    <div>
                                                            <h5 class="fw-bold mb-1">Current Offer</h5>
                                                            <div class="h4 fw-bold orange" data-bs-toggle="tooltip" data-bs-placement="top" title="This is the amount that asignee will pay you.">
                                                                $${data.price}
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>`}

                                                                                                            <div class="row g-3 mb-4">
                                                                                                                <div class="col-md-6">
                                                                                                                    <label class="form-label fw-bold">Service Type</label>
                                                                                                                    <select class="form-select input-modern select2"
                                                                                                                            name="service_type_id"
                                                                                                                            id="serviceTypeDropdown">
                                                                                                                        <option value="" disabled selected>Select Service Type</option>
                                                                                                                        <option value="1">Open Transport</option>
                                                                                                                        <option value="2">Enclosed Transport</option>
                                                                                                                    </select>
                                                                                                                </div>
                                                                                                                <div class="col-md-6">
                                                                                                                    <label class="form-label fw-bold">Vehicle Type</label>
                                                                                                                    <select class="form-select input-modern select2"
                                                                                                                            name="vehicle_id"
                                                                                                                            id="vehicleDropdown">
                                                                                                                        <option value="" disabled selected>Select Vehicle</option>
                                                                                                                    </select>
                                                                                                                </div>
                                                                                                            </div>

                                                                                                            <!-- Timeframe Section -->
                                                                                                            <div class="timeframe-section">
                                                                                                                <div class="row g-3 timeframe-container" id="regularTimeframe">
                                                                                                                    <div class="col-md-6">
                                                                                                                        <div class="timeframe-card p-3 rounded-3">
                                                                                                                            <label class="form-label fw-bold mb-3">Pickup Within</label>
                                                                                                                            <div class="d-flex align-items-center justify-content-center">
                                                                                                                                <button class="btn btn-outline-secondary decrement px-3" type="button">-</button>
                                                                                                                                <input type="text"
                                                                                                                                    class="form-control input-modern text-center mx-2 pickup-timeframe"
                                                                                                                                    name="pickup_days"
                                                                                                                                    value="5"
                                                                                                                                    style="max-width: 100px">
                                                                                                                                <button class="btn btn-outline-secondary increment px-3" type="button">+</button>
                                                                                                                            </div>
                                                                                                                            <small class="text-muted d-block text-center mt-2">days after booking</small>
                                                                                                                        </div>
                                                                                                                    </div>

                                                                                                                    <div class="col-md-6">
                                                                                                                        <div class="timeframe-card p-3 rounded-3">
                                                                                                                            <label class="form-label fw-bold mb-3">Delivery Within</label>
                                                                                                                            <div class="d-flex align-items-center justify-content-center">
                                                                                                                                <button class="btn btn-outline-secondary decrement px-3" type="button">-</button>
                                                                                                                                <input type="text"
                                                                                                                                    class="form-control input-modern text-center mx-2 delivery-timeframe"
                                                                                                                                    name="delivery_days"
                                                                                                                                    value="7"
                                                                                                                                    style="max-width: 100px">
                                                                                                                                <button class="btn btn-outline-secondary increment px-3" type="button">+</button>
                                                                                                                            </div>
                                                                                                                            <small class="text-muted d-block text-center mt-2">days after pickup</small>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>

                                                                                                                <div class="row g-3 mt-2 date-range-container" id="extendedTimeframe" style="display: none;">
                                                                                                                    <div class="col-md-6">
                                                                                                                        <div class="timeframe-card p-3 rounded-3">
                                                                                                                            <label class="form-label fw-bold mb-3">Pickup Date</label>
                                                                                                                            <div class="d-flex flex-column gap-2">
                                                                                                                                <select class="form-select input-modern select2"
                                                                                                                                        name="pickup_time_type">
                                                                                                                                    <option value="on">On</option>
                                                                                                                                    <option value="before">Before</option>
                                                                                                                                    <option value="between">Between</option>
                                                                                                                                </select>
                                                                                                                                <input type="date"
                                                                                                                                    name="pickup_date"
                                                                                                                                    class="form-control input-modern"
                                                                                                                                    value="${new Date().toISOString().split('T')[0]}">
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    </div>

                                                                                                                    <div class="col-md-6">
                                                                                                                        <div class="timeframe-card p-3 rounded-3">
                                                                                                                            <label class="form-label fw-bold mb-3">Delivery Date</label>
                                                                                                                            <div class="d-flex flex-column gap-2">
                                                                                                                                <select class="form-select input-modern select2"
                                                                                                                                        name="delivery_time_type">
                                                                                                                                    <option value="on">On</option>
                                                                                                                                    <option value="before">Before</option>
                                                                                                                                    <option value="between">Between</option>
                                                                                                                                </select>
                                                                                                                                <input type="date"
                                                                                                                                    name="delivery_date"
                                                                                                                                    class="form-control input-modern"
                                                                                                                                    value="${new Date().toISOString().split('T')[0]}">
                                                                                                                            </div>
                                                                                                                        </div>
                                                                                                                    </div>
                                                                                                                </div>

                                                                                                                <div class="text-center mt-3">
                                                                                                                    <a class="btn btn-link text-dark fw-bold update-offer-settings">
                                                                                                                        <i class="fas fa-clock me-2"></i>Switch to Extended Timeframe
                                                                                                                    </a>
                                                                                                                </div>
                                                                                                            </div>

                                                                                                            <button type="submit" class="btn btn-modern w-100 mt-4">
                                                                                                                <i class="fas fa-check-circle me-2"></i>Accept ${isOffer}
                                                                                                            </button>
                                                                                                        </form>
                                                                                                    </div>` : ''}

                                        <!-- Questions Section -->
                                        <div class="card-modern p-4">
                                            <h4 class="fw-bold mb-4"><i class="fas fa-question-circle me-2"></i>Questions</h4>
                                            <div id="questions-container">
                                                ${data.questions && data.questions.length > 0 ? `
                                                                                                            <div class="accordion-modern" id="questionAccordion">
                                                                                                                ${data.questions.map((q, index) => `
                                                    <div class="accordion-item-modern">
                                                        <div class="accordion-header-modern">
                                                            <button class="accordion-button accordion-button-modern"
                                                                    type="button"
                                                                    data-bs-toggle="collapse"
                                                                    data-bs-target="#collapse-${index}">
                                                                <strong>${q.user_name}:</strong> ${q.question}
                                                            </button>
                                                        </div>
                                                        <div id="collapse-${index}"
                                                            class="accordion-collapse collapse"
                                                            data-bs-parent="#questionAccordion">
                                                            <div class="accordion-body accordion-body-modern">
                                                                ${q.answers && q.answers.length > 0 ?
                                                                    renderAnswers(q.answers) :
                                                                    '<p class="text-muted">No answers yet</p>'}

                                                                ${q.relevantTransporter || data.customer_check ? `
                                                                                                                            <form class="answer-form answer-form-modern mt-3" id="askQuestionAnsForm">
                                                                                                                                <input type="hidden" name="question_id" value="${q.id}">

                                                                                                                                <textarea class="form-control input-modern mb-2"
                                                                                                                                        name="answer"
                                                                                                                                        rows="2"
                                                                                                                                        placeholder="Write your answer..."></textarea>
                                                                                                                                <button type="submit"
                                                                                                                                        class="btn btn-modern btn-sm submit-answer btn-answer-submit">
                                                                                                                                    Submit Answer
                                                                                                                                </button>
                                                                                                                            </form>` : ''}
                                                            </div>
                                                        </div>
                                                    </div>`).join('')}
                                                                                                            </div>` :
                                                '<div class="text-center p-4"><p class="text-muted">No questions yet</p></div>'}
                                            </div>

                                            ${!answer_check ? `
                                                                                                        <div class="mt-4">
                                                                                                            <h5 class="fw-bold mb-3">Ask a Question</h5>
                                                                                                            <form id="askQuestionForm">
                                                                                                            <input type="hidden" name="shipment_id" value="${shipmentId}">

                                                                                                                <textarea class="form-control input-modern mb-3"
                                                                                                                        name="question"
                                                                                                                        rows="3"
                                                                                                                        placeholder="Type your question here..."></textarea>
                                                                                                                <button type="submit"
                                                                                                                        class="btn btn-modern">
                                                                                                                    Submit Question
                                                                                                                </button>
                                                                                                            </form>
                                                                                                        </div>` : ''}
                                        </div>
                                    </div>

                                    <!-- Sidebar -->
                                    <div class="col-lg-4">
                                        <!-- Location Card -->
                                        <div class="card-modern p-4 mb-4">
                                            <h5 class="fw-bold mb-4"><i class="fas fa-map-marker-alt me-2"></i>Locations</h5>
                                            <div class="d-flex align-items-start mb-3">
                                                <i class="fas fa-arrow-up text-success mt-1 me-2"></i>
                                                <div>
                                                    <h6 class="mb-1 fw-bold">Pickup</h6>
                                                    <p class="mb-0">${data.pickup}</p>
                                                    <small class="text-muted">Residence - ASAP</small>
                                                </div>
                                            </div>
                                            <div class="d-flex align-items-start">
                                                <i class="fas fa-arrow-down text-danger mt-1 me-2"></i>
                                                <div>
                                                    <h6 class="mb-1 fw-bold">Delivery</h6>
                                                    <p class="mb-0">${data.delivery}</p>
                                                    <small class="text-muted">Residence - ASAP</small>
                                                </div>
                                            </div>
                                        </div>

                                    <div class="card-modern p-4 mb-4">
                                            <h5 class="fw-bold mb-4"><i class="fas fa-map me-2"></i>Map</h5>
                                            <div id="map" style="width: 100%; height: 300px; border-radius: 8px;"></div>
                                        </div>

                                        <!-- Image Gallery -->
                                    <div class="card-modern p-4 mb-4">
                                            <h5 class="fw-bold mb-3"><i class="fa-solid fa-images me-2"></i>Vehicle Images</h5>
                                            <div id="galleryCarousel" class="carousel slide" data-bs-ride="carousel">
                                                <div class="carousel-inner rounded-4">
                                                    <div class="carousel-item active">
                                                        <img src="${data.image}"
                                                            class="d-block w-100"
                                                            alt="Main vehicle image"
                                                            style="height: 200px; object-fit: cover;">
                                                    </div>
                                                    ${data.additionalImages.map((img, index) => `
                                                                                                <div class="carousel-item">
                                                                                                    <img src="${img}"
                                                                                                        class="d-block w-100"
                                                                                                        alt="Vehicle image ${index + 1}"
                                                                                                        style="height: 200px; object-fit: cover;">
                                                                                                </div>`).join('')}
                                                </div>
                                                <button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev">
                                                    <span class="carousel-control-prev-icon"></span>
                                                </button>
                                                <button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next">
                                                    <span class="carousel-control-next-icon"></span>
                                                </button>
                                            </div>
                                        </div>


                                        <!-- Recent Shipments -->
                                        <div class="card-modern p-4">
                                            <h5 class="fw-bold mb-3">Recent Shipments</h5>
                                            <div class="row g-3">
                                                ${data.recent_shipments && data.recent_shipments.length > 0 ?
                                                    data.recent_shipments.map(shipment => `
                                                                                                                <div class="col-12">
                                                                                                                    <div class="card-modern p-3">
                                                                                                                        <h6 class="fw-bold mb-2">${shipment.name}</h6>
                                                                                                                        <p class="text-muted small mb-2">
                                                                                                                            ${shipment.pickup} → ${shipment.delivery}
                                                                                                                        </p>
                                                                                                                        <a href="#"
                                                                                                                        class="btn btn-modern btn-sm w-100"
                                                                                                                        data-id="${shipment.id}">
                                                                                                                            View Details
                                                                                                                        </a>
                                                                                                                    </div>
                                                                                                                </div>`).join('') :
                                                    '<p class="text-muted">No recent shipments</p>'}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            `;

                            $("#shipment-container").html(shipmentHtml);

                            $('.select2').select2({
                                width: '100%'
                            });

                            $.ajax({
                                url: "{{ route('user.vehicleLists') }}",
                                type: "GET",
                                dataType: "json",
                                success: function(response) {
                                    if (response.success) {
                                        $.each(response.vehicles, function(key, vehicle) {
                                            $("#vehicleDropdown").append(
                                                `<option value="${vehicle.id}">${vehicle.name}</option>`
                                            );
                                        });
                                    }
                                }
                            });

                            //Map
                            const pickupZip = `${data.pickup_zipcode}`;
                            const deliveryZip = `${data.delivery_zipcode}`;

                            const map = initializeMap();
                            let pickupCoords = null;
                            let deliveryCoords = null;

                            function initializeMap() {
                                var map = L.map('map').setView([37.0902, -95.7129],
                                    5);

                                L.tileLayer(
                                    'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
                                        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/">CARTO</a>'
                                    }).addTo(map);

                                return map;
                            }

                            function addMarkerPaid(zip, label, callback) {
                                $.getJSON(
                                    `https://nominatim.openstreetmap.org/search?format=json&country=us&postalcode=${zip}`,
                                    function(data) {
                                        if (data.length > 0) {
                                            var lat = parseFloat(data[0].lat);
                                            var lon = parseFloat(data[0].lon);

                                            var marker = L.marker([lat, lon]).addTo(map);
                                            marker.bindPopup(
                                                    `<b>${label} Location</b><br>Zip: ${zip}`)
                                                .openPopup();

                                            if (label === "Pickup") {
                                                pickupCoords = {
                                                    lat,
                                                    lon
                                                };
                                            } else {
                                                deliveryCoords = {
                                                    lat,
                                                    lon
                                                };
                                            }

                                            if (pickupCoords && deliveryCoords) {
                                                drawRouteWithDistancePaid(pickupCoords,
                                                    deliveryCoords);
                                            }

                                            callback({
                                                lat,
                                                lon
                                            });
                                        } else {
                                            alert(
                                                `Location not found for ${label} zip code: ${zip}`
                                            );
                                        }
                                    }).fail(function() {
                                    console.error(`Error fetching ${label} location.`);
                                });
                            }

                            function addMarkerFree(zip, lat, lon, label, callback) {
                                var marker = L.marker([lat, lon]).addTo(map);
                                marker.bindPopup(
                                        `<b>${label} Location</b><br>Zip: ${zip}`)
                                    .openPopup();

                                if (label === "Pickup") {
                                    pickupCoords = {
                                        lat,
                                        lon
                                    };
                                } else {
                                    deliveryCoords = {
                                        lat,
                                        lon
                                    };
                                }

                                if (pickupCoords && deliveryCoords) {
                                    drawRouteWithDistancePaid(pickupCoords, deliveryCoords);
                                }

                                callback({
                                    lat,
                                    lon
                                });
                            }

                            function drawRouteWithDistancePaid(coord1, coord2) {
                                const url =
                                    `/api/user/get-route?start=${coord1.lon},${coord1.lat}&end=${coord2.lon},${coord2.lat}`;

                                $.getJSON(url, function(response) {
                                    if (response.routes && response.routes.length > 0) {
                                        const route = response.routes[0];

                                        if (route.summary.distance) {
                                            const distance = route.summary.distance / 1609.34;
                                            const routeCoords = polyline.decode(route.geometry);
                                            const leafletCoords = routeCoords.map(coord => [
                                                coord[0], coord[1]
                                            ]);

                                            drawPolylineAndLabel(leafletCoords, distance);
                                        } else {
                                            fallbackToVincenty(coord1, coord2);
                                        }
                                    } else {
                                        fallbackToVincenty(coord1, coord2);
                                    }
                                }).fail(function(jqXHR, textStatus, errorThrown) {
                                    fallbackToVincenty(coord1, coord2, true);
                                });
                            }

                            function fallbackToVincenty(coord1, coord2, isVincenty = false) {
                                const vincentyDistance = calculateVincentyDistance(coord1, coord2);
                                const leafletCoords = [
                                    [coord1.lat, coord1.lon],
                                    [coord2.lat, coord2.lon]
                                ];

                                drawPolylineAndLabel(leafletCoords, vincentyDistance, isVincenty);
                            }

                            function drawPolylineAndLabel(leafletCoords, distance, isVincenty) {
                                const polylineLayer = L.polyline(leafletCoords, {
                                    color: 'blue',
                                    weight: 4,
                                    opacity: 0.7
                                }).addTo(map);

                                const midIndex = Math.floor(leafletCoords.length / 2);
                                const midLat = leafletCoords[midIndex][0];
                                const midLon = leafletCoords[midIndex][1];

                                const distanceLabel = L.divIcon({
                                    className: 'distance-label',
                                    html: isVincenty ?
                                        `<b>${distance.toFixed(2)} miles (straight-line distance, actual travel distance may vary)</b>` :
                                        `<b>${distance.toFixed(2)} miles</b>`,
                                    iconSize: [150, 40]
                                });

                                L.marker([midLat, midLon], {
                                    icon: distanceLabel
                                }).addTo(map);
                            }

                            function calculateVincentyDistance(coord1, coord2) {
                                const toRad = deg => deg * Math.PI / 180;
                                const a = 6378137;
                                const f = 1 / 298.257223563;
                                const b = (1 - f) * a;
                                const L = toRad(coord2.lon - coord1.lon);
                                const U1 = Math.atan((1 - f) * Math.tan(toRad(coord1.lat)));
                                const U2 = Math.atan((1 - f) * Math.tan(toRad(coord2.lat)));
                                let sinU1 = Math.sin(U1),
                                    cosU1 = Math.cos(U1);
                                let sinU2 = Math.sin(U2),
                                    cosU2 = Math.cos(U2);
                                let lambda = L,
                                    lambdaP, iterLimit = 100;
                                let sinLambda, cosLambda, sinSigma, cosSigma, sigma, sinAlpha,
                                    cos2Alpha, cos2SigmaM, C;

                                do {
                                    sinLambda = Math.sin(lambda);
                                    cosLambda = Math.cos(lambda);
                                    sinSigma = Math.sqrt((cosU2 * sinLambda) ** 2 + (cosU1 * sinU2 -
                                        sinU1 * cosU2 * cosLambda) ** 2);
                                    if (sinSigma === 0) return 0;
                                    cosSigma = sinU1 * sinU2 + cosU1 * cosU2 * cosLambda;
                                    sigma = Math.atan2(sinSigma, cosSigma);
                                    sinAlpha = cosU1 * cosU2 * sinLambda / sinSigma;
                                    cos2Alpha = 1 - sinAlpha * sinAlpha;
                                    cos2SigmaM = cosSigma - 2 * sinU1 * sinU2 / cos2Alpha;
                                    C = f / 16 * cos2Alpha * (4 + f * (4 - 3 * cos2Alpha));
                                    lambdaP = lambda;
                                    lambda = L + (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (
                                        cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM ** 2)));
                                } while (Math.abs(lambda - lambdaP) > 1e-12 && --iterLimit > 0);

                                if (iterLimit === 0) return NaN;

                                const uSq = cos2Alpha * (a * a - b * b) / (b * b);
                                const A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 *
                                    uSq)));
                                const B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq)));
                                const deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-
                                    1 + 2 * cos2SigmaM ** 2) - B / 6 * cos2SigmaM * (-3 +
                                    4 * sinSigma ** 2) * (-3 + 4 * cos2SigmaM ** 2)));
                                const distance = b * A * (sigma - deltaSigma);

                                return distance / 1609.34;
                            }

                            if (data.p_latitude !== null && data.p_longitude !== null && data
                                .d_latitude !== null && data.d_longitude !== null && data.p_latitude !==
                                '' && data.p_longitude !== '' && data.d_latitude !== '' && data
                                .d_longitude !== '') {
                                addMarkerFree(pickupZip, data.p_latitude, data.p_longitude, "Pickup",
                                    () => {});
                                addMarkerFree(deliveryZip, data.d_latitude, data.d_longitude,
                                    "Delivery", () => {});
                            } else {
                                addMarkerPaid(pickupZip, "Pickup", () => {});
                                addMarkerPaid(deliveryZip, "Delivery", () => {})
                            }


                        } else {
                            $("#shipment-container").html("<p>No shipment found.</p>");
                        }
                    },
                    error: function(xhr) {
                        $(".spinner-border").hide();
                        console.error("Error:", xhr.responseText);
                        $("#shipment-container").html("<p>Error loading shipment details.</p>");
                    },
                });
            }

            fetchShipmentDetails(shipmentId);

            $(document).on("submit", "#acceptOfferForm", function(event) {
                event.preventDefault();

                if ($("#extendedTimeframe").is(":hidden")) {
                    $("#extendedTimeframe select, #extendedTimeframe input").val(null);
                }


                if ($("#regularTimeframe").is(":hidden")) {
                    $("#regularTimeframe select, #regularTimeframe input").val(null);
                }

                let serviceType = $("#serviceTypeDropdown").val();
                let vehicle = $("#vehicleDropdown").val();
                let bid_price_final = $("#bid_price").val();

                if (bid_price_final <= 0) {
                    Swal.fire({
                        icon: "error",
                        title: "Bid Price Required",
                        text: "Please enter a bid price before submitting.",
                    });
                    return;
                }


                if (!serviceType || !vehicle) {
                    Swal.fire({
                        icon: "error",
                        title: "Missing Fields!",
                        text: "Please select both Service Type and Vehicle before submitting.",
                    });
                    return;
                }


                let formData = $(this).serialize();

                Swal.fire({
                    title: "Confirm Acceptance",
                    text: "Are you sure you want to accept this offer?",
                    icon: "question",
                    showCancelButton: true,
                    confirmButtonText: "Yes, Accept",
                    cancelButtonText: "Cancel",
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ route('user.acceptOffer') }}",
                            method: "POST",
                            data: formData,
                            dataType: "json",
                            beforeSend: function() {
                                $(".accept-offer-btn").prop("disabled", true).text(
                                    "Processing...");
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        icon: "success",
                                        title: "Offer Accepted!",
                                        text: "Your offer has been accepted successfully.",
                                    }).then(() => {
                                        fetchShipmentDetails(shipmentId);
                                        setTimeout(function() {
                                            fetchActiveOffers(
                                                shipmentId);
                                        }, 2000);
                                    });
                                } else {
                                    Swal.fire({
                                        icon: "error",
                                        title: "Failed",
                                        text: response.message ||
                                            "Could not accept the offer. Please try again.",
                                    });
                                }
                            },
                            error: function(xhr) {
                                let errorMessage =
                                    "An error occurred while updating the settings. Please try again.";
                                if (xhr.status === 400 && xhr.responseJSON && xhr
                                    .responseJSON.message) {
                                    errorMessage = xhr.responseJSON.message;
                                }
                                Swal.fire({
                                    title: "Error",
                                    text: errorMessage,
                                    icon: "error"
                                });
                            },
                            complete: function() {
                                $(".accept-offer-btn").prop("disabled", false).text(
                                    "Accept Offer");
                            }
                        });
                    }
                });
            });

            function fetchActiveOffers(shipmentId) {
                $(".spinner-border").show();

                $.ajax({
                    url: '{{ route('user.getOffer') }}',
                    method: "GET",
                    data: {
                        id: shipmentId
                    },
                    dataType: "json",
                    success: function(response) {
                        $(".spinner-border").hide();
                        let offerHtml = "";

                        if (response.success) {
                            if (response.offers.length > 0) {
                                $.each(response.offers, function (index, offer) {
                                    offerHtml += `
        <div class="card-modern offer-card p-4 mb-4 border rounded-4 shadow-lg">
            <div class="d-flex align-items-start gap-4">
                <!-- Company Info -->
                <div class="company-brand text-center">
                    <img src="${offer.company_logo}" class="company-logo rounded-circle border shadow-sm" alt="${offer.company_name}">
                    ${offer.is_you ? '<span class="badge bg-primary mt-2 d-block px-3 py-1 fw-semibold">Your Offer</span>' : ''}
                </div>

                <!-- Offer Details -->
                <div class="flex-grow-1">
                    <!-- Company Header -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h4 class="company-name mb-1 fw-bold text-dark">${offer.company_name}</h4>
                            <div class="rating-section">
                                ${offer.rating == 0
                                        ? '<span class="text-muted small">Rating Not Available</span>'
                                        : `
                                        <span class="badge bg-warning text-dark rating-badge px-2 py-1">${offer.rating}</span>
                                        ${'<i class="fas fa-star text-warning"></i>'.repeat(Math.floor(offer.rating))}
                                        ${offer.rating % 1 !== 0 ? '<i class="fas fa-star-half-alt text-warning"></i>' : ''}
                                    `}
                            </div>
                        </div>

                        <button class="btn status-pill ${offer.status.toLowerCase()} offer-status text-capitalize fw-bold px-4 py-2 rounded-pill"
                            data-id="${offer.id}"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offerDetailsCanvas">
                            ${offer.status}
                        </button>
                    </div>

                    <!-- Offer Details -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="price-display d-flex align-items-center">
                            <span class="currency text-success fw-bold me-1">$</span>
                            <span class="amount text-success fw-bold fs-3">
                                ${new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(parseFloat(offer.price))}
                            </span>

                        </div>
                        <div class="service-type text-muted d-flex align-items-center">
                            <i class="fas fa-truck me-2 text-primary"></i>
                            <span class="small fw-semibold">${offer.service_type}</span>
                        </div>
                    </div>

                    <!-- Decline Reason -->
                    ${offer.decline_reason
                                        ? `<div class="alert alert-danger d-flex align-items-center small p-2">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                <strong>Declined:</strong> ${offer.decline_reason}
                           </div>`
                                        : ''}
                </div>
            </div>
        </div>`;
                                });

                            } else {
                                offerHtml = `<div class="empty-state card-modern p-5 text-center">
                                <i class="fas fa-box-open fs-2 text-muted mb-3"></i>
                                <p class="text-muted mb-0">No active offers available</p>
                             </div>`;
                            }
                        } else {
                            offerHtml = `<div class="card-modern p-4 text-center">
                                <p class="text-muted mb-0">${response.message}</p>
                             </div>`;
                        }

                        $("#active-offers-container").html(offerHtml);
                    },
                    error: function(xhr) {
                        $(".spinner-border").hide();
                        $("#active-offers-container").html(`
                    <div class="error-state card-modern p-4 text-center">
                        <i class="fas fa-exclamation-triangle text-danger mb-2"></i>
                        <p class="text-danger mb-0">Error loading offers</p>
                    </div>
                `);
                    }
                });
            }
            
            setInterval(() => {
                fetchActiveOffers(shipmentId);
            }, 15000);

            setTimeout(function() {
                fetchActiveOffers(shipmentId);
            }, 2000);

            $(document).on('click', '.offer-status', function() {
                var id = $(this).data('id');

                var loader = `<div class="d-flex justify-content-center align-items-center" style="height: 100%;">
                    <div class="ripple-loader"></div>
                  </div>`;
                $('#offer-details-content').html(loader);

                var offcanvas = new bootstrap.Offcanvas(document.getElementById('offerDetailsCanvas'));
                offcanvas.show();

                $.ajax({
                    url: '{{ route('user.getOfferedShipment') }}',
                    type: 'GET',
                    data: {
                        id: id
                    },
                    success: function(response) {
                        setTimeout(function() {
                            let timeRemaining = getTimeRemaining(response.end_date);
                            var offerDetails = `
                                <div class="offer-details-container">
                                    <div class="offer-header d-flex align-items-center justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <img src="${response.company_logo}" class="rounded-circle" alt="${response.company_name} Logo" width="80">
                                            <div class="ms-3">
                                                <h4 class="fw-bold">${response.company_name}</h4>
                                                    ${response.rating == 0 ? '<span class="orange">Rating Not Available</span>' : `
                                                        <span class="badge bg-warning" style="background-color: #FF7101 !important;">${response.rating}</span>  
                                                        ${'<i class="fas fa-star orange"></i>'.repeat(Math.floor(response.rating))} 
                                                        ${response.rating % 1 !== 0 ? '<i class="fas fa-star-half-alt orange"></i>' : ''}
                                                    `}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="offer-summary mt-4 p-3 border rounded">
                                        <h5 class="text-primary">${response.service_type}</h5>
                                        <p class="text-muted mb-0">${response.pickup_text} </p>
                                        <p class="text-muted">${response.delivery_text} </p>
                                        ${(response.status == 1 && response.user_check) ? `<button class="btn btn-danger mt-2 delete-offer" data-id="${response.id}">X Delete</button>` : ''}
                                        <div class="offer-price text-primary fw-bold fs-3 mt-3">$${response.price}</div>
                                        <small class="text-muted">No Hidden Fees</small>
                                    </div>

                                    <div class="text-danger mt-3">⏱ ${timeRemaining}</div>

                                    <p class="text-muted mt-2">Offer Placed: ${response.offer_placed_date}</p>

                                    <h5 class="fw-bold mt-4">Offer Details</h5>
                                    <table class="table">
                                        <tr>
                                            <th>Transport Mode</th>
                                            <td>${response.service_type}</td>
                                            <th>Vehicle Type</th>
                                            <td>${response.vehicle_type}</td>
                                        </tr>
                                        <tr>
                                            <th>Payment Acceptance</th>
                                            <td colspan="3">${response.payment_acceptance || "N/A"}</td>
                                        </tr>
                                        <tr>
                                            <th>Payment Terms</th>
                                            <td colspan="3">${response.payment_method || "N/A"}</td>
                                        </tr>
                                        <tr>
                                            <th>Additional Information</th>
                                            <td colspan="3" data-full-text="${response.additional_info}">
                                                ${truncateText(response.additional_info)}
                                                ${response.additional_info && response.additional_info.length > 50
                                                    ? `<a href="#" class="view-more" data-full-text="${response.additional_info}">view more</a>`
                                                    : ''}
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>Broker's Terms</th>
                                            <td colspan="3" data-full-text="${response.brokers_terms}">
                                                ${truncateText(response.brokers_terms)}
                                                ${response.brokers_terms && response.brokers_terms.length > 50
                                                    ? `<a href="#" class="view-more" data-full-text="${response.brokers_terms}">view more</a>`
                                                    : ''}
                                            </td>
                                        </tr>
                                    </table>

                                    <h5 class="fw-bold mt-4">Questions on this Offer</h5>
                                    <p class="text-muted">${response.questions || "No Questions on this Offer"}</p>
                                </div>
                            `;

                            $('#offer-details-content').html(offerDetails);
                        }, 1500);
                    },
                    error: function() {
                        setTimeout(function() {
                            $('#offer-details-content').html(
                                '<p class="text-danger text-center">Failed to load offer details. Please try again.</p>'
                            );
                        }, 1500);
                    }
                });
            });

            $('#settingsModal').on('show.bs.modal', function() {
                $.ajax({
                    url: "{{ route('user.getServicePaymentInfo') }}",
                    method: "GET",
                    success: function(response) {
                        $('#offer-standard').prop('checked', response.offer_expiration ===
                            "standard");
                        $('#note_to_shipping_customer').val(response.note_to_shipping_customer);

                        let paymentMethods = JSON.parse(response.payment_methods || '[]');
                        let paymentAccepted = JSON.parse(response.payment_accepted || '[]');

                        paymentMethods.forEach(function(method) {
                            $(`#${method}`).prop('checked', true);
                        });

                        paymentAccepted.forEach(function(accepted) {
                            $(`#${accepted}`).prop('checked', true);
                        });

                        $('#additional_payment_terms').val(response.additional_payment_terms);
                        $('#standard_terms').val(response.standard_terms);
                    },
                    error: function() {
                        console.log("Error fetching settings.");
                    }
                });
            });

            $("#offerSettingsForm").validate({
                rules: {
                    note_to_shipping_customer: "required",
                    additional_payment_terms: "required",
                    standard_terms_conditions: {
                        required: true,
                        minlength: 10
                    },
                    'payment_methods[]': {
                        required: true,
                        minlength: 1
                    },
                    'payment_accepted[]': {
                        required: true,
                        minlength: 1
                    }
                },
                messages: {
                    note_to_shipping_customer: "Please provide a note for the shipping customer.",
                    additional_payment_terms: "Please specify additional payment terms.",
                    standard_terms_conditions: {
                        required: "Please provide the standard terms and conditions.",
                        minlength: "Standard terms and conditions must be at least 10 characters long."
                    },
                    'payment_methods[]': "At least one payment method.",
                    'payment_accepted[]': "At least one payment acceptance option."
                },
                errorPlacement: function(error, element) {
                    if (element.attr("type") === "checkbox" || element.attr("type") === "radio") {
                        error.insertAfter(element.closest('.col-md-3').find('.form-check').last());
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    Swal.fire({
                        title: "Confirm Submission",
                        text: "Are you sure you want to update the offer settings?",
                        icon: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#3085d6",
                        cancelButtonColor: "#d33",
                        confirmButtonText: "Yes, submit it!"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: "{{ route('user.storeServicePaymentInfo') }}",
                                type: "POST",
                                data: $(form).serialize(),
                                dataType: "json",
                                success: function(response) {
                                    Swal.fire({
                                        title: "Success!",
                                        text: "Offer settings have been successfully updated.",
                                        icon: "success"
                                    }).then(() => {
                                        $('#settingsModal').modal('hide');
                                        form.reset();
                                    });
                                },
                                error: function(xhr, status, error) {
                                    Swal.fire({
                                        title: "Error",
                                        text: "An error occurred while updating the settings. Please try again.",
                                        icon: "error"
                                    });
                                }
                            });
                        }
                    });
                }
            });


            $(document).on('click', '.delete-offer', function() {
                var offerId = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ route('user.updateOfferStatus') }}',
                            type: 'POST',
                            data: {
                                id: offerId,
                                shipment: shipmentId,
                                status: 3
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire(
                                        'Deleted!',
                                        'Your offer has been deleted.',
                                        'success'
                                    );
                                    $('#offerDetailsCanvas').offcanvas(
                                        'hide');
                                    fetchShipmentDetails(shipmentId);
                                    setTimeout(function() {
                                        fetchActiveOffers(shipmentId);
                                    }, 2000);
                                } else {
                                    Swal.fire(
                                        'Error!',
                                        'Failed to delete the offer. Please try again.',
                                        'error'
                                    );
                                }
                            },
                            error: function() {
                                Swal.fire(
                                    'Error!',
                                    'An error occurred. Please try again.',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });

            $(document).on('submit', '#askQuestionForm', function(e) {
                e.preventDefault();
                let formData = $(this).serialize();
                $.ajax({
                    url: '{{ route('user.submitShipmentQuestion') }}',
                    method: "POST",
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: 'Question submitted successfully.',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                fetchShipmentDetails(shipmentId);
                                setTimeout(function() {
                                    fetchActiveOffers(shipmentId);
                                }, 2000);
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Error submitting question.',
                                confirmButtonText: 'Try Again'
                            });
                        }
                    },
                    error: function(xhr) {
                        console.error("Error:", xhr.responseText);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'An error occurred while submitting the question.',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });

            $(document).on('click', '#questions-container .submit-answer', function(e) {
                e.preventDefault();

                let form = $(this).closest('.answer-form');
                let formData = form.serialize();

                $.ajax({
                    url: '{{ route('user.submitShipmentQuestionAnswer') }}',
                    method: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                title: "Success",
                                text: "Your answer has been submitted successfully!",
                                icon: "success",
                                button: "OK"
                            }).then(() => {
                                fetchShipmentDetails(shipmentId);
                                setTimeout(function() {
                                    fetchActiveOffers(shipmentId);
                                }, 2000);
                            });
                        } else {
                            Swal.fire({
                                title: "Error",
                                text: response.message ||
                                    "There was an error submitting your answer.",
                                icon: "error",
                                button: "Try Again"
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: "Error",
                            text: xhr.responseJSON ? xhr.responseJSON.message :
                                "An unexpected error occurred.",
                            icon: "error",
                            button: "OK"
                        });
                    }
                });
            });

            function getTimeRemaining(endDate) {
                if (!endDate) return "No Expiration";

                let endTime = new Date(endDate);
                let now = new Date();
                let timeDiff = endTime.getTime() - now.getTime();

                if (timeDiff <= 0) return "Expired";

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

                let dayText = days === 1 ? "day" : "days";
                let hourText = hours === 1 ? "hour" : "hours";
                let minuteText = minutes === 1 ? "minute" : "minutes";

                return `${days} ${dayText}, ${hours} ${hourText}, ${minutes} ${minuteText} left`;
            }



            $(document).on("click", ".increment", function() {
                let input = $(this).siblings("input");
                let value = parseInt(input.val()) || 0;
                input.val(value + 1);
            });

            $(document).on("click", ".decrement", function() {
                let input = $(this).siblings("input");
                let value = parseInt(input.val()) || 0;
                if (value > 1) {
                    input.val(value - 1);
                }
            });

            let regularLabel = "Extended Timeframe";
            let extendedLabel = "Regular";

            $(document).on("click", ".update-offer-settings", function() {

                let isRegular = $(".timeframe-container").is(":visible");

                if (isRegular) {
                    $(".timeframe-container").hide();
                    $(".date-range-container").show();
                    $(this).text(extendedLabel);
                } else {
                    $(".timeframe-container").show();
                    $(".date-range-container").hide();
                    $(this).text(regularLabel);
                }
            });


            $(document).on('click', '.view-more', function(e) {
                e.preventDefault();
                const parent = $(this).closest('td');
                const fullText = parent.data('full-text') || $(this).data('full-text');

                if ($(this).text() === 'view more') {
                    parent.html(
                        `${fullText} <a href="#" class="view-more" data-full-text="${fullText}">view less</a>`
                    );
                } else {
                    parent.html(
                        `${truncateText(fullText)} <a href="#" class="view-more" data-full-text="${fullText}">view more</a>`
                    );
                }
            });

            function truncateText(text) {
                if (!text || text.length === 0) return "N/A";
                return text.length > 50 ? text.substring(0, 50) + '...' : text;
            }

            $(document).on('hidden.bs.offcanvas', '#offerDetailsCanvas', function() {
                $('.offcanvas-backdrop').css('opacity', '0');
                $('body').css('overflow', 'auto');
            });

            $(document).on("input", "#bid_price", function() {
                let bidAmount = $(this).val();

                if (bidAmount) {
                    $.ajax({
                        url: '{{ route('user.calcutateBidPrice') }}',
                        method: "POST",
                        data: {
                            bid_price: bidAmount,
                            _token: $('meta[name="csrf-token"]').attr("content"),
                        },
                        success: function(response) {
                            if (response.total_price) {
                                $("#bidCalculatorIcon").attr("data-bs-original-title",
                                    `$${response.total_price}`);
                                let tooltip = bootstrap.Tooltip.getInstance(
                                    "#bidCalculatorIcon");

                                $('#bid_price_final').val(response.total_price);
                                if (tooltip) {
                                    tooltip.dispose();
                                }
                                new bootstrap.Tooltip("#bidCalculatorIcon").show();
                            }
                        },
                        error: function() {
                            $("#bidCalculatorIcon").attr("data-bs-original-title",
                                "Invalid Input");
                        }
                    });
                } else {
                    let tooltip = bootstrap.Tooltip.getInstance("#bidCalculatorIcon");
                    if (tooltip) {
                        tooltip.dispose();
                    }
                }
            });
        });
    </script>
@endpush