<?php
require_once "../config/db.php";
require_once "../inc/auth_admin.php";

$id = $_GET['id'] ?? 0;

$stmt = $conn->prepare("
SELECT laporan.*, kamar.nomor_kamar, penghuni.nama
FROM laporan
JOIN kamar ON laporan.kamar_id = kamar.id
JOIN penghuni ON laporan.penghuni_id = penghuni.id
WHERE laporan.id=?
");

$stmt->bind_param("i",$id);
$stmt->execute();
$data = $stmt->get_result()->fetch_assoc();

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

$fotos = [];

if(!empty($data['foto'])){
$fotos = explode(",", $data['foto']);
}
?>

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/style.css">

<title>Detail Laporan - LuminaCare</title>

<style>

.header {
    background:#1e3a8a;
    color:white;
    padding:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header-title {
    font-size:20px;
    font-weight:bold;
}

.nav a {
    color:white;
    text-decoration:none;
    margin-left:20px;
    font-size:14px;
}

.nav a:hover{
    text-decoration:underline;
}

.page-title{
padding:30px 30px 10px 30px;
}

.page-title h1{
margin:0;
font-size:32px;
font-weight:700;
background:linear-gradient(90deg,#1e3a8a,#2563eb);
-webkit-background-clip:text;
color:transparent;
}

.page-title p{
margin-top:5px;
color:#6b7280;
font-size:14px;
}

.page-title::after{
content:"";
display:block;
width:60px;
height:4px;
background:#2563eb;
border-radius:2px;
margin-top:10px;
}

body{
margin:0;
font-family:Arial;
background:#f4f6f9;
}

.container{
padding:30px;
}

.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
max-width:850px;
}

/* INFO */

.info{
margin-bottom:10px;
}

.label{
font-weight:bold;
display:inline-block;
width:150px;
}

/* STATUS */

.status-baru{color:#dc2626;font-weight:bold;}
.status-diproses{color:#f59e0b;font-weight:bold;}
.status-selesai{color:#16a34a;font-weight:bold;}
.status-reject{color:#991b1b;font-weight:bold;}

.reject-box{
background:#fee2e2;
padding:12px;
border-radius:6px;
margin-top:10px;
}

/* PHOTO */

.photo-grid{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-top:15px;
}

.thumbnail{
width:160px;
height:160px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
}

/* FORM */

select,input,textarea{
width:100%;
padding:10px;
margin-top:10px;
margin-bottom:15px;
border-radius:5px;
border:1px solid #ccc;
}

button{
padding:10px 20px;
background:#2563eb;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
}

button:hover{
background:#1e40af;
}

.back{
display:inline-block;
margin-top:15px;
color:#1e3a8a;
text-decoration:none;
font-weight:bold;
}

/* MOBILE */

@media(max-width:768px){

.container{
padding:15px;
}

.label{
display:block;
width:100%;
margin-bottom:3px;
}

}

.modal{
display:none;
position:fixed;
z-index:999;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
}

.modal-content{
display:block;
margin:60px auto;
max-width:80%;
border-radius:10px;
}

.close{
position:absolute;
top:20px;
right:30px;
color:white;
font-size:40px;
cursor:pointer;
}

</style>

</head>

<body>

<?php include "../inc/navbar_admin.php"; ?>

<div class="page-title">
<h1>Detail Laporan</h1>
<p>Informasi lengkap laporan kerusakan kamar</p>
</div>

<div class="container">

<div class="card">

<div class="info">
<span class="label">Kamar:</span>
<?= htmlspecialchars($data['nomor_kamar']) ?>
</div>

<div class="info">
<span class="label">Penghuni:</span>
<?= htmlspecialchars($data['nama']) ?>
</div>

<div class="info">
<span class="label">Kategori:</span>
<?= htmlspecialchars($data['kategori']) ?>
</div>

<div class="info">
<span class="label">Deskripsi:</span>
<?= htmlspecialchars($data['deskripsi']) ?>
</div>

<div class="info">
<span class="label">Status:</span>
<span class="status-<?= $data['status'] ?>">
<?= ucfirst($data['status']) ?>
</span>
</div>

<?php if($data['status']=="reject" && !empty($data['catatan_admin'])): ?>

<div class="reject-box">
<b>Catatan Admin</b><br>
<?= htmlspecialchars($data['catatan_admin']) ?>
</div>

<?php endif; ?>


<h3>Foto Laporan</h3>

<?php if(count($fotos)>0): ?>

<div class="photo-grid">

<?php foreach($fotos as $foto): ?>

<img src="../uploads/<?= htmlspecialchars(trim($foto)) ?>" class="thumbnail">

<?php endforeach; ?>

</div>

<?php else: ?>

<p><i>Tidak ada foto</i></p>

<?php endif; ?>


<hr style="margin:30px 0;">

<h3>Update Status</h3>

<form method="POST" action="update_laporan.php">

<input type="hidden" name="id" value="<?= $data['id'] ?>">

<label>Status</label>

<select name="status">

<option value="baru" <?= $data['status']=='baru'?'selected':'' ?>>Baru</option>
<option value="diproses" <?= $data['status']=='diproses'?'selected':'' ?>>Diproses</option>
<option value="selesai" <?= $data['status']=='selesai'?'selected':'' ?>>Selesai</option>
<option value="reject" <?= $data['status']=='reject'?'selected':'' ?>>Reject</option>

</select>

<label>Biaya (Rp)</label>

<input type="number" name="biaya" value="<?= $data['biaya'] ?>">

<label>Catatan Admin</label>

<textarea name="catatan_admin"><?= htmlspecialchars($data['catatan_admin']) ?></textarea>

<button type="submit">Update</button>

</form>

<a href="laporan.php" class="back">← Kembali ke Daftar Laporan</a>

</div>

</div>

<div id="imgModal" class="modal">
<span class="close">&times;</span>
<img class="modal-content" id="modalImg">
</div>

<script>

const modal=document.getElementById("imgModal");
const modalImg=document.getElementById("modalImg");
const closeBtn=document.querySelector(".close");

document.querySelectorAll(".thumbnail").forEach(img=>{
img.onclick=function(){
modal.style.display="block";
modalImg.src=this.src;
}
});

closeBtn.onclick=function(){
modal.style.display="none";
}

window.onclick=function(e){
if(e.target==modal){
modal.style.display="none";
}
}

</script>

</body>
</html>