@extends('layouts.admin')

@section('title', 'Novo Slide')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <span class="w-8 h-[2px] bg-brand block mb-2"></span>
        <h1 class="text-3xl font-bold italic tracking-tighter uppercase text-brand">Novo Slide</h1>
        <p class="text-slate-500 font-medium text-sm">Adicionar slide ao banner hero</p>
    </div>
    <a href="{{ route('admin.slides.index') }}" class="border border-slate-200 hover:border-brand text-slate-600 hover:text-brand font-bold text-xs uppercase tracking-widest px-5 py-3 rounded-2xl transition-all flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Voltar
    </a>
</div>

<div class="bg-white border border-slate-100 rounded-2xl shadow-sm p-8">
    <form method="POST" action="{{ route('admin.slides.store') }}" enctype="multipart/form-data" class="max-w-3xl space-y-6">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Título</label>
                <input type="text" name="title" value="{{ old('title') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('title') border-red-300 @enderror" placeholder="Título do slide">
                @error('title') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Eyebrow</label>
                <input type="text" name="eyebrow" value="{{ old('eyebrow') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('eyebrow') border-red-300 @enderror" placeholder="Ex: O supermercado de confiança de Angola">
                @error('eyebrow') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="space-y-2">
            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Descrição</label>
            <textarea name="description" rows="3" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('description') border-red-300 @enderror" placeholder="Descrição do slide">{{ old('description') }}</textarea>
            @error('description') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Texto do Botão Primário</label>
                <input type="text" name="primary_cta_label" value="{{ old('primary_cta_label') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('primary_cta_label') border-red-300 @enderror" placeholder="Ex: Encontrar uma Loja">
                @error('primary_cta_label') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Link Botão Primário</label>
                <input type="url" name="primary_cta_url" value="{{ old('primary_cta_url') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('primary_cta_url') border-red-300 @enderror" placeholder="https://...">
                @error('primary_cta_url') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Texto do Botão Secundário</label>
                <input type="text" name="secondary_cta_label" value="{{ old('secondary_cta_label') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('secondary_cta_label') border-red-300 @enderror" placeholder="Ex: Ver Produtos">
                @error('secondary_cta_label') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Link Botão Secundário</label>
                <input type="url" name="secondary_cta_url" value="{{ old('secondary_cta_url') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('secondary_cta_url') border-red-300 @enderror" placeholder="https://...">
                @error('secondary_cta_url') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="space-y-2">
            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Imagem</label>
            <input type="file" name="image" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition file:mr-3 file:py-2 file:px-4 file:rounded-xl file:border-0 file:bg-brand/5 file:text-brand file:text-xs file:font-bold hover:file:bg-brand/10 @error('image') border-red-300 @enderror">
            @error('image') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Texto Alternativo da Imagem</label>
                <input type="text" name="image_alt" value="{{ old('image_alt') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('image_alt') border-red-300 @enderror" placeholder="Descrição para acessibilidade">
                @error('image_alt') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Cor do Texto</label>
                <input type="text" name="text_color" value="{{ old('text_color', 'text-white') }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('text_color') border-red-300 @enderror" placeholder="Ex: text-white ou #ffffff">
                <p class="text-[10px] text-slate-400 mt-1">Classe Tailwind (ex: text-white, text-gray-900) ou código hexadecimal</p>
                @error('text_color') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Ordem</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('sort_order') border-red-300 @enderror" placeholder="0">
                @error('sort_order') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="flex items-center gap-3">
            <label class="flex items-center gap-3 px-4 py-3 rounded-xl border border-slate-200 cursor-pointer hover:border-brand transition">
                <input type="checkbox" name="is_active" value="1" {{ old('is_active') ? 'checked' : '' }} class="w-4 h-4 rounded border-slate-300 text-brand focus:ring-brand">
                <span class="text-sm font-medium text-slate-600">Slide ativo</span>
            </label>
        </div>

        <div class="flex items-center gap-4 pt-4">
            <button type="submit" class="bg-brand hover:bg-brand-700 text-white font-bold text-xs uppercase tracking-widest px-8 py-3.5 rounded-2xl transition-all hover:-translate-y-0.5 shadow-md">
                Criar Slide
            </button>
            <a href="{{ route('admin.slides.index') }}" class="text-slate-400 hover:text-slate-600 font-bold text-xs uppercase tracking-widest transition">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection