@extends('layouts.admin')

@section('title', 'Reporte de Ingresos por 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 Ingresos por 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">Ingresos</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.ingresos') }}">
                        <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 ?? now()->startOfMonth()->format('Y-m-d') }}">
                            </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 ?? now()->endOfMonth()->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-3">
                                <label for="cancha_id" class="form-label">Cancha Específica</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-md-3">
                                <label for="agrupacion" class="form-label">Agrupar por</label>
                                <select class="form-select" id="agrupacion" name="agrupacion">
                                    <option value="dia" {{ $agrupacion == 'dia' ? 'selected' : '' }}>Día</option>
                                    <option value="semana" {{ $agrupacion == 'semana' ? 'selected' : '' }}>Semana</option>
                                    <option value="mes" {{ $agrupacion == 'mes' ? 'selected' : '' }}>Mes</option>
                                </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.ingresos') }}" class="btn btn-secondary">
                                    <i class="fas fa-undo me-1"></i>Limpiar
                                </a>
                                <a href="{{ route('admin.reportes.exportar', ['tipo' => 'ingresos', 'fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin, 'cancha_id' => $canchaId, 'agrupacion' => $agrupacion]) }}" 
                                   class="btn btn-success">
                                    <i class="fas fa-file-excel me-1"></i>Exportar Excel
                                </a>
                                <a href="{{ route('admin.reportes.exportar-ingresos-pdf', ['fecha_inicio' => $fechaInicio, 'fecha_fin' => $fechaFin, 'cancha_id' => $canchaId, 'agrupacion' => $agrupacion]) }}" 
                                   class="btn btn-danger">
                                    <i class="fas fa-file-pdf me-1"></i>Exportar PDF
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Resumen de ingresos -->
    <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-success fs-2">
                                <i class="fas fa-dollar-sign"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Ingresos Totales</h6>
                            <span class="counter-value">{{ $simboloMoneda }}{{ number_format($ingresosTotales ?? 0, 2) }}</span>
                            <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-info fs-2">
                                <i class="fas fa-chart-line"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Promedio Diario</h6>
                            <h4 class="my-1 text-info">{{ $simboloMoneda }}{{ number_format($promedioDiario, 2) }}</h4>
                            <p class="text-muted mb-0">Ingresos por día</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-trophy"></i>
                            </span>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="mb-0">Mejor Día</h6>
                            <h4 class="my-1 text-warning">{{ $simboloMoneda }}{{ number_format($mejorDia, 2) }}</h4>
                            <p class="text-muted mb-0">Mayor ingreso diario</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-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 text-primary">{{ $totalReservas }}</h4>
                            <p class="text-muted mb-0">Reservas procesadas</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 Ingresos</h4>
                </div>
                <div class="card-body">
                    <canvas id="ingresosChart" height="300"></canvas>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Ingresos por Cancha</h4>
                </div>
                <div class="card-body">
                    <canvas id="ingresosPorCanchaChart" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Top canchas por ingresos -->
    <div class="row">
        <div class="col-xl-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Top 10 Canchas por Ingresos</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>Tipo</th>
                                    <th>Reservas</th>
                                    <th>Ingresos</th>
                                    <th>Promedio</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>{{ $cancha->total_reservas }}</td>
                                        <td>
                            <span class="text-success fw-medium">
                                {{ $simboloMoneda }}{{ number_format($cancha->total_ingresos, 2) }}
                            </span>
                        </td>
                        <td>
                            {{ $simboloMoneda }}{{ number_format($cancha->total_reservas > 0 ? $cancha->total_ingresos / $cancha->total_reservas : 0, 2) }}
                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" 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">Análisis de Tendencias</h4>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="p-3 border rounded">
                                <h6 class="mb-1">Crecimiento Mensual</h6>
                                <h4 class="mb-0 {{ $crecimientoMensual >= 0 ? 'text-success' : 'text-danger' }}">
                                    {{ $crecimientoMensual >= 0 ? '+' : '' }}{{ number_format($crecimientoMensual, 1) }}%
                                </h4>
                                <p class="text-muted mb-0 small">vs mes anterior</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 border rounded">
                                <h6 class="mb-1">Día Más Rentable</h6>
                                <h4 class="mb-0 text-primary">{{ $diaMasRentable }}</h4>
                                <p class="text-muted mb-0 small">de la semana</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 border rounded">
                                <h6 class="mb-1">Hora Pico</h6>
                                <h4 class="mb-0 text-info">{{ $horaPico }}:00</h4>
                                <p class="text-muted mb-0 small">mayor actividad</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="p-3 border rounded">
                                <h6 class="mb-1">Ticket Promedio</h6>
                                <h4 class="mb-0 text-warning">{{ $simboloMoneda }}{{ number_format($ticketPromedio, 2) }}</h4>
                                <p class="text-muted mb-0 small">por reserva</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla detallada de ingresos -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">Detalle de Ingresos por Período</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered dt-responsive nowrap w-100" id="tablaIngresos">
                            <thead>
                                <tr>
                                    <th>Período</th>
                                    <th>Cancha</th>
                                    <th>Tipo Deporte</th>
                                    <th>Reservas</th>
                                    <th>Ingresos Brutos</th>
                                    <th>Comisiones</th>
                                    <th>Ingresos Netos</th>
                                    <th>Promedio por Reserva</th>
                                    <th>% del Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($reservasPorPeriodo as $detalle)
                                    <tr>
                                        <td>{{ $detalle->periodo }}</td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="flex-shrink-0 me-2">
                                                    @if($detalle->cancha->imagen_principal)
                                                        <img src="{{ asset('storage/' . $detalle->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">{{ $detalle->cancha->nombre }}</h6>
                                                    <p class="text-muted mb-0 small">{{ Str::limit($detalle->cancha->ubicacion, 20) }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="badge bg-primary-subtle text-primary">
                                                {{ $detalle->cancha->categoria->nombre }}
                                            </span>
                                        </td>
                                        <td>
                                            <span class="badge bg-info-subtle text-info fs-6">
                                                {{ $detalle->total_reservas }}
                                            </span>
                                        </td>
                                        <td>
                            <span class="text-success fw-medium">
                                {{ $simboloMoneda }}{{ number_format($detalle->ingresos_brutos, 2) }}
                            </span>
                        </td>
                        <td>
                            <span class="text-warning">
                                {{ $simboloMoneda }}{{ number_format($detalle->comisiones, 2) }}
                            </span>
                        </td>
                        <td>
                            <span class="text-primary fw-bold">
                                {{ $simboloMoneda }}{{ number_format($detalle->ingresos_netos, 2) }}
                            </span>
                        </td>
                        <td>
                            {{ $simboloMoneda }}{{ number_format($detalle->total_reservas > 0 ? $detalle->ingresos_netos / $detalle->total_reservas : 0, 2) }}
                        </td>
                                        <td>
                                            <div class="progress" style="height: 6px;">
                                                <div class="progress-bar" role="progressbar" 
                                                     style="width: {{ ($ingresosTotales ?? 0) > 0 ? ($detalle->ingresos_netos / $ingresosTotales) * 100 : 0 }}%">
                                                </div>
                                            </div>
                                            <small class="text-muted">
                                                {{ ($ingresosTotales ?? 0) > 0 ? number_format(($detalle->ingresos_netos / $ingresosTotales) * 100, 1) : 0 }}%
                                            </small>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-4">
                                            <i class="fas fa-info-circle text-muted me-2"></i>No hay datos de ingresos disponibles
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Gráfico de evolución de ingresos
    const ingresosData = @json($ingresosEvolucion ?? []);
    const ingresosChart = new Chart(document.getElementById('ingresosChart'), {
        type: 'line',
        data: {
            labels: ingresosData.map(item => item.periodo),
            datasets: [{
                label: 'Ingresos',
                data: ingresosData.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
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return '{{ $simboloMoneda }}' + context.parsed.y.toFixed(2);
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '{{ $simboloMoneda }}' + value;
                        }
                    }
                }
            }
        }
    });

    // Gráfico de ingresos por cancha
    const ingresosPorCanchaData = @json($ingresosPorCanchaChart ?? []);
    const ingresosPorCanchaChart = new Chart(document.getElementById('ingresosPorCanchaChart'), {
        type: 'doughnut',
        data: {
            labels: ingresosPorCanchaData.map(item => item.nombre),
            datasets: [{
                data: ingresosPorCanchaData.map(item => item.total),
                backgroundColor: [
                    '#405189', '#0ab39c', '#299cdb', '#f7b84b', '#f06548',
                    '#3577f1', '#0ab39c', '#6559cc', '#f7b84b', '#f06548'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': {{ $simboloMoneda }}' + context.parsed.toFixed(2);
                        }
                    }
                }
            }
        }
    });
});

// DataTable
$(document).ready(function() {
    $('#tablaIngresos').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