<?php
include_once '../db/koneksi.php';

if (!isset($_SESSION['kode_admin'])) {
    echo '
      <script>
        alert("Terjadi kesalahan, harap masuk kembali!");
        window.location.replace("'.$alamat_admin.'keluar.php");
      </script>
    ';
}

$anggota_query = mysqli_query($koneksi, "
    SELECT * FROM anggota
");
?>
<style>
  .foto-kyc-modal {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
  }

  @media (min-width: 768px) {
    .foto-kyc-modal {
      max-width: 600px; 
      max-height: 500px;
    }
  }

  @media (min-width: 1200px) {
    .foto-kyc-modal {
      max-width: 800px;
      max-height: 700px;
    }
  }
</style>

<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row gy-4 mb-4">
        <div class="col-md-6">
            <div class="fw-bold fs-4 text-center text-md-start">KYC</div>
        </div>
       <!--  <div class="col-md-6">
            <div class="text-center text-md-end">
                <a href="<?php echo $alamat_admin.'tambah_anggota'; ?>" class="btn btn-sm btn-primary waves-effect waves-light">
                    <span class="tf-icons mdi mdi-plus me-1"></span>
                    Tambah Anggota
                </a>
            </div>
        </div> -->
    </div>
    <div class="card table-responsive p-3">
        <table class="table" id="example">
            <thead>
                <tr>
                    <th class="text-center" scope="col">#</th>
                    <th class="text-center" scope="col">ID Anggota</th>
                    <th class="text-center" scope="col">Nama Pengguna</th>
                    <th class="text-center" scope="col">Email</th>
                    <th class="text-center" scope="col">KYC</th>
                    <th class="text-center" scope="col">Status</th>
                    <th class="text-center" scope="col">Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php
                if (mysqli_num_rows($anggota_query) > 0) {
                    $nomor_anggota = 1;
                    while ($data_anggota = mysqli_fetch_array($anggota_query)) {
                        if (is_null($data_anggota['statusverif']) || (int)$data_anggota['statusverif'] === 0) {
                            continue;
                        }
                        $kyc_status = (int) $data_anggota['statusverif'] ?? '-';
                        $id_anggota = $data_anggota['id_anggota'];
                        $nama_pengguna = $data_anggota['nama_pengguna_anggota'];
                        $email_anggota = $data_anggota['email_anggota'];
                        $fotokyc = $data_anggota['kyc_anggota'];
                        $class = $kyc_status == 2 ? 'text-success me-1' : ($kyc_status == 1 ? 'text-warning me-1' : 'text-danger me-1');

                        $status_text = $kyc_status == 2 ? 'Terverifikasi' : ($kyc_status == 1 ? 'Menunggu' : 'Ditolak');

                ?>
                <tr>
                    <th scope="row"><?php echo $nomor_anggota++; ?></th>
                    <td class="text-center"><?php echo $id_anggota; ?></td>
                    <td class="text-center"><?php echo $nama_pengguna; ?></td>
                    <td class="text-center"><?php echo $email_anggota; ?></td>
                    <td class="text-center">
                        <?php if($fotokyc) { ?>
                            <img src="<?php echo $fotokyc; ?>" class="cursor-pointer" alt="foto_kyc_<?php echo $nama_pengguna; ?>" style="width: 100px; height: auto;"  data-bs-toggle="modal" data-bs-target="#modalFoto" data-foto="<?php echo $fotokyc; ?>" nama-anggota="<?php echo $nama_pengguna; ?>">
                        <?php } else { echo '-'; } ?>
                    </td>
                    <td class="text-center <?php echo $class ?>"><?php echo $status_text; ?></td>
                    <td class="text-center">
                        <?php if($kyc_status == 2) { echo '-'; } else { ?>
                        <div class="btn-group" role="group" aria-label="Aksi Ubah dan Copy">
                            <a href="ubah_kyc.php?action=update_kyc&id=<?php echo $id_anggota; ?>&status=2" class="btn btn-sm bg-success text-white waves-effect waves-light" aria-label="Akses">
                                <span class="tf-icons mdi mdi-check me-2"></span> 
                            </a>
                            <a href="ubah_kyc.php?action=update_kyc&id=<?php echo $id_anggota; ?>&status=0" class="btn btn-sm bg-danger text-white waves-effect waves-light" aria-label="Tolak">
                                <span class="tf-icons mdi mdi-close me-0"></span> 
                            </a>
                        </div>
                        <?php } ?>  
                    </td>
                  
                </tr>
                <?php
                    }
                } else {
                ?>
                <tr>
                    <td class="text-center" colspan="7">Tidak Ada Data</td>
                </tr>
                <?php
                }
                ?>
            </tbody>
        </table>
    </div>
</div>

<div class="modal fade" id="modalFoto" tabindex="-1" aria-labelledby="modalFotoLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
      <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="modalFotoLabel">Foto KYC</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
      <div class="modal-body text-center">
        <img id="fotoKycModal" src="" alt="Foto KYC" class="img-fluid rounded foto-kyc-modal" style="max-width: 500px;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<!-- modal -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    var modalFoto = document.getElementById('modalFoto');
    var fotoKycModal = document.getElementById('fotoKycModal');

    modalFoto.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var foto = button.getAttribute('data-foto');
        var nama = button.getAttribute('nama-anggota')
        modalFoto.querySelector('.modal-title').textContent = 'Foto KYC - ' + nama;
        fotoKycModal.src = foto;
    });
});
</script>

<script>
$(document).ready(function () {
    $('#example').DataTable({
        "pageLength": 25,
        "autoWidth": false,
        "ordering": true
    });
});
</script>

<script>
$(document).ready(function(){
    var table = $('#example').DataTable();
    $('#searchTable').on('keyup', function(){
        table.search(this.value).draw();
    });
});
</script>
