@extends('layout')

@section('content')
    <div class="dashboard-main-body">

        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
            <h6 class="fw-semibold mb-0">Anggota</h6>
            <ul class="d-flex align-items-center gap-2">
                <li class="fw-medium">
                    <a href="index.html" class="d-flex align-items-center gap-1 hover-text-primary">
                        <iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
                        Dashboard
                    </a>
                </li>
                <li>-</li>
                <li class="fw-medium">Anggota</li>
            </ul>
        </div>

        <div class="card basic-data-table">
            <div class="card-header">
                <div class="d-flex " style="justify-content: space-between">
                    <div>
                        <h5 class="card-title mb-0">Data Anggota</h5>
                    </div>
                    <div>
                        <button class="btn btn-primary-600 radius-8 px-20 py-11" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">Tambah</button>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <form method="POST" enctype="multipart/form-data" class="modal-content"
                        action="{{ url('tambah_anggota') }}">
                        @csrf
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Anggota</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="">Nama</label>
                                        <input type="text" class="form-control" required placeholder="Nama"
                                            name="nama">
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="">Tempat Lahir</label>
                                                <input type="text" class="form-control" required
                                                    placeholder="Tempat Lahir" name="tempat_lahir">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="">Tanggal Lahir</label>
                                                <input type="date" class="form-control" required placeholder=""
                                                    name="tanggal_lahir">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="">NIK</label>
                                        <input type="number" class="form-control" required placeholder="Nik"
                                            name="nik">
                                    </div>
                                    <div class="mb-3">
                                        <label for="">Jenis Kelamin</label>
                                        <div class="d-flex">
                                            <div class="bg-primary-50 px-20 py-12 radius-8">
                                                <span class="form-check checked-primary d-flex align-items-center gap-2">
                                                    <input class="form-check-input" type="radio" name="jenis_kelamin"
                                                        id="radio100" value="Laki-Laki" required>
                                                    <label
                                                        class="form-check-label line-height-1 fw-medium text-secondary-light"
                                                        for="radio100"> Laki-Laki </label>
                                                </span>
                                            </div>
                                            <div class="bg-success-100 px-20 py-12 radius-8"
                                                style="margin-left: 20px !important;">
                                                <span class="form-check checked-success d-flex align-items-center gap-2">
                                                    <input class="form-check-input" type="radio" name="jenis_kelamin"
                                                        id="radio300" value="Perempuan" required>
                                                    <label
                                                        class="form-check-label line-height-1 fw-medium text-secondary-light"
                                                        for="radio300"> Perempuan </label>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="">No Hp</label>
                                        <input type="number" class="form-control" required placeholder="No Hp"
                                            name="no_hp">
                                    </div>
                                    <div class="mb-3">
                                        <label for="">No Telp</label>
                                        <input type="number" class="form-control" required placeholder="No Telp"
                                            name="no_telp">
                                    </div>
                                    <div class="mb-3">
                                        <label for="">Tanggal Daftar</label>
                                        <input type="date" class="form-control" required placeholder="No Telp"
                                            name="tgl_daftar">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label for="">Kecamatan</label>
                                        <select name="kecamatan" class="form-control select1" required
                                            onchange="ganti_kecamatan(this)">
                                            <option value="">Pilih Kecamatan</option>
                                            @foreach ($kecamatan as $rr)
                                                <option value="{{ $rr->id }}">{{ $rr->nama }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3">
                                        <label for="">Kelurahan</label>
                                        <select name="kelurahan" id="kelurahan" class="form-control select1" required>
                                            <option value="">Pilih</option>
                                        </select>
                                    </div>


                                    <div class="mb-3">
                                        <label for="">Alamat</label>
                                        <textarea name="alamat" id="" class="form-control" required placeholder="Alamat" cols="30"
                                            rows="3"></textarea>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="">RT</label>
                                                <input type="number" class="form-control" required placeholder="RT"
                                                    name="rt">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="">RW</label>
                                                <input type="number" class="form-control" required placeholder="RW"
                                                    name="rw">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="">Kota Administrasi</label>
                                        <input type="text" class="form-control" required
                                            placeholder="Kota Administrasi" name="kota" value="Jakarta Selatan" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label for="">Kode Pos</label>
                                        <input type="text" class="form-control" required placeholder="Kode Pos"
                                            name="kode_pos">
                                    </div>
                                    <div class="mb-3">
                                        <label for="">Iuran</label>
                                        <select name="iuran" id="master" class="form-control select1" required>
                                            <option value="">Pilih</option>
                                            @foreach ($iuran as $bayar)
                                                <option value="{{ $bayar->id }}">{{ $bayar->nama_iuran }} -
                                                    {{ $bayar->nominal }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>


            <div class="card-body">
                @if (session()->get('error'))
                    <div class="alert alert-danger">
                        <p>
                            {{ session()->get('error') }}
                        </p>
                    </div>
                @endif
                @if (session()->get('success'))
                    <div class="alert alert-success">
                        <p>
                            {{ session()->get('success') }}
                        </p>
                    </div>
                @endif
                <div class="table-responsive">
                    <table class="table bordered-table mb-0" id="dataTable" data-page-length='10'>
                        <thead>
                            <tr>
                                <th scope="col">
                                    No
                                </th>
                                <th scope="col">Nama</th>
                                <th scope="col">TTL </th>
                                <th scope="col">NIK</th>
                                <th scope="col">Jenis Kelamin</th>
                                <th scope="col">No Hp / No Telp</th>
                                <th scope="col">Kecamatan</th>
                                <th scope="col">Kelurahan</th>
                                <th scope="col">Kode Pos</th>
                                <th scope="col">Tanggal Daftar</th>
                                <th scope="col">Iuran</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($result as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row->nama }}</td>
                                    <td>{{ $row->tempat_lahir . ',' . date('d-m-Y', strtotime($row->tgl_lahir)) }}</td>
                                    <td>{{ $row->nik }}</td>
                                    <td>{{ $row->jenkel }}</td>
                                    <td>{{ $row->no_hp . '/' . $row->no_telp }}</td>
                                    <td>{{ $row->kecamatans->nama ?? "" }}</td>
                                    <td>{{ $row->kecamatans->kelurahan->nama ?? "" }}</td>
                                    <td>{{ $row->kode_pos }}</td>
                                    <td>{{ $row->tgl_daftar }}</td>
                                    <td>{{ $row->iuran->nama_iuran . ' - ' . $row->iuran->nominal }}</td>
                                    <td>
                                        <a href="#" data-bs-toggle="modal"
                                            data-bs-target="#edit{{ $row->id }}"
                                            class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center">
                                            <iconify-icon icon="lucide:edit"></iconify-icon>
                                        </a>

                                        <a href="{{ url('hapus_anggota/' . $row->id) }}"
                                            onclick="return confirm('apakah anda ingin menghapus data ini?');"
                                            class="w-32-px h-32-px bg-danger-focus text-danger-main rounded-circle d-inline-flex align-items-center justify-content-center">
                                            <iconify-icon icon="mingcute:delete-2-line"></iconify-icon>
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    @foreach ($result as $raw)
        <div class="modal fade" id="edit{{ $raw->id }}" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <form method="POST" enctype="multipart/form-data" class="modal-content"
                    action="{{ url('update_anggota') }}">
                    @method('PUT')
                    <input type="hidden" name="id" value="{{ $raw->id }}">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Anggota</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="">Nama</label>
                                    <input type="text" class="form-control" required placeholder="Nama"
                                        name="nama" value="{{ $raw->nama }}">
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="">Tempat Lahir</label>
                                            <input type="text" class="form-control" required
                                                placeholder="Tempat Lahir" name="tempat_lahir"
                                                value="{{ $raw->tempat_lahir }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="">Tanggal Lahir</label>
                                            <input type="date" class="form-control" required placeholder=""
                                                name="tanggal_lahir" value="{{ $raw->tgl_lahir }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="">NIK</label>
                                    <input type="number" class="form-control" required placeholder="Nik" name="nik"
                                        value="{{ $raw->nik }}">
                                </div>
                                <div class="mb-3">
                                    <label for="">Jenis Kelamin</label>
                                    <div class="d-flex">
                                        <div class="bg-primary-50 px-20 py-12 radius-8">
                                            <span class="form-check checked-primary d-flex align-items-center gap-2">
                                                <input class="form-check-input" type="radio" name="jenis_kelamin"
                                                    id="radio100" value="Laki-Laki" required
                                                    @if ($raw->jenkel == 'Laki-Laki') checked @endif>
                                                <label
                                                    class="form-check-label line-height-1 fw-medium text-secondary-light"
                                                    for="radio100"> Laki-Laki </label>
                                            </span>
                                        </div>
                                        <div class="bg-success-100 px-20 py-12 radius-8"
                                            style="margin-left: 20px !important;">
                                            <span class="form-check checked-success d-flex align-items-center gap-2">
                                                <input class="form-check-input" type="radio" name="jenis_kelamin"
                                                    id="radio300" value="Perempuan" required
                                                    @if ($raw->jenkel == 'Perempuan') checked @endif>
                                                <label
                                                    class="form-check-label line-height-1 fw-medium text-secondary-light"
                                                    for="radio300"> Perempuan </label>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="">No Hp</label>
                                    <input type="number" class="form-control" required placeholder="No Hp"
                                        name="no_hp" value="{{ $raw->no_hp }}">
                                </div>
                                <div class="mb-3">
                                    <label for="">No Telp</label>
                                    <input type="number" class="form-control" required placeholder="No Telp"
                                        name="no_telp" value="{{ $raw->no_telp }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="">Alamat</label>
                                    <textarea name="alamat" id="" class="form-control" required placeholder="Alamat" cols="30"
                                        rows="3">{{ $raw->alamat }}</textarea>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="">RT</label>
                                            <input type="number" class="form-control" required placeholder="RT"
                                                name="rt" value="{{ $raw->rt }}">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="">RW</label>
                                            <input type="number" class="form-control" required placeholder="RW"
                                                name="rw" value="{{ $raw->rw }}">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="">Kota Administrasi</label>
                                    <input type="text" class="form-control" required placeholder="Kota Administrasi"
                                        name="kota" value="{{ $raw->kode_admin }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="">Kode Pos</label>
                                    <input type="text" class="form-control" required placeholder="Kode Pos"
                                        name="kode_pos" value="{{ $raw->kode_pos }}">
                                </div>
                                <div class="mb-3">
                                    <label for="">Iuran</label>
                                    <select name="iuran" id="" class="form-control select1" required>
                                        <option value="">Pilih</option>
                                        @foreach ($iuran as $bayar)
                                            <option value="{{ $bayar->id }}"
                                                @if ($raw->id_iuran == $bayar->id) selected @endif>{{ $bayar->nama_iuran }}
                                                - {{ $bayar->nominal }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="submit" class="btn btn-primary">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

    <script>
        let kelurahanChoices; // Simpan instance agar bisa diakses global

        document.addEventListener("DOMContentLoaded", function() {
            const selectElements = document.querySelectorAll("select.select1");

            selectElements.forEach(function(select) {
                const instance = new Choices(select, {
                    searchEnabled: true,
                    itemSelectText: '',
                    placeholder: true,
                    searchPlaceholderValue: 'Cari...'
                });

                // Simpan instance khusus untuk kelurahan
                if (select.id === "kelurahan") {
                    kelurahanChoices = instance;
                }
            });
        });

        async function ganti_kecamatan(select) {
            const kecamatan_id = select.value; // ambil value dari select
            if (!kelurahanChoices) return;

            // Kosongkan isi kelurahan dulu
            kelurahanChoices.clearChoices();
            kelurahanChoices.setChoices([{
                value: '',
                label: 'Memuat data...',
                disabled: true
            }], 'value', 'label', false);

            if (!kecamatan_id) {
                kelurahanChoices.clearChoices();
                kelurahanChoices.setChoices([{
                    value: '',
                    label: 'Pilih Kecamatan terlebih dahulu',
                    disabled: true
                }], 'value', 'label', false);
                return;
            }

            try {
                const response = await fetch(`{{ url('show_anggota') }}/${kecamatan_id}`);
                const data = await response.json();

                // Bersihkan pilihan lama
                kelurahanChoices.clearChoices();

                if (data.length === 0) {
                    kelurahanChoices.setChoices([{
                        value: '',
                        label: 'Tidak ada kelurahan',
                        disabled: true
                    }], 'value', 'label', false);
                    return;
                }

                // Tambahkan pilihan baru (tanpa "Pilih Kelurahan")
                const newChoices = data.map(item => ({
                    value: item.id,
                    label: item.nama
                }));

                kelurahanChoices.setChoices(newChoices, 'value', 'label', false);

            } catch (err) {
                console.error('Gagal memuat kelurahan:', err);
                kelurahanChoices.clearChoices();
                kelurahanChoices.setChoices([{
                    value: '',
                    label: 'Gagal memuat data',
                    disabled: true
                }], 'value', 'label', false);
            }
        }
    </script>
@endsection