@extends('layouts.admin')

@section('title', 'Reporte de Reservas de Canchas')

@section('content')
<div class="container-fluid">
    <!-- Encabezado -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Reporte de Reservas de Canchas</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.reportes.index') }}">Reportes</a></li>
                        <li class="breadcrumb-item active">Reservas</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Filtros de Búsqueda</h4>
                </div>
                <div class="card-body">
                    <form method="GET" action="{{ route('admin.reportes.reservas') }}">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="date" class="form-control" id="fecha_inicio" name="fecha_inicio" 
                                       value="{{ $fechaInicio }}">
                            </div>
                            <div class="col-md-3">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="date" class="form-control" id="fecha_fin" name="fecha_fin" 
                                       value="{{ $fechaFin }}">
                            </div>
                            <div class="col-md-3">
                                <label for="estado" class="form-label">Estado</label>
                                <select class="form-select" id="estado" name="estado">
                                    <option value="">Todos los estados</option>
                                    <option value="pendiente" {{ $estado == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                    <option value="confirmada" {{ $estado == 'confirmada' ? 'selected' : '' }}>Confirmada</option>
                                    <option value="cancelada" {{ $estado == 'cancelada' ? 'selected' : '' }}>Cancelada</option>
                                    <option value="completada" {{ $estado == 'completada' ? 'selected' : '' }}>Completada</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="cancha_id" class="form-label">Cancha</label>
                                <select class="form-select" id="cancha_id" name="cancha_id">
                                    <option value="">Todas las canchas</option>
                                    @foreach($todasCanchas as $cancha)
                                        <option value="{{ $cancha->id }}" {{ $canchaId == $cancha->id ? 'selected' : '' }}>
                                            {{ $cancha->nombre }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-1"></i>Filtrar
                                </button>
                                <a href="{{ route('admin.reportes.reservas') }}" class="btn btn-secondary">
                                    <i class="fas fa-undo me-1"></i>Limpiar
                                </a>
                                <a href="{{ route('admin.reportes.exportar', ['tipo' => 'reservas', 'fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin, 'estado' => $estado, 'cancha_id' => $canchaId]) }}" 
                                   class="btn btn-success">
                                    <i class="fas fa-file-excel me-1"></i>Exportar Excel
                                </a>
                                <a href="{{ route('admin.reportes.exportar-reservas-pdf', ['fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin, 'estado' => $estado, 'cancha_id' => $canchaId]) }}" 
                                   class="btn btn-danger">
                                    <i class="fas fa-file-pdf me-1"></i>Exportar PDF
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Estadísticas generales -->
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-primary fs-2">
                                <i class="fas fa-calendar-check"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Total Reservas</h6>
                            <h4 class="my-1">{{ $totalReservas }}</h4>
                            <p class="text-muted mb-0">Período seleccionado</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-success fs-2">
                                <i class="fas fa-check-circle"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Confirmadas</h6>
                            <h4 class="my-1 text-success">{{ $reservasConfirmadas }}</h4>
                            <p class="text-muted mb-0">{{ $totalReservas > 0 ? round(($reservasConfirmadas / $totalReservas) * 100, 1) : 0 }}% del total</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-warning fs-2">
                                <i class="fas fa-clock"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Pendientes</h6>
                            <h4 class="my-1 text-warning">{{ $reservasPendientes }}</h4>
                            <p class="text-muted mb-0">{{ $totalReservas > 0 ? round(($reservasPendientes / $totalReservas) * 100, 1) : 0 }}% del total</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <span class="badge badge-soft-danger fs-2">
                                <i class="fas fa-times-circle"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Canceladas</h6>
                            <h4 class="my-1 text-danger">{{ $reservasCanceladas }}</h4>
                            <p class="text-muted mb-0">{{ $totalReservas > 0 ? round(($reservasCanceladas / $totalReservas) * 100, 1) : 0 }}% del total</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gráficos -->
    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Evolución de Reservas por Día</h4>
                </div>
                <div class="card-body">
                    <canvas id="reservasPorDiaChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Distribución por Estado</h4>
                </div>
                <div class="card-body">
                    <canvas id="reservasPorEstadoChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Análisis de horarios y patrones -->
    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Reservas por Hora del Día</h4>
                </div>
                <div class="card-body">
                    <canvas id="reservasPorHoraChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Reservas por Día de la Semana</h4>
                </div>
                <div class="card-body">
                    <canvas id="reservasPorDiaSemanaChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top canchas y usuarios -->
    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Top 10 Canchas Más Reservadas</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-nowrap mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Cancha</th>
                                    <th>Categoría</th>
                                    <th>Reservas</th>
                                    <th>Tasa Ocupación</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topCanchas as $index => $cancha)
                                    <tr>
                                        <td>
                                            @if($index == 0)
                                                <i class="fas fa-trophy text-warning"></i>
                                            @elseif($index == 1)
                                                <i class="fas fa-medal text-secondary"></i>
                                            @elseif($index == 2)
                                                <i class="fas fa-award text-warning"></i>
                                            @else
                                                {{ $index + 1 }}
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    @if($cancha->imagen_principal)
                                                        <img src="{{ asset('storage/' . $cancha->imagen_principal) }}" 
                                                             alt="Cancha" class="rounded" width="30" height="30" style="object-fit: cover;">
                                                    @else
                                                        <div class="avatar-xs">
                                                            <span class="avatar-title bg-primary-subtle text-primary rounded">
                                                                <i class="fas fa-futbol"></i>
                                                            </span>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $cancha->nombre }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary-subtle text-primary">
                                                {{ $cancha->categoria->nombre }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-info-subtle text-info fs-6">
                                                {{ $cancha->total_reservas }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar bg-success" role="progressbar" 
                                                     style="width: {{ $cancha->tasa_ocupacion }}%">
                                                </div>
                                            </div>
                                            <small class="text-muted">{{ number_format($cancha->tasa_ocupacion, 1) }}%</small>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No hay datos disponibles</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Top 10 Usuarios Más Activos</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-nowrap mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>#</th>
                                    <th>Usuario</th>
                                    <th>Reservas</th>
                                    <th>Total Gastado</th>
                                    <th>Promedio</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($topUsuarios as $index => $usuario)
                                    <tr>
                                        <td>
                                            @if($index == 0)
                                                <i class="fas fa-crown text-warning"></i>
                                            @elseif($index == 1)
                                                <i class="fas fa-star text-secondary"></i>
                                            @elseif($index == 2)
                                                <i class="fas fa-gem text-info"></i>
                                            @else
                                                {{ $index + 1 }}
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title bg-success-subtle text-success rounded-circle">
                                                            {{ strtoupper(substr($usuario->name, 0, 1)) }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $usuario->name }}</h6>
                                                    <p class="text-muted mb-0 small">{{ $usuario->email }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary-subtle text-primary fs-6">
                                                {{ $usuario->total_reservas }}
                                            </span>
                                        </td>
                                        <td>
                            <span class="text-success fw-medium">
                                {{ $simboloMoneda }}{{ number_format($usuario->total_gastado, 2) }}
                            </span>
                        </td>
                        <td>
                            {{ $simboloMoneda }}{{ number_format($usuario->total_reservas > 0 ? $usuario->total_gastado / $usuario->total_reservas : 0, 2) }}
                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center">No hay datos disponibles</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla detallada de reservas -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Detalle de Reservas</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered dt-responsive nowrap w-100" id="tablaReservas">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Usuario</th>
                                    <th>Cancha</th>
                                    <th>Fecha</th>
                                    <th>Hora Inicio</th>
                                    <th>Hora Fin</th>
                                    <th>Duración</th>
                                    <th>Estado</th>
                                    <th>Precio</th>
                                    <th>Método Pago</th>
                                    <th>Fecha Reserva</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($reservas as $reserva)
                                    <tr>
                                        <td>{{ $reserva->id }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    <div class="avatar-xs">
                                                        <span class="avatar-title bg-success-subtle text-success rounded-circle">
                                                            {{ strtoupper(substr($reserva->usuario->name, 0, 1)) }}
                                                        </span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $reserva->usuario->name }}</h6>
                                                    <p class="text-muted mb-0 small">{{ $reserva->usuario->email }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    @if($reserva->cancha->imagen_principal)
                                                        <img src="{{ asset('storage/' . $reserva->cancha->imagen_principal) }}" 
                                                             alt="Cancha" class="rounded" width="30" height="30" style="object-fit: cover;">
                                                    @else
                                                        <div class="avatar-xs">
                                                            <span class="avatar-title bg-primary-subtle text-primary rounded">
                                                                <i class="fas fa-futbol"></i>
                                                            </span>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    <h6 class="mb-0">{{ $reserva->cancha->nombre }}</h6>
                                                    <p class="text-muted mb-0 small">{{ $reserva->cancha->categoria->nombre }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ \Carbon\Carbon::parse($reserva->fecha)->format('d/m/Y') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($reserva->hora_inicio)->format('H:i') }}</td>
                                        <td>{{ \Carbon\Carbon::parse($reserva->hora_fin)->format('H:i') }}</td>
                                        <td>
                                            @php
                                                $inicio = \Carbon\Carbon::parse($reserva->hora_inicio);
                                                $fin = \Carbon\Carbon::parse($reserva->hora_fin);
                                                $duracion = $fin->diffInHours($inicio);
                                            @endphp
                                            {{ $duracion }}h
                                        </td>
                                        <td>
                                            @if($reserva->estado == 'confirmada')
                                                <span class="badge bg-success">Confirmada</span>
                                            @elseif($reserva->estado == 'pendiente')
                                                <span class="badge bg-warning">Pendiente</span>
                                            @elseif($reserva->estado == 'cancelada')
                                                <span class="badge bg-danger">Cancelada</span>
                                            @elseif($reserva->estado == 'completada')
                                                <span class="badge bg-info">Completada</span>
                                            @else
                                                <span class="badge bg-secondary">{{ ucfirst($reserva->estado) }}</span>
                                            @endif
                                        </td>
                                        <td>
                            <span class="text-success fw-medium">
                                {{ $simboloMoneda }}{{ number_format($reserva->precio_total, 2) }}
                            </span>
                        </td>
                                        <td>
                                            @if($reserva->pago)
                                                <span class="badge bg-primary-subtle text-primary">
                                                    {{ $reserva->pago->metodoPago->nombre ?? 'N/A' }}
                                                </span>
                                            @else
                                                <span class="text-muted">Sin pago</span>
                                            @endif
                                        </td>
                                        <td>{{ $reserva->created_at->format('d/m/Y H:i') }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="11" class="text-center py-4">
                                            <i class="fas fa-info-circle text-muted me-2"></i>No hay reservas disponibles
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Paginación -->
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="pagination-block">
                                {{ $reservas->appends(request()->query())->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// Gráfico de evolución de reservas por día
const ctxDia = document.getElementById('reservasPorDiaChart').getContext('2d');
const reservasPorDiaData = @json($reservasPorDia);

new Chart(ctxDia, {
    type: 'line',
    data: {
        labels: reservasPorDiaData.map(item => item.fecha),
        datasets: [{
            label: 'Reservas',
            data: reservasPorDiaData.map(item => item.total),
            borderColor: '#405189',
            backgroundColor: 'rgba(64, 81, 137, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

// Gráfico de reservas por estado
const ctxEstado = document.getElementById('reservasPorEstadoChart').getContext('2d');
const reservasPorEstadoData = @json($reservasPorEstado);

new Chart(ctxEstado, {
    type: 'doughnut',
    data: {
        labels: reservasPorEstadoData.map(item => item.estado.charAt(0).toUpperCase() + item.estado.slice(1)),
        datasets: [{
            data: reservasPorEstadoData.map(item => item.total),
            backgroundColor: ['#0ab39c', '#f7b84b', '#f06292', '#405189'],
            borderWidth: 2,
            borderColor: '#fff'
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'bottom',
                labels: {
                    padding: 20,
                    usePointStyle: true
                }
            }
        }
    }
});

// Gráfico de reservas por hora
const ctxHora = document.getElementById('reservasPorHoraChart').getContext('2d');
const reservasPorHoraData = @json($reservasPorHora);

new Chart(ctxHora, {
    type: 'bar',
    data: {
        labels: reservasPorHoraData.map(item => item.hora + ':00'),
        datasets: [{
            label: 'Reservas',
            data: reservasPorHoraData.map(item => item.total),
            backgroundColor: '#0ab39c',
            borderColor: '#0ab39c',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

// Gráfico de reservas por día de la semana
const ctxDiaSemana = document.getElementById('reservasPorDiaSemanaChart').getContext('2d');
const reservasPorDiaSemanaData = @json($reservasPorDiaSemana);

new Chart(ctxDiaSemana, {
    type: 'bar',
    data: {
        labels: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'],
        datasets: [{
            label: 'Reservas',
            data: reservasPorDiaSemanaData.map(item => item.total),
            backgroundColor: '#f7b84b',
            borderColor: '#f7b84b',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    stepSize: 1
                }
            }
        }
    }
});

// DataTable
$(document).ready(function() {
    $('#tablaReservas').DataTable({
        "pageLength": 10,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json"
        }
    });
});
</script>
@endsection