@extends('layouts.admin')

@section('content')
<div class="fixed inset-0 pointer-events-none z-0 overflow-hidden">
    <div class="absolute -top-[5%] -right-[5%] w-[30%] h-[30%] bg-blue-50 blur-[100px] rounded-full opacity-60"></div>
</div>

<div class="relative z-10 w-full max-w-4xl mx-auto px-4 py-8">
    <header class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="w-8 h-[2px] bg-[#06458F]"></span>
            <span class="text-[#06458F] font-bold text-[10px] uppercase tracking-[0.4em]">Gestão Académica</span>
        </div>
        <h1 class="text-4xl font-bold text-slate-800 italic tracking-tighter uppercase">NOVA FORMAÇÃO</h1>
        <p class="text-slate-600 font-medium">Configure os detalhes técnicos e pedagógicos do novo curso.</p>
    </header>

    @if($errors->any())
        <div class="mb-8 p-5 bg-blue-50 border-l-4 border-[#06458F] rounded-r-2xl shadow-sm">
            <div class="flex items-center gap-3 mb-2 text-[#06458F]">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>
                <span class="font-bold text-xs uppercase tracking-widest">Erros de Validação</span>
            </div>
            <ul class="space-y-1">
                @foreach($errors->all() as $error)
                    <li class="text-[#06458F] text-sm font-bold leading-relaxed">• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.formacoes.store') }}" method="POST" enctype="multipart/form-data" 
        class="bg-white border border-slate-200 p-8 md:p-12 rounded-[2.5rem] shadow-[0_20px_60px_rgba(0,0,0,0.06)] space-y-8">
        @csrf

        <div class="grid grid-cols-1 gap-8">
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Título da Formação</label>
                <input type="text" name="titulo" value="{{ old('titulo') }}" required 
                    placeholder="Ex: Topografia Automatizada com RTK"
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>

            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Descrição Curta (Resumo)</label>
                <textarea name="descricao" required 
                    placeholder="Breve introdução que aparece na listagem..."
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-medium min-h-[100px] resize-none placeholder:text-slate-400">{{ old('descricao') }}</textarea>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Instrutor / Especialista</label>
                <input type="text" name="instrutor" value="{{ old('instrutor') }}" 
                    placeholder="Nome do formador responsável"
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Duração Estimada</label>
                <input type="text" name="duracao" value="{{ old('duracao') }}" placeholder="Ex: 40 Horas" 
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>
        </div>

        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Preço da Inscrição (AKZ)</label>
            <div class="relative flex items-center">
                <span class="absolute left-5 font-bold text-slate-500">Kz</span>
                <input type="number" name="preco" value="{{ old('preco') }}" step="0.01" 
                    placeholder="0.00"
                    class="w-full bg-slate-50 border-2 border-slate-200 pl-14 pr-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold text-xl">
            </div>
        </div>

        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Conteúdo Programático Completo</label>
            <textarea name="conteudo" 
                placeholder="Detalhe os módulos, pré-requisitos e certificação..."
                class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-medium min-h-[180px] placeholder:text-slate-400">{{ old('conteudo') }}</textarea>
        </div>

        {{-- METADADOS --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Nível Técnico</label>
                <select name="nivel" class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold cursor-pointer">
                    <option value="todos" {{ old('nivel', 'todos') === 'todos' ? 'selected' : '' }}>Todos os Níveis</option>
                    <option value="iniciante" {{ old('nivel') === 'iniciante' ? 'selected' : '' }}>Iniciante</option>
                    <option value="avancado" {{ old('nivel') === 'avancado' ? 'selected' : '' }}>Avançado</option>
                </select>
            </div>
            <div>
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Modalidade</label>
                <input type="text" name="modalidade" value="{{ old('modalidade', 'Presencial') }}"
                    placeholder="Ex: Presencial, Online, Híbrido"
                    class="w-full bg-slate-50 border-2 border-slate-200 px-5 py-4 rounded-2xl focus:border-[#06458F] focus:bg-white outline-none transition-all duration-300 text-slate-900 font-bold placeholder:text-slate-400">
            </div>
            <div class="flex flex-col justify-center">
                <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Certificado</label>
                <label class="flex items-center gap-3 cursor-pointer pt-2">
                    <div class="relative">
                        <input type="checkbox" name="certificado" value="1" {{ old('certificado', '1') ? 'checked' : '' }}
                            class="sr-only peer">
                        <div class="w-11 h-6 bg-slate-200 rounded-full peer peer-checked:bg-[#06458F] transition-colors duration-200"></div>
                        <div class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow transition-transform duration-200 peer-checked:translate-x-5"></div>
                    </div>
                    <span class="text-sm font-bold text-slate-600">Emite Certificado</span>
                </label>
            </div>
        </div>

        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Capa da Formação</label>
            <div class="group relative w-full bg-slate-50 border-2 border-dashed border-slate-300 p-8 rounded-3xl text-center hover:border-[#06458F] hover:bg-white transition-all cursor-pointer">
                <input type="file" name="imagem" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                <div class="space-y-2">
                    <svg class="w-10 h-10 text-slate-400 mx-auto group-hover:text-[#06458F] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    <p class="text-sm font-bold text-slate-600 uppercase tracking-widest group-hover:text-slate-900">Clique para carregar imagem</p>
                    <p class="text-[10px] text-slate-400 font-medium italic">Formatos aceites: JPEG, PNG ou WebP (Máx. 2MB)</p>
                </div>
            </div>
        </div>

        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Imagem Hero (Banner da Formação)</label>
            <div class="group relative w-full bg-slate-50 border-2 border-dashed border-slate-300 p-8 rounded-3xl text-center hover:border-[#06458F] hover:bg-white transition-all cursor-pointer">
                <input type="file" name="imagem_hero" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer">
                <div class="space-y-2">
                    <svg class="w-10 h-10 text-slate-400 mx-auto group-hover:text-[#06458F] transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    <p class="text-sm font-bold text-slate-600 uppercase tracking-widest group-hover:text-slate-900">Imagem de destaque do card</p>
                    <p class="text-[10px] text-slate-400 font-medium italic">Recomendado: 800×500px, JPEG/PNG/WebP (Máx. 2MB)</p>
                </div>
            </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t border-slate-100">
            <button type="submit" class="flex-[2] bg-[#06458F] hover:bg-[#0a2348] text-white font-bold py-5 px-8 rounded-2xl shadow-lg shadow-blue-600/20 transition-all active:scale-[0.98] uppercase tracking-[0.1em] text-xs cursor-pointer">
                Gravar Formação
            </button>
            <a href="{{ route('admin.formacoes') }}" class="flex-1 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold py-5 px-8 rounded-2xl transition-all text-center uppercase tracking-[0.1em] text-xs cursor-pointer">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection