@extends('admin.layouts.netgescon')

@section('title', 'Configura Millesimi')

@section('content')
<div class="p-6">
    <!-- Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Configura Millesimi</h1>
                <p class="text-gray-600">{{ $tabellaMillesimale->nome_tabella }} - {{ $tabellaMillesimale->stabile->nome_stabile }}</p>
            </div>
            <div class="flex space-x-3">
                <a href="{{ route('admin.stabili.show', $tabellaMillesimale->stabile_id) }}" 
                   class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Torna al Stabile
                </a>
            </div>
        </div>
    </div>

    <!-- Statistiche -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white p-6 rounded-lg shadow-sm border">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-blue-100">
                    <i class="fas fa-home text-blue-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Unità Totali</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $statistiche['unita_totali'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-sm border">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-green-100">
                    <i class="fas fa-check-circle text-green-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Unità Configurate</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $statistiche['unita_configurate'] }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-sm border">
            <div class="flex items-center">
                <div class="p-3 rounded-lg bg-yellow-100">
                    <i class="fas fa-calculator text-yellow-600"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Millesimi Assegnati</p>
                    <p class="text-2xl font-bold text-gray-900">{{ number_format($statistiche['millesimi_assegnati'], 2) }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-lg shadow-sm border">
            <div class="flex items-center">
                <div class="p-3 rounded-lg {{ $statistiche['millesimi_residui'] == 0 ? 'bg-green-100' : 'bg-red-100' }}">
                    <i class="fas fa-balance-scale {{ $statistiche['millesimi_residui'] == 0 ? 'text-green-600' : 'text-red-600' }}"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">Millesimi Residui</p>
                    <p class="text-2xl font-bold {{ $statistiche['millesimi_residui'] == 0 ? 'text-green-600' : 'text-red-600' }}">
                        {{ number_format($statistiche['millesimi_residui'], 2) }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabella Configurazione -->
    <div class="bg-white rounded-lg shadow-sm border">
        <div class="p-6 border-b border-gray-200">
            <h2 class="text-lg font-semibold text-gray-900">Configurazione Millesimi per Unità</h2>
        </div>
        
        <div class="p-6">
            <form id="configuraMillesimiForm" class="space-y-4">
                @csrf
                <input type="hidden" name="tabella_id" value="{{ $tabellaMillesimale->id }}">
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Unità Immobiliare
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Piano
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Mq Commerciali
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Millesimi Attuali
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Nuovi Millesimi
                                </th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Azioni
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($tabellaMillesimale->stabile->unitaImmobiliari as $unita)
                                @php
                                    $dettaglio = $tabellaMillesimale->dettagliTabelle->where('unita_immobiliare_id', $unita->id)->first();
                                @endphp
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-10 w-10">
                                                <div class="h-10 w-10 rounded-lg bg-blue-100 flex items-center justify-center">
                                                    <i class="fas fa-home text-blue-600"></i>
                                                </div>
                                            </div>
                                            <div class="ml-4">
                                                <div class="text-sm font-medium text-gray-900">
                                                    {{ $unita->numero_unita ?? 'N/A' }}
                                                </div>
                                                <div class="text-sm text-gray-500">
                                                    {{ $unita->categoria_catastale ?? 'N/A' }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $unita->piano ?? 'N/A' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $unita->superficie_commerciale ?? 'N/A' }} mq
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $dettaglio ? number_format($dettaglio->millesimi, 2) : '0.00' }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <input type="number" 
                                               name="millesimi[{{ $unita->id }}]" 
                                               value="{{ $dettaglio ? $dettaglio->millesimi : '' }}"
                                               step="0.01" 
                                               min="0" 
                                               max="{{ $tabellaMillesimale->totale_millesimi }}"
                                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
                                               placeholder="0.00">
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        @if($dettaglio)
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                <i class="fas fa-check-circle mr-1"></i>
                                                Configurato
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                <i class="fas fa-exclamation-circle mr-1"></i>
                                                Da configurare
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Controlli -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <div class="flex items-center space-x-4">
                        <button type="button" id="distribuisciEquamente" 
                                class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors">
                            <i class="fas fa-balance-scale mr-2"></i>Distribuisci Equamente
                        </button>
                        <button type="button" id="distribuisciPerSuperficie" 
                                class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg transition-colors">
                            <i class="fas fa-ruler-combined mr-2"></i>Per Superficie
                        </button>
                        <button type="button" id="azzeraMillesimi" 
                                class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors">
                            <i class="fas fa-eraser mr-2"></i>Azzera Tutto
                        </button>
                    </div>
                    
                    <div class="flex items-center space-x-3">
                        <div id="totaleCalcolato" class="text-sm text-gray-600">
                            Totale: <span class="font-semibold">0.00</span> / {{ number_format($tabellaMillesimale->totale_millesimi, 2) }}
                        </div>
                        <button type="submit" 
                                class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
                            <i class="fas fa-save mr-2"></i>Salva Configurazione
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('configuraMillesimiForm');
    const inputs = form.querySelectorAll('input[name^="millesimi"]');
    const totaleElement = document.getElementById('totaleCalcolato').querySelector('span');
    const totaleMillesimi = {{ $tabellaMillesimale->totale_millesimi }};
    
    // Calcola totale
    function calcolaTotale() {
        let totale = 0;
        inputs.forEach(input => {
            const valore = parseFloat(input.value) || 0;
            totale += valore;
        });
        totaleElement.textContent = totale.toFixed(2);
        
        // Cambia colore in base al bilanciamento
        const parent = totaleElement.parentElement;
        parent.className = 'text-sm ' + (Math.abs(totale - totaleMillesimi) < 0.01 ? 'text-green-600' : 'text-red-600');
    }
    
    // Event listeners per calcolo totale
    inputs.forEach(input => {
        input.addEventListener('input', calcolaTotale);
    });
    
    // Calcolo iniziale
    calcolaTotale();
    
    // Distribuisci equamente
    document.getElementById('distribuisciEquamente').addEventListener('click', function() {
        const numeroUnita = inputs.length;
        const millesimiPerUnita = (totaleMillesimi / numeroUnita).toFixed(2);
        
        inputs.forEach(input => {
            input.value = millesimiPerUnita;
        });
        
        calcolaTotale();
    });
    
    // Distribuisci per superficie
    document.getElementById('distribuisciPerSuperficie').addEventListener('click', function() {
        // Ottieni le superfici dalle righe della tabella
        const righe = form.querySelectorAll('tbody tr');
        let superficieTotale = 0;
        const superfici = [];
        
        righe.forEach((riga, index) => {
            const superficieText = riga.cells[2].textContent.trim();
            const superficie = parseFloat(superficieText.replace(' mq', '')) || 0;
            superfici.push(superficie);
            superficieTotale += superficie;
        });
        
        if (superficieTotale > 0) {
            inputs.forEach((input, index) => {
                const proporzione = superfici[index] / superficieTotale;
                const millesimi = (totaleMillesimi * proporzione).toFixed(2);
                input.value = millesimi;
            });
            
            calcolaTotale();
        } else {
            alert('Impossibile distribuire per superficie: dati mancanti');
        }
    });
    
    // Azzera tutto
    document.getElementById('azzeraMillesimi').addEventListener('click', function() {
        if (confirm('Sei sicuro di voler azzerare tutti i millesimi?')) {
            inputs.forEach(input => {
                input.value = '';
            });
            calcolaTotale();
        }
    });
    
    // Submit form
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(form);
        
        fetch('{{ route("admin.tabelle-millesimali.store-millesimi", $tabellaMillesimale) }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Mostra messaggio di successo
                const alert = document.createElement('div');
                alert.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50';
                alert.innerHTML = '<i class="fas fa-check-circle mr-2"></i>' + data.message;
                document.body.appendChild(alert);
                
                setTimeout(() => {
                    alert.remove();
                }, 3000);
                
                // Ricarica la pagina per aggiornare i dati
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                alert('Errore: ' + (data.message || 'Errore sconosciuto'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Errore durante il salvataggio');
        });
    });
});
</script>
@endsection