<?php
session_start();
$dbtype = "root";
require("includes/dbconnect.php");
require("includes/config.php");
require("includes/function.php");

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

$zdir = $dbname;
$zcomp = 1;
$zdbroot = $zdir;
$focusfield = "user";

$addflag = '';

$username = $_SESSION['username_customer'];

$zdb = $_SESSION["zdbyear"];
$vouchno = $_REQUEST["vouchno"];
// browse($zdb);
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.0">
    <title>Shipment Status</title>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- JS File For Listing -->
    <script src="js/trackingstatus.js?a=<?= mt_rand() ?>" type="text/javascript"></script>

    <!-- JS File For Menu Listing -->
    <script src="js/menulisting.js?b=<?= mt_rand() ?>" type="text/javascript"></script>
</head>

<body>
    
    <div class="tracking-container">
        <div class="tracking-card">
            <h5 class="tracking-title">📦 Shipment Tracking</h5>

            <div class="tracking-input-group">
                <label for="shipmentno" class="tracking-label">Shipment No. :</label>
                <input type="text" id="shipmentno" class="tracking-input" value="<?= $vouchno ?>" autofocus>
                <button id="checkStatus" class="tracking-btn">Check Status</button>
            </div>
            <div class="progress-tracker-wrapper">
                <div class="progress-tracker">
                    <div class="progress-bar"></div>
                    <div class="step" data-step="1">
                        <div class="circle">📍</div>
                        <p>Arrived at Origin</p>
                    </div>
                    <!-- <div class="step" data-step="3">
                        <div class="circle">📝</div>
                        <p>Custom Clearance</p>
                    </div> -->
                    <div class="step" data-step="5">
                        <div class="circle">🚢</div>
                        <p>In Transit</p>
                    </div>
                    <div class="step" data-step="7">
                        <div class="circle">⚓</div>
                        <p>Arrived at Port</p>
                    </div>
                    <div class="step" data-step="9">
                        <div class="circle">✅</div>
                        <p>Delivered</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="statusAlert"
        style="position: fixed;top: 20px;left: 50%;transform: translateX(-50%);background: #f44336;
                                      /* red for error */color: white;padding: 12px 20px;border-radius: 6px;
                                      box-shadow: 0 4px 10px rgba(0,0,0,0.2);display: none;z-index: 9999;font-family: sans-serif;">
        Error message here!
    </div>


</body>

</html>