@extends('admin.layouts.app')

@section('title', 'Edit Hero Slide')

@section('content')
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-8">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Edit Hero Slide</h1>
    </div>

    <form action="{{ route('admin.hero.update', $hero) }}" 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="{{ public_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 for="order" class="block text-sm font-medium text-gray-900 mb-2">Order</label>
            <input type="number" name="order" id="order" 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('order', $hero->order) }}" min="0">
            <p class="text-gray-500 text-sm mt-1">Lower numbers appear first in the slider</p>
        </div>

        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-900 mb-2">Status</label>
            <div class="flex items-center space-x-6">
                <label class="flex items-center">
                    <input type="radio" name="is_active" value="1" class="text-orange-500 focus:ring-orange-500" {{ old('is_active', $hero->is_active) == '1' ? 'checked' : '' }}>
                    <span class="ml-2 text-sm text-gray-900">Active (True)</span>
                </label>
                <label class="flex items-center">
                    <input type="radio" name="is_active" value="0" class="text-orange-500 focus:ring-orange-500" {{ old('is_active', $hero->is_active) == '0' ? 'checked' : '' }}>
                    <span class="ml-2 text-sm text-gray-900">Inactive (False)</span>
                </label>
            </div>
        </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 Slide
            </button>
            <a href="{{ route('admin.hero.index') }}" class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-900 rounded-lg transition">
                Cancel
            </a>
        </div>
    </form>
</div>
@endsection