@extends('layouts.app')

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f3f4f6;
    }
</style>

@section('content')
    <div class="py-16">
        <div class="max-w-5xl mx-auto bg-white rounded-lg shadow-lg p-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 border-b pb-6 mb-8">
                <img class="max-w-[140px]" src="/assets/loghi/iul.jpg" alt="Logo IUL">
                <div class="text-right">
                    <p class="text-sm text-gray-500">Verifica collaborazione occasionale</p>
                    <h1 class="text-2xl font-semibold text-red-700">Dichiarazione soglia 5.000 €</h1>
                    <p class="text-gray-600">Anno fiscale {{ $notula->reference_year }}</p>
                </div>
            </div>

            @if ($errors->any())
                <div class="mb-6 rounded-md bg-red-50 border border-red-200 p-4 text-sm text-red-700">
                    <p class="font-medium">Controlla i dati inseriti:</p>
                    <ul class="mt-2 space-y-1 list-disc list-inside">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form method="POST" action="{{ route('notule.verify.submit', ['token' => $notula->token]) }}" class="space-y-10">
                @csrf

                @php
                    // Converti ID provincia in sigla se necessario
                    $provinciaValue = $snapshot['provincia_residenza'] ?? $anagrafica?->provincia_residenza ?? '';
                    if (is_numeric($provinciaValue) && $provinciaValue) {
                        $provincia = \App\Models\Provincia::find($provinciaValue);
                        $provinciaValue = $provincia?->abbreviazione ?? $provinciaValue;
                    }
                @endphp

                <section>
                    <h2 class="text-xl font-semibold text-gray-800">1. Verifica i tuoi dati anagrafici</h2>
                    <p class="text-sm text-gray-600 mt-1">Controlla che le informazioni riportate siano corrette. Se necessario, puoi modificarle direttamente.</p>

                    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="nome" class="block text-xs uppercase tracking-wide text-gray-500">Nome</label>
                            <input type="text" name="nome" id="nome" value="{{ old('nome', $snapshot['nome'] ?? $anagrafica?->nome) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        <div>
                            <label for="cognome" class="block text-xs uppercase tracking-wide text-gray-500">Cognome</label>
                            <input type="text" name="cognome" id="cognome" value="{{ old('cognome', $snapshot['cognome'] ?? $anagrafica?->cognome) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        <div>
                            <label for="codice_fiscale" class="block text-xs uppercase tracking-wide text-gray-500">Codice Fiscale</label>
                            <input type="text" name="codice_fiscale" id="codice_fiscale" value="{{ old('codice_fiscale', $snapshot['codice_fiscale'] ?? $anagrafica?->codice_fiscale) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm uppercase">
                        </div>

                        <div>
                            <label for="email" class="block text-xs uppercase tracking-wide text-gray-500">Email</label>
                            <input type="email" name="email" id="email" value="{{ old('email', $snapshot['email'] ?? $anagrafica?->email) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        <div>
                            <label for="telefono" class="block text-xs uppercase tracking-wide text-gray-500">Telefono</label>
                            <input type="text" name="telefono" id="telefono" value="{{ old('telefono', $snapshot['telefono'] ?? $anagrafica?->telefono) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        <div>
                            <label for="indirizzo_residenza" class="block text-xs uppercase tracking-wide text-gray-500">Indirizzo di residenza</label>
                            <input type="text" name="indirizzo_residenza" id="indirizzo_residenza" value="{{ old('indirizzo_residenza', trim(($snapshot['indirizzo_residenza'] ?? $anagrafica?->indirizzo_residenza) . ' ' . ($snapshot['numero_civico_residenza'] ?? $anagrafica?->numero_civico_residenza))) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        <div>
                            <label for="citta_residenza" class="block text-xs uppercase tracking-wide text-gray-500">Città</label>
                            <input type="text" name="citta_residenza" id="citta_residenza" value="{{ old('citta_residenza', $snapshot['citta_residenza'] ?? $anagrafica?->citta_residenza) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        <div>
                            <label for="provincia_residenza" class="block text-xs uppercase tracking-wide text-gray-500">Provincia</label>
                            <input type="text" name="provincia_residenza" id="provincia_residenza" value="{{ old('provincia_residenza', $provinciaValue) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm uppercase" maxlength="2">
                        </div>

                        <div>
                            <label for="cap_residenza" class="block text-xs uppercase tracking-wide text-gray-500">CAP</label>
                            <input type="text" name="cap_residenza" id="cap_residenza" value="{{ old('cap_residenza', $snapshot['cap_residenza'] ?? $anagrafica?->cap_residenza) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm" maxlength="5">
                        </div>

                        <div>
                            <label for="iban" class="block text-xs uppercase tracking-wide text-gray-500">IBAN</label>
                            <input type="text" name="iban" id="iban" value="{{ old('iban', $snapshot['iban'] ?? $anagrafica?->iban) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm uppercase">
                        </div>

                        <div>
                            <label for="intestazione_conto" class="block text-xs uppercase tracking-wide text-gray-500">Intestazione conto</label>
                            <input type="text" name="intestazione_conto" id="intestazione_conto" value="{{ old('intestazione_conto', $snapshot['intestazione_conto'] ?? $anagrafica?->intestazione_conto) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>

                        @if($snapshot['partita_iva'] ?? $anagrafica?->partita_iva)
                        <div>
                            <label for="partita_iva" class="block text-xs uppercase tracking-wide text-gray-500">Partita IVA</label>
                            <input type="text" name="partita_iva" id="partita_iva" value="{{ old('partita_iva', $snapshot['partita_iva'] ?? $anagrafica?->partita_iva) }}"
                                   class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-red-500 focus:border-red-500 text-sm">
                        </div>
                        @endif
                    </div>

                    <label class="mt-6 flex items-start gap-3 text-sm text-gray-700">
                        <input type="checkbox" name="confirm_anagrafica" value="1" class="mt-1 h-4 w-4 text-red-600 border-gray-300 focus:ring-red-500" required {{ old('confirm_anagrafica') ? 'checked' : '' }}>
                        <span>Confermo che i dati anagrafici sopra riportati sono corretti e aggiornati.</span>
                    </label>
                </section>

                <section>
                    <h2 class="text-xl font-semibold text-gray-800">2. Dichiarazione compensi percepiti</h2>
                    <p class="text-sm text-gray-600 mt-1">Indica l'importo complessivo percepito nel {{ now()->year }} per collaborazioni occasionali (lordo).</p>

                    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <fieldset>
                                <legend class="text-sm font-medium text-gray-700">Hai superato la soglia di 5.000 €? <span class="text-red-500">*</span></legend>
                                <div class="mt-3 space-y-3">
                                    <label class="flex items-center gap-3 text-sm text-gray-700">
                                        <input type="radio" name="over_threshold" value="no" id="threshold_no" class="h-4 w-4 text-red-600 focus:ring-red-500" {{ old('over_threshold', 'no') === 'no' ? 'checked' : '' }} required>
                                        <span>Importi percepiti inferiori a 5.000 €</span>
                                    </label>
                                    <label class="flex items-center gap-3 text-sm text-gray-700">
                                        <input type="radio" name="over_threshold" value="yes" id="threshold_yes" class="h-4 w-4 text-red-600 focus:ring-red-500" {{ old('over_threshold') === 'yes' ? 'checked' : '' }}>
                                        <span>Importi percepiti superiori a 5.000 €</span>
                                    </label>
                                </div>
                            </fieldset>
                        </div>

                        <div id="declared_amount_wrapper">
                            <label for="declared_amount" class="block text-sm font-medium text-gray-700">
                                Importo percepito (lordo) in {{ now()->year }}
                                <span id="amount_required_indicator" class="text-red-500">*</span>
                                <span id="amount_optional_indicator" class="text-gray-400 text-xs hidden">(opzionale)</span>
                            </label>
                            <div class="mt-1 relative rounded-md shadow-sm">
                                <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-500">€</span>
                                <input type="number" name="declared_amount" id="declared_amount" step="0.01" min="0"
                                       class="block w-full pl-7 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-red-500 focus:border-red-500"
                                       value="{{ old('declared_amount') }}">
                            </div>
                            <p id="amount_helper_text" class="mt-1 text-xs text-gray-500 hidden">Se non conosci l'importo esatto, puoi lasciare questo campo vuoto.</p>
                        </div>
                    </div>

                    <div id="inps_aliquota_wrapper" class="mt-6 hidden">
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <label for="inps_aliquota_totale" class="block text-sm font-medium text-blue-800">
                                Aliquota INPS da applicare sull'eccedenza
                            </label>
                            <p class="text-xs text-blue-600 mt-1 mb-3">Seleziona l'aliquota contributiva INPS che deve essere applicata sulla parte di compenso che eccede i 5.000 €.</p>
                            <select name="inps_aliquota_totale" id="inps_aliquota_totale"
                                    class="block w-full border border-blue-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm bg-white">
                                <option value="24" {{ old('inps_aliquota_totale', '24') === '24' ? 'selected' : '' }}>24% - Collaboratori con altra forma contributiva</option>
                                <option value="33.72" {{ old('inps_aliquota_totale') === '33.72' ? 'selected' : '' }}>33,72% - Gestione separata INPS</option>
                            </select>
                        </div>
                    </div>

                    <div class="mt-6">
                        <label for="notes" class="block text-sm font-medium text-gray-700">Note facoltative</label>
                        <textarea name="notes" id="notes" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-red-500 focus:border-red-500 p-3" placeholder="Inserisci eventuali chiarimenti o indicazioni aggiuntive">{{ old('notes') }}</textarea>
                    </div>
                </section>

                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        const thresholdNo = document.getElementById('threshold_no');
                        const thresholdYes = document.getElementById('threshold_yes');
                        const declaredAmount = document.getElementById('declared_amount');
                        const amountRequiredIndicator = document.getElementById('amount_required_indicator');
                        const amountOptionalIndicator = document.getElementById('amount_optional_indicator');
                        const amountHelperText = document.getElementById('amount_helper_text');
                        const inpsAliquotaWrapper = document.getElementById('inps_aliquota_wrapper');

                        function updateFormState() {
                            const isOverThreshold = thresholdYes.checked;

                            if (isOverThreshold) {
                                // Se >5K: importo opzionale, mostra selezione aliquota
                                declaredAmount.removeAttribute('required');
                                amountRequiredIndicator.classList.add('hidden');
                                amountOptionalIndicator.classList.remove('hidden');
                                amountHelperText.classList.remove('hidden');
                                inpsAliquotaWrapper.classList.remove('hidden');
                            } else {
                                // Se <5K: importo obbligatorio, nascondi selezione aliquota
                                declaredAmount.setAttribute('required', 'required');
                                amountRequiredIndicator.classList.remove('hidden');
                                amountOptionalIndicator.classList.add('hidden');
                                amountHelperText.classList.add('hidden');
                                inpsAliquotaWrapper.classList.add('hidden');
                            }
                        }

                        thresholdNo.addEventListener('change', updateFormState);
                        thresholdYes.addEventListener('change', updateFormState);

                        // Inizializza lo stato al caricamento
                        updateFormState();
                    });
                </script>

                <div class="border-t pt-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <p class="text-xs text-gray-500">I dati forniti saranno utilizzati esclusivamente per la gestione amministrativa della collaborazione occasionale.</p>
                    <button type="submit" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-red-600 text-white rounded-md shadow hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        Invia dichiarazione
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection