@extends('layouts.app')

@section('title', 'Reporte de ventas')

@section('content')
@php
    $puntoElegido = request('punto_venta_id');
    $cajeraElegida = request('creado_por');
    $desdeElegido = request('desde');
    $hastaElegido = request('hasta');
    $periodoBoton = ($desdeElegido || $hastaElegido) ? '' : $periodo;
    $excelParams = array_filter([
        'periodo' => $periodoBoton ?: 'personalizado',
        'punto_venta_id' => $puntoElegido,
        'creado_por' => $cajeraElegida,
        'desde' => $desdeElegido,
        'hasta' => $hastaElegido,
    ], fn ($v) => $v !== null && $v !== '');
    $excelUrl = route('admin.reporte-ventas.excel', $excelParams);
@endphp
<div class="mx-auto max-w-7xl space-y-6">
    <div class="page-head flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="font-display text-3xl md:text-4xl">Reporte de ventas</h1>
            <p class="page-uso">Panorama de todo lo vendido. Los totales no cambian. Al descargar Excel, las familias salen juntas.</p>
            <p class="mt-1 text-data">{{ $evento['nombre'] }} · {{ $evento['fecha'] }}</p>
        </div>
        <div class="flex flex-wrap gap-2">
            @foreach (['hoy' => 'Hoy', 'semana' => 'Esta semana', 'evento' => 'Todo el evento'] as $key => $label)
                <a href="{{ route('admin.reporte-ventas', array_filter(['periodo' => $key, 'punto_venta_id' => $puntoElegido, 'creado_por' => $cajeraElegida])) }}"
                   class="rounded-xl px-4 py-2 text-[16px] font-semibold {{ $periodoBoton === $key ? 'bg-[var(--color-brand)] text-white' : 'border border-[var(--color-line)] bg-white' }}">
                    {{ $label }}
                </a>
            @endforeach
        </div>
    </div>

    <form method="GET" class="card-panel p-5">
        <input type="hidden" name="periodo" value="{{ $periodoBoton ?: 'personalizado' }}">
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <div>
                <label class="field-label" for="desde">Desde</label>
                <input id="desde" type="date" name="desde" value="{{ $desdeElegido }}" class="field-input">
            </div>
            <div>
                <label class="field-label" for="hasta">Hasta</label>
                <input id="hasta" type="date" name="hasta" value="{{ $hastaElegido }}" class="field-input">
            </div>
            <div>
                <label class="field-label" for="punto_venta_id">Punto de venta</label>
                <select id="punto_venta_id" name="punto_venta_id" class="field-input">
                    <option value="">Todos los puntos</option>
                    @foreach ($puntos as $pv)
                        <option value="{{ $pv->id }}" @selected((string) $puntoElegido === (string) $pv->id)>{{ $pv->nombre }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="field-label" for="creado_por">Cajera</label>
                <select id="creado_por" name="creado_por" class="field-input">
                    <option value="">Todas las cajeras</option>
                    @foreach ($secretarias as $s)
                        <option value="{{ $s->id }}" @selected((string) $cajeraElegida === (string) $s->id)>{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-actions mt-4 flex flex-wrap items-end gap-3">
            <button class="btn-primary" type="submit">Ver resumen</button>
            @include('venta.partials.descargar-excel')
        </div>
    </form>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="resumen-cifra resumen-cifra--ok">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Dinero cobrado ({{ $rango['etiqueta'] }})</span>
            <span class="resumen-cifra-valor">S/ {{ number_format($resumen['pagado'], 2) }}</span>
            <span class="text-data">De un total de S/ {{ number_format($resumen['precio'], 2) }}</span>
        </div>
        <div class="resumen-cifra resumen-cifra--azul">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Ventas y entradas</span>
            <span class="resumen-cifra-valor">{{ $resumen['ventas'] }}</span>
            <span class="text-data">{{ $resumen['entradas'] }} entradas emitidas</span>
        </div>
        <div class="resumen-cifra resumen-cifra--marca">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Avance de cobro</span>
            <span class="resumen-cifra-valor">{{ $avance_cobro }}%</span>
            <div class="mt-2 h-3 rounded-full bg-[var(--color-line)] overflow-hidden">
                <div class="h-full bg-[var(--color-brand)]" style="width: {{ min(100, $avance_cobro) }}%"></div>
            </div>
        </div>
        <div class="resumen-cifra resumen-cifra--warn">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Saldo pendiente</span>
            <span class="resumen-cifra-valor">S/ {{ number_format($resumen['saldo'], 2) }}</span>
            <a class="resumen-cifra-ir" href="{{ route('admin.deudores') }}">Ver quiénes deben</a>
        </div>
    </div>

    <div class="card-panel p-5">
        <h2 class="font-semibold">Cuadre de soles</h2>
        <p class="mt-2 text-[16px]">
            Valor ventas <strong>S/ {{ number_format($cuadre['valor'], 2) }}</strong>
            = Pagado <strong>S/ {{ number_format($cuadre['pagado'], 2) }}</strong>
            + Saldo <strong>S/ {{ number_format($cuadre['saldo'], 2) }}</strong>
        </p>
        @if (abs($cuadre['delta']) > 0.01)
            <p class="mt-2 rounded-xl border border-amber-300 bg-amber-50 px-3 py-2 text-[15px] text-amber-900">
                Diferencia (delta): S/ {{ number_format($cuadre['delta'], 2) }}. Revisar ventas con precio ≠ pagado + saldo.
            </p>
        @endif
        <p class="field-hint mt-2">No multiplique cantidades del dashboard × precios de etiqueta.</p>
        <div class="mt-4 overflow-x-auto">
            <table class="w-full min-w-[520px] text-left text-[15px]">
                <thead>
                    <tr class="border-b border-[var(--color-line)] text-data">
                        <th class="py-2 pr-3 font-medium">Categoría</th>
                        <th class="py-2 pr-3 font-medium text-right">Ventas</th>
                        <th class="py-2 pr-3 font-medium text-right">Valor</th>
                        <th class="py-2 pr-3 font-medium text-right">Pagado</th>
                        <th class="py-2 font-medium text-right">Saldo</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($por_categoria_dinero as $fila)
                        <tr class="border-b border-[var(--color-line)]/60">
                            <td class="py-2 pr-3">{{ $fila['nombre'] }}</td>
                            <td class="py-2 pr-3 text-right tabular-nums">{{ $fila['ventas'] }}</td>
                            <td class="py-2 pr-3 text-right tabular-nums">S/ {{ number_format($fila['valor'], 2) }}</td>
                            <td class="py-2 pr-3 text-right tabular-nums">S/ {{ number_format($fila['pagado'], 2) }}</td>
                            <td class="py-2 text-right tabular-nums">S/ {{ number_format($fila['saldo'], 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if (abs(($cuadre['abonos'] ?? 0) - $cuadre['pagado']) > 0.01)
            <p class="field-hint mt-3">
                Caja (abonos) S/ {{ number_format($cuadre['abonos'], 2) }}
                vs Pagado en ventas S/ {{ number_format($cuadre['pagado'], 2) }}
            </p>
        @endif
    </div>

    <div class="card-panel p-5">
        <h2 class="font-semibold">Dinero cobrado por día</h2>
        <p class="field-hint">Cada barra es un día. El número de arriba es lo cobrado.</p>
        @if (count($por_dia) > 0)
            <div class="reporte-barras reporte-barras--amplio mt-4">
                @foreach ($por_dia as $barra)
                    <div class="reporte-barra">
                        <em>S/ {{ number_format($barra['pagado'], 0) }}</em>
                        <span class="reporte-barra-fill" style="height: {{ max(8, $barra['porcentaje']) }}%"></span>
                        <small>{{ $barra['dia'] }}</small>
                        <span class="reporte-barra-sub">{{ $barra['ventas'] }} ventas</span>
                    </div>
                @endforeach
            </div>
        @else
            <p class="mt-4 text-[16px] text-data">Aún no hay cobros en este periodo.</p>
        @endif
    </div>

    <div class="grid gap-4 lg:grid-cols-2">
        <div class="card-panel p-5">
            <h2 class="font-semibold">Cómo se cobró</h2>
            <div class="mt-4 space-y-4">
                @foreach ($por_metodo_barras as $fila)
                    <div class="grafico-h">
                        <div class="grafico-h-meta">
                            <span>{{ $fila['nombre'] }}</span>
                            <strong>S/ {{ number_format($fila['pagado'], 2) }}</strong>
                        </div>
                        <div class="grafico-h-track">
                            <span style="width: {{ max($fila['pagado'] > 0 ? 6 : 0, $fila['porcentaje']) }}%"></span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="card-panel p-5">
            <h2 class="font-semibold">Códigos / pases emitidos (cantidades)</h2>
            <p class="field-hint">Conteo de códigos por tipo de pase — no es desglose de soles. El dinero está en «Cuadre de soles».</p>
            <div class="mt-4 space-y-4">
                @foreach ($por_tipo as $fila)
                    <div class="grafico-h">
                        <div class="grafico-h-meta">
                            <span>{{ $fila['nombre'] }}</span>
                            <strong>{{ $fila['ventas'] }}</strong>
                        </div>
                        <div class="grafico-h-track grafico-h-track--azul">
                            <span style="width: {{ max($fila['ventas'] > 0 ? 6 : 0, $fila['porcentaje']) }}%"></span>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="grid gap-4 lg:grid-cols-2">
        <div class="card-panel p-5">
            <h2 class="font-semibold">Por cajera</h2>
            <div class="mt-4 space-y-4">
                @forelse ($por_cajera as $fila)
                    <div class="grafico-h">
                        <div class="grafico-h-meta">
                            <span>{{ $fila['nombre'] }} · {{ $fila['ventas'] }} ventas</span>
                            <strong>S/ {{ number_format($fila['pagado'], 2) }}</strong>
                        </div>
                        <div class="grafico-h-track">
                            <span style="width: {{ max(6, $fila['porcentaje']) }}%"></span>
                        </div>
                    </div>
                @empty
                    <p class="text-[16px] text-data">Sin cobros en este periodo.</p>
                @endforelse
            </div>
        </div>

        <div class="card-panel p-5">
            <h2 class="font-semibold">Por punto de venta</h2>
            <div class="mt-4 space-y-4">
                @forelse ($por_punto as $fila)
                    <div class="grafico-h">
                        <div class="grafico-h-meta">
                            <span>{{ $fila['nombre'] }} · {{ $fila['ventas'] }} ventas</span>
                            <strong>S/ {{ number_format($fila['pagado'], 2) }}</strong>
                        </div>
                        <div class="grafico-h-track grafico-h-track--marca">
                            <span style="width: {{ max(6, $fila['porcentaje']) }}%"></span>
                        </div>
                    </div>
                @empty
                    <p class="text-[16px] text-data">Sin cobros en este periodo.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="card-panel p-5">
        <h2 class="font-semibold">Estado de las ventas</h2>
        <div class="mt-4 grid gap-4 md:grid-cols-2">
            @foreach ($por_estado as $fila)
                <div class="grafico-h">
                    <div class="grafico-h-meta">
                        <span>{{ $fila['nombre'] }}</span>
                        <strong>{{ $fila['ventas'] }}</strong>
                    </div>
                    <div class="grafico-h-track {{ $fila['nombre'] === 'Con saldo pendiente' ? 'grafico-h-track--warn' : '' }}">
                        <span style="width: {{ max($fila['ventas'] > 0 ? 6 : 0, $fila['porcentaje']) }}%"></span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection