{{-- ARCHIVO: resources/views/admin/superadmin/condominios/show.blade.php --}}
{{-- VERSIÓN: 1.0 - COMPLETA 100% FUNCIONAL --}}
{{-- DESCRIPCIÓN: Vista de detalles del condominio con pestañas --}}
@extends('layouts.admin')

@section('title', $condominio->nombre . ' - UrbanOSS')

@push('styles')
<style>
    .condominio-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        color: white;
        padding: 30px;
        margin-bottom: 30px;
    }
    
    .condominio-logo-large {
        width: 120px;
        height: 120px;
        border-radius: 12px;
        border: 4px solid white;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        object-fit: cover;
    }
    
    .stats-card {
        border-radius: 12px;
        border: none;
        padding: 20px;
        text-align: center;
        transition: all 0.3s ease;
    }
    
    .stats-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 24px;
    }
    
    .tab-content {
        background: white;
        border-radius: 12px;
        padding: 25px;
        margin-top: -20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        border: 1px solid #e9ecef;
    }
    
    .nav-tabs .nav-link {
        border: none;
        padding: 12px 25px;
        color: #6c757d;
        font-weight: 500;
        border-radius: 8px 8px 0 0;
        margin-right: 5px;
    }
    
    .nav-tabs .nav-link.active {
        background: white;
        color: #667eea;
        border-bottom: 3px solid #667eea;
    }
    
    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }
    
    .payment-status {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 5px;
    }
    
    .status-paid { background-color: #28a745; }
    .status-pending { background-color: #ffc107; }
    .status-overdue { background-color: #dc3545; }
</style>
@endpush

@section('content')
<div class="container-fluid px-4">
    {{-- Header --}}
    <div class="condominio-header">
        <div class="row align-items-center">
            <div class="col-auto">
                @if($condominio->logo_url)
                <img src="{{ $condominio->logo_url }}" 
                     alt="{{ $condominio->nombre }}" 
                     class="condominio-logo-large">
                @else
                <div class="condominio-logo-large bg-white d-flex align-items-center justify-content-center">
                    <i class="fas fa-building fa-3x text-primary"></i>
                </div>
                @endif
            </div>
            <div class="col">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <h1 class="h2 mb-2">{{ $condominio->nombre }}</h1>
                        <p class="mb-2 opacity-75">
                            <i class="fas fa-map-marker-alt me-2"></i>{{ $condominio->direccion }}
                        </p>
                        <div class="d-flex gap-3">
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-money-bill-wave me-1"></i>{{ $condominio->moneda_display }}
                            </span>
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-language me-1"></i>{{ $condominio->idioma_display }}
                            </span>
                            <span class="badge bg-{{ $condominio->estado == 'activo' ? 'success' : ($condominio->estado == 'suspendido' ? 'warning' : 'danger') }}">
                                {{ $condominio->estado_display }}
                            </span>
                        </div>
                    </div>
                    <div class="btn-group">
                        <a href="{{ route('superadmin.condominios.edit', $condominio->id) }}" 
                           class="btn btn-light">
                            <i class="fas fa-edit me-2"></i>Editar
                        </a>
                        <button type="button" class="btn btn-light dropdown-toggle dropdown-toggle-split" 
                                data-bs-toggle="dropdown">
                            <span class="visually-hidden">Más acciones</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li>
                                <a class="dropdown-item" href="#" onclick="generateInvitationToken({{ $condominio->id }})">
                                    <i class="fas fa-share-alt me-2"></i>Generar invitación
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="#" onclick="createBackup({{ $condominio->id }})">
                                    <i class="fas fa-download me-2"></i>Crear backup
                                </a>
                            </li>
                            <li><hr class="dropdown-divider"></li>
                            <li>
                                @if($condominio->estado == 'activo')
                                <a class="dropdown-item text-warning" href="#"
                                   onclick="suspendCondominio({{ $condominio->id }})">
                                    <i class="fas fa-pause-circle me-2"></i>Suspender
                                </a>
                                @else
                                <a class="dropdown-item text-success" href="#"
                                   onclick="activateCondominio({{ $condominio->id }})">
                                    <i class="fas fa-play-circle me-2"></i>Activar
                                </a>
                                @endif
                            </li>
                            <li>
                                <form id="delete-form-{{ $condominio->id }}" 
                                      action="{{ route('superadmin.condominios.destroy', $condominio->id) }}" 
                                      method="POST" 
                                      style="display: none;">
                                    @csrf
                                    @method('DELETE')
                                </form>
                                <a class="dropdown-item text-danger" href="#"
                                   onclick="if(confirm('¿Estás seguro de eliminar este condominio?')) {
                                            event.preventDefault();
                                            document.getElementById('delete-form-{{ $condominio->id }}').submit();
                                           }">
                                    <i class="fas fa-trash-alt me-2"></i>Eliminar
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Stats Overview --}}
    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="stats-card bg-primary bg-opacity-10 border-primary">
                <div class="stats-icon bg-primary text-white">
                    <i class="fas fa-users"></i>
                </div>
                <h3 class="mb-2">{{ $stats['usuarios_totales'] ?? 0 }}</h3>
                <p class="text-muted mb-0">Usuarios Totales</p>
                <div class="mt-2">
                    <span class="badge bg-primary">Admin: {{ $usersByRole['admin'] ?? 0 }}</span>
                    <span class="badge bg-success">Prop: {{ $usersByRole['propietario'] ?? 0 }}</span>
                    <span class="badge bg-info">Inq: {{ $usersByRole['inquilino'] ?? 0 }}</span>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="stats-card bg-success bg-opacity-10 border-success">
                <div class="stats-icon bg-success text-white">
                    <i class="fas fa-building"></i>
                </div>
                <h3 class="mb-2">{{ $stats['unidades_totales'] ?? 0 }}</h3>
                <p class="text-muted mb-0">Unidades Totales</p>
                <div class="mt-2">
                    <span class="badge bg-success">Ocup: {{ $stats['unidades_ocupadas'] ?? 0 }}</span>
                    <span class="badge bg-secondary">Vac: {{ $stats['unidades_vacias'] ?? 0 }}</span>
                    <span class="badge bg-warning">Airbnb: {{ $stats['unidades_airbnb'] ?? 0 }}</span>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="stats-card bg-warning bg-opacity-10 border-warning">
                <div class="stats-icon bg-warning text-white">
                    <i class="fas fa-money-bill-wave"></i>
                </div>
                <h3 class="mb-2">{{ $condominio->moneda_simbolo }} {{ number_format($condominio->morosidad_total, 2) }}</h3>
                <p class="text-muted mb-0">Morosidad Total</p>
                <div class="mt-2">
                    <span class="badge bg-danger">Morosos: {{ count($morosos) }}</span>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6">
            <div class="stats-card bg-info bg-opacity-10 border-info">
                <div class="stats-icon bg-info text-white">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3 class="mb-2">{{ $condominio->moneda_simbolo }} {{ number_format($condominio->ingresos_mes_actual, 2) }}</h3>
                <p class="text-muted mb-0">Ingresos Mes Actual</p>
                <div class="mt-2">
                    <span class="badge bg-info">Áreas: {{ $stats['areas_comunes'] ?? 0 }}</span>
                    <span class="badge bg-dark">Cámaras: {{ $stats['camaras'] ?? 0 }}</span>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs Navigation --}}
    <ul class="nav nav-tabs" id="condominioTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button">
                <i class="fas fa-home me-2"></i>Resumen
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="users-tab" data-bs-toggle="tab" data-bs-target="#users" type="button">
                <i class="fas fa-users me-2"></i>Usuarios
                <span class="badge bg-primary ms-1">{{ $condominio->usuarios->count() }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="units-tab" data-bs-toggle="tab" data-bs-target="#units" type="button">
                <i class="fas fa-building me-2"></i>Unidades
                <span class="badge bg-success ms-1">{{ $condominio->unidades->count() }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments" type="button">
                <i class="fas fa-credit-card me-2"></i>Pagos
                <span class="badge bg-warning ms-1">{{ $condominio->pagos->count() }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button">
                <i class="fas fa-cog me-2"></i>Configuración
            </button>
        </li>
    </ul>

    {{-- Tab Content --}}
    <div class="tab-content" id="condominioTabsContent">
        {{-- Tab 1: Overview --}}
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <div class="row">
                {{-- Left Column: Info & Contact --}}
                <div class="col-lg-8">
                    <div class="mb-4">
                        <h5 class="mb-3">
                            <i class="fas fa-info-circle me-2 text-primary"></i>Información General
                        </h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <small class="text-muted d-block">Super Administrador</small>
                                    <strong>{{ $condominio->superadministrador->name ?? 'No asignado' }}</strong>
                                    <div class="small text-muted">{{ $condominio->superadministrador->email ?? '' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <small class="text-muted d-block">Contacto</small>
                                    <div>
                                        @if($condominio->telefono)
                                        <i class="fas fa-phone me-2 text-success"></i>{{ $condominio->telefono }}<br>
                                        @endif
                                        @if($condominio->email)
                                        <i class="fas fa-envelope me-2 text-primary"></i>{{ $condominio->email }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <small class="text-muted d-block">Fecha de Creación</small>
                                    <strong>{{ $condominio->created_at->format('d/m/Y H:i') }}</strong>
                                    <div class="small text-muted">Hace {{ $condominio->created_at->diffForHumans() }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3">
                                    <small class="text-muted d-block">Última Actualización</small>
                                    <strong>{{ $condominio->updated_at->format('d/m/Y H:i') }}</strong>
                                    <div class="small text-muted">Hace {{ $condominio->updated_at->diffForHumans() }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Units by Type --}}
                    <div class="mb-4">
                        <h5 class="mb-3">
                            <i class="fas fa-chart-pie me-2 text-primary"></i>Unidades por Tipo
                        </h5>
                        <div class="row g-3">
                            @foreach($unitsByType as $type => $count)
                            @if($count > 0)
                            <div class="col-6 col-md-3">
                                <div class="border rounded p-3 text-center">
                                    <div class="h4 mb-2">{{ $count }}</div>
                                    <small class="text-muted text-uppercase">{{ $type }}</small>
                                </div>
                            </div>
                            @endif
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Right Column: Quick Stats --}}
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-chart-bar me-2 text-success"></i>Estadísticas Rápidas
                            </h6>
                        </div>
                        <div class="card-body">
                            <ul class="list-unstyled mb-0">
                                <li class="d-flex justify-content-between py-2 border-bottom">
                                    <span>Áreas Comunes</span>
                                    <span class="badge bg-info">{{ $stats['areas_comunes'] ?? 0 }}</span>
                                </li>
                                <li class="d-flex justify-content-between py-2 border-bottom">
                                    <span>Cámaras Activas</span>
                                    <span class="badge bg-dark">{{ $stats['camaras'] ?? 0 }}</span>
                                </li>
                                <li class="d-flex justify-content-between py-2 border-bottom">
                                    <span>Pagos Pendientes</span>
                                    <span class="badge bg-warning">{{ $stats['pagos_pendientes'] ?? 0 }}</span>
                                </li>
                                <li class="d-flex justify-content-between py-2 border-bottom">
                                    <span>Pagos Pagados</span>
                                    <span class="badge bg-success">{{ $stats['pagos_pagados'] ?? 0 }}</span>
                                </li>
                                <li class="d-flex justify-content-between py-2">
                                    <span>Guardias</span>
                                    <span class="badge bg-secondary">{{ $usersByRole['guardia'] ?? 0 }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Recent Payments --}}
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center">
                            <h6 class="mb-0">
                                <i class="fas fa-history me-2 text-warning"></i>Pagos Recientes
                            </h6>
                            <a href="#payments" class="btn btn-sm btn-outline-primary" data-bs-toggle="tab">
                                Ver todos
                            </a>
                        </div>
                        <div class="card-body p-0">
                            <div class="list-group list-group-flush">
                                @forelse($recentPayments as $payment)
                                <div class="list-group-item border-0 py-3">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0">
                                            <span class="payment-status status-{{ $payment->estado }}"></span>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <div class="d-flex justify-content-between">
                                                <strong class="small">{{ $payment->user->name }}</strong>
                                                <span class="text-{{ $payment->estado == 'pagado' ? 'success' : 'warning' }}">
                                                    {{ $payment->moneda }} {{ number_format($payment->monto, 2) }}
                                                </span>
                                            </div>
                                            <div class="small text-muted">
                                                {{ $payment->unidad->codigo ?? 'Sin unidad' }} • 
                                                {{ $payment->created_at->diffForHumans() }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @empty
                                <div class="list-group-item border-0 text-center py-4">
                                    <i class="fas fa-money-bill-wave fa-2x text-muted mb-2"></i>
                                    <p class="text-muted mb-0">No hay pagos recientes</p>
                                </div>
                                @endforelse
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Tab 2: Users --}}
        <div class="tab-pane fade" id="users" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0">
                    <i class="fas fa-users me-2 text-primary"></i>Usuarios del Condominio
                </h5>
                <div>
                    <button class="btn btn-primary" onclick="generateInvitationToken({{ $condominio->id }})">
                        <i class="fas fa-share-alt me-2"></i>Invitar Usuario
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Usuario</th>
                            <th>Rol</th>
                            <th>Contacto</th>
                            <th>Estado</th>
                            <th>Ingreso</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($condominio->usuarios as $user)
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $user->getAvatarUrl() }}" 
                                         alt="{{ $user->name }}" 
                                         class="user-avatar me-3">
                                    <div>
                                        <strong>{{ $user->name }}</strong>
                                        <div class="small text-muted">{{ $user->email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-{{ $user->role == 'admin' ? 'primary' : ($user->role == 'propietario' ? 'success' : ($user->role == 'inquilino' ? 'info' : 'secondary')) }}">
                                    {{ $user->getRoleDisplayAttribute() }}
                                </span>
                            </td>
                            <td>
                                <div class="small">
                                    @if($user->telefono)
                                    <i class="fas fa-phone me-1"></i>{{ $user->telefono }}<br>
                                    @endif
                                    @if($user->whatsapp)
                                    <i class="fab fa-whatsapp me-1 text-success"></i>{{ $user->whatsapp }}
                                    @endif
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-{{ $user->estado == 'activo' ? 'success' : ($user->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                    {{ $user->estado_display }}
                                </span>
                            </td>
                            <td>
                                <div class="small">
                                    {{ $user->fecha_ingreso ? $user->fecha_ingreso->format('d/m/Y') : 'N/A' }}
                                    @if($user->ultimo_acceso)
                                    <div class="text-muted">Último: {{ $user->ultimo_acceso->diffForHumans() }}</div>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="#" class="btn btn-outline-primary" title="Ver">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @if($user->whatsapp_url)
                                    <a href="{{ $user->whatsapp_url }}" 
                                       class="btn btn-outline-success" 
                                       target="_blank"
                                       title="WhatsApp">
                                        <i class="fab fa-whatsapp"></i>
                                    </a>
                                    @endif
                                    <button class="btn btn-outline-danger" title="Eliminar">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-4">
                                <i class="fas fa-user-slash fa-2x text-muted mb-2"></i>
                                <p class="text-muted">No hay usuarios en este condominio</p>
                                <button class="btn btn-primary" onclick="generateInvitationToken({{ $condominio->id }})">
                                    <i class="fas fa-share-alt me-2"></i>Invitar primer usuario
                                </button>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Tab 3: Units --}}
        <div class="tab-pane fade" id="units" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0">
                    <i class="fas fa-building me-2 text-primary"></i>Unidades del Condominio
                </h5>
                <div>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
                        <i class="fas fa-plus-circle me-2"></i>Agregar Unidad
                    </button>
                </div>
            </div>

            <div class="row">
                @forelse($condominio->unidades as $unidad)
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card border h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">
                                        {{ $unidad->codigo }}
                                        <span class="badge bg-{{ $unidad->tipo == 'departamento' ? 'primary' : ($unidad->tipo == 'cochera' ? 'success' : 'secondary') }}">
                                            {{ ucfirst($unidad->tipo) }}
                                        </span>
                                    </h5>
                                    <p class="card-text text-muted small mb-0">
                                        {{ $unidad->descripcion }}
                                    </p>
                                </div>
                                <span class="badge bg-{{ $unidad->estado == 'ocupado' ? 'success' : ($unidad->estado == 'vacio' ? 'secondary' : 'warning') }}">
                                    {{ ucfirst($unidad->estado) }}
                                </span>
                            </div>

                            @if($unidad->propietario)
                            <div class="d-flex align-items-center mb-3">
                                <img src="{{ $unidad->propietario->getAvatarUrl() }}" 
                                     alt="{{ $unidad->propietario->name }}" 
                                     class="user-avatar me-3">
                                <div>
                                    <strong>{{ $unidad->propietario->name }}</strong>
                                    <div class="small text-muted">Propietario</div>
                                </div>
                            </div>
                            @endif

                            <div class="row g-2">
                                @if($unidad->area)
                                <div class="col-6">
                                    <div class="border rounded p-2 text-center">
                                        <small class="text-muted d-block">Área</small>
                                        <strong>{{ $unidad->area }} m²</strong>
                                    </div>
                                </div>
                                @endif
                                @if($unidad->habitaciones)
                                <div class="col-6">
                                    <div class="border rounded p-2 text-center">
                                        <small class="text-muted d-block">Habitaciones</small>
                                        <strong>{{ $unidad->habitaciones }}</strong>
                                    </div>
                                </div>
                                @endif
                            </div>

                            <div class="mt-3 d-flex justify-content-between">
                                <small class="text-muted">
                                    <i class="far fa-calendar me-1"></i>
                                    {{ $unidad->created_at->format('d/m/Y') }}
                                </small>
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-primary">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-outline-danger">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <div class="card text-center py-5">
                        <div class="card-body">
                            <i class="fas fa-building fa-3x text-muted mb-3"></i>
                            <h5 class="card-title">No hay unidades</h5>
                            <p class="card-text text-muted mb-3">
                                Este condominio no tiene unidades registradas.
                            </p>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUnitModal">
                                <i class="fas fa-plus-circle me-2"></i>Agregar primera unidad
                            </button>
                        </div>
                    </div>
                </div>
                @endforelse
            </div>
        </div>

        {{-- Tab 4: Payments --}}
        <div class="tab-pane fade" id="payments" role="tabpanel">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="mb-0">
                    <i class="fas fa-credit-card me-2 text-primary"></i>Pagos del Condominio
                </h5>
                <div class="btn-group">
                    <button class="btn btn-outline-primary">Hoy</button>
                    <button class="btn btn-outline-primary">Mes</button>
                    <button class="btn btn-outline-primary">Año</button>
                    <button class="btn btn-outline-primary">Todos</button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Usuario</th>
                            <th>Unidad</th>
                            <th>Tipo</th>
                            <th>Monto</th>
                            <th>Estado</th>
                            <th>Vencimiento</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($condominio->pagos as $pago)
                        <tr>
                            <td>
                                <strong>{{ $pago->codigo_pago }}</strong>
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <img src="{{ $pago->user->getAvatarUrl() }}" 
                                         alt="{{ $pago->user->name }}" 
                                         class="user-avatar me-2">
                                    {{ $pago->user->name }}
                                </div>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ $pago->unidad->codigo ?? 'N/A' }}</span>
                            </td>
                            <td>
                                <span class="badge bg-info">{{ ucfirst($pago->tipo) }}</span>
                            </td>
                            <td>
                                <strong>{{ $pago->moneda }} {{ number_format($pago->monto, 2) }}</strong>
                            </td>
                            <td>
                                <span class="badge bg-{{ $pago->estado == 'pagado' ? 'success' : ($pago->estado == 'pendiente' ? 'warning' : 'danger') }}">
                                    {{ ucfirst($pago->estado) }}
                                </span>
                            </td>
                            <td>
                                <div class="small">
                                    {{ $pago->fecha_vencimiento->format('d/m/Y') }}
                                    @if($pago->fecha_vencimiento->isPast() && $pago->estado == 'pendiente')
                                    <div class="text-danger small">Vencido</div>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    @if($pago->estado == 'pendiente')
                                    <button class="btn btn-outline-success" title="Marcar como pagado">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    @endif
                                    <button class="btn btn-outline-primary" title="Ver detalles">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="btn btn-outline-danger" title="Cancelar">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center py-4">
                                <i class="fas fa-money-bill-wave fa-2x text-muted mb-2"></i>
                                <p class="text-muted">No hay pagos registrados</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Tab 5: Settings --}}
        <div class="tab-pane fade" id="settings" role="tabpanel">
            <div class="row">
                <div class="col-lg-8">
                    <h5 class="mb-4">
                        <i class="fas fa-cog me-2 text-primary"></i>Configuración del Condominio
                    </h5>

                    <form method="POST" action="{{ route('superadmin.condominios.update', $condominio->id) }}" id="settingsForm">
                        @csrf
                        @method('PUT')
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Tasa de Mora (%)</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="tasa_mora" 
                                       value="{{ $condominio->getConfig('tasa_mora', 5.0) }}"
                                       step="0.1"
                                       min="0"
                                       max="100">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Días de Gracia</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="dias_gracia" 
                                       value="{{ $condominio->getConfig('dias_gracia', 3) }}"
                                       min="0"
                                       max="30">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Máx. Visitantes por Unidad</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="max_visitantes_por_unidad" 
                                       value="{{ $condominio->getConfig('max_visitantes_por_unidad', 5) }}"
                                       min="1"
                                       max="20">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Reserva Máx. Días Anticipación</label>
                                <input type="number" 
                                       class="form-control" 
                                       name="reserva_max_dias_anticipacion" 
                                       value="{{ $condominio->getConfig('reserva_max_dias_anticipacion', 30) }}"
                                       min="1"
                                       max="365">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Multa por Ruido</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ $condominio->moneda_simbolo }}</span>
                                    <input type="number" 
                                           class="form-control" 
                                           name="multa_ruido" 
                                           value="{{ $condominio->getConfig('multa_ruido', 50.0) }}"
                                           step="0.01"
                                           min="0">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Multa por Estacionamiento</label>
                                <div class="input-group">
                                    <span class="input-group-text">{{ $condominio->moneda_simbolo }}</span>
                                    <input type="number" 
                                           class="form-control" 
                                           name="multa_estacionamiento" 
                                           value="{{ $condominio->getConfig('multa_estacionamiento', 100.0) }}"
                                           step="0.01"
                                           min="0">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="notificaciones_automaticas" 
                                           id="notificaciones_automaticas" {{ $condominio->getConfig('notificaciones_automaticas', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="notificaciones_automaticas">
                                        Notificaciones Automáticas
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="bloqueo_reservas_mora" 
                                           id="bloqueo_reservas_mora" {{ $condominio->getConfig('bloqueo_reservas_mora', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="bloqueo_reservas_mora">
                                        Bloquear reservas por mora
                                    </label>
                                </div>
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" name="mostrar_camaras_publicas" 
                                           id="mostrar_camaras_publicas" {{ $condominio->getConfig('mostrar_camaras_publicas', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="mostrar_camaras_publicas">
                                        Mostrar cámaras públicas a residentes
                                    </label>
                                </div>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Guardar Configuración
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-history me-2 text-info"></i>Historial de Cambios
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="list-group list-group-flush">
                                <!-- Activity log will be loaded here -->
                                <div class="text-center py-3">
                                    <i class="fas fa-history fa-2x text-muted mb-2"></i>
                                    <p class="text-muted small">No hay historial de cambios</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Add Unit Modal --}}
<div class="modal fade" id="addUnitModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus-circle me-2"></i>Agregar Unidad
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="#">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Código de Unidad</label>
                        <input type="text" class="form-control" name="codigo" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Tipo</label>
                        <select class="form-select" name="tipo" required>
                            <option value="departamento">Departamento</option>
                            <option value="cochera">Cochera</option>
                            <option value="deposito">Depósito</option>
                            <option value="combinado">Combinado</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Descripción</label>
                        <textarea class="form-control" name="descripcion" rows="3"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
// Same functions as in index.blade.php
function generateInvitationToken(condominioId) {
    // Implementation here
}

function createBackup(condominioId) {
    // Implementation here
}

function suspendCondominio(condominioId) {
    // Implementation here
}

function activateCondominio(condominioId) {
    // Implementation here
}

// Tab persistence
document.addEventListener('DOMContentLoaded', function() {
    // Save active tab to localStorage
    const tabEl = document.querySelector('button[data-bs-toggle="tab"]');
    if (tabEl) {
        tabEl.addEventListener('shown.bs.tab', function(event) {
            localStorage.setItem('activeCondominioTab', event.target.id);
        });
    }

    // Load active tab from localStorage
    const activeTab = localStorage.getItem('activeCondominioTab');
    if (activeTab) {
        const tab = new bootstrap.Tab(document.getElementById(activeTab));
        tab.show();
    }

    // Auto-refresh stats every 30 seconds
    setInterval(() => {
        fetch(window.location.href + '?partial=stats')
            .then(response => response.json())
            .then(data => {
                // Update stats dynamically
                // Implementation here
            });
    }, 30000);
});
</script>
@endpush