<?php

include 'session.php';
include '../config/koneksi.php';

/* =====================================================
   AMBIL DATA SURAT
===================================================== */

$query = mysqli_query(
    $conn,
    "SELECT * FROM surat ORDER BY tanggal DESC"
);

if (!$query) {
    die("Query gagal: " . mysqli_error($conn));
}

?>

<!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Kelola Pengajuan Surat</title>

    <link rel="stylesheet"
          href="../assets/css/kelola_surat.css">
    

</head>

<body>

<div class="page-container">


    <!-- =================================================
         HEADER
    ================================================== -->

    <div class="page-header">

        <a href="dashboard.php"
           class="btn-dashboard">

            ← Dashboard

        </a>

        <h1>

            📄 Kelola Pengajuan Surat

        </h1>

    </div>

    <!-- =================================================
         CONTENT CARD
    ================================================== -->

    <div class="content-card">


        <!-- =================================================
             JUDUL DAN SEARCH
        ================================================== -->

        <div class="content-top">

            <h2>

                Daftar Pengajuan Surat

            </h2>


            <div class="search-box">

                🔎

                <input
                    type="text"
                    id="searchSurat"
                    placeholder="Cari nama atau jenis surat...">

            </div>

        </div>



        <!-- =================================================
             TABLE
        ================================================== -->

        <div class="table-wrapper">

            <table id="tabelSurat">

                <thead>

                    <tr>

                        <th>No</th>

                        <th>Nama</th>

                        <th>Jenis Surat</th>

                        <th>Tanggal</th>

                        <th>Status</th>

                        <th>Aksi</th>

                    </tr>

                </thead>


                <tbody>

                <?php

                $no = 1;

                if (mysqli_num_rows($query) > 0):

                    while ($d = mysqli_fetch_assoc($query)):

                        $status = trim($d['status']);

                ?>

                    <tr>


                        <!-- NO -->

                        <td class="nomor">

                            <?= $no++; ?>

                        </td>



                        <!-- NAMA -->

                        <td class="nama">

                            <?= htmlspecialchars($d['nama']); ?>

                        </td>



                        <!-- JENIS SURAT -->

                        <td>

                            <?= htmlspecialchars($d['jenis_surat']); ?>

                        </td>



                        <!-- TANGGAL -->

                        <td class="tanggal">

                            <?= date(
                                'd-m-Y',
                                strtotime($d['tanggal'])
                            ); ?>

                        </td>



                        <!-- STATUS -->

                        <td>

                            <?php

                            if ($status == "Diproses") {

                                echo '<span class="status diproses">
                                        🟡 Diproses
                                      </span>';

                            } elseif ($status == "Selesai") {

                                echo '<span class="status selesai">
                                        🟢 Selesai
                                      </span>';

                            } elseif ($status == "Ditolak") {

                                echo '<span class="status ditolak">
                                        🔴 Ditolak
                                      </span>';

                            } else {

                                echo '<span class="status">
                                        ' . htmlspecialchars($status) . '
                                      </span>';

                            }

                            ?>

                        </td>



                        <!-- AKSI -->

                        <td>

                            <div class="aksi">


                                <a
                                    href="detail_surat.php?id=<?= $d['id_surat']; ?>"
                                    class="btn-detail">

                                    ➜ Detail

                                </a>


                                <a
                                    href="hapus_surat.php?id=<?= $d['id_surat']; ?>"
                                    class="btn-hapus"
                                    onclick="return confirm('Yakin ingin menghapus pengajuan surat ini?');">

                                    🗑 Hapus

                                </a>


                            </div>

                        </td>


                    </tr>

                <?php

                    endwhile;

                else:

                ?>

                    <tr>

                        <td colspan="6"
                            class="data-kosong">

                            📄 Belum ada pengajuan surat.

                        </td>

                    </tr>

                <?php

                endif;

                ?>

                </tbody>

            </table>

        </div>

    </div>

</div>



<!-- =====================================================
     SEARCH JAVASCRIPT
===================================================== -->

<script>

document.getElementById("searchSurat")
.addEventListener("keyup", function () {

    let keyword = this.value.toLowerCase();

    let rows = document.querySelectorAll(
        "#tabelSurat tbody tr"
    );

    rows.forEach(function (row) {

        let text = row.innerText.toLowerCase();

        if (text.includes(keyword)) {

            row.style.display = "";

        } else {

            row.style.display = "none";

        }

    });

});

</script>


</body>
</html>