@extends('admin.layouts.app')

@section('title', 'Hero Section')

@section('content')
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-8">
    @if ($hero)
        <form action="{{ route('admin.hero.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="mb-6">
                <label for="title" class="block text-sm font-medium text-gray-900 mb-2">Title *</label>
                <input type="text" name="title" id="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('title') border-red-500 @enderror" value="{{ old('title', $hero->title) }}" required>
                @error('title')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="subtitle" class="block text-sm font-medium text-gray-900 mb-2">Subtitle</label>
                <textarea name="subtitle" id="subtitle" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent @error('subtitle') border-red-500 @enderror">{{ old('subtitle', $hero->subtitle) }}</textarea>
                @error('subtitle')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-2 gap-6 mb-6">
                <div>
                    <label for="cta_text" class="block text-sm font-medium text-gray-900 mb-2">CTA Button Text</label>
                    <input type="text" name="cta_text" id="cta_text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent" value="{{ old('cta_text', $hero->cta_text) }}" placeholder="e.g., Shop Now">
                </div>
                <div>
                    <label for="cta_url" class="block text-sm font-medium text-gray-900 mb-2">CTA Button URL</label>
                    <select name="cta_url" id="cta_url" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-transparent">
                        <option value="">-- Select a Page --</option>
                        @foreach ($pages as $url => $label)
                            <option value="{{ $url }}" {{ old('cta_url', $hero->cta_url) === $url ? 'selected' : '' }}>
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                    @error('cta_url')
                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mb-6">
                <label for="background_image" class="block text-sm font-medium text-gray-900 mb-2">Background Image</label>
                @if ($hero->background_image)
                    <div class="mb-4">
                        <img src="{{ Storage::url($hero->background_image) }}" alt="Hero" class="h-48 w-full object-cover rounded">
                    </div>
                @endif
                <input type="file" name="background_image" id="background_image" class="w-full px-4 py-2 border border-gray-300 rounded-lg" accept="image/*">
                @error('background_image')
                    <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label class="flex items-center">
                    <input type="checkbox" name="is_active" class="rounded" {{ old('is_active', $hero->is_active) ? 'checked' : '' }}>
                    <span class="ml-2 text-sm text-gray-900">Active</span>
                </label>
            </div>

            <div class="flex gap-4">
                <button type="submit" class="px-6 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition">
                    Update Hero Section
                </button>
                <a href="{{ route('admin.dashboard') }}" class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-900 rounded-lg transition">
                    Cancel
                </a>
            </div>
        </form>
    @else
        <p class="text-gray-500">No hero section found. Please contact support.</p>
    @endif
</div>
@endsection