<style>
.btn:focus { box-shadow: none; }
.form-control:focus {
    border-color: #20c997;
    box-shadow: 0 0 0 0.2rem rgba(32,201,151,.15);
}

/* ===== INFO ROW (desktop) ===== */
.info-row { display:flex; align-items:flex-start; padding:12px 20px; border-bottom:1px solid #f1f3f5; }
.info-row:last-child { border-bottom:none; }
.info-row.alt { background:#f8fffe; }
.info-label { width:145px; flex-shrink:0; font-size:0.8rem; color:#6c757d; display:flex; align-items:center; padding-top:2px; }
.info-value { font-size:0.85rem; font-weight:600; color:#212529; flex:1; word-break:break-word; }
.action-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.action-buttons { display:flex; gap:8px; flex-wrap:wrap; }

/* ===== MOBILE SINGLE CARD ===== */
.mobile-detail-card { display:none; }

@media (max-width: 767.98px) {
    .container-fluid { padding-left:12px !important; padding-right:12px !important; }
    .detail-cards, .desktop-action-bar { display:none !important; }
    .mobile-detail-card { display:block; }

    .detail-header h4 { font-size:1rem; }
    .detail-header small { display:none; }

    .status-banner-inner { padding:12px 14px !important; }

    /* Grid 2 kolom */
    .mobile-info-grid {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:1px;
        background:#f1f3f5;
    }
    .mobile-info-cell { background:#fff; padding:10px 12px; }
    .mobile-info-cell.span2 { grid-column:1 / -1; }
    .mobile-info-cell.alt { background:#f8fffe; }
    .mic-label {
        font-size:0.68rem; color:#20c997; font-weight:700;
        text-transform:uppercase; letter-spacing:0.04em;
        margin-bottom:3px; display:flex; align-items:center; gap:4px;
    }
    .mic-value { font-size:0.84rem; font-weight:600; color:#212529; word-break:break-word; line-height:1.4; }

    .mobile-section-divider {
        background:#f0faf7; padding:7px 12px;
        font-size:0.68rem; font-weight:700; text-transform:uppercase;
        letter-spacing:0.05em; color:#20c997;
        border-top:1px solid #e8f5f1;
        display:flex; align-items:center; gap:6px;
    }

    /* Tombol 2 kolom */
    .mobile-action-buttons {
        display:grid; grid-template-columns:1fr 1fr;
        gap:8px; padding:12px 14px; border-top:1px solid #f1f3f5;
    }
    .mobile-action-buttons .btn {
        font-size:0.8rem; padding:9px 6px; border-radius:8px !important;
        display:flex; align-items:center; justify-content:center; gap:5px; font-weight:600;
    }
    .mobile-action-buttons .btn.span2 { grid-column:1 / -1; }
}
</style>

<div class="container-fluid px-4 py-3">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4 detail-header">
        <div>
            <h4 class="mb-0 fw-bold text-dark">
                <i class="bi bi-file-text-fill me-2" style="color:#20c997;"></i>Detail Permohonan Surat
            </h4>
            <small class="text-muted">Informasi lengkap permohonan surat</small>
        </div>
        <a href="<?php echo base_url('surat'); ?>" class="btn btn-sm btn-outline-secondary fw-semibold" style="border-radius:8px;">
            <i class="bi bi-arrow-left me-1"></i>Kembali
        </a>
    </div>

    <?php
    $status_map = [
        'pending'  => ['#ffc107', '⏳', 'Menunggu Diproses'],
        'selesai'  => ['#20c997', '✅', 'Selesai'],
        'ditolak'  => ['#dc3545', '❌', 'Ditolak'],
    ];
    $sm  = $status_map[$surat->status] ?? ['#6c757d', '📄', ucfirst($surat->status)];
    $hex = $sm[0];

    // Tempat/tgl lahir
    $ttl = '-';
    if(!empty($surat->tempat_lahir) || !empty($surat->tanggal_lahir)) {
        $parts = [];
        if(!empty($surat->tempat_lahir)) $parts[] = $surat->tempat_lahir;
        if(!empty($surat->tanggal_lahir)) $parts[] = date('d F Y', strtotime($surat->tanggal_lahir));
        $ttl = implode(', ', $parts);
    }
    ?>

    <!-- Status Banner -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius:14px; border-left:5px solid <?php echo $hex; ?> !important; background:<?php echo $hex; ?>10;">
        <div class="card-body p-0">
            <div class="d-flex align-items-center justify-content-between status-banner-inner" style="padding:16px 20px;">
                <div class="d-flex align-items-center gap-3">
                    <span style="font-size:1.6rem; line-height:1;"><?php echo $sm[1]; ?></span>
                    <div>
                        <p class="mb-0 fw-bold" style="color:<?php echo $hex; ?>;"><?php echo $sm[2]; ?></p>
                        <small class="text-muted" style="font-size:0.78rem;">
                            Diajukan: <?php echo date('d F Y', strtotime($surat->tanggal_permohonan)); ?>
                            <?php if($surat->status == 'selesai' && !empty($surat->tanggal_selesai)): ?>
                                &nbsp;·&nbsp; Selesai: <?php echo date('d F Y', strtotime($surat->tanggal_selesai)); ?>
                            <?php endif; ?>
                        </small>
                    </div>
                </div>
                <?php if($surat->status == 'selesai' && !empty($surat->nomor_surat)): ?>
                <span class="badge rounded-pill px-3 py-2 fw-semibold" style="background:#20c99720; color:#20c997; border:1px solid #20c99740; font-size:0.82em; white-space:nowrap;">
                    <?php echo htmlspecialchars($surat->nomor_surat ?? ''); ?>
                </span>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- ===== DESKTOP: 2 Card ===== -->
    <div class="row g-4 detail-cards">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100" style="border-radius:14px; overflow:hidden;">
                <div class="px-4 py-3" style="border-bottom:1px solid #f1f3f5;">
                    <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                        <i class="bi bi-person-fill me-1" style="color:#20c997;"></i>Data Pemohon
                    </span>
                </div>
                <?php
                $rows_pemohon = [
                    ['bi-person',           'Nama Lengkap',     $surat->nama_lengkap ?? '-'],
                    ['bi-upc',              'NIK',              $surat->nik ?? '-'],
                    ['bi-calendar3',        'Tempat/Tgl Lahir', $ttl],
                    ['bi-gender-ambiguous', 'Jenis Kelamin',    isset($surat->jenis_kelamin) ? ($surat->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan') : '-'],
                    ['bi-house',            'Alamat',           $surat->alamat ?? '-'],
                ];
                foreach($rows_pemohon as $idx => $r): ?>
                <div class="info-row <?php echo $idx % 2 ? 'alt' : ''; ?>">
                    <div class="info-label"><i class="bi <?php echo $r[0]; ?> me-2" style="color:#20c997;"></i><?php echo $r[1]; ?></div>
                    <div class="info-value"><?php echo htmlspecialchars($r[2] ?? ''); ?></div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100" style="border-radius:14px; overflow:hidden;">
                <div class="px-4 py-3" style="border-bottom:1px solid #f1f3f5;">
                    <span class="fw-semibold small text-muted text-uppercase" style="letter-spacing:.05em;">
                        <i class="bi bi-file-earmark-text me-1" style="color:#20c997;"></i>Data Permohonan
                    </span>
                </div>
                <div class="info-row"><div class="info-label"><i class="bi bi-file-text me-2" style="color:#20c997;"></i>Jenis Surat</div><div class="info-value"><?php echo htmlspecialchars($surat->jenis_surat ?? '-'); ?></div></div>
                <div class="info-row alt"><div class="info-label"><i class="bi bi-calendar3 me-2" style="color:#20c997;"></i>Tgl Pengajuan</div><div class="info-value"><?php echo date('d F Y', strtotime($surat->tanggal_permohonan)); ?></div></div>
                <div class="info-row" style="flex-direction:column; gap:6px;">
                    <div class="info-label" style="width:100%;"><i class="bi bi-chat-left-text me-2" style="color:#20c997;"></i>Keperluan</div>
                    <div class="info-value" style="padding-left:20px; line-height:1.7;"><?php echo nl2br(htmlspecialchars($surat->keperluan ?? '')); ?></div>
                </div>
                <?php if($surat->status == 'selesai' && !empty($surat->nomor_surat)): ?>
                <div class="info-row alt"><div class="info-label"><i class="bi bi-hash me-2" style="color:#20c997;"></i>Nomor Surat</div>
                <div class="info-value"><span class="badge rounded-pill px-3 fw-semibold" style="background:#20c99720; color:#20c997; border:1px solid #20c99740;"><?php echo htmlspecialchars($surat->nomor_surat ?? ''); ?></span></div></div>
                <?php endif; ?>
                <?php if($surat->status == 'selesai' && !empty($surat->tanggal_selesai)): ?>
                <div class="info-row"><div class="info-label"><i class="bi bi-calendar-check me-2" style="color:#20c997;"></i>Tgl Selesai</div><div class="info-value"><?php echo date('d F Y', strtotime($surat->tanggal_selesai)); ?></div></div>
                <?php endif; ?>
                <?php if($surat->status == 'ditolak' && !empty($surat->keterangan_penolakan)): ?>
                <div class="info-row" style="background:#dc354508; flex-direction:column; gap:6px;">
                    <div class="info-label" style="width:100%; color:#dc3545;"><i class="bi bi-x-circle me-2 text-danger"></i>Alasan Penolakan</div>
                    <div style="font-size:0.85rem; font-weight:600; color:#dc3545; padding-left:20px; line-height:1.7;"><?php echo nl2br(htmlspecialchars($surat->keterangan_penolakan ?? '')); ?></div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Desktop Action Bar -->
    <div class="card border-0 shadow-sm mt-4 desktop-action-bar" style="border-radius:14px;">
        <div class="card-body px-4 py-3">
            <div class="action-bar">
                <span class="text-muted small">
                    <?php if($surat->status == 'pending'): ?><i class="bi bi-info-circle me-1" style="color:#20c997;"></i>Menunggu diproses admin
                    <?php elseif($surat->status == 'selesai'): ?><i class="bi bi-check-circle me-1" style="color:#20c997;"></i>Surat siap dicetak / diunduh
                    <?php else: ?><i class="bi bi-x-circle me-1 text-danger"></i>Permohonan telah ditolak<?php endif; ?>
                </span>
                <div class="action-buttons">
                    <?php if($surat->status == 'pending' && is_admin()): ?>
                        <a href="<?php echo base_url('surat/proses/'.$surat->id); ?>" class="btn btn-sm btn-success fw-semibold px-4" style="border-radius:8px;" 
                           data-confirm="Setujui dan proses permohonan surat dari <strong><?php echo htmlspecialchars($surat->nama_lengkap ?? ''); ?></strong> ini?" 
                           data-title="Setujui & Proses" data-type="success"><i class="bi bi-check-circle me-1"></i>Setujui & Proses</a>
                        <button class="btn btn-sm btn-danger fw-semibold px-4" onclick="tolak(<?php echo $surat->id; ?>)" style="border-radius:8px;"><i class="bi bi-x-circle me-1"></i>Tolak</button>
                    <?php endif; ?>
                    <?php if($surat->status == 'selesai'): ?>
                        <?php if(is_admin()): ?>
                            <a href="<?php echo base_url('surat/print_surat/'.$surat->id); ?>" target="_blank" class="btn btn-sm btn-primary fw-semibold px-4" style="border-radius:8px;"><i class="bi bi-printer me-1"></i>Cetak Surat</a>
                        <?php elseif(!empty($surat->nomor_surat)): ?>
                            <a href="<?php echo base_url('surat/print_surat/'.$surat->id); ?>" target="_blank" class="btn btn-sm btn-success fw-semibold px-4" style="border-radius:8px;"><i class="bi bi-download me-1"></i>Download Surat</a>
                        <?php else: ?>
                            <span class="btn btn-sm btn-outline-secondary fw-semibold px-4 disabled" style="border-radius:8px;"><i class="bi bi-hourglass-split me-1"></i>Sedang Disiapkan</span>
                        <?php endif; ?>
                    <?php endif; ?>
                    <?php if(is_admin()): ?>
                        <a href="<?php echo base_url('surat/hapus/'.$surat->id); ?>" class="btn btn-sm btn-outline-danger fw-semibold px-4" style="border-radius:8px;" 
                           data-confirm="Yakin ingin menghapus data permohonan surat ini?" 
                           data-title="Hapus Data" data-type="danger"><i class="bi bi-trash me-1"></i>Hapus</a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>


    <!-- ===== MOBILE: 1 Card Compact ===== -->
    <div class="mobile-detail-card">
        <div class="card border-0 shadow-sm" style="border-radius:14px; overflow:hidden;">

            <!-- Pemohon -->
            <div class="mobile-section-divider">
                <i class="bi bi-person-fill"></i> Data Pemohon
            </div>
            <div class="mobile-info-grid">
                <div class="mobile-info-cell span2">
                    <div class="mic-label"><i class="bi bi-person"></i> Nama</div>
                    <div class="mic-value"><?php echo htmlspecialchars($surat->nama_lengkap ?? '-'); ?></div>
                </div>
                <div class="mobile-info-cell alt">
                    <div class="mic-label"><i class="bi bi-upc"></i> NIK</div>
                    <div class="mic-value"><?php echo htmlspecialchars($surat->nik ?? '-'); ?></div>
                </div>
                <div class="mobile-info-cell alt">
                    <div class="mic-label"><i class="bi bi-gender-ambiguous"></i> Kelamin</div>
                    <div class="mic-value"><?php echo isset($surat->jenis_kelamin) ? ($surat->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan') : '-'; ?></div>
                </div>
                <div class="mobile-info-cell span2">
                    <div class="mic-label"><i class="bi bi-calendar3"></i> Tempat / Tgl Lahir</div>
                    <div class="mic-value"><?php echo htmlspecialchars($ttl); ?></div>
                </div>
                <div class="mobile-info-cell span2 alt">
                    <div class="mic-label"><i class="bi bi-house"></i> Alamat</div>
                    <div class="mic-value"><?php echo htmlspecialchars($surat->alamat ?? '-'); ?></div>
                </div>
            </div>

            <!-- Permohonan -->
            <div class="mobile-section-divider">
                <i class="bi bi-file-earmark-text"></i> Data Permohonan
            </div>
            <div class="mobile-info-grid">
                <div class="mobile-info-cell">
                    <div class="mic-label"><i class="bi bi-file-text"></i> Jenis Surat</div>
                    <div class="mic-value"><?php echo htmlspecialchars($surat->jenis_surat ?? '-'); ?></div>
                </div>
                <div class="mobile-info-cell">
                    <div class="mic-label"><i class="bi bi-calendar3"></i> Tgl Pengajuan</div>
                    <div class="mic-value"><?php echo date('d M Y', strtotime($surat->tanggal_permohonan)); ?></div>
                </div>
                <div class="mobile-info-cell span2 alt">
                    <div class="mic-label"><i class="bi bi-chat-left-text"></i> Keperluan</div>
                    <div class="mic-value" style="line-height:1.6;"><?php echo nl2br(htmlspecialchars($surat->keperluan)); ?></div>
                </div>
                <?php if($surat->status == 'selesai' && !empty($surat->nomor_surat)): ?>
                <div class="mobile-info-cell">
                    <div class="mic-label"><i class="bi bi-hash"></i> No. Surat</div>
                    <div class="mic-value"><span class="badge rounded-pill px-2" style="background:#20c99720; color:#20c997; border:1px solid #20c99740; font-size:0.78em; font-weight:700;"><?php echo htmlspecialchars($surat->nomor_surat ?? ''); ?></span></div>
                </div>
                <?php endif; ?>
                <?php if($surat->status == 'selesai' && !empty($surat->tanggal_selesai)): ?>
                <div class="mobile-info-cell">
                    <div class="mic-label"><i class="bi bi-calendar-check"></i> Tgl Selesai</div>
                    <div class="mic-value"><?php echo date('d M Y', strtotime($surat->tanggal_selesai)); ?></div>
                </div>
                <?php endif; ?>
                <?php if($surat->status == 'ditolak' && !empty($surat->keterangan_penolakan)): ?>
                <div class="mobile-info-cell span2" style="background:#dc354508;">
                    <div class="mic-label" style="color:#dc3545;"><i class="bi bi-x-circle"></i> Alasan Penolakan</div>
                    <div class="mic-value" style="color:#dc3545; line-height:1.6;"><?php echo nl2br(htmlspecialchars($surat->keterangan_penolakan ?? '')); ?></div>
                </div>
                <?php endif; ?>
            </div>

            <!-- Tombol Aksi -->
            <div class="mobile-action-buttons">
                <?php if($surat->status == 'pending' && is_admin()): ?>
                    <a href="<?php echo base_url('surat/proses/'.$surat->id); ?>" class="btn btn-success" 
                       data-confirm="Setujui dan proses permohonan surat ini?" data-title="Setujui" data-type="success">
                        <i class="bi bi-check-circle"></i> Setujui
                    </a>
                    <button class="btn btn-danger" onclick="tolak(<?php echo $surat->id; ?>)">
                        <i class="bi bi-x-circle"></i> Tolak
                    </button>
                <?php endif; ?>

                <?php if($surat->status == 'selesai'): ?>
                    <?php if(is_admin()): ?>
                        <a href="<?php echo base_url('surat/print_surat/'.$surat->id); ?>" target="_blank" class="btn btn-primary span2">
                            <i class="bi bi-printer"></i> Cetak Surat
                        </a>
                    <?php elseif(!empty($surat->nomor_surat)): ?>
                        <a href="<?php echo base_url('surat/print_surat/'.$surat->id); ?>" target="_blank" class="btn btn-success span2">
                            <i class="bi bi-download"></i> Download Surat
                        </a>
                    <?php else: ?>
                        <span class="btn btn-outline-secondary disabled span2"><i class="bi bi-hourglass-split"></i> Sedang Disiapkan</span>
                    <?php endif; ?>
                <?php endif; ?>

                <a href="<?php echo base_url('surat'); ?>" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> Kembali
                </a>
                <?php if(is_admin()): ?>
                    <a href="<?php echo base_url('surat/hapus/'.$surat->id); ?>" class="btn btn-outline-danger" 
                       data-confirm="Yakin hapus data permohonan ini?" data-title="Hapus" data-type="danger">
                        <i class="bi bi-trash"></i> Hapus
                    </a>
                <?php endif; ?>
            </div>

        </div>
    </div>

</div>

<!-- Modal Tolak -->
<?php if(is_admin() && $surat->status == 'pending'): ?>
<div class="modal fade" id="modalTolak" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow" style="border-radius:14px; overflow:hidden;">
            <div class="modal-header border-0 pb-0 pt-4 px-4">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:44px; height:44px; background:#dc354520; flex-shrink:0;">
                        <i class="bi bi-x-circle" style="color:#dc3545; font-size:1.1rem;"></i>
                    </div>
                    <div>
                        <h6 class="fw-bold mb-0 text-dark">Tolak Permohonan</h6>
                        <small class="text-muted">Berikan alasan penolakan</small>
                    </div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="" method="post" id="formTolak">
                <div class="modal-body px-4 py-3">
                    <textarea name="keterangan_penolakan" class="form-control" rows="4" style="border-radius:8px;" required placeholder="Jelaskan alasan penolakan..."></textarea>
                </div>
                <div class="modal-footer border-0 px-4 pb-4 pt-0 gap-2">
                    <button type="button" class="btn btn-sm fw-semibold px-4" data-bs-dismiss="modal" style="border-radius:8px; background:#f1f3f5; border:none; color:#6c757d;">Batal</button>
                    <button type="submit" class="btn btn-sm btn-danger fw-semibold px-4" style="border-radius:8px;"><i class="bi bi-x-circle me-1"></i>Tolak Permohonan</button>
                </div>
            </form>
        </div>
    </div>
</div>
<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; ?>