<?php
include "../../../root.class.php";
$html = new html();
$html->add_styles_page();
$db = new db_safeguard();
session_start();

// ── Fetch installation record ────────────────────────────────────────────────
$install_res  = $db->query("pump_installation",
    "SELECT * FROM pump_installation WHERE record_id = '{$_GET['record_id']}'");
$install      = $install_res->fetch_assoc();

// ── Fetch linked drilling jobcard ────────────────────────────────────────────
$jobcard_history = null;
if (!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 notes ───────────────────────────────────────────────────────────────
$notes_res = $db->query("notes",
    "SELECT * FROM notes
     WHERE jobcard_id = '{$_GET['jobcard_no']}'
     AND reason NOT LIKE '%BIT%'
     AND reason NOT LIKE '%INSTALL%'
     ORDER BY record_id ASC");

// ── Fetch replaced items ──────────────────────────────────────────────────────
$replaced_res = $db->query("replaced_items",
    "SELECT * FROM replaced_items
     WHERE jobcard_no = '{$_GET['jobcard_no']}'
     ORDER BY record_id ASC");

// ── Fetch payments ────────────────────────────────────────────────────────────
$payments_res = $db->query("jobcard_payments",
    "SELECT * FROM jobcard_payments
     WHERE jobcard_id = '{$_GET['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 (jc_no param matches install_actions.php convention) ─────
$jc_no    = $_GET['jobcard_no'] ?? $install['jobcard_no'];
$sig_dir  = __DIR__ . "/signatures/";
$sig_url  = "/app/jobcards/pump/signatures/";

$emp_sig_file = $sig_dir . "employee-jc_{$jc_no}-{$_SESSION['user_id']}-signature.png";
$emp_sig_url  = $sig_url  . "employee-jc_{$jc_no}-{$_SESSION['user_id']}-signature.png";
$cli_sig_file = $sig_dir . "client-jc_{$jc_no}-{$_SESSION['user_id']}-signature.png";
$cli_sig_url  = $sig_url  . "client-jc_{$jc_no}-{$_SESSION['user_id']}-signature.png";

// ── Pump slip path ────────────────────────────────────────────────────────────
$slip_dir    = __DIR__ . "/pump_slip/";
$slip_url    = "/app/jobcards/pump/pump_slip/";
$slip_exists = !empty($install['pump_slip']) && file_exists($slip_dir . $install['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'] ?? 0);
        $payment_rows[] = $p;
    }
}

// ── Total meters drilled from jobcard_timeline ───────────────────────────────
$total_meters = 0;
if ($jobcard_history) {
    $drilling_tl = $db->query("jobcard_timeline",
        "SELECT * FROM jobcard_timeline WHERE jobcard_id = '{$jobcard_history['record_id']}'");
    if ($drilling_tl && $drilling_tl->num_rows > 0) {
        $stop_types = ['DRILLING_STOP','DRILLING_PAUSE','RIEMING_STOP','RIEMING_PAUSE',
                       'BLASTING_STOP','BLASTING_PAUSE','CASING_STOP','CASING_PAUSE'];
        while ($tl = $drilling_tl->fetch_assoc()) {
            if (in_array($tl['type'], $stop_types)) {
                $total_meters += (int)($tl['meters'] ?? 0);
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Install Summary — JC <?= htmlspecialchars($install['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>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --ink:      #0a0c12;
    --paper:    #f4f1eb;
    --navy:     #0d1f3c;
    --teal:     #0e7c6e;
    --teal-lt:  #d4f0eb;
    --amber:    #d9880c;
    --amber-lt: #fdf3e0;
    --slate:    #3d5068;
    --muted:    #7a8899;
    --rule:     #d4cfc6;
    --white:    #ffffff;
    --red:      #b83232;
    --green:    #1a7a45;
    --radius:   6px;
    --shadow:   0 2px 14px rgba(0,0,0,0.09);
}
body {
    font-family: 'Barlow', sans-serif;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ── HEADER ── */
.page-header { background: var(--navy); color: var(--white); display: flex; align-items: stretch; }
.header-accent { width: 6px; background: var(--teal); flex-shrink: 0; }
.header-body { padding: 18px 28px; flex: 1; }
.header-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px; letter-spacing: 0.14em;
    color: var(--teal-lt); text-transform: uppercase;
    margin-bottom: 4px; opacity: 0.85;
}
.header-body h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 3rem; font-weight: 700; letter-spacing: 0.04em;
}
.header-body h1 span { color: #5dd6c8; }
.header-meta { display: flex; gap: 28px; margin-top: 8px; flex-wrap: wrap; }
.header-meta .mi { font-size: 20px; color: rgba(255,255,255,0.6); font-family: 'IBM Plex Mono', monospace; }
.header-meta .mi strong { color: rgba(255,255,255,0.92); }
.status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    letter-spacing: 0.06em; text-transform: uppercase;
}
.s-complete { background: #d4f0e0; color: var(--green); }
.s-pending  { background: #fff3cd; color: #7a5500; }

/* ── ACTIONS ── */
.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: 14px; 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.9); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-outline  { font-size: 15px; background: transparent; border: 2px solid var(--navy); color: var(--navy); }

/* ── LAYOUT ── */
.page-body { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }

/* ── CARD ── */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 22px; overflow: hidden; }
.card-head {
    background: var(--navy); color: var(--white);
    padding: 10px 20px; display: flex; align-items: center; gap: 10px;
}
.card-icon {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--teal);
    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; }

/* ── STAT STRIP ── */
.stat-strip {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); */
    display: flex;
    border: 1px solid var(--rule); border-radius: var(--radius);
    overflow: hidden; margin-bottom: 22px; background: var(--white);
    box-shadow: var(--shadow);
}
.stat-cell {
    padding: 16px; border-right: 1px solid var(--rule); text-align: center;
}
.stat-cell:last-child { border-right: none; }
.stat-val  { font-family: 'Rajdhani', sans-serif; font-size: 3rem; font-weight: 700; color: var(--navy); line-height: 1; }
.stat-unit { font-size: 20px; color: var(--muted); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }
@media (max-width: 540px) {
    .stat-strip { grid-template-columns: repeat(3, 1fr); }
    .stat-cell  { border-bottom: 1px solid var(--rule); }
}

/* ── DETAIL GRID ── */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-full { grid-column: 1 / -1; }
.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; }
.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: 52px; color: var(--ink);
}
.detail-block.empty { color: var(--muted); font-style: italic; }
.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; }
.total-row td {
    font-weight: 700; font-size: 20px;
    background: #f0ede7 !important;
    border-top: 2px solid var(--rule) !important;
}

/* ── 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-navy  { background: #e0e8f0; color: var(--navy); }
.tag-teal  { background: var(--teal-lt); color: #0a5a50; }
.tag-amber { background: var(--amber-lt); color: #7a4500; }
.tag-green { background: #d4f0e0; color: var(--green); }
.tag-red   { background: #fde8e6; color: var(--red); }

/* ── SIGNATURES ── */
.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: 120px;  */
    width: 40vw;
}
.sig-box-content .no-sig { color: var(--muted); font-size: 13px; font-style: italic; }

/* ── IMAGE GRID ── */
.image-grid { 
    /* display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));  */
    display: flex;
    flex-direction: column;
    gap: 30px; 
}
.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 #f0d070;
    border-radius: var(--radius); padding: 16px 20px;
    font-size: 19px; line-height: 1.8; color: #5a4000;
}
.disclaimer strong { color: var(--ink); }
.disclaimer ol { margin: 10px 0 10px 18px; }

/* ── EMPTY STATE ── */
.empty-state { text-align: center; padding: 28px; color: var(--muted); font-size: 13px; font-style: italic; }

/* ── 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; opacity: 0.8; }
#lightbox-close:hover { opacity: 1; }

/* ── PRINT ── */
@media print {
    .actions-bar { display: none !important; }
    body { background: white; }
    .card { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
    .page-header, .card-head, .stat-strip { -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.6rem; }
}
</style>
</head>
<body>

<!-- HEADER -->
<div class="page-header">
    <div class="header-accent"></div>
    <div class="header-body">
        <div class="header-label">Pump Installation — Job Summary</div>
        <h1>JC <span><?= htmlspecialchars($install['jobcard_no']) ?></span></h1>
        <div class="header-meta">
            <?php if (!empty($install['installed_by'])): ?>
            <div class="mi"><strong>Installed By</strong> <?= htmlspecialchars($install['installed_by']) ?></div>
            <?php endif; ?>
            <?php if (!empty($install['attended_by'])): ?>
            <div class="mi"><strong>Attended By</strong> <?= htmlspecialchars($install['attended_by']) ?></div>
            <?php endif; ?>
            <?php if (!empty($install['date_attended'])): ?>
            <div class="mi"><strong>Date Attended</strong> <?= htmlspecialchars($install['date_attended']) ?></div>
            <?php endif; ?>
            <?php if (!empty($install['date_time_finished'])): ?>
            <div class="mi"><strong>Finished</strong> <?= htmlspecialchars($install['date_time_finished']) ?></div>
            <?php endif; ?>
            <div class="mi">
                <?php if ($install['status'] == 1): ?>
                    <span class="status-badge s-complete">&#10003; Complete</span>
                <?php else: ?>
                    <span class="status-badge s-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_install.php">&#8592; HOME</a>
</div>

<div class="page-body">

<!-- 1. KEY METRICS STRIP -->
<div class="stat-strip">
    <div style="display: flex; flex-direction: row;">
        <div class="stat-cell">
            <div class="stat-val"><?= (int)($install['borehole_meters'] ?? 0) ?></div>
            <div class="stat-unit">Borehole</div>
        </div>
        <div class="stat-cell">
            <div class="stat-val"><?= (int)($install['pump_depth'] ?? 0) ?></div>
            <div class="stat-unit">Pump Depth</div>
        </div>
        <div class="stat-cell">
            <div class="stat-val"><?= (int)($install['hdpe_meters'] ?? 0) ?></div>
            <div class="stat-unit">HDPE Pipe</div>
        </div>
    </div>

    <div style="display: flex; flex-direction: row;">
        <div class="stat-cell">
            <div class="stat-val"><?= (int)($install['cable_meters'] ?? 0) ?></div>
            <div class="stat-unit">Cable</div>
        </div>
        <div class="stat-cell">
            <div class="stat-val"><?= (int)($install['meters_drilled'] ?? 0) ?></div>
            <div class="stat-unit">Meters Drilled</div>
        </div>
        <div class="stat-cell">
            <div class="stat-val"><?= (int)($install['crack'] ?? 0) ?></div>
            <div class="stat-unit">Crack</div>
        </div>
    </div>
</div>

<!-- 2. INSTALLATION 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="#0d1f3c" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
        </div>
        <h2>Installation 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($install['jobcard_no']) ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Drilling Invoice</span>
                <span class="detail-value mono"><?= htmlspecialchars($install['drilling_invoice'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Client Name</span>
                <span class="detail-value"><?= htmlspecialchars($install['client_name'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Area</span>
                <span class="detail-value"><?= htmlspecialchars($install['area'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Contact Number</span>
                <span class="detail-value mono"><?= htmlspecialchars($install['contact_number'] ?? '—') ?></span>
            </div>
            <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">Installed By</span>
                <span class="detail-value"><?= htmlspecialchars($install['installed_by'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Date Attended</span>
                <span class="detail-value"><?= htmlspecialchars($install['date_attended'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Date Finished</span>
                <span class="detail-value"><?= htmlspecialchars($install['date_time_finished'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Pack No</span>
                <span class="detail-value">
                    <?php if (!empty($install['pack_no'])): ?>
                        <span class="tag tag-navy"><?= htmlspecialchars($install['pack_no']) ?></span>
                    <?php else: echo '—'; endif; ?>
                </span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Pump No</span>
                <span class="detail-value mono"><?= htmlspecialchars($install['pump_no'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">GPS Co-ordinates</span>
                <span class="detail-value mono"><?= htmlspecialchars($install['map_co_ordinates'] ?? '—') ?></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">Status</span>
                <span class="detail-value">
                    <?php if ($install['status'] == 1): ?>
                        <span class="tag tag-green">Complete</span>
                    <?php else: ?>
                        <span class="tag tag-amber">In Progress</span>
                    <?php endif; ?>
                </span>
            </div>
            <div class="detail-item detail-full">
                <span class="detail-label">Problem Description</span>
                <?php $pd = trim($install['problem_description'] ?? ''); ?>
                <div class="detail-block <?= $pd ? '' : 'empty' ?>">
                    <?= $pd ? nl2br(htmlspecialchars($pd)) : 'No description provided.' ?>
                </div>
            </div>
            <div class="detail-item detail-full">
                <span class="detail-label">Solution</span>
                <?php $ps = trim($install['problem_solution'] ?? ''); ?>
                <div class="detail-block <?= $ps ? '' : 'empty' ?>">
                    <?= $ps ? nl2br(htmlspecialchars($ps)) : 'No solution recorded.' ?>
                </div>
            </div>
        </div>

        <?php if ($slip_exists): ?>
        <hr class="divider">
        <div class="detail-label" style="margin-bottom: 8px;">Pump Slip</div>
        <img src="<?= htmlspecialchars($slip_url . $install['pump_slip']) ?>"
             alt="Pump Slip"
             style="border: 1px solid var(--rule); border-radius: 4px; cursor: pointer;"
             onclick="openLightbox(this.src)">
        <?php endif; ?>
    </div>
</div>

<!-- 3. DRILLING JOBCARD HISTORY -->
<?php if ($jobcard_history): ?>
<div class="card">
    <div class="card-head">
        <div class="card-icon">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#0d1f3c" 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>Drilling Jobcard History</h2>
    </div>
    <div class="card-body">
        <p style="font-size:20px; color:var(--muted); font-family:'IBM Plex Mono',monospace; margin-bottom:14px;">
            DRILLING INVOICE: <?= htmlspecialchars($install['drilling_invoice']) ?>
        </p>
        <div class="detail-grid">
            <div class="detail-item">
                <span class="detail-label">Jobcard ID</span>
                <span class="detail-value mono"><?= htmlspecialchars($jobcard_history['jc_no'] ?? '—') ?></span>
            </div>
            <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 class="detail-item">
                <span class="detail-label">Total Meters Drilled</span>
                <span class="detail-value large"><?= $total_meters ?> <span style="font-size:14px; font-weight:400; color:var(--muted);">m</span></span>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- 5. 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="#0d1f3c" 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"/></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:13px;"><?= nl2br(htmlspecialchars($row['note'])) ?></td>
                    <td>
                        <?php if (!empty($row['image'])): ?>
                        <img src="/app/jobcards/pump/notes/<?= htmlspecialchars($row['image']) ?>"
                             onclick="openLightbox(this.src)" style="cursor:pointer;" alt="note">
                        <?php else: ?>
                        <span style="color:var(--muted); font-size:12px;">—</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>

<!-- 6. SITE 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="#0d1f3c" 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>

<!-- 7. 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="#0d1f3c" 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-navy' : 'tag-green' ?>">
                            <?= htmlspecialchars($p['payment_method'] ?? '—') ?>
                        </span>
                    </td>
                    <td style="font-weight: 600; font-size: 20px;">
                        R <?= number_format((float)($p['amount'] ?? 0), 2) ?>
                    </td>
                    <td>
                        <?php $slip_f = $p['file'] ?? $p['slip'] ?? $p['payment_proof'] ?? ''; ?>
                        <?php if (!empty($slip_f)): ?>
                        <img src="/app/jobcards/pump/slips/<?= htmlspecialchars($slip_f) ?>"
                             style="max-width:100px; cursor:pointer;"
                             onclick="openLightbox(this.src)" alt="slip">
                        <?php else: ?>
                        <span style="color:var(--muted); font-size:12px;">—</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="total-row">
                <td>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>

<!-- 8. 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="#0d1f3c" 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>

<!-- 9. 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="#0d1f3c" 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>
                <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 -->

<div id="lightbox" onclick="closeLightbox()">
    <span id="lightbox-close">&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', e => { if (e.key === 'Escape') closeLightbox(); });
</script>

</body>
</html>