<?php
include 'config.php';
checkLogin();
if (!has_access($conn, 'perm_manage_units')) {
    header("Location: index.php?status=restricted");
    exit;
}

$page_title = "Manajemen Unit TV";
$active_page = "units";
include 'layout.php';

// --- LOGIKA TAMBAH TV ---
if(isset($_POST['add_tv'])) {
    $nama = mysqli_real_escape_string($conn, $_POST['nama_tv']);
    $ip   = mysqli_real_escape_string($conn, $_POST['ip_address']);
    mysqli_query($conn, "INSERT INTO tvs (nama_tv, ip_address, status) VALUES ('$nama', '$ip', 'available')");
    echo "<script>window.location='units.php';</script>";
}

// --- LOGIKA EDIT TV ---
if(isset($_POST['update_tv'])) {
    $id   = $_POST['id'];
    $nama = mysqli_real_escape_string($conn, $_POST['nama_tv']);
    $ip   = mysqli_real_escape_string($conn, $_POST['ip_address']);
    
    mysqli_query($conn, "UPDATE tvs SET nama_tv='$nama', ip_address='$ip' WHERE id='$id'");
    echo "<script>alert('Data Unit Berhasil Diperbarui!'); window.location='units.php';</script>";
}

// --- LOGIKA HAPUS TV ---
if(isset($_GET['hapus'])) {
    $id = $_GET['hapus'];
    mysqli_query($conn, "DELETE FROM tvs WHERE id='$id'");
    echo "<script>window.location='units.php';</script>";
}
?>

<style>
    .units-container { display: grid; grid-template-columns: 350px 1fr; gap: 30px; }
    .glass-card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 24px; padding: 30px; }
    input[type="text"], input[type="number"] { width: 100%; background: #0a0f1c; border: 1px solid var(--border); color: white; padding: 14px 18px; border-radius: 14px; outline: none; transition: 0.3s; margin-bottom: 15px; }
    input:focus { border-color: var(--accent); box-shadow: 0 0 15px var(--accent-glow); }
    
    table { width: 100%; border-collapse: collapse; }
    th { text-align: left; padding: 20px; color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; border-bottom: 1px solid var(--border); }
    td { padding: 20px; border-bottom: 1px solid var(--border); color: white; }
    
    .action-btns { display: flex; gap: 8px; justify-content: flex-end; }
    .btn-icon { width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: 0.2s; text-decoration: none; border: 1px solid var(--border); }
    .btn-edit { color: var(--warning); background: rgba(245, 158, 11, 0.1); }
    .btn-edit:hover { background: var(--warning); color: #000; }
    .btn-delete { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
    .btn-delete:hover { background: var(--danger); color: #fff; }

    /* MODAL STYLING */
    .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); }
    .modal-content { background: var(--bg-sidebar); width: 400px; margin: 10% auto; padding: 30px; border-radius: 24px; border: 1px solid var(--accent); }
</style>

<div class="units-container">
    <!-- FORM TAMBAH -->
    <div class="glass-card">
        <h3 style="margin-bottom:20px;"><i class='bx bx-plus-circle'></i> Tambah Unit</h3>
        <form method="POST">
            <input type="text" name="nama_tv" placeholder="Nama TV (TV 01)" required>
            <input type="text" name="ip_address" placeholder="IP Address (192.168.1.xx)" required>
            <button type="submit" name="add_tv" class="btn btn-primary" style="width:100%; justify-content:center;">SIMPAN</button>
        </form>
    </div>

    <!-- TABEL UNIT -->
    <div class="glass-card" style="padding:0; overflow:hidden;">
        <table>
            <thead>
                <tr>
                    <th>Unit</th>
                    <th>IP Address</th>
                    <th style="text-align:right;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php 
                $q = mysqli_query($conn, "SELECT * FROM tvs ORDER BY nama_tv ASC");
                while($r = mysqli_fetch_assoc($q)): 
                ?>
                <tr>
                    <td><b><?php echo $r['nama_tv']; ?></b></td>
                    <td><code style="color:var(--accent)"><?php echo $r['ip_address']; ?></code></td>
                    <td class="action-btns">
                        <a href="javascript:void(0)" class="btn-icon btn-edit" 
                           onclick="openEditModal('<?php echo $r['id']; ?>', '<?php echo $r['nama_tv']; ?>', '<?php echo $r['ip_address']; ?>')">
                            <i class='bx bx-edit-alt'></i>
                        </a>
                        <a href="?hapus=<?php echo $r['id']; ?>" class="btn-icon btn-delete" onclick="return confirm('Hapus?')">
                            <i class='bx bx-trash'></i>
                        </a>
                    </td>
                </tr>
                <?php endwhile; ?>
            </tbody>
        </table>
    </div>
</div>

<!-- MODAL EDIT -->
<div id="editModal" class="modal">
    <div class="modal-content">
        <h3 style="margin-bottom:20px; color:var(--accent);">Edit Unit TV</h3>
        <form method="POST">
            <input type="hidden" name="id" id="edit_id">
            <label style="font-size:0.8rem; color:var(--text-muted);">NAMA UNIT</label>
            <input type="text" name="nama_tv" id="edit_nama" required>
            <label style="font-size:0.8rem; color:var(--text-muted);">IP ADDRESS</label>
            <input type="text" name="ip_address" id="edit_ip" required>
            
            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:10px;">
                <button type="button" class="btn btn-danger" onclick="closeModal()" style="justify-content:center;">BATAL</button>
                <button type="submit" name="update_tv" class="btn btn-primary" style="justify-content:center;">UPDATE</button>
            </div>
        </form>
    </div>
</div>

<script>
function openEditModal(id, nama, ip) {
    document.getElementById('edit_id').value = id;
    document.getElementById('edit_nama').value = nama;
    document.getElementById('edit_ip').value = ip;
    document.getElementById('editModal').style.display = 'block';
}
function closeModal() {
    document.getElementById('editModal').style.display = 'none';
}
</script>

<?php echo "</div></body></html>"; ?>