<?= $this->extend('layout/template') ?>
<?= $this->section('content') ?>

<style>
.card-modern {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.header-modern {
    background: linear-gradient(135deg, #0d6efd, #3a7bff);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 20px;
}

.form-control {
    border-radius: 8px;
}

.btn-primary {
    border-radius: 8px;
    padding: 10px 18px;
}

.table thead {
    background: #f8f9fa;
}

.badge-today {
    background: #e7f1ff;
    color: #0d6efd;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
}

.number-circle {
    background: #eef2ff;
    padding: 6px 10px;
    border-radius: 50%;
    font-weight: bold;
}

.btn-delete {
    color: red;
}

.empty-box {
    text-align: center;
    padding: 40px;
    color: #888;
}
</style>

<div class="card card-modern">

    <!-- HEADER -->
    <div class="header-modern">
        <h4><i class="fas fa-user-check"></i> Data Pengunjung Hari Ini</h4>
        <small>Pencatatan aktivitas kunjungan perpustakaan</small>
    </div>

    <div class="card-body">

        <!-- ALERT -->
        <?php if (session()->getFlashdata('success')) : ?>
            <div class="alert alert-success">
                <?= session()->getFlashdata('success') ?>
            </div>
        <?php endif; ?>

        <?php if (session()->getFlashdata('error')) : ?>
            <div class="alert alert-danger">
                <?= session()->getFlashdata('error') ?>
            </div>
        <?php endif; ?>

        <!-- FORM -->
        <div class="mb-4">
            <h5><i class="fas fa-user-plus"></i> Tambah Pengunjung</h5>
            <small>Cari nama anggota untuk mencatat kunjungan</small>

            <form action="<?= base_url('pengunjung/store') ?>" method="post" class="mt-3">
                <?= csrf_field() ?>

                <div class="row">
                    <div class="col-md-8">
                        <input type="text" name="nama" id="search"
                            class="form-control"
                            placeholder="Ketik nama anggota..." required>
                        <div id="hasil"></div>
                    </div>

                    <div class="col-md-4">
                        <button class="btn btn-primary w-100">
                            <i class="fas fa-check"></i> Simpan
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- TITLE -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <h5><i class="fas fa-list"></i> Daftar Pengunjung</h5>
                <small>Pengunjung yang tercatat hari ini</small>
            </div>

            <span class="badge-today">
                <i class="fas fa-calendar-day"></i> Hari Ini
            </span>
        </div>

        <!-- TABLE -->
        <?php if (!empty($pengunjung)) : ?>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th class="text-center">No</th>
                            <th>Nama</th>
                            <th class="text-center">Tanggal</th>
                            <th class="text-center">Jam</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php $no = 1; ?>
                        <?php foreach ($pengunjung as $p) : ?>
                            <tr>
                                <td class="text-center">
                                    <span class="number-circle"><?= $no++ ?></span>
                                </td>

                                <td><?= esc($p['nama']) ?></td>

                                <td class="text-center">
                                    <?= date('d-m-Y', strtotime($p['tanggal'])) ?>
                                </td>

                                <td class="text-center">
                                    <?= esc($p['jam_masuk']) ?>
                                </td>

                                <td class="text-center">
                                    <a href="<?= base_url('pengunjung/delete/' . $p['id']) ?>"
                                        onclick="return confirm('Yakin hapus?')"
                                        class="btn-delete">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

        <?php else : ?>

            <div class="empty-box">
                <i class="fas fa-user-slash fa-2x mb-2"></i>
                <p>Belum ada pengunjung hari ini</p>
            </div>

        <?php endif; ?>

    </div>
</div>

<?= $this->endSection() ?>