{% extends "base.twig" %}

{% block title %}{{ title }}{% endblock %}

{% block styles %}
<style>
    .state-container { padding: 24px; background: #f9fafb; min-height: calc(100vh - 70px); }

    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 28px 32px;
        border-radius: 16px;
        margin-bottom: 24px;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    }
    .page-header h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
    .page-header p { opacity: 0.9; font-size: 14px; margin: 0; }

    .state-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 16px;
    }

    .state-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border-left: 4px solid #667eea;
        transition: all 0.2s;
        text-decoration: none;
        color: inherit;
        display: block;
    }
    .state-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(102,126,234,0.18);
        color: inherit;
        text-decoration: none;
    }

    .state-card .state-icon {
        font-size: 28px;
        color: #667eea;
        margin-bottom: 8px;
    }
    .state-card .state-name {
        font-size: 17px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 4px;
    }
    .state-card .state-meta {
        font-size: 13px;
        color: #6b7280;
    }
    .state-card .state-count {
        font-size: 24px;
        font-weight: 800;
        color: #667eea;
        margin-top: 12px;
    }
</style>
{% endblock %}

{% block contents %}
<div class="state-container">
    <div class="page-header">
        <h1><i class="bi bi-geo-alt-fill"></i> Laporan Individu Mengikut Negeri</h1>
        <p>Pilih negeri untuk lihat / cetak laporan individu semua peserta dalam negeri tersebut.</p>
    </div>

    <div class="state-grid">
        {% for s in states %}
        <a href="/admin/individual-reports/state/{{ s.id }}" class="state-card">
            <div class="state-icon"><i class="bi bi-pin-map-fill"></i></div>
            <div class="state-name">{{ s.state_name }}</div>
            <div class="state-meta">{{ s.participant_count }} peserta aktif</div>
            <div class="state-count">{{ s.participant_count }}</div>
        </a>
        {% else %}
        <div class="text-center text-muted">Tiada negeri dengan peserta aktif.</div>
        {% endfor %}
    </div>
</div>
{% endblock %}