@extends('layouts.admin')

@section('title', 'Data Sekolah')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>Data Sekolah</h2>
</div>

<x-alert />

<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('school.update') }}" enctype="multipart/form-data" id="schoolForm">
            @csrf @method('PUT')
            @if($readonly)
            <div class="alert alert-info">Mode baca saja — data profil sekolah tidak dapat diubah oleh akun kepala sekolah.</div>
            @endif
            <fieldset @if($readonly) disabled @endif>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="name" class="form-label">Nama Sekolah</label>
                    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $school->name) }}" required>
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6 mb-3">
                    <label for="npsn" class="form-label">NPSN</label>
                    <input type="text" name="npsn" id="npsn" class="form-control @error('npsn') is-invalid @enderror" value="{{ old('npsn', $school->npsn) }}">
                    @error('npsn') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-12 mb-3">
                    <label for="address" class="form-label">Alamat</label>
                    <textarea name="address" id="address" rows="2" class="form-control @error('address') is-invalid @enderror">{{ old('address', $school->address) }}</textarea>
                    @error('address') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-4 mb-3">
                    <label for="village" class="form-label">Desa/Kelurahan</label>
                    <input type="text" name="village" id="village" class="form-control" value="{{ old('village', $school->village) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="district" class="form-label">Kecamatan</label>
                    <input type="text" name="district" id="district" class="form-control" value="{{ old('district', $school->district) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="city" class="form-label">Kota/Kabupaten</label>
                    <input type="text" name="city" id="city" class="form-control" value="{{ old('city', $school->city) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="province" class="form-label">Provinsi</label>
                    <input type="text" name="province" id="province" class="form-control" value="{{ old('province', $school->province) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="postal_code" class="form-label">Kode Pos</label>
                    <input type="text" name="postal_code" id="postal_code" class="form-control" value="{{ old('postal_code', $school->postal_code) }}">
                </div>
                <div class="col-md-4 mb-3">
                    <label for="phone" class="form-label">Telepon</label>
                    <input type="text" name="phone" id="phone" class="form-control" value="{{ old('phone', $school->phone) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" name="email" id="email" class="form-control" value="{{ old('email', $school->email) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="website" class="form-label">Website</label>
                    <input type="text" name="website" id="website" class="form-control" value="{{ old('website', $school->website) }}">
                </div>
                <div class="col-md-6 mb-3">
                    <label for="headmaster" class="form-label">Kepala Sekolah</label>
                    <input type="text" name="headmaster" id="headmaster" class="form-control" value="{{ old('headmaster', $school->headmaster) }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label for="nip_headmaster" class="form-label">NIP Kepsek</label>
                    <input type="text" name="nip_headmaster" id="nip_headmaster" class="form-control" value="{{ old('nip_headmaster', $school->nip_headmaster) }}">
                </div>
                <div class="col-md-3 mb-3">
                    <label for="accreditation" class="form-label">Akreditasi</label>
                    <select name="accreditation" id="accreditation" class="form-select">
                        <option value="">Pilih</option>
                        <option value="A" {{ old('accreditation', $school->accreditation) === 'A' ? 'selected' : '' }}>A</option>
                        <option value="B" {{ old('accreditation', $school->accreditation) === 'B' ? 'selected' : '' }}>B</option>
                        <option value="C" {{ old('accreditation', $school->accreditation) === 'C' ? 'selected' : '' }}>C</option>
                        <option value="A+" {{ old('accreditation', $school->accreditation) === 'A+' ? 'selected' : '' }}>A+</option>
                    </select>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-md-6 mb-3">
                    <label for="logo" class="form-label">Logo Sekolah</label>
                    <input type="file" name="logo" id="logo" class="form-control @error('logo') is-invalid @enderror" accept="image/*" onchange="previewLogo(event)">
                    @error('logo') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    <small class="text-muted">Maksimal 2MB, format: JPEG, PNG, SVG, WebP</small>
                    @if($school->logoUrl())
                        <div class="mt-2" id="logoPreviewWrapper">
                            <img src="{{ $school->logoUrl() }}" id="logoPreview" style="max-height:120px; border-radius:8px; border:1px solid #e2e8f0; padding:4px;">
                        </div>
                    @else
                        <div class="mt-2" id="logoPreviewWrapper" style="display:none;">
                            <img src="" id="logoPreview" style="max-height:120px; border-radius:8px; border:1px solid #e2e8f0; padding:4px;">
                        </div>
                    @endif
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">Background Landing Page</label>
                    <select name="bg_type" class="form-select mb-2">
                        <option value="color" {{ old('bg_type', $school->bg_type) === 'color' ? 'selected' : '' }}>Gradient Warna (default)</option>
                        <option value="image" {{ old('bg_type', $school->bg_type) === 'image' ? 'selected' : '' }}>Gambar</option>
                        <option value="video" {{ old('bg_type', $school->bg_type) === 'video' ? 'selected' : '' }}>Video</option>
                    </select>
                    <input type="file" name="bg_file" class="form-control @error('bg_file') is-invalid @enderror" accept="image/*,video/mp4,video/webm,video/ogg">
                    @error('bg_file') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    <small class="text-muted">Maksimal 10MB. Format gambar: JPEG, PNG, WebP. Format video: MP4, WebM, Ogg.</small>
                    @if($school->bgUrl())
                        <div class="mt-2">
                            @if($school->hasVideoBackground())
                                <video src="{{ $school->bgUrl() }}" style="max-height:100px; border-radius:8px;" muted autoplay loop></video>
                            @else
                                <img src="{{ $school->bgUrl() }}" style="max-height:100px; border-radius:8px; border:1px solid #e2e8f0; padding:2px;">
                            @endif
                        </div>
                    @endif
                </div>
            </div>
            </fieldset>
            @if($readonly)
            <div class="text-muted small">Simpan dinonaktifkan untuk akun kepala sekolah.</div>
            @else
            <button type="submit" class="btn btn-primary"><i class="bi bi-save me-1"></i>Simpan</button>
            @endif
        </form>
    </div>
</div>
@push('scripts')
<script>
function previewLogo(e) {
    var file = e.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(ev) {
            var img = document.getElementById('logoPreview');
            img.src = ev.target.result;
            document.getElementById('logoPreviewWrapper').style.display = 'block';
        };
        reader.readAsDataURL(file);
    }
}

(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var form = document.getElementById('schoolForm');
        if (!form || typeof window.base64Files !== 'function') return;

        form.addEventListener('submit', async function (e) {
            e.preventDefault();
            await window.base64Files(this, [
                { inputName: 'logo', b64Name: 'logo_b64', nameName: 'logo_name' },
                { inputName: 'bg_file', b64Name: 'bg_file_b64', nameName: 'bg_file_name' },
            ]);
            this.submit();
        });
    });
})();
</script>
@endpush
@endsection