<?php
require("includes/check_auth_user.php");
require("includes/dbconnect.php");
include('includes/function.php');

$zdb = $_SESSION["zdbyear_" . $dbname];
mysqli_select_db($conn, $zdb);
?>

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

<head>
    <meta charset="UTF-8">
    <title>Shipment Details</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        body {
            background: linear-gradient(135deg, #eef2ff, #f8fafc);
            font-family: 'Segoe UI';
        }

        .card-ui {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
        }

        .table thead th {
            position: sticky;
            top: 0;
            background: #0f172a;
            color: #fff;
        }

        .table tbody tr:hover {
            background: #f1f5f9;
        }

        .page-btn {
            border: none;
            padding: 6px 12px;
            margin: 2px;
            border-radius: 8px;
            background: #e2e8f0;
            cursor: pointer;
        }

        .page-btn.active {
            background: #2563eb;
            color: #fff;
        }

        .search-box {
            position: relative;
        }

        .search-box input {
            padding-left: 30px;
        }

        .search-box:before {
            content: "🔍";
            position: absolute;
            left: 8px;
            top: 6px;
        }

        @media (max-width: 768px) {
            .table thead {
                display: none;
            }

            .table tbody tr {
                display: block;
                background: white;
                margin-bottom: 10px;
                border-radius: 10px;
                padding: 10px;
                box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            }

            .table tbody td {
                display: flex;
                justify-content: space-between;
                font-size: 13px;
                padding: 4px 0;
            }

            .table tbody td::before {
                content: attr(data-label);
                font-weight: 600;
                color: #64748b;
            }
        }

        #pagination {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
    </style>
</head>

<body>

    <div class="container py-4">

        <div class="d-flex justify-content-between mb-3">
            <h4>📦 Shipment Details</h4>
            <button onclick="resetFilters()" class="btn btn-sm btn-outline-secondary">Reset</button>
        </div>

        <!-- FILTER -->
        <form id="filterForm" class="card-ui mb-3">
            <div class="row g-2 align-items-center">

                <div class="col-12 col-md-2">
                    <select name="origin" class="form-select filter">
                        <option value="">Origin</option>
                        <?php
                        $res = mysqli_query($conn, "SELECT DISTINCT origin FROM shipment");
                        while ($r = mysqli_fetch_assoc($res)) {
                            echo "<option>{$r['origin']}</option>";
                        }
                        ?>
                    </select>
                </div>

                <div class="col-12 col-md-2">
                    <select name="destination" class="form-select filter">
                        <option value="">Destination</option>
                        <?php
                        $res = mysqli_query($conn, "SELECT DISTINCT destination FROM shipment");
                        while ($r = mysqli_fetch_assoc($res)) {
                            echo "<option>{$r['destination']}</option>";
                        }
                        ?>
                    </select>
                </div>

                <div class="col-12 col-md-3">
                    <select name="container_no[]" id="containerFilter" class="form-select filter" multiple>
                        <?php
                        $res = mysqli_query($conn, "SELECT DISTINCT containerno FROM shipment WHERE containerno!=''");
                        while ($r = mysqli_fetch_assoc($res)) {
                            echo "<option value='{$r['containerno']}'>{$r['containerno']}</option>";
                        }
                        ?>
                    </select>
                </div>

                <div class="col-12 col-md-2">
                    <select name="date_filter" class="form-select filter">
                        <option value="">Date</option>
                        <option value="7">1 Week</option>
                        <option value="10">10 Days</option>
                        <option value="30">1 Month</option>
                        <option value="90">3 Months</option>
                    </select>
                </div>

                <div class="col-md-3 search-box">
                    <input type="text" name="search" id="searchBox" class="form-control"
                        placeholder="Search marka, description...">
                </div>

            </div>
        </form>

        <div class="d-flex justify-content-end mb-2">

            <button type="button" class="btn btn-primary px-4" id="openBulkModal">

                Update Rows
            </button>

        </div>

        <!-- TABLE -->
        <div class="card-ui table-responsive">
            <table class="table table-sm mb-0">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Origin</th>
                        <th>Destination</th>
                        <th>Container No.</th>
                        <th>Marka</th>
                        <th>CTN</th>
                        <th>PCS</th>
                        <th>CBM</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
            <div class="d-flex justify-content-between align-items-center mb-2 px-1">

                <div id="recordInfo" class="fw-semibold text-secondary small">
                    Loading...
                </div>

            </div>
        </div>

        <div id="pagination" class="text-center mt-3"></div>

    </div>

    <div class="modal fade" id="bulkModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title">Update Filtered Shipments</h5>

                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal">
                    </button>
                </div>

                <div class="modal-body">
                    <label class="form-label fw-semibold">Tracking ID</label>
                    <input type="text" id="tracking_id" class="form-control mb-3">

                    <label class="form-label fw-semibold">Shipment Date</label>
                    <input type="date" id="shipmentdate" class="form-control mb-3">

                    <label class="form-label fw-semibold">Departure Date</label>
                    <input type="date" id="departure_date" class="form-control mb-3">

                    <label class="form-label fw-semibold">Arriving Date</label>
                    <input type="date" id="arriving_date" class="form-control mb-3">

                </div>

                <div class="modal-footer">
                    <button class="btn btn-success w-100" id="saveBulk">
                        Update All Filtered Rows
                    </button>
                </div>

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

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="MyScript/shipdetails.js?a=<?= mt_rand() ?>"></script>


</body>

</html>