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

/* ==================================
   UBAH STATUS (KLIK CYCLE)
================================== */
if (isset($_POST['change_status'])) {

    $id = $_POST['kamar_id'];
    $current = $_POST['current_status'];

    if ($current == 'kosong') {
        $new = 'terisi';
    } elseif ($current == 'terisi') {
        $new = 'maintenance';
    } else {
        $new = 'kosong';
    }

    $stmt = $conn->prepare("UPDATE kamar SET status=? WHERE id=?");
    $stmt->bind_param("si", $new, $id);
    $stmt->execute();

    header("Location: kamar.php");
    exit;
}

/* ==================================
   AMBIL DATA KAMAR + PENGHUNI AKTIF
================================== */
$result = $conn->query("
    SELECT kamar.*, penghuni.nama 
    FROM kamar
    LEFT JOIN penghuni 
        ON kamar.id = penghuni.kamar_id 
        AND penghuni.status='aktif'
    ORDER BY kamar.lantai ASC, kamar.nomor_kamar ASC
");

$kamar = [];
while($row = $result->fetch_assoc()) {
    $kamar[$row['lantai']][] = $row;
}
?>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/style.css">
<title>Manajemen Kamar - LuminaCare</title>

<style>
.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;
}

/* garis dekorasi */
.page-title::after{
content:"";
display:block;
width:60px;
height:4px;
background:#2563eb;
border-radius:2px;
margin-top:10px;
}
body {
    margin:0;
    font-family: Arial, sans-serif;
    background:#f4f6f9;
}

.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;
}

.container {
    padding:30px;
}

.legend {
    margin-bottom:30px;
}

.legend span {
    display:inline-block;
    margin-right:20px;
}

.box {
    display:inline-block;
    width:15px;
    height:15px;
    border-radius:3px;
    margin-right:5px;
}

.lantai {
    margin-bottom:40px;
}

.lantai h3 {
    margin-bottom:15px;
    color:#1e3a8a;
}

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

form {
    margin:0;
}

button.room {
    width:120px;
    height:90px;
    border-radius:8px;
    border:none;
    color:white;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 4px 8px rgba(0,0,0,0.1);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:0.2s;
}

button.room:hover {
    opacity:0.85;
    transform:translateY(-2px);
}

.kosong { background:#2563eb; }
.terisi { background:#16a34a; }
.maintenance { background:#dc2626; }

.room-number {
    font-size:16px;
}

.room-name {
    font-size:11px;
    margin-top:5px;
    text-align:center;
    padding:0 5px;
}

/* ===============================
   MOBILE FIX
================================ */
@media (max-width:768px){

    .header {
        flex-direction:column;
        align-items:flex-start;
    }

    .nav {
        margin-top:10px;
        width:100%;
    }

    .nav a {
        display:inline-block;
        margin:5px 10px 0 0;
    }

    .container {
        padding:15px;
    }

    .grid {
        justify-content:center;
    }

    button.room {
        width:45%;
        height:85px;
    }

    .room-number {
        font-size:14px;
    }

    .room-name {
        font-size:10px;
    }
}

/* Extra small phones */
@media (max-width:480px){
    button.room {
        width:100%;
    }
}
</style>
</head>

<body>

<?php include "../inc/navbar_admin.php"; ?>
<div class="page-title">
    <h1>Manajemen Kamar</h1>
    <p>Monitoring status kamar kost LuminaCare</p>
</div>
    <div class="nav">

    </div>
</div>

<div class="container">

    <div class="legend">
        <span><span class="box" style="background:#2563eb;"></span> Kosong</span>
        <span><span class="box" style="background:#16a34a;"></span> Terisi</span>
        <span><span class="box" style="background:#dc2626;"></span> Maintenance</span>
    </div>

    <?php foreach($kamar as $lantai => $rooms): ?>
        <div class="lantai">
            <h3>Lantai <?= $lantai ?></h3>
            <div class="grid">

                <?php foreach($rooms as $r): ?>
                    <form method="POST">
                        <input type="hidden" name="kamar_id" value="<?= $r['id'] ?>">
                        <input type="hidden" name="current_status" value="<?= $r['status'] ?>">

                        <button type="submit"
                                name="change_status"
                                class="room <?= $r['status'] ?>">

                            <div class="room-number">
                                <?= $r['nomor_kamar'] ?>
                            </div>

                            <div class="room-name">
                                <?php
                                    if ($r['status'] == 'maintenance') {
                                        echo "Maintenance";
                                    } elseif (!empty($r['nama'])) {
                                        echo $r['nama'];
                                    } else {
                                        echo "Kosong";
                                    }
                                ?>
                            </div>

                        </button>
                    </form>
                <?php endforeach; ?>

            </div>
        </div>
    <?php endforeach; ?>

</div>
<?php include "../inc/footer.php"; ?>

</body>
</html>