@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">Dichiarazione annuale</p>
                    <h1 class="text-2xl font-semibold text-red-700">Dichiarazione soglia 5.000 €</h1>
                    <p class="text-gray-600">Anno fiscale {{ $dichiarazione->anno }}</p>
                </div>
            </div>

            <div class="mb-6 rounded-md bg-blue-50 border border-blue-200 p-4 text-sm text-blue-700">
                <p class="font-medium">Questa dichiarazione vale per tutto l'anno {{ $dichiarazione->anno }}</p>
                <p class="mt-1">I dati che inserirai saranno utilizzati per tutte le collaborazioni occasionali del periodo.</p>
            </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('dichiarazioni-5k.verify.submit', ['token' => $dichiarazione->token]) }}" class="space-y-10">
                @csrf

                @php
                    $snapshot = $dichiarazione->snapshot_anagrafica ?? [];

                    // 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>

                        @php
                            // Costruisci indirizzo completo, evitando duplicazione del numero civico
                            $indirizzo = $snapshot['indirizzo_residenza'] ?? $anagrafica?->indirizzo_residenza ?? '';
                            $civico = $snapshot['numero_civico_residenza'] ?? $anagrafica?->numero_civico_residenza ?? '';
                            // Aggiungi civico solo se presente e l'indirizzo NON termina già con il numero civico
                            if ($civico && !str_ends_with(trim($indirizzo), (string)$civico)) {
                                $indirizzo = trim($indirizzo . ' ' . $civico);
                            }
                        @endphp
                        <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', $indirizzo) }}"
                                   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 {{ $dichiarazione->anno }} per collaborazioni occasionali (lordo).</p>

                    @if($isForceOverThreshold)
                    <div class="mt-4 rounded-md bg-amber-50 border border-amber-200 p-4 text-sm text-amber-700">
                        <div class="flex items-center gap-2">
                            <svg class="h-5 w-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span class="font-medium">L'importo percepito da IUL supera i 5.000 €</span>
                        </div>
                        <p class="mt-1">In base alle collaborazioni registrate, la soglia è già stata superata. Puoi solo selezionare l'aliquota INPS da applicare.</p>
                    </div>
                    @endif

                    <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <fieldset {{ $isForceOverThreshold ? 'disabled' : '' }}>
                                <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 {{ $isForceOverThreshold ? 'text-gray-400' : '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 {{ $isForceOverThreshold ? 'cursor-not-allowed' : '' }}" {{ !$isForceOverThreshold && old('over_threshold', 'no') === 'no' ? 'checked' : '' }} {{ $isForceOverThreshold ? '' : 'required' }}>
                                        <span>Importi percepiti inferiori a 5.000 €</span>
                                    </label>
                                    <label class="flex items-center gap-3 text-sm {{ $isForceOverThreshold ? 'text-gray-700 font-medium' : '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 {{ $isForceOverThreshold ? 'cursor-not-allowed' : '' }}" {{ $isForceOverThreshold || old('over_threshold') === 'yes' ? 'checked' : '' }}>
                                        <span>Importi percepiti superiori a 5.000 €</span>
                                        @if($isForceOverThreshold)
                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
                                            Automatico
                                        </span>
                                        @endif
                                    </label>
                                </div>
                            </fieldset>
                            @if($isForceOverThreshold)
                            {{-- Hidden input per inviare il valore quando il fieldset è disabilitato --}}
                            <input type="hidden" name="over_threshold" value="yes">
                            @endif
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700">
                                Importo percepito da IUL nel {{ $dichiarazione->anno }}
                            </label>
                            <div class="mt-1 flex items-center gap-2">
                                <span class="text-gray-500">€</span>
                                <input type="text"
                                       class="block w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 cursor-not-allowed text-gray-700"
                                       value="{{ number_format($importoPercepito, 2, ',', '.') }}"
                                       readonly>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">Calcolato automaticamente dalle tue collaborazioni con IUL.</p>
                        </div>

                        <div id="declared_amount_wrapper" class="md:col-span-2">
                            <label for="declared_amount" class="block text-sm font-medium text-gray-700">
                                Importo percepito da <strong>altri committenti</strong> nel {{ $dichiarazione->anno }} (escluso IUL)
                            </label>
                            <div class="mt-1 flex items-center gap-2">
                                <span class="text-gray-500">€</span>
                                <input type="number" step="0.01" min="0" name="declared_amount_value" id="declared_amount"
                                       class="block w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-red-500 focus:border-red-500"
                                       value="0"
                                       placeholder="0.00">
                            </div>
                            <p id="declared_amount_hint" class="mt-1 text-xs text-gray-500">Inserisci l'importo lordo percepito da altri committenti (non IUL) per collaborazioni occasionali. Lascia 0 se non hai altri redditi.</p>
                        </div>
                    </div>

                    <div id="inps_aliquota_wrapper" class="mt-6 {{ $isForceOverThreshold ? '' : '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>
                            @php
                                $defaultAliquota = old('inps_aliquota_totale', $anagrafica?->aliquota_inps ?? '33.72');
                            @endphp
                            <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" {{ $defaultAliquota == '24' ? 'selected' : '' }}>24% - Collaboratori con altra forma contributiva</option>
                                <option value="33.72" {{ $defaultAliquota == '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 inpsAliquotaWrapper = document.getElementById('inps_aliquota_wrapper');

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

                            if (isOverThreshold) {
                                inpsAliquotaWrapper.classList.remove('hidden');
                            } else {
                                inpsAliquotaWrapper.classList.add('hidden');
                            }
                        }

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

                        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 delle collaborazioni occasionali.</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