@extends('admin.layouts.netgescon')

@section('page-title', 'Dettaglio Tabella Millesimale')

@section('content')
<div class="space-y-8 netgescon-fade-in">
    <!-- Header -->
    <div class="netgescon-card">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="netgescon-title">
                    <i class="fas fa-table text-blue-500 mr-3"></i>
                    {{ $tabella->nome_tabella }}
                    @if($tabella->codice_tabella)
                        <small class="text-gray-500">({{ $tabella->codice_tabella }})</small>
                    @endif
                </h2>
                <p class="netgescon-text mt-2">
                    Dettaglio distribuzione millesimi per unità immobiliari
                </p>
            </div>
            <div class="hidden md:block">
                <a href="{{ route('piano_conti.index') }}" class="netgescon-btn netgescon-btn-outline">
                    <i class="fas fa-arrow-left"></i>
                    Indietro
                </a>
            </div>
        </div>
    </div>

    <!-- Informazioni e Statistiche -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Informazioni Tabella -->
        <div class="lg:col-span-2 netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-card-title">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                    Informazioni Tabella
                </h3>
            </div>
            <div class="netgescon-card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-3">
                        <div>
                            <span class="font-semibold netgescon-text">Denominazione:</span>
                            <p class="netgescon-text-muted">{{ $tabella->denominazione ?: $tabella->nome_tabella }}</p>
                        </div>
                        <div>
                            <span class="font-semibold netgescon-text">Tipo Tabella:</span>
                            <span class="ml-2 netgescon-badge {{ $tabella->tipo_tabella === 'proprieta' ? 'netgescon-badge-blue' : ($tabella->tipo_tabella === 'riscaldamento' ? 'netgescon-badge-yellow' : 'netgescon-badge-purple') }}">
                                {{ ucfirst($tabella->tipo_tabella) }}
                            </span>
                        </div>
                        <div>
                            <span class="font-semibold netgescon-text">Tipo Calcolo:</span>
                            <p class="netgescon-text-muted">{{ ucfirst($tabella->tipo_calcolo) }}</p>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div>
                            <span class="font-semibold netgescon-text">Stato:</span>
                            <span class="ml-2 netgescon-badge {{ $tabella->attiva ? 'netgescon-badge-green' : 'netgescon-badge-gray' }}">
                                {{ $tabella->attiva ? 'Attiva' : 'Non Attiva' }}
                            </span>
                        </div>
                        <div>
                            <span class="font-semibold netgescon-text">Totale Millesimi Tabella:</span>
                            <p class="netgescon-text-muted font-mono">{{ number_format($tabella->totale_millesimi, 4) }}</p>
                        </div>
                        @if($tabella->descrizione)
                        <div>
                            <span class="font-semibold netgescon-text">Descrizione:</span>
                            <p class="netgescon-text-muted">{{ $tabella->descrizione }}</p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistiche -->
        <div class="netgescon-card">
            <div class="netgescon-card-header">
                <h3 class="netgescon-card-title">
                    <i class="fas fa-chart-bar text-purple-500 mr-2"></i>
                    Statistiche
                </h3>
            </div>
            <div class="netgescon-card-body space-y-4">
                <div>
                    <span class="text-sm netgescon-text-muted">Unità Partecipanti</span>
                    <div class="text-2xl font-bold netgescon-text">{{ $statistiche_tabella['totale_unita'] }}</div>
                </div>
                <div>
                    <span class="text-sm netgescon-text-muted">Totale Millesimi Assegnati</span>
                    <div class="text-lg font-bold netgescon-text font-mono">{{ number_format($statistiche_tabella['totale_millesimi'], 2) }}</div>
                </div>
                <div>
                    <span class="text-sm netgescon-text-muted">Media Millesimi</span>
                    <div class="text-lg netgescon-text font-mono">{{ number_format($statistiche_tabella['media_millesimi'], 2) }}</div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <span class="text-sm netgescon-text-muted">Min</span>
                        <div class="font-bold netgescon-text font-mono">{{ number_format($statistiche_tabella['min_millesimi'], 2) }}</div>
                    </div>
                    <div>
                        <span class="text-sm netgescon-text-muted">Max</span>
                        <div class="font-bold netgescon-text font-mono">{{ number_format($statistiche_tabella['max_millesimi'], 2) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Dettagli Millesimi per Scala -->
    <div class="netgescon-card">
        <div class="netgescon-card-header">
            <div class="flex items-center justify-between">
                <h3 class="netgescon-card-title">
                    <i class="fas fa-building text-indigo-500 mr-2"></i>
                    Dettagli Millesimi per Scala
                </h3>
                <div class="flex items-center space-x-2">
                    <button onclick="window.print()" class="netgescon-btn netgescon-btn-secondary netgescon-btn-sm">
                        <i class="fas fa-print mr-1"></i>
                        Stampa
                    </button>
                </div>
            </div>
        </div>
        <div class="netgescon-card-body">
            @foreach($millesimi_per_scala as $scala => $gruppo_scala)
            <div class="mb-8 last:mb-0">
                <div class="flex items-center justify-between mb-4 pb-3 border-b-2 border-gray-200">
                    <h4 class="text-lg font-semibold netgescon-text flex items-center">
                        <i class="fas fa-building text-indigo-500 mr-2"></i>
                        Scala {{ $scala }}
                    </h4>
                    <div class="text-sm netgescon-text-muted">
                        {{ $gruppo_scala['count'] }} unità - {{ number_format($gruppo_scala['totale'], 2) }} millesimi
                    </div>
                </div>
                
                <div class="netgescon-table-responsive">
                    <table class="netgescon-table netgescon-table-compact">
                        <thead>
                            <tr>
                                <th class="w-20">Interno</th>
                                <th class="w-24">Palazzina</th>
                                <th class="w-48">Denominazione</th>
                                <th class="w-24 text-right">Millesimi</th>
                                <th class="w-20 text-right">% su Scala</th>
                                <th class="w-16 text-center">Partecipa</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($gruppo_scala['dettagli'] as $dettaglio)
                            <tr class="netgescon-table-row">
                                <td class="font-semibold text-blue-600">
                                    {{ $dettaglio->unitaImmobiliare->interno }}
                                </td>
                                <td class="netgescon-text">
                                    {{ $dettaglio->unitaImmobiliare->palazzina }}
                                </td>
                                <td class="netgescon-text">
                                    {{ $dettaglio->unitaImmobiliare->denominazione ?: 'N/A' }}
                                </td>
                                <td class="text-right font-mono font-semibold text-green-600">
                                    {{ number_format($dettaglio->millesimi, 4) }}
                                </td>
                                <td class="text-right font-mono netgescon-text">
                                    {{ number_format(($dettaglio->millesimi / $gruppo_scala['totale']) * 100, 2) }}%
                                </td>
                                <td class="text-center">
                                    @if($dettaglio->partecipa)
                                        <i class="fas fa-check-circle text-green-500 text-lg"></i>
                                    @else
                                        <i class="fas fa-times-circle text-red-500 text-lg"></i>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr class="netgescon-table-footer">
                                <td colspan="3" class="font-semibold">Totale Scala {{ $scala }}</td>
                                <td class="text-right font-mono font-bold text-green-600">
                                    {{ number_format($gruppo_scala['totale'], 4) }}
                                </td>
                                <td class="text-right font-mono font-bold">100.00%</td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            @endforeach
            
            <!-- Riepilogo Totale -->
            <div class="mt-6 p-4 netgescon-card-light rounded-lg">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div class="text-center md:text-left">
                        <span class="font-semibold netgescon-text">Totale Unità:</span>
                        <div class="text-lg font-bold netgescon-text">{{ $statistiche_tabella['totale_unita'] }}</div>
                    </div>
                    <div class="text-center md:text-left">
                        <span class="font-semibold netgescon-text">Totale Millesimi:</span>
                        <div class="text-lg font-bold font-mono netgescon-text">{{ number_format($statistiche_tabella['totale_millesimi'], 4) }}</div>
                    </div>
                    <div class="text-center md:text-left">
                        <span class="font-semibold netgescon-text">Differenza da 1000:</span>
                        <div class="text-lg font-bold font-mono {{ ($statistiche_tabella['totale_millesimi'] - 1000) == 0 ? 'text-green-600' : 'text-yellow-600' }}">
                            {{ number_format($statistiche_tabella['totale_millesimi'] - 1000, 4) }}
                        </div>
                    </div>
                    <div class="text-center md:text-left">
                        <span class="font-semibold netgescon-text">Media:</span>
                        <div class="text-lg font-bold font-mono netgescon-text">{{ number_format($statistiche_tabella['media_millesimi'], 2) }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
@media print {
    .netgescon-btn, .print-hide {
        display: none !important;
    }
    .netgescon-card {
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
    }
    .netgescon-table {
        font-size: 0.85rem;
    }
}

.netgescon-table-compact th,
.netgescon-table-compact td {
    padding: 0.5rem;
    vertical-align: middle;
}

.netgescon-card-light {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}
</style>
@endpush