{% extends "base.html" %}

{% block title %}Kelola Sekolah{% endblock %}
{% block page_title %}Kelola Sekolah{% endblock %}

{% block content %}
<!-- Search and Filter -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-6">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-medium text-gray-600 mb-1">Cari Sekolah</label>
            <input type="text" name="search" value="{{ search }}" placeholder="Nama, NPSN, atau Email..." 
                   class="w-full px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-600 mb-1">Status</label>
            <select name="status" onchange="this.form.submit()" 
                    class="px-3 py-2 rounded-lg border border-gray-200 text-sm focus:border-primary-400 focus:ring-1 focus:ring-primary-200 outline-none">
                <option value="all" {% if status_filter == 'all' %}selected{% endif %}>Semua</option>
                <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Menunggu</option>
                <option value="approved" {% if status_filter == 'approved' %}selected{% endif %}>Aktif</option>
                <option value="rejected" {% if status_filter == 'rejected' %}selected{% endif %}>Ditolak</option>
                <option value="suspended" {% if status_filter == 'suspended' %}selected{% endif %}>Ditangguhkan</option>
            </select>
        </div>
        <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
            Filter
        </button>
        {% if search or status_filter != 'all' %}
        <a href="{{ url_for('superadmin.schools') }}" class="px-4 py-2 bg-white border border-gray-200 text-gray-600 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
            Reset
        </a>
        {% endif %}
    </form>
</div>

<!-- Bulk Actions Form -->
<form method="POST" action="{{ url_for('superadmin.bulk_school_action') }}" id="bulkActionForm">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    
    {% if pagination.items %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-4">
        <div class="flex flex-wrap items-center gap-3">
            <button type="button" onclick="selectAll()" class="text-sm text-primary-600 hover:text-primary-700 font-medium">
                Pilih Semua
            </button>
            <span class="text-gray-300">|</span>
            <select name="action" id="bulkAction" class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm">
                <option value="">Aksi Massal...</option>
                <option value="approve">Setujui yang dipilih</option>
                <option value="reject">Tolak yang dipilih</option>
                <option value="suspend">Tangguhkan yang dipilih</option>
                <option value="activate">Aktifkan yang dipilih</option>
            </select>
            <button type="submit" class="px-3 py-1.5 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors">
                Jalankan
            </button>
        </div>
    </div>
    {% endif %}

    <!-- Schools table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase px-4 py-3 w-10">
                            <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)">
                        </th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Sekolah</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">NPSN</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Alamat</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Status</th>
                        <th class="text-left text-xs font-medium text-gray-500 uppercase px-6 py-3">Tanggal</th>
                        <th class="text-right text-xs font-medium text-gray-500 uppercase px-6 py-3">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    {% for school in pagination.items %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-4 py-4">
                            <input type="checkbox" name="school_ids" value="{{ school.id }}" class="school-checkbox">
                        </td>
                        <td class="px-6 py-4">
                            <p class="text-sm font-medium text-gray-800">{{ school.name }}</p>
                            <p class="text-xs text-gray-500">{{ school.phone or '-' }}</p>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-600">{{ school.npsn }}</td>
                        <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate">{{ school.address or '-' }}</td>
                        <td class="px-6 py-4">
                            {% if school.status == 'pending' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">Menunggu</span>
                            {% elif school.status == 'approved' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Aktif</span>
                            {% elif school.status == 'rejected' %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Ditolak</span>
                            {% else %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Ditangguhkan</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">{{ school.created_at.strftime('%d %b %Y') }}</td>
                        <td class="px-6 py-4 text-right space-x-2">
                            <a href="{{ url_for('superadmin.school_detail', school_id=school.id) }}" class="text-sm text-primary-600 hover:text-primary-700 font-medium">Detail</a>
                            {% if school.status == 'pending' %}
                            <form method="POST" action="{{ url_for('superadmin.approve_school', school_id=school.id) }}" class="inline">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="text-sm text-green-600 hover:text-green-700 font-medium">Setujui</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                    {% if not pagination.items %}
                    <tr><td colspan="7" class="px-6 py-8 text-center text-gray-400 text-sm">Tidak ada sekolah ditemukan</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        {% if pagination.pages > 1 %}
        <div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between">
            <p class="text-sm text-gray-500">
                Menampilkan {{ (pagination.page - 1) * pagination.per_page + 1 }} - {{ pagination.page * pagination.per_page if pagination.page * pagination.per_page < pagination.total else pagination.total }} dari {{ pagination.total }} sekolah
            </p>
            <div class="flex gap-2">
                {% if pagination.has_prev %}
                <a href="{{ url_for('superadmin.schools', page=pagination.prev_num, status=status_filter, search=search) }}" 
                   class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                    &larr; Sebelumnya
                </a>
                {% endif %}
                {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %}
                    {% if page_num %}
                        {% if page_num == pagination.page %}
                        <span class="px-3 py-1.5 rounded-lg bg-primary-600 text-white text-sm font-medium">{{ page_num }}</span>
                        {% else %}
                        <a href="{{ url_for('superadmin.schools', page=page_num, status=status_filter, search=search) }}" 
                           class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                            {{ page_num }}
                        </a>
                        {% endif %}
                    {% else %}
                    <span class="px-2 text-gray-400">...</span>
                    {% endif %}
                {% endfor %}
                {% if pagination.has_next %}
                <a href="{{ url_for('superadmin.schools', page=pagination.next_num, status=status_filter, search=search) }}" 
                   class="px-3 py-1.5 rounded-lg border border-gray-200 text-sm text-gray-600 hover:bg-gray-50 transition-colors">
                    Selanjutnya &rarr;
                </a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
</form>

<script>
function toggleSelectAll(checkbox) {
    document.querySelectorAll('.school-checkbox').forEach(cb => {
        cb.checked = checkbox.checked;
    });
}

function selectAll() {
    document.querySelectorAll('.school-checkbox').forEach(cb => {
        cb.checked = true;
    });
    document.getElementById('selectAllCheckbox').checked = true;
}
</script>
{% endblock %}