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

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

$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

$query = $koneksi->query("
    SELECT jv_documents.*, users.full_name
    FROM jv_documents
    LEFT JOIN users ON jv_documents.uploaded_by_id = users.id_user
    WHERE jv_documents.id_jv = '$id'
");

$data = $query->fetch_assoc();
if (!$data) die("Dadus la hetan.");

function formatTanggalPortugal($tanggal)
{
    if (empty($tanggal) || $tanggal == '0000-00-00') return '-';
    $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 formatUSD($nominal)
{
    return '$ ' . number_format((float)$nominal, 2, '.', ',');
}
?>
<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Finance Report — Konfirmasaun</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+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <style>
        :root {
            --ink:        #0a1a12;
            --paper:      #f4faf7;
            --white:      #ffffff;
            --emerald-900:#064e3b;
            --emerald-700:#047857;
            --emerald-500:#10b981;
            --emerald-200:#a7f3d0;
            --emerald-50: #ecfdf5;
            --slate-400:  #94a3b8;
            --slate-200:  #e2e8f0;
            --red-500:    #ef4444;
            --red-600:    #dc2626;
            --amber-500:  #f59e0b;
            --radius-lg:  20px;
            --radius-md:  12px;
            --radius-sm:  8px;
            --shadow-card: 0 2px 16px rgba(6,78,59,0.07);
            --shadow-elev: 0 8px 32px rgba(6,78,59,0.12);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--paper);
            color: var(--ink);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* ── HEADER ── */
        .top-bar {
            background: var(--emerald-900);
            padding: 18px 40px;
            display: flex;
            align-items: center;
            gap: 14px;
            flex-shrink: 0;
        }
        .top-bar-icon {
            width: 40px; height: 40px;
            background: rgba(255,255,255,0.10);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            color: var(--emerald-200);
            font-size: 18px;
        }
        .top-bar-text h1 {
            font-family: 'DM Serif Display', serif;
            font-size: 20px;
            color: #fff;
            line-height: 1;
        }
        .top-bar-text p {
            font-size: 11px;
            color: var(--emerald-200);
            margin-top: 3px;
            font-weight: 300;
            letter-spacing: .3px;
        }

        /* ── MAIN SHELL ── */
        .shell {
            flex: 1;
            display: grid;
            grid-template-columns: 370px 1fr;
            grid-template-rows: 1fr auto;
            gap: 0;
            overflow: hidden;
        }

        /* ── LEFT PANEL ── */
        .left-panel {
            grid-row: 1 / 3;
            background: var(--white);
            border-right: 1px solid #d1fae5;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 28px 24px 28px;
        }

        /* Section divider label */
        .section-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 1.6px;
            text-transform: uppercase;
            color: var(--emerald-700);
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1.5px solid var(--emerald-50);
        }
        .section-label i { font-size: 11px; color: var(--emerald-500); }

        .section-block { margin-bottom: 24px; }

        /* Info row */
        .info-row {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 11px 14px;
            background: var(--emerald-50);
            border-radius: var(--radius-sm);
            margin-bottom: 8px;
            border: 1px solid transparent;
            transition: border-color .18s;
        }
        .info-row:last-child { margin-bottom: 0; }
        .info-row .lbl {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--emerald-700);
        }
        .info-row .val {
            font-size: 13.5px;
            font-weight: 500;
            color: var(--ink);
            line-height: 1.5;
        }
        .info-row .val.mono {
            font-variant-numeric: tabular-nums;
        }
        .info-row .val.amount {
            font-family: 'DM Serif Display', serif;
            font-size: 22px;
            color: var(--emerald-700);
        }
        .info-row .val.desc {
            font-size: 12.5px;
            font-weight: 300;
            line-height: 1.8;
            color: #374151;
            white-space: pre-line;
        }

        /* PDF file button */
        .btn-file {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 14px;
            background: var(--white);
            border: 1.5px solid var(--emerald-200);
            border-radius: var(--radius-sm);
            font-size: 12px;
            font-weight: 600;
            color: var(--emerald-700);
            cursor: pointer;
            text-decoration: none;
            transition: all .18s;
            margin-top: 4px;
        }
        .btn-file:hover {
            background: var(--emerald-500);
            color: white;
            border-color: var(--emerald-500);
        }
        .btn-file i { font-size: 13px; }
        .btn-file.active {
            background: var(--emerald-500);
            color: white;
            border-color: var(--emerald-500);
        }
        .no-file {
            font-size: 12px;
            color: var(--slate-400);
            font-style: italic;
        }

        /* ── RIGHT PANEL: PREVIEW AREA ── */
        .right-panel {
            grid-row: 1 / 2;
            background: #f0faf5;
            display: flex;
            flex-direction: column;
            padding: 28px 32px;
            overflow: hidden;
        }

        .preview-label {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: var(--emerald-700);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .preview-label i { font-size: 13px; color: var(--emerald-500); }

        .preview-box {
            flex: 1;
            background: white;
            border: 1px solid #d1fae5;
            border-radius: var(--radius-lg);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 0;
            box-shadow: var(--shadow-card);
        }

        .preview-box iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        .preview-empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            color: var(--slate-400);
        }
        .preview-empty i { font-size: 48px; color: var(--emerald-200); }
        .preview-empty p { font-size: 13px; font-weight: 300; }

        .preview-filename {
            margin-top: 10px;
            font-size: 11px;
            color: var(--slate-400);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .preview-filename i { color: var(--emerald-500); font-size: 12px; }

        /* ── ACTION BAR ── */
        .action-bar {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
            background: var(--white);
            border-top: 1px solid #d1fae5;
            padding: 18px 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
        }

        .btn-action {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 0 26px;
            height: 46px;
            border-radius: var(--radius-md);
            font-family: 'DM Sans', sans-serif;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: all .2s;
            white-space: nowrap;
        }
        .btn-action i { font-size: 15px; }

        .btn-cancel {
            background: #f1f5f9;
            color: #475569;
            border: 1px solid var(--slate-200);
        }
        .btn-cancel:hover { background: #e2e8f0; color: #1e293b; }

        .btn-confirm {
            background: var(--emerald-500);
            color: white;
            box-shadow: 0 4px 14px rgba(16,185,129,0.28);
        }
        .btn-confirm:hover {
            background: var(--emerald-700);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(16,185,129,0.35);
        }

        .btn-return {
            background: var(--red-500);
            color: white;
            box-shadow: 0 4px 14px rgba(239,68,68,0.22);
        }
        .btn-return:hover {
            background: var(--red-600);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(239,68,68,0.3);
        }

        /* ── SCROLLBAR ── */
        .left-panel::-webkit-scrollbar { width: 4px; }
        .left-panel::-webkit-scrollbar-track { background: transparent; }
        .left-panel::-webkit-scrollbar-thumb { background: var(--emerald-200); border-radius: 4px; }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
            .left-panel { grid-row: 1; border-right: none; border-bottom: 1px solid #d1fae5; max-height: 55vh; }
            .right-panel { grid-row: 2; min-height: 40vh; }
            .action-bar { grid-column: 1; grid-row: 3; }
        }
    </style>
</head>
<body>

<!-- TOP BAR -->
<div class="top-bar">
    <div class="top-bar-icon"><i class="fas fa-file-invoice-dollar"></i></div>
    <div class="top-bar-text">
        <h1>Finance Report</h1>
        <p>Vizualizasaun no Detalles Dokumentu Financeiru</p>
    </div>
</div>

<div class="shell">

    <!-- ════════════════════ LEFT PANEL ════════════════════ -->
    <div class="left-panel">

        <!-- ── BLOKU 1: DATA ADMIN ── -->
        <div class="section-block">
            <div class="section-label">
                <i class="fas fa-user-shield"></i>
                Submisaun Admin
            </div>

            <div class="info-row">
                <span class="lbl">No Pedido</span>
                <span class="val mono"><?= htmlspecialchars($data['nomor_prt']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Data Simu Pedido</span>
                <span class="val"><?= formatTanggalPortugal($data['tgl_terima']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Diresaun</span>
                <span class="val"><?= htmlspecialchars($data['direksi']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Assuntu</span>
                <span class="val desc"><?= htmlspecialchars($data['descripsi']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Montante</span>
                <span class="val amount"><?= formatUSD($data['total_adiantamento']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Dokumentu</span>
                <?php if (!empty($data['file_nota'])): ?>
                    <a class="btn-file" href="javascript:void(0)"
                       onclick="loadPreview('../assets/uploads/<?= rawurlencode($data['file_nota']) ?>', this, 'Dokumentu Pedido')">
                        <i class="fas fa-file-pdf"></i> Haree Dokumentu
                    </a>
                <?php else: ?>
                    <span class="no-file">La iha ficheiru</span>
                <?php endif; ?>
            </div>

            <div class="info-row">
                <span class="lbl">Anexu</span>
                <?php if (!empty($data['lampiran1'])): ?>
                    <a class="btn-file" href="javascript:void(0)"
                       onclick="loadPreview('../assets/uploads/<?= rawurlencode($data['lampiran1']) ?>', this, 'Anexu Admin')">
                        <i class="fas fa-paperclip"></i> Haree Anexu
                    </a>
                <?php else: ?>
                    <span class="no-file">La iha ficheiru</span>
                <?php endif; ?>
            </div>
        </div>

        <!-- ── BLOKU 2: DATA DFO ── -->
        <div class="section-block">
            <div class="section-label">
                <i class="fas fa-stamp"></i>
                Submisaun DFO
            </div>

            <!-- CPV -->
            <div class="info-row">
                <span class="lbl">No CPV / PR</span>
                <span class="val mono"><?= htmlspecialchars($data['nomor_cpv'] ?: '-') ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Data Kria CPV</span>
                <span class="val"><?= formatTanggalPortugal($data['tgl_cpv']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Anexo CPV</span>
                <?php if (!empty($data['lampiran2'])): ?>
                    <a class="btn-file" href="javascript:void(0)"
                       onclick="loadPreview('../uploads/lampiran/<?= rawurlencode($data['lampiran2']) ?>', this, 'Anexo CPV')">
                        <i class="fas fa-file-pdf"></i> Haree Anexo CPV
                    </a>
                <?php else: ?>
                    <span class="no-file">La iha ficheiru</span>
                <?php endif; ?>
            </div>

            <!-- OBL -->
            <div class="info-row">
                <span class="lbl">No OBL / PO</span>
                <span class="val mono"><?= htmlspecialchars($data['nomor_obl'] ?: '-') ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Data Kria OBL / PO</span>
                <span class="val"><?= formatTanggalPortugal($data['tanggal_obl']) ?></span>
            </div>

            <div class="info-row">
                <span class="lbl">Anexo OBL</span>
                <?php if (!empty($data['lampiran3'])): ?>
                    <a class="btn-file" href="javascript:void(0)"
                       onclick="loadPreview('../uploads/lampiran/<?= rawurlencode($data['lampiran3']) ?>', this, 'Anexo OBL')">
                        <i class="fas fa-file-pdf"></i> Haree Anexo OBL
                    </a>
                <?php else: ?>
                    <span class="no-file">La iha ficheiru</span>
                <?php endif; ?>
            </div>

            <div class="info-row">
                <span class="lbl">Naran Vendor</span>
                <span class="val"><?= htmlspecialchars($data['vendor_name'] ?: '-') ?></span>
            </div>
        </div>

    </div>
    <!-- /LEFT PANEL -->

    <!-- ════════════════════ RIGHT PANEL ════════════════════ -->
    <div class="right-panel">
        <div class="preview-label">
            <i class="fas fa-eye"></i>
            Preview Dokumentu
        </div>

        <div class="preview-box" id="previewBox">
            <div class="preview-empty" id="previewEmpty">
                <i class="fas fa-file-pdf"></i>
                <p>Hili dokumentu iha laran karuk atu haree preview</p>
            </div>
            <iframe id="previewFrame" src="" style="display:none; width:100%; height:100%;"></iframe>
        </div>

        <div class="preview-filename" id="previewFilename" style="display:none;">
            <i class="fas fa-file-pdf"></i>
            <span id="previewFileLabel">—</span>
        </div>
    </div>
    <!-- /RIGHT PANEL -->

    <!-- ════════════════════ ACTION BAR ════════════════════ -->
    <div class="action-bar">
        <a href="dctverifikasi.php" class="btn-action btn-cancel">
            <i class="fas fa-times"></i> Kansela
        </a>
        <a href="dctkonfirma.php?id=<?= $data['id_jv'] ?>" class="btn-action btn-confirm">
            <i class="fas fa-check-circle"></i> Konfirma &amp; Rejistu
        </a>
        <a href="dctfofila.php?id=<?= $data['id_jv'] ?>" class="btn-action btn-return">
            <i class="fas fa-undo"></i> Fo Fila
        </a>
    </div>

</div><!-- /shell -->

<script>
// Track currently active button
let activeBtn = null;

function loadPreview(url, btn, label) {
    const frame   = document.getElementById('previewFrame');
    const empty   = document.getElementById('previewEmpty');
    const fnBar   = document.getElementById('previewFilename');
    const fnLabel = document.getElementById('previewFileLabel');

    // Toggle: klik tombol yang sama → tutup preview
    if (activeBtn === btn) {
        frame.style.display = 'none';
        frame.src = '';
        empty.style.display = 'flex';
        fnBar.style.display = 'none';
        btn.classList.remove('active');
        activeBtn = null;
        return;
    }

    // Deactivate previous button
    if (activeBtn) activeBtn.classList.remove('active');

    // Load new
    btn.classList.add('active');
    activeBtn = btn;

    empty.style.display = 'none';
    frame.style.display = 'block';
    frame.src = url + '#toolbar=0&navpanes=0&scrollbar=1';

    fnLabel.textContent = label;
    fnBar.style.display = 'flex';
}
</script>

</body>
</html>