{{-- ARCHIVO: resources/views/admin/dashboard/index.blade.php --}}
{{-- VERSIÓN: 1.0 - COMPLETA 100% FUNCIONAL --}}
{{-- DESCRIPCIÓN: Dashboard principal para administrador de condominio --}}
{{-- COMPATIBILIDAD: Laravel 11.47 --}}
{{-- FECHA: 2024-12-09 --}}

@extends('layouts.admin')

@section('title', $pageTitle)
@section('page-icon', $pageIcon)

@section('breadcrumb')
    @parent
    <li class="breadcrumb-item active">Dashboard</li>
@endsection

@push('styles')
<style>
    .stat-card {
        border-radius: 12px;
        border: none;
        transition: all 0.3s ease;
        overflow: hidden;
    }
    
    .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }
    
    .bloque-card {
        border-left: 4px solid #667eea;
    }
    
    .bloque-card.inactive {
        border-left-color: #6c757d;
        opacity: 0.8;
    }
    
    .bloque-card.maintenance {
        border-left-color: #ffc107;
    }
    
    .activity-item {
        border-left: 3px solid transparent;
        transition: all 0.2s ease;
    }
    
    .activity-item:hover {
        background-color: #f8f9fa;
        border-left-color: #667eea;
    }
    
    .progress-thin {
        height: 8px;
    }
    
    .moroso-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }
    
    .quick-action-btn {
        padding: 0.75rem 1rem;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    
    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }
    
    .reservation-status {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
        border-radius: 20px;
    }
    
    .chart-container {
        position: relative;
        height: 300px;
    }
</style>
@endpush

@section('content')
@if(isset($error))
    <div class="alert alert-danger">
        <i class="fas fa-exclamation-triangle me-2"></i>
        {{ $error }}
    </div>
@else
<div class="container-fluid">
    {{-- Welcome Header --}}
    <div class="row mb-4">
        <div class="col">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-2">
                                <i class="fas fa-building me-2"></i>
                                Bienvenido, {{ auth()->user()->name }}
                            </h2>
                            <p class="mb-0">
                                Estás administrando <strong>{{ $condominio->nombre }}</strong>
                                @if($condominio->bloques_count > 0)
                                    | {{ $condominio->bloques_count }} {{ $condominio->bloques_count == 1 ? 'bloque' : 'bloques' }}
                                @endif
                            </p>
                        </div>
                        <div class="col-md-4 text-md-end">
                            <div class="d-flex flex-column">
                                <span class="mb-1">
                                    <i class="far fa-calendar me-1"></i>
                                    {{ now()->translatedFormat('l, d \de F \de Y') }}
                                </span>
                                <span>
                                    <i class="far fa-clock me-1"></i>
                                    {{ now()->format('H:i') }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="row mb-4">
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3">
                        <i class="fas fa-bolt me-2"></i>Acciones Rápidas
                    </h5>
                    <div class="row g-3">
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{{ route('admin.payments.create') }}" class="btn btn-success w-100 quick-action-btn">
                                <i class="fas fa-plus-circle fa-2x mb-2"></i>
                                <div>Crear Pago</div>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{{ route('admin.users.create') }}" class="btn btn-primary w-100 quick-action-btn">
                                <i class="fas fa-user-plus fa-2x mb-2"></i>
                                <div>Agregar Usuario</div>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{{ route('admin.reservas.create') }}" class="btn btn-info w-100 quick-action-btn">
                                <i class="fas fa-calendar-plus fa-2x mb-2"></i>
                                <div>Nueva Reserva</div>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{{ route('admin.unidades.create') }}" class="btn btn-warning w-100 quick-action-btn">
                                <i class="fas fa-home fa-2x mb-2"></i>
                                <div>Agregar Unidad</div>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{{ route('admin.reports.financial') }}" class="btn btn-secondary w-100 quick-action-btn">
                                <i class="fas fa-file-export fa-2x mb-2"></i>
                                <div>Exportar Reporte</div>
                            </a>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <a href="{{ route('admin.notifications.index') }}" class="btn btn-danger w-100 quick-action-btn position-relative">
                                <i class="fas fa-bell fa-2x mb-2"></i>
                                <div>Notificaciones</div>
                                @if($notificaciones->count() > 0)
                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                        {{ $notificaciones->count() }}
                                    </span>
                                @endif
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Statistics Overview --}}
    <div class="row mb-4">
        {{-- Users Stats --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-primary h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-3">
                            <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                                <i class="fas fa-users"></i>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="text-primary fw-bold fs-4">{{ $stats['total_usuarios'] ?? 0 }}</div>
                            <div class="text-muted">Usuarios Totales</div>
                            <div class="small mt-2">
                                <span class="text-success">{{ $stats['propietarios'] ?? 0 }} prop.</span> |
                                <span class="text-info">{{ $stats['inquilinos'] ?? 0 }} inqui.</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ route('admin.users.index') }}" class="text-decoration-none small">
                        <i class="fas fa-arrow-right me-1"></i>Ver todos
                    </a>
                </div>
            </div>
        </div>

        {{-- Units Stats --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-success h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-3">
                            <div class="stat-icon bg-success bg-opacity-10 text-success">
                                <i class="fas fa-home"></i>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="text-success fw-bold fs-4">{{ $stats['total_unidades'] ?? 0 }}</div>
                            <div class="text-muted">Unidades Totales</div>
                            <div class="progress progress-thin mt-2">
                                @php
                                    $ocupacion = $stats['total_unidades'] > 0 
                                        ? ($stats['unidades_ocupadas'] / $stats['total_unidades']) * 100 
                                        : 0;
                                @endphp
                                <div class="progress-bar bg-success" role="progressbar" 
                                     style="width: {{ $ocupacion }}%">
                                </div>
                            </div>
                            <div class="small mt-1">
                                {{ round($ocupacion, 1) }}% ocupación
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ route('admin.unidades.index') }}" class="text-decoration-none small">
                        <i class="fas fa-arrow-right me-1"></i>Ver unidades
                    </a>
                </div>
            </div>
        </div>

        {{-- Financial Stats --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-warning h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-3">
                            <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                                <i class="fas fa-money-bill-wave"></i>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="text-warning fw-bold fs-4">
                                {{ $condominio->moneda }} {{ number_format($stats['ingresos_mes'] ?? 0, 2) }}
                            </div>
                            <div class="text-muted">Ingresos del Mes</div>
                            <div class="small mt-2">
                                <span class="text-danger">{{ $stats['pagos_pendientes'] ?? 0 }} pendientes</span> |
                                <span class="text-warning">{{ $stats['pagos_atrasados'] ?? 0 }} atrasados</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ route('admin.payments.index') }}" class="text-decoration-none small">
                        <i class="fas fa-arrow-right me-1"></i>Ver pagos
                    </a>
                </div>
            </div>
        </div>

        {{-- Reservations Stats --}}
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stat-card border-left-info h-100">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-3">
                            <div class="stat-icon bg-info bg-opacity-10 text-info">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                        </div>
                        <div class="col-9">
                            <div class="text-info fw-bold fs-4">{{ $stats['reservas_mes'] ?? 0 }}</div>
                            <div class="text-muted">Reservas del Mes</div>
                            <div class="small mt-2">
                                <span class="text-info">{{ $stats['areas_comunes'] ?? 0 }} áreas</span> |
                                <span class="text-success">{{ $stats['areas_alquilables'] ?? 0 }} alquilables</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent">
                    <a href="{{ route('admin.reservas.index') }}" class="text-decoration-none small">
                        <i class="fas fa-arrow-right me-1"></i>Ver reservas
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Main Content Row --}}
    <div class="row">
        {{-- Left Column: Blocks and Recent Activity --}}
        <div class="col-lg-8">
            {{-- Blocks Overview --}}
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-layer-group me-2"></i>Bloques/Edificios
                    </h5>
                </div>
                <div class="card-body">
                    @if($bloques->count() > 0)
                        <div class="row g-3">
                            @foreach($bloques as $bloque)
                            <div class="col-md-6">
                                <div class="card bloque-card h-100 {{ $bloque->estado != 'activo' ? $bloque->estado : '' }}">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <div>
                                                <h6 class="card-title mb-1">
                                                    <i class="fas fa-building me-1"></i>
                                                    {{ $bloque->nombre }}
                                                </h6>
                                                <p class="card-text small text-muted mb-2">
                                                    <i class="fas fa-hashtag me-1"></i>{{ $bloque->codigo }}
                                                    @if($bloque->direccion)
                                                        <br><i class="fas fa-map-marker-alt me-1"></i>
                                                        {{ Str::limit($bloque->direccion, 40) }}
                                                    @endif
                                                </p>
                                            </div>
                                            <span class="badge bg-{{ $bloque->estado == 'activo' ? 'success' : ($bloque->estado == 'mantenimiento' ? 'warning' : 'secondary') }}">
                                                {{ $bloque->estado_display ?? ucfirst($bloque->estado) }}
                                            </span>
                                        </div>
                                        
                                        <div class="row g-2 mb-3">
                                            <div class="col-6">
                                                <div class="text-center p-2 border rounded">
                                                    <div class="text-primary fw-bold">{{ $bloque->unidades_count ?? 0 }}</div>
                                                    <small class="text-muted">Unidades</small>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-center p-2 border rounded">
                                                    <div class="text-success fw-bold">{{ $bloque->unidades_ocupadas_count ?? 0 }}</div>
                                                    <small class="text-muted">Ocupadas</small>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <small class="text-muted">Ocupación:</small>
                                                <small class="fw-bold">{{ $bloque->ocupacion_porcentaje ?? 0 }}%</small>
                                            </div>
                                            <div class="progress progress-thin">
                                                <div class="progress-bar bg-success" role="progressbar" 
                                                     style="width: {{ $bloque->ocupacion_porcentaje ?? 0 }}%">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small class="text-muted">
                                                <i class="fas fa-door-open me-1"></i>
                                                {{ $bloque->pisos }} pisos
                                            </small>
                                            <a href="{{ route('admin.bloques.show', $bloque->id) }}" 
                                               class="btn btn-sm btn-outline-primary">
                                                <i class="fas fa-eye me-1"></i>Ver
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-layer-group fa-3x text-muted mb-3"></i>
                            <h5>No hay bloques registrados</h5>
                            <p class="text-muted">Comienza creando bloques para organizar las unidades.</p>
                            <a href="{{ route('admin.bloques.create') }}" class="btn btn-primary">
                                <i class="fas fa-plus-circle me-2"></i>Crear Primer Bloque
                            </a>
                        </div>
                    @endif
                </div>
                @if($bloques->count() > 0)
                <div class="card-footer bg-light">
                    <a href="{{ route('admin.bloques.index') }}" class="text-decoration-none">
                        <i class="fas fa-arrow-right me-1"></i>Ver todos los bloques
                    </a>
                </div>
                @endif
            </div>

            {{-- Recent Activity --}}
            <div class="card mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-history me-2"></i>Actividad Reciente
                    </h5>
                    <a href="{{ route('admin.activity-logs') }}" class="btn btn-sm btn-outline-secondary">
                        Ver todo
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($actividadReciente as $activity)
                        <div class="list-group-item activity-item">
                            <div class="d-flex w-100 justify-content-between">
                                <div class="d-flex">
                                    <div class="flex-shrink-0 me-3">
                                        <span class="badge bg-{{ $activity['color'] ?? 'primary' }} rounded-circle p-2">
                                            <i class="fas fa-{{ $activity['icon'] ?? 'info-circle' }}"></i>
                                        </span>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1">{{ $activity['title'] }}</h6>
                                        <p class="mb-1 text-muted">{{ $activity['description'] }}</p>
                                        <small class="text-muted">
                                            <i class="far fa-clock me-1"></i>
                                            {{ $activity['timestamp']->diffForHumans() }}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="list-group-item text-center py-4">
                            <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No hay actividad reciente</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Column: Pending Actions and Notifications --}}
        <div class="col-lg-4">
            {{-- Pending Payments --}}
            <div class="card mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-clock me-2"></i>Pagos Pendientes
                        <span class="badge bg-danger ms-2">{{ $pagosPendientes->count() }}</span>
                    </h5>
                    <a href="{{ route('admin.payments.pending') }}" class="btn btn-sm btn-outline-danger">
                        Ver todos
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($pagosPendientes as $pago)
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <div>
                                    <h6 class="mb-1">
                                        <i class="fas fa-user me-1"></i>
                                        {{ $pago->user->name ?? 'N/A' }}
                                    </h6>
                                    <p class="mb-1 small">
                                        <i class="fas fa-home me-1"></i>
                                        {{ $pago->unidad->codigo ?? 'N/A' }}
                                        @if($pago->unidad->bloque)
                                            ({{ $pago->unidad->bloque->nombre }})
                                        @endif
                                    </p>
                                    <span class="badge bg-{{ $pago->estado == 'atrasado' ? 'danger' : 'warning' }}">
                                        {{ $pago->estado_display }}
                                    </span>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold text-{{ $pago->estado == 'atrasado' ? 'danger' : 'warning' }}">
                                        {{ $pago->moneda }} {{ number_format($pago->monto, 2) }}
                                    </div>
                                    <small class="text-muted">
                                        Vence: {{ $pago->fecha_vencimiento->format('d/m') }}
                                    </small>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="list-group-item text-center py-3">
                            <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                            <p class="text-muted mb-0">No hay pagos pendientes</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Upcoming Reservations --}}
            <div class="card mb-4">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-calendar-alt me-2"></i>Próximas Reservas
                    </h5>
                    <a href="{{ route('admin.reservas.calendar') }}" class="btn btn-sm btn-outline-primary">
                        Calendario
                    </a>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($reservasRecientes as $reserva)
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between">
                                <div>
                                    <h6 class="mb-1">{{ $reserva->areaComun->nombre ?? 'N/A' }}</h6>
                                    <p class="mb-1 small">
                                        <i class="fas fa-user me-1"></i>
                                        {{ $reserva->user->name ?? 'N/A' }}
                                    </p>
                                    <span class="badge bg-{{ $reserva->estado == 'aprobado' ? 'success' : ($reserva->estado == 'pendiente' ? 'warning' : 'secondary') }} reservation-status">
                                        {{ $reserva->estado_display ?? ucfirst($reserva->estado) }}
                                    </span>
                                </div>
                                <div class="text-end">
                                    <div class="fw-bold">
                                        {{ $reserva->fecha_reserva->format('d/m') }}
                                    </div>
                                    <small class="text-muted">
                                        {{ $reserva->hora_inicio->format('H:i') }} - {{ $reserva->hora_fin->format('H:i') }}
                                    </small>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="list-group-item text-center py-3">
                            <i class="fas fa-calendar-times fa-2x text-muted mb-2"></i>
                            <p class="text-muted mb-0">No hay reservas próximas</p>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Debtors --}}
            @if($morosos->count() > 0)
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0 text-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>Morosos
                    </h5>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @foreach($morosos as $moroso)
                        <div class="list-group-item">
                            <div class="d-flex w-100 justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1">{{ $moroso->user->name ?? 'N/A' }}</h6>
                                    <small class="text-muted">
                                        {{ $moroso->user->role_display ?? 'Usuario' }}
                                    </small>
                                </div>
                                <div class="text-end">
                                    <span class="badge bg-danger moroso-badge">
                                        {{ $condominio->moneda }} {{ number_format($moroso->total_deuda, 2) }}
                                    </span>
                                    <div>
                                        <a href="{{ route('admin.users.show', $moroso->user_id) }}" 
                                           class="btn btn-sm btn-outline-danger mt-1">
                                            <i class="fas fa-envelope me-1"></i>Recordar
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            {{-- Popular Common Areas --}}
            @if($areasPopulares->count() > 0)
            <div class="card">
                <div class="card-header bg-light">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line me-2"></i>Áreas Más Solicitadas
                    </h5>
                </div>
                <div class="card-body">
                    @foreach($areasPopulares as $area)
                    <div class="mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span>{{ $area->nombre }}</span>
                            <span class="badge bg-info">{{ $area->reservas_count }} reservas</span>
                        </div>
                        <div class="progress progress-thin">
                            @php
                                $maxReservas = $areasPopulares->max('reservas_count');
                                $percentage = $maxReservas > 0 ? ($area->reservas_count / $maxReservas) * 100 : 0;
                            @endphp
                            <div class="progress-bar bg-info" role="progressbar" 
                                 style="width: {{ $percentage }}%">
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
// Auto-refresh notifications
function refreshNotifications() {
    fetch('/admin/notifications/unread-count')
        .then(response => response.json())
        .then(data => {
            const badge = document.querySelector('.quick-action-btn .badge');
            if (badge) {
                if (data.count > 0) {
                    badge.textContent = data.count;
                    badge.style.display = 'inline-block';
                } else {
                    badge.style.display = 'none';
                }
            }
        });
}

// Refresh every 30 seconds
setInterval(refreshNotifications, 30000);

// Mark notification as read
document.addEventListener('DOMContentLoaded', function() {
    // Notification click handler
    document.querySelectorAll('.notification-item').forEach(item => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            const notificationId = this.dataset.notificationId;
            
            fetch(`/admin/notifications/${notificationId}/read`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                if (response.ok) {
                    this.classList.remove('bg-light');
                    // Update count
                    refreshNotifications();
                }
            });
        });
    });
});
</script>
@endpush