@extends('admin.master')

@section('content')
<div class="mx-auto max-w-5xl">
    <div class="bg-white border border-gray-300 rounded-md p-4 sm:p-5">
        <div class="mb-5">
            <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">Edit About Section</h2>
            <p class="mt-1 text-sm text-gray-600">Update about page content</p>
        </div>

        <form action="{{ route('admin.about-sections.update', $section->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 gap-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Hero Title <span class="text-red-500">*</span></label>
                    <input type="text" name="hero_title" value="{{ old('hero_title', $section->hero_title) }}" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter hero title">
                    @error('hero_title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Hero Description</label>
                    <textarea name="hero_description" rows="4" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter hero description">{{ old('hero_description', $section->hero_description) }}</textarea>
                    @error('hero_description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Hero Image</label>
                    <input type="file" name="hero_image" class="w-full border border-gray-300 rounded px-4 py-2 bg-white">
                    @if($section->hero_image)
                        <img src="{{ asset($section->hero_image) }}"
                             alt="hero image"
                             class="mt-2 h-20 w-20 rounded border border-gray-300 object-contain bg-white p-1">
                    @endif
                    @error('hero_image')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Mission Title</label>
                    <input type="text" name="mission_title" value="{{ old('mission_title', $section->mission_title) }}" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter mission title">
                    @error('mission_title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Mission Description</label>
                    <textarea name="mission_description" rows="4" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter mission description">{{ old('mission_description', $section->mission_description) }}</textarea>
                    @error('mission_description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Values Title</label>
                    <input type="text" name="values_title" value="{{ old('values_title', $section->values_title) }}" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter values title">
                    @error('values_title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Story Title</label>
                    <input type="text" name="story_title" value="{{ old('story_title', $section->story_title) }}" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter story title">
                    @error('story_title')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Story Description</label>
                    <textarea name="story_description" rows="4" class="w-full border border-gray-300 rounded px-4 py-2" placeholder="Enter story description">{{ old('story_description', $section->story_description) }}</textarea>
                    @error('story_description')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" id="is_active" value="1" {{ old('is_active', $section->is_active) ? 'checked' : '' }} class="h-4 w-4">
                    <label for="is_active" class="text-sm font-medium text-gray-700">Active</label>
                </div>
            </div>

            <div class="mt-6 flex flex-col sm:flex-row gap-3">
                <button type="submit" class="bg-black text-white px-5 py-2 rounded">Update</button>
                <a href="{{ route('admin.about-sections.index') }}" class="bg-gray-200 text-gray-800 px-5 py-2 rounded text-center">Back</a>
            </div>
        </form>
    </div>
</div>
@endsection