<style>
/* ===== SURAT MENYURAT ===== */
.btn:focus, .form-control:focus, .form-select:focus { box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.12); }
.form-control, .form-select { border-radius: 8px; border: 1.5px solid #e5e7eb; font-size: .88rem; padding: 9px 12px; }

/* ===== PAGE HEADER ===== */
.ar-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.ar-header-left h5 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b5a52;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
  flex-wrap: wrap;
}
.ar-header-left h5 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32);
  flex-shrink: 0;
}
.ar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: #94a3b8;
  padding-left: 51px;
}
.ar-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: #e2e8f0; }

.btn-kirim {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  background: #0d9488;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(13,148,136,0.28);
  transition: all .2s;
  white-space: nowrap;
}
.btn-kirim:hover {
  background: #0b7a6e;
  box-shadow: 0 5px 16px rgba(13,148,136,0.38);
  transform: translateY(-1px);
  color: #fff;
}

/* ===== STAT CARDS ===== */
.surat-stat-card {
    border-radius: 10px; border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.surat-stat-card .card-body {
    padding: 11px 14px;
    display: flex; align-items: center; gap: 10px;
}
.surat-stat-icon {
    width: 38px; height: 38px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.surat-stat-icon i { font-size: 1.1rem; }

/* ===== STATUS BADGES ===== */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.sb-pending  { background:#fef9c3; color:#854d0e; border:1px solid #fde68a; }
.sb-diproses { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.sb-selesai  { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
.sb-ditolak  { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ===== SECTION CARD ===== */
.section-card {
    border-radius: 14px; border: 1.5px solid #e5e7eb;
    box-shadow: 0 1px 5px rgba(0,0,0,.06);
    overflow: hidden; background: #fff; margin-bottom: 16px;
}
.section-card-header {
    padding: 12px 20px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid #f1f3f5; background: #fff;
}
.section-card-header .title {
    font-size: .85rem; font-weight: 700; color: #374151;
    display: flex; align-items: center; gap: 6px;
}
.section-card-header .title i { color: #0d9488; }

/* ===== TABLE ===== */
.surat-table th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; font-weight: 700; padding: 10px 14px;
    background: #f8fffe; border-bottom: 1.5px solid #e5e7eb; white-space: nowrap;
}
.surat-table td { padding: 10px 14px; vertical-align: middle; font-size: .84rem; border-bottom: 1px solid #f3f4f6; }
.surat-table tbody tr:last-child td { border-bottom: none; }
.surat-table tbody tr:hover { background: #f0fdfa; }

/* ===== ACTION BUTTONS ===== */
.btn-act { font-size:.78rem; padding:5px 9px; border-radius:7px; font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; gap:3px; }
.btn-act-view   { background:#dbeafe; border:1px solid #93c5fd; color:#1e40af; }
.btn-act-view:hover { background:#bfdbfe; }
.btn-act-ok     { background:#dcfce7; border:1px solid #6ee7b7; color:#065f46; }
.btn-act-ok:hover { background:#bbf7d0; }
.btn-act-warn   { background:#fef3c7; border:1px solid #fde68a; color:#92400e; }
.btn-act-warn:hover { background:#fde68a; }
.btn-act-delete { background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }
.btn-act-delete:hover { background:#fecaca; }
.btn-act-print  { background:#ede9fe; border:1px solid #c4b5fd; color:#5b21b6; }
.btn-act-print:hover { background:#ddd6fe; }

/* ===== MODAL ===== */
.modal-content { border-radius:14px; border:none; box-shadow:0 8px 32px rgba(0,0,0,.12); }
.modal-header  { padding:15px 20px; border-bottom:1px solid #f1f3f5; }
.modal-body    { padding:20px; }
.modal-footer  { padding:13px 20px; border-top:1px solid #f1f3f5; }
.form-label    { font-size:.8rem; font-weight:700; color:#374151; margin-bottom:4px; }

/* ===== DESKTOP / MOBILE TOGGLE ===== */
.desktop-table     { display: block; }
.mobile-surat-list { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 767.98px) {
    /* .container-fluid { padding-left:12px !important; padding-right:12px !important; } */
    .ar-page-header { flex-direction:column !important; align-items:flex-start !important; gap:10px; }
    .btn-kirim { display: none; }
    .btn-kirim-fab { display: flex !important; }

    .stat-row > [class*='col-'] { flex:0 0 50% !important; max-width:50% !important; }

    .desktop-table     { display: none !important; }
    .mobile-surat-list { display: flex !important; flex-direction:column; gap:8px; padding:10px; }

    .info-box { flex-direction:column; }
}
@media (min-width: 768px) {
    .btn-kirim-fab { display: none !important; }
}

/* ===== FAB MOBILE ===== */
.btn-kirim-fab {
  display: none;
  position: fixed;
  bottom: 24px; right: 20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0b7a6e, #14b8a6);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(13,148,136,0.45);
  z-index: 200;
  transition: all .2s;
}
.btn-kirim-fab:hover { transform: scale(1.08); color: #fff; }
</style>

<div>

    <!-- Header -->
 <div class="ar-page-header">
    <div class="ar-header-left">
        <h5>
            <span class="hi"><i class="bi bi-file-text"></i></span>
            <?php echo is_warga() ? 'Pengajuan Surat' : 'Permohonan Surat'; ?>
        </h5>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <span><?php echo is_warga() ? 'Pengajuan Surat' : 'Permohonan Surat'; ?></span>
        </div>
    </div>
    <a href="<?php echo base_url('surat/ajukan'); ?>" class="btn-kirim">
        <i class="bi bi-plus-circle"></i>
        Ajukan Surat<?php echo is_warga() ? ' Baru' : ''; ?>
    </a>
</div>

<!-- FAB Mobile -->
<a href="<?php echo base_url('surat/ajukan'); ?>" class="btn-kirim-fab" title="Ajukan Surat">
  <i class="bi bi-plus-lg"></i>
</a>

    <!-- Stat Cards (warga) -->
    <?php if(is_warga()):
        $total   = isset($surat) && is_array($surat) ? count($surat) : 0;
        $pending = isset($surat) && is_array($surat) ? count(array_filter($surat, fn($s)=>($s->status??'')==='pending'))  : 0;
        $selesai = isset($surat) && is_array($surat) ? count(array_filter($surat, fn($s)=>($s->status??'')==='selesai'))  : 0;
        $ditolak = isset($surat) && is_array($surat) ? count(array_filter($surat, fn($s)=>($s->status??'')==='ditolak'))  : 0;
    ?>
    <div class="row g-2 mb-3 stat-row">
        <div class="col-md-3 col-6">
            <div class="card surat-stat-card" style="border-left:3px solid #6b7280;">
                <div class="card-body">
                    <div class="surat-stat-icon" style="background:#f3f4f6;"><i class="bi bi-file-text" style="color:#6b7280;"></i></div>
                    <div><div style="font-size:.72rem;color:#9ca3af;font-weight:600;">Total</div><div style="font-size:1.25rem;font-weight:800;color:#374151;line-height:1.1;"><?php echo $total; ?></div></div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="card surat-stat-card" style="border-left:3px solid #f59e0b;">
                <div class="card-body">
                    <div class="surat-stat-icon" style="background:#fef3c7;"><i class="bi bi-clock-history" style="color:#f59e0b;"></i></div>
                    <div><div style="font-size:.72rem;color:#9ca3af;font-weight:600;">Pending</div><div style="font-size:1.25rem;font-weight:800;color:#92400e;line-height:1.1;"><?php echo $pending; ?></div></div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="card surat-stat-card" style="border-left:3px solid #1abc9c;">
                <div class="card-body">
                    <div class="surat-stat-icon" style="background:#d1fae5;"><i class="bi bi-check-circle" style="color:#1abc9c;"></i></div>
                    <div><div style="font-size:.72rem;color:#9ca3af;font-weight:600;">Disetujui</div><div style="font-size:1.25rem;font-weight:800;color:#065f46;line-height:1.1;"><?php echo $selesai; ?></div></div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="card surat-stat-card" style="border-left:3px solid #ef4444;">
                <div class="card-body">
                    <div class="surat-stat-icon" style="background:#fee2e2;"><i class="bi bi-x-circle" style="color:#ef4444;"></i></div>
                    <div><div style="font-size:.72rem;color:#9ca3af;font-weight:600;">Ditolak</div><div style="font-size:1.25rem;font-weight:800;color:#991b1b;line-height:1.1;"><?php echo $ditolak; ?></div></div>
                </div>
            </div>
        </div>
    </div>
    <?php endif; ?>

    <?php
    $hasData = isset($surat) && is_array($surat) && count($surat) > 0;
    function getStatusInfo($status) {
        switch($status) {
            case 'pending':  return ['cls'=>'sb-pending',  'icon'=>'bi-clock',       'label'=>'Pending'];
            case 'diproses': return ['cls'=>'sb-diproses', 'icon'=>'bi-arrow-repeat','label'=>'Diproses'];
            case 'selesai':  return ['cls'=>'sb-selesai',  'icon'=>'bi-check-circle','label'=>'Selesai'];
            case 'ditolak':  return ['cls'=>'sb-ditolak',  'icon'=>'bi-x-circle',    'label'=>'Ditolak'];
            default:         return ['cls'=>'sb-pending',  'icon'=>'bi-question-circle','label'=>ucfirst($status)];
        }
    }
    $borderColors = ['pending'=>'#f59e0b','diproses'=>'#3b82f6','selesai'=>'#1abc9c','ditolak'=>'#ef4444'];
    ?>

    <?php if($hasData): ?>

    <div class="section-card">
        <div class="section-card-header">
            <div class="title">
                <i class="bi bi-list-ul"></i>
                <?php echo is_admin() ? 'Semua Permohonan Surat' : 'Riwayat Pengajuan Surat'; ?>
            </div>
            <span style="font-size:.75rem;color:#9ca3af;font-weight:600;"><?php echo count($surat); ?> surat</span>
        </div>

        <!-- Desktop Table -->
        <div class="desktop-table table-responsive">
            <table class="table surat-table mb-0" id="tabelSurat">
                <thead><tr>
                    <th style="width:44px;">No</th>
                    <th style="width:100px;">Tanggal</th>
                    <?php if(is_admin()): ?><th>Nama Warga</th><?php endif; ?>
                    <th>Jenis Surat</th>
                    <th>Keperluan</th>
                    <th style="width:120px;">Status</th>
                    <th style="width:160px;">Aksi</th>
                </tr></thead>
                <tbody>
                <?php $no=1; foreach($surat as $s):
                    $status  = $s->status ?? 'pending';
                    $info    = getStatusInfo($status);
                    $tanggal = $s->tanggal_permohonan ?? ($s->tanggal_pengajuan ?? null);
                ?>
                <tr>
                    <td><?php echo $no++; ?></td>
                    <td style="color:#6b7280;"><?php echo $tanggal ? date('d/m/Y',strtotime($tanggal)) : '-'; ?></td>
                    <?php if(is_admin()): ?>
                    <td class="fw-semibold"><?php echo isset($s->nama_lengkap) ? htmlspecialchars($s->nama_lengkap) : '-'; ?></td>
                    <?php endif; ?>
                    <td class="fw-semibold"><?php echo isset($s->jenis_surat) ? htmlspecialchars($s->jenis_surat) : '-'; ?></td>
                    <td>
                        <span class="text-truncate d-inline-block" style="max-width:260px;color:#6b7280;"
                              title="<?php echo isset($s->keperluan) ? htmlspecialchars($s->keperluan) : ''; ?>">
                            <?php echo isset($s->keperluan) ? htmlspecialchars($s->keperluan) : '-'; ?>
                        </span>
                    </td>
                    <td><span class="status-badge <?php echo $info['cls']; ?>"><i class="bi <?php echo $info['icon']; ?>"></i><?php echo $info['label']; ?></span></td>
                    <td>
                        <div class="d-flex gap-1 flex-wrap">
                            <a href="<?php echo base_url('surat/detail/'.$s->id); ?>" class="btn-act btn-act-view btn"><i class="bi bi-eye"></i></a>
                            <?php if(is_admin()): ?>
                                <?php if($status=='pending'): ?>
                                <button class="btn-act btn-act-ok btn" title="Setujui"
   onclick="konfirmasiSetujuiSurat('<?php echo base_url('surat/proses/'.$s->id); ?>')">
  <i class="bi bi-check-circle"></i>
</button>
                                <button class="btn-act btn-act-delete btn" onclick="tolak(<?php echo $s->id; ?>)"><i class="bi bi-x-circle"></i></button>
                                <?php endif; ?>
                                <?php if($status=='selesai'): ?>
                                <a href="<?php echo base_url('surat/print_surat/'.$s->id); ?>" target="_blank" class="btn-act btn-act-print btn"><i class="bi bi-printer"></i></a>
                                <?php endif; ?>
                               <button class="btn-act btn-act-delete btn" title="Hapus"
   onclick="konfirmasiHapusSurat('<?php echo base_url('surat/hapus/'.$s->id); ?>','<?php echo addslashes($s->jenis_surat ?? ''); ?>')">
  <i class="bi bi-trash"></i>
</button>
                            <?php else: ?>
                                <?php if($status=='selesai' && !empty($s->nomor_surat)): ?>
                                <a href="<?php echo base_url('surat/print_surat/'.$s->id); ?>" target="_blank" class="btn-act btn-act-ok btn"><i class="bi bi-download"></i> Download</a>
                                <?php endif; ?>
                            <?php endif; ?>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <!-- Mobile Card List -->
        <div class="mobile-surat-list">
            <!-- Search -->
            <div style="padding:0 0 4px;">
                <div class="d-flex align-items-center gap-2" style="background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:8px; padding:8px 12px;">
                    <i class="bi bi-search" style="color:#9ca3af; font-size:.85rem;"></i>
                    <input type="text" id="mobileSearch" placeholder="Cari jenis surat atau keperluan..."
                           style="border:none; background:transparent; font-size:.83rem; outline:none; flex:1; color:#374151;">
                </div>
            </div>

            <div id="mobileCardList">
            <?php foreach($surat as $s):
                $status  = $s->status ?? 'pending';
                $info    = getStatusInfo($status);
                $tanggal = $s->tanggal_permohonan ?? ($s->tanggal_pengajuan ?? null);
                $bc      = $borderColors[$status] ?? '#e5e7eb';
            ?>
            <div style="border-radius:11px; border:1.5px solid #f1f3f5; border-left:4px solid <?php echo $bc; ?>; background:#fff; padding:12px 14px;"
                 data-search="<?php echo strtolower(($s->jenis_surat??'').' '.($s->keperluan??'').($s->nama_lengkap??'')); ?>">
                <div class="d-flex justify-content-between align-items-start mb-1">
                    <div class="fw-semibold" style="font-size:.88rem; flex:1; margin-right:8px;">
                        <?php echo isset($s->jenis_surat) ? htmlspecialchars($s->jenis_surat) : '-'; ?>
                    </div>
                    <span class="status-badge <?php echo $info['cls']; ?> flex-shrink-0">
                        <i class="bi <?php echo $info['icon']; ?>"></i><?php echo $info['label']; ?>
                    </span>
                </div>
                <?php if(is_admin() && isset($s->nama_lengkap)): ?>
                <div style="font-size:.76rem; color:#6b7280; margin-bottom:2px;">
                    <i class="bi bi-person me-1"></i><?php echo htmlspecialchars($s->nama_lengkap); ?>
                </div>
                <?php endif; ?>
                <div style="font-size:.76rem; color:#9ca3af; margin-bottom:6px;">
                    <i class="bi bi-calendar3 me-1"></i><?php echo $tanggal ? date('d M Y',strtotime($tanggal)) : '-'; ?>
                </div>
                <?php if(!empty($s->keperluan)): ?>
                <div style="font-size:.8rem; color:#6b7280; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
                    <?php echo htmlspecialchars($s->keperluan); ?>
                </div>
                <?php endif; ?>
                <div class="d-flex gap-2" style="border-top:1px solid #f3f4f6; padding-top:9px;">
                    <a href="<?php echo base_url('surat/detail/'.$s->id); ?>"
                       class="btn btn-act-view flex-fill fw-semibold" style="border-radius:8px; font-size:.8rem; padding:7px; text-align:center; text-decoration:none;">
                        <i class="bi bi-eye me-1"></i>Detail
                    </a>
                    <?php if(is_admin()): ?>
                        <?php if($status=='pending'): ?>
                       <button class="btn btn-act-ok fw-semibold" style="border-radius:8px; font-size:.8rem; padding:7px 12px;"
   onclick="konfirmasiSetujuiSurat('<?php echo base_url('surat/proses/'.$s->id); ?>')">
  <i class="bi bi-check-circle"></i>
</button>
                        <button class="btn btn-act-delete fw-semibold" style="border-radius:8px; font-size:.8rem; padding:7px 12px;"
                            onclick="tolak(<?php echo $s->id; ?>)">
                            <i class="bi bi-x-circle"></i>
                        </button>
                        <?php endif; ?>
                        <?php if($status=='selesai'): ?>
                        <a href="<?php echo base_url('surat/print_surat/'.$s->id); ?>" target="_blank"
                           class="btn btn-act-print fw-semibold" style="border-radius:8px; font-size:.8rem; padding:7px 12px;">
                            <i class="bi bi-printer"></i>
                        </a>
                        <?php endif; ?>
                        <button class="btn btn-act-delete fw-semibold" style="border-radius:8px; font-size:.8rem; padding:7px 12px;"
   onclick="konfirmasiHapusSurat('<?php echo base_url('surat/hapus/'.$s->id); ?>','<?php echo addslashes($s->jenis_surat ?? ''); ?>')">
  <i class="bi bi-trash"></i>
</button>
                    <?php else: ?>
                        <?php if($status=='selesai' && !empty($s->nomor_surat)): ?>
                        <a href="<?php echo base_url('surat/print_surat/'.$s->id); ?>" target="_blank"
                           class="btn btn-act-ok flex-fill fw-semibold" style="border-radius:8px; font-size:.8rem; padding:7px; text-align:center;">
                            <i class="bi bi-download me-1"></i>Download
                        </a>
                        <?php endif; ?>
                    <?php endif; ?>
                </div>
            </div>
            <?php endforeach; ?>
            </div>

            <div id="mobileNoResult" class="text-center py-4 text-muted d-none" style="font-size:.84rem;">
                <i class="bi bi-search fs-2 d-block mb-2 opacity-50"></i>Tidak ada hasil yang cocok
            </div>
        </div>

    </div>

    <?php else: ?>
    <div class="section-card">
        <div class="text-center py-5 text-muted">
            <i class="bi bi-file-text fs-1 d-block mb-2 opacity-50"></i>
            <div class="fw-semibold mb-2">Belum ada <?php echo is_warga() ? 'pengajuan' : 'permohonan'; ?> surat</div>
            <a href="<?php echo base_url('surat/ajukan'); ?>" class="btn btn-sm"
               style="background:#20c997; color:#fff; border-radius:8px; font-size:.82rem;">
                <i class="bi bi-plus-circle me-1"></i>Ajukan Surat<?php echo is_warga() ? ' Baru' : ''; ?>
            </a>
        </div>
    </div>
    <?php endif; ?>

    <!-- Info Warga -->
    <?php if(is_warga()): ?>
    <div style="background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:12px; padding:12px 16px; font-size:.82rem; color:#1e40af; display:flex; gap:10px; align-items:flex-start;" class="info-box">
        <i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
        <div>
            <strong>Informasi:</strong> Klik "Ajukan Surat Baru" untuk mengajukan surat. Status dapat dipantau di atas.
            Surat yang sudah disetujui dapat langsung didownload.
        </div>
    </div>
    <?php endif; ?>

</div>

<!-- Modal Tolak -->
<?php if(is_admin()): ?>
<div class="modal fade" id="modalTolak" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <form action="" method="post" id="formTolak">
                <div class="modal-header" style="background:#fee2e2; border-bottom:1.5px solid #fecaca;">
                    <h6 class="modal-title fw-bold" style="color:#991b1b;"><i class="bi bi-x-circle me-2"></i>Tolak Permohonan</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label">Alasan Penolakan <span class="text-danger">*</span></label>
                    <textarea name="keterangan_penolakan" class="form-control" rows="4" required
                              placeholder="Masukkan alasan penolakan..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" style="border-radius:8px;">Batal</button>
                    <button type="submit" class="btn btn-sm fw-bold" style="background:#ef4444; color:#fff; border:none; border-radius:8px; padding:7px 18px;">
                        <i class="bi bi-x-circle me-1"></i>Tolak Permohonan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Konfirmasi Setujui Surat -->
<div class="modal fade" id="modalSetujuiSurat" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;">
      <div class="modal-header" style="background:#f0fdf4;border-bottom:1.5px solid #bbf7d0;padding:16px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div style="width:34px;height:34px;background:#dcfce7;border-radius:9px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-check-circle-fill" style="color:#16a34a;"></i>
          </div>
          <h6 class="modal-title mb-0 fw-bold" style="color:#166534;font-size:.92rem;">Setujui Permohonan</h6>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:18px 20px;">
        <p style="font-size:.84rem;color:#334155;margin-bottom:10px;">Anda akan menyetujui permohonan surat ini. Lanjutkan?</p>
        <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:8px;padding:9px 14px;font-size:.78rem;color:#166534;">
          <i class="bi bi-info-circle-fill me-1"></i>Permohonan akan diproses dan warga dapat mendownload surat.
        </div>
      </div>
      <div class="modal-footer" style="border:none;padding:0 20px 16px;gap:8px;">
        <button type="button" class="btn" data-bs-dismiss="modal"
          style="border-radius:8px;border:1.5px solid #e5e7eb;font-size:.81rem;font-weight:600;color:#64748b;padding:7px 18px;flex:1;">
          <i class="bi bi-x-lg me-1"></i>Batal
        </button>
        <a href="#" id="btnKonfirmasiSetujuiSurat"
          style="border-radius:8px;border:none;font-size:.81rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 4px 12px rgba(16,185,129,.24);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;">
          <i class="bi bi-check-circle-fill"></i>Ya, Setujui
        </a>
      </div>
    </div>
  </div>
</div>

<!-- Modal Konfirmasi Hapus Surat -->
<div class="modal fade" id="modalHapusSurat" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;">
      <div class="modal-header" style="background:#fef2f2;border-bottom:1.5px solid #fecaca;padding:16px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div style="width:34px;height:34px;background:#fee2e2;border-radius:9px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-trash-fill" style="color:#dc2626;"></i>
          </div>
          <h6 class="modal-title mb-0 fw-bold" style="color:#991b1b;font-size:.92rem;">Hapus Permohonan Surat</h6>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:18px 20px;">
        <p style="font-size:.84rem;color:#334155;margin-bottom:10px;">Anda akan menghapus permohonan:</p>
        <div style="background:#fef2f2;border:1.5px solid #fecaca;border-radius:9px;padding:10px 14px;font-weight:700;font-size:.86rem;color:#991b1b;" id="hapusSuratNama">-</div>
        <div style="background:#fffbeb;border:1.5px solid #fde68a;border-radius:8px;padding:8px 13px;margin-top:10px;font-size:.76rem;color:#92400e;">
          <i class="bi bi-exclamation-triangle-fill me-1"></i>Data akan <strong>terhapus permanen</strong>.
        </div>
      </div>
      <div class="modal-footer" style="border:none;padding:0 20px 16px;gap:8px;">
        <button type="button" class="btn" data-bs-dismiss="modal"
          style="border-radius:8px;border:1.5px solid #e5e7eb;font-size:.81rem;font-weight:600;color:#64748b;padding:7px 18px;flex:1;">
          <i class="bi bi-x-lg me-1"></i>Batal
        </button>
        <a href="#" id="btnKonfirmasiHapusSurat"
          style="border-radius:8px;border:none;font-size:.81rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;background:linear-gradient(135deg,#dc2626,#ef4444);box-shadow:0 4px 12px rgba(220,38,38,.24);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;">
          <i class="bi bi-trash-fill"></i>Ya, Hapus
        </a>
      </div>
    </div>
  </div>
</div>

<script>
var _bsModalSetujuiSurat = null;
var _bsModalHapusSurat   = null;

function konfirmasiSetujuiSurat(url) {
  var elBtn = document.getElementById('btnKonfirmasiSetujuiSurat');
  if(elBtn) elBtn.href = url;
  var modalEl = document.getElementById('modalSetujuiSurat');
  if(!modalEl) return;
  if(!_bsModalSetujuiSurat) _bsModalSetujuiSurat = new bootstrap.Modal(modalEl);
  _bsModalSetujuiSurat.show();
}

function konfirmasiHapusSurat(url, nama) {
  var elNama = document.getElementById('hapusSuratNama');
  var elBtn  = document.getElementById('btnKonfirmasiHapusSurat');
  if(elNama) elNama.textContent = nama || '-';
  if(elBtn)  elBtn.href         = url;
  var modalEl = document.getElementById('modalHapusSurat');
  if(!modalEl) return;
  if(!_bsModalHapusSurat) _bsModalHapusSurat = new bootstrap.Modal(modalEl);
  _bsModalHapusSurat.show();
}
</script>
<script>
function tolak(id) {
    document.getElementById('formTolak').action = '<?php echo base_url('surat/tolak/'); ?>' + id;
    new bootstrap.Modal(document.getElementById('modalTolak')).show();
}
</script>
<?php endif; ?>

<script>
window.addEventListener('load', function() {
    if (typeof $ !== 'undefined' && $('#tabelSurat').length > 0) {
        var isAdmin = <?php echo is_admin() ? 'true' : 'false'; ?>;
        $('#tabelSurat').DataTable({
            responsive: false,
            language: { url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/id.json' },
            pageLength: 10,
            order: [[1, 'desc']],
            columnDefs: [{ orderable: false, targets: -1 }]
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
    var input = document.getElementById('mobileSearch');
    if (!input) return;
    input.addEventListener('input', function() {
        var q = this.value.toLowerCase().trim();
        var cards = document.querySelectorAll('#mobileCardList [data-search]');
        var visible = 0;
        cards.forEach(function(c) {
            var match = !q || (c.getAttribute('data-search')||'').includes(q);
            c.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        var nr = document.getElementById('mobileNoResult');
        if (nr) nr.classList.toggle('d-none', visible > 0 || !q);
    });
});
</script>