<!-- Tab Dati Bancari con Rubrica Universale -->
<div class="space-y-6">
    <!-- Header con bottoni azione -->
    <div class="flex justify-between items-center">
        <div>
            <h4 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                <i class="fas fa-university mr-2 text-blue-600"></i>
                Dati Bancari dello Stabile
            </h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                Gestione conti bancari con collegamento alla rubrica universale
            </p>
        </div>
        <div class="space-x-2">
            <button type="button" 
                    class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors"
                    onclick="aggiungiContoBancario()">
                <i class="fas fa-plus mr-2"></i>
                Nuovo Conto
            </button>
            <button type="button" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors"
                    onclick="apriRubricaUniversale()">
                <i class="fas fa-address-book mr-2"></i>
                Rubrica
            </button>
        </div>
    </div>

    <!-- Lista Conti Bancari Esistenti -->
    @if($stabile->datiBancari && $stabile->datiBancari?->count() > 0)
        <div class="space-y-4">
            @foreach($stabile->datiBancari as $conto)
                <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 hover:shadow-md transition-shadow">
                    <div class="flex justify-between items-start">
                        <div class="flex-1">
                            <div class="flex items-center mb-3">
                                <div class="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg mr-3">
                                    <i class="fas fa-university text-blue-600 dark:text-blue-400"></i>
                                </div>
                                <div>
                                    <h5 class="font-semibold text-gray-900 dark:text-gray-100">
                                        {{ $conto->denominazione_banca }}
                                    </h5>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">
                                        {{ ucfirst($conto->tipo_conto) }}
                                    </p>
                                </div>
                                <span class="ml-auto inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                    {{ $conto->stato_conto === 'attivo' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' : 
                                       ($conto->stato_conto === 'sospeso' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100' : 
                                        'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100') }}">
                                    <i class="fas fa-circle mr-1 text-xs"></i>
                                    {{ ucfirst($conto->stato_conto) }}
                                </span>
                            </div>

                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <!-- Dati Bancari -->
                                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                                    <h6 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                                        <i class="fas fa-credit-card mr-2 text-gray-600"></i>
                                        Dati Conto
                                    </h6>
                                    <dl class="space-y-1">
                                        @if($conto->iban)
                                            <div>
                                                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">IBAN:</dt>
                                                <dd class="text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $conto->iban }}</dd>
                                            </div>
                                        @endif
                                        @if($conto->numero_conto)
                                            <div>
                                                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">N. Conto:</dt>
                                                <dd class="text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $conto->numero_conto }}</dd>
                                            </div>
                                        @endif
                                        @if($conto->abi && $conto->cab)
                                            <div class="grid grid-cols-3 gap-2">
                                                <div>
                                                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">ABI:</dt>
                                                    <dd class="text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $conto->abi }}</dd>
                                                </div>
                                                <div>
                                                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">CAB:</dt>
                                                    <dd class="text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $conto->cab }}</dd>
                                                </div>
                                                @if($conto->cin)
                                                    <div>
                                                        <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">CIN:</dt>
                                                        <dd class="text-sm text-gray-900 dark:text-gray-100 font-mono">{{ $conto->cin }}</dd>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                    </dl>
                                </div>

                                <!-- Dati Contatto Banca -->
                                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <h6 class="font-medium text-gray-900 dark:text-gray-100">
                                            <i class="fas fa-address-card mr-2 text-gray-600"></i>
                                            Contatto Banca
                                        </h6>
                                        @if($conto->contatto)
                                            <button type="button" 
                                                    class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                                                    onclick="mostraContattoCompleto({{ $conto->contatto->id }})">
                                                <i class="fas fa-external-link-alt text-xs"></i>
                                            </button>
                                        @else
                                            <button type="button" 
                                                    class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300"
                                                    onclick="collegaContatto({{ $conto->id }})">
                                                <i class="fas fa-link text-xs"></i>
                                            </button>
                                        @endif
                                    </div>
                                    
                                    @if($conto->contatto)
                                        <dl class="space-y-1">
                                            <div>
                                                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Nome:</dt>
                                                <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $conto->contatto->nome_completo }}</dd>
                                            </div>
                                            @if($conto->contatto->telefono_ufficio)
                                                <div>
                                                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Tel:</dt>
                                                    <dd class="text-sm text-gray-900 dark:text-gray-100">
                                                        <a href="tel:{{ $conto->contatto->telefono_ufficio }}" 
                                                           class="text-blue-600 hover:underline">
                                                            {{ $conto->contatto->telefono_ufficio }}
                                                        </a>
                                                    </dd>
                                                </div>
                                            @endif
                                            @if($conto->contatto->email)
                                                <div>
                                                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Email:</dt>
                                                    <dd class="text-sm text-gray-900 dark:text-gray-100">
                                                        <a href="mailto:{{ $conto->contatto->email }}" 
                                                           class="text-blue-600 hover:underline">
                                                            {{ $conto->contatto->email }}
                                                        </a>
                                                    </dd>
                                                </div>
                                            @endif
                                            @if($conto->contatto->indirizzo)
                                                <div>
                                                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Indirizzo:</dt>
                                                    <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $conto->contatto->indirizzo_completo }}</dd>
                                                </div>
                                            @endif
                                        </dl>
                                    @else
                                        <div class="text-center py-4">
                                            <i class="fas fa-unlink text-gray-400 text-2xl mb-2"></i>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                Nessun contatto collegato
                                            </p>
                                            <button type="button" 
                                                    class="mt-2 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                                                    onclick="collegaContatto({{ $conto->id }})">
                                                Collega Contatto
                                            </button>
                                        </div>
                                    @endif
                                </div>

                                <!-- Saldo e Info -->
                                <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
                                    <h6 class="font-medium text-gray-900 dark:text-gray-100 mb-2">
                                        <i class="fas fa-chart-line mr-2 text-gray-600"></i>
                                        Saldo Iniziale
                                    </h6>
                                    <dl class="space-y-1">
                                        @if($conto->data_saldo_iniziale)
                                            <div>
                                                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Data:</dt>
                                                <dd class="text-sm text-gray-900 dark:text-gray-100">
                                                    <i class="fas fa-calendar mr-1"></i>
                                                    {{ $conto->data_saldo_iniziale->format('d/m/Y') }}
                                                </dd>
                                            </div>
                                        @endif
                                        <div>
                                            <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Importo:</dt>
                                            <dd class="text-sm font-semibold {{ $conto->saldo_iniziale >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                                <i class="fas fa-euro-sign mr-1"></i>
                                                {{ number_format($conto->saldo_iniziale, 2, ',', '.') }}
                                            </dd>
                                        </div>
                                        @if($conto->intestazione_conto)
                                            <div>
                                                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Intestazione:</dt>
                                                <dd class="text-sm text-gray-900 dark:text-gray-100">{{ $conto->intestazione_conto }}</dd>
                                            </div>
                                        @endif
                                    </dl>
                                </div>
                            </div>

                            @if($conto->note)
                                <div class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded">
                                    <p class="text-sm text-gray-700 dark:text-gray-300">
                                        <i class="fas fa-sticky-note mr-2 text-yellow-600"></i>
                                        {{ $conto->note }}
                                    </p>
                                </div>
                            @endif
                        </div>

                        <!-- Actions -->
                        <div class="ml-4 flex flex-col space-y-2">
                            <button type="button" 
                                    class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                                    onclick="modificaConto({{ $conto->id }})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button type="button" 
                                    class="text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-300"
                                    onclick="visualizzaMovimenti({{ $conto->id }})">
                                <i class="fas fa-list"></i>
                            </button>
                            <button type="button" 
                                    class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                                    onclick="eliminaConto({{ $conto->id }})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <!-- Stato vuoto -->
        <div class="text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600">
            <i class="fas fa-university text-gray-400 text-4xl mb-4"></i>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Nessun conto bancario configurato</h3>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
                Inizia aggiungendo il primo conto bancario per questo stabile
            </p>
            <button type="button" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors"
                    onclick="aggiungiContoBancario()">
                <i class="fas fa-plus mr-2"></i>
                Aggiungi Primo Conto
            </button>
        </div>
    @endif

    <!-- Info Box sulla Rubrica Universale -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border-l-4 border-blue-500 p-6 rounded-lg">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-500 text-xl"></i>
            </div>
            <div class="ml-3">
                <h4 class="text-lg font-medium text-blue-900 dark:text-blue-100">Rubrica Universale</h4>
                <div class="mt-2 text-sm text-blue-800 dark:text-blue-200">
                    <p class="mb-2">La rubrica universale centralizza tutti i contatti:</p>
                    <ul class="list-disc list-inside space-y-1">
                        <li><strong>Banche:</strong> Dati completi filiali, referenti, contatti</li>
                        <li><strong>Fornitori:</strong> Aziende, professionisti, manutentori</li>
                        <li><strong>Assicurazioni:</strong> Compagnie e agenti</li>
                        <li><strong>Condomini:</strong> Proprietari e inquilini</li>
                        <li><strong>Altri:</strong> Qualsiasi tipo di contatto</li>
                    </ul>
                    <p class="mt-3 font-medium">
                        <i class="fas fa-lightbulb mr-1"></i>
                        Collega i conti bancari ai contatti per avere sempre i dati aggiornati!
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript per gestione dati bancari -->
<script>
// Caricamento dati iniziale
document.addEventListener('DOMContentLoaded', function() {
    caricaDatiBancariStabile();
});

function caricaDatiBancariStabile() {
    const stabileId = {{ $stabile->id }};
    
    fetch(`/admin/stabili/${stabileId}/dati-bancari`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                aggiornaDatiBancari(data.data);
                aggiornaContattiRubrica(data.contatti);
            }
        })
        .catch(error => console.error('Errore nel caricamento dati bancari:', error));
}

function aggiornaDatiBancari(datiBancari) {
    // Aggiorna il conteggio nel tab
    const conteggioElement = document.querySelector('.dati-bancari-count');
    if (conteggioElement) {
        conteggioElement.textContent = datiBancari.length;
    }
    
    // Per ora mostriamo una notifica
    mostraNotifica('info', `Caricati ${datiBancari.length} conti bancari dal database`);
}

function aggiornaContattiRubrica(contatti) {
    // Aggiorna il conteggio dei contatti banca nella rubrica
    const conteggioContatti = document.querySelector('.contatti-banca-count');
    if (conteggioContatti) {
        conteggioContatti.textContent = contatti.length;
    }
}

// Funzioni per gestione dati bancari
function nuovoDatoBancario() {
    mostraModalNuovoBanco();
}

function modificaDatiBancari(id) {
    window.location.href = `/admin/dati-bancari/${id}/edit`;
}

function eliminaDatiBancari(id) {
    if (confirm('Sei sicuro di voler eliminare questi dati bancari?')) {
        fetch(`/admin/dati-bancari/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (response.ok) {
                mostraNotifica('success', 'Dati bancari eliminati con successo');
                caricaDatiBancariStabile(); // Ricarica l'elenco
            } else {
                mostraNotifica('error', 'Errore nell\'eliminazione');
            }
        })
        .catch(error => {
            console.error('Errore nell\'eliminazione:', error);
            mostraNotifica('error', 'Errore di connessione');
        });
    }
}

function visualizzaSaldo(contoId) {
    fetch(`/admin/api/dati-bancari/${contoId}/saldo-attuale`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(`Saldo attuale: €${data.saldo_attuale}\nSaldo iniziale: €${data.saldo_iniziale}\nUltimo aggiornamento: ${data.ultimo_aggiornamento}`);
            }
        })
        .catch(error => {
            console.error('Errore nel caricamento saldo:', error);
            mostraNotifica('error', 'Errore nel caricamento del saldo');
        });
}

function mostraModalNuovoBanco() {
    // Implementazione del modal per nuovo dato bancario
    alert('Modal nuovo dato bancario - DA IMPLEMENTARE\n\nIl modal includerà:\n- Selezione contatto dalla rubrica\n- Tutti i campi bancari (IBAN, ABI, CAB, etc.)\n- Data Saldo Iniziale\n- Validazione automatica IBAN');
}

function mostraNotifica(tipo, messaggio) {
    // Crea una notifica toast semplice
    const notifica = document.createElement('div');
    notifica.className = `fixed top-4 right-4 px-4 py-2 rounded-lg text-white z-50 ${
        tipo === 'success' ? 'bg-green-600' : 
        tipo === 'error' ? 'bg-red-600' : 
        tipo === 'info' ? 'bg-blue-600' : 'bg-gray-600'
    }`;
    notifica.innerHTML = `<i class="fas ${
        tipo === 'success' ? 'fa-check' : 
        tipo === 'error' ? 'fa-times' : 
        tipo === 'info' ? 'fa-info' : 'fa-bell'
    } mr-2"></i>${messaggio}`;
    
    document.body.appendChild(notifica);
    
    // Rimuovi dopo 4 secondi
    setTimeout(() => {
        notifica.remove();
    }, 4000);
}
</script>

<!-- Modals e JavaScript -->
<script>
function aggiungiContoBancario() {
    // Implementazione per aprire modal di aggiunta conto
    alert('Funzione aggiungi conto bancario - DA IMPLEMENTARE');
}

function apriRubricaUniversale() {
    // Implementazione per aprire la rubrica universale
    alert('Funzione rubrica universale - DA IMPLEMENTARE');
}

function mostraContattoCompleto(contattoId) {
    // Implementazione per mostrare popup con dettagli completi del contatto
    alert('Mostra contatto ' + contattoId + ' - DA IMPLEMENTARE');
}

function collegaContatto(contoId) {
    // Implementazione per collegare un contatto esistente al conto
    alert('Collega contatto al conto ' + contoId + ' - DA IMPLEMENTARE');
}

function modificaConto(contoId) {
    // Implementazione per modificare conto
    alert('Modifica conto ' + contoId + ' - DA IMPLEMENTARE');
}

function visualizzaMovimenti(contoId) {
    // Implementazione per visualizzare movimenti del conto
    alert('Movimenti conto ' + contoId + ' - DA IMPLEMENTARE');
}

function eliminaConto(contoId) {
    if (confirm('Sei sicuro di voler eliminare questo conto bancario?')) {
        // Implementazione per eliminare conto
        alert('Elimina conto ' + contoId + ' - DA IMPLEMENTARE');
    }
}
</script>
