<?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">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shipment Dashboard</title>

    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">

    <style>
        body {
            background: #f8f9fa;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            border-radius: 15px;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .card-header {
            border-bottom: 1px solid #dee2e6;
            border-top-left-radius: 15px !important;
            border-top-right-radius: 15px !important;
            background: #ffffff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .custom-search {
            max-width: 250px;
        }

        .table {
            margin-bottom: 0;
        }

        .badge {
            font-size: 0.85rem;
            padding: 0.5em 0.8em;
            border-radius: 10px;
        }

        /* Hide default DataTables search */
        .dataTables_wrapper .dataTables_filter {
            display: none;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            border-radius: 8px !important;
        }

        .sktext {
            font-size: 18px;
        }

        .bg-tot {
            background-color: #cfe4fa;
            color: black;
        }

        table.dataTable>tbody>tr.child span.dtr-title {
            display: inline-block;
            min-width: 130px;
            font-weight: bold
        }

        /* Green highlight when a row is expanded (Responsive adds .parent) */
        #shipmentTable tbody tr.parent>* {
            background-color: #d1e7dd !important;
            /* success-subtle */
        }

        /* Optional: make the expand icon green when opened */
        #shipmentTable tbody tr.parent td.dtr-control:before {
            background-color: #198754 !important;
            /* success */
            border-color: #198754 !important;
            color: #fff !important;
        }

        /* (Optional) add a left accent bar when expanded */
        #shipmentTable tbody tr.parent>* {
            box-shadow: inset 4px 0 0 #198754;
        }

        .stat-card {
            border-radius: 20px;
            padding: 10px;
            text-align: center;
            color: #fff;
            font-size: 15px;
            font-weight: bold;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        }

        .stat-number {
            font-size: 2rem;
            margin-top: 10px;
        }

        .shipment-card {
            border-radius: 20px;
            padding: 10px;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        }

        .shipment-date {
            font-size: 0.9rem;
            font-weight: bold;
            opacity: 0.7;
        }

        .progress {
            height: 8px;
            border-radius: 10px;
            margin-top: 5px;
        }

        .days-left {
            font-size: 0.8rem;
            font-weight: bold;
            margin-top: 10px;
            color: #555;
        }
    </style>
</head>

<body>
    <div class="container py-5">

        <!-- Shipment Summary -->
        <div class="row g-4 mb-4">
            <div class="col-md-3">
                <div class="stat-card " style="background-color: #7b2cbf;">
                    <span style="font-size:25px;">Total Shipment</span>
                    <div class="stat-number">120</div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="stat-card bg-warning">
                    <span style="font-size:25px;">At Origin</span>
                    <div class="stat-number">120</div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="stat-card bg-primary">
                    <span style="font-size:25px;">In Transit</span>
                    <div class="stat-number">45</div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="stat-card " style="background-color: #a53860;">
                    <span style="font-size:25px;">At Destination</span>
                    <div class="stat-number">30</div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="stat-card bg-success">
                    <span style="font-size:25px;">Delivered</span>
                    <div class="stat-number">45</div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0 fw-bold text-primary">📦 Shipment Overview</h5>
                <!-- Custom Search Input -->
                <input type="text" id="customSearch" class="form-control custom-search" placeholder="Search...">
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="shipmentTable" class="table table-striped table-bordered nowrap mb-0" style="width:100%">
                        <thead>
                            <tr>
                                <th>Origin</th>
                                <th>Destination</th>
                                <th>Total Shipment</th>
                                <th>At Destination</th>
                                <th>Delivered</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                            $getQuerydata = mysqli_query($conn, "
                                                                SELECT 
                                                                    origin,
                                                                    destination,
                                                                    COUNT(*) AS totalshipment,
                                                                    SUM(CASE WHEN delvdate IS NOT NULL AND delvdate <> '0000-00-00' THEN 1 ELSE 0 END) AS delivered,
                                                                    SUM(CASE WHEN delvdate IS NULL OR arrvport <> '0000-00-00' THEN 1 ELSE 0 END) AS arrvport
                                                                    FROM shipment
                                                                    GROUP BY origin, destination
                                                                    ORDER BY origin, destination
                                                                    ") or die(mysqli_error($conn));

                            while ($fetdata = mysqli_fetch_assoc($getQuerydata)) {
                                echo "<tr>";
                                echo "<td>{$fetdata['origin']}</td>";
                                echo "<td>{$fetdata['destination']}</td>";
                                echo "<td><span class='fw-bold sktext badge bg-tot'>{$fetdata['totalshipment']}</span></td>";
                                echo "<td><span class='sktext badge bg-warning text-dark'>{$fetdata['arrvport']}</span></td>";
                                echo "<td><span class='sktext badge bg-success'>{$fetdata['delivered']}</span></td>";
                                echo "</tr>";
                            }

                            ?>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery + DataTables -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function () {
            // Initialize DataTable
            var table = $('#shipmentTable').DataTable({
                responsive: true,
                pageLength: 5,
                lengthMenu: [5, 10, 20, 50],
                columnDefs: [
                    { orderable: false, targets: [3, 4] }
                ]
            });

            // Custom Search Input binding
            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

            // assuming you've already initialised DataTables with responsive: true
            var table = $('#shipmentTable').DataTable();

            $('#shipmentTable').on('responsive-display.dt', function (e, datatable, row, showHide) {
                // DataTables adds/removes .parent automatically; nothing else needed.
                // This handler just ensures the class toggles reliably across clicks.
                $(row.node()).toggleClass('parent', showHide);
            });


        });
    </script>
</body>

</html>