@extends('backend.layout.main')

@php
    use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
    <x-admin.header pageTitle="Home Page" currentPage="Home Page"></x-admin.header>

    <div class="main-content-inner">
        <div class="row justify-content-center">
            <div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 col-10 col-xs-12">
                <div class="row">
                    <div class="col-12 mt-5">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="header-title">Home Page Content</h4>

                                <x-form :action="route('home-page.store')" :method="'POST'" enctype="multipart/form-data">
                                    <div class="form-group">
                                        <x-input.label for="hero_title">Hero Title</x-input.label>
                                        <x-input.text type="text" class="form-control" id="hero_title"
                                            :value="old('hero_title', $data->hero_title)" name="hero_title" placeholder="Hero title" />
                                    </div>

                                    <div class="form-group">
                                        <x-input.label for="hero_subtitle">Hero Subtitle</x-input.label>
                                        <x-input.text type="text" class="form-control" id="hero_subtitle"
                                            :value="old('hero_subtitle', $data->hero_subtitle)" name="hero_subtitle" placeholder="Hero subtitle" />
                                    </div>

                                    <div class="form-group">
                                        <x-input.label for="legal_recognition_text">Legal Recognition Text</x-input.label>
                                        <small class="form-text text-muted d-block mb-1">Plain text only.</small>
                                        <textarea name="legal_recognition_text" id="legal_recognition_text" class="form-control" rows="2" aria-label="Legal recognition">{{ old('legal_recognition_text', $data->legal_recognition_text) }}</textarea>
                                        <small class="form-text text-muted">e.g. Organisation agréée par ordonnance ministérielle N° 550/1715...</small>
                                    </div>

                                    <div class="form-group">
                                        <x-input.label for="intro_text">Introduction (Hero Section Body)</x-input.label>
                                        <small class="form-text text-muted d-block mb-1">Plain text only.</small>
                                        <textarea name="intro_text" id="intro_text" class="form-control" rows="4" aria-label="Introduction">{{ old('intro_text', $data->intro_text) }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <x-input.label for="intro_image">Introduction Image (370×380)</x-input.label>
                                        <input type="file" class="form-control-file" id="intro_image" name="intro_image" accept="image/*">
                                        @error('intro_image')
                                            <x-input.error class="form-text text-danger">{{ $message }}</x-input.error>
                                        @enderror
                                        @if($data->intro_image)
                                            <div class="mt-2">
                                                <img src="{{ asset('storage/' . $data->intro_image) }}" alt="Current image" style="max-width: 300px; max-height: 300px; object-fit: cover;">
                                                <p class="text-muted small mt-1">Current image</p>
                                            </div>
                                        @endif
                                        <small class="form-text text-muted">Right side of welcome section. Exact 370×380 px. If none provided, placehold.co is used on the frontend.</small>
                                    </div>

                                    <div class="form-group">
                                        <x-input.label for="mission_summary">Our Mission (Summary)</x-input.label>
                                        <small class="form-text text-muted d-block mb-1">Plain text only. (Not shown on home; About section uses Vision/Mission/Values from About Us.)</small>
                                        <textarea name="mission_summary" id="mission_summary" class="form-control" rows="3" aria-label="Mission summary">{{ old('mission_summary', $data->mission_summary) }}</textarea>
                                    </div>

                                    <div class="form-group">
                                        <x-input.label for="key_areas">Key Areas of Intervention (one item per line)</x-input.label>
                                        <textarea name="key_areas" id="key_areas" class="form-control" aria-label="With textarea">{{ old('key_areas', is_array($data->key_areas) ? implode("\n", $data->key_areas) : '') }}</textarea>
                                    </div>

                                    <div class="d-flex justify-content-end mr-0 mt-4">
                                        <x-admin.submit type="submit" color="primary">Save</x-admin.submit>
                                    </div>
                                </x-form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection