@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard Principal')

@section('content')
<div class="row mb-4">
    <!-- Estadísticas Generales -->
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-primary me-3">
                    <i class="fas fa-users"></i>
                </div>
                <div>
                    <div class="text-muted small">Total Usuarios</div>
                    <div class="h4 mb-0">{{ number_format($estadisticasGenerales['total_usuarios']) }}</div>
                    <small class="text-success">
                        <i class="fas fa-arrow-up"></i>
                        {{ $estadisticasGenerales['usuarios_activos'] }} activos
                    </small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-success me-3">
                    <i class="fas fa-map-marked-alt"></i>
                </div>
                <div>
                    <div class="text-muted small">Total Canchas</div>
                    <div class="h4 mb-0">{{ number_format($estadisticasGenerales['total_canchas']) }}</div>
                    <small class="text-success">
                        <i class="fas fa-check-circle"></i>
                        {{ $estadisticasGenerales['canchas_activas'] }} activas
                    </small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-warning me-3">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div>
                    <div class="text-muted small">Reservas Hoy</div>
                    <div class="h4 mb-0">{{ number_format($estadisticasGenerales['reservas_hoy']) }}</div>
                    <small class="text-info">
                        <i class="fas fa-clock"></i>
                        En tiempo real
                    </small>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stats-card">
            <div class="d-flex align-items-center">
                <div class="stats-icon bg-info me-3">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div>
                    <div class="text-muted small">Ingresos del Mes</div>
                    <div class="h4 mb-0">{{ format_currency($estadisticasGenerales['ingresos_mes'], 2) }}</div>
                    <small class="text-success">
                        <i class="fas fa-trending-up"></i>
                        Este mes
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Accesos Rápidos -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Accesos Rápidos</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3 col-sm-6">
                        <a href="{{ route('admin.canchas.index') }}" class="btn btn-light w-100 py-3 d-flex flex-column align-items-center">
                            <i class="fas fa-map-marked-alt mb-2 text-success fa-2x"></i>
                            <span>Gestionar Canchas</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="{{ route('admin.reservas.index') }}" class="btn btn-light w-100 py-3 d-flex flex-column align-items-center">
                            <i class="fas fa-calendar-check mb-2 text-warning fa-2x"></i>
                            <span>Gestionar Reservas</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="{{ route('admin.eventos.index') }}" class="btn btn-light w-100 py-3 d-flex flex-column align-items-center">
                            <i class="fas fa-trophy mb-2 text-primary fa-2x"></i>
                            <span>Gestionar Eventos</span>
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="{{ route('admin.pagos.index') }}" class="btn btn-light w-100 py-3 d-flex flex-column align-items-center">
                            <i class="fas fa-credit-card mb-2 text-info fa-2x"></i>
                            <span>Sistema de Pagos</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Gráfico de Crecimiento de Usuarios -->
    <div class="col-xl-8 col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Crecimiento de Usuarios (Últimos 6 meses)</h6>
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Ver detalles</a></li>
                        <li><a class="dropdown-item" href="#">Exportar datos</a></li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="usuariosChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Eventos Activos -->
    <div class="col-xl-4 col-lg-5">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Eventos Activos</h6>
                <span class="badge bg-primary">{{ $estadisticasGenerales['eventos_activos'] }}</span>
            </div>
            <div class="card-body">
                @if($estadisticasGenerales['eventos_activos'] > 0)
                    <div class="d-flex align-items-center justify-content-center" style="height: 200px;">
                        <div class="text-center">
                            <i class="fas fa-trophy fa-3x text-warning mb-3"></i>
                            <h4>{{ $estadisticasGenerales['eventos_activos'] }}</h4>
                            <p class="text-muted">Eventos programados</p>
                            <a href="{{ route('admin.eventos.index') }}" class="btn btn-primary btn-sm">
                                Ver todos los eventos
                            </a>
                        </div>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-calendar-times fa-2x text-muted mb-3"></i>
                        <p class="text-muted">No hay eventos activos</p>
                        <a href="{{ route('admin.eventos.create') }}" class="btn btn-primary btn-sm">
                            Crear evento
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Ingresos Mensuales -->
    <div class="col-xl-8 col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Ingresos Mensuales (Últimos 6 meses)</h6>
                <div class="btn-group btn-group-sm" role="group">
                    <input type="radio" class="btn-check" name="ingresosPeriodo" id="ingresos6m" checked>
                    <label class="btn btn-outline-primary" for="ingresos6m">6M</label>
                    
                    <input type="radio" class="btn-check" name="ingresosPeriodo" id="ingresos12m">
                    <label class="btn btn-outline-primary" for="ingresos12m">12M</label>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="ingresosChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top Canchas -->
    <div class="col-xl-4 col-lg-5">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Canchas Más Populares</h6>
                <small class="text-muted">Este mes</small>
            </div>
            <div class="card-body">
                @forelse($topCanchas as $index => $cancha)
                    <div class="d-flex align-items-center mb-3 {{ $loop->last ? '' : 'border-bottom pb-3' }}">
                        <div class="me-3">
                            <span class="badge bg-{{ $index == 0 ? 'warning' : ($index == 1 ? 'secondary' : 'info') }} rounded-pill">
                                {{ $index + 1 }}
                            </span>
                        </div>
                        <div class="flex-grow-1">
                            <h6 class="mb-1">{{ $cancha->nombre }}</h6>
                            <small class="text-muted">{{ $cancha->categoria->nombre }}</small>
                        </div>
                        <div class="text-end">
                            <div class="fw-bold">{{ $cancha->reservas_count }}</div>
                            <small class="text-muted">reservas</small>
                        </div>
                    </div>
                @empty
                    <div class="text-center py-4">
                        <i class="fas fa-chart-bar fa-2x text-muted mb-3"></i>
                        <p class="text-muted">No hay datos disponibles</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Ocupación de Canchas -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Ocupación de Canchas (Este mes)</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="ocupacionChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Actividad Reciente -->
    <div class="col-xl-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Actividad Reciente</h6>
                <a href="#" class="btn btn-sm btn-outline-primary">Ver todo</a>
            </div>
            <div class="card-body">
                <div class="timeline">
                    <div class="timeline-item">
                        <div class="timeline-marker bg-success"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Nueva reserva confirmada</h6>
                            <p class="text-muted small mb-1">Cancha de Fútbol 5 - Juan Pérez</p>
                            <small class="text-muted">Hace 5 minutos</small>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-info"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Nuevo usuario registrado</h6>
                            <p class="text-muted small mb-1">María González se unió a la plataforma</p>
                            <small class="text-muted">Hace 15 minutos</small>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-warning"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Pago procesado</h6>
                            <p class="text-muted small mb-1">{{ currency_symbol() }}50.00 - Reserva #1234</p>
                            <small class="text-muted">Hace 30 minutos</small>
                        </div>
                    </div>
                    
                    <div class="timeline-item">
                        <div class="timeline-marker bg-primary"></div>
                        <div class="timeline-content">
                            <h6 class="mb-1">Evento creado</h6>
                            <p class="text-muted small mb-1">Torneo de Básquet - Abril 2024</p>
                            <small class="text-muted">Hace 1 hora</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Acciones Rápidas -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Acciones Rápidas</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6 mb-3">
                        <a href="{{ route('admin.canchas.create') }}" class="btn btn-outline-primary w-100 py-3">
                            <i class="fas fa-plus-circle fa-2x mb-2"></i>
                            <div>Nueva Cancha</div>
                        </a>
                    </div>
                    
                    <div class="col-md-3 col-sm-6 mb-3">
                        <a href="{{ route('admin.eventos.create') }}" class="btn btn-outline-success w-100 py-3">
                            <i class="fas fa-trophy fa-2x mb-2"></i>
                            <div>Crear Evento</div>
                        </a>
                    </div>
                    
                    <div class="col-md-3 col-sm-6 mb-3">
                        <a href="{{ route('admin.reservas.index') }}" class="btn btn-outline-warning w-100 py-3">
                            <i class="fas fa-calendar-check fa-2x mb-2"></i>
                            <div>Ver Reservas</div>
                        </a>
                    </div>
                    
                    <div class="col-md-3 col-sm-6 mb-3">
                        <a href="{{ route('admin.analytics.dashboard') }}" class="btn btn-outline-info w-100 py-3">
                            <i class="fas fa-chart-line fa-2x mb-2"></i>
                            <div>Ver Analytics</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 20px;
    height: calc(100% + 10px);
    width: 2px;
    background-color: #e2e8f0;
}

.timeline-marker {
    position: absolute;
    left: -26px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #e2e8f0;
}

.timeline-content h6 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.timeline-content p {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}
</style>
@endpush

@push('scripts')
<script>
// Datos para los gráficos
const crecimientoUsuarios = @json($crecimientoUsuarios);
const ingresosMensuales = @json($ingresosMensuales);
const ocupacionCanchas = @json($ocupacionCanchas);

// Gráfico de Crecimiento de Usuarios
const ctxUsuarios = document.getElementById('usuariosChart').getContext('2d');
new Chart(ctxUsuarios, {
    type: 'line',
    data: {
        labels: Object.keys(crecimientoUsuarios),
        datasets: [{
            label: 'Nuevos Usuarios',
            data: Object.values(crecimientoUsuarios),
            borderColor: '#2563eb',
            backgroundColor: 'rgba(37, 99, 235, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: '#f1f5f9'
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});

// Gráfico de Ingresos Mensuales
const ctxIngresos = document.getElementById('ingresosChart').getContext('2d');
new Chart(ctxIngresos, {
    type: 'bar',
    data: {
        labels: Object.keys(ingresosMensuales),
        datasets: [{
            label: 'Ingresos ($)',
            data: Object.values(ingresosMensuales),
            backgroundColor: '#059669',
            borderColor: '#047857',
            borderWidth: 1,
            borderRadius: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: '#f1f5f9'
                },
                ticks: {
                    callback: function(value) {
                        return '{{ currency_symbol() }}' + value.toLocaleString();
                    }
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});

// Gráfico de Ocupación de Canchas
const ctxOcupacion = document.getElementById('ocupacionChart').getContext('2d');
const ocupacionData = ocupacionCanchas.map(cancha => cancha.reservas_count);
const ocupacionLabels = ocupacionCanchas.map(cancha => cancha.nombre);

new Chart(ctxOcupacion, {
    type: 'doughnut',
    data: {
        labels: ocupacionLabels,
        datasets: [{
            data: ocupacionData,
            backgroundColor: [
                '#2563eb',
                '#059669',
                '#d97706',
                '#dc2626',
                '#7c3aed'
            ],
            borderWidth: 2,
            borderColor: '#ffffff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    usePointStyle: true
                }
            }
        }
    }
});

// Actualizar datos cada 30 segundos
setInterval(function() {
    // Aquí podrías hacer una llamada AJAX para actualizar los datos en tiempo real
    console.log('Actualizando datos del dashboard...');
}, 30000);
</script>
@endpush