@extends('layouts.app')

@section('subtitle', 'Edit Banner Portal')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Edit Banner Portal" 
        subtitle="Ubah konten utama, judul banner, subjudul, dan gambar halaman depan."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Informasi Desa' => route('informasi-desa.index'),
            'Banner Portal' => route('informasi-desa.edit-banner')
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('informasi-desa.index') }}" class="btn btn-light border mr-2">
                <i class="fas fa-arrow-left mr-1"></i> Batal
            </a>
        </x-slot>
    </x-page-header>

    <div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; background: #ffffff;">
        <div class="card-body p-4">
            <form action="{{ route('informasi-desa.update-banner') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">
                    <!-- Column Left: Form Fields -->
                    <div class="col-lg-8">
                        <div class="form-group mb-3">
                            <label for="hero_badge" class="font-weight-bold text-secondary text-sm">Badge Hero <span class="text-danger">*</span></label>
                            <input type="text" name="hero_badge" id="hero_badge" class="form-control @error('hero_badge') is-invalid @enderror" value="{{ old('hero_badge', $informasi->hero_badge) }}" placeholder="Contoh: Layanan Online 24/7 Mandiri" required style="border-radius: 8px;">
                            @error('hero_badge')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="hero_title" class="font-weight-bold text-secondary text-sm">Judul Hero (Title) <span class="text-danger">*</span></label>
                            <input type="text" name="hero_title" id="hero_title" class="form-control @error('hero_title') is-invalid @enderror" value="{{ old('hero_title', $informasi->hero_title) }}" placeholder="Contoh: Portal Pelayanan & Informasi Administrasi Desa" required style="border-radius: 8px;">
                            @error('hero_title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="hero_description" class="font-weight-bold text-secondary text-sm">Deskripsi Hero (Subtitle) <span class="text-danger">*</span></label>
                            <textarea name="hero_description" id="hero_description" rows="3" class="form-control @error('hero_description') is-invalid @enderror" placeholder="Tulis deskripsi singkat banner hero..." required style="border-radius: 8px; resize: vertical;">{{ old('hero_description', $informasi->hero_description) }}</textarea>
                            @error('hero_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group mb-3">
                                <label for="hero_btn1_text" class="font-weight-bold text-secondary text-sm">Teks Tombol 1 <span class="text-danger">*</span></label>
                                <input type="text" name="hero_btn1_text" id="hero_btn1_text" class="form-control @error('hero_btn1_text') is-invalid @enderror" value="{{ old('hero_btn1_text', $informasi->hero_btn1_text) }}" placeholder="Contoh: Ajukan Surat" required style="border-radius: 8px;">
                                @error('hero_btn1_text')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 form-group mb-3">
                                <label for="hero_btn1_url" class="font-weight-bold text-secondary text-sm">URL/Rute Tombol 1 <span class="text-danger">*</span></label>
                                <input type="text" name="hero_btn1_url" id="hero_btn1_url" class="form-control @error('hero_btn1_url') is-invalid @enderror" value="{{ old('hero_btn1_url', $informasi->hero_btn1_url) }}" placeholder="Contoh: warga.login" required style="border-radius: 8px;">
                                @error('hero_btn1_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 form-group mb-3">
                                <label for="hero_btn2_text" class="font-weight-bold text-secondary text-sm">Teks Tombol 2 <span class="text-danger">*</span></label>
                                <input type="text" name="hero_btn2_text" id="hero_btn2_text" class="form-control @error('hero_btn2_text') is-invalid @enderror" value="{{ old('hero_btn2_text', $informasi->hero_btn2_text) }}" placeholder="Contoh: Lihat Jenis Layanan" required style="border-radius: 8px;">
                                @error('hero_btn2_text')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 form-group mb-3">
                                <label for="hero_btn2_url" class="font-weight-bold text-secondary text-sm">URL/Rute Tombol 2 <span class="text-danger">*</span></label>
                                <input type="text" name="hero_btn2_url" id="hero_btn2_url" class="form-control @error('hero_btn2_url') is-invalid @enderror" value="{{ old('hero_btn2_url', $informasi->hero_btn2_url) }}" placeholder="Contoh: #layanan" required style="border-radius: 8px;">
                                @error('hero_btn2_url')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Column Right: Hero Image Preview -->
                    <div class="col-lg-4 text-center border-left" style="border-color: #f1f5f9 !important;">
                        <div class="px-3">
                            <span class="text-xs font-weight-bold text-uppercase text-muted d-block mb-3">Gambar Banner Hero</span>
                            
                            <div class="d-inline-block p-2 border rounded-lg bg-light shadow-xs mb-3" style="width: 100%; height: 180px; overflow: hidden; border-radius: 12px;">
                                <img id="heroImagePreview" src="{{ $informasi->hero_image ? asset('storage/' . $informasi->hero_image) : asset('images/hero-coastal-jetty.png') }}" alt="Hero Preview" class="img-fluid rounded" style="height: 100%; width: 100%; object-fit: cover;">
                            </div>

                            <div class="custom-file text-left mb-2">
                                <input type="file" name="hero_image" class="custom-file-input @error('hero_image') is-invalid @enderror" id="heroImageInput" accept="image/png, image/jpg, image/jpeg, image/webp" onchange="previewFile(event)">
                                <label class="custom-file-label text-sm" for="heroImageInput">Pilih gambar hero...</label>
                                @error('hero_image')
                                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                            <small class="text-xs text-muted d-block">Maksimal: 2 MB. Format: JPG, PNG, WEBP.</small>
                        </div>
                    </div>
                </div>

                <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                <!-- Submit Buttons -->
                <div class="text-right">
                    <a href="{{ route('informasi-desa.index') }}" class="btn btn-light border mr-2">Batal</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script>
    function previewFile(event) {
        var reader = new FileReader();
        reader.onload = function(){
            var output = document.getElementById('heroImagePreview');
            output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);

        var fileName = event.target.files[0].name;
        var label = event.target.nextElementSibling;
        label.innerText = fileName;
    }
</script>
@endpush