<?php
include "../../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();

/*
    Optimized JOIN Query
    Instead of running 3 queries inside a loop,
    we join pump_repair → pump_installation → jobcards
*/

$query = "
SELECT 
    pr.*,
    pi.drilling_invoice,
    jc.contact_number,
    jc.address
FROM pump_repair pr
LEFT JOIN pump_installation pi 
    ON pr.installation_id = pi.record_id
LEFT JOIN jobcards jc 
    ON jc.jc_no = pi.drilling_invoice
WHERE pr.status = '0'
";

$pump_jobcards_res = $db->query("pump_repair", $query);
?>

<div class="form_down" style="overflow-y: scroll; height: fit-content;">
    <div class="column">
        <h1>PUMP REPAIR</h1>
    </div>

    <?php
    if ($pump_jobcards_res && $pump_jobcards_res->num_rows > 0) {

        while ($pump_jobcards = $pump_jobcards_res->fetch_assoc()) {

            $contact_number = $pump_jobcards['contact_number'] ?? 'N/A';
            $address = $pump_jobcards['address'] ?? 'N/A';
            ?>

            <div
                style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around;">
                <div class="searched_data" style="margin:1vw; width:80%;">

                    <div class="group_div">
                        <label class="label">JOBCARD NO</label>
                        <input class="inputs" value="<?php echo htmlspecialchars($pump_jobcards['jobcard_no']); ?>" readonly>
                    </div>

                    <div class="group_div">
                        <label class="label">DATE CREATED</label>
                        <input class="inputs" value="<?php echo htmlspecialchars($pump_jobcards['date_time_created']); ?>"
                            readonly>
                    </div>

                    <div class="group_div">
                        <label class="label">CONTACT NUMBER</label>
                        <?php if ($contact_number !== 'N/A') { ?>
                            <a class="inputs" style="text-decoration: none;color: black;"
                                href="tel:<?php echo htmlspecialchars($contact_number); ?>">
                                <?php echo htmlspecialchars($contact_number); ?>
                            </a>
                        <?php } else { ?>
                            <input class="inputs" value="N/A" readonly>
                        <?php } ?>
                    </div>

                    <div class="group_div">
                        <label class="label">AREA</label>
                        <?php if ($address !== 'N/A') { ?>
                            <a class="inputs" style="text-decoration: none;color: black;" target="_blank"
                                href="https://www.google.com/maps/search/?api=1&query=<?php echo urlencode($address); ?>">
                                <?php echo htmlspecialchars($address); ?>
                            </a>
                        <?php } else { ?>
                            <input class="inputs" value="N/A" readonly>
                        <?php } ?>
                    </div>

                    <input type="submit" value="START" class="submit_btn"
                        onclick="window.location.href='repair_jobcard.php?record_id=<?php echo $pump_jobcards['record_id']; ?>&jobcard_no=<?php echo $pump_jobcards['jobcard_no']; ?>'">

                </div>
            </div>

            <?php
        }

    } else {
        echo "<h2 style='text-align:center;color:#64748b;'>No Active Jobcards</h2>";
    }
    ?>
</div>


<style>
    /* ===== GLOBAL ===== */
    body {
        font-family: "Segoe UI", Roboto, Arial, sans-serif;
        background: #f8fafc;
        color: #0f172a;
    }

    h1 {
        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) {
        .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>