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

<div class="card card-emerald card-outline shadow">
    <div class="card-header">
        <h3 class="card-title">Daftar Anggota Kelompok Tani</h3>
        <div class="card-tools">
            <button class="btn btn-emerald btn-sm" data-toggle="modal" data-target="#modalTambah">
                <i class="fas fa-plus"></i> Tambah Baru
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>NIK</th>
                    <th>Nama Petani</th>
                    <th>Blok</th>
                    <th>Luas (Ha)</th>
                    <th class="text-center">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($petani as $p) : ?>
                    <tr>
                        <td><?= $p['nik'] ?></td>
                        <td><b><?= $p['nama_petani'] ?></b></td>
                        <td><?= $p['kelompok_blok'] ?></td>
                        <td><?= $p['luas_lahan'] ?> Ha</td>
                        <td class="text-center">
                            <button class="btn btn-xs btn-info btn-edit"
                                data-id="<?= $p['id_petani'] ?>"
                                data-nik="<?= $p['nik'] ?>"
                                data-nama="<?= $p['nama_petani'] ?>"
                                data-alamat="<?= $p['alamat'] ?>"
                                data-luas="<?= $p['luas_lahan'] ?>"
                                data-blok="<?= $p['kelompok_blok'] ?>"
                                data-toggle="modal" data-target="#modalEdit">
                                <i class="fas fa-edit"></i>
                            </button>
                            <a href="<?= base_url('petani/hapus/' . $p['id_petani']) ?>" class="btn btn-xs btn-danger" onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($petani)): ?>
                    <tr>
                        <td colspan="5" class="text-center text-muted py-3">Belum ada data petani.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="modalTambah" tabindex="-1" role="dialog" aria-labelledby="modalTambahLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-emerald text-white">
                <h5 class="modal-title" id="modalTambahLabel"><i class="fas fa-user-plus mr-2"></i> Tambah Data Petani</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="<?= base_url('petani/simpan') ?>" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label>NIK (Nomor Induk Kependudukan)</label>
                        <input type="text" name="nik" class="form-control" placeholder="Masukkan 16 digit NIK" required maxlength="16">
                    </div>
                    <div class="form-group">
                        <label>Nama Petani</label>
                        <input type="text" name="nama_petani" class="form-control" placeholder="Nama lengkap sesuai KTP" required>
                    </div>
                    <div class="form-group">
                        <label>Alamat Lengkap</label>
                        <textarea name="alamat" class="form-control" rows="2" placeholder="Alamat tempat tinggal"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Kelompok Blok Lahan</label>
                                <input type="text" name="kelompok_blok" class="form-control" placeholder="Contoh: Blok A">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Luas Lahan (Ha)</label>
                                <input type="number" step="0.01" name="luas_lahan" class="form-control" placeholder="Contoh: 0.5" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-emerald">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="modalEditLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="modalEditLabel"><i class="fas fa-user-edit mr-2"></i> Edit Data Petani</h5>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="formEditPetani" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label>NIK</label>
                        <input type="text" name="nik" id="edit_nik" class="form-control" required maxlength="16">
                    </div>
                    <div class="form-group">
                        <label>Nama Petani</label>
                        <input type="text" name="nama_petani" id="edit_nama" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Alamat</label>
                        <textarea name="alamat" id="edit_alamat" class="form-control" rows="2"></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Kelompok Blok</label>
                                <input type="text" name="kelompok_blok" id="edit_blok" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Luas Lahan (Ha)</label>
                                <input type="number" step="0.01" name="luas_lahan" id="edit_luas" class="form-control" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-info">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Memastikan DOM siap sebelum menjalankan script
    document.addEventListener("DOMContentLoaded", function() {
        $('.btn-edit').on('click', function() {
            const id = $(this).data('id');
            // Ubah action form sesuai dengan ID yang dipilih
            $('#formEditPetani').attr('action', '<?= base_url('petani/update') ?>/' + id);

            // Isi nilai input di dalam modal
            $('#edit_nik').val($(this).data('nik'));
            $('#edit_nama').val($(this).data('nama'));
            $('#edit_alamat').val($(this).data('alamat'));
            $('#edit_luas').val($(this).data('luas'));
            $('#edit_blok').val($(this).data('blok'));
        });
    });
</script>

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