{% extends 'admin_master/base_admin_master.html' if session.get('role') == 'admin_master' else 'admin_database/base_admin_database.html' %}
{% set active_page = 'laporan' %}

{% block page_title %}Laporan & Rekap - Admin Database{% endblock %}

{% block page_header %}
<div class="d-flex justify-content-between align-items-center mb-1">
    <div>
        <h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Laporan & Rekap Database</h5>
        <small class="text-muted" style="font-size: 0.85rem;">Ringkasan statistik, rekapitulasi, dan riwayat mutasi.</small>
    </div>
</div>
{% endblock %}

{% block content %}
<style>
    @media print {
        @page { size: landscape; margin: 1cm; }
        body { background-color: #fff; font-size: 11pt; }
        .db-sidebar, .db-topbar, .btn, .nav-tabs, .dropdown-menu, .dropdown-toggle { display: none !important; }
        .db-main-content { margin: 0 !important; padding: 0 !important; width: 100% !important; overflow: visible !important; }
        .card { border: none !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
        .card-body { padding: 0 !important; }
        .table-responsive { overflow-x: visible !important; }
        .print-header { display: block !important; text-align: center; margin-bottom: 2rem; border-bottom: 2px solid #000; padding-bottom: 1rem; }
        .print-only { display: block !important; }
        .table { width: 100% !important; }
    }
    .print-header { display: none; }
    
    .nav-tabs .nav-link {
        color: #64748b;
        border: none;
        border-bottom: 2px solid transparent;
        font-weight: 500;
        padding: 0.75rem 1.25rem;
    }
    .nav-tabs .nav-link:hover {
        color: #3b82f6;
        border-color: transparent;
    }
    .nav-tabs .nav-link.active {
        color: #3b82f6;
        border: none;
        border-bottom: 2px solid #3b82f6;
        background: transparent;
    }
</style>

<div class="print-header">
    <h3 class="fw-bold mb-1">PONDOK PESANTREN</h3>
    <p class="mb-0">Laporan & Rekap Database Pusat</p>
    <small>Dicetak pada: Hari Ini</small>
</div>

<div class="container-fluid py-4">
    
    <!-- Tab Navigation -->
    <ul class="nav nav-tabs mb-4 border-light-subtle flex-wrap">
        <li class="nav-item">
            <a class="nav-link {{ 'active' if tab == 'santri_aktif' else '' }}" href="?tab=santri_aktif"><i class="fas fa-users me-2"></i>Santri Aktif</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ 'active' if tab == 'kelas' else '' }}" href="?tab=kelas"><i class="fas fa-school me-2"></i>Rekap Kelas</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ 'active' if tab == 'kamar' else '' }}" href="?tab=kamar"><i class="fas fa-bed me-2"></i>Rekap Kamar</a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ 'active' if tab == 'guru' else '' }}" href="?tab=guru"><i class="fas fa-chalkboard-teacher me-2"></i>Rekap Guru</a>
        </li>
        
        <!-- Dropdown Log Mutasi -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle {{ 'active' if tab in ['riwayat_kamar', 'riwayat_kelas', 'keluar_masuk'] else '' }}" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                <i class="fas fa-history me-1"></i> Log Mutasi
            </a>
            <ul class="dropdown-menu shadow border-0" style="border-radius: 0.5rem;">
                <li><a class="dropdown-item {{ 'active' if tab == 'riwayat_kamar' else '' }}" href="?tab=riwayat_kamar"><i class="fas fa-exchange-alt me-2 text-muted"></i>Riwayat Kamar</a></li>
                <li><a class="dropdown-item {{ 'active' if tab == 'riwayat_kelas' else '' }}" href="?tab=riwayat_kelas"><i class="fas fa-level-up-alt me-2 text-muted"></i>Riwayat Kelas</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item {{ 'active' if tab == 'keluar_masuk' else '' }}" href="?tab=keluar_masuk"><i class="fas fa-sign-in-alt me-2 text-muted"></i>Keluar Masuk</a></li>
            </ul>
        </li>

        <li class="nav-item ms-md-auto mt-2 mt-md-0 dropdown">
            <a class="nav-link dropdown-toggle fw-bold text-success {{ 'active' if tab == 'bulanan' else '' }}" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false" style="background-color: rgba(25, 135, 84, 0.05); border-radius: 0.5rem 0.5rem 0 0;">
                <i class="fas fa-file-pdf me-2"></i>Laporan Bulanan
            </a>
            <ul class="dropdown-menu dropdown-menu-end border-0 shadow-sm mt-1">
                <li><a class="dropdown-item py-2" href="?tab=bulanan"><i class="fas fa-eye me-2 text-success"></i> Lihat Laporan</a></li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <a href="/admin_database/laporan/cetak_bulanan" target="_blank" class="dropdown-item py-2">
                        <i class="fas fa-print me-2 text-primary"></i> Cetak / PDF
                    </a>
                </li>
            </ul>
        </li>
    </ul>

    <!-- Content Area -->
    <div class="card border-0 shadow-sm rounded-3">
        <div class="card-body p-4">
        
        {% if tab == 'santri_aktif' %}
            <h5 class="fw-bold mb-4"><i class="fas fa-users text-primary me-2"></i>Rekap Santri Aktif</h5>
            <div class="row g-4">
                <div class="col-md-3">
                    <div class="p-3 bg-light rounded-3 text-center border border-light-subtle">
                        <h6 class="text-muted mb-1">Total Santri Aktif</h6>
                        <h2 class="fw-bold text-dark mb-0">{{ data.total_santri }}</h2>
                    </div>
                </div>
                <div class="col-md-9">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Distribusi Berdasarkan Jenis Kelamin</h6>
                    <table class="table table-bordered table-sm">
                        <thead class="table-light"><tr><th>Jenis Kelamin</th><th>Jumlah Santri</th><th>Persentase</th></tr></thead>
                        <tbody>
                            {% for row in data.by_gender %}
                            <tr>
                                <td>{{ row.jenis_kelamin }}</td>
                                <td>{{ row.jumlah }}</td>
                                <td>{{ (row.jumlah / data.total_santri * 100)|round(1) if data.total_santri > 0 else 0 }}%</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="row g-4 mt-2">
                <div class="col-md-6">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Distribusi Tingkat Kelas</h6>
                    <table class="table table-bordered table-sm">
                        <thead class="table-light"><tr><th>Tingkat</th><th>Jumlah Santri</th></tr></thead>
                        <tbody>
                            {% for row in data.by_tingkat %}
                            <tr><td>{{ row.tingkat_kelas }}</td><td>{{ row.jumlah }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="col-md-6">
                    <h6 class="fw-bold text-dark mb-3 border-bottom pb-2">Distribusi Kamar</h6>
                    <div style="max-height: 400px; overflow-y: auto;">
                        <table class="table table-bordered table-sm">
                            <thead class="table-light" style="position: sticky; top: 0;"><tr><th>Kamar</th><th>Penghuni</th></tr></thead>
                            <tbody>
                                {% for row in data.by_kamar %}
                                <tr><td>{{ row.kamar }}</td><td>{{ row.jumlah }}</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        {% elif tab == 'kelas' %}
            <h5 class="fw-bold mb-4"><i class="fas fa-school text-primary me-2"></i>Rekapitulasi Kelas</h5>
            <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" style="width: 50px;">No</th>
                        <th>Nama Kelas</th>
                        <th>Tingkat</th>
                        <th>Wali Kelas</th>
                        <th class="text-center">Putra</th>
                        <th class="text-center">Putri</th>
                        <th class="text-center">Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data.kelas_list %}
                    <tr>
                        <td class="text-center text-muted">{{ loop.index }}</td>
                        <td class="fw-medium text-dark">{{ row.nama_kelas }}</td>
                        <td>{{ row.tingkat }}</td>
                        <td class="text-muted">{{ row.wali_kelas or '-' }}</td>
                        <td class="text-center">{{ row.jumlah_putra }}</td>
                        <td class="text-center">{{ row.jumlah_putri }}</td>
                        <td class="text-center fw-bold text-primary">{{ row.total_santri }}</td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" class="text-center py-4 text-muted">Data kelas kosong</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
            
        {% elif tab == 'kamar' %}
            <h5 class="fw-bold mb-4"><i class="fas fa-bed text-primary me-2"></i>Rekapitulasi Kamar & Asrama</h5>
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" style="width: 50px;">No</th>
                        <th>Nama Kamar</th>
                        <th>Gedung / Asrama</th>
                        <th class="text-center">Kapasitas</th>
                        <th class="text-center">Terisi</th>
                        <th class="text-center">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data.kamar_list %}
                    <tr>
                        <td class="text-center text-muted">{{ loop.index }}</td>
                        <td class="fw-medium text-dark">{{ row.nama_kamar }}</td>
                        <td>{{ row.asrama }}</td>
                        <td class="text-center">{{ row.kapasitas }}</td>
                        <td class="text-center fw-bold">{{ row.terisi }}</td>
                        <td class="text-center">
                            {% if row.terisi >= row.kapasitas %}
                                <span class="badge bg-danger">Penuh</span>
                            {% else %}
                                <span class="badge bg-success">Tersedia</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="text-center py-4 text-muted">Data kamar kosong</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            
        {% elif tab == 'guru' %}
            <h5 class="fw-bold mb-4"><i class="fas fa-chalkboard-teacher text-primary me-2"></i>Rekap Guru Aktif</h5>
            <div class="row mb-4">
                <div class="col-md-6">
                    <table class="table table-bordered table-sm">
                        <thead class="table-light"><tr><th>Jabatan</th><th>Jumlah</th></tr></thead>
                        <tbody>
                            {% for row in data.by_jabatan %}
                            <tr><td>{{ row.jabatan }}</td><td>{{ row.jumlah }}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <table class="table table-bordered table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="text-center" style="width: 50px;">No</th>
                        <th>Nama Guru</th>
                        <th>Jabatan</th>
                        <th>Pendidikan</th>
                        <th>Kontak</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data.guru_list %}
                    <tr>
                        <td class="text-center text-muted">{{ loop.index }}</td>
                        <td class="fw-medium text-dark">{{ row.nama_lengkap }}</td>
                        <td>{{ row.jabatan }}</td>
                        <td>{{ row.pendidikan_terakhir }}</td>
                        <td>{{ row.nomor_hp or '-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

        {% elif tab in ['riwayat_kamar', 'riwayat_kelas', 'keluar_masuk'] %}
            <h5 class="fw-bold mb-4"><i class="fas fa-history text-primary me-2"></i>Log Mutasi & Perpindahan</h5>
            <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle" style="font-size: 0.9rem;">
                <thead class="table-light">
                    <tr>
                        <th>Tanggal</th>
                        <th>Santri</th>
                        <th>Jenis Mutasi</th>
                        <th>Dari</th>
                        <th>Menjadi</th>
                        <th>Alasan / Keterangan</th>
                        <th>Admin</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in data.riwayat %}
                    <tr>
                        <td style="white-space: nowrap;">{{ row.tanggal }}</td>
                        <td class="fw-medium text-dark">
                            {{ row.nama_lengkap or 'ID: ' ~ row.id_santri }}
                            {% if row.jenis_kelamin %}
                            <small class="text-muted d-block">{{ row.jenis_kelamin }}</small>
                            {% endif %}
                        </td>
                        <td>
                            <span class="badge bg-secondary">{{ row.jenis|upper }}</span>
                        </td>
                        <td class="text-danger">{{ row.dari or '-' }}</td>
                        <td class="text-success">{{ row.ke or '-' }}</td>
                        <td>
                            {% if row.alasan %}<strong class="d-block">{{ row.alasan }}</strong>{% endif %}
                            <span class="text-muted">{{ row.keterangan or '-' }}</span>
                        </td>
                        <td><small class="text-muted">{{ row.admin }}</small></td>
                    </tr>
                    {% else %}
                    <tr><td colspan="7" class="text-center py-4 text-muted">Belum ada riwayat mutasi.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        {% elif tab == 'bulanan' %}
            <div class="text-center mb-5 print-only">
                <h4 class="fw-bold text-uppercase">Laporan Bulanan Pondok Pesantren</h4>
                <p class="mb-0 text-muted">Bulan: {{ now().strftime('%B %Y') if now else 'Bulan Ini' }}</p>
            </div>
            
            <h5 class="fw-bold mb-4 bg-light p-3 rounded-2 border-start border-4 border-primary">
                1. Kondisi Santri & Mutasi
            </h5>
            <div class="row g-4 mb-4">
                <div class="col-md-4">
                    <div class="card border-light-subtle shadow-sm h-100">
                        <div class="card-body text-center">
                            <h6 class="text-muted">Total Santri Aktif</h6>
                            <h2 class="fw-bold mb-0 text-primary">{{ data.total_santri }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card border-light-subtle shadow-sm h-100">
                        <div class="card-body">
                            <h6 class="fw-bold mb-3 border-bottom pb-2">Log Mutasi Bulan Ini (Masuk & Keluar)</h6>
                            {% if data.mutasi_bulan_ini %}
                                <table class="table table-sm mb-0">
                                    <thead><tr><th>Tgl</th><th>Santri</th><th>Jenis</th><th>Keterangan</th></tr></thead>
                                    <tbody>
                                        {% for row in data.mutasi_bulan_ini %}
                                        <tr>
                                            <td>{{ row.tanggal.strftime('%d/%m') if row.tanggal else '-' }}</td>
                                            <td>{{ row.nama_lengkap }}</td>
                                            <td>
                                                {% if row.jenis == 'masuk' %}<span class="text-success fw-bold">Masuk</span>
                                                {% else %}<span class="text-danger fw-bold">Keluar</span>{% endif %}
                                            </td>
                                            <td class="text-muted">{{ row.alasan or '-' }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            {% else %}
                                <p class="text-muted fst-italic mb-0">Tidak ada mutasi santri masuk/keluar bulan ini.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            
            <h5 class="fw-bold mb-4 bg-light p-3 rounded-2 border-start border-4 border-success mt-5">
                2. Kondisi Kelas & Guru
            </h5>
            <div class="row g-4 mb-4">
                <div class="col-md-8">
                    <table class="table table-bordered table-sm align-middle">
                        <thead class="table-light"><tr><th>Kelas</th><th>Tingkat</th><th>Wali Kelas</th></tr></thead>
                        <tbody>
                            {% for row in data.kelas_list %}
                            <tr>
                                <td class="fw-medium">{{ row.nama_kelas }}</td>
                                <td>{{ row.tingkat }}</td>
                                <td class="text-muted">{{ row.wali_kelas or '-' }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="col-md-4">
                    <table class="table table-bordered table-sm align-middle">
                        <thead class="table-light"><tr><th>Jabatan Guru</th><th>Jumlah</th></tr></thead>
                        <tbody>
                            {% for row in data.by_jabatan %}
                            <tr>
                                <td>{{ row.jabatan }}</td>
                                <td class="text-center fw-bold">{{ row.jumlah }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            
            <h5 class="fw-bold mb-4 bg-light p-3 rounded-2 border-start border-4 border-warning mt-5">
                3. Daftar Kamar & Asrama
            </h5>
            <table class="table table-bordered table-sm align-middle mb-5">
                <thead class="table-light"><tr><th>Nama Kamar</th><th>Asrama</th><th>Kapasitas</th></tr></thead>
                <tbody>
                    {% for row in data.kamar_list %}
                    <tr>
                        <td class="fw-medium">{{ row.nama_kamar }}</td>
                        <td>{{ row.asrama }}</td>
                        <td class="text-center">{{ row.kapasitas }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <div class="mt-5 text-end print-only" style="page-break-inside: avoid;">
                <p class="mb-5">Mengetahui,<br><strong>Kepala Pondok Pesantren</strong></p>
                <p>_________________________</p>
            </div>
            
        {% endif %}
        
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const urlParams = new URLSearchParams(window.location.search);
        if(urlParams.has('print')) {
            // Remove print param from URL so it doesn't print again if refreshed
            window.history.replaceState({}, document.title, window.location.pathname + "?tab=" + urlParams.get('tab'));
            setTimeout(function() {
                window.print();
            }, 500);
        }
    });
</script>
{% endblock %}