<?php
include "../../root.class.php";

$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

$table_data = "";

$current_stock_res = $db->query("book_stock", "SELECT * FROM book_stock");

if ($current_stock_res->num_rows > 0) {
    while ($stock = $current_stock_res->fetch_assoc()) {

        $stock_type_res = $db->query(
            "stock_types",
            "SELECT * FROM stock_types WHERE record_id = {$stock['stock_type_id']}"
        );
        $stock_type = $stock_type_res->fetch_assoc();

        $team_assigned_res = $db->query(
            "teams",
            "SELECT * FROM teams WHERE record_id = {$stock['team_assigned_id']}"
        );
        $team_assigned = $team_assigned_res->fetch_assoc();

        $table_data .= "
            <tr>
                <td>{$stock['stock_no']}</td>
                <td>{$stock['item_name']}</td>
                <td>{$stock_type['name']}</td>
                <td>{$stock['quantity']}</td>
                <td>{$team_assigned['name']}</td>
            </tr>
        ";
    }
} else {
    $table_data .= "
        <tr>
            <td colspan='4' class='no-data'>NO STOCK BOOKED</td>
        </tr>
    ";
}
?>


<style>
    :root {
        --blue: #1e3a8a;
        --light-blue: #eaf0ff;
        --orange: #f97316;
        --orange-soft: #fde7d6;
        --white: #ffffff;
        --border: #d1d5db;
        --text: #0f172a;
    }

    body {
        margin: 0;
        background: #f8fafc;
        font-family: "Segoe UI", Roboto, Arial, sans-serif;
        color: var(--text);
    }

    .form_down {
        width: 95%;
        margin: auto;
        padding-bottom: 3vw;
    }

    /* HEADER BAR */
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2.5vw 0 1.5vw;
    }

    h1 {
        font-size: 2.2vw;
        color: var(--blue);
        /* border-left: 6px solid var(--orange); */
        padding-left: 1vw;
        margin: 0;
    }

    /* DOWNLOAD BUTTON */
    .download-btn {
        background: var(--orange);
        color: var(--white);
        position: fixed;
        float: right;
        right: 4vw;
        border: none;
        padding: 0.7vw 1.4vw;
        font-size: 1vw;
        font-weight: 600;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        transition: background 0.2s ease, transform 0.1s ease;
        text-decoration: none;
    }

    .download-btn:hover {
        background: #ea580c;
        transform: translateY(-1px);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        background: var(--white);
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

    thead th {
        background: var(--blue);
        color: var(--white);
        text-align: left;
        padding: 1vw;
        font-size: 1.1vw;
        letter-spacing: 0.05em;
    }

    tbody td {
        padding: 1vw;
        font-size: 1vw;
        border-bottom: 1px solid var(--border);
    }

    tbody tr:nth-child(even) {
        background-color: var(--light-blue);
    }

    tbody tr:hover {
        background-color: var(--orange-soft);
        transition: background 0.2s ease;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    .no-data {
        text-align: center;
        padding: 2vw;
        font-weight: 600;
        color: var(--blue);
        background: var(--light-blue);
    }
</style>

<body>

    <div class="form_down">

        <div class="page-header">
            <h1>Booked Stock</h1>

            <!-- DOWNLOAD BUTTON -->
            <a href="booked_stock_pdf.php" class="download-btn">
                DOWNLOAD
            </a>
        </div>

        <table>
            <thead>
                <tr>
                    <th>Stock No</th>
                    <th>Item Name</th>
                    <th>Stock Type</th>
                    <th>Quantity</th>
                    <th>Team Assigned</th>
                </tr>
            </thead>
            <tbody>
                <?php echo $table_data; ?>
            </tbody>
        </table>

    </div>

    <script>
        setInterval(function () {
            location.reload();
        }, 100000);
    </script>

</body>