@extends('template.content')

@section('title', 'Iuran Bulanan')

@push('script')
        <script>
            $(document).ready(function () {
                $('#cari').on('keypress', function (e) {
                    // Cek apakah tombol yang ditekan adalah Enter (key code 13)
                    if (e.which == 13) {
                        // Submit form saat tombol Enter ditekan
                        $('#searchForm').submit();
                    }
                });

                // Handle tombol hapus
                $('.btn-delete').on('click', function () {
                    var id = $(this).data('id');
                    var name = $(this).data('name');
                    var url = $(this).data('url');

                    Swal.fire({
                        title: 'Konfirmasi Hapus',
                        html: `Apakah Anda yakin ingin menghapus data ini?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#3085d6',
                        confirmButtonText: 'Ya, Hapus!',
                        cancelButtonText: 'Batal',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            // Buat form delete dinamis
                            var form = $('<form>').attr({
                                'method': 'POST',
                                'action': url
                            }).append(
                                $('<input>').attr({
                                    'type': 'hidden',
                                    'name': '_token',
                                    'value': '{{ csrf_token() }}'
                                }),
                                $('<input>').attr({
                                    'type': 'hidden',
                                    'name': '_method',
                                    'value': 'DELETE'
                                })
                            ).appendTo('body');

                            // Submit form
                            form.submit();
                        }
                    });
                });

                // Elemen filter
                const searchInput = $('#cari');
                const bulanFilter = $('#filterBulan');
                const tahunFilter = $('#filterTahun');
                const userFilter = $('#filterUserid');
                const filterWilayah = $('#filterWilayah');
                const filterStatus = $('#filterStatus');

                // Fungsi untuk submit form filter
                function applyFilters() {
                    const params = new URLSearchParams(window.location.search);

                    // Update parameter pencarian
                    if (searchInput.val()) {
                        params.set('cari', searchInput.val());
                    } else {
                        params.delete('cari');
                    }

                    if (filterWilayah.val()) {
                        params.set('wilayah', filterWilayah.val());
                    } else {
                        params.delete('wilayah');
                    }

                    if (filterStatus.val()) {
                        params.set('status_bayar', filterStatus.val());
                    } else {
                        params.delete('status_bayar');
                    }

                    // Update parameter pencarian
                    if (userFilter.val()) {
                        params.set('user', userFilter.val());
                    } else {
                        params.delete('user');
                    }

                    // Update parameter bulan
                    if (bulanFilter.val()) {
                        params.set('bulan', bulanFilter.val());
                    } else {
                        params.delete('bulan');
                    }

                    // Update parameter tahun
                    if (tahunFilter.val()) {
                        params.set('tahun', tahunFilter.val());
                    } else {
                        params.delete('tahun');
                    }

                    // Reset page ke 1 saat filter berubah
                    params.delete('page');

                    // Redirect dengan parameter baru
                    window.location.href = window.location.pathname + '?' + params.toString();
                }

                // Event listener untuk input pencarian (dengan debounce)
                let searchTimer;
                searchInput.on('keyup', function () {
                    clearTimeout(searchTimer);
                    searchTimer = setTimeout(applyFilters, 1000);
                });

                // Event listener untuk select bulan dan tahun
                bulanFilter.on('change', applyFilters);
                tahunFilter.on('change', applyFilters);
                userFilter.on('change', applyFilters);
                filterWilayah.on('change', applyFilters);
                filterStatus.on('change', applyFilters);


            });

        </script>

    <script>
        function printRawBT(iuranId) {
            fetch(`/iuran/cetakstruk/${iuranId}`)
                .then(response => response.text())
                .then(strukText => {
                    // Encode dan buka dengan RawBT
                    const rawbtUrl = 'rawbt:' + encodeURIComponent(strukText);
                    window.location.href = rawbtUrl;
                })
                .catch(err => {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal mengambil data struk.'
                    });
                    console.error(err);
                });
        }
    </script>


@endpush

@section('content')
                        <div class="row page-titles">
                            <div class="col-md-5 align-self-center">
                                <h4 class="text-themecolor">@yield('title')</h4>
                            </div>
                            <div class="col-md-7 align-self-center text-end">
                                <div class="d-flex justify-content-end align-items-center">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Transaksi</a></li>
                                        <li class="breadcrumb-item active">@yield('title')</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        <div class="row g-0">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">

                                        <!-- Filter Row -->
                                        <div class="row mb-4">
                                            <div class="col-md-2">
                                                <div class="mb-3">
                                                    <h2><strong>Rp. {{ number_format($total_iuran, 0, ',', '.') }} </strong></h2>
                                                </div>
                                            </div>

                                            <div class="col-md-3">
                                                <div class="mb-3">
                                                    <form method="GET" id="searchForm">
                                                        <input type="text" class="form-control" name="cari" id="cari" placeholder="Cari"
                                                            value="{{ request()->get('cari') }}">
                                                    </form>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="mb-3">
                                                    <div class="form-group">
                                                        <select id="filterStatus" class="form-control" name="status_bayar">
                                                            <option value="">Pilih Status</option>
                                                            <option value="disetor" {{ request()->get('status_bayar') == 'disetor' ? 'selected' : '' }}>Disetor</option>
                                                            <option value="success" {{ request()->get('status_bayar') == 'success' ? 'selected' : '' }}>Sukses</option>
                                                            <option value="belum_bayar" {{ request()->get('status_bayar') == 'belum_bayar' ? 'selected' : '' }}>Belum Bayar</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="mb-3">
                                                    <div class="form-group">
                                                        <select id="filterBulan" class="form-control" name="bulan">
                                                            <option value="">Semua Bulan</option>
                                                            @foreach($bulanIndonesia as $key => $bulan)
                                                                <option value="{{ $key }}"
                                                                    {{ (request()->get('bulan') ?: date('m')) == $key ? 'selected' : '' }}>
                                                                    {{ $bulan }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="mb-3">
                                                    <div class="form-group">
                                                        <select id="filterTahun" class="form-control" name="tahun">
                                                            <option value="">Semua Tahun</option>
                                                            @php
$currentYear = date('Y');
$selectedYear = request()->get('tahun') ?: $currentYear;
$startYear = $currentYear - 10;
                                                            @endphp
                                                            @for($year = $currentYear; $year >= $startYear; $year--)
                                                                <option value="{{ $year }}" {{ $selectedYear == $year ? 'selected' : '' }}>
                                                                    {{ $year }}
                                                                </option>
                                                            @endfor
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            @if (auth()->user()->level == 'admin')
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <div class="form-group">
                                                            <select id="filterUserid" class="form-control" name="user_id">
                                                                <option value="">Oleh</option>
                                                                @foreach ($oleh as $ol)
                                                                    <option value="{{ $ol->id }}"
                                                                        {{ request()->get('user') == $ol->id ? 'selected' : '' }}>
                                                                        {{ $ol->name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                            @elseif (auth()->user()->level == 'koordinator')
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <div class="form-group">
                                                            <select id="filterWilayah" class="form-control" name="wilayah">
                                                                <option value="">Wilayah</option>
                                                                @foreach ($wilayah as $wil)
                                                                    <option value="{{ $wil->id }}"
                                                                        {{ request()->get('wilayah') == $wil->id ? 'selected' : '' }}>
                                                                        {{ $wil->nama_wilayah }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <!-- Table Section -->
                                        <div class="table-responsive">
                                            @include('iuran.table')
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
@endsection