@extends('admin.layouts.app')
@section('title', 'New Slider')
@section('page-title', 'New Slider')

@section('content')
<div x-data="sliderForm()">
    <form method="POST" action="{{ route('admin.sliders.store') }}" x-ref="form" x-on:submit.prevent="submit($event)">
        @csrf
        <div class="max-w-xl bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" required placeholder="e.g. Homepage Hero"
                       class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Slug</label>
                <input type="text" name="slug" placeholder="auto-generated from name"
                       class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono">
            </div>

            <div x-show="message" x-text="message"
                 :class="saved ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300'"
                 class="text-xs p-2 rounded border" style="display:none"></div>

            <div class="flex gap-3 pt-2">
                <button type="submit" :disabled="saving"
                        class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                    <svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                    </svg>
                    <span x-text="saving ? 'Creating...' : 'Create Slider'"></span>
                </button>
                <a href="{{ route('admin.sliders.index') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">Cancel</a>
            </div>
        </div>
    </form>
</div>
@endsection
