<?php $__env->startSection('title', 'Laporan Mustahik'); ?>
<?php $__env->startSection('topbar_title', 'Laporan Mustahik'); ?>

<?php $__env->startSection('content'); ?>

<div class="page-header">
    <div class="page-header-left">
        <h1>Laporan Data Mustahik</h1>
    </div>
    <div style="display:flex; gap:10px;">
        <a href="<?php echo e(url('/admin/laporan/export-excel')); ?><?php echo e(request()->getQueryString() ? '?' . request()->getQueryString() : ''); ?>"
           class="btn-outline" style="font-size:13px;">
            <i class="bi bi-file-earmark-excel"></i> Unduh Excel
        </a>
        <a href="<?php echo e(url('/admin/laporan/export-pdf')); ?><?php echo e(request()->getQueryString() ? '?' . request()->getQueryString() : ''); ?>"
           class="btn-primary-green" style="font-size:13px;">
            <i class="bi bi-file-earmark-pdf"></i> Unduh PDF
        </a>
    </div>
</div>


<div class="card" style="padding: 20px; margin-bottom: 16px;">
    <form method="GET" action="<?php echo e(url('/admin/laporan')); ?>">
        <div class="filter-grid" style="margin-bottom:12px;">
            <div>
                <label class="form-label-styled" style="font-size:11px; letter-spacing:.5px; text-transform:uppercase;">Wilayah</label>
                <div class="select-wrap">
                    <select name="wilayah" class="form-ctrl">
                        <option value="">Semua Wilayah</option>
                        <?php $__currentLoopData = $wilayahList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $w): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($w->id_wilayah); ?>" <?php echo e(request('wilayah') == $w->id_wilayah ? 'selected' : ''); ?>>
                                RT <?php echo e($w->rt); ?> / RW <?php echo e($w->rw); ?> — <?php echo e($w->nama_wilayah); ?>

                            </option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
            </div>
            <div>
                <label class="form-label-styled" style="font-size:11px; letter-spacing:.5px; text-transform:uppercase;">Status Pengajuan</label>
                <div class="select-wrap">
                    <select name="status" class="form-ctrl">
                        <option value="">Semua Status</option>
                        <option value="Pending"   <?php echo e(request('status') == 'Pending'   ? 'selected' : ''); ?>>Pending</option>
                        <option value="Disetujui" <?php echo e(request('status') == 'Disetujui' ? 'selected' : ''); ?>>Disetujui</option>
                        <option value="Ditolak"   <?php echo e(request('status') == 'Ditolak'   ? 'selected' : ''); ?>>Ditolak</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="form-label-styled" style="font-size:11px; letter-spacing:.5px; text-transform:uppercase;">Kategori Asnaf</label>
                <div class="select-wrap">
                    <select name="asnaf" class="form-ctrl">
                        <option value="">Semua Asnaf</option>
                        <option value="Fakir"     <?php echo e(request('asnaf') == 'Fakir'     ? 'selected' : ''); ?>>Fakir</option>
                        <option value="Miskin"    <?php echo e(request('asnaf') == 'Miskin'    ? 'selected' : ''); ?>>Miskin</option>
                        <option value="Gharim"    <?php echo e(request('asnaf') == 'Gharim'    ? 'selected' : ''); ?>>Gharim</option>
                        <option value="Ibnu Sabil"<?php echo e(request('asnaf') == 'Ibnu Sabil'? 'selected' : ''); ?>>Ibnu Sabil</option>
                    </select>
                </div>
            </div>
        </div>
        <div style="display:flex; gap:10px; align-items:center;">
            <div class="search-wrap" style="flex:1; max-width:340px;">
                <i class="bi bi-search"></i>
                <input type="text" name="search" class="search-input"
                    placeholder="Cari NIK atau Nama..."
                    value="<?php echo e(request('search')); ?>">
            </div>
            <button type="submit" class="btn-primary-green" style="padding:9px 18px; font-size:13px;">
                <i class="bi bi-funnel"></i> Filter
            </button>
            <?php if(request()->anyFilled(['wilayah','status','asnaf','search'])): ?>
                <a href="<?php echo e(url('/admin/laporan')); ?>" class="btn-outline" style="font-size:13px;">
                    <i class="bi bi-x-circle"></i> Reset
                </a>
            <?php endif; ?>
        </div>
    </form>
</div>


<div class="card">
    <table class="data-table">
        <thead>
            <tr>
                <th style="width:50px;">No</th>
                <th>Nama Mustahik</th>
                <th>Wilayah</th>
                <th>Hubungan</th>
                <th>Kategori Asnaf</th>
                <th>Tgl Pengajuan</th>
                <th style="width:60px;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php $__empty_1 = true; $__currentLoopData = $mustahik; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $m): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <tr>
                <td style="color:var(--text-muted);"><?php echo e($mustahik->firstItem() + $i); ?></td>
                <td>
                    <div style="display:flex; align-items:center; gap:10px;">
                        <div class="avatar-initial"><?php echo e(strtoupper(substr($m->nama_mustahik, 0, 2))); ?></div>
                        <div>
                            <div style="font-weight:600; font-size:13.5px;"><?php echo e($m->nama_mustahik); ?></div>
                            <div style="font-size:12px; color:var(--text-muted);"><?php echo e($m->nik_kepala_kk); ?></div>
                        </div>
                    </div>
                </td>
                <td>
                    <?php if($m->kk && $m->kk->wilayah): ?>
                        <span style="font-size:13px;">RT <?php echo e(str_pad($m->kk->wilayah->rt, 2, '0', STR_PAD_LEFT)); ?> / RW <?php echo e(str_pad($m->kk->wilayah->rw, 2, '0', STR_PAD_LEFT)); ?></span>
                    <?php else: ?>
                        <span style="color:var(--text-muted); font-size:13px;">-</span>
                    <?php endif; ?>
                </td>
                <td style="font-size:13px;"><?php echo e($m->status_hubungan); ?></td>
                <td>
                    <?php
                        $asnafClass = match($m->kategori_asnaf) {
                            'Fakir'     => 'badge-fakir',
                            'Miskin'    => 'badge-miskin',
                            'Gharim'    => 'badge-gharim',
                            'Ibnu Sabil' => 'badge-sabil',
                            default     => 'badge-gray',
                        };
                    ?>
                    <span class="badge-pill <?php echo e($asnafClass); ?>"><?php echo e($m->kategori_asnaf); ?></span>
                </td>
                <td style="font-size:13px; color:var(--text-muted);">
                    <?php echo e(\Carbon\Carbon::parse($m->tanggal_pengajuan)->format('d M Y')); ?>

                </td>
                <td>
                    <div style="position:relative; display:inline-block;">
                        <button class="action-dots" onclick="toggleDrop(this)">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <div class="dropdown-menu-custom">
                            <a href="#" onclick='openDetailModal(<?php echo json_encode($m, 15, 512) ?>); return false;'>
                                <i class="bi bi-eye"></i> Lihat Detail
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <tr>
                <td colspan="7" style="text-align:center; padding:40px; color:var(--text-muted);">
                    <i class="bi bi-inbox" style="font-size:36px; display:block; margin-bottom:10px;"></i>
                    Tidak ada data mustahik yang ditemukan.
                </td>
            </tr>
            <?php endif; ?>
        </tbody>
    </table>

    <div class="pagination-wrap">
        <span>Menampilkan <?php echo e($mustahik->firstItem() ?? 0); ?> sampai <?php echo e($mustahik->lastItem() ?? 0); ?> dari <?php echo e($mustahik->total()); ?> data</span>
        <div class="pagination-btns">
            <?php if($mustahik->onFirstPage()): ?>
                <button class="page-btn" disabled><i class="bi bi-chevron-left"></i></button>
            <?php else: ?>
                <a href="<?php echo e($mustahik->previousPageUrl()); ?>" class="page-btn"><i class="bi bi-chevron-left"></i></a>
            <?php endif; ?>

            <?php $__currentLoopData = $mustahik->getUrlRange(max(1, $mustahik->currentPage()-2), min($mustahik->lastPage(), $mustahik->currentPage()+2)); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e($url); ?>" class="page-btn <?php echo e($page == $mustahik->currentPage() ? 'active' : ''); ?>"><?php echo e($page); ?></a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            <?php if($mustahik->hasMorePages()): ?>
                <a href="<?php echo e($mustahik->nextPageUrl()); ?>" class="page-btn"><i class="bi bi-chevron-right"></i></a>
            <?php else: ?>
                <button class="page-btn" disabled><i class="bi bi-chevron-right"></i></button>
            <?php endif; ?>
        </div>
    </div>
</div>

</div>


<div id="modalDetail" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <h3 style="font-size:18px; font-weight:700;">Detail Pengajuan Mustahik</h3>
            <button type="button" class="btn-close-modal" onclick="document.getElementById('modalDetail').style.display='none'"><i class="bi bi-x-lg"></i></button>
        </div>
        <div class="modal-body">
            <table style="width: 100%; font-size: 14px;">
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted); width: 40%;">Nama Mustahik</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_nama"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">NIK KK</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_nik"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Hubungan dgn KK</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_hub"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Pekerjaan</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_pekerjaan"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Pendapatan Bulanan</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_pendapatan"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Kondisi Warga</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_kondisi"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Status Rumah</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_rumah"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Kategori Asnaf</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_asnaf"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Status Pengajuan</td>
                    <td style="padding: 8px 0; font-weight: 600;" id="detail_status"></td>
                </tr>
                <tr>
                    <td style="padding: 8px 0; color: var(--text-muted);">Catatan Amil</td>
                    <td style="padding: 8px 0; font-weight: 600; color: #ea580c; font-style: italic;" id="detail_catatan"></td>
                </tr>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn-outline" onclick="document.getElementById('modalDetail').style.display='none'">Tutup</button>
        </div>
    </div>
</div>

<style>
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5); z-index: 999;
    display: none; align-items: center; justify-content: center;
}
.modal-content {
    background: white; width: 100%; max-width: 600px;
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    max-height: 90vh; display: flex; flex-direction: column;
}
.modal-header {
    padding: 18px 24px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: space-between;
}
.btn-close-modal {
    background: none; border: none; font-size: 20px; color: var(--text-muted); cursor: pointer;
}
.btn-close-modal:hover { color: #ef4444; }
.modal-body {
    padding: 24px; overflow-y: auto;
}
.modal-footer {
    padding: 16px 24px; border-top: 1px solid var(--border-color);
    display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-page);
    border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
</style>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
function toggleDrop(btn) {
    const menu = btn.nextElementSibling;
    document.querySelectorAll('.dropdown-menu-custom.show').forEach(m => {
        if (m !== menu) m.classList.remove('show');
    });
    menu.classList.toggle('show');
}
document.addEventListener('click', e => {
    if (!e.target.closest('.action-dots') && !e.target.closest('.dropdown-menu-custom')) {
        document.querySelectorAll('.dropdown-menu-custom.show').forEach(m => m.classList.remove('show'));
    }
});

function openDetailModal(data) {
    document.getElementById('detail_nama').innerText = data.nama_mustahik;
    document.getElementById('detail_nik').innerText = data.nik_kepala_kk;
    document.getElementById('detail_hub').innerText = data.hub_dengan_kk;
    document.getElementById('detail_pekerjaan').innerText = data.pekerjaan;
    
    var valStr = data.pendapatan_bulanan.toString().replace(/\.00$/, '');
    document.getElementById('detail_pendapatan').innerText = 'Rp. ' + valStr.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
    
    document.getElementById('detail_kondisi').innerText = data.status_kondisi_warga;
    document.getElementById('detail_rumah').innerText = data.status_kepemilikan_rumah;
    document.getElementById('detail_asnaf').innerText = data.kategori_asnaf;
    document.getElementById('detail_status').innerText = data.status;
    
    var catatan = '-';
    if(data.status === 'Pending') {
        catatan = 'Menunggu verifikasi lapangan';
    } else if (data.catatan_amil) {
        catatan = data.catatan_amil;
    }
    
    document.getElementById('detail_catatan').innerText = catatan;
    
    document.getElementById('modalDetail').style.display = 'flex';
}
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make(Auth::user()->int_role == 'superadmin' ? 'layouts.superadmin' : 'layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\Skripsi\zakat-masjid\resources\views/admin/laporan/index.blade.php ENDPATH**/ ?>