{% extends "base.html" %}
{% block title %}Beranda{% endblock %}

{% block sidebar %}
    {% if session['role'] == 'dapur' %}
        <a href="/dapur" class="sidebar-item active"><i class="fas fa-home me-2"></i> Beranda</a>
        <div class="sidebar-heading">PEMANTAUAN</div>
        <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-eye me-2"></i> Lihat Sasaran</a>
        <div class="sidebar-heading">PELAPORAN</div>
        <a href="/form_dapur" class="sidebar-item"><i class="fas fa-edit me-2"></i> Input Realisasi Dapur</a>
        <a href="/arsip_laporan" class="sidebar-item"><i class="fas fa-history me-2"></i> Arsip Laporan</a>
    {% elif session['role'] == 'kader' %}
        <a href="/kader" class="sidebar-item active"><i class="fas fa-home me-2"></i> Beranda</a>
        <div class="sidebar-heading">ENTRY DATA</div>
        <a href="/form_kader" class="sidebar-item"><i class="fas fa-edit me-2"></i> Input Sasaran</a>
        <div class="sidebar-heading">DATA SAYA</div>
        <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-list me-2"></i> Rekapitulasi Sasaran</a>
    {% elif session['role'] == 'plkb' %}
        <a href="/plkb" class="sidebar-item active"><i class="fas fa-home me-2"></i> Beranda</a>
        <div class="sidebar-heading">MANAJEMEN DATA</div>
        <a href="/rekapitulasi" class="sidebar-item"><i class="fas fa-list me-2"></i> Sasaran 1000 HPK</a>
        <a href="/arsip_laporan" class="sidebar-item"><i class="fas fa-file-excel me-2"></i> Rekap Laporan Dapur</a>
        <a href="/rekap_laporan_kader" class="sidebar-item"><i class="fas fa-users me-2"></i> Rekap Laporan Kader</a>
    {% endif %}
{% endblock %}

{% block content %}
<style>
    /* Styling khusus untuk Dashboard */
    .welcome-card { 
        background: linear-gradient(135deg, #0b3d91 0%, #1e57b8 100%); 
        color: white; 
        border-radius: 12px; 
    }
    .hover-card { 
        transition: transform 0.3s ease, box-shadow 0.3s ease; 
        border-radius: 12px; 
    }
    .hover-card:hover { 
        transform: translateY(-5px); 
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; 
    }
    .icon-circle { 
        width: 60px; height: 60px; 
        border-radius: 50%; 
        display: flex; align-items: center; justify-content: center; 
        margin: 0 auto; 
    }
    .text-decoration-none-custom:hover {
        text-decoration: none;
    }
</style>

<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm welcome-card p-4">
            <div class="d-flex align-items-center justify-content-between flex-wrap">
                <div class="d-flex align-items-center mb-3 mb-md-0">
                    <div class="me-4 bg-white rounded-circle p-3 shadow-sm d-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <img src="{% if session.get('foto_profil') %}/static/uploads/{{ session['foto_profil'] }}{% else %}https://ui-avatars.com/api/?name={{ session['nama_lengkap'] }}&background=0b3d91&color=fff&rounded=true&size=80&bold=true{% endif %}" width="80" height="80" class="rounded-circle">
                    </div>
                    <div>
                        <h3 class="fw-bold mb-1">Selamat Datang, {{ session['nama_lengkap'] }}!</h3>
                        <p class="mb-0 text-white-50" style="font-size: 1.1rem;">
                            Dasbor <strong>{{ session['role'] | upper }}</strong> | Wilayah Tugas: <strong>{{ session['kecamatan'] }}</strong>
                        </p>
                    </div>
                </div>
                <div class="text-end text-white">
                    <div class="fw-bold fs-3" id="liveClock">00:00:00</div>
                    <div class="small text-white-50" id="liveDate">Memuat tanggal...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12 mb-3">
        <h5 class="fw-bold text-secondary border-bottom pb-2"><i class="fas fa-bolt text-warning me-2"></i>Akses Cepat Pintasan</h5>
    </div>
    
    {% if session['role'] == 'kader' %}
    <div class="col-md-4 mb-3">
        <a href="/form_kader" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-primary bg-opacity-10 mb-3"><i class="fas fa-user-plus fa-2x text-primary"></i></div>
                    <h6 class="fw-bold text-dark">Input Data Sasaran</h6>
                    <p class="text-muted small mb-0">Tambahkan data sasaran 1000 HPK baru ke dalam sistem.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4 mb-3">
        <a href="/rekapitulasi" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-success bg-opacity-10 mb-3"><i class="fas fa-list fa-2x text-success"></i></div>
                    <h6 class="fw-bold text-dark">Rekapitulasi Sasaran</h6>
                    <p class="text-muted small mb-0">Lihat, edit, atau hapus riwayat data sasaran yang telah diinput.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card h-100 border-0 shadow-sm">
            <div class="card-body text-center p-4">
                <div class="icon-circle bg-info bg-opacity-10 mb-3"><i class="fas fa-chart-pie fa-2x text-info"></i></div>
                <h6 class="fw-bold text-dark">Status Akun</h6>
                <p class="text-muted small mb-0">Akses aktif. Pastikan data yang dimasukkan akurat dan tervalidasi.</p>
            </div>
        </div>
    </div>

    {% elif session['role'] == 'dapur' %}
    <div class="col-md-4 mb-3">
        <a href="/form_dapur" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-warning bg-opacity-10 mb-3"><i class="fas fa-utensils fa-2x text-warning"></i></div>
                    <h6 class="fw-bold text-dark">Lapor Realisasi Dapur</h6>
                    <p class="text-muted small mb-0">Isi form laporan distribusi MBG B3 secara berkala.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4 mb-3">
        <a href="/rekapitulasi" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-primary bg-opacity-10 mb-3"><i class="fas fa-users fa-2x text-primary"></i></div>
                    <h6 class="fw-bold text-dark">Pemantauan Sasaran</h6>
                    <p class="text-muted small mb-0">Lihat daftar target penerima bantuan di wilayah Anda.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4 mb-3">
        <a href="/arsip_laporan" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-success bg-opacity-10 mb-3"><i class="fas fa-history fa-2x text-success"></i></div>
                    <h6 class="fw-bold text-dark">Arsip Laporan</h6>
                    <p class="text-muted small mb-0">Periksa histori laporan yang sudah berhasil disubmit.</p>
                </div>
            </div>
        </a>
    </div>

    {% elif session['role'] == 'plkb' %}
    <div class="col-md-4 mb-3">
        <a href="/rekapitulasi" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-primary bg-opacity-10 mb-3"><i class="fas fa-database fa-2x text-primary"></i></div>
                    <h6 class="fw-bold text-dark">Basis Data Sasaran</h6>
                    <p class="text-muted small mb-0">Pantau seluruh basis data sasaran 1000 HPK.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4 mb-3">
        <a href="/rekap_laporan_kader" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-info bg-opacity-10 mb-3"><i class="fas fa-clipboard-list fa-2x text-info"></i></div>
                    <h6 class="fw-bold text-dark">Rekap Kinerja Kader</h6>
                    <p class="text-muted small mb-0">Evaluasi jumlah input data berdasarkan Posyandu/Desa.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4 mb-3">
        <a href="/arsip_laporan" class="text-decoration-none text-decoration-none-custom">
            <div class="card h-100 border-0 shadow-sm hover-card">
                <div class="card-body text-center p-4">
                    <div class="icon-circle bg-success bg-opacity-10 mb-3"><i class="fas fa-file-excel fa-2x text-success"></i></div>
                    <h6 class="fw-bold text-dark">Monitor Laporan Dapur</h6>
                    <p class="text-muted small mb-0">Pantau operasional dan distribusi unit Dapur SPPG.</p>
                </div>
            </div>
        </a>
    </div>
    {% endif %}
</div>

<div class="row">
    <div class="col-md-7 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-4 pb-2">
                <h6 class="fw-bold mb-0"><i class="fas fa-bullhorn text-danger me-2"></i>Papan Informasi Sistem</h6>
            </div>
            <div class="card-body">
                <div class="alert alert-info border-0 border-start border-4 border-info">
                    <h6 class="alert-heading fw-bold"><i class="fas fa-calendar-check me-1"></i> Periode Pelaporan</h6>
                    <p class="mb-0 small">Pelaporan data bulanan wajib diselesaikan dan diinput ke dalam sistem maksimal pada <strong>tanggal 10 setiap bulannya</strong>. Mohon persiapkan data sebelum tenggat waktu.</p>
                </div>
                <div class="alert alert-warning border-0 border-start border-4 border-warning mb-0">
                    <h6 class="alert-heading fw-bold"><i class="fas fa-exclamation-triangle me-1"></i> Akurasi Data</h6>
                    <p class="mb-0 small">Pastikan Nomor Induk Kependudukan (NIK) dan Nomor Kartu Keluarga (KK) sasaran diisi lengkap sebanyak <strong>16 digit</strong> sesuai dengan dokumen resmi untuk menghindari kendala sinkronisasi.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-5 mb-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white border-0 pt-4 pb-2">
                <h6 class="fw-bold mb-0"><i class="fas fa-headset text-success me-2"></i>Pusat Bantuan</h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">Jika Anda mengalami kendala saat menggunakan sistem (seperti gagal menyimpan data atau kesulitan login), silakan lakukan langkah berikut:</p>
                <ul class="text-muted small ps-3">
                    <li class="mb-2">Periksa kestabilan koneksi internet perangkat Anda.</li>
                    <li class="mb-2">Pastikan semua formulir bertanda bintang merah (*) telah diisi.</li>
                    <li class="mb-2">Gunakan <em>browser</em> versi terbaru (disarankan Google Chrome).</li>
                    <li>Jika masalah berlanjut, hubungi <strong>Koordinator PLKB Kecamatan</strong> atau <strong>Superadmin BKKBN Kabupaten Sukabumi</strong>.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    // Script untuk Jam dan Tanggal Real-time
    function updateClock() {
        const now = new Date();
        
        // Format Waktu (Jam:Menit:Detik)
        const timeStr = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        
        // Format Tanggal (Hari, Tanggal Bulan Tahun)
        const optionsDate = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        const dateStr = now.toLocaleDateString('id-ID', optionsDate);
        
        document.getElementById('liveClock').textContent = timeStr.replace(/\./g, ':');
        document.getElementById('liveDate').textContent = dateStr;
    }
    
    // Jalankan pertama kali, lalu update setiap detik (1000ms)
    updateClock();
    setInterval(updateClock, 1000);
</script>
{% endblock %}