@extends('layouts.admin')

@section('title', 'Edit Slide - Admin Panel')

@section('content')
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="text-3xl font-extrabold text-secondary">Edit Slide</h1>
        <a href="{{ route('admin.slides.index') }}" class="inline-flex items-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50">
            Back to Slides
        </a>
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm text-gray-900">
        <form action="{{ route('admin.slides.update', $slide) }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <div>
                <label for="title" class="block text-sm font-medium text-gray-700">Title *</label>
                <input type="text" id="title" name="title" value="{{ old('title', $slide->title) }}" required class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">
                @error('title')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label for="tagline" class="block text-sm font-medium text-gray-700">Tagline</label>
                <input type="text" id="tagline" name="tagline" value="{{ old('tagline', $slide->tagline) }}" placeholder="e.g., Fresh From The Kitchen" class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">
                @error('tagline')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p class="mt-1 text-xs text-gray-500">Small badge text displayed above the title</p>
            </div>

            <div>
                <label for="subtitle" class="block text-sm font-medium text-gray-700">Subtitle</label>
                <textarea id="subtitle" name="subtitle" rows="3" class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">{{ old('subtitle', $slide->subtitle) }}</textarea>
                @error('subtitle')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div>
                <label for="image" class="block text-sm font-medium text-gray-700">Image</label>
                @if($slide->image)
                    <div class="mb-2">
                        <img src="{{ asset('storage/' . $slide->image) }}" alt="{{ $slide->title }}" class="h-32 w-auto rounded border border-gray-200">
                        <p class="mt-1 text-xs text-gray-500">Current image</p>
                    </div>
                @endif
                <input type="file" id="image" name="image" accept="image/*" class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">
                @error('image')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                <p class="mt-1 text-xs text-gray-500">Leave empty to keep current image. Recommended size: 1600x900px. Max file size: 2MB</p>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <div>
                    <label for="button_label" class="block text-sm font-medium text-gray-700">Button Label</label>
                    <input type="text" id="button_label" name="button_label" value="{{ old('button_label', $slide->button_label) }}" class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">
                    @error('button_label')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>

                <div>
                    <label for="button_url" class="block text-sm font-medium text-gray-700">Button URL</label>
                    <input type="text" id="button_url" name="button_url" value="{{ old('button_url', $slide->button_url) }}" placeholder="https://example.com or #" class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">
                    @error('button_url')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                </div>
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <div>
                    <label for="order" class="block text-sm font-medium text-gray-700">Display Order</label>
                    <input type="number" id="order" name="order" value="{{ old('order', $slide->order) }}" min="0" class="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm focus:border-primary focus:outline-none focus:ring-primary">
                    @error('order')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    <p class="mt-1 text-xs text-gray-500">Lower numbers appear first</p>
                </div>

                <div>
                    <label class="flex items-center gap-2 mt-6">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $slide->is_active) ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary">
                        <span class="text-sm font-medium text-gray-700">Active</span>
                    </label>
                    <p class="mt-1 text-xs text-gray-500">Only active slides are displayed on the homepage</p>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 border-t border-gray-200 pt-6">
                <a href="{{ route('admin.slides.index') }}" class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-semibold text-gray-700 shadow-sm transition-colors hover:bg-gray-50">
                    Cancel
                </a>
                <button type="submit" class="rounded-md bg-primary px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-primary-dark">
                    Update Slide
                </button>
            </div>
        </form>
    </div>
@endsection