<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shipment Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: #f0f2f5;
            font-family: 'Inter', sans-serif;
        }

        .dashboard-title {
            font-size: 1.7rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #212529;
        }

        .search-bar {
            max-width: 500px;
            margin: 0 auto 2rem auto;
        }

        .search-bar input {
            border-radius: 12px;
            padding: 0.75rem 1rem;
            font-size: 0.95rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        .shipment-card {
            background: #fff;
            border: none;
            border-radius: 14px;
            padding: 1rem 1.2rem;
            /* margin-bottom: 1.2rem; */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.25s ease;
            font-size: 14px;
            height: 100%;
            margin-bottom: -5px;
        }

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

        .shipment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: .8rem;
        }

        .shipment-title {
            font-weight: 600;
            font-size: 1rem;
            color: #212529;
        }

        .status-badge {
            padding: .35rem .7rem;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .status-delivered {
            background: #e6f9ed;
            color: #2f9e44;
        }

        .status-transit {
            background: #e8f1ff;
            color: #1c7ed6;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: .45rem;
        }

        .info-label {
            font-size: 13px;
            color: #6c757d;
            font-weight: 600;
            width: 40%;
        }

        .info-value {
            font-size: 13px;
            font-weight: 500;
            text-align: right;
            width: 60%;
            color: #212529;
        }

        .shipment-stats {
            display: flex;
            justify-content: space-between;
            text-align: center;
            margin: .8rem 0;
            padding: .6rem 0;
            background: #f8f9fa;
            border-radius: 8px;
        }

        .shipment-stats div {
            flex: 1;
        }

        .shipment-stats strong {
            font-size: 15px;
            display: block;
            color: #0d6efd;
        }

        .shipment-footer {
            font-size: 12.5px;
            color: #495057;
            border-top: 1px solid #f0f0f0;
            margin-top: .8rem;
            padding-top: .6rem;
            display: flex;
            justify-content: space-between;
        }

        .shipment-footer span {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .shipment-footer span i {
            color: #0d6efd;
        }

        .pagination-controls {
            margin-top: 1rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container py-4">
        <h2 class="text-center dashboard-title">Shipment Dashboard</h2>

        <!-- Live Search -->
        <div class="search-bar">
            <input type="text" id="searchInput" class="form-control"
                placeholder="🔍 Search shipments by supplier, description, destination...">
        </div>

        <!-- Shipment Cards -->
        <div class="row g-3" id="shipmentContainer">

            <!-- Sample cards (you can duplicate to test pagination) -->
            <div class="col-md-4 shipment-item">
                <div class="shipment-card">
                    <div class="shipment-header">
                        <span class="shipment-title">Shipment #12345</span>
                        <span class="status-badge status-transit">In Transit</span>
                    </div>
                    <div class="info-row">
                        <span><b class="info-label">Booking &nbsp;</b> 25-01-2025 </span>
                        <span style="float: right;"><b class="info-label">Container &nbsp;</b> CNT-7890</span>
                    </div>
                    <div class="info-row"><span class="info-label">Supplier</span><span class="info-value">ABC
                            Traders</span></div>
                    <div class="info-row"><span class="info-label">Description</span><span
                            class="info-value">Electronics</span></div>
                    <div class="shipment-stats">
                        <div><strong>50</strong><small>Cartons</small></div>
                        <div><strong>500</strong><small>Pcs</small></div>
                        <div><strong>1200kg</strong><small>Weight</small></div>
                        <div><strong>1200kg</strong><small>Weight</small></div>
                    </div>
                    <!-- <div class="info-row"><span class="info-label">Container</span><span
                            class="info-value">CNT-4567</span></div> -->
                    <div class="info-row"><span class="info-label">Sailing</span><span
                            class="info-value">12-Sep-2025</span></div>
                    <div class="info-row"><span class="info-label">Destination</span><span
                            class="info-value">Dubai</span></div>
                    <div class="shipment-footer">
                        <span><i class="bi bi-calendar-event"></i> Est: 20-Sep</span>
                        <span><i class="bi bi-box-seam"></i> Del: 25-Sep</span>
                        <span><i class="bi bi-telephone"></i> +971 123456789</span>
                    </div>
                </div>
            </div>

            <!-- Duplicate more .shipment-item here to test pagination -->

        </div>

        <!-- Pagination -->
        <div class="pagination-controls">
            <button class="btn btn-sm btn-outline-primary" id="prevBtn">Prev</button>
            <button class="btn btn-sm btn-outline-primary" id="nextBtn">Next</button>
        </div>
    </div>

    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
    <script>
        const searchInput = document.getElementById("searchInput");
        const shipmentItems = document.querySelectorAll(".shipment-item");
        const prevBtn = document.getElementById("prevBtn");
        const nextBtn = document.getElementById("nextBtn");

        let currentPage = 1;
        const itemsPerPage = 3;

        function getFilteredItems() {
            let filter = searchInput.value.toLowerCase();
            return [...shipmentItems].filter(item =>
                item.innerText.toLowerCase().includes(filter)
            );
        }

        function renderPage() {
            const filteredItems = getFilteredItems();
            const totalPages = Math.ceil(filteredItems.length / itemsPerPage);

            shipmentItems.forEach(item => (item.style.display = "none"));

            filteredItems.forEach((item, index) => {
                if (index >= (currentPage - 1) * itemsPerPage &&
                    index < currentPage * itemsPerPage) {
                    item.style.display = "";
                }
            });

            prevBtn.disabled = currentPage === 1;
            nextBtn.disabled = currentPage === totalPages || totalPages === 0;
        }

        prevBtn.addEventListener("click", () => {
            if (currentPage > 1) {
                currentPage--;
                renderPage();
            }
        });

        nextBtn.addEventListener("click", () => {
            const filteredItems = getFilteredItems();
            const totalPages = Math.ceil(filteredItems.length / itemsPerPage);
            if (currentPage < totalPages) {
                currentPage++;
                renderPage();
            }
        });

        searchInput.addEventListener("keyup", function () {
            currentPage = 1; // reset to first page on search
            renderPage();
        });

        renderPage();
    </script>

</body>

</html>