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

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

@section('content')

    <style>
        .text-muted{
            font-size: 0.9em!important;
        }
        .shipment-card {
            border-radius: 18px;
            border-left: none;
            /*background: linear-gradient(135deg, rgba(255, 113, 1, 0.12), rgba(255, 160, 28, 0.12));*/
            transition: all 0.4s ease-in-out;
            position: relative;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 24px;
            min-height: 220px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 24px;
            backdrop-filter: blur(12px);
        }

        .shipment-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(135deg, #FF7101, #FFA01C);
        }

        .shipment-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
        }

        .metadata-item {
            background: rgba(255, 113, 1, 0.08);
            padding: 14px;
            margin-bottom: 14px;
            border-radius: 14px;
            font-size: 1em;
            font-weight: 600;
            text-align: center;
            box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.04);
            transition: all 0.3s ease-in-out;
        }

        .metadata-item:hover {
            background: rgba(255, 113, 1, 0.18);
        }

        .stats-table {
            background: rgba(255, 113, 1, 0.1);
            border-radius: 14px;
            padding: 20px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .table-stats {
            width: 100%;
            border-collapse: collapse;
        }

        .table-stats td {
            padding: 16px 20px;
            font-size: 1.2rem;
            font-weight: 600;
            border-right: 1px solid #e9ecef;
            color: #333;
            text-align: center;
        }

        .table-stats td:last-child {
            border-right: none;
        }

        .table-stats span {
            font-size: 1.6rem;
            font-weight: bold;
            color: #222;
        }

        @media (max-width: 768px) {
            .table-stats td {
                padding: 12px;
                font-size: 1.1rem;
            }

            .table-stats span {
                font-size: 1.4rem;
            }
        }

        .action-buttons {
            display: flex;
            justify-content: center;
            gap: 18px;
            margin-top: 18px;
        }
        .action-buttons .btn {
            border-radius: 14px;
            padding: 14px 22px;
            font-weight: 600;
            text-align: center;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.1rem;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
        }

        .action-buttons .btn-light {
            border: 1px solid #e0e4e8;
            background: white;
            color: #333;
        }

        .action-buttons .btn-light:hover {
            background: #f5f5f5;
            border-color: #ccc;
        }

        .action-buttons .btn-primary {
            background: linear-gradient(135deg, #FF7101, #FFA01C);
            color: white;
            border: none;
        }

        .action-buttons .btn-primary:hover {
            background: linear-gradient(135deg, #e66400, #ff8000);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        /* === RESPONSIVE DESIGN === */
        @media (max-width: 768px) {
            .action-buttons {
                flex-wrap: wrap;
                gap: 14px;
            }

            .shipment-card {
                padding: 22px;
            }

            .metadata-item {
                font-size: 1.05em;
            }
        }

        .active.badge {
            background: linear-gradient(135deg, #e66400, #ff8000) !important;
            color: white !important;
            font-weight: bold;
            padding: 10px 18px;
            border-radius: 14px;
        }
    </style>

    <style>
        h2.text-primary {
            color: #24272C !important;
        }

        .nav-pills .nav-link {
            background-color: white;
            color: #24272C;
        }

        .nav-pills .nav-link.active {
            background-color: #24272C;
            color: white;
        }

        .nav-pills .nav-link:hover {
            background-color: #24272C;
            color: white;
        }
    </style>

    <div class="container mt-5">
        <h2 class="text-center mb-5 fw-bold text-primary">🚚 My Shipments</h2>

        <ul class="nav nav-pills justify-content-center mb-4" id="shipmentTabs">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="pill" href="#1">Pending</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#2">Assigned</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#3">Picked Up</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#4">Delivered</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#5">Completed</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#6">Cancelled</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#7">Archive</a></li>
        </ul>

        <div class="tab-content">

            <div class="tab-pane fade show active" id="1">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="pending-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="2">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="assigned-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="3">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="picked-up-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="4">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="delivered-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="5">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="completed-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="6">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="cancelled-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="7">
                <div class="card p-4 shadow-lg rounded-lg mb-4">
                    <div id="archive-list"></div>
                    <div class="pagination-container mt-3"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="statusUpdateModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-light border-0">
                    <h5 class="modal-title fw-bold text-primary">Status Update</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <h4 class="fw-bold text-dark">Update Status</h4>
                    <div class="mt-3 d-flex justify-content-center gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="pickedUp" name="status" value="3"
                                checked>
                            <label class="form-check-label fw-semibold" for="pickedUp">🚚 Picked Up</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="delivered" name="status" value="4">
                            <label class="form-check-label fw-semibold" for="delivered">✅ Delivered</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" id="feedback" name="status" value="5">
                            <label class="form-check-label fw-semibold" for="feedback">💬 Feedback</label>
                        </div>
                    </div>
                    <button class="btn btn-primary w-40 m-4 fw-bold py-2" id="updateStatusBtn">Update</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var currentPages = { "1": 1, "2": 1, "3": 1, "4": 1, "5": 1, "6": 1, "7": 1 };
            var interval; // Declare interval outside fetchShipments

            // Initial fetch for the first tab
            fetchShipments("1");

            // Handle tab switch
            $('#shipmentTabs a[data-bs-toggle="pill"]').on('shown.bs.tab', function(e) {
                var tabId = $(e.target).attr('href').substring(1);
                currentPages[tabId] = 1;
                fetchShipments(tabId, 1);
            });

            // Fetch shipments for a specific tab and page
            function fetchShipments(tabId, page = 1) {
                $.ajax({
                    url: '{{ route('user.getShipments') }}',
                    method: 'GET',
                    data: { status: tabId, page: page },
                    success: function(response) {
                        populateShipments(response.data, tabId, response.pagination);
                        currentPages[tabId] = response.pagination.current_page;

                        // Clear existing interval and set a new one
                        if (interval) {
                            clearInterval(interval);
                        }
                        interval = setInterval(() => fetchShipments(tabId, currentPages[tabId]), 15000);
                    },
                    error: function(error) {
                        console.error('Error fetching shipments:', error);
                    }
                });
            }

            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)}`;
            };


            // Populate shipments and pagination
            function populateShipments(shipments, tabId, pagination) {
                var statusLists = {
                    "1": "#pending-list",
                    "2": "#assigned-list",
                    "3": "#picked-up-list",
                    "4": "#delivered-list",
                    "5": "#completed-list",
                    "6": "#cancelled-list",
                    "7": "#archive-list"
                };

                var listHtml = "";

                // Generate shipment cards
                $.each(shipments, function(index, shipment) {
                    let statusClass = shipment.end_date ? 'text-danger' : 'text-success';
                    let statusLabel = shipment.end_date ? shipment.end_date : 'No Expiration';
                    let statusIndicatorClass = shipment.end_date ? 'bg-warning' : 'bg-success';
                    let isOffer = shipment.is_offer ? "Offer" : "Bid";

                        listHtml += `
                        <div class="shipment-card mb-3 p-4 border rounded shadow-sm bg-white position-relative" data-id="${shipment.id}">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="d-flex align-items-center">
                                    <h5 class="fw-bold text-dark me-2">Shipment:</h5>
                                    <span class="fw-semibold text-primary fs-6">${shipment.name}</span>
                                    ${shipment.offer_type === "pro" ? '<span class="badge bg-warning text-dark ms-2 px-2 py-1 rounded">PRO <i class="fas fa-star"></i></span>' : ''}
                                </div>
                                ${tabId == 1 ? `<span class="badge ${statusIndicatorClass} px-3 py-1 text-white active-status-${index}">Active</span>` : ``}
                            </div>

                            <div class="shipment-meta p-3 bg-light rounded mb-3 shadow-sm">
                                <div class="row">
                                    <div class="col-md-4">
                                        <span class="fw-semibold text-muted">Shipment ID:</span>
                                        <span class="text-dark small">${shipment.id}</span>
                                    </div>
                                    <div class="col-md-4">
                                        <span class="fw-semibold text-muted">Posted:</span>
                                        <span class="text-dark small">${shipment.created_at}</span>
                                    </div>
                                    ${tabId == 1 ? `
                                    <div class="col-md-4 countdown-timer" data-end-date="${shipment.end_date}">
                                        <span class="fw-semibold text-muted">Expiring:</span>
                                        <span class="fw-bold small ${statusClass}">${statusLabel}</span>
                                    </div>` : `<div class="col-md-4">
                                        <span class="fw-semibold text-muted">Booked At</span>
                                        <span class="text-dark small">${shipment.booked_date}</span>
                                    </div>`}
                                  
                                </div>
                            </div>

                            <div class="stats-card p-3 bg-white rounded shadow-sm border mb-3">
                                <table class="table-stats text-center w-100">
                                    <tr>
                                        ${shipment.offer_type !== "pro" 
                                            ? (tabId == 1 
                                                ? `
                                                    <td class="px-3">
                                                        <i class="fas fa-chart-bar text-muted"></i>
                                                        <br>
                                                        <span class="fw-bold text-dark small">${shipment.total_offers || 0}</span>
                                                        <br>
                                                        <span class="text-muted small">Total ${isOffer}s</span>
                                                    </td>
                                                    <td class="px-3">
                                                        <i class="fas fa-arrow-down text-success"></i>
                                                        <br>
                                                        <span class="fw-bold text-success small">
                                                            ${shipment.lowest_bid ? formatCurrency(shipment.lowest_bid) : formatCurrency(shipment.offer_price)}
                                                        </span>
                                                        <br>
                                                        <span class="text-muted small">Lowest ${isOffer}</span>
                                                    </td>
                                                    <td class="px-3">
                                                        <i class="fas fa-arrow-up text-danger"></i>
                                                        <br>
                                                        <span class="fw-bold text-danger small">
                                                            ${shipment.highest_bid ? formatCurrency(shipment.highest_bid) : formatCurrency(shipment.offer_price)}
                                                        </span>
                                                        <br>
                                                        <span class="text-muted small">Highest ${isOffer}</span>
                                                    </td>
                                                ` 
                                                : ` <td class="px-3">
                                                        <br>
                                                        <span class="fw-bold text-success small">
                                                            ${shipment.booked_price ? formatCurrency(shipment.booked_price) : formatCurrency(shipment.offer_price)}
                                                        </span>
                                                        <br>
                                                        <span class="text-muted small">Booked Price</span>
                                                    </td>`
                                            ) 
                                            : `
                                                <td class="px-3">
                                                    <i class="fas fa-user-check text-primary"></i>
                                                    <br>
                                                    <span class="fw-bold text-dark small">${shipment.assigned ? 'Yes' : 'No'}</span>
                                                    <br>
                                                    <span class="text-muted small">Assigned</span>
                                                </td>
                                                <td class="px-3">
                                                    <i class="fas fa-user text-muted"></i>
                                                    <br>
                                                    <span class="fw-bold small">${shipment.assignee_name ? shipment.assignee_name : '--'}</span>
                                                    <br>
                                                    <span class="text-muted small">Assigned To</span>
                                                </td>
                                            `
                                        }
                                        <td class="px-3">
                                            <i class="fas fa-question-circle text-warning"></i>
                                            <br>
                                            <span class="fw-bold text-dark small">${shipment.questions || 0}</span>
                                            <br>
                                            <span class="text-muted small">Questions</span>
                                        </td>
                                    </tr>
                                </table>

                            </div>

                            <div class="d-flex justify-content-end gap-2">
                            ${tabId == 1 ? `  
                                <a href="#" class="btn btn-primary btn-sm px-3 d-flex align-items-center manage-bid-btn"
                                    data-id="${shipment.id}" data-offer-type="${shipment.offer_type}">
                                    <i class="fas fa-eye me-1"></i>
                                    ${shipment.offer_type !== "pro" ? `View ${isOffer}s (${shipment.total_offers || 0})` : `View PRO`}
                                </a>` 
                                : `  
                                <a href="/shipment/view/${shipment.id}" class="btn btn-primary btn-sm px-3 d-flex align-items-center">
                                    <i class="fas fa-eye me-1"></i>
                                    View Shipment
                                </a>`}
                                <button class="btn btn-outline-secondary btn-sm px-3">
                                    <i class="fas fa-edit"></i> Edit
                                </button>
                                <button class="btn btn-outline-danger btn-sm px-3">
                                    <i class="fas fa-trash"></i> Delete
                                </button>
                            </div>
                        </div>
                    `;


                });

                // Handle empty shipments
                if (listHtml.trim() === "") {
                    listHtml = `<div class="mb-3 mt-3 p-3 border rounded shadow-sm bg-white">
                            <p class='text-muted'>No shipment found</p>
                        </div>`;
                }

                // Update the shipment list and pagination
                $(statusLists[tabId]).html(listHtml);
                initializeCountdownTimers();

                var paginationHtml = generatePagination(pagination, tabId);
                $(statusLists[tabId]).closest('.tab-pane').find('.pagination-container').html(paginationHtml);
            }

            // Generate pagination HTML
            function generatePagination(pagination, tabId) {
                let html = '<nav><ul class="pagination">';

                // Previous Page
                html += pagination.current_page > 1
                    ? `<li class="page-item"><a class="page-link" href="#" data-page="${pagination.current_page - 1}" data-tab="${tabId}">Previous</a></li>`
                    : '<li class="page-item disabled"><span class="page-link">Previous</span></li>';

                // Page Numbers
                for (let i = 1; i <= pagination.last_page; i++) {
                    html += `<li class="page-item ${i === pagination.current_page ? 'active' : ''}">`;
                    html += `<a class="page-link" href="#" data-page="${i}" data-tab="${tabId}">${i}</a>`;
                    html += '</li>';
                }

                // Next Page
                html += pagination.current_page < pagination.last_page
                    ? `<li class="page-item"><a class="page-link" href="#" data-page="${pagination.current_page + 1}" data-tab="${tabId}">Next</a></li>`
                    : '<li class="page-item disabled"><span class="page-link">Next</span></li>';

                html += '</ul></nav>';
                return html;
            }

            // Handle pagination clicks
            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();
                var page = $(this).data('page');
                var tabId = $(this).data('tab');
                fetchShipments(tabId, page);
            });

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

                    if (!endDate) return;

                    let endTime = new Date(endDate);

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

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

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

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

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

                        $(element).html(
                            `<span class="fw-semibold text-muted">Expiring:</span> ${days}D ${hours}H ${minutes}M ${seconds}S`
                        );
                    }

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

            $(document).on('click', '.shipment-card', function(event) {
                if ($(event.target).closest('.manage-bid-btn, .action-buttons').length) return;
                var shipmentId = $(this).data('id');
                window.location.href = '/shipment-details/' + shipmentId;
            });


            // Handle manage bid button click
            $(document).on('click', '.manage-bid-btn', function(event) {
                event.preventDefault();
                var shipmentId = $(this).data('id');
                var offerType = $(this).data('offer-type');
                var proShipmentUrl = "{{ route('front.proShipment', ['id' => '__ID__']) }}";
                var manageShipmentOfferBidUrl = "{{ route('front.manageShipmentOfferBid', ['id' => '__ID__']) }}";
                var url = offerType === 'pro' ? proShipmentUrl.replace('__ID__', shipmentId) : manageShipmentOfferBidUrl.replace('__ID__', shipmentId);
                window.location.href = url;
            });
        });
    </script>
@endpush