<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<!-- Summary Cards & Progress Bar -->
<div class="row g-3 mb-3">
    <!-- Main Card -->
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm h-100" style="border-radius: 12px;">
            <div class="card-body p-4 d-flex flex-column justify-content-between">
                <div>
                    <h5 class="fw-bold text-dark mb-1"><i class="bi bi-shield-exclamation text-danger me-2"></i>Poin Pelanggaran Anda</h5>
                    <small class="text-muted">Pantau kedisiplinan Anda. Poin di bawah diakumulasikan sepanjang semester berjalan.</small>
                </div>
                
                <div class="mt-4">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="small fw-semibold text-secondary">Aman (0 Poin)</span>
                        <span class="small fw-bold text-danger">Maksimal (100 Poin)</span>
                    </div>
                    
                    <!-- Progress Bar Danger Level -->
                    <div class="progress mb-2" style="height: 12px; border-radius: 6px; background-color: #f1f3f7;">
                        <?php
                        $pct = min(100, max(0, $points));
                        $barClass = 'bg-success';
                        if ($pct >= 100) $barClass = 'bg-dark';
                        elseif ($pct >= 75) $barClass = 'bg-danger';
                        elseif ($pct >= 25) $barClass = 'bg-warning';
                        ?>
                        <div class="progress-bar <?= $barClass ?> progress-bar-striped progress-bar-animated" 
                             role="progressbar" 
                             style="width: <?= $pct ?>%; border-radius: 6px;" 
                             aria-valuenow="<?= $pct ?>" 
                             aria-valuemin="0" 
                             aria-valuemax="100">
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center mt-2 flex-wrap gap-2">
                        <small class="text-muted" style="font-size: 0.75rem;">
                            <?php if ($nextSanction): ?>
                                Batas sanksi berikutnya: <strong><?= esc($nextSanction['action_title']) ?></strong> (<?= esc($nextSanction['min_points']) ?> Poin)
                            <?php else: ?>
                                Anda telah melampaui batas toleransi poin pelanggaran maksimal.
                            <?php endif; ?>
                        </small>
                        <span class="badge bg-danger bg-opacity-10 text-danger rounded px-2.5 py-1.5 small fw-semibold">
                            Total: <?= $points ?> / 100 Poin
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Sanction Card -->
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm h-100 bg-light bg-gradient" style="border-radius: 12px;">
            <div class="card-body p-4 text-center d-flex flex-column justify-content-center align-items-center">
                <div class="bg-white bg-opacity-75 p-3 rounded-circle text-danger shadow-sm mb-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
                    <i class="bi bi-shield-fill-x fs-3"></i>
                </div>
                <h6 class="text-muted small fw-semibold mb-1">STATUS SANKSI AKTIF</h6>
                <h4 class="fw-bold text-dark mb-2">
                    <?php
                    $sTitle = $sanction ? $sanction['action_title'] : 'Tidak Ada Sanksi (Aman)';
                    $stClass = 'text-success';
                    if ($points >= 100) $stClass = 'text-dark';
                    elseif ($points >= 75) $stClass = 'text-danger';
                    elseif ($points >= 25) $stClass = 'text-warning';
                    ?>
                    <span class="<?= $stClass ?>"><?= esc($sTitle) ?></span>
                </h4>
                <p class="text-secondary small mb-0 px-3" style="font-size: 0.82rem; line-height: 1.5;">
                    <?= $sanction ? esc($sanction['description']) : 'Pertahankan rekam jejak kedisiplinan Anda dengan menaati seluruh tata tertib madrasah.' ?>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- History Log Card -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm" style="border-radius: 12px;">
            <div class="card-header bg-white border-0 pt-4 px-4 pb-2">
                <h5 class="fw-bold text-dark mb-0">Riwayat Catatan Pelanggaran</h5>
                <small class="text-muted">Daftar lengkap butir pelanggaran yang dicatat oleh tim BK.</small>
            </div>
            
            <div class="card-body px-4 pb-4">
                <?php if (empty($logs)): ?>
                    <div class="text-center py-5 text-muted">
                        <div class="bg-success bg-opacity-10 p-3 rounded-circle text-success d-inline-flex mb-3" style="font-size: 2rem; line-height: 1;">
                            <i class="bi bi-emoji-smile-fill"></i>
                        </div>
                        <h5 class="fw-bold text-dark mb-1">Bebas Pelanggaran</h5>
                        <p class="mb-0 small">Hebat! Anda tidak memiliki catatan pelanggaran di semester ini.</p>
                    </div>
                <?php else: ?>
                    
                    <!-- Desktop Table View -->
                    <div class="table-responsive d-none d-md-block">
                        <table class="table table-hover align-middle table-sm border-light mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 120px">Tanggal</th>
                                    <th style="width: 90px">Kode</th>
                                    <th>Jenis Pelanggaran</th>
                                    <th style="width: 120px" class="text-center">Severity</th>
                                    <th style="width: 80px" class="text-center">Poin</th>
                                    <th>Keterangan Tambahan</th>
                                    <th style="width: 140px">Dicatat Oleh</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($logs as $log): ?>
                                <tr>
                                    <td class="small text-secondary"><?= date('d-m-Y', strtotime($log['date'])) ?></td>
                                    <td><span class="badge bg-secondary bg-opacity-10 text-secondary"><?= esc($log['code']) ?></span></td>
                                    <td class="fw-semibold text-dark small"><?= esc($log['description']) ?></td>
                                    <td class="text-center">
                                        <?php
                                        $sev = $log['severity'];
                                        $badgeClass = 'bg-success bg-opacity-10 text-success';
                                        if ($sev === 'Khusus') $badgeClass = 'bg-dark text-white';
                                        elseif ($sev === 'Berat') $badgeClass = 'bg-danger bg-opacity-10 text-danger';
                                        elseif ($sev === 'Sedang') $badgeClass = 'bg-warning bg-opacity-10 text-warning';
                                        ?>
                                        <span class="badge <?= $badgeClass ?> rounded-pill px-2.5 py-1.5 small"><?= esc($sev) ?></span>
                                    </td>
                                    <td class="text-center fw-bold text-danger">+<?= esc($log['points']) ?></td>
                                    <td class="small text-secondary"><?= esc($log['notes'] ?: '-') ?></td>
                                    <td class="small text-muted"><?= esc($log['recorder_name'] ?: 'Sistem') ?></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>

                    <!-- Mobile Responsive Cards View -->
                    <div class="d-md-none mt-2">
                        <?php foreach ($logs as $log): ?>
                            <div class="card border-0 bg-light mb-3 p-3" style="border-radius: 8px;">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div>
                                        <span class="badge bg-secondary bg-opacity-10 text-secondary me-1"><?= esc($log['code']) ?></span>
                                        <small class="text-muted"><?= date('d-m-Y', strtotime($log['date'])) ?></small>
                                    </div>
                                    <span class="badge bg-danger fs-6 px-2 py-1">+<?= esc($log['points']) ?> Pts</span>
                                </div>
                                <strong class="text-dark d-block mb-2" style="font-size: 0.85rem;"><?= esc($log['description']) ?></strong>
                                
                                <div class="border-top pt-2 mt-1 flex-wrap d-flex justify-content-between align-items-center">
                                    <small class="text-secondary" style="font-size: 0.75rem;">
                                        Dicatat: <strong><?= esc($log['recorder_name'] ?: 'Sistem') ?></strong>
                                    </small>
                                    <?php
                                    $sev = $log['severity'];
                                    $badgeClass = 'bg-success bg-opacity-10 text-success';
                                    if ($sev === 'Khusus') $badgeClass = 'bg-dark text-white';
                                    elseif ($sev === 'Berat') $badgeClass = 'bg-danger bg-opacity-10 text-danger';
                                    elseif ($sev === 'Sedang') $badgeClass = 'bg-warning bg-opacity-10 text-warning';
                                    ?>
                                    <span class="badge <?= $badgeClass ?> rounded-pill px-2 py-1 small"><?= esc($sev) ?></span>
                                </div>
                                
                                <?php if (!empty($log['notes'])): ?>
                                    <div class="bg-white p-2 rounded mt-2 small text-secondary border" style="font-size: 0.75rem;">
                                        <strong>Kronologi:</strong> <?= esc($log['notes']) ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>
