@extends('layouts.admin')

@section('title', 'Nuova Relazione Persona-Unità - NetGescon')

@section('header')
    <div class="bg-white shadow">
        <div class="px-4 sm:px-6 lg:max-w-6xl lg:mx-auto lg:px-8">
            <div class="py-6 md:flex md:items-center md:justify-between lg:border-t lg:border-gray-200">
                <div class="flex-1 min-w-0">
                    <div class="flex items-center">
                        <div>
                            <div class="flex items-center">
                                <h1 class="ml-3 text-2xl font-bold leading-7 text-gray-900 sm:leading-9 sm:truncate">
                                    Nuova Relazione Persona-Unità
                                </h1>
                            </div>
                            <dl class="mt-6 flex flex-col sm:ml-3 sm:mt-1 sm:flex-row sm:flex-wrap">
                                <dt class="sr-only">Sezione</dt>
                                <dd class="flex items-center text-sm text-gray-500 font-medium capitalize sm:mr-6">
                                    <i class="fas fa-users mr-1.5 text-gray-400"></i>
                                    Gestione Relazioni
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="mt-6 flex space-x-3 md:mt-0 md:ml-4">
                    <a href="{{ route('admin.persona-unita.index') }}" 
                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Torna all'Elenco
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
<div class="max-w-3xl mx-auto py-6 sm:px-6 lg:px-8">
    <form action="{{ route('admin.persona-unita.store') }}" method="POST" class="space-y-8 divide-y divide-gray-200">
        @csrf
        
        <div class="space-y-8 divide-y divide-gray-200">
            <!-- Selezione Persona e Unità -->
            <div>
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Selezione Persona e Unità</h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Seleziona la persona e l'unità immobiliare da collegare.
                    </p>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
                    <!-- Persona -->
                    <div class="sm:col-span-1">
                        <label for="persona_id" class="block text-sm font-medium text-gray-700">
                            Persona *
                        </label>
                        <select id="persona_id" name="persona_id" required
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Seleziona persona</option>
                            @foreach($persone as $persona)
                                <option value="{{ $persona->id }}" 
                                        {{ (old('persona_id', $persona_id) == $persona->id) ? 'selected' : '' }}
                                        data-codice-fiscale="{{ $persona->codice_fiscale }}"
                                        data-email="{{ $persona->email_principale }}"
                                        data-telefono="{{ $persona->telefono_principale }}">
                                    {{ $persona->cognome }} {{ $persona->nome }}
                                    @if($persona->codice_fiscale)
                                        ({{ $persona->codice_fiscale }})
                                    @endif
                                </option>
                            @endforeach
                        </select>
                        @error('persona_id')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Unità Immobiliare -->
                    <div class="sm:col-span-1">
                        <label for="unita_id" class="block text-sm font-medium text-gray-700">
                            Unità Immobiliare *
                        </label>
                        <select id="unita_id" name="unita_id" required
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Seleziona unità</option>
                            @foreach($unitaImmobiliari as $unita)
                                <option value="{{ $unita->id }}" 
                                        {{ (old('unita_id', $unita_id) == $unita->id) ? 'selected' : '' }}
                                        data-stabile="{{ $unita->stabile->denominazione ?? 'N/A' }}"
                                        data-piano="{{ $unita->piano }}"
                                        data-superficie="{{ $unita->superficie_commerciale }}">
                                    {{ $unita->stabile->denominazione ?? 'N/A' }} - {{ $unita->codice_unita }}
                                    @if($unita->piano)
                                        (Piano {{ $unita->piano }})
                                    @endif
                                </option>
                            @endforeach
                        </select>
                        @error('unita_id')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Dettagli Relazione -->
            <div class="pt-8">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Dettagli Relazione</h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Configura i dettagli specifici della relazione.
                    </p>
                </div>

                <div class="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                    <!-- Tipo Relazione -->
                    <div class="sm:col-span-3">
                        <label for="tipo_relazione" class="block text-sm font-medium text-gray-700">
                            Tipo Relazione *
                        </label>
                        <select id="tipo_relazione" name="tipo_relazione" required
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="">Seleziona tipo</option>
                            @foreach($tipiRelazione as $tipo)
                                <option value="{{ $tipo->codice }}" 
                                        {{ old('tipo_relazione') == $tipo->codice ? 'selected' : '' }}
                                        data-richiede-quota="{{ $tipo->richiede_quota ? 'true' : 'false' }}"
                                        data-vota-assemblea="{{ $tipo->vota_assemblea ? 'true' : 'false' }}"
                                        data-riceve-convocazioni="{{ $tipo->riceve_convocazioni ? 'true' : 'false' }}">
                                    {{ $tipo->descrizione }}
                                </option>
                            @endforeach
                        </select>
                        @error('tipo_relazione')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Ruolo rate (C/I) -->
                    <div class="sm:col-span-3">
                        <label for="ruolo_rate" class="block text-sm font-medium text-gray-700">
                            Ruolo rate (C/I)
                        </label>
                        <select id="ruolo_rate" name="ruolo_rate"
                                class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                            <option value="" {{ old('ruolo_rate') === null || old('ruolo_rate') === '' ? 'selected' : '' }}>Auto (da tipo relazione)</option>
                            <option value="C" {{ old('ruolo_rate') === 'C' ? 'selected' : '' }}>C (Condomino / Proprietario)</option>
                            <option value="I" {{ old('ruolo_rate') === 'I' ? 'selected' : '' }}>I (Inquilino)</option>
                        </select>
                        <p class="mt-1 text-xs text-gray-500">Serve per importazione rate (riparto C/I). Se lasci vuoto, viene derivato dal tipo relazione.</p>
                        @error('ruolo_rate')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Quota Relazione -->
                    <div class="sm:col-span-3">
                        <label for="quota_relazione" class="block text-sm font-medium text-gray-700">
                            Quota di Proprietà (%)
                        </label>
                        <input type="number" name="quota_relazione" id="quota_relazione" 
                               min="0" max="100" step="0.01" value="{{ old('quota_relazione') }}"
                               class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"
                               placeholder="es. 50.00">
                        <p class="mt-1 text-xs text-gray-500">Inserire solo per proprietari e comproprietari</p>
                        @error('quota_relazione')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Data Inizio -->
                    <div class="sm:col-span-3">
                        <label for="data_inizio" class="block text-sm font-medium text-gray-700">
                            Data Inizio *
                        </label>
                        <input type="date" name="data_inizio" id="data_inizio" 
                               value="{{ old('data_inizio', date('Y-m-d')) }}" required
                               class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                        @error('data_inizio')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Data Fine -->
                    <div class="sm:col-span-3">
                        <label for="data_fine" class="block text-sm font-medium text-gray-700">
                            Data Fine
                        </label>
                        <input type="date" name="data_fine" id="data_fine" 
                               value="{{ old('data_fine') }}"
                               class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
                        <p class="mt-1 text-xs text-gray-500">Lasciare vuoto per relazioni a tempo indeterminato</p>
                        @error('data_fine')
                            <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Permessi e Comunicazioni -->
            <div class="pt-8">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Permessi e Comunicazioni</h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Configura i diritti e le modalità di comunicazione per questa relazione.
                    </p>
                </div>

                <div class="mt-6 space-y-4">
                    <!-- Riceve Comunicazioni -->
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="riceve_comunicazioni" name="riceve_comunicazioni" type="checkbox" 
                                   {{ old('riceve_comunicazioni', true) ? 'checked' : '' }}
                                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="riceve_comunicazioni" class="font-medium text-gray-700">
                                Riceve Comunicazioni
                            </label>
                            <p class="text-gray-500">
                                La persona riceverà comunicazioni relative all'unità immobiliare
                            </p>
                        </div>
                    </div>

                    <!-- Riceve Convocazioni -->
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="riceve_convocazioni" name="riceve_convocazioni" type="checkbox" 
                                   {{ old('riceve_convocazioni', true) ? 'checked' : '' }}
                                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="riceve_convocazioni" class="font-medium text-gray-700">
                                Riceve Convocazioni Assemblea
                            </label>
                            <p class="text-gray-500">
                                La persona riceverà le convocazioni per le assemblee condominiali
                            </p>
                        </div>
                    </div>

                    <!-- Vota in Assemblea -->
                    <div class="flex items-start">
                        <div class="flex items-center h-5">
                            <input id="vota_assemblea" name="vota_assemblea" type="checkbox" 
                                   {{ old('vota_assemblea') ? 'checked' : '' }}
                                   class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="vota_assemblea" class="font-medium text-gray-700">
                                Può Votare in Assemblea
                            </label>
                            <p class="text-gray-500">
                                La persona ha diritto di voto nelle assemblee condominiali
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Note -->
            <div class="pt-8">
                <div>
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Note Aggiuntive</h3>
                    <p class="mt-1 text-sm text-gray-500">
                        Eventuali annotazioni specifiche per questa relazione.
                    </p>
                </div>

                <div class="mt-6">
                    <label for="note_relazione" class="block text-sm font-medium text-gray-700">
                        Note
                    </label>
                    <textarea id="note_relazione" name="note_relazione" rows="4" 
                              class="mt-1 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
                              placeholder="Eventuali note o annotazioni specifiche...">{{ old('note_relazione') }}</textarea>
                    @error('note_relazione')
                        <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Pulsanti -->
        <div class="pt-5">
            <div class="flex justify-end">
                <a href="{{ route('admin.persona-unita.index') }}" 
                   class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Annulla
                </a>
                <button type="submit" 
                        class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-save mr-2"></i>
                    Crea Relazione
                </button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tipoRelazioneSelect = document.getElementById('tipo_relazione');
    const quotaRelazioneInput = document.getElementById('quota_relazione');
    const votaAssembleaCheckbox = document.getElementById('vota_assemblea');
    const riceveConvocazioniCheckbox = document.getElementById('riceve_convocazioni');

    // Gestione automatica dei permessi in base al tipo di relazione
    tipoRelazioneSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        
        if (selectedOption.value) {
            const richiedeQuota = selectedOption.dataset.richiedeQuota === 'true';
            const votaAssemblea = selectedOption.dataset.votaAssemblea === 'true';
            const riceveConvocazioni = selectedOption.dataset.riceveConvocazioni === 'true';
            
            // Mostra/nascondi campo quota
            quotaRelazioneInput.closest('.sm\\:col-span-3').style.display = richiedeQuota ? 'block' : 'none';
            if (!richiedeQuota) {
                quotaRelazioneInput.value = '';
            }
            
            // Imposta automaticamente i checkbox
            votaAssembleaCheckbox.checked = votaAssemblea;
            riceveConvocazioniCheckbox.checked = riceveConvocazioni;
        } else {
            quotaRelazioneInput.closest('.sm\\:col-span-3').style.display = 'block';
        }
    });
    
    // Trigger initial setup
    if (tipoRelazioneSelect.value) {
        tipoRelazioneSelect.dispatchEvent(new Event('change'));
    }
    
    // Validazione date
    const dataInizioInput = document.getElementById('data_inizio');
    const dataFineInput = document.getElementById('data_fine');
    
    dataInizioInput.addEventListener('change', function() {
        dataFineInput.min = this.value;
    });
    
    // Select2 style search per persona e unità (se disponibile)
    if (window.jQuery && jQuery.fn.select2) {
        $('#persona_id, #unita_id').select2({
            placeholder: function() {
                return $(this).data('placeholder');
            },
            allowClear: true,
            width: '100%'
        });
    }
});
</script>
@endpush