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

$pump_jobcards_res = $db->query("pump_installation", "SELECT * FROM pump_installation WHERE status = '0'");


?>

<div class="form_down" style="overflow-y: scroll; height: fit-content;">
    <div class="column">
        <h1 class="h1_class">PUMP INSTALLATION</h1>
    </div>

    <?php
    if ($pump_jobcards_res->num_rows > 0) {
        while ($pump_jobcards = $pump_jobcards_res->fetch_assoc()) {
            $jobcard_data_res = $db->query("jobcards", "SELECT * FROM jobcards WHERE jc_no = '{$pump_jobcards['drilling_invoice']}'");
            $jobcard_data = $jobcard_data_res->fetch_assoc();

            ?>
            <div
                style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around;">
                <div class="searched_data" style="background-color: whitesmoke;margin:1vw; width:80%;">
                    <div class="group_div">
                        <label class="label">JOBCARD NO</label>
                        <input class="inputs" value="<?php echo $pump_jobcards['jobcard_no']; ?>" readonly>
                    </div>
                    <div class="group_div">
                        <label class="label">DATE CREATED</label>
                        <input class="inputs" value="<?php echo $pump_jobcards['date_time_created']; ?>" readonly>
                    </div>
                    <div class="group_div">
                        <label class="label">CONTACT NUMBER</label>
                        <a class="inputs" style='text-decoration: none;color: black;'
                            href="tel:<?php echo $jobcard_data['contact_number']; ?>"><?php echo $jobcard_data['contact_number']; ?></a>
                    </div>
                    <div class="group_div">
                        <label class="label">AREA</label>
                        <a class="inputs" style='text-decoration: none;color: black;' target='_blank'
                            href='https://www.google.com/maps/search/?api=1&query=<?php echo $jobcard_data['address']; ?>'><?php echo $jobcard_data['address']; ?></a>
                    </div>
                    <input type="submit" value="START" class='submit_btn'
                        onclick="window.location.href = 'install_jobcard.php?record_id=<?php echo $pump_jobcards['record_id']; ?>&jobcard_no=<?php echo $pump_jobcards['jobcard_no']; ?>'">
                </div>
            </div>
            <?php
        }
    } else {
        ?>
        <h2>No Active Jobcards</h2>
        <?php
    }
    ?>

</div>

<style>
    /* ===== GLOBAL ===== */
    body {
        font-family: "Segoe UI", Roboto, Arial, sans-serif;
        background: #f8fafc;
        color: #0f172a;
    }

    .h1_class {
        font-size: 2.5em;
        text-align: center;
        margin: 2vw 0;
        color: #1e3a8a;
    }

    /* ===== JOB CARD ===== */
    .searched_data {
        background: #ffffff;
        border-radius: 14px;
        padding: 20px;
        max-width: 800px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
        margin-bottom: 2vw;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-top: 5px solid #2563eb;
    }

    .searched_data:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    }

    /* ===== FORM GROUP ===== */
    .group_div {
        display: flex;
        flex-direction: column;
        margin-bottom: 12px;
    }

    .label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #1f2933;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .inputs {
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 9px 11px;
        font-size: 0.9rem;
        background: #ffffff;
        color: #0f172a;
    }

    .inputs:focus {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    /* ===== BUTTON ===== */
    .submit_btn {
        margin-top: 14px;
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        border: none;
        background: linear-gradient(135deg, #f97316, #fb923c);
        color: #ffffff;
        font-weight: 700;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .submit_btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(249, 115, 22, 0.35);
    }

    /* ===== MODAL OVERLAY ===== */
    .detailed_view {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.88);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    /* ===== MODAL CONTENT ===== */
    .detailed_view_content {
        background: #ffffff;
        width: 55%;
        height: 80%;
        border-radius: 16px;
        padding: 22px;
        overflow-y: auto;
        box-shadow: 0 25px 70px rgba(15, 23, 42, 0.35);
        border-left: 6px solid #2563eb;
        position: fixed;
        left: 2vw;
    }

    /* ===== METERS & LAST ACTION ===== */
    .meters_div,
    .last_action_div {
        background: #ffffff;
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.3);
    }

    .meters_div {
        position: fixed;
        top: 7%;
        right: 5%;
        width: 28%;
        border-top: 4px solid #2563eb;
    }

    .last_action_div {
        position: fixed;
        bottom: 7%;
        right: 5%;
        width: 28%;
        border-top: 4px solid #f97316;
    }

    /* ===== CLOSE BUTTON ===== */
    .close-btn {
        position: fixed;
        top: 18px;
        right: 22px;
        font-size: 2.6rem;
        color: #ffffff;
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .close-btn:hover {
        transform: scale(1.15);
    }

    /* ===== TABLE ===== */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 12px;
    }

    th {
        background: #1e3a8a;
        color: #ffffff;
        padding: 12px;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    td {
        padding: 10px;
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.9rem;
        color: #1f2933;
    }

    tr:nth-child(even) td {
        background: #f8fafc;
    }

    tr:hover td {
        background: #e0f2fe;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 900px) {

        .h1_class {
            font-size: 4em;
            text-align: center;
            margin: 3vw 0;
            color: #1e3a8a;
        }

        .searched_data {
            max-width: 100%;
        }

        .detailed_view_content {
            width: 92%;
            height: 70%;
        }

        .meters_div,
        .last_action_div {
            position: static;
            width: 92%;
            margin: 12px auto;
        }

        .close-btn {
            font-size: 2rem;
        }

        .label {
            font-size: 2rem;
        }

        .inputs {
            font-size: 2rem;
            width: 100%;
        }
    }
</style>