@extends('front.layouts-user.master')

@section('title', 'Shipment Details')

@section('content')

    <style>
        .text-gradient {
            background: linear-gradient(45deg, #2b5876, #4e4376);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .icon-lg {
            width: 45px;
            height: 45px;
        }

        .timeline-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .timeline-list li:last-child {
            border-bottom: 0;
        }

        .map-overlay {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.95);
            /* min-width: 250px; */ 
        }

        .rounded-4 {
            border-radius: 1.5rem;
        }
    </style>

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

@endsection

@push('scripts')
    <script>
        document.querySelectorAll('.timeline-list li').forEach(item => {
            item.addEventListener('mouseover', () => {
                item.style.transform = 'translateX(5px)';
                item.style.transition = 'transform 0.3s ease';
            });
            item.addEventListener('mouseout', () => {
                item.style.transform = 'translateX(0)';
            });
        });
    </script>

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

            const formatCurrency = (amount) => {
                const num = parseFloat(amount);
                if (isNaN(num)) return "$0.00";

                return `$${new Intl.NumberFormat('en-US', { 
                    minimumFractionDigits: 2, 
                    maximumFractionDigits: 2 
                }).format(num)}`;
            };


            $.ajax({
                url: '{{ route('findShipment') }}',
                method: "GET",
                data: { id: shipmentId, viewBooked: true },
                dataType: "json",
                success: function(response) {                    
                    const buildSection = (title, data, iconClass, badgeClass) => `
                        <div class="p-4 bg-light rounded-4">
                            <div class="d-flex align-items-center gap-3 mb-3">
                                <div class="icon-lg ${badgeClass} text-white rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="bi ${iconClass}"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-0">${title}</h6>
                                    <span class="text-muted">${data.address}</span>
                                </div>
                            </div>
                            <ul class="list-unstyled ps-5 timeline-list">
                                ${Object.entries(data.details).map(([key, value]) => `
                                    <li class="d-flex justify-content-between">
                                        <span>${key}</span>
                                        <strong>${value}</strong>
                                    </li>
                                `).join('')}
                            </ul>
                        </div>
                    `;

                    


                    const { data } = response;
                    const safeEncode = (str) => encodeURIComponent(str || '');

                    const pickupParts = data.pickup.split('-');
                    const deliveryParts = data.delivery.split('-');

                    const pickupFormatted = `${pickupParts[2]}, ${pickupParts[1]} ${pickupParts[0]}, USA`;
                    const deliveryFormatted = `${deliveryParts[2]}, ${deliveryParts[1]} ${deliveryParts[0]}, USA`;

                    const mapUrl = `https://maps.google.com/?q=${safeEncode(pickupFormatted)}&destination=${safeEncode(deliveryFormatted)}&output=embed`;

                    const pickupData = {
                        address: data.pickup,
                        details: {
                            'Est. Window': data.pickup_text,
                            'Contact': data.user_name,
                            'Phone': data.user_phone || '(000) 000-0000'
                        }
                    };

                    const deliveryData = {
                        address: data.delivery,
                        details: {
                            'Est. Window': data.delivery_text,
                            'Contact': data.user_name,
                            'Phone': data.user_phone || '(000) 000-0000'
                        }
                    };

                        const vehicleDetails = (response.multiple_shipment_details || []).map((vehicle, index) => {
                        const attributes = typeof vehicle.attributes === 'string' ? 
                            JSON.parse(vehicle.attributes) : vehicle.attributes;
                        const vehicleTitle = (vehicle.year && vehicle.make && vehicle.model)
                                            ? `${vehicle.year} ${vehicle.make} ${vehicle.model}`
                                            : (vehicle.title || vehicle.description  || vehicle.additional_info || data.name || "N/A");

                        return `
                            <div class="p-3 border rounded-4 mb-3">
                                <h6 class="fw-bold mb-2">#${index + 1}. ${vehicleTitle}</h6>
                                ${Object.entries(attributes).map(([key, value]) => `
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <span class="text-muted">${key.replace(/_/g, ' ').toUpperCase()}</span>
                                        <span class="fw-bold ${value ? 'text-success' : 'text-danger'}">
                                            ${value ? '✅' : '❌'}
                                        </span>
                                    </div>
                                `).join('')}
                            </div>
                        `;
                    }).join('');

                    const shipmentHtml = `
                        <div class="container mt-4">
                            <div class="card p-4 shadow-lg border-0" style="border-radius: 20px;">
                                <!-- Header Section -->
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <div>
                                        <h1 class="h3 fw-bold text-gradient">${data.name}</h1>
                                        <div class="d-flex align-items-center gap-2 mt-2">
                                            <span class="badge bg-${data.status_color || 'primary'} rounded-pill px-3 py-2">
                                                Status: ${data.status_name}
                                            </span>
                                            <span class="text-muted">Booking ID: #SHIP-${data.id}</span>
                                        </div>
                                    </div>
                                    <div class="text-end">
                                        <div class="text-muted">Booked on</div>
                                        <div class="fw-bold text-primary">
                                            ${new Date(data.created_at).toLocaleDateString('en-US', { 
                                                year: 'numeric', 
                                                month: 'long', 
                                                day: 'numeric' 
                                            })}
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-4 mb-4">
                                    <div class="col-md-6">
                                        ${buildSection('Pickup Location', pickupData, 'bi-geo-alt-fill', 'bg-success')}
                                    </div>
                                    <div class="col-md-6">
                                        ${buildSection('Delivery Location', deliveryData, 'bi-geo-alt-fill', 'bg-danger')}
                                    </div>
                                </div>

                                <div class="position-relative mb-4">
                                    <div class="map-container rounded-4 overflow-hidden border border-3 border-light shadow-lg">
                                        <iframe class="w-100" style="height: 400px; border: 0;" 
                                            src="${mapUrl}"
                                            loading="lazy"
                                            referrerpolicy="no-referrer-when-downgrade">
                                        </iframe>
                                    </div>
                                    <div class="map-overlay card p-3 shadow">
                                        <div class="d-flex gap-3">
                                            <div class="text-center">
                                                <div class="text-muted">Total Distance</div>
                                                <h4 class="fw-bold mb-0">${data.miles} mi</h4>
                                            </div>
                                            <div class="vr d-none"></div>
                                            <div class="text-center d-none">
                                                <div class="text-muted">Est. Transit Time</div>
                                                <h4 class="fw-bold mb-0">${data.transit_time || '5-7 Days'}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row g-4 mb-4">
                                    <div class="col-md-6">
                                        <div class="p-4 bg-light rounded-4 h-100">
                                            <h6 class="fw-bold mb-4">${![3, 4].includes(data.type_check) ? 'Transporter Profile' : 'Customer Profile'}</h6>
                                            <div class="d-flex align-items-center gap-3">
                                                <img src="${data.user_image || '/images/default-avatar.png'}" 
                                                    class="rounded-circle shadow-sm" 
                                                    alt="User" 
                                                    style="width: 50px; height: 50px; object-fit: cover;">
                                                <div>
                                                    <h5 class="mb-1">${data.user_name}</h5>
                                                    <div class="d-flex flex-column gap-1">
                                                        <a href="mailto:${data.user_email}" class="text-decoration-none">
                                                            <i class="bi bi-envelope me-2"></i>${data.user_email}
                                                        </a>
                                                        <a href="tel:${data.user_phone || '0000000000'}" class="text-decoration-none">
                                                            <i class="bi bi-phone me-2"></i>${data.user_phone || '(000) 000-0000'}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="p-4 text-white rounded-4 h-100" style="background-color: #a0e1c3;">
                                            <h6 class="fw-bold mb-4">Payment Summary</h6>
                                            <div class="d-flex flex-column gap-3">
                                                <div class="d-flex justify-content-between">
                                                    <span style="color:black;">Booked Price</span>
                                                    <strong>${formatCurrency(data.price)}</strong>
                                                </div>
                                                <div class="d-flex justify-content-between">
                                                    <span style="color:black;">Service Fee</span>
                                                    <strong>${formatCurrency(data.company_fees)}</strong>
                                                </div>
                                                <hr class="my-1">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span style="color:black;">Total Payable</span>
                                                    <strong class="h5">
                                                        ${formatCurrency(data.price)}
                                                    </strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="p-4 bg-light rounded-4">
                                    <h6 class="fw-bold mb-4">Shipment Specifications</h6>
                                    <div class="row g-4">
                                        <div class="col-md-4">
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="bi bi-car-front-fill fs-4 text-primary"></i>
                                                <div>
                                                    <div class="text-muted">Transporter Vehicle</div>
                                                    <strong>${data.vehicle_type || 'N/A'}</strong>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="bi bi-truck fs-4 text-primary"></i>
                                                <div>
                                                    <div class="text-muted">Transport Type</div>
                                                    <strong>${data.service_type || 'N/A'}</strong>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                ${vehicleDetails.length ? `
                                    <div class="p-4 bg-light rounded-4 mt-4">
                                        <h6 class="fw-bold mb-4">Additional Vehicle Details</h6>
                                        ${vehicleDetails}
                                    </div>
                                ` : ''}

                                <!-- Action Buttons -->
                                <div class="d-flex gap-3 mt-5">
                                    <a href="/shipment/view/${data.id}" 
                                    class="btn btn-lg btn-dark px-5 rounded-pill">
                                        <i class="bi bi-box-arrow-up-right me-2"></i>View Shipment
                                    </a>
                                    <button class="btn btn-lg btn-outline-dark px-5 rounded-pill support-chat-btn" 
                                            data-id="${data.id}">
                                        <i class="bi bi-chat-dots me-2"></i>Support Chat
                                    </button>
                                </div>
                            </div>
                        </div>
                    `;

                    $("#shipment-details")
                        .html(shipmentHtml)
                        .find('[data-bs-toggle="tooltip"]')
                        .tooltip();
                },
                error: function(xhr) {
                    const errorMessage = xhr.status === 404 ? 
                        "Shipment not found" : 
                        "Failed to load shipment details. Please try again later.";
                    
                    $("#shipment-details").html(`
                        <div class="alert alert-danger mt-4" role="alert">
                            <i class="bi bi-exclamation-octagon me-2"></i>
                            ${errorMessage}
                        </div>
                    `);
                }
            });

        });
    </script>
@endpush