<?php

include "../../root.class.php";
$html = new html();
$call = new call_functions();
$html->add_styles_page();
$db = new db_safeguard();

$user_id = new select();
$user_id->id('user_id');
$user_id->name('user_id');
$user_id->class();
$user_id->fill_from_db("users", 'record_id', 'username', "user_type = 'WAREHOUSE'");



$jobcard_numbers_res = $db->query("job_cards", "SELECT * FROM job_cards WHERE `status` = 1");
echo "<datalist id='job_cards'>";
while ($jobcard = $jobcard_numbers_res->fetch_assoc()) {
    echo "<option value='" . $jobcard['jc_number'] . "'>" . $jobcard['jc_number'] . "</option>";
}

$jobcard_numbers_res = $db->query("job_cards_tech", "SELECT * FROM job_cards_tech WHERE `status` = 1");
while ($jobcard = $jobcard_numbers_res->fetch_assoc()) {
    echo "<option value='" . $jobcard['jc_number'] . "'>" . $jobcard['jc_number'] . "</option>";
}

$jobcard_accounts_res = $db->query("job_card_accounts", "SELECT * FROM job_card_accounts WHERE `status` = 1");
while ($jobcard_accounts = $jobcard_accounts_res->fetch_assoc()) {
    echo "<option value='" . $jobcard_accounts['name'] . "'>" . $jobcard_accounts['name'] . "</option>";
}
echo "</datalist>";

$jobcard_number = new input();
$jobcard_number->id("jc_number");
$jobcard_number->name("jc_number");
$jobcard_number->type("text");
$jobcard_number->placeholder("Jobcard Number");
$jobcard_number->required();
$jobcard_number->datalist("job_cards");
// $jobcard_number->onchange("");

$purchase_orders_res = $db->query("job_cards", "SELECT * FROM orders WHERE `status` = 0");
echo "<datalist id='purchase_orders'>";
while ($purchase_orders = $purchase_orders_res->fetch_assoc()) {
    echo "<option value='" . $purchase_orders['record_id'] . "'>" . $purchase_orders['po_number'] . "</option>";
}
echo "</datalist>";

$po_number = new input();
$po_number->id("po_number");
$po_number->name("po_number");
$po_number->type("text");
$po_number->placeholder("PO Number");
$po_number->required();
$po_number->datalist("purchase_orders");
// $jobcard_number->onchange("");

$submit_btn = new button();
$submit_btn->id('submit');
$submit_btn->name('submit');
$submit_btn->class('submit_btn');
$submit_btn->value('SEARCH');
$submit_btn->onclick('search()');

?>

<div class="row" style="background-color: #fff; padding:0.5em;border-radius:0.5em;font-size:0.6em">
    <?php
    $user_id->add();
    $jobcard_number->add();
    $po_number->add();
    $submit_btn->add();
    ?>
</div>



<div id="loadingOverlay"
    style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 1000; display: flex; justify-content: center; align-items: center;">
    <div class="spinner"
        style="border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite;">
    </div>
</div>

<style>
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

<script>
    showLoading();
    function showLoading() {
        document.getElementById('loadingOverlay').style.display = 'flex';
    }

    function hideLoading() {
        document.getElementById('loadingOverlay').style.display = 'none';
    }
    window.addEventListener("load", function (event) {
        hideLoading();
    });

</script>

</script>
<style>
    /* Wrap your table in a container */
    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* smooth scrolling on iOS */
    }

    /* Basic styling for the table (same as before) */
    table {
        width: 100%;
        border-collapse: collapse;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        border-radius: 8px;
        overflow: hidden;
        min-width: 700px;
        /* Ensure min width so horizontal scroll triggers */
    }

    table th {
        background: #1e90ff;
        color: white;
        text-align: left;
        padding: 12px 15px;
        font-weight: 600;
        letter-spacing: 0.03em;
        user-select: none;
    }

    table td {
        padding: 12px 15px;
        border-bottom: 1px solid #eaeaea;
    }

    table tr:nth-child(even) {
        background: #f9f9f9;
    }

    table tbody tr:hover {
        background-color: #d0e7ff;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
</style>
<br><br>
<div style="overflow-x: auto; white-space: nowrap;">
    <table class="table">
        <thead>
            <tr>
                <th>
                    Item
                </th>
                <th>
                    Amount
                </th>
                <th>
                    date_time
                </th>
                <th>
                    User
                </th>
                <th>
                    Order
                </th>
                <th>
                    Job Card
                </th>
                <th>
                    Received
                </th>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
</div>

<script>
    function search() {
        var jc_number = document.getElementById('jc_number').value;
        var po_number = document.getElementById('po_number').value;
        var user_id = document.getElementById('user_id').value;
     
        showLoading();
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var tableBody = document.getElementById('tbody');
                tableBody.innerHTML = ''; // Clear existing table body rows
                tableBody.insertAdjacentHTML('beforeend', xhr.responseText);
                hideLoading();
            }
        };
        xhr.open('POST', 'disp_rec_admin_search.ajax.php', true);
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send('jc_number=' + encodeURIComponent(jc_number) + '&po_number=' + encodeURIComponent(po_number) + '&user_id=' + encodeURIComponent(user_id));
    }

    function update_data(column_name, input, record_id) {

    }
</script>