<?php $this->load->view('template/header'); ?>
<?php $this->load->view('template/sidebar'); ?>

<style>
body{
    background:#f4f6f9;
}

.custom-card{
    background:#fff;
    border-radius:15px;
    box-shadow:0 8px 25px rgba(0,0,0,0.06);
    padding:25px;
    margin-bottom:25px;
    animation:fadeIn .4s ease-in-out;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
}

.section-title{
    font-weight:600;
    margin-bottom:20px;
    border-left:5px solid #0d6efd;
    padding-left:10px;
}

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

.form-control:focus{
    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
    border-color:#0d6efd;
}

.table{
    border-radius:12px;
    overflow:hidden;
}

.table thead{
    background:linear-gradient(90deg,#0d6efd,#4e73df);
    color:white;
}

.table tbody tr:hover{
    background:#f1f5ff;
    transition:.2s;
}

.btn{
    border-radius:10px;
}

.btn-primary{
    background:linear-gradient(45deg,#0d6efd,#4e73df);
    border:none;
}

.btn-warning{
    background:linear-gradient(45deg,#ffc107,#ffb300);
    border:none;
    color:#000;
}

.btn-danger{
    background:linear-gradient(45deg,#dc3545,#c82333);
    border:none;
}
</style>

<h3 class="mb-4 fw-bold">👥 Data Anggota</h3>

<!-- FORM TAMBAH -->
<div class="custom-card">

<h5 class="section-title">Tambah Anggota</h5>

<form method="post" action="<?= base_url('index.php/anggota/tambah')?>" class="row g-3">

<div class="col-md-2">
<input name="nis" class="form-control" placeholder="NIS" required>
</div>

<div class="col-md-3">
<input name="nama" class="form-control" placeholder="Nama" required>
</div>

<div class="col-md-2">
<input name="kelas" class="form-control" placeholder="Kelas">
</div>

<div class="col-md-3">
<input name="alamat" class="form-control" placeholder="Alamat">
</div>

<div class="col-md-2">
<input name="no_hp" class="form-control" placeholder="No WhatsApp">
</div>

<div class="col-md-2">
<button class="btn btn-primary w-100">Tambah</button>
</div>

</form>
</div>

<!-- FILTER -->
<div class="custom-card">

<h5 class="section-title">Filter Anggota</h5>

<form method="get" class="row g-3">

<div class="col-md-4">
<input name="q" class="form-control" placeholder="Cari Nama / NIS"
value="<?= $this->input->get('q') ?>">
</div>

<div class="col-md-3">
<select name="kelas" class="form-control">
<option value="">Semua Kelas</option>
<?php foreach($kelas as $k){ ?>
<option value="<?= $k->kelas ?>"
<?= $this->input->get('kelas')==$k->kelas?'selected':'' ?>>
<?= $k->kelas ?>
</option>
<?php } ?>
</select>
</div>

<div class="col-md-2">
<button class="btn btn-secondary w-100">Filter</button>
</div>

</form>
</div>

<!-- TABLE DATA -->
<div class="custom-card">

<h5 class="section-title">Daftar Anggota</h5>

<table class="table table-hover align-middle shadow-sm">

<thead>
<tr>
<th width="60">No</th>
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
<th>Alamat</th>
<th width="150">Aksi</th>
</tr>
</thead>

<tbody>

<?php if(!empty($anggota)){ $no=1; foreach($anggota as $a){ ?>

<tr>
<td><?= $no++ ?></td>
<td><?= $a->nis ?></td>
<td><?= $a->nama ?></td>
<td><?= $a->kelas ?></td>
<td><?= $a->alamat ?></td>

<td>
<a class="btn btn-warning btn-sm mb-1 w-100"
href="<?= base_url('index.php/anggota/edit/'.$a->id_anggota)?>">
Edit
</a>

<a class="btn btn-danger btn-sm w-100"
onclick="return confirm('Yakin ingin menghapus anggota ini?')"
href="<?= base_url('index.php/anggota/hapus/'.$a->id_anggota)?>">
Hapus
</a>
</td>
</tr>

<?php }}else{ ?>

<tr>
<td colspan="6" class="text-center">Belum ada data anggota</td>
</tr>

<?php } ?>

</tbody>
</table>

</div>

<?php $this->load->view('template/footer'); ?>
