@extends('layouts.admin')

@section('title', 'Nova Notícia')

@section('content')
<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12">

    <header class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6 pt-6">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <span class="w-8 h-[2px] bg-brand"></span>
                <span class="font-bold text-[10px] uppercase tracking-[0.4em] text-brand">Gestão de Conteúdo</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold italic tracking-tighter uppercase text-brand">NOVA NOTÍCIA</h1>
            <p class="text-slate-500 font-medium mt-1">Preencha os campos para criar um novo artigo.</p>
        </div>
        <a href="{{ route('admin.news.index') }}" class="inline-flex items-center gap-2 text-brand hover:text-brand-700 font-bold text-xs uppercase tracking-widest bg-brand/5 hover:bg-brand/10 px-5 py-3 rounded-2xl transition-all">
            <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>
    </header>

    <form method="POST" action="{{ route('admin.news.store') }}" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        @csrf

        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white border border-slate-100 rounded-2xl p-6 shadow-sm space-y-5">
                <div>
                    <label for="title" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Título <span class="text-red-400">*</span></label>
                    <input type="text" id="title" name="title" value="{{ old('title') }}" required
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all placeholder:text-slate-300"
                        placeholder="Título do artigo">
                    @error('title') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="slug" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Slug</label>
                    <input type="text" id="slug" name="slug" value="{{ old('slug') }}"
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all placeholder:text-slate-300"
                        placeholder="URL amigável">
                    <p class="text-[10px] text-slate-400 font-medium mt-1">Deixar vazio para auto-gerar</p>
                    @error('slug') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="excerpt" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Resumo</label>
                    <textarea id="excerpt" name="excerpt" rows="3"
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all placeholder:text-slate-300 resize-none"
                        placeholder="Breve descrição do artigo">{{ old('excerpt') }}</textarea>
                    @error('excerpt') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="content" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Conteúdo <span class="text-red-400">*</span></label>
                    <textarea id="content" name="content" rows="10" required
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all placeholder:text-slate-300"
                        placeholder="Escreva o conteúdo do artigo aqui...">{{ old('content') }}</textarea>
                    @error('content') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="category" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Categoria <span class="text-red-400">*</span></label>
                    <input type="text" id="category" name="category" value="{{ old('category') }}" required
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all placeholder:text-slate-300"
                        placeholder="Ex: Institucional, Eventos, Parcerias">
                    @error('category') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="author" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Autor</label>
                    <input type="text" id="author" name="author" value="{{ old('author') }}"
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all placeholder:text-slate-300"
                        placeholder="Nome do autor">
                    @error('author') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white border border-slate-100 rounded-2xl p-6 shadow-sm space-y-5">
                <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Publicação</p>

                <div>
                    <label for="status" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Estado</label>
                    <select id="status" name="status"
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all">
                        <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-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>

                <div>
                    <label for="published_at" class="block text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Data de Publicação</label>
                    <input type="date" id="published_at" name="published_at" value="{{ old('published_at') }}"
                        class="w-full px-4 py-3 rounded-2xl border border-slate-200 bg-white text-slate-900 font-medium text-sm focus:border-brand focus:ring-1 focus:ring-brand/20 outline-none transition-all">
                    @error('published_at') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="bg-white border border-slate-100 rounded-2xl p-6 shadow-sm space-y-5">
                <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Imagem de Capa</p>

                <div>
                    <input type="file" id="image" name="image" accept="image/*"
                        class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-bold file:uppercase file:tracking-wider file:bg-brand/5 file:text-brand hover:file:bg-brand/10 transition-all file:cursor-pointer">
                    @error('image') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <div x-data="{ open: false }" class="bg-white border border-slate-100 rounded-2xl shadow-sm overflow-hidden">
                <button type="button" @click="open = !open" class="w-full flex items-center justify-between p-6 text-left hover:bg-slate-50/50 transition-all">
                    <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Galeria de Fotos</p>
                    <svg class="w-4 h-4 text-slate-400 transition-transform duration-200" :class="open ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m6 9 6 6 6-6"/></svg>
                </button>
                <div x-show="open" x-collapse.duration.200ms x-cloak>
                    <div class="px-6 pb-6 space-y-4">
                        <p class="text-[10px] text-slate-400 font-medium">Seleccione várias fotos para a galeria da notícia.</p>
                        <input type="file" name="gallery[]" multiple accept="image/*"
                            class="w-full text-sm text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-[10px] file:font-bold file:uppercase file:tracking-wider file:bg-brand/5 file:text-brand hover:file:bg-brand/10 transition-all file:cursor-pointer">
                        @error('gallery.*') <p class="text-red-500 text-[10px] font-bold mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
            </div>

            <div class="bg-white border border-slate-100 rounded-2xl p-6 shadow-sm space-y-4">
                <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2">Opções</p>

                <label class="flex items-center gap-3 cursor-pointer group">
                    <input type="hidden" name="featured" value="0">
                    <input type="checkbox" id="featured" name="featured" value="1" {{ old('featured') ? 'checked' : '' }}
                        class="w-4 h-4 rounded border-slate-300 text-brand focus:ring-brand/30 transition-all">
                    <span class="text-xs font-bold text-slate-600 group-hover:text-slate-800 transition-colors">Artigo em Destaque</span>
                </label>
            </div>

            <button type="submit"
                class="w-full bg-brand hover:bg-brand-700 text-white font-bold text-xs uppercase tracking-widest px-6 py-4 rounded-2xl transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5">
                Criar Notícia
            </button>
        </div>
    </form>
</div>
@endsection