{% extends "base.html" %}
{% block title %}Pengaturan Sekolah{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl lg:text-3xl font-bold text-gray-800">Pengaturan Sekolah</h1>
        <p class="text-gray-600">Sesuaikan identitas sekolah untuk tampilan dan laporan.</p>
    </div>

    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <form method="POST" enctype="multipart/form-data" class="p-8 space-y-6">
            
            <!-- Preview Logo -->
            <div class="flex flex-col items-center justify-center mb-6 p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
                <p class="text-sm text-gray-500 mb-2">Logo Saat Ini</p>
                {% if sekolah.logo and sekolah.logo != 'default_logo.png' %}
                    <img src="{{ url_for('static', filename='uploads/' + sekolah.logo) }}" alt="Logo Sekolah" class="h-32 object-contain">
                {% else %}
                    <div class="h-32 w-32 bg-gray-200 rounded-full flex items-center justify-center text-gray-400">
                        <svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                    </div>
                {% endif %}
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Nama Sekolah -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Nama Sekolah</label>
                    <input type="text" name="nama_sekolah" value="{{ sekolah.nama_sekolah }}" required 
                           class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
                </div>

                <!-- Upload Logo Baru -->
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-2">Ganti Logo (Opsional)</label>
                    <input type="file" name="logo" accept="image/*"
                           class="w-full px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    <p class="text-xs text-gray-500 mt-1">Format: JPG, PNG. Maksimal 2MB.</p>
                </div>
            </div>

            <!-- Alamat Sekolah -->
            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">Alamat Sekolah</label>
                <textarea name="alamat_sekolah" rows="3" required
                          class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">{{ sekolah.alamat_sekolah }}</textarea>
                <p class="text-xs text-gray-500 mt-1">Alamat ini akan muncul di KOP Surat laporan PDF.</p>
            </div>

            <!-- Tombol Simpan -->
            <div class="pt-4 border-t border-gray-100 flex justify-end">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-lg transform transition hover:scale-105">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}