<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-0">Pengajuan Surat</h4>
            <small class="text-muted">Ajukan dan pantau status surat Anda</small>
        </div>
        <a href="<?php echo base_url('surat/ajukan'); ?>" class="btn btn-primary btn-custom">
            <i class="bi bi-plus-circle me-2"></i>Ajukan Surat Baru
        </a>
    </div>

    <!-- Ringkasan Status -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">Pending</small>
                            <h5 class="mb-0 text-warning">
                                <?php 
                                $pending = array_filter($surat, function($s){ return $s->status == 'pending'; });
                                echo count($pending); 
                                ?>
                            </h5>
                        </div>
                        <i class="bi bi-clock-history fs-1 text-warning"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">Disetujui</small>
                            <h5 class="mb-0 text-success">
                                <?php 
                                $disetujui = array_filter($surat, function($s){ return $s->status == 'disetujui'; });
                                echo count($disetujui); 
                                ?>
                            </h5>
                        </div>
                        <i class="bi bi-check-circle fs-1 text-success"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">Ditolak</small>
                            <h5 class="mb-0 text-danger">
                                <?php 
                                $ditolak = array_filter($surat, function($s){ return $s->status == 'ditolak'; });
                                echo count($ditolak); 
                                ?>
                            </h5>
                        </div>
                        <i class="bi bi-x-circle fs-1 text-danger"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">Total Surat</small>
                            <h5 class="mb-0 text-primary">
                                <?php echo count($surat); ?>
                            </h5>
                        </div>
                        <i class="bi bi-file-text fs-1 text-primary"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Info untuk warga -->
    <div class="alert alert-info" role="alert">
        <i class="bi bi-info-circle-fill me-2"></i>
        <strong>Cara Mengajukan Surat:</strong>
        <ol class="mb-0 mt-2">
            <li>Klik tombol "Ajukan Surat Baru"</li>
            <li>Pilih jenis surat yang dibutuhkan</li>
            <li>Isi form dengan lengkap dan upload dokumen pendukung jika diperlukan</li>
            <li>Submit pengajuan dan tunggu persetujuan dari admin</li>
            <li>Jika disetujui, surat dapat diambil di kantor RT</li>
        </ol>
    </div>

    <!-- Filter -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select">
                        <option value="">Semua Status</option>
                        <option value="pending" <?php echo ($this->input->get('status') == 'pending') ? 'selected' : ''; ?>>Pending</option>
                        <option value="disetujui" <?php echo ($this->input->get('status') == 'disetujui') ? 'selected' : ''; ?>>Disetujui</option>
                        <option value="ditolak" <?php echo ($this->input->get('status') == 'ditolak') ? 'selected' : ''; ?>>Ditolak</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary d-block">
                        <i class="bi bi-filter me-2"></i>Filter
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabel Surat -->
    <div class="table-container">
        <table class="table table-hover">
            <thead class="table-light">
                <tr>
                    <th>No</th>
                    <th>Jenis Surat</th>
                    <th>Keperluan</th>
                    <th>Tanggal Pengajuan</th>
                    <th>Status</th>
                    <th>Catatan Admin</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <?php 
                $no = 1; 
                if(isset($surat) && !empty($surat)):
                    foreach($surat as $s): 
                ?>
                <tr>
                    <td><?php echo $no++; ?></td>
                    <td><?php echo $s->jenis_surat; ?></td>
                    <td><?php echo substr($s->keperluan, 0, 50) . '...'; ?></td>
                    <td><?php echo date('d/m/Y', strtotime($s->tanggal_pengajuan)); ?></td>
                    <td>
                        <?php if($s->status == 'pending'): ?>
                            <span class="badge bg-warning">
                                <i class="bi bi-clock-history me-1"></i>Pending
                            </span>
                        <?php elseif($s->status == 'disetujui'): ?>
                            <span class="badge bg-success">
                                <i class="bi bi-check-circle me-1"></i>Disetujui
                            </span>
                        <?php else: ?>
                            <span class="badge bg-danger">
                                <i class="bi bi-x-circle me-1"></i>Ditolak
                            </span>
                        <?php endif; ?>
                    </td>
                    <td>
                        <?php 
                        if($s->catatan_admin) {
                            echo substr($s->catatan_admin, 0, 30) . '...';
                        } else {
                            echo '-';
                        }
                        ?>
                    </td>
                    <td>
                        <a href="<?php echo base_url('surat/detail/'.$s->id); ?>" class="btn btn-sm btn-info">
                            <i class="bi bi-eye"></i> Detail
                        </a>
                        
                        <?php if($s->status == 'disetujui' && $s->nomor_surat): ?>
                            <span class="badge bg-success ms-2">
                                <i class="bi bi-check-circle me-1"></i>Surat Siap Diambil
                            </span>
                        <?php endif; ?>
                    </td>
                </tr>
                <?php 
                    endforeach; 
                endif;
                ?>
            </tbody>
        </table>
        
        <?php if(!isset($surat) || empty($surat)): ?>
        <div class="text-center py-4">
            <i class="bi bi-inbox fs-1 text-muted"></i>
            <p class="text-muted mt-2">Belum ada pengajuan surat</p>
            <a href="<?php echo base_url('surat/ajukan'); ?>" class="btn btn-primary mt-2">
                <i class="bi bi-plus-circle me-2"></i>Ajukan Surat Pertama
            </a>
        </div>
        <?php endif; ?>
    </div>

    <!-- Informasi Tambahan -->
    <div class="alert alert-warning mt-4" role="alert">
        <i class="bi bi-exclamation-triangle-fill me-2"></i>
        <strong>Catatan:</strong> 
        <ul class="mb-0 mt-2">
            <li>Surat yang sudah disetujui dapat diambil di kantor RT</li>
            <li>Waktu proses persetujuan maksimal 3 hari kerja</li>
            <li>Pastikan semua data yang diisi sudah benar sebelum mengajukan</li>
            <li>Jika surat ditolak, silakan ajukan kembali dengan perbaikan sesuai catatan admin</li>
        </ul>
    </div>
</div>