<?php
include 'admin/config.php';
// Ambil data dan urutkan berdasarkan kecamatan
$query = mysqli_query($conn, "SELECT * FROM structural_pac ORDER BY kecamatan ASC, id ASC");
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <title>Struktur PAC - DPC PDI Perjuangan</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .kecamatan-title { border-left: 5px solid #ED1C24; padding-left: 15px; margin-top: 40px; font-weight: bold; }
        .card-pac { border: none; transition: 0.3s; }
        .card-pac:hover { transform: scale(1.05); }
    </style>
</head>
<body class="bg-light">
<div class="container py-5">
    <h2 class="text-center fw-bold mb-5">STRUKTUR PENGURUS ANAK CABANG (PAC)</h2>

    <?php 
    $current_kecamatan = "";
    while($row = mysqli_fetch_assoc($query)) : 
        if($current_kecamatan != $row['kecamatan']) :
            $current_kecamatan = $row['kecamatan'];
            echo "<h4 class='kecamatan-title'>KECAMATAN " . strtoupper($current_kecamatan) . "</h4><div class='row g-4'>";
        endif;
    ?>
        <div class="col-md-3">
            <div class="card card-pac shadow-sm text-center p-3 h-100">
                <img src="admin/uploads/pac/<?= $row['foto']; ?>" class="rounded-circle mx-auto mb-3" style="width: 100px; height: 100px; object-fit: cover;" onerror="this.src='https://via.placeholder.com/150'">
                <h6 class="fw-bold mb-1"><?= $row['nama']; ?></h6>
                <small class="text-danger d-block mb-2"><?= $row['jabatan']; ?></small>
                <small class="text-muted">Periode <?= $row['periode']; ?></small>
            </div>
        </div>
    <?php 
        // Tutup div row jika kecamatan selanjutnya berbeda
        // (Logika sederhana untuk membungkus per kecamatan)
    endwhile; 
    ?>
</div>
</body>
</html>