{{-- resources/views/admin/menu-utama/beranda.blade.php --}}
@extends('admin.layouts.app') 
@section('title', 'Kelola Beranda Publik')
@section('content')
<div class="container-fluid py-4">
    <h4 class="mb-4 fw-bold">Kelola Beranda & Profil Publik</h4>
    @if(session('success')) <div class="alert alert-success border-0 shadow-sm">{{ session('success') }}</div> @endif
    
    <form action="{{ route('admin.beranda.update') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card border-0 shadow-sm h-100 border-top border-primary" style="border-top-width: 4px !important;">
                    <div class="card-header bg-white"><h6 class="mb-0 fw-bold">Teks Sambutan Utama (Hero)</h6></div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Judul Besar</label>
                            <input type="text" name="hero_title" class="form-control fw-bold" value="{{ $beranda?->hero_title ?? '' }}" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Sub-judul / Deskripsi Pendek</label>
                            <textarea name="hero_subtitle" class="form-control" rows="3" required>{{ $beranda?->hero_subtitle ?? '' }}</textarea>
                        </div>
                        <hr>
                        <h6 class="fw-bold mt-4">Statistik Madrasah</h6>
                        <div class="row g-2">
                            <div class="col-4"><label class="form-label small">Siswa</label><input type="text" name="stat_siswa" class="form-control text-center" value="{{ $beranda?->stat_siswa ?? '' }}"></div>
                            <div class="col-4"><label class="form-label small">Guru</label><input type="text" name="stat_guru" class="form-control text-center" value="{{ $beranda?->stat_guru ?? '' }}"></div>
                            <div class="col-4"><label class="form-label small">Lulusan</label><input type="text" name="stat_lulusan" class="form-control text-center" value="{{ $beranda?->stat_lulusan ?? '' }}"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-4">
                <div class="card border-0 shadow-sm h-100 border-top border-success" style="border-top-width: 4px !important;">
                    <div class="card-header bg-white"><h6 class="mb-0 fw-bold">Profil Kepala Madrasah</h6></div>
                    <div class="card-body">
                        <div class="d-flex gap-3 mb-3">
                            <img src="{{ $beranda?->kepsek_foto ? asset('storage/beranda/' . $beranda?->kepsek_foto) : 'https://dummyimage.com/150' }}" class="rounded object-fit-cover border" style="width: 100px; height: 120px;">
                            <div class="w-100">
                                <label class="form-label">Nama Kepala Madrasah</label>
                                <input type="text" name="kepsek_nama" class="form-control mb-2" value="{{ $beranda?->kepsek_nama ?? '' }}">
                                <label class="form-label small">Ubah Foto</label>
                                <input type="file" name="kepsek_foto" class="form-control form-control-sm" accept="image/*">
                            </div>
                        </div>
                        <div class="mb-0">
                            <label class="form-label">Pesan / Sambutan Khusus</label>
                            <textarea name="kepsek_sambutan" class="form-control" rows="4">{{ $beranda?->kepsek_sambutan ?? '' }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-4">
                <div class="card border-0 shadow-sm border-top border-warning" style="border-top-width: 4px !important;">
                    <div class="card-header bg-white"><h6 class="mb-0 fw-bold">Banner / Slider Utama (Carousel)</h6></div>
                    <div class="card-body">
                        <div class="mb-4">
                            <label class="form-label fw-medium">Unggah Gambar Slider Baru (Bisa Lebih Dari Satu)</label>
                            <input type="file" name="hero_images[]" class="form-control" accept="image/*" multiple>
                            <div class="form-text">Rekomendasi ukuran: 1920x1080px (Lanskap). Gambar akan otomatis dikonversi ke WebP.</div>
                        </div>
                        <div class="row row-cols-2 row-cols-md-4 g-3">
                            @if(isset($beranda?->hero_images) && is_array($beranda?->hero_images))
                                @foreach($beranda?->hero_images as $idx => $img)
                                <div class="col">
                                    <div class="position-relative border rounded overflow-hidden">
                                        <img src="{{ asset('storage/beranda/slider/' . $img) }}" class="w-100 object-fit-cover" style="height: 120px;">
                                        <button type="submit" form="del-slider-{{ $idx }}" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1 py-0 px-1"><i class="bi bi-x"></i></button>
                                    </div>
                                </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="card-footer bg-light text-end">
                        <button type="submit" class="btn btn-primary fw-bold px-5"><i class="bi bi-save me-1"></i> Simpan Pengaturan Publik</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    
    @if(isset($beranda?->hero_images) && is_array($beranda?->hero_images))
        @foreach($beranda?->hero_images as $idx => $img)
        <form id="del-slider-{{ $idx }}" action="{{ route('admin.beranda.slider.destroy', $idx) }}" method="POST" class="d-none">@csrf @method('DELETE')</form>
        @endforeach
    @endif
</div>
@endsection