{{-- Detail financí budovy --}}
<div class="building-finance-detail" data-building-id="{{ $building->id }}">
    <div class="detail-header mb-4">
        <h4 class="text-lg font-semibold">
            <i class="fas fa-building"></i> {{ $building->Budova_nazev }}
        </h4>
        <button class="btn-close" aria-label="Zavřít">
            <i class="fas fa-times"></i>
        </button>
    </div>

    {{-- Souhrn budovy --}}
    <div class="summary-cards mb-4">
        <div class="row">
            <div class="col-md-3">
                <div class="summary-card">
                    <div class="card-label">Počet jednotek</div>
                    <div class="card-value">{{ $building->pocet_jednotek }}</div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="summary-card">
                    <div class="card-label">Celková jistota</div>
                    <div class="card-value text-primary">
                        {{ number_format($building->Jistota_celkem, 0, ',', ' ') }} Kč
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="summary-card">
                    <div class="card-label">Měsíční příjem</div>
                    <div class="card-value text-success">
                        {{ number_format($building->Prijem_celkem, 0, ',', ' ') }} Kč
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="summary-card">
                    <div class="card-label">Nájem celkem</div>
                    <div class="card-value">
                        {{ number_format($building->Najem_celkem, 0, ',', ' ') }} Kč
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabulka jednotek --}}
    <div class="units-table-wrapper">
        <h5 class="mb-3">Přehled jednotek</h5>
        <div class="table-responsive">
            <table class="table table-sm table-hover">
                <thead>
                    <tr>
                        <th>Jednotka</th>
                        <th>Nájemce</th>
                        <th>Plocha m²</th>
                        <th class="text-right">Jistota</th>
                        <th class="text-right">Nájem</th>
                        <th class="text-right">Voda</th>
                        <th class="text-right">Elektřina</th>
                        <th class="text-right">Celkem</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($units as $unit)
                    <tr class="unit-row" data-unit-id="{{ $unit->id }}">
                        <td>
                            <strong>{{ $unit->nazev_jednotky }}</strong>
                        </td>
                        <td>
                            @if($unit->Firma)
                                {{ $unit->Firma }}
                            @elseif($unit->najemce)
                                {{ $unit->najemce }}
                            @else
                                <span class="text-muted">Volné</span>
                            @endif
                        </td>
                        <td>{{ $unit->Plocha }}</td>
                        <td class="text-right">{{ number_format($unit->Jistota ?? 0, 0, ',', ' ') }}</td>
                        <td class="text-right">{{ number_format($unit->Najem ?? 0, 0, ',', ' ') }}</td>
                        <td class="text-right">{{ number_format($unit->Voda ?? 0, 0, ',', ' ') }}</td>
                        <td class="text-right">{{ number_format($unit->Elektrika ?? 0, 0, ',', ' ') }}</td>
                        <td class="text-right font-weight-bold">
                            {{ number_format($unit->Celkem_prijem ?? 0, 0, ',', ' ') }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Graf příjmů --}}
    <div class="finance-chart mt-4">
        <h5 class="mb-3">Rozložení příjmů</h5>
        <canvas id="finance-chart-{{ $building->id }}" height="100"></canvas>
    </div>
</div>

<style>
    .building-finance-detail {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
        border-bottom: 2px solid #e5e7eb;
    }
    
    .btn-close {
        background: transparent;
        border: none;
        font-size: 1.5rem;
        color: #6b7280;
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: all 0.2s;
    }
    
    .btn-close:hover {
        background: #f3f4f6;
        color: #374151;
    }
    
    .summary-cards {
        display: flex;
        gap: 15px;
    }
    
    .summary-card {
        flex: 1;
        background: #f9fafb;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #e5e7eb;
    }
    
    .card-label {
        font-size: 0.875rem;
        color: #6b7280;
        margin-bottom: 5px;
    }
    
    .card-value {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
    }
    
    .units-table-wrapper {
        margin-top: 20px;
    }
    
    .unit-row:hover {
        background-color: #f9fafb;
        cursor: pointer;
    }
    
    .finance-chart {
        padding: 20px;
        background: #f9fafb;
        border-radius: 8px;
    }
</style>