@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

    {{-- CORRE��O: Usando a rota de cursos e passando o objeto corretamente --}}
    <form action="{{ route('admin.cursos.update', $curso) }}" 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', $curso->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', $curso->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', $curso->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_total" value="{{ old('duracao_total', $curso->duracao_total) }}" 
                    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', $curso->preco) }}" step="0.01" 
                    class="w-full bg-slate-50 border-2 border-slate-200 pl-12 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">Imagem de Capa</label>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
                @if(!empty($curso->imagem_capa))
                    <div class="relative group rounded-3xl overflow-hidden border-2 border-slate-100 bg-slate-50 p-2">
                        <img src="{{ asset('storage/' . $curso->imagem_capa) }}" alt="{{ $curso->titulo }}" class="w-full h-40 object-cover rounded-2xl">
                    </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-red-400 hover:bg-white transition-all cursor-pointer">
                    <input type="file" name="imagem_capa" 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>
        </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">
                Atualizar Dados da Forma��o
            </button>
                <a href="{{ route('admin.cursos.index') }}" 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">
                Voltar
            </a>
        </div>
    </form>
</div>

<style>
    /* Suporte para line-clamp em navegadores que n�o usam Tailwind puramente */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-clamp: 2;
    }
</style>
@endsection