@extends('admin.layouts.app')

@section('title', 'Create 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">Create Hero Slide</h1>
    </div>

    <form action="{{ route('admin.hero.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <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') }}" 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') }}</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') }}" 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') === $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>
            <input type="file" name="background_image" id="background_image" class="w-full px-4 py-2 border border-gray-300 rounded-lg @error('background_image') border-red-500 @enderror" accept="image/*" required>
            @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', 0) }}" 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', '1') == '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') == '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">
                Create 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