<?php
session_start();
include "../config.php";

if (!isset($_SESSION['id_user'])) {
    header("Location: ../index.php");
    exit;
}



$id_jv = isset($_GET["id"]) ? (int)$_GET["id"] : 0;
if ($id_jv <= 0) {
    header("Location: dataarsipkonfirmasi.php");
    exit;
}


$result = $koneksi->query("SELECT * FROM jv_documents WHERE id_jv = $id_jv AND status = 'arsip' LIMIT 1");

if (!$result || $result->num_rows === 0) {
    header("Location: dataarsipkonfirmasi.php");
    exit;
}

$row = $result->fetch_assoc();

function fDate($tanggal) {
    if (empty($tanggal) || $tanggal == '0000-00-00') return '<span class="val-empty">—</span>';
    $bulan = [
        1=>'Janeiro','Fevereiro','Março','Abril','Maio','Junho',
        'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'
    ];
    $ts = strtotime($tanggal);
    return date('d', $ts) . ' ' . $bulan[(int)date('m', $ts)] . ' ' . date('Y', $ts);
}

function fUSD($nominal) {
    if (empty($nominal) || $nominal == 0) return '<span class="val-empty">—</span>';
    return '<span class="amount-val">$ ' . number_format((float)$nominal, 2, '.', ',') . '</span>';
}

function fVal($val) {
    if (empty(trim((string)$val))) return '<span class="val-empty">—</span>';
    return htmlspecialchars($val);
}
?>
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Detalle Arkivu — Finance System</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --em-950: #011c14;
    --em-900: #022c22;
    --em-800: #064e3b;
    --em-700: #065f46;
    --em-600: #047857;
    --em-500: #059669;
    --em-400: #10b981;
    --em-300: #34d399;
    --em-200: #6ee7b7;
    --em-100: #a7f3d0;
    --em-50:  #d1fae5;
    --em-25:  #ecfdf5;
    --gray-900: #0f1923;
    --gray-800: #1a2535;
    --gray-700: #374151;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --gold: #d4a820;
    --gold-light: #fef3c7;
}

html, body {
    height: 100%;
    font-family: 'DM Sans', sans-serif;
    background: #f0faf6;
    color: var(--gray-900);
}

/* ── LAYOUT ── */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── TOP BAR ── */
.topbar {
    background: var(--em-900);
    color: var(--white);
    padding: 0 40px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    flex-shrink: 0;
    border-bottom: 1px solid var(--em-800);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-icon {
    width: 38px; height: 38px;
    background: linear-gradient(135deg, var(--em-500), var(--em-400));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(16,185,129,0.3);
}

.brand-text .name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--white);
}

.brand-text .sub {
    font-size: 11px;
    color: var(--em-200);
    margin-top: 1px;
    font-weight: 400;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: transparent;
    border: 1.5px solid var(--em-600);
    color: var(--em-200);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
}
.btn-back:hover {
    background: var(--em-800);
    border-color: var(--em-400);
    color: var(--white);
    transform: translateX(-2px);
}
.btn-back i { font-size: 12px; }

.btn-print {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    background: var(--em-600);
    border: none;
    color: var(--white);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
}
.btn-print:hover {
    background: var(--em-500);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5,150,105,0.3);
}

/* ── MAIN ── */
.main {
    flex: 1;
    padding: 36px 40px 48px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* ── DOC HEADER ── */
.doc-header {
    background: linear-gradient(135deg, var(--em-900) 0%, var(--em-800) 60%, var(--em-700) 100%);
    border-radius: 18px;
    padding: 32px 36px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(6,78,59,0.2);
}

.doc-header::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(52,211,153,0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.doc-header::after {
    content: '';
    position: absolute;
    bottom: -40px; left: 200px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(16,185,129,0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.dh-left {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
}

.dh-icon {
    width: 60px; height: 60px;
    background: rgba(16,185,129,0.2);
    border: 2px solid rgba(52,211,153,0.3);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: var(--em-300);
    flex-shrink: 0;
}

.dh-info .doc-no {
    font-family: 'DM Mono', monospace;
    font-size: 22px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.dh-info .doc-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--em-200);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dh-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(52,211,153,0.3);
    color: var(--em-200);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-badge .dot {
    width: 7px; height: 7px;
    background: var(--em-400);
    border-radius: 50%;
}

.dh-amount {
    font-family: 'DM Mono', monospace;
    font-size: 28px;
    font-weight: 500;
    color: var(--em-300);
    letter-spacing: 0.5px;
}

.dh-amount-label {
    font-size: 10px;
    color: var(--em-200);
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── SECTION GROUPS ── */
.section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--em-50);
}

.section-title .s-icon {
    width: 32px; height: 32px;
    background: var(--em-50);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--em-600);
    font-size: 13px;
}

.section-title h2 {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--em-800);
    letter-spacing: 0.2px;
}

/* ── GRID LAYOUT: 3 sections × 2 rows ── */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.detail-section {
    background: var(--white);
    border: 1px solid var(--em-50);
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(6,78,59,0.05);
    transition: box-shadow 0.2s, transform 0.2s;
}

.detail-section:hover {
    box-shadow: 0 6px 24px rgba(6,78,59,0.1);
    transform: translateY(-1px);
}

/* Full-width section for archive info (row 2, span all) */
.detail-section.full-row {
    grid-column: 1 / -1;
}

/* ── FIELD ROWS ── */
.field-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 16px;
}

.field-row:last-child { margin-bottom: 0; }

.field-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--em-600);
    text-transform: uppercase;
    letter-spacing: 0.9px;
}

.field-value {
    font-size: 14px;
    color: var(--gray-800);
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
}

.amount-val {
    font-family: 'DM Mono', monospace;
    font-size: 16px;
    font-weight: 500;
    color: var(--em-600);
}

.val-empty {
    color: var(--gray-400);
    font-style: italic;
    font-weight: 400;
    font-size: 13px;
}

.mono-val {
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    color: var(--gray-700);
    background: var(--gray-100);
    padding: 3px 8px;
    border-radius: 5px;
    display: inline-block;
}

/* Grid inside a section (2-col fields) */
.field-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
}

/* Archive number highlight */
.archive-highlight {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.arch-pill {
    background: var(--em-25);
    border: 1px solid var(--em-100);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}

.arch-pill .ap-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--em-600);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.arch-pill .ap-val {
    font-family: 'DM Mono', monospace;
    font-size: 18px;
    font-weight: 500;
    color: var(--em-800);
}

.arch-pill .ap-val.empty-pill {
    font-size: 14px;
    color: var(--gray-400);
    font-style: italic;
    font-family: 'DM Sans', sans-serif;
}

/* ── BREADCRUMB ── */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 12px;
    color: var(--gray-500);
}

.breadcrumb-bar a {
    color: var(--em-600);
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-bar i { font-size: 9px; color: var(--gray-400); }

/* ── FOOTER ── */
.page-footer {
    text-align: center;
    font-size: 11px;
    color: var(--gray-400);
    padding: 20px 40px;
    border-top: 1px solid var(--em-50);
}

@media print {
    .topbar, .breadcrumb-bar, .btn-back, .btn-print { display: none !important; }
    .main { padding: 20px; }
    .doc-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .detail-section { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    .detail-grid { break-inside: avoid; }
}
</style>
</head>
<body>

<div class="page">

<!-- TOP BAR -->
<div class="topbar">
    <div class="topbar-brand">
        <div class="brand-icon"><i class="fas fa-leaf"></i></div>
        <div class="brand-text">
            <div class="name">Finance System</div>
            <div class="sub">Detalle Arkivu Konfirmasaun</div>
        </div>
    </div>
    <div class="topbar-actions">
        <a href="dataarsipkonfirmasi.php" class="btn-back">
            <i class="fas fa-arrow-left"></i> Fila Fali
        </a>
        <button class="btn-print" onclick="window.print()">
            <i class="fas fa-print"></i> Imprime
        </button>
    </div>
</div>

<!-- MAIN -->
<div class="main">

    <!-- Breadcrumb -->
    <div class="breadcrumb-bar">
        <a href="../dashboard.php"><i class="fas fa-chart-pie"></i> Dashboard</a>
        <i class="fas fa-chevron-right"></i>
        <a href="dataarsipkonfirmasi.php">Arkivu Konfirmasaun</a>
        <i class="fas fa-chevron-right"></i>
        <span>Detalle</span>
    </div>

    <!-- Document Header -->
    <div class="doc-header">
        <div class="dh-left">
            <div class="dh-icon"><i class="fas fa-folder-open"></i></div>
            <div class="dh-info">
                <div class="doc-no"><?= fVal($row['nomor_prt']) ?></div>
                <div class="doc-label">Numeru Pedido / Konfirmasaun</div>
            </div>
        </div>
        <div class="dh-right">
            <div class="status-badge">
                <span class="dot"></span>
                Arkivadu
            </div>
            <div class="dh-amount"><?= !empty($row['total_adiantamento']) && $row['total_adiantamento'] != 0 ? '$ ' . number_format((float)$row['total_adiantamento'], 2, '.', ',') : '—' ?></div>
            <div class="dh-amount-label">Total Adiantamentu</div>
        </div>
    </div>

    <!-- ROW 1: 3 columns -->
    <div class="detail-grid">

        <!-- Section 1: Informasaun Báziku -->
        <div class="detail-section">
            <div class="section-title">
                <div class="s-icon"><i class="fas fa-file-alt"></i></div>
                <h2>Informasaun Báziku</h2>
            </div>
            <div class="field-row">
                <span class="field-label">No Pedido</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_prt']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Data Simu Karta</span>
                <span class="field-value"><?= fDate($row['tgl_terima']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Diresaun</span>
                <span class="field-value"><?= fVal($row['direksi']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Assuntu / Deskrisaun</span>
                <span class="field-value"><?= nl2br(htmlspecialchars($row['descripsi'])) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Montante (Adiantamentu)</span>
                <span class="field-value"><?= fUSD($row['total_adiantamento']) ?></span>
            </div>
        </div>

        <!-- Section 2: CPV / OBL -->
        <div class="detail-section">
            <div class="section-title">
                <div class="s-icon"><i class="fas fa-file-invoice"></i></div>
                <h2>CPV / PR &amp; OBL / PO</h2>
            </div>
            <div class="field-row">
                <span class="field-label">No CPV / PR</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_cpv']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Data Kria CPV</span>
                <span class="field-value"><?= fDate($row['tgl_cpv']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">No OBL / PO</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_obl']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Data Kria OBL</span>
                <span class="field-value"><?= fDate($row['tanggal_obl']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Vendor / Fornezedór</span>
                <span class="field-value"><?= fVal($row['vendor_name']) ?></span>
            </div>
        </div>

        <!-- Section 3: ITS / APT & PRT -->
        <div class="detail-section">
            <div class="section-title">
                <div class="s-icon"><i class="fas fa-file-signature"></i></div>
                <h2>ITS / APT &amp; PRT</h2>
            </div>
            <div class="field-row">
                <span class="field-label">No ITS / APT</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_apt']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Data Kria APT</span>
                <span class="field-value"><?= fDate($row['tanggal_its']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">No PRT</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_prt2']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Data Kria PRT</span>
                <span class="field-value"><?= fDate($row['tanggal_prt2']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Tipu Pagamentu</span>
                <span class="field-value"><?= fVal($row['tipo_pagamento']) ?></span>
            </div>
        </div>

    </div>

    <!-- ROW 2: 3 columns -->
    <div class="detail-grid">

        <!-- Section 4: Relatoriu Pagamentu -->
        <div class="detail-section">
            <div class="section-title">
                <div class="s-icon"><i class="fas fa-money-check-alt"></i></div>
                <h2>Relatoriu Pagamentu</h2>
            </div>
            <div class="field-row">
                <span class="field-label">Assuntu Relatoriu</span>
                <span class="field-value"><?= nl2br(htmlspecialchars($row['deskripsi2'])) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Montante Relatoriu</span>
                <span class="field-value"><?= fUSD($row['total_relatorio2']) ?></span>
            </div>
        </div>

        <!-- Section 5: Data Arkivu -->
        <div class="detail-section">
            <div class="section-title">
                <div class="s-icon"><i class="fas fa-calendar-check"></i></div>
                <h2>Data Arkivu</h2>
            </div>
            <div class="field-row">
                <span class="field-label">Data Arkivadu</span>
                <span class="field-value"><?= fDate($row['tgl_arsip']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Numeru Arkivu</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_arsip']) ?></span>
            </div>
        </div>

        <!-- Section 6: Lokasaun Fíziku -->
        <div class="detail-section">
            <div class="section-title">
                <div class="s-icon"><i class="fas fa-box-archive"></i></div>
                <h2>Lokasaun Fíziku</h2>
            </div>
            <div class="field-row">
                <span class="field-label">Numeru Bantex</span>
                <span class="field-value mono-val"><?= fVal($row['no_bantex']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Numeru Box</span>
                <span class="field-value mono-val"><?= fVal($row['nomor_box']) ?></span>
            </div>
            <div class="field-row">
                <span class="field-label">Numeru Cabinet</span>
                <span class="field-value mono-val"><?= fVal($row['cabinet']) ?></span>
            </div>
        </div>

    </div>

    <!-- Archive Summary Pills (full row) -->
    <div class="detail-section">
        <div class="section-title">
            <div class="s-icon"><i class="fas fa-th-large"></i></div>
            <h2>Rezumu Lokasaun Arkivu</h2>
        </div>
        <div class="archive-highlight">
            <div class="arch-pill">
                <div class="ap-label"><i class="fas fa-hashtag"></i> Numeru Arkivu</div>
                <div class="ap-val <?= empty(trim((string)$row['nomor_arsip'])) ? 'empty-pill' : '' ?>">
                    <?= empty(trim((string)$row['nomor_arsip'])) ? '—' : htmlspecialchars($row['nomor_arsip']) ?>
                </div>
            </div>
            <div class="arch-pill">
                <div class="ap-label"><i class="fas fa-folder"></i> Bantex</div>
                <div class="ap-val <?= empty(trim((string)$row['no_bantex'])) ? 'empty-pill' : '' ?>">
                    <?= empty(trim((string)$row['no_bantex'])) ? '—' : htmlspecialchars($row['no_bantex']) ?>
                </div>
            </div>
            <div class="arch-pill">
                <div class="ap-label"><i class="fas fa-box"></i> Box</div>
                <div class="ap-val <?= empty(trim((string)$row['nomor_box'])) ? 'empty-pill' : '' ?>">
                    <?= empty(trim((string)$row['nomor_box'])) ? '—' : htmlspecialchars($row['nomor_box']) ?>
                </div>
            </div>
            <div class="arch-pill">
                <div class="ap-label"><i class="fas fa-cabinet-filing"></i> Cabinet</div>
                <div class="ap-val <?= empty(trim((string)$row['cabinet'])) ? 'empty-pill' : '' ?>">
                    <?= empty(trim((string)$row['cabinet'])) ? '—' : htmlspecialchars($row['cabinet']) ?>
                </div>
            </div>
        </div>
    </div>

</div><!-- /main -->

<div class="page-footer">
    Finance System &copy; <?= date('Y') ?> &mdash; Detalle Arkivu Konfirmasaun &mdash; ID #<?= $id_jv ?>
</div>

</div><!-- /page -->

</body>
</html>
