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

mysqli_query($conn, "SET NAMES 'utf8'");
mysqli_query($conn, 'SET CHARACTER SET utf8');

ini_set('display_errors', 1);
error_reporting(E_ERROR);

$zdir = $dbname;
$usercode = $_SESSION["usercode"];
$usertype = $_SESSION["usertype_" . $dbname];
$ztit = $_SESSION["tit_" . $dbname];


$formname = 'SHIPMENT STATUS';
$file = 'shipmentstatus.php';
$keyfld = "vouchno";

$keycond = "";

$zroot = $_SESSION["zdir"];
$admin = $_SESSION["admin_" . $dbname];
$myyear = $_SESSION[$myyear];
$compcd = $_SESSION["comp_" . $dbname];
$username = $_SESSION['username_customer'];
$useraccode = $_SESSION["customer_code"];
$zdb = $_SESSION["zdbyear"];
mysqli_select_db($conn, $zdb);

// print "SELECT origin FROM `shipment` WHERE customer = '$useraccode' GROUP BY origin";
$getOrigin = mysqli_query($conn, "SELECT origin FROM `shipment` WHERE customer = '$useraccode' GROUP BY origin") or die(mysqli_error($conn));

// Fetch shipment data with statuses
$getShipdata = mysqli_query($conn, "
    SELECT 
        origin,
        destination,
        COUNT(*) AS totalshipment,
        SUM(CASE WHEN status = 1 THEN 1 ELSE 0 END) AS origin_count,
        SUM(CASE WHEN status = 5 THEN 1 ELSE 0 END) AS transit_count,
        SUM(CASE WHEN status = 7 THEN 1 ELSE 0 END) AS destination_count,
        SUM(CASE WHEN status = 9 THEN 1 ELSE 0 END) AS delivered_count
    FROM shipment WHERE customer = '$useraccode'
") or die(mysqli_error($conn));

$totshipments = mysqli_fetch_assoc($getShipdata);

include("includes/linkshead.php");
?>
<!-- <script src="MyScript/entry.js" type="text/javascript"></script> -->
<script src="js/shipmentstatus_search.js?a=<?= mt_rand() ?>" type="text/javascript"></script>
<style>
    body {
        background: #f8f9fa;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    .project-details {
        display: inline-block;
        font-size: 16px;
        letter-spacing: 0.5px;
        word-spacing: 5px;
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0;
        color: #a98467;
        padding-top: 12px;
        padding-bottom: 6px;
    }

    .form-control {
        background-color: #ffffff;
        border-radius: 4px;
    }


    .Sticky {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 1;
    }

    .bg-row {
        background-color: #d5bdaf;
        align-items: center;
        vertical-align: center;
        padding-top: 12px;
        margin-left: 0px;
        margin-right: 0px;
        line-height: 2.7;
    }

    .combodiv {
        background-color: #5f2b54;
        color: #ffffff;
        margin-left: 0px;
        margin-right: 0px;
    }

    .combodiv1 {
        /* background-color: #a98467; */
        /* color: #ffffff; */
        margin-left: 0px;
        margin-right: 0px;
    }

    th,
    td {
        white-space: nowrap;
    }

    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap;
    }

    .searchBtn {
        margin-top: -8px !important;
        height: 30px;
        border-radius: 4px;
    }

    .txtt {
        color: whitesmoke;
        text-transform: uppercase;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
    }

    .txttnew {
        color: #a98467;
        text-transform: uppercase;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin-bottom: -23px;
        background-color: #ffffff;
        overflow: overlay;
        padding: 8px;
        font-size: 18px;
    }

    .bordertxt {
        border: 1px solid black;
    }

    #borderimg {
        border: 2px solid #a98467;
        padding: 4px;
        border-radius: 7px;
    }

    .skk {
        border-bottom: 1px solid grey !important;
        color: white;
    }

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

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

    .shipment-carddt {
        border-radius: 15px;
        padding: 10px;
        background: #fff;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease-in-out;
        margin-top: -10px !important;
    }

    .shipment-carddt:hover {
        transform: translateY(-5px);
    }

    .shipment-summary {
        display: flex;
        flex-wrap: wrap;
        /* allows wrapping on small screens */
        justify-content: center;
        /* centers horizontally */
        gap: 0rem;
        /* spacing between cards */
        text-align: center;
        /* center text inside */
    }

    .shipment-summary .col-md-2 {
        flex: 0 0 auto;
        /* don’t stretch */
    }
</style>
<!-- Bootstrap Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
<!-- Card Styling -->
<link href="MyStyle/skshipmentstyling.css?a=<?= mt_rand(); ?>" rel="stylesheet" />
</head>

<body>
    <form action='' method='POST'>
        <div class="col-lg-12">
            <div class="panel panel-default shadow-sm border-0">
                <div class="row combodiv text-center">
                    <label class="label-control marg">
                        <h3 class="panel-title"><?php echo $formname; ?></h3>
                    </label>
                </div>

                <br>

                <!-- Shipment Summary -->
                <div class="shipment-summary g-4 mb-4">
                    <div class="col-md-2">
                        <div class="stat-card" style="background-color: #7b2cbf;">
                            <span style="font-size:22px;">Total Shipment</span>
                            <div class="stat-number"><?= $totshipments['totalshipment'] ?></div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="stat-card" style="background-color: #ffc107;">
                            <span style="font-size:22px;">At Origin</span>
                            <div class="stat-number"><?= $totshipments['origin_count'] ?></div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="stat-card" style="background-color: #0d6efd;">
                            <span style="font-size:22px;">In Transit</span>
                            <div class="stat-number"><?= $totshipments['transit_count'] ?></div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="stat-card " style="background-color: #a53860;">
                            <span style="font-size:22px;">At Destination</span>
                            <div class="stat-number"><?= $totshipments['destination_count'] ?></div>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="stat-card bg-success">
                            <span style="font-size:22px;">Delivered</span>
                            <div class="stat-number"><?= $totshipments['delivered_count'] ?></div>
                        </div>
                    </div>
                </div>

                <br>
                <br>

                <div class="container py-4">

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

                        <div class="col-md-4"></div>
                        
                        <div class="col-md-1 text-right pad">
                            <label class="label-control marg">Origin</label>
                        </div>

                        <div class="col-md-3 text-center">
                                <?php
                                echo "<select name='origin' id='origin'  class='origin skk  select2' style='width:100%;'> ";
                                while ($fetOrigin = mysqli_fetch_array($getOrigin)) {
                                    echo "<option value='$fetOrigin[origin]'>$fetOrigin[origin]</option>";
                                }
                                echo "</select>";
                                ?>
                        </div>
                    </div>

                    <div class="dataDiv">

                    </div>
                </div>


            </div>
        </div>

    </form>
    <?php include("includes/linksfoot.php"); ?>
</body>

</html>