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

if (!isset($_SESSION['id_user']) || $_SESSION['role'] != 'arsip') {
    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.");
}

// FORMAT TANGGAL PORTUGAL
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, '.', ',');
}

function previewPDF($file, $id = 'pdf')
{
    if (empty($file)) {
        return "
        <div class='empty-file'>
            <i class='fas fa-file-pdf'></i>
            <span>La iha ficheiru PDF</span>
        </div>";
    }

    $url = "../assets/uploads/" . rawurlencode($file);

    return "
    <iframe 
        src='{$url}#toolbar=0&navpanes=0&scrollbar=1' 
        class='pdf-frame'
        id='{$id}'>
    </iframe>";
}
function btnFilePreview($file)
{
    if (empty($file)) {
        return "<span style='color: #94a3b8; font-style: italic;'>Ficheiru laek</span>";
    }

    $url = "../assets/uploads/" . rawurlencode($file);
    
    // Menggunakan onclick untuk memicu modal preview
    return "
    <a href='javascript:void(0)' onclick=\"openPreview('$url')\" class='btn-anexo'>
        <i class='fas fa-paperclip'></i> Hatudu Anexo
    </a>";
}
?>

<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Finance Report</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }

        body{
            background:
                radial-gradient(circle at top left, #10b98122, transparent 35%),
                radial-gradient(circle at bottom right, #05966922, transparent 30%),
                #ecfdf5;
            font-family:'Segoe UI',sans-serif;
            min-height:100vh;
            color:#1f2937;
            padding:35px;
        }

        .finance-wrapper{
            width:100%;
            background:#ffffff;
            border-radius:30px;
            overflow:hidden;
            box-shadow:
                0 15px 45px rgba(0,0,0,0.08),
                0 5px 20px rgba(16,185,129,0.10);
            border:1px solid #d1fae5;
        }

        .top-hero{
            background:linear-gradient(135deg,#064e3b,#059669,#10b981);
            padding:40px 50px;
            color:white;
            position:relative;
            overflow:hidden;
        }

        .hero-content{
            position:relative;
            z-index:2;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:20px;
            flex-wrap:wrap;
        }

        .hero-title h1{
            font-size:34px;
            font-weight:800;
        }

        .content{
            padding:40px;
        }

        .grid-layout{
            display:grid;
            grid-template-columns:420px 1fr;
            gap:35px;
            align-items:start;
        }

        .left-panel{
            background:#f8fffc;
            border:1px solid #d1fae5;
            border-radius:24px;
            padding:30px;
        }

        .info-card{
    background:white;
    border-radius:18px;
    padding:18px 20px;
    margin-bottom:18px;
    border:1px solid #ecfdf5;
}

.assuntu-box{
    min-height:220px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.assuntu-text{
    line-height:1.8;
    white-space:pre-wrap;
}
        .info-label{
            font-size:12px;
            font-weight:800;
            color:#059669;
            margin-bottom:10px;
        }

        .amount{
            font-size:28px;
            font-weight:800;
            color:#059669;
        }

        .right-panel{
            background:#ffffff;
            border:1px solid #d1fae5;
            border-radius:24px;
            padding:30px;
        }

        /* Tombol & Aksi */
        .action-area{
            margin-top:35px;
            display:flex;
            justify-content:flex-end;
            gap:16px;
            flex-wrap:wrap;
        }

        .btn{
            padding:14px 24px;
            border-radius:16px;
            text-decoration:none;
            font-weight:700;
            font-size:15px;
            display:inline-flex;
            align-items:center;
            gap:10px;
            transition:0.3s;
        }

        /* Perubahan Warna & Ikon Sesuai Request */
        .btn-cancel{
            background:#64748b;
            color:white;
        }
        .btn-cancel:hover{ background:#475569; }

        .btn-confirm{
            background:#10b981;
            color:white;
        }
        .btn-confirm:hover{ background:#059669; transform:translateY(-2px); }

        .btn-return{
            background:#ef4444;
            color:white;
        }
        .btn-return:hover{ background:#dc2626; transform:translateY(-2px); }
.btn-anexo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ecfdf5;
    color: #059669;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #10b981;
    transition: 0.3s;
}

.btn-anexo:hover {
    background: #10b981;
    color: white;
}
        .pdf-frame{
    width:100%;
    height:100%;
    border:none;
    border-radius:20px;
}
        .pdf-large{
    height:1200px;
    border:1px solid #d1fae5;
    border-radius:20px;
    overflow:hidden;
    background:#f8fffc;
}
.modal { 
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,0.8); 
    display: none; /* Sembunyi secara default */
    align-items: center; 
    justify-content: center; 
    z-index: 10000; 
    padding: 20px;
}

.modal-content { 
    width: 90%; 
    height: 90%; 
    background: white; 
    border-radius: 15px; 
    overflow: hidden; 
    position: relative; 
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-header { 
    padding: 15px 25px; 
    background: #065f46; 
    color: white; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}
        .modal{ position:fixed; inset:0; background:rgba(0,0,0,0.75); display:none; align-items:center; justify-content:center; z-index:9999; }
        .modal-content{ width:90%; height:90%; background:white; border-radius:24px; position:relative; }
        .modal-header{ padding:20px; background:#065f46; color:white; display:flex; justify-content:space-between; }
    </style>
</head>
<body>

<div class="finance-wrapper">
    <div class="top-hero">
        <div class="hero-content">
            <div class="hero-title">
                <h1><i class="fas fa-chart-line"></i> Finance Report</h1>
                <p>Vizualizasaun no Detalles Dokumentu Financeiru</p>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="grid-layout">
            <div class="left-panel">
                <div class="info-card">
                    <div class="info-label">NO PEDIDO</div>
                    <div class="info-value"><?= htmlspecialchars($data['nomor_prt']) ?></div>
                </div>
                <div class="info-card">
                    <div class="info-label">DATA SIMU</div>
                    <div class="info-value"><?= formatTanggalPortugal($data['tgl_terima']) ?></div>
                </div>
                <div class="info-card">
                    <div class="info-label">DIRESAUN</div>
                    <div class="info-value"><?= htmlspecialchars($data['direksi']) ?></div>
                    
                </div>
                <div class="info-card assuntu-box">
                    <div class="info-label">ASSUNTU</div>

                        <div class="info-value assuntu-text">
                        <?= nl2br(htmlspecialchars($data['descripsi'])) ?>
                        </div>
                </div>
                
                <div class="info-card">
                    <div class="info-label">No CPV / PR</div>
                    <div class="info-value"><?= htmlspecialchars($data['nomor_cpv']) ?></div>
                </div>

                <div class="info-card">
                    <div class="info-label">DATA Kria CPV</div>
                    <div class="info-value"><?= formatTanggalPortugal($data['tgl_cpv']) ?></div>
                </div>

                <div class="info-card">
                    <div class="info-label">No OBL / PO</div>
                    <div class="info-value"><?= htmlspecialchars($data['nomor_obl']) ?></div>
                </div>

                <div class="info-card">
                    <div class="info-label">DATA Kria OBL/PO</div>
                    <div class="info-value"><?= formatTanggalPortugal($data['tanggal_obl']) ?></div>
                </div>

                <div class="info-card">
                    <div class="info-label">Naran Vendor</div>
                    <div class="info-value"><?= htmlspecialchars($data['vendor_name']) ?></div>
                </div>
                <div class="info-card">
                    <div class="info-label">MONTANTE</div>
                    <div class="amount"><?= formatUSD($data['total_adiantamento']) ?></div>
                </div>
                <div class="info-card">
                    <div class="info-label">Anexo</div>
                    <div class="info-value"><?= btnFilePreview($data['lampiran1']) ?></div>
                </div>
            </div>

            <div class="right-panel">
                <div class="pdf-large">
                    <?= previewPDF($data['file_nota'], 'nota') ?>
                </div>
                
                

                <div class="action-area">
                    <a href="arsipverifikasi.php" class="btn btn-cancel">
                        <i class="fas fa-times"></i> Kansela
                    </a>

                    <a href="arsipkonfirma.php?id=<?= $data['id_jv'] ?>" class="btn btn-confirm">
                        <i class="fas fa-check-circle"></i> Konfirma & Rejistu
                    </a>

                    
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal untuk Floating Preview -->
<div id="previewModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 style="margin:0;"><i class="fas fa-file-alt"></i> Preview Anexo</h3>
            <button onclick="closePreview()" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button>
        </div>
        <div style="height: calc(100% - 60px);">
            <iframe id="previewIframe" src="" style="width:100%; height:100%; border:none;"></iframe>
        </div>
    </div>
</div>

<script>
function openPreview(url) {
    const modal = document.getElementById('previewModal');
    const iframe = document.getElementById('previewIframe');
    
    // Set URL file ke dalam iframe
    iframe.src = url;
    // Tampilkan modal
    modal.style.display = 'flex';
    
    // Mencegah scroll pada body saat modal buka
    document.body.style.overflow = 'hidden';
}

function closePreview() {
    const modal = document.getElementById('previewModal');
    const iframe = document.getElementById('previewIframe');
    
    // Sembunyikan modal
    modal.style.display = 'none';
    // Reset iframe src agar hemat memori/berhenti loading
    iframe.src = '';
    
    // Aktifkan kembali scroll pada body
    document.body.style.overflow = 'auto';
}

// Menutup modal jika user klik di area luar gambar/dokumen
window.onclick = function(event) {
    const modal = document.getElementById('previewModal');
    if (event.target == modal) {
        closePreview();
    }
}
</script>

</body>
</html>