<?= $this->extend('layout/template') ?>

<?= $this->section('content') ?>

<?php
$pengaturan = $pengaturan ?? [];
?>

<div class="container-fluid">

    <div class="card card-school">
        <div class="card-header bg-primary text-white d-flex align-items-center">
            <div class="header-icon me-3">
                <i class="fas fa-school fa-2x"></i>
            </div>
            <div>
                <h4 class="mb-0 fw-bold">Informasi Sekolah</h4>
                <small class="opacity-75">Kelola profil sekolah dan perpustakaan</small>
            </div>
        </div>

        <div class="card-body">

            <?php if (session()->getFlashdata('success')) : ?>
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i>
                    <?= session()->getFlashdata('success') ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>

            <?php if (session()->getFlashdata('error')) : ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <?= session()->getFlashdata('error') ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>

            <form action="<?= base_url('pengaturan/sekolah/update') ?>" method="post" enctype="multipart/form-data">
                <?= csrf_field() ?>
                <input type="hidden" name="id" value="<?= esc($pengaturan['id'] ?? '') ?>">

                <!-- ===== BAGIAN KIRI: FORM ===== -->
                <div class="row g-4">
                    <div class="col-lg-8">
                        <div class="form-section">
                            <h5 class="section-title">
                                <i class="fas fa-building me-2 text-primary"></i>Profil Sekolah
                            </h5>
                            <hr class="section-divider">

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" name="nama_sekolah" id="nama_sekolah"
                                            class="form-control form-control-school"
                                            value="<?= esc($pengaturan['nama_sekolah'] ?? '') ?>"
                                            placeholder="Nama Sekolah" required>
                                        <label for="nama_sekolah">
                                            <i class="fas fa-school me-1 text-primary"></i>Nama Sekolah
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" name="nama_perpustakaan" id="nama_perpustakaan"
                                            class="form-control form-control-school"
                                            value="<?= esc($pengaturan['nama_perpustakaan'] ?? '') ?>"
                                            placeholder="Nama Perpustakaan" required>
                                        <label for="nama_perpustakaan">
                                            <i class="fas fa-book me-1 text-primary"></i>Nama Perpustakaan
                                        </label>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group-school">
                                        <label for="deskripsi" class="form-label-school">
                                            <i class="fas fa-info-circle me-1 text-primary"></i>Deskripsi
                                        </label>
                                        <textarea name="deskripsi" id="deskripsi"
                                            class="form-control form-control-school"
                                            rows="4"
                                            placeholder="Deskripsi singkat tentang perpustakaan..."><?= esc($pengaturan['deskripsi'] ?? '') ?></textarea>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <div class="form-group-school">
                                        <label for="alamat" class="form-label-school">
                                            <i class="fas fa-map-marker-alt me-1 text-primary"></i>Alamat
                                        </label>
                                        <textarea name="alamat" id="alamat"
                                            class="form-control form-control-school"
                                            rows="3"
                                            placeholder="Alamat lengkap sekolah..."><?= esc($pengaturan['alamat'] ?? '') ?></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Kontak -->
                        <div class="form-section mt-4">
                            <h5 class="section-title">
                                <i class="fas fa-address-card me-2 text-success"></i>Kontak & Media
                            </h5>
                            <hr class="section-divider">

                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" name="telepon" id="telepon"
                                            class="form-control form-control-school"
                                            value="<?= esc($pengaturan['telepon'] ?? '') ?>"
                                            placeholder="Telepon">
                                        <label for="telepon">
                                            <i class="fas fa-phone me-1 text-success"></i>Telepon
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="email" name="email" id="email"
                                            class="form-control form-control-school"
                                            value="<?= esc($pengaturan['email'] ?? '') ?>"
                                            placeholder="Email">
                                        <label for="email">
                                            <i class="fas fa-envelope me-1 text-success"></i>Email
                                        </label>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input type="text" name="website" id="website"
                                            class="form-control form-control-school"
                                            value="<?= esc($pengaturan['website'] ?? '') ?>"
                                            placeholder="Website">
                                        <label for="website">
                                            <i class="fas fa-globe me-1 text-success"></i>Website
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- ===== BAGIAN KANAN: LOGO ===== -->
                    <div class="col-lg-4">
                        <div class="form-section logo-section">
                            <h5 class="section-title text-center">
                                <i class="fas fa-image me-2 text-warning"></i>Logo Sekolah
                            </h5>
                            <hr class="section-divider">

                            <div class="logo-preview-wrapper text-center">
                                <?php if (!empty($pengaturan['logo'])) : ?>
                                    <div class="logo-container">
                                        <img src="<?= base_url('uploads/logo/' . $pengaturan['logo']) ?>"
                                            alt="Logo Sekolah"
                                            class="logo-preview img-fluid"
                                            id="logoPreview">
                                        <div class="logo-overlay">
                                            <i class="fas fa-camera"></i>
                                            <span>Ganti Logo</span>
                                        </div>
                                    </div>
                                <?php else : ?>
                                    <div class="logo-placeholder" id="logoPlaceholder">
                                        <div class="placeholder-icon">
                                            <i class="fas fa-school"></i>
                                        </div>
                                        <p class="placeholder-text">Belum ada logo</p>
                                        <small class="text-muted">Klik tombol di bawah untuk upload</small>
                                    </div>
                                    <img src="" alt="Preview" class="logo-preview img-fluid d-none" id="logoPreview">
                                <?php endif; ?>
                            </div>

                            <div class="mt-3">
                                <label for="logo" class="btn btn-outline-warning w-100 upload-btn">
                                    <i class="fas fa-upload me-2"></i>Pilih Logo
                                </label>
                                <input type="file" name="logo" id="logo"
                                    class="d-none"
                                    accept="image/*"
                                    onchange="previewLogo(event)">
                                <small class="text-muted d-block text-center mt-2">
                                    <i class="fas fa-info-circle"></i>
                                    Biarkan kosong jika tidak ingin mengganti
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ===== TOMBOL AKSI ===== -->
                <hr class="my-4">

                <div class="d-flex gap-2 flex-wrap">
                    <button type="submit" class="btn btn-success btn-lg btn-action">
                        <i class="fas fa-save me-2"></i>Simpan Perubahan
                    </button>
                    <a href="<?= base_url('pengaturan') ?>" class="btn btn-secondary btn-lg btn-action">
                        <i class="fas fa-arrow-left me-2"></i>Kembali
                    </a>
                </div>
            </form>

        </div>
    </div>

</div>

<!-- ===== CSS KUSTOM ===== -->
<style>
    .card-school {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        animation: fadeInUp 0.5s ease;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .card-school .card-header {
        background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
        padding: 1.25rem 1.5rem;
        border-bottom: none;
    }

    .card-school .card-header .header-icon {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
    }

    .card-school .card-body {
        padding: 2rem;
    }

    .form-section {
        background: #f8faff;
        border: 1px solid #e8edf5;
        border-radius: 12px;
        padding: 1.5rem;
        transition: box-shadow 0.3s ease;
    }

    .form-section:hover {
        box-shadow: 0 4px 15px rgba(13, 110, 253, 0.06);
    }

    .section-title {
        font-size: 1rem;
        font-weight: 700;
        color: #1a2332;
        margin-bottom: 0;
    }

    .section-divider {
        margin: 0.75rem 0 1.25rem;
        border-color: #e0e7f0;
        opacity: 0.6;
    }

    .form-control-school {
        border-radius: 10px;
        border: 1.5px solid #e0e7f0;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        background: #fff;
    }

    .form-control-school:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12);
        background: #fff;
    }

    .form-floating > .form-control-school {
        height: calc(3.5rem + 2px);
        padding: 1rem 0.75rem;
    }

    .form-floating > label {
        padding-left: 1rem;
        font-weight: 500;
        color: #495057;
    }

    .form-label-school {
        font-weight: 600;
        font-size: 0.9rem;
        color: #1a2332;
        margin-bottom: 0.5rem;
        display: block;
    }

    .form-group-school textarea.form-control-school {
        min-height: 100px;
    }

    /* Logo Section */
    .logo-section {
        background: linear-gradient(135deg, #fffdf5, #fff8e6);
        border-color: #f0e6c8;
        position: sticky;
        top: 1rem;
    }

    .logo-preview-wrapper {
        min-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo-container {
        position: relative;
        display: inline-block;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .logo-preview {
        width: 180px;
        height: 180px;
        object-fit: cover;
        border-radius: 16px;
        border: 3px solid #fff;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        transition: transform 0.3s ease;
    }

    .logo-container:hover .logo-preview {
        transform: scale(1.05);
    }

    .logo-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 16px;
        cursor: pointer;
    }

    .logo-container:hover .logo-overlay {
        opacity: 1;
    }

    .logo-overlay i {
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }

    .logo-placeholder {
        width: 180px;
        height: 180px;
        background: #f8f9fa;
        border: 3px dashed #dee2e6;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .logo-placeholder .placeholder-icon {
        width: 60px;
        height: 60px;
        background: #fff3cd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #ffc107;
        margin-bottom: 0.75rem;
    }

    .logo-placeholder .placeholder-text {
        font-weight: 600;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }

    .upload-btn {
        border-radius: 10px;
        font-weight: 600;
        padding: 0.75rem 1rem;
        border-width: 2px;
        transition: all 0.3s ease;
    }

    .upload-btn:hover {
        background: #ffc107;
        color: #000;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
    }

    .btn-action {
        border-radius: 10px;
        font-weight: 600;
        padding: 0.65rem 1.75rem;
        transition: all 0.3s ease;
    }

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    .alert {
        border-radius: 10px;
        border: none;
    }

    .alert-success {
        background: #d1e7dd;
        color: #0f5132;
    }

    .alert-danger {
        background: #f8d7da;
        color: #842029;
    }

    /* Responsive */
    @media (max-width: 991.98px) {
        .card-school .card-body {
            padding: 1.25rem;
        }
        .form-section {
            padding: 1rem;
        }
        .logo-section {
            position: static;
        }
        .logo-preview {
            width: 140px;
            height: 140px;
        }
        .logo-placeholder {
            width: 140px;
            height: 140px;
        }
    }
</style>

<!-- ===== JAVASCRIPT ===== -->
<script>
    function previewLogo(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const preview = document.getElementById('logoPreview');
                const placeholder = document.getElementById('logoPlaceholder');

                preview.src = e.target.result;
                preview.classList.remove('d-none');

                if (placeholder) {
                    placeholder.style.display = 'none';
                }

                // Ganti wrapper menjadi logo-container jika sebelumnya placeholder
                const wrapper = preview.closest('.logo-preview-wrapper');
                if (!preview.closest('.logo-container')) {
                    const container = document.createElement('div');
                    container.className = 'logo-container';
                    preview.parentNode.insertBefore(container, preview);
                    container.appendChild(preview);

                    const overlay = document.createElement('div');
                    overlay.className = 'logo-overlay';
                    overlay.innerHTML = '<i class="fas fa-camera"></i><span>Ganti Logo</span>';
                    container.appendChild(overlay);
                }
            };
            reader.readAsDataURL(file);
        }
    }
</script>

<?= $this->endSection() ?>
