<?php include "$_SERVER[DOCUMENT_ROOT]/root.class.php";
$html = new html();
$html->add_styles_page();
// $html->check_user_type("ADMIN");
$db = new db_safeguard();

// $team_assigned_id = new select();
// $team_assigned_id->class("inputs");
// $team_assigned_id->name("team_assigned_id");
// $team_assigned_id->id("team_assigned_id");
// $team_assigned_id->add_option("", "TEAM");
// $team_assigned_id->fill_from_db("teams", "record_id", "name");
// $team_assigned_id->onchange("search_jobcard()");

// $user_id = new select();
// $user_id->class("inputs");
// $user_id->name("user_assigned");
// $user_id->id("user_assigned");
// $user_id->add_option("", "USER ID");
// $user_id->fill_from_db("users", "record_id", "username");
// $user_id->onchange("search_jobcard()");

// $contact_number = new input();
// $contact_number->class("inputs");
// $contact_number->name("contact_number");
// $contact_number->id("contact_number");
// $contact_number->placeholder("CONTACT NUMBER");
// $contact_number->onkeyup("search_jobcard()");

// $jobcard_id = new input();
// $jobcard_id->class("inputs");
// $jobcard_id->type("text");
// $jobcard_id->placeholder("JOBCARD NUMBER");
// $jobcard_id->name("jc_no");
// $jobcard_id->id("jc_no");
// $jobcard_id->onkeyup("search_jobcard()");

// >
// <div class="column">
//     <div class="banner">
//         <div class="row">
//             <div class="search_form">
//                 <div class="row">

//                     <div class="row">
                        // <php $jobcard_id->add(); >
                        // <php $user_id->add(); >
                        // <php $team_assigned_id->add(); >
                        // <php $contact_number->add(); >
    //                 </div>
    //             </div>
    //         </div>
    //     </div>
    // </div>

//     <?php
//     $ajax = new js_ajax();
//     $ajax->run_on_load();
//     $ajax->function_name("search_jobcard");
//     $ajax->select("jobcards");
//     $ajax->return_columns(['jc_no', 'address', 'contact_number', 'date_created']);

//     $ajax->redirect("reports.php");
//     ?>



<?php
$table_data = "";

$jobcards_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE user_assigned != '0' AND team_assigned_id != '3' ORDER BY jc_no DESC");

if ($jobcards_res->num_rows > 0) {
    while ($jobcards = $jobcards_res->fetch_assoc()) {

        $team_assigned_res = $db->query(
            "teams",
            "SELECT * FROM teams WHERE record_id = {$jobcards['team_assigned_id']}"
        );
        $team_assigned = $team_assigned_res->fetch_assoc();

        $table_data .= "
            <tr>
                <td>{$jobcards['jc_no']}</td>
                <td>{$team_assigned['name']}</td>
                <td>{$jobcards['contact_number']}</td>
                <td>{$jobcards['address']}</td>
                <td>{$jobcards['date_created']}</td>
                <td><input type='button' class='download-btn' value='VIEW' onclick='window.location.href=\"reports.php?record_id={$jobcards['record_id']}\"'></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.5vw;
        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: 1vw 2vw;
        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.5vw;
        letter-spacing: 0.05em;
    }

    tbody td {
        padding: 1vw;
        font-size: 1.3vw;
        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>REPORTS</h1>
        </div>

        <table>
            <thead>
                <tr>
                    <th>JOBCARD ID</th>
                    <th>TEAM ASSIGNED</th>
                    <th>CONTACT NUMBER</th>
                    <th>AREA</th>
                    <th>DATE CREATED</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <?php echo $table_data; ?>
            </tbody>
        </table>
    </div>

    <script>
        setInterval(function () {
            location.reload();
        }, 10000);
    </script>
</body>
