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

{% block page_title %}Tahun Ajaran - Admin Database{% endblock %}

{% block page_header %}
<h5 class="mb-1 fw-bold" style="color: #1f2937; font-size: 1.25rem;">Tahun Ajaran</h5>
<small class="text-muted" style="font-size: 0.85rem;">Kelola master data tahun akademik pesantren.</small>
{% endblock %}

{% block content %}
<!-- CONTROL BAR -->
<div class="mt-2 mb-4 d-flex justify-content-end bg-transparent">
    <button class="btn btn-sm text-white shadow-sm rounded-1 d-flex align-items-center gap-2 px-3 py-2 btn-hover-zoom" style="background-color: #00685f; font-size: 0.85rem; font-weight: 500;" data-bs-toggle="modal" data-bs-target="#modalTambah">
        <i class="fas fa-plus"></i> Tambah Tahun
    </button>
</div>

<!-- Flash Messages -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} alert-dismissible fade show shadow-sm border-0 mb-4" role="alert">
                <i class="fas {% if category == 'success' %}fa-check-circle{% else %}fa-exclamation-circle{% endif %} me-2"></i> {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<!-- KARTU TABEL UTAMA -->
<div class="bule-card rounded-2 shadow-sm border-0 overflow-hidden bg-white">
    <div class="table-responsive">
        <table class="table mb-0 align-middle table-hover text-start" style="font-size: 0.875rem;">
            <thead>
                <tr class="bg-white border-bottom border-light-subtle">
                    <th class="py-3 px-4 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 150px;">Tahun Hijriyah</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 150px;">Tahun Masehi</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 200px;">Tanggal Mulai - Selesai</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 120px;">Status</th>
                    <th class="py-3 px-3 text-uppercase fw-semibold text-muted" style="font-size: 0.7rem; letter-spacing: 0.05em; min-width: 200px;">Keterangan</th>
                    <th class="py-3 px-4 text-uppercase fw-semibold text-muted text-end" style="font-size: 0.7rem; letter-spacing: 0.05em; width: 140px;">Aksi</th>
                </tr>
            </thead>
                    <tbody>
                        {% for ta in tahun_ajaran %}
                        <tr>
                            <td class="ps-4 fw-bold text-dark">{{ ta.nama_hijriyah }}</td>
                            <td>{{ ta.nama_masehi or '-' }}</td>
                            <td>
                                {% if ta.tanggal_mulai or ta.tanggal_selesai %}
                                    <small class="text-muted"><i class="far fa-calendar-alt me-1"></i> {{ ta.tanggal_mulai or '?' }} s.d {{ ta.tanggal_selesai or '?' }}</small>
                                {% else %}
                                    <span class="text-muted fst-italic small">Belum diatur</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if ta.status == 'Aktif Utama' %}
                                    <span class="badge bg-success bg-opacity-10 text-success border border-success fw-medium"><i class="fas fa-star me-1 text-warning"></i> Aktif Utama</span>
                                {% elif ta.status == 'Aktif' %}
                                    <span class="badge bg-primary bg-opacity-10 text-primary border border-primary fw-medium">Aktif</span>
                                {% elif ta.status == 'Draft' %}
                                    <span class="badge bg-secondary bg-opacity-10 text-secondary border border-secondary fw-medium">Draft</span>
                                {% else %}
                                    <span class="badge bg-dark bg-opacity-10 text-dark border border-dark fw-medium">Arsip</span>
                                {% endif %}
                            </td>
                            <td><small class="text-muted">{{ ta.keterangan or '-' }}</small></td>
                            <td class="text-end pe-4">
                                {% if ta.status != 'Aktif Utama' %}
                                <form method="POST" action="/admin_database/tahun_ajaran/set_utama/{{ ta.id }}" class="d-inline">
                                    <button type="submit" class="btn btn-sm btn-outline-success border-0" title="Jadikan Aktif Utama"><i class="fas fa-check-circle"></i></button>
                                </form>
                                {% endif %}
                                <button class="btn btn-sm btn-outline-primary border-0" data-bs-toggle="modal" data-bs-target="#modalEdit{{ ta.id }}" title="Edit">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <form method="POST" action="/admin_database/tahun_ajaran/hapus/{{ ta.id }}" class="d-inline" onsubmit="return confirm('Yakin ingin menghapus tahun ajaran ini?');">
                                    <button type="submit" class="btn btn-sm btn-outline-danger border-0" title="Hapus"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>

                        <!-- Modal Edit -->
                        <div class="modal fade" id="modalEdit{{ ta.id }}" tabindex="-1">
                            <div class="modal-dialog">
                                <form action="/admin_database/tahun_ajaran/edit/{{ ta.id }}" method="POST">
                                    <div class="modal-content border-0 shadow">
                                        <div class="modal-header border-bottom-0 bg-light">
                                            <h6 class="modal-title fw-bold text-dark"><i class="fas fa-edit me-2 text-primary"></i>Edit Tahun Ajaran</h6>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                        </div>
                                        <div class="modal-body p-4">
                                            <div class="mb-3">
                                                <label class="form-label text-muted fw-medium small">Tahun Hijriyah <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="nama_hijriyah" value="{{ ta.nama_hijriyah }}" required placeholder="Contoh: 1445/1446 H">
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label text-muted fw-medium small">Tahun Masehi</label>
                                                <input type="text" class="form-control" name="nama_masehi" value="{{ ta.nama_masehi }}" placeholder="Contoh: 2024/2025 M">
                                            </div>
                                            <div class="row g-3 mb-3">
                                                <div class="col-6">
                                                    <label class="form-label text-muted fw-medium small">Tanggal Mulai</label>
                                                    <input type="date" class="form-control" name="tanggal_mulai" value="{{ ta.tanggal_mulai }}">
                                                </div>
                                                <div class="col-6">
                                                    <label class="form-label text-muted fw-medium small">Tanggal Selesai</label>
                                                    <input type="date" class="form-control" name="tanggal_selesai" value="{{ ta.tanggal_selesai }}">
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label text-muted fw-medium small">Status</label>
                                                <select class="form-select" name="status">
                                                    <option value="Draft" {% if ta.status == 'Draft' %}selected{% endif %}>Draft</option>
                                                    <option value="Aktif" {% if ta.status == 'Aktif' %}selected{% endif %}>Aktif</option>
                                                    <option value="Aktif Utama" {% if ta.status == 'Aktif Utama' %}selected{% endif %}>Aktif Utama</option>
                                                    <option value="Arsip" {% if ta.status == 'Arsip' %}selected{% endif %}>Arsip</option>
                                                </select>
                                                <div class="form-text small"><i class="fas fa-info-circle"></i> Memilih Aktif Utama akan menurunkan tahun ajaran utama yang lama menjadi Aktif biasa.</div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label text-muted fw-medium small">Keterangan Tambahan</label>
                                                <textarea class="form-control" name="keterangan" rows="2">{{ ta.keterangan }}</textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer border-top-0 bg-light">
                                            <button type="button" class="btn btn-white border px-3" data-bs-dismiss="modal">Batal</button>
                                            <button type="submit" class="btn btn-primary px-4">Simpan Perubahan</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {% else %}
                        <tr><td colspan="6" class="text-center py-5 text-muted">Belum ada data Tahun Ajaran.</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

<!-- Modal Tambah -->
<div class="modal fade" id="modalTambah" tabindex="-1">
    <div class="modal-dialog">
        <form action="/admin_database/tahun_ajaran/simpan" method="POST">
            <div class="modal-content border-0 shadow">
                <div class="modal-header border-bottom-0 bg-light">
                    <h6 class="modal-title fw-bold text-dark"><i class="fas fa-plus-circle me-2 text-success"></i>Tambah Tahun Ajaran</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium small">Tahun Hijriyah <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="nama_hijriyah" required placeholder="Contoh: 1445/1446 H">
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium small">Tahun Masehi</label>
                        <input type="text" class="form-control" name="nama_masehi" placeholder="Contoh: 2024/2025 M">
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label text-muted fw-medium small">Tanggal Mulai</label>
                            <input type="date" class="form-control" name="tanggal_mulai">
                        </div>
                        <div class="col-6">
                            <label class="form-label text-muted fw-medium small">Tanggal Selesai</label>
                            <input type="date" class="form-control" name="tanggal_selesai">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium small">Status Awal</label>
                        <select class="form-select" name="status">
                            <option value="Draft" selected>Draft (Disiapkan)</option>
                            <option value="Aktif">Aktif</option>
                            <option value="Aktif Utama">Aktif Utama (Tahun Berjalan)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted fw-medium small">Keterangan</label>
                        <textarea class="form-control" name="keterangan" rows="2"></textarea>
                    </div>
                </div>
                <div class="modal-footer border-top-0 bg-light">
                    <button type="button" class="btn btn-white border px-3" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn text-white px-4" style="background-color: #00685f;">Simpan</button>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}