@extends('layouts.admin')

@section('title', 'Estadísticas de Canchas')
@section('page-title', 'Estadísticas de Canchas')

@section('content')
<div class="row mb-4">
    <!-- Filtros de fecha -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.analytics.estadisticasCanchas') }}" method="GET" class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Fecha Inicio</label>
                        <input type="date" class="form-control" name="fecha_inicio" value="{{ $fechaInicio }}">
                    </div>
                    
                    <div class="col-md-4">
                        <label class="form-label">Fecha Fin</label>
                        <input type="date" class="form-control" name="fecha_fin" value="{{ $fechaFin }}">
                    </div>
                    
                    <div class="col-md-4 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-filter me-2"></i>Filtrar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Canchas más populares -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Canchas Más Populares</h6>
                <a href="{{ route('admin.analytics.exportar', ['tipo' => 'canchas', 'fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin]) }}" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-download me-1"></i>Exportar
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tablaCanchasPopulares">
                        <thead>
                            <tr>
                                <th>Cancha</th>
                                <th>Tipo</th>
                                <th>Total Reservas</th>
                                <th>Ingresos</th>
                                <th>Promedio por Reserva</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($canchasPopulares as $cancha)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm bg-light rounded p-1 me-2">
                                                <i class="fas fa-futbol text-primary"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $cancha->nombre }}</h6>
                                                <small class="text-muted">ID: {{ $cancha->id }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $cancha->categoria->nombre }}</td>
                                    <td>{{ number_format($cancha->reservas_count) }}</td>
                                    <td>{{ format_currency($cancha->reservas_sum_precio_total ?? 0, 2) }}</td>
                                    <td>
                                        @if($cancha->reservas_count > 0)
                                            {{ format_currency(($cancha->reservas_sum_precio_total ?? 0) / $cancha->reservas_count, 2) }}
                                        @else
                                            {{ currency_symbol() }}0.00
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="text-center py-4">
                                        <i class="fas fa-info-circle text-muted me-2"></i>No hay datos disponibles
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Ocupación por día de la semana -->
    <div class="col-xl-6 col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0">Ocupación por Día de la Semana</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="ocupacionPorDiaChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Ocupación por hora -->
    <div class="col-xl-6 col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0">Ocupación por Hora</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="ocupacionPorHoraChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <!-- Estadísticas por tipo de deporte -->
    <div class="col-xl-6 col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0">Estadísticas por Tipo de Deporte</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="deportesChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis de rentabilidad -->
    <div class="col-xl-6 col-lg-6 mb-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0">Análisis de Rentabilidad</h6>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <canvas id="rentabilidadChart"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Mapa de calor de ocupación -->
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Mapa de Calor de Ocupación</h6>
                <div class="btn-group btn-group-sm" role="group">
                    <input type="radio" class="btn-check" name="tipoVisualizacion" id="verSemana" checked>
                    <label class="btn btn-outline-primary" for="verSemana">Semana</label>
                    
                    <input type="radio" class="btn-check" name="tipoVisualizacion" id="verMes">
                    <label class="btn btn-outline-primary" for="verMes">Mes</label>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="mapaCalor">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Lunes</th>
                                <th>Martes</th>
                                <th>Miércoles</th>
                                <th>Jueves</th>
                                <th>Viernes</th>
                                <th>Sábado</th>
                                <th>Domingo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @for($hora = 8; $hora <= 22; $hora++)
                                <tr>
                                    <td class="fw-bold">{{ $hora }}:00</td>
                                    @for($dia = 1; $dia <= 7; $dia++)
                                        <td class="heat-cell" data-dia="{{ $dia }}" data-hora="{{ $hora }}">
                                            <div class="heat-value">0</div>
                                        </td>
                                    @endfor
                                </tr>
                            @endfor
                        </tbody>
                    </table>
                </div>
                <div class="d-flex justify-content-center mt-3">
                    <div class="d-flex align-items-center">
                        <div class="heat-legend-low me-2"></div>
                        <span class="me-3">Baja</span>
                        <div class="heat-legend-medium me-2"></div>
                        <span class="me-3">Media</span>
                        <div class="heat-legend-high me-2"></div>
                        <span>Alta</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.avatar-sm {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heat-cell {
    position: relative;
    height: 40px;
    transition: all 0.3s ease;
}

.heat-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: #333;
}

.heat-legend-low, .heat-legend-medium, .heat-legend-high {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.heat-legend-low {
    background-color: rgba(74, 222, 128, 0.3);
}

.heat-legend-medium {
    background-color: rgba(250, 204, 21, 0.5);
}

.heat-legend-high {
    background-color: rgba(239, 68, 68, 0.7);
}
</style>
@endpush

@push('scripts')
<script>
// Inicializar DataTable
$(document).ready(function() {
    $('#tablaCanchasPopulares').DataTable();
});

// Datos para los gráficos
const ocupacionPorDia = @json($ocupacionPorDia);
const ocupacionPorHora = @json($ocupacionPorHora);
const estadisticasPorDeporte = @json($estadisticasPorDeporte);

// Gráfico de ocupación por día de la semana
const ctxOcupacionDia = document.getElementById('ocupacionPorDiaChart').getContext('2d');
new Chart(ctxOcupacionDia, {
    type: 'bar',
    data: {
        labels: Object.keys(ocupacionPorDia),
        datasets: [{
            label: 'Reservas',
            data: Object.values(ocupacionPorDia),
            backgroundColor: '#2563eb',
            borderColor: '#1d4ed8',
            borderWidth: 1,
            borderRadius: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: '#f1f5f9'
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});

// Gráfico de ocupación por hora
const ctxOcupacionHora = document.getElementById('ocupacionPorHoraChart').getContext('2d');
const horasLabels = Object.keys(ocupacionPorHora).map(hora => `${hora}:00`);
const horasData = Object.values(ocupacionPorHora);

new Chart(ctxOcupacionHora, {
    type: 'line',
    data: {
        labels: horasLabels,
        datasets: [{
            label: 'Reservas',
            data: horasData,
            borderColor: '#059669',
            backgroundColor: 'rgba(5, 150, 105, 0.1)',
            borderWidth: 2,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#059669'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: '#f1f5f9'
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});

// Gráfico de estadísticas por tipo de deporte
const ctxDeportes = document.getElementById('deportesChart').getContext('2d');
const deportesLabels = estadisticasPorDeporte.map(item => item.categoria_nombre);
const deportesData = estadisticasPorDeporte.map(item => item.reservas_count);

new Chart(ctxDeportes, {
    type: 'pie',
    data: {
        labels: deportesLabels,
        datasets: [{
            data: deportesData,
            backgroundColor: [
                '#2563eb',
                '#059669',
                '#d97706',
                '#dc2626',
                '#7c3aed',
                '#db2777'
            ],
            borderWidth: 1,
            borderColor: '#ffffff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    usePointStyle: true
                }
            }
        }
    }
});

// Gráfico de rentabilidad
const ctxRentabilidad = document.getElementById('rentabilidadChart').getContext('2d');
const rentabilidadLabels = estadisticasPorDeporte.map(item => item.categoria_nombre);
const rentabilidadData = estadisticasPorDeporte.map(item => {
    return item.reservas_count > 0 
        ? (item.reservas_sum_precio_total / item.reservas_count) 
        : 0;
});

new Chart(ctxRentabilidad, {
    type: 'bar',
    data: {
        labels: rentabilidadLabels,
        datasets: [{
            label: 'Promedio por Reserva ({{ currency_symbol() }})',
            data: rentabilidadData,
            backgroundColor: '#7c3aed',
            borderColor: '#6d28d9',
            borderWidth: 1,
            borderRadius: 4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return `{{ currency_symbol() }}${context.raw.toFixed(2)}`;
                    }
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: '#f1f5f9'
                },
                ticks: {
                    callback: function(value) {
                        return '{{ currency_symbol() }}' + value.toFixed(2);
                    }
                }
            },
            x: {
                grid: {
                    display: false
                }
            }
        }
    }
});

// Simulación de datos para el mapa de calor
function generarDatosMapaCalor() {
    // Datos simulados de ocupación
    const datos = {};
    
    for (let dia = 1; dia <= 7; dia++) {
        datos[dia] = {};
        for (let hora = 8; hora <= 22; hora++) {
            // Generar valores aleatorios de ocupación (0-10)
            // Con mayor ocupación en horas pico (tarde-noche) y fines de semana
            let base = 2;
            
            // Aumentar en horas pico
            if (hora >= 17 && hora <= 21) {
                base += 3;
            } else if (hora >= 10 && hora <= 13) {
                base += 2;
            }
            
            // Aumentar en fines de semana
            if (dia >= 5) {
                base += 2;
            }
            
            // Añadir algo de aleatoriedad
            const random = Math.floor(Math.random() * 4);
            datos[dia][hora] = Math.min(10, base + random);
        }
    }
    
    return datos;
}

// Actualizar el mapa de calor con los datos
function actualizarMapaCalor(datos) {
    const celdas = document.querySelectorAll('.heat-cell');
    
    celdas.forEach(celda => {
        const dia = celda.dataset.dia;
        const hora = celda.dataset.hora;
        const valor = datos[dia][hora];
        
        // Actualizar el valor
        celda.querySelector('.heat-value').textContent = valor;
        
        // Actualizar el color de fondo según el valor
        if (valor <= 3) {
            celda.style.backgroundColor = `rgba(74, 222, 128, ${valor / 10})`;
        } else if (valor <= 7) {
            celda.style.backgroundColor = `rgba(250, 204, 21, ${valor / 10})`;
        } else {
            celda.style.backgroundColor = `rgba(239, 68, 68, ${valor / 10})`;
        }
    });
}

// Inicializar el mapa de calor
const datosMapaCalor = generarDatosMapaCalor();
actualizarMapaCalor(datosMapaCalor);

// Cambiar entre visualización semanal y mensual
document.getElementById('verSemana').addEventListener('change', function() {
    if (this.checked) {
        actualizarMapaCalor(datosMapaCalor);
    }
});

document.getElementById('verMes').addEventListener('change', function() {
    if (this.checked) {
        // Generar nuevos datos para simulación mensual
        const nuevosDatos = generarDatosMapaCalor();
        actualizarMapaCalor(nuevosDatos);
    }
});
</script>
@endpush