@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">Bayar Iuran</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">Bayar Iuran</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 Bayar Iuran</h5>
                        <br>
                    </div>
                    <div>
                        <button class="btn btn-success-600 radius-8 px-20 py-11" data-bs-toggle="modal"
                            data-bs-target="#print">Export Excel</button>
                        <button class="btn btn-primary-600 radius-8 px-20 py-11" data-bs-toggle="modal"
                            data-bs-target="#exampleModal">Tambah</button>
                    </div>
                </div>
                <form class="row w-75" method="GET" action="{{ url('filter') }}">
                    @csrf
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="bulan" class="form-label">Pilih Bulan</label>
                            <select class="form-select select1" id="bulan" name="bulan" required>
                                <option value="" selected disabled>Pilih Bulan</option>
                                <option value="Januari">Januari</option>
                                <option value="Februari">Februari</option>
                                <option value="Maret">Maret</option>
                                <option value="April">April</option>
                                <option value="Mei">Mei</option>
                                <option value="Juni">Juni</option>
                                <option value="Juli">Juli</option>
                                <option value="Agustus">Agustus</option>
                                <option value="September">September</option>
                                <option value="Oktober">Oktober</option>
                                <option value="November">November</option>
                                <option value="Desember">Desember</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="tahun" class="form-label">Pilih Tahun</label>
                            <select class="form-select select1" id="tahun" name="tahun" required>
                                <option value="" selected disabled>Pilih Tahun</option>
                                <!-- Tahun 2020 sampai 2040 -->
                                <script>
                                    for (let y = 2020; y <= 2040; y++) {
                                        document.write(`<option value="${y}">${y}</option>`);
                                    }
                                </script>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div style="margin-top: 34px;">
                            <button class="btn btn-success" type="submit">Filter</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal fade" id="print" 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('export_excel') }}">
                        @csrf
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Print Excel Bayar Iuran</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="">Tanggal Mulai</label>
                                <input type="date" required name="tgl_mulai" placeholder="" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="">Tanggal Akhir</label>
                                <input type="date" required name="tgl_akhir" placeholder="" class="form-control">
                            </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>

            <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

            <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_bayar') }}" id="formBayar">
                        @csrf
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">Tambah Bayar Iuran</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="">Anggota</label>
                                <select name="anggota" class="form-control select1" required id="anggotaSelect">
                                    <option value="">Pilih</option>
                                    @foreach ($anggota as $y)
                                        <option value="{{ $y->id }}" data-nominal="{{ $y->iuran->nominal }}">
                                            {{ $y->nama . ' - ' . $y->iuran->nominal . ' - ' . $y->kelurahan }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="">Nominal</label>
                                <input type="number" class="form-control" required placeholder="Nominal" name="nominal"
                                    id="nominalInput">
                            </div>

                            <div class="mb-3">
                                <label for="">Tanggal Bayar</label>
                                <input type="date" required name="tgl" placeholder="" class="form-control"
                                    value="{{ date('Y-m-d') }}">
                            </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>

            <script>
                document.addEventListener("DOMContentLoaded", function() {
                    const anggotaSelect = document.getElementById("anggotaSelect");
                    const nominalInput = document.getElementById("nominalInput");
                    const formBayar = document.getElementById("formBayar");

                    anggotaSelect.addEventListener("change", function() {
                        const selectedOption = this.options[this.selectedIndex];
                        const nominal = selectedOption.getAttribute("data-nominal");
                        nominalInput.value = nominal ? nominal : "";
                    });

                    // Intercept submit
                    formBayar.addEventListener("submit", function(e) {
                        e.preventDefault(); // cegah langsung submit

                        Swal.fire({
                            title: "Yakin Simpan Data?",
                            text: "Pastikan data sudah benar!",
                            icon: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#3085d6",
                            cancelButtonColor: "#d33",
                            confirmButtonText: "Ya, Simpan!",
                            cancelButtonText: "Batal"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                formBayar.submit(); // submit form kalau user pilih "Ya"
                            }
                        });
                    });
                });
            </script>

            <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">Kecamatan/Kelurahan</th>
                                <th scope="col">RT/RW</th>
                                <th scope="col">Tanggal Bayar</th>
                                <th scope="col">Jumlah Bayar</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($result as $row)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $row->anggota->nama }}</td>
                                    <td>{{ $row->anggota->kecamatan . '/' . $row->anggota->kelurahan }}</td>
                                    <td>{{ $row->anggota->rt . '/' . $row->anggota->rw }}</td>
                                    <td>{{ date('d F Y', strtotime($row->tgl)) }}</td>
                                    <td>Rp. {{ number_format($row->jumlah) }}</td>
                                    <td>
                                        <a href="{{ url('hapus_bayar/' . $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>
                        <tfoot>
                            <tr>
                                <td colspan="5" style="text-align: right">Jumlah</td>
                                <td colspan="2">
                                    Rp. {{ number_format($result->sum('jumlah')) }}
                                </td>
                            </tr>
                        </tfoot>

                    </table>
                </div>
            </div>
        </div>
    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">

    <!-- Choices JS -->
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

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

            selectElements.forEach(function(select) {
                new Choices(select, {
                    searchEnabled: true,
                    itemSelectText: '',
                    placeholder: true,
                    searchPlaceholderValue: 'Cari...'
                });
            });
        });
    </script>
@endsection