@extends('layouts.public')
@section('title', $type === 'update' ? 'Atualização Anual' : 'Nova Admissão')

@section('head')
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
@endsection

@section('content')
    <h1>{{ $type === 'update' ? 'Atualização Anual de Dados' : 'Nova Admissão — Dados Pessoais' }}</h1>
    <p class="subtitle">Preencha todos os campos obrigatórios e confirme a veracidade dos dados.</p>

    <form action="{{ route('submission.submit', $type) }}" method="POST" enctype="multipart/form-data" id="submissionForm">
        @csrf

        {{-- IDENTIFICAÇÃO --}}
        <div class="card">
            <h2>Identificação</h2>
            <div class="form-group">
                <label class="form-label">Nome completo <span class="required">*</span></label>
                <input type="text" name="nome_completo" class="form-control" value="{{ old('nome_completo') }}"
                    minlength="3" maxlength="255" required>
                @error('nome_completo') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label class="form-label">NIF <span class="required">*</span></label>
                <input type="text" name="nif" class="form-control" value="{{ old('nif') }}" maxlength="9" pattern="\d{9}"
                    inputmode="numeric" required>
                @error('nif') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label class="form-label">Data de nascimento <span class="required">*</span></label>
                <input type="date" name="data_nascimento" class="form-control" value="{{ old('data_nascimento') }}"
                    required>
                @error('data_nascimento') <div class="form-error">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- CONTATO --}}
        <div class="card">
            <h2>Contato</h2>
            <div class="form-group">
                <label class="form-label">Email <span class="required">*</span></label>
                <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
                @error('email') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label class="form-label">Telemóvel <span class="required">*</span></label>
                <input type="tel" name="telemovel" class="form-control" value="{{ old('telemovel') }}"
                    inputmode="tel" pattern="[\d\s+]{9,20}" placeholder="912 345 678" required>
                @error('telemovel') <div class="form-error">{{ $message }}</div> @enderror
            </div>

            <div class="section-divider">
                <h3>Contato de emergência</h3>
            </div>
            <div class="form-group">
                <label class="form-label">Nome <span class="required">*</span></label>
                <input type="text" name="contacto_emergencia_nome" class="form-control"
                    value="{{ old('contacto_emergencia_nome') }}" minlength="3" maxlength="255" required>
                @error('contacto_emergencia_nome') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label class="form-label">Relação <span class="required">*</span></label>
                <input type="text" name="contacto_emergencia_relacao" class="form-control"
                    value="{{ old('contacto_emergencia_relacao') }}" placeholder="Ex: Cônjuge, Pai/Mãe, Irmão(ã)..."
                    minlength="2" maxlength="100" required>
                @error('contacto_emergencia_relacao') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label class="form-label">Telefone <span class="required">*</span></label>
                <input type="tel" name="contacto_emergencia_telefone" class="form-control"
                    value="{{ old('contacto_emergencia_telefone') }}" inputmode="tel" pattern="[\d\s+]{9,20}"
                    placeholder="912 345 678" required>
                @error('contacto_emergencia_telefone') <div class="form-error">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- MORADA --}}
        <div class="card">
            <h2>Morada</h2>
            <div class="form-group">
                <label class="form-label">Morada completa <span class="required">*</span></label>
                <textarea name="morada_original" class="form-control" rows="3"
                    placeholder="Rua, número, andar, código postal e localidade"
                    required>{{ old('morada_original') }}</textarea>
                @error('morada_original') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            @if($type === 'update')
                <div class="form-group">
                    <label class="form-label">Mudou de morada desde a última submissão? <span class="required">*</span></label>
                    <select name="mudou_morada" class="form-control" id="mudouMorada" required>
                        <option value="0" {{ old('mudou_morada') == '0' ? 'selected' : '' }}>Não</option>
                        <option value="1" {{ old('mudou_morada') == '1' ? 'selected' : '' }}>Sim</option>
                    </select>
                </div>
                <div class="form-group" id="comprovantivoGroup" style="{{ old('mudou_morada') == '1' ? '' : 'display:none;' }}">
                    <label class="form-label">Comprovativo de morada <span class="required">*</span></label>
                    <div class="upload-area" onclick="document.getElementById('comprovativo').click()">
                        <div class="upload-icon">📎</div>
                        <div class="upload-text" id="uploadText">Clique para selecionar ficheiro (PDF, JPG ou PNG — máx. 8 MB)
                        </div>
                        <input type="file" name="comprovativo" id="comprovativo" accept=".pdf,.jpg,.jpeg,.png">
                    </div>
                    @error('comprovativo') <div class="form-error">{{ $message }}</div> @enderror
                </div>
            @endif
        </div>

        {{-- FISCAL/FAMILIAR --}}
        <div class="card">
            <h2>Dados fiscais e familiares</h2>
            <div class="form-group">
                <label class="form-label">Estado civil <span class="required">*</span></label>
                <select name="estado_civil" class="form-control" required>
                    <option value="">Selecionar...</option>
                    @foreach($estados_civis as $key => $label)
                        <option value="{{ $key }}" {{ old('estado_civil') == $key ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                @error('estado_civil') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group">
                <label class="form-label">N.º de dependentes <span class="required">*</span></label>
                <input type="number" name="nr_dependentes" class="form-control" value="{{ old('nr_dependentes', 0) }}"
                    min="0" max="20" required>
                @error('nr_dependentes') <div class="form-error">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- HABILITAÇÕES --}}
        <div class="card">
            <h2>Habilitações literárias</h2>
            <div class="form-group">
                <label class="form-label">Habilitações <span class="required">*</span></label>
                <select name="habilitacoes_literarias" class="form-control" id="habilitacoesLiterarias" required>
                    <option value="">Selecionar...</option>
                    @foreach($habilitacoes as $key => $label)
                        <option value="{{ $key }}" {{ old('habilitacoes_literarias') == $key ? 'selected' : '' }}>{{ $label }}
                        </option>
                    @endforeach
                </select>
                @error('habilitacoes_literarias') <div class="form-error">{{ $message }}</div> @enderror
            </div>
            <div class="form-group" id="habilitacoesOutroGroup"
                style="{{ old('habilitacoes_literarias') == 'outro' ? '' : 'display:none;' }}">
                <label class="form-label">Especifique <span class="required">*</span></label>
                <input type="text" name="habilitacoes_literarias_outro" class="form-control"
                    value="{{ old('habilitacoes_literarias_outro') }}" maxlength="150" minlength="2"
                    placeholder="Ex: Curso profissional de...">
                @error('habilitacoes_literarias_outro') <div class="form-error">{{ $message }}</div> @enderror
            </div>
        </div>

        {{-- DECLARAÇÃO --}}
        <div class="card">
            <h2>Declaração</h2>
            <div class="form-check">
                <input type="checkbox" name="declaracao_verdade" id="declaracao" value="1" {{ old('declaracao_verdade') ? 'checked' : '' }} required>
                <label for="declaracao">Confirmo que os dados introduzidos são verdadeiros e atuais. <span
                        class="required">*</span></label>
            </div>
            @error('declaracao_verdade') <div class="form-error">{{ $message }}</div> @enderror

            <p style="font-size: 0.8rem; color: var(--muted); margin-top: 1rem;">
                Os dados recolhidos são tratados pela Segunor — Segurança Privada, Lda. para fins de gestão de recursos
                humanos,
                em conformidade com o RGPD.
                <a href="{{ route('legal') }}" style="color: var(--gold);">Consultar política de privacidade</a>.
            </p>
        </div>

        {{-- CAPTCHA --}}
        <div style="margin-bottom: 1.5rem;">
            <div class="cf-turnstile" data-sitekey="{{ $turnstile_key }}" data-theme="dark"></div>
            @error('captcha') <div class="form-error">{{ $message }}</div> @enderror
        </div>

        <button type="submit" class="btn btn-primary btn-block" id="submitBtn">
            Submeter dados
        </button>
    </form>
@endsection

@section('scripts')
    <script>
        var mudouMorada = document.getElementById('mudouMorada');
        if (mudouMorada) {
            mudouMorada.addEventListener('change', function () {
                document.getElementById('comprovantivoGroup').style.display = this.value === '1' ? '' : 'none';
            });
        }

        var habilitacoes = document.getElementById('habilitacoesLiterarias');
        if (habilitacoes) {
            var toggleHabilitacoesOutro = function () {
                var grupo = document.getElementById('habilitacoesOutroGroup');
                var campo = grupo.querySelector('input[name="habilitacoes_literarias_outro"]');
                var isOutro = habilitacoes.value === 'outro';
                grupo.style.display = isOutro ? '' : 'none';
                campo.required = isOutro;
                if (!isOutro) campo.value = '';
            };
            habilitacoes.addEventListener('change', toggleHabilitacoesOutro);
            toggleHabilitacoesOutro();
        }

        var comprovativo = document.getElementById('comprovativo');
        if (comprovativo) {
            comprovativo.addEventListener('change', function () {
                var name = this.files[0] ? this.files[0].name : 'Clique para selecionar ficheiro';
                document.getElementById('uploadText').textContent = name;
            });
        }

        document.getElementById('submissionForm').addEventListener('submit', function () {
            document.getElementById('submitBtn').disabled = true;
            document.getElementById('submitBtn').textContent = 'A submeter...';
        });
    </script>
@endsection