<?php
include "../../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();
session_start();

// ── Fetch repair record ──────────────────────────────────────────────────────
$repair_res  = $db->query("pump_repair",
    "SELECT * FROM pump_repair WHERE record_id = '{$_GET['record_id']}'");
$repair      = $repair_res->fetch_assoc();

// ── Fetch linked installation record ────────────────────────────────────────
$install     = null;
$jobcard_history = null;
if (!empty($repair['installation_id'])) {
    $inst_res    = $db->query("pump_installation",
        "SELECT * FROM pump_installation WHERE record_id = '{$repair['installation_id']}'");
    $install     = $inst_res->fetch_assoc();

    if ($install && !empty($install['drilling_invoice'])) {
        $jc_res          = $db->query("jobcards",
            "SELECT * FROM jobcards WHERE jc_no = '{$install['drilling_invoice']}'");
        $jobcard_history = $jc_res->fetch_assoc();
    }
}

// ── Fetch replaced items ─────────────────────────────────────────────────────
$replaced_res  = $db->query("replaced_items",
    "SELECT * FROM replaced_items WHERE jobcard_no = '{$repair['jobcard_no']}' ORDER BY record_id ASC");

// ── Fetch notes ───────────────────────────────────────────────────────────────
$notes_res = $db->query("notes",
    "SELECT * FROM notes WHERE jobcard_id = '{$repair['jobcard_no']}' AND reason NOT LIKE '%BIT%' AND reason NOT LIKE '%INSTALL%' ORDER BY record_id ASC");

// ── Fetch payments ────────────────────────────────────────────────────────────
$payments_res = $db->query("jobcard_payments",
    "SELECT * FROM jobcard_payments WHERE jobcard_id = '{$repair['jobcard_no']}' ORDER BY record_id ASC");

// ── Fetch install images ──────────────────────────────────────────────────────
$images_res = $db->query("notes",
    "SELECT * FROM notes
     WHERE jobcard_id = '{$_GET['jobcard_no']}'
     AND reason LIKE 'INSTALL IMAGE'
     ORDER BY record_id ASC");
    
// ── Signature paths ───────────────────────────────────────────────────────────
$sig_dir = __DIR__ . "/signatures/";
$sig_url = "/app/jobcards/pump/signatures/";
$emp_sig_file = $sig_dir . "employee-jc_{$repair['jobcard_no']}-{$_SESSION['user_id']}-signature.png";
$emp_sig_url  = $sig_url  . "employee-jc_{$repair['jobcard_no']}-{$_SESSION['user_id']}-signature.png";
$cli_sig_file = $sig_dir . "client-jc_{$repair['jobcard_no']}-{$_SESSION['user_id']}-signature.png";
$cli_sig_url  = $sig_url  . "client-jc_{$repair['jobcard_no']}-{$_SESSION['user_id']}-signature.png";

// ── Pump slip path ────────────────────────────────────────────────────────────
$slip_url = "/app/jobcards/pump/pump_slip/" . ($repair['pump_slip'] ?? '');
$slip_exists = !empty($repair['pump_slip']) && file_exists(__DIR__ . "/pump_slip/" . $repair['pump_slip']);

// ── Payment totals ────────────────────────────────────────────────────────────
$total_paid = 0;
$payment_rows = [];
if ($payments_res && $payments_res->num_rows > 0) {
    while ($p = $payments_res->fetch_assoc()) {
        $total_paid += (float)$p['amount'];
        $payment_rows[] = $p;
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Summary — JC <?= htmlspecialchars($repair['jobcard_no']) ?></title>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
/* ═══════════════ RESET & ROOT ═══════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --ink:       #0a0c12;
    --paper:     #f4f1eb;
    --steel:     #1a2540;
    --amber:     #e8a020;
    --amber-lt:  #fdf0d5;
    --slate:     #3d5068;
    --muted:     #7a8899;
    --rule:      #d4cfc6;
    --red:       #c0392b;
    --green:     #1e7e4a;
    --white:     #ffffff;
    --radius:    6px;
    --shadow:    0 2px 12px rgba(0,0,0,0.10);
}

body {
    font-family: 'Barlow', sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ═══════════════ HEADER BAR ═══════════════ */
.page-header {
    background: var(--steel);
    color: var(--white);
    padding: 0;
    display: flex;
    align-items: stretch;
}
.header-accent { width: 6px; background: var(--amber); flex-shrink: 0; }
.header-body   { padding: 18px 28px; flex: 1; }
.header-body .label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    letter-spacing: 0.14em;
    color: var(--amber);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.header-body h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.header-body h1 span { color: var(--amber); }
.header-meta {
    display: flex;
    gap: 28px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.header-meta .meta-item {
    font-size: 20px;
    color: rgba(255,255,255,0.65);
    font-family: 'IBM Plex Mono', monospace;
}
.header-meta .meta-item strong { color: rgba(255,255,255,0.95); }

/* Status badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.status-complete { background: #d4f0e0; color: var(--green); }
.status-pending  { background: #fef3cd; color: #856404; }

/* ═══════════════ PRINT BUTTON ═══════════════ */
.actions-bar {
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    padding: 10px 28px;
    display: flex;
    gap: 10px;
    align-items: center;
}
.btn {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--radius);
    padding: 8px 20px;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.15s;
}
.btn:hover { filter: brightness(0.92); }
.btn-primary { background: var(--steel); color: var(--white); }
.btn-amber   { background: var(--amber); color: var(--ink); }
.btn-outline { background: transparent; border: 2px solid var(--steel); color: var(--steel); }

/* ═══════════════ LAYOUT ═══════════════ */
.page-body { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }

/* ═══════════════ SECTION CARD ═══════════════ */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 22px;
    overflow: hidden;
}
.card-head {
    background: var(--steel);
    color: var(--white);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-head .card-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.card-head h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.card-body { padding: 20px; }

/* ═══════════════ DETAIL GRID ═══════════════ */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.detail-value {
    font-size: 25px;
    font-weight: 500;
    color: var(--ink);
    word-break: break-word;
}
.detail-value.mono { font-family: 'IBM Plex Mono', monospace; font-size: 25px; }
.detail-value.large { font-size: 1.3rem; font-weight: 700; }

/* Wide field (full width text area style) */
.detail-full { grid-column: 1 / -1; }
.detail-block {
    background: #f8f7f4;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 20px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 56px;
    color: var(--ink);
}
.detail-block.empty { color: var(--muted); font-style: italic; }

/* ═══════════════ DIVIDER ═══════════════ */
.divider { border: none; border-top: 1px solid var(--rule); margin: 16px 0; }

/* ═══════════════ TABLE ═══════════════ */
.summary-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.summary-table th {
    background: #f0ede7;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    padding: 9px 12px;
    text-align: left;
    border-bottom: 2px solid var(--rule);
}
.summary-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}
.summary-table tr:last-child td { border-bottom: none; }
.summary-table tr:hover td { background: #faf9f6; }
.summary-table img { max-width: 80px; border-radius: 4px; }

/* ═══════════════ TAGS ═══════════════ */
.tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 20px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tag-steel  { background: #e0e8f0; color: var(--slate); }
.tag-amber  { background: var(--amber-lt); color: #7a4f00; }
.tag-green  { background: #d4f0e0; color: var(--green); }
.tag-red    { background: #fde8e6; color: var(--red); }

/* ═══════════════ PAYMENT TOTAL ═══════════════ */
.payment-total-row td {
    font-weight: 700;
    font-size: 20px;
    background: #f0ede7 !important;
    border-top: 2px solid var(--rule) !important;
}

/* ═══════════════ SIGNATURE BOXES ═══════════════ */
.sig-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 600px) { .sig-grid { grid-template-columns: 1fr; } }

.sig-box {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}
.sig-box-label {
    background: #f0ede7;
    padding: 8px 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.sig-box-content {
    padding: 14px;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafaf8;
}
.sig-box-content img { max-width: 100%; max-height: 200px; }
.sig-box-content .no-sig {
    color: var(--muted);
    font-size: 14px;
    font-style: italic;
}

/* ═══════════════ IMAGE GRID ═══════════════ */
.image-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.image-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fafaf8;
}
.image-card img {
    width: 100%;
    /* height: 160px; */
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.15s;
}
.image-card img:hover { opacity: 0.85; }
.image-card-caption {
    padding: 8px 10px;
    font-size: 20px;
    color: var(--slate);
    border-top: 1px solid var(--rule);
    word-break: break-word;
}

/* ═══════════════ DISCLAIMER ═══════════════ */
.disclaimer {
    background: #fff8ed;
    border: 1px solid #f5d990;
    border-radius: var(--radius);
    padding: 16px 20px;
    font-size: 29px;
    line-height: 1.7;
    color: #5a4000;
}
.disclaimer strong { color: var(--ink); }

/* ═══════════════ LIGHTBOX ═══════════════ */
#lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,0.88);
    justify-content: center;
    align-items: center;
}
#lightbox img {
    max-width: 90%;
    max-height: 88vh;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
#lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    color: white;
    font-size: 20vw;
    cursor: pointer;
    line-height: 1;
    font-family: sans-serif;
    opacity: 0.8;
}
#lightbox-close:hover { opacity: 1; }

/* ═══════════════ EMPTY STATE ═══════════════ */
.empty-state {
    text-align: center;
    padding: 28px;
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
}

/* ═══════════════ PRINT ═══════════════ */
@media print {
    .actions-bar { display: none !important; }
    body { background: white; }
    .card { box-shadow: none; border: 1px solid #ccc; }
    .page-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .card-head   { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 600px) {
    .page-body { padding: 14px 12px 40px; }
    .detail-grid { grid-template-columns: 1fr; }
    .header-body h1 { font-size: 1.5rem; }
    .header-meta { gap: 14px; }
}
</style>
</head>
<body>

<!-- ████ PAGE HEADER ████ -->
<div class="page-header">
    <div class="header-accent"></div>
    <div class="header-body">
        <div class="label">Pump Repair — Job Summary</div>
        <h1>JC <span><?= htmlspecialchars($repair['jobcard_no']) ?></span></h1>
        <div class="header-meta">
            <div class="meta-item">
                <strong>Record ID</strong> #<?= htmlspecialchars($repair['record_id']) ?>
            </div>
            <?php if (!empty($repair['repaired_by'])): ?>
            <div class="meta-item">
                <strong>Repaired By</strong> <?= htmlspecialchars($repair['repaired_by']) ?>
            </div>
            <?php endif; ?>
            <?php if (!empty($repair['date_time_started'])): ?>
            <div class="meta-item">
                <strong>Started</strong> <?= htmlspecialchars($repair['date_time_started']) ?>
            </div>
            <?php endif; ?>
            <?php if (!empty($repair['date_time_finished'])): ?>
            <div class="meta-item">
                <strong>Finished</strong> <?= htmlspecialchars($repair['date_time_finished']) ?>
            </div>
            <?php endif; ?>
            <div class="meta-item">
                <?php if ($repair['status'] == 1): ?>
                    <span class="status-badge status-complete">&#10003; Complete</span>
                <?php else: ?>
                    <span class="status-badge status-pending">&#9679; In Progress</span>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- ACTIONS BAR -->
<div class="actions-bar">
    <!-- <button class="btn btn-primary" onclick="window.print()">&#128438; Print Summary</button> -->
    <a class="btn btn-outline" href="/app/jobcards/pump/pump_repair.php">&#8592; HOME</a>
</div>

<!-- PAGE BODY -->
<div class="page-body">

<!-- ══════════════════════════════════════════════
     1. REPAIR DETAILS
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
        </div>
        <h2>Repair Details</h2>
    </div>
    <div class="card-body">
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">Jobcard No</span>
                <span class="detail-value mono"><?= htmlspecialchars($repair['jobcard_no']) ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Repaired By</span>
                <span class="detail-value"><?= htmlspecialchars($repair['repaired_by'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Client Type</span>
                <span class="detail-value">
                    <span class="tag <?= $repair['client_type'] == 'NEW' ? 'tag-amber' : 'tag-steel' ?>">
                        <?= htmlspecialchars($repair['client_type'] ?? '—') ?>
                    </span>
                </span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Contact Number</span>
                <span class="detail-value mono"><?= htmlspecialchars($repair['contact_number'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Address</span>
                <span class="detail-value"><?= htmlspecialchars($repair['address'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">GPS Co-ordinates</span>
                <span class="detail-value mono"><?= htmlspecialchars($repair['map_co_ordinates'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Date / Time Started</span>
                <span class="detail-value"><?= htmlspecialchars($repair['date_time_started'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Date / Time Finished</span>
                <span class="detail-value"><?= htmlspecialchars($repair['date_time_finished'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Status</span>
                <span class="detail-value">
                    <?php if ($repair['status'] == 1): ?>
                        <span class="tag tag-green">Complete</span>
                    <?php else: ?>
                        <span class="tag tag-amber">In Progress</span>
                    <?php endif; ?>
                </span>
            </div>

            <!-- Problem Description — full width -->
            <div class="detail-item detail-full">
                <span class="detail-label">Problem Description</span>
                <?php $pd = trim($repair['problem_description'] ?? ''); ?>
                <div class="detail-block <?= $pd ? '' : 'empty' ?>">
                    <?= $pd ? nl2br(htmlspecialchars($pd)) : 'No description provided.' ?>
                </div>
            </div>

            <!-- Solution — full width -->
            <div class="detail-item detail-full">
                <span class="detail-label">Solution</span>
                <?php $ps = trim($repair['problem_solution'] ?? ''); ?>
                <div class="detail-block <?= $ps ? '' : 'empty' ?>">
                    <?= $ps ? nl2br(htmlspecialchars($ps)) : 'No solution recorded.' ?>
                </div>
            </div>
        </div>

        <!-- Pump Slip -->
        <?php if ($slip_exists): ?>
        <hr class="divider">
        <div class="detail-label" style="margin-bottom:8px;">Pump Slip</div>
        <img src="<?= htmlspecialchars($slip_url) ?>" alt="Pump Slip"
             style="max-width:260px; border:1px solid var(--rule); border-radius:4px; cursor:pointer;"
             onclick="openLightbox(this.src)">
        <?php endif; ?>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     2. INSTALLATION HISTORY (if linked)
══════════════════════════════════════════════ -->
<?php if ($install): ?>
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
        </div>
        <h2>Installation History</h2>
    </div>
    <div class="card-body">
        <?php if ($jobcard_history): ?>
        <p style="font-size:20px; color:var(--muted); margin-bottom:14px; font-family:'IBM Plex Mono',monospace;">
            DRILLING INVOICE: <?= htmlspecialchars($install['drilling_invoice']) ?>
        </p>
        <div class="detail-grid" style="margin-bottom:16px;">
            <div class="detail-item">
                <span class="detail-label">Client Name</span>
                <span class="detail-value"><?= htmlspecialchars($jobcard_history['client_name'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Address</span>
                <span class="detail-value"><?= htmlspecialchars($jobcard_history['address'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Contact Number</span>
                <span class="detail-value mono"><?= htmlspecialchars($jobcard_history['contact_number'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Other Number</span>
                <span class="detail-value mono"><?= htmlspecialchars($jobcard_history['other_number'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Alternate Number</span>
                <span class="detail-value mono"><?= htmlspecialchars($jobcard_history['alternate_number'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Break Found On</span>
                <span class="detail-value"><?= htmlspecialchars($jobcard_history['break_found_on'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Water Strike</span>
                <span class="detail-value"><?= htmlspecialchars($jobcard_history['water_strike'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Water Flow</span>
                <span class="detail-value"><?= htmlspecialchars($jobcard_history['water_flow'] ?? '—') ?></span>
            </div>
        </div>
        <hr class="divider">
        <?php endif; ?>

        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">Attended By</span>
                <span class="detail-value"><?= htmlspecialchars($install['attended_by'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Borehole Meters</span>
                <span class="detail-value large"><?= htmlspecialchars($install['borehole_meters'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">HDPE Meters</span>
                <span class="detail-value large"><?= htmlspecialchars($install['hdpe_meters'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Cable Meters</span>
                <span class="detail-value large"><?= htmlspecialchars($install['cable_meters'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Pump Depth</span>
                <span class="detail-value large"><?= htmlspecialchars($install['pump_depth'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Meters Drilled</span>
                <span class="detail-value large"><?= htmlspecialchars($install['meters_drilled'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Crack</span>
                <span class="detail-value"><?= htmlspecialchars($install['crack'] ?? '—') ?></span>
            </div>
            <?php if (!empty($install['pack_no'])): ?>
            <div class="detail-item">
                <span class="detail-label">Pack No</span>
                <span class="detail-value mono"><?= htmlspecialchars($install['pack_no']) ?></span>
            </div>
            <?php endif; ?>
            <?php if (!empty($install['pump_no'])): ?>
            <div class="detail-item">
                <span class="detail-label">Pump No</span>
                <span class="detail-value mono"><?= htmlspecialchars($install['pump_no']) ?></span>
            </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- ══════════════════════════════════════════════
     3. REPLACED ITEMS
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
        </div>
        <h2>Replaced Items</h2>
    </div>
    <div class="card-body" style="padding: 0;">
        <?php if ($replaced_res && $replaced_res->num_rows > 0): ?>
        <table class="summary-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Item</th>
                    <th>Date Added</th>
                </tr>
            </thead>
            <tbody>
            <?php $idx = 1; while ($row = $replaced_res->fetch_assoc()): ?>
                <tr>
                    <td style="color:var(--muted); font-family:'IBM Plex Mono',monospace; font-size:20px;"><?= $idx++ ?></td>
                    <td><span class="tag tag-steel"><?= htmlspecialchars($row['replaced_item']) ?></span></td>
                    <td style="font-size:20px; color:var(--muted); font-family:'IBM Plex Mono',monospace;">
                        <?= htmlspecialchars($row['date_added'] ?? '—') ?>
                    </td>
                </tr>
            <?php endwhile; ?>
            </tbody>
        </table>
        <?php else: ?>
        <div class="empty-state">No replaced items recorded.</div>
        <?php endif; ?>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     4. NOTES
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        </div>
        <h2>Notes</h2>
    </div>
    <div class="card-body" style="padding:0;">
        <?php if ($notes_res && $notes_res->num_rows > 0): ?>
        <table class="summary-table">
            <thead>
                <tr>
                    <th>Reason</th>
                    <th>Note</th>
                    <th>Image</th>
                    <th>Date / Time</th>
                </tr>
            </thead>
            <tbody>
            <?php while ($row = $notes_res->fetch_assoc()): ?>
                <tr>
                    <td><span class="tag tag-amber"><?= htmlspecialchars($row['reason']) ?></span></td>
                    <td style="font-size:20px;"><?= nl2br(htmlspecialchars($row['note'])) ?></td>
                    <td>
                        <?php if (!empty($row['image'])): ?>
                        <img src="/app/jobcards/pump/notes/<?= htmlspecialchars($row['image']) ?>"
                             style="cursor:pointer;"
                             onclick="openLightbox(this.src)" alt="note image">
                        <?php else: ?>
                        <span style="color:var(--muted); font-size:20px;">—</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:20px; color:var(--muted); font-family:'IBM Plex Mono',monospace; white-space:nowrap;">
                        <?= htmlspecialchars($row['date_time']) ?>
                    </td>
                </tr>
            <?php endwhile; ?>
            </tbody>
        </table>
        <?php else: ?>
        <div class="empty-state">No notes recorded.</div>
        <?php endif; ?>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     5. CAPTURED IMAGES
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
        </div>
        <h2>Site Images</h2>
    </div>
    <div class="card-body">
        <?php if ($images_res && $images_res->num_rows > 0): ?>
        <div class="image-grid">
            <?php while ($img = $images_res->fetch_assoc()): 
                $img_file = $img['image'] ?? $img['image_name'] ?? $img['file_name'] ?? $img['filename'] ?? '';
            ?>
            <div class="image-card">
                <img src="/app/jobcards/pump/install_images/<?= htmlspecialchars($img_file) ?>"
                    onclick="openLightbox(this.src)"
                    alt="<?= htmlspecialchars($img['note'] ?? '') ?>">
                <div class="image-card-caption">
                    <?= htmlspecialchars($img['note'] ?? 'No description') ?>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php else: ?>
        <div class="empty-state">No site images captured.</div>
        <?php endif; ?>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     6. PAYMENTS
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
        </div>
        <h2>Payments</h2>
    </div>
    <div class="card-body" style="padding:0;">
        <?php if (!empty($payment_rows)): ?>
        <table class="summary-table">
            <thead>
                <tr>
                    <th>Method</th>
                    <th>Amount</th>
                    <th>Slip / Proof</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
            <?php foreach ($payment_rows as $p): ?>
                <tr>
                    <td>
                        <span class="tag <?= $p['payment_method'] == 'EFT' ? 'tag-steel' : 'tag-green' ?>">
                            <?= htmlspecialchars($p['payment_method']) ?>
                        </span>
                    </td>
                    <td style="font-weight:600; font-size:20px;">
                        R <?= number_format((float)$p['amount'], 2) ?>
                    </td>
                    <td>
                        <?php if (!empty($p['file'])): ?>
                        <img src="/app/jobcards/pump/slips/<?= htmlspecialchars($p['file']) ?>"
                             style="max-width:70px; cursor:pointer;"
                             onclick="openLightbox(this.src)" alt="slip">
                        <?php else: ?>
                        <span style="color:var(--muted); font-size:20px;">—</span>
                        <?php endif; ?>
                    </td>
                    <td style="font-size:20px; color:var(--muted); font-family:'IBM Plex Mono',monospace; white-space:nowrap;">
                        <?= htmlspecialchars($p['date_time'] ?? $p['created_at'] ?? '—') ?>
                    </td>
                </tr>
            <?php endforeach; ?>
            <tr class="payment-total-row">
                <td colspan="1">TOTAL RECEIVED</td>
                <td colspan="3">R <?= number_format($total_paid, 2) ?></td>
            </tr>
            </tbody>
        </table>
        <?php else: ?>
        <div class="empty-state">No payment records found.</div>
        <?php endif; ?>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     7. SIGNATURES
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
        </div>
        <h2>Signatures</h2>
    </div>
    <div class="card-body">
        <div class="sig-grid">
            <div class="sig-box">
                <div class="sig-box-label">Employee Signature</div>
                <div class="sig-box-content">
                    <?php if (file_exists($emp_sig_file)): ?>
                        <img src="<?= $emp_sig_url ?>" alt="Employee Signature">
                    <?php else: ?>
                        <span class="no-sig">No signature captured</span>
                    <?php endif; ?>
                </div>
            </div>
            <div class="sig-box">
                <div class="sig-box-label">Client Signature</div>
                <div class="sig-box-content">
                    <?php if (file_exists($cli_sig_file)): ?>
                        <img src="<?= $cli_sig_url ?>" alt="Client Signature">
                    <?php else: ?>
                        <span class="no-sig">No signature captured</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════
     8. DISCLAIMER
══════════════════════════════════════════════ -->
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1a2540" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
        </div>
        <h2>Terms &amp; Disclaimer</h2>
    </div>
    <div class="card-body">
        <div class="disclaimer">
            <strong>Please Note: Savuki Drilling Mpumalanga</strong>
            <ol style="margin:10px 0 10px 18px; line-height:2;">
                <li>Cannot be held responsible for any damage or borehole collapse.</li>
                <li>Steel casings must be installed on the recommendation of the drill team.</li>
                <li>Will not be held liable for any damage on property.</li>
                <li>No water is guaranteed even if Savuki Drilling surveyed.</li>
                <li>Client pays for service of drilling, not water.</li>
            </ol>
            <strong>SAFETY PRECAUTION —</strong><br>
            CUSTOMER IS RESPONSIBLE FOR COVERING OF BOREHOLE AFTER DRILLING.<br>
            SAVUKI DRILLING MPUMALANGA WILL NOT BE LIABLE FOR ANY ACCIDENTS CAUSED BY ANY UNCOVERED BOREHOLES.
        </div>
    </div>
</div>

</div><!-- /page-body -->

<!-- ████ LIGHTBOX ████ -->
<div id="lightbox" onclick="closeLightbox()">
    <span id="lightbox-close" onclick="closeLightbox()">&times;</span>
    <img id="lightbox-img" src="" alt="preview">
</div>

<script>
function openLightbox(src) {
    document.getElementById('lightbox-img').src = src;
    document.getElementById('lightbox').style.display = 'flex';
}
function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
    document.getElementById('lightbox-img').src = '';
}
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closeLightbox();
});
</script>

</body>
</html>