{% extends "yayasan/base.html" %}

{% block content %}
<!-- Hero Section -->
<section class="hero">
    <div class="container text-center">
        <h1 class="display-4 fw-bold mb-3">Selamat Datang</h1>
        <p class="lead mb-4">{{ yayasan.nama }}</p>
        <p class="mb-4">Mencetak Generasi Qurani yang Berprestasi</p>
        <a href="/cek-tagihan" class="btn btn-light btn-lg me-2">
            <i class="fas fa-search-dollar me-2"></i>Cek Tagihan SPP
        </a>
        <a href="/tentang" class="btn btn-outline-light btn-lg">
            <i class="fas fa-info-circle me-2"></i>Tentang Kami
        </a>
    </div>
</section>

<!-- Stats Section -->
<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-users"></i></div>
                    <div class="stat-number">{{ stats.total_siswa }}</div>
                    <div class="text-muted">Siswa Aktif</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-money-bill-wave"></i></div>
                    <div class="stat-number">Rp {{ "{:,.0f}".format(stats.jumlah_bayar_bulan_ini).replace(",", ".") }}</div>
                    <div class="text-muted">Pemasukan Bulan Ini</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                    <div class="stat-number">{{ stats.total_bayar_bulan_ini }}</div>
                    <div class="text-muted">SPP Lunas</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon"><i class="fas fa-exclamation-triangle"></i></div>
                    <div class="stat-number">{{ stats.total_tunggakan }}</div>
                    <div class="text-muted">Tunggakan</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features -->
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center mb-5">Layanan Kami</h2>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 p-4 text-center">
                    <div class="card-body">
                        <i class="fas fa-robot fa-3x text-success mb-3"></i>
                        <h5>Bot WhatsApp</h5>
                        <p class="text-muted">Cek tagihan dan konfirmasi pembayaran langsung via WhatsApp dengan command sederhana.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4 text-center">
                    <div class="card-body">
                        <i class="fas fa-chart-line fa-3x text-success mb-3"></i>
                        <h5>Monitoring Real-time</h5>
                        <p class="text-muted">Pantau pembayaran SPP, tunggakan, dan statistik yayasan secara real-time.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card h-100 p-4 text-center">
                    <div class="card-body">
                        <i class="fas fa-mobile-alt fa-3x text-success mb-3"></i>
                        <h5>Akses Tablet</h5>
                        <p class="text-muted">Admin panel responsif yang bisa diakses dari tablet maupun smartphone.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Pengumuman -->
<section class="py-5">
    <div class="container">
        <h2 class="text-center mb-5">Pengumuman Terbaru</h2>
        <div class="row g-4">
            {% for p in pengumuman %}
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <span class="badge bg-success mb-2">{{ p.kategori }}</span>
                        <h5 class="card-title">{{ p.judul }}</h5>
                        <p class="card-text text-muted">{{ p.isi[:100] }}...</p>
                        <small class="text-muted"><i class="far fa-clock me-1"></i>{{ p.created_at }}</small>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="col-12 text-center text-muted">
                <i class="fas fa-bell fa-3x mb-3"></i>
                <p>Belum ada pengumuman</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Cara Bayar -->
<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center mb-5">Cara Pembayaran SPP</h2>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width:40px;height:40px">1</div>
                            <div>
                                <h6 class="mb-0">Transfer ke Rekening Yayasan</h6>
                                <p class="text-muted mb-0">{{ yayasan.rekening }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-4">
                            <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width:40px;height:40px">2</div>
                            <div>
                                <h6 class="mb-0">Simpan Bukti Transfer</h6>
                                <p class="text-muted mb-0">Screenshot atau foto bukti pembayaran</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center mb-4">
                            <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width:40px;height:40px">3</div>
                            <div>
                                <h6 class="mb-0">Konfirmasi via WhatsApp</h6>
                                <p class="text-muted mb-0">Kirim bukti ke bot WA dengan command <code>!bayar [kode]</code></p>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width:40px;height:40px">4</div>
                            <div>
                                <h6 class="mb-0">Tunggu Konfirmasi</h6>
                                <p class="text-muted mb-0">Admin akan memverifikasi pembayaran Anda</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}