<?php
include "../config/koneksi.php";
include "../middleware/auth.php";
include "../config/komplain_workflow.php";

sikompro_require_role('admin');

$id = isset($_GET['id']) ? (int) $_GET['id'] : 0;
$notifCount = komplain_notification_count($conn, 'admin');
$query = mysqli_query($conn, "
    SELECT k.*,
           ta.username AS admin_nama,
           tp.username AS pelaksana_nama,
           tt.username AS teknisi_nama
    FROM komplain k
    LEFT JOIN users ta ON ta.id = k.admin_id
    LEFT JOIN users tp ON tp.id = k.pelaksana_id
    LEFT JOIN users tt ON tt.id = k.teknisi_id
    WHERE k.id = '$id'
    LIMIT 1
");
$komplain = mysqli_fetch_assoc($query);

if(!$komplain){
    die("Data komplain tidak ditemukan.");
}

$hasilTeknisi = komplain_first_non_empty($komplain, ['hasil_teknisi', 'keterangan'], '-');
$hasilPelaksana = komplain_first_non_empty($komplain, ['hasil_pelaksana', 'admin_keterangan'], '-');
$catatanPelaksana = komplain_first_non_empty($komplain, ['catatan_pelaksana'], '-');
$catatanAdmin = komplain_first_non_empty($komplain, ['catatan_admin'], '-');
$deskripsiKomplain = komplain_first_non_empty($komplain, ['deskripsi_komplain'], '-');

if (isset($_GET['notif_id'])) {
    komplain_mark_notification_read_by_id($conn, (int) $_GET['notif_id'], 'admin', (int) $_SESSION['user_id']);
}
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Detail Komplain / Complaint Detail | PT. ALVINDO</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
body {
    background: linear-gradient(180deg, #eef6ff 0%, #f8fbff 100%);
}

.main-sidebar {
    background: linear-gradient(180deg, #223047 0%, #1d293d 100%);
}

.brand-link {
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.detail-hero {
    background: linear-gradient(135deg, #ffffff 0%, #edf5ff 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 22px;
    box-shadow: 0 16px 38px rgba(31, 45, 61, .08);
}

.card {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(31, 45, 61, .08);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid #edf2f7;
}

.preview-img {
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
}

.info-label {
    font-weight: 600;
    color: #495057;
}

.btn {
    border-radius: 12px;
}
.image-viewer { position:fixed; inset:0; background:rgba(15,23,42,.78); display:none; align-items:center; justify-content:center; z-index:9999; padding:18px; }
.image-viewer img { max-width:94vw; max-height:88vh; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.35); background:#fff; }
.image-viewer button { position:absolute; top:18px; right:18px; }
@media (max-width: 576px) {
    .detail-hero { padding:18px; border-radius:14px; }
    .detail-hero .btn { width:100%; margin-bottom:8px; }
}
</style>
<link rel="stylesheet" href="../assets/sikompro-ux.css">
</head>

<body class="hold-transition sidebar-mini layout-fixed dashboard-shell">
<div class="wrapper">

<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
</ul>
</nav>

<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="dashboard.php" class="brand-link">
<span class="brand-text">PT. ALVINDO</span>
</a>

<div class="sidebar">
<nav>
<ul class="nav nav-pills nav-sidebar flex-column">
<li class="nav-item">
<a href="dashboard.php" class="nav-link">
<i class="nav-icon fas fa-home"></i> Dashboard
</a>
</li>
<li class="nav-item">
<a href="data_komplain.php?filter=total" class="nav-link active">
<i class="nav-icon fas fa-table"></i> Data Komplain
</a>
</li>
<li class="nav-item">
<a href="absen.php" class="nav-link">
<i class="nav-icon fas fa-user-check"></i> Absensi
</a>
</li>
<li class="nav-item">
<a href="input_komplain_admin.php" class="nav-link">
<i class="nav-icon fas fa-plus"></i> Input Komplain
</a>
</li>
<li class="nav-item">
<a href="notif.php" class="nav-link">
<i class="nav-icon fas fa-bell"></i> Notifikasi <span class="badge badge-warning float-right"><?= $notifCount ?></span>
</a>
</li>
<li class="nav-item">
<a href="../middleware/logout.php" class="nav-link">
<i class="nav-icon fas fa-sign-out-alt"></i> Logout
</a>
</li>
</ul>
</nav>
</div>
</aside>

<div class="content-wrapper">
<section class="content pt-3">
<div class="container-fluid">

<div class="detail-hero">
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div>
<h3>Detail Komplain / Complaint Detail</h3>
<p class="mb-0">Pantau alur admin, pelaksana, dan teknisi dalam satu halaman / manage the full workflow in one place.</p>
</div>
<div class="mt-3 mt-md-0 d-flex align-items-center" style="gap:10px; flex-wrap:wrap;">
<div class="dropdown action-kebab">
<button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Opsi lain / More">
<i class="fas fa-ellipsis-v"></i>
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="data_komplain.php?filter=total"><i class="fas fa-table mr-2"></i>Daftar komplain</a>
<a class="dropdown-item" target="_blank" href="cetak_pdf.php?id=<?= $komplain['id'] ?>"><i class="fas fa-print mr-2"></i>Cetak PDF / Print</a>
<a class="dropdown-item" href="input_komplain_admin.php?id=<?= $komplain['id'] ?>"><i class="fas fa-pen mr-2"></i>Edit komplain</a>
</div>
</div>
<a href="data_komplain.php?filter=total" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> Back / Kembali
</a>
<a href="input_komplain_admin.php?id=<?= $komplain['id'] ?>" class="btn btn-warning">
<i class="fas fa-pen"></i> Edit / Ubah
</a>
<a href="cetak_pdf.php?id=<?= $komplain['id'] ?>" class="btn btn-dark" target="_blank">
<i class="fas fa-print"></i> Print PDF / Cetak
</a>
<form method="post" action="hapus_komplain.php" class="d-inline" onsubmit="return confirm('Hapus data komplain ini? / Delete this complaint?');">
<input type="hidden" name="id" value="<?= $komplain['id'] ?>">
<button type="submit" class="btn btn-danger">
<i class="fas fa-trash"></i> Delete / Hapus
</button>
</form>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-5">
<div class="card">
<div class="card-header">
<h3 class="card-title">Informasi Komplain</h3>
</div>
<div class="card-body">
<p><span class="info-label">ID Komplain:</span> <?= $komplain['id'] ?></p>
<p><span class="info-label">Lokasi:</span> <?= htmlspecialchars($komplain['lokasi']) ?></p>
<p><span class="info-label">Kategori Kerusakan:</span> <?= htmlspecialchars(komplain_first_non_empty($komplain, ['kategori_kerusakan'], '-')) ?></p>
<p><span class="info-label">Kerusakan:</span> <?= htmlspecialchars($komplain['kerusakan']) ?></p>
<p><span class="info-label">Waktu:</span> <?= isset($komplain['waktu']) && $komplain['waktu'] !== '' ? htmlspecialchars($komplain['waktu']) : '-' ?></p>
<p><span class="info-label">Prioritas:</span> <?= htmlspecialchars($komplain['prioritas']) ?></p>
<p><span class="info-label">Keterangan Admin:</span> <?= nl2br(htmlspecialchars($deskripsiKomplain)) ?></p>
<p><span class="info-label">Status:</span> <span class="badge badge-<?= komplain_status_badge($komplain['status']) ?>"><?= htmlspecialchars(komplain_status_label($komplain['status'])) ?></span></p>
<p><span class="info-label">Admin:</span> <?= htmlspecialchars($komplain['admin_nama'] ?: '-') ?></p>
<p><span class="info-label">Pelaksana:</span> <?= htmlspecialchars($komplain['pelaksana_nama'] ?: '-') ?></p>
<p><span class="info-label">Teknisi:</span> <?= htmlspecialchars($komplain['teknisi_nama'] ?: '-') ?></p>
<p><span class="info-label">Keterangan Pelaksana:</span> <?= nl2br(htmlspecialchars($komplain['pelaksana_keterangan'] ?: '-')) ?></p>
<p><span class="info-label">Hasil Teknisi:</span> <?= nl2br(htmlspecialchars($hasilTeknisi)) ?></p>
<p><span class="info-label">Hasil Pelaksana:</span> <?= nl2br(htmlspecialchars($hasilPelaksana)) ?></p>
<p><span class="info-label">Catatan Revisi Pelaksana:</span> <?= nl2br(htmlspecialchars($catatanPelaksana)) ?></p>
<p><span class="info-label">Catatan Admin:</span> <?= nl2br(htmlspecialchars($catatanAdmin)) ?></p>
<p><span class="info-label">Tanggal:</span> <?= htmlspecialchars($komplain['tanggal']) ?></p>
<p class="mb-0"><span class="info-label">Update Terakhir:</span> <?= htmlspecialchars($komplain['tanggal_update'] ?: '-') ?></p>
</div>
</div>

<?php if($komplain['status'] === 'menunggu_admin'){ ?>
<div class="card mt-3">
<div class="card-header">
<h3 class="card-title">Persetujuan Admin</h3>
</div>
<div class="card-body">
<form method="post" action="terima_admin.php">
<input type="hidden" name="id" value="<?= $komplain['id'] ?>">
<div class="form-group">
<label>Catatan Admin</label>
<textarea name="catatan_admin" class="form-control" rows="4" placeholder="Tulis catatan persetujuan atau revisi untuk pelaksana..."></textarea>
</div>
<button type="submit" name="aksi" value="terima" class="btn btn-success">
<i class="fas fa-check"></i> Terima Hasil Pelaksana
</button>
<button type="submit" name="aksi" value="revisi" class="btn btn-warning">
<i class="fas fa-undo"></i> Kembalikan ke Pelaksana
</button>
</form>
</div>
</div>
<?php } ?>
</div>

<div class="col-lg-7">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Foto Before / Before Photo</h3>
</div>
<div class="card-body">
<?php $beforeFiles = komplain_image_files($komplain['foto_before']); ?>
<?php if(!empty($beforeFiles)){ ?>
<?php foreach($beforeFiles as $fotoBefore): ?>
<img src="../uploads/before/<?= rawurlencode($fotoBefore) ?>" alt="Foto before" class="preview-img js-view-image" onclick="sikomproViewImage(this)">
<p class="mt-2 mb-3 text-muted"><?= htmlspecialchars($fotoBefore) ?></p>
<?php endforeach; ?>
<?php } else { ?>
<div class="alert alert-warning mb-0">Foto before belum tersedia.</div>
<?php } ?>
</div>
</div>
</div>

<div class="col-md-6">
<div class="card">
<div class="card-header">
<h3 class="card-title">Foto After / After Photo</h3>
</div>
<div class="card-body">
<?php $afterFiles = komplain_image_files($komplain['foto_after']); ?>
<?php if(!empty($afterFiles)){ ?>
<?php foreach($afterFiles as $fotoAfter): ?>
<img src="../uploads/after/<?= rawurlencode($fotoAfter) ?>" alt="Foto after" class="preview-img js-view-image" onclick="sikomproViewImage(this)">
<p class="mt-2 mb-3 text-muted"><?= htmlspecialchars($fotoAfter) ?></p>
<?php endforeach; ?>
<?php } else { ?>
<div class="alert alert-secondary mb-0">Foto after belum diupload oleh teknisi.</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</section>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<script src="../assets/bootstrap5-compat.js"></script>
<script src="../assets/sikompro-theme.js"></script>
<div class="image-viewer" id="imageViewer">
<button type="button" class="btn btn-light" id="closeImageViewer"><i class="fas fa-times"></i></button>
<img src="" alt="Preview gambar">
</div>
<script>
function sikomproViewImage(image) {
    const viewer = document.getElementById('imageViewer');
    const preview = viewer.querySelector('img');
    preview.src = image.getAttribute('src');
    preview.alt = image.getAttribute('alt') || 'Preview gambar';
    viewer.style.display = 'flex';
}

document.addEventListener('click', function (event) {
    const image = event.target.closest('.js-view-image');
    if (image) {
        sikomproViewImage(image);
    }
});

document.getElementById('closeImageViewer')?.addEventListener('click', function () {
    document.getElementById('imageViewer').style.display = 'none';
});

document.getElementById('imageViewer')?.addEventListener('click', function (event) {
    if (event.target === this) {
        this.style.display = 'none';
    }
});
</script>
<?php include '../partials/mobile_nav.php'; ?>
</body>
</html>






