@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 de Formações</span>
        </div>
        <h1 class="text-4xl font-bold text-slate-800 italic tracking-tighter uppercase">EDITAR FORMAÇÃO</h1>
        <p class="text-slate-600 font-medium">Atualize os parâmetros técnicos e pedagógicos da formação existente.</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">Atenção: Corrija os erros abaixo</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.update', $formacao->id) }}" 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
        @method('PUT')

        <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', $formacao->titulo) }}" required 
                    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">
            </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 
                    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">{{ old('descricao', $formacao->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', $formacao->instrutor) }}" 
                    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">
            </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', $formacao->duracao) }}" 
                    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">
            </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', $formacao->preco) }}" step="0.01" 
                    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" 
                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]">{{ old('conteudo', $formacao->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', $formacao->nivel) === 'todos' ? 'selected' : '' }}>Todos os Níveis</option>
                    <option value="iniciante" {{ old('nivel', $formacao->nivel) === 'iniciante' ? 'selected' : '' }}>Iniciante</option>
                    <option value="avancado" {{ old('nivel', $formacao->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', $formacao->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', $formacao->certificado ?? true) ? '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">Imagem de Capa</label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                @if($formacao->imagem)
                    <div class="relative rounded-3xl overflow-hidden border-2 border-slate-100 bg-slate-50 p-2">
                        <img src="{{ asset('storage/' . $formacao->imagem) }}" alt="{{ $formacao->titulo }}" class="w-full h-40 object-cover rounded-2xl">
                        <div class="mt-2 text-center">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest italic">Capa Atual</span>
                        </div>
                    </div>
                @endif
                <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-8 h-8 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-[11px] font-bold text-slate-600 uppercase tracking-tighter">Substituir Imagem</p>
                    </div>
                </div>
            </div>
            <p class="text-[10px] text-slate-400 font-medium mt-3 italic">Mantenha vazio para conservar a imagem atual.</p>
        </div>

        <div>
            <label class="block text-[11px] font-bold uppercase tracking-[0.2em] text-slate-500 mb-3 ml-1">Imagem Hero (Banner do Card)</label>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                @if($formacao->imagem_hero)
                    <div class="relative rounded-3xl overflow-hidden border-2 border-slate-100 bg-slate-50 p-2">
                        <img src="{{ asset('storage/' . $formacao->imagem_hero) }}" alt="Hero" class="w-full h-40 object-cover rounded-2xl">
                        <div class="mt-2 text-center">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest italic">Hero Atual</span>
                        </div>
                    </div>
                @endif
                <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-8 h-8 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-[11px] font-bold text-slate-600 uppercase tracking-tighter">{{ $formacao->imagem_hero ? 'Substituir Hero' : 'Carregar Hero' }}</p>
                    </div>
                </div>
            </div>
            <p class="text-[10px] text-slate-400 font-medium mt-3 italic">Recomendado: 800×500px. Mantenha vazio para conservar a imagem atual.</p>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 pt-8 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">
                Atualizar Dados da 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">
                Voltar
            </a>
        </div>
    </form>
</div>

{{-- Estilos para compatibilidade total de line-clamp --}}
<style>
    .line-clamp-1, .line-clamp-2, .line-clamp-3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
    .line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
    .line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
</style>
@endsection