@extends('layouts.admin')

@section('title', 'Nova Campanha')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-8">
        <span class="w-8 h-[2px] bg-brand block mb-2"></span>
        <h1 class="text-3xl font-bold italic tracking-tighter uppercase text-brand">Nova Campanha</h1>
        <p class="text-slate-500 font-medium text-sm">Criar uma nova campanha promocional</p>
    </div>

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

        <div class="space-y-2">
            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Nome</label>
            <input type="text" name="name" value="{{ old('name') }}" 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('name') border-red-300 @enderror" placeholder="Nome da campanha">
            @error('name') <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">Slug</label>
            <input type="text" name="slug" value="{{ old('slug') }}" 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('slug') border-red-300 @enderror" placeholder="slug-da-campanha">
            <p class="text-[9px] text-slate-400 font-medium">Deixar vazio para gerar automaticamente</p>
            @error('slug') <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">Objetivo</label>
            <textarea name="objective" rows="4" 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('objective') border-red-300 @enderror" placeholder="Objetivo da campanha">{{ old('objective') }}</textarea>
            @error('objective') <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">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="space-y-2">
            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Estado</label>
            <select name="status" 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 bg-white @error('status') border-red-300 @enderror">
                <option value="draft" {{ old('status') === 'draft' ? 'selected' : '' }}>Rascunho</option>
                <option value="published" {{ old('status') === 'published' ? 'selected' : '' }}>Publicado</option>
                <option value="archived" {{ old('status') === 'archived' ? 'selected' : '' }}>Arquivado</option>
            </select>
            @error('status') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-2 gap-4">
            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Início</label>
                <input type="date" name="starts_at" value="{{ old('starts_at') }}" 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('starts_at') border-red-300 @enderror">
                @error('starts_at') <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">Fim</label>
                <input type="date" name="ends_at" value="{{ old('ends_at') }}" 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('ends_at') border-red-300 @enderror">
                @error('ends_at') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        <div class="flex items-center gap-3">
            <input type="checkbox" name="is_pinned" value="1" {{ old('is_pinned') ? 'checked' : '' }} class="w-4 h-4 rounded border-slate-300 text-brand focus:ring-brand">
            <label class="text-xs font-bold text-slate-600">Campanha fixa (pinned)</label>
        </div>

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