<?php $__env->startSection('title', 'Status Pengajuan'); ?>
<?php $__env->startSection('topbar_title', 'Status Pengajuan'); ?>

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

<div class="page-header" style="margin-bottom: 24px;">
    <div class="page-header-left">
        <h1 style="font-size: 24px;">Status Pengajuan Mustahik</h1>
    </div>
</div>

<div class="card" style="padding:16px 20px; margin-bottom:20px;">
    <form method="GET" action="<?php echo e(url('/rt/status-pengajuan')); ?>" style="display:flex; justify-content:space-between; align-items:center;">
        
        <div style="position:relative; width:300px;">
            <i class="bi bi-search" style="position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-muted);"></i>
            <input type="text" name="search" class="form-ctrl" style="padding-left:40px;" placeholder="Cari nama mustahik..." value="<?php echo e(request('search')); ?>">
            <?php if(request('search')): ?>
                <button type="submit" style="display:none;"></button>
            <?php endif; ?>
        </div>

        <div style="display:flex; align-items:center; gap:12px;">
            <span style="font-size:12px; font-weight:600; color:var(--text-muted); letter-spacing:0.5px;">STATUS:</span>
            <div class="select-wrap" style="width:160px;">
                <select name="status" class="form-ctrl" onchange="this.form.submit()" style="padding:7px 12px; font-size:13px;">
                    <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>
    </form>
</div>

<div class="card">
    <table class="data-table">
        <thead>
            <tr>
                <th style="width:50px;">No</th>
                <th>Nama Mustahik</th>
                <th>Kategori Asnaf</th>
                <th>Tgl Pengajuan</th>
                <th>Status</th>
                <th>Catatan Amil</th>
                <th style="text-align:right;">Aksi</th>
            </tr>
        </thead>
        <tbody>
            <?php $__empty_1 = true; $__currentLoopData = $pengajuan; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <tr>
                <td style="color:var(--text-muted);"><?php echo e($pengajuan->firstItem() + $i); ?></td>
                <td style="font-weight:600; font-size:13.5px;"><?php echo e($p->nama_mustahik); ?></td>
                <td style="font-size:13px;"><?php echo e($p->kategori_asnaf); ?></td>
                <td style="font-size:13px; color:var(--text-muted);">
                    <?php echo e(\Carbon\Carbon::parse($p->tanggal_pengajuan)->format('d M Y')); ?>

                </td>
                <td>
                    <?php if($p->status == 'Disetujui'): ?>
                        <span class="badge-pill badge-green" style="display:inline-flex; align-items:center; gap:4px; padding:6px 12px;">
                            <span style="width:6px; height:6px; border-radius:50%; background:var(--green-primary);"></span> Disetujui
                        </span>
                    <?php elseif($p->status == 'Ditolak'): ?>
                        <span class="badge-pill badge-red" style="display:inline-flex; align-items:center; gap:4px; padding:6px 12px; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca;">
                            <span style="width:6px; height:6px; border-radius:50%; background:#b91c1c;"></span> Ditolak
                        </span>
                    <?php else: ?>
                        <span class="badge-pill badge-orange" style="display:inline-flex; align-items:center; gap:4px; padding:6px 12px;">
                            <span style="width:6px; height:6px; border-radius:50%; background:#ea580c;"></span> Pending
                        </span>
                    <?php endif; ?>
                </td>
                <td style="font-size:12.5px; color:var(--text-muted); font-style:italic; max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                    <?php
                        // Ambil catatan dari history terakhir jika ada
                        $catatan = $p->mustahikHistories->first() ? $p->mustahikHistories->first()->catatan_amil : '-';
                        if ($p->status == 'Pending') {
                            $catatan = 'Menunggu verifikasi lapangan';
                        }
                    ?>
                    <?php echo e($catatan ?: '-'); ?>

                </td>
                <td style="text-align:right;">
                    <?php if($p->status == 'Ditolak'): ?>
                        <button class="btn-primary-green" style="font-size:12px; padding:7px 12px; border-radius:6px; margin-right:6px;">
                            <i class="bi bi-pencil"></i> Edit & Ajukan Ulang
                        </button>
                    <?php endif; ?>
                    <button class="btn-outline" style="font-size:12px; padding:7px 12px; border-radius:6px; border-color:var(--border-color); color:var(--text-dark); background:#f8fafc;" onclick='openDetailModal(<?php echo json_encode($p, 15, 512) ?>)'>
                        Lihat Detail
                    </button>
                </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>
                    Belum ada pengajuan mustahik.
                </td>
            </tr>
            <?php endif; ?>
        </tbody>
    </table>
    
    <div class="pagination-wrap">
        <span>Menampilkan <?php echo e($pengajuan->firstItem() ?? 0); ?>-<?php echo e($pengajuan->lastItem() ?? 0); ?> dari <?php echo e($pengajuan->total()); ?> data</span>
        <div class="pagination-btns">
            <?php if($pengajuan->onFirstPage()): ?>
                <button class="page-btn" disabled><i class="bi bi-chevron-left"></i></button>
            <?php else: ?>
                <a href="<?php echo e($pengajuan->previousPageUrl()); ?>" class="page-btn"><i class="bi bi-chevron-left"></i></a>
            <?php endif; ?>

            <?php $__currentLoopData = $pengajuan->getUrlRange(max(1, $pengajuan->currentPage()-1), min($pengajuan->lastPage(), $pengajuan->currentPage()+1)); $__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 == $pengajuan->currentPage() ? 'active' : ''); ?>"><?php echo e($page); ?></a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

            <?php if($pengajuan->hasMorePages()): ?>
                <a href="<?php echo e($pengajuan->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 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>

<script>
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 = data.mustahik_histories && data.mustahik_histories.length > 0 ? data.mustahik_histories[0].catatan_amil : '-';
    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->stopSection(); ?>

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