@extends('layouts.app')

@section('title', __('formacoes.inscricao_title') . $formacao->titulo . ' | AMD-TOPOGRAFIA, LDA.')

@section('content')
<div class="min-h-screen bg-white text-slate-800 pt-36 pb-24 px-6 md:px-12 relative z-10">
    <div class="max-w-3xl mx-auto">
        
        {{-- Cabeçalho do Formulário --}}
        <div class="mb-12 text-center fade-in-up">
            {{-- span decorativo removido --}}
            <h1 class="text-3xl sm:text-4xl font-bold text-[#06458F] mb-6 uppercase tracking-tight">
                {{ __('formacoes.form_title') }}
            </h1>
            
            <div class="inline-flex flex-col md:flex-row items-center gap-3 bg-slate-50 border border-slate-100 px-6 py-4 rounded-2xl shadow-sm">
                <span class="text-sm font-bold text-slate-700">{{ $formacao->titulo }}</span>
                <span class="hidden md:block h-4 w-px bg-slate-200"></span>
                <span class="text-sm font-bold text-[#06458F]">{{ number_format($formacao->preco, 2, ',', '.') }} Kz</span>
            </div>
        </div>

        {{-- Alertas de Erro --}}
        @if ($errors->any())
            <div class="mb-8 p-6 bg-red-50 border border-red-100 text-red-800 rounded-2xl shadow-sm fade-in">
                <div class="flex items-center gap-3 mb-3">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <strong class="font-bold text-xs uppercase tracking-widest">{{ __('formacoes.form_warning') }}</strong>
                </div>
                <ul class="list-disc list-inside text-xs space-y-1 ml-8 font-medium">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Formulário --}}
        <form action="{{ route('formacoes.inscricao-store', $formacao->id) }}" method="POST" enctype="multipart/form-data" class="space-y-8 fade-in-up">
            @csrf

            {{-- Bloco 1: Dados Pessoais --}}
            <div class="bg-white p-8 md:p-10 rounded-3xl border border-slate-100 shadow-[0_10px_30px_rgba(6,69,143,0.04)]">
                <div class="flex items-center gap-4 mb-8">
                    <div class="w-10 h-10 bg-[#06458F] text-white rounded-xl flex items-center justify-center font-bold text-sm">01</div>
                    <h3 class="text-lg font-bold text-[#06458F] uppercase tracking-tight">{{ __('formacoes.section_personal') }}</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.full_name') }}</label>
                        <input type="text" name="nome_completo" value="{{ old('nome_completo') }}" required class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-slate-800">
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.id_number') }}</label>
                        <input type="text" name="numero_bi" value="{{ old('numero_bi') }}" required maxlength="14" class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-slate-800">
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.gender') }}</label>
                        <select name="sexo" required class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-slate-800 appearance-none">
                            <option value="">{{ __('formacoes.gender_select') }}</option>
                            <option value="Masculino" {{ old('sexo') == 'Masculino' ? 'selected' : '' }}>{{ __('formacoes.gender_male') }}</option>
                            <option value="Feminino" {{ old('sexo') == 'Feminino' ? 'selected' : '' }}>{{ __('formacoes.gender_female') }}</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.birth_date') }}</label>
                        <input type="date" name="data_nascimento" value="{{ old('data_nascimento') }}" required class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-slate-800">
                    </div>
                    
                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.phone') }}</label>
                        <input type="text" name="telemovel" value="{{ old('telemovel') }}" required placeholder="+244" class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth text-slate-800">
                    </div>
                </div>
            </div>

            {{-- Bloco 2: Dados Académicos --}}
            <div class="bg-white p-8 md:p-10 rounded-3xl border border-slate-100 shadow-[0_10px_30px_rgba(6,69,143,0.04)]">
                <div class="flex items-center gap-4 mb-8">
                    <div class="w-10 h-10 bg-[#06458F] text-white rounded-xl flex items-center justify-center font-bold text-sm">02</div>
                    <h3 class="text-lg font-bold text-[#06458F] uppercase tracking-tight">{{ __('formacoes.section_academic') }}</h3>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.academic_level') }}</label>
                        <input type="text" name="nivel_academico" value="{{ old('nivel_academico') }}" required placeholder="{{ __('formacoes.academic_placeholder') }}" class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth">
                    </div>
                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.institution') }}</label>
                        <input type="text" name="instituicao_ensino" value="{{ old('instituicao_ensino') }}" required class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.email') }}</label>
                        <input type="email" name="email" value="{{ old('email') }}" required placeholder="{{ __('formacoes.email_placeholder') }}" class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none transition-smooth">
                    </div>
                </div>
            </div>

            {{-- Bloco 3: Confirmação de Pagamento --}}
            <div class="bg-white p-8 md:p-10 rounded-3xl border border-slate-100 shadow-[0_10px_30px_rgba(6,69,143,0.04)]">
                <div class="flex items-center gap-4 mb-8">
                    <div class="w-10 h-10 bg-[#06458F] text-white rounded-xl flex items-center justify-center font-bold text-sm">03</div>
                    <h3 class="text-lg font-bold text-[#06458F] uppercase tracking-tight">{{ __('formacoes.section_payment') }}</h3>
                </div>

                {{-- Coordenadas Bancárias AMD-TOPOGRAFIA, LDA. (vazias até configurar no admin) --}}
                @if(($empresaConfig->iban_bai ?? '') !== '' || ($empresaConfig->iban_bfa ?? '') !== '')
                <div class="mb-8 p-6 bg-[#06458F] rounded-2xl text-white space-y-3">
                    <p class="text-[9px] font-bold text-[#A9B8C9] uppercase tracking-widest">{{ __('formacoes.bank_details_title') }}</p>
                    @if(($empresaConfig->iban_bai ?? '') !== '')
                    <p class="text-xs font-mono">BANCO BAI: {{ $empresaConfig->iban_bai }}</p>
                    @endif
                    @if(($empresaConfig->iban_bfa ?? '') !== '')
                    <p class="text-xs font-mono">BANCO BFA: {{ $empresaConfig->iban_bfa }}</p>
                    @endif
                    @if(($empresaConfig->titular_bancario ?? '') !== '')
                    <p class="text-[10px] text-white/60">{{ __('formacoes.account_holder') }}: {{ $empresaConfig->titular_bancario }}</p>
                    @endif
                </div>
                @endif

                <div class="grid grid-cols-1 gap-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.payment_modality') }}</label>
                            <select name="modalidade_pagamento" required class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none">
                                <option value="Transferência Bancária">{{ __('formacoes.pay_bank_transfer') }}</option>
                                <option value="Depósito Bancário">{{ __('formacoes.pay_bank_deposit') }}</option>
                                <option value="Multicaixa Express">{{ __('formacoes.pay_multicaixa') }}</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.amount_in_words') }}</label>
                            <input type="text" name="valor_extenso" value="{{ old('valor_extenso') }}" required class="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none">
                        </div>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-widest text-[#636D7D] mb-2">{{ __('formacoes.payment_proof') }}</label>
                        <div class="border-2 border-dashed border-slate-200 rounded-2xl p-10 text-center hover:border-[#06458F] hover:bg-slate-50/50 transition-all cursor-pointer group" id="dropZone">
                            <input type="file" name="comprovativo_pagamento" id="fileInput" class="hidden" required>
                            <svg class="w-10 h-10 text-[#06458F] mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <p id="fileName" class="text-xs font-bold uppercase text-slate-500">{{ __('formacoes.select_file') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Declaração de Termos --}}
            <div class="px-4">
                <label class="flex items-center gap-4 cursor-pointer group">
                    <input type="checkbox" name="termos" required class="w-5 h-5 accent-[#06458F] rounded">
                    <span class="text-xs font-semibold text-slate-600 uppercase tracking-tighter">{{ __('formacoes.terms_declaration') }}</span>
                </label>
            </div>

            {{-- Ação Principal --}}
            <button type="submit" class="w-full bg-[#06458F] hover:bg-[#0A529F] text-white font-bold py-5 rounded-2xl shadow-lg transition-smooth uppercase tracking-widest text-sm">
                {{ __('formacoes.submit_btn') }}
            </button>
        </form>
    </div>
</div>

<script>
    const dz = document.getElementById('dropZone');
    const fi = document.getElementById('fileInput');
    const fn = document.getElementById('fileName');
    const fileSelectedText = @json(__('formacoes.file_selected'));

    dz.onclick = () => fi.click();
    fi.onchange = () => {
        if (fi.files.length > 0) {
            fn.innerText = fileSelectedText + fi.files[0].name.toUpperCase();
            fn.classList.add('text-[#06458F]', 'font-bold');
            dz.classList.add('bg-slate-50', 'border-[#06458F]');
        }
    };
</script>
@endsection