@extends('layouts.app')

@section('title', 'Cómo va la venta')

@section('content')
@php
    $metodosPago = [
        'efectivo' => ['etiqueta' => 'Efectivo', 'color' => '#157F3D'],
        'yape' => ['etiqueta' => 'Yape', 'color' => '#6D28D9'],
        'transferencia' => ['etiqueta' => 'Transferencia', 'color' => '#1D4ED8'],
        'tarjeta' => ['etiqueta' => 'Tarjeta', 'color' => '#B54708'],
    ];
    $totalMetodos = 0;
    foreach ($metodosPago as $clave => $_) {
        $totalMetodos += (float) ($por_metodo[$clave] ?? 0);
    }

    $desglose = $desglose_venta ?? ['grupos' => [], 'total_emitidos' => 0];
    $gruposDesglose = $desglose['grupos'] ?? [];
    $totalEmitidos = (int) ($desglose['total_emitidos'] ?? 0);
@endphp
<style>
    .dash-entradas { background:#fff; border:1px solid var(--color-line); border-radius:16px; padding:1.25rem 1.35rem; }
    .dash-entradas-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
    .dash-entradas-title { font-size:1.05rem; font-weight:700; color:var(--color-ink,#122); }
    .dash-pill { display:inline-flex; align-items:center; border-radius:999px; padding:0.2rem 0.7rem; font-size:0.8rem; font-weight:700; }
    .dash-pill--mint { background:#E8F5EE; color:#0F6B3C; }
    .dash-total { text-align:right; }
    .dash-total-label { display:block; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; color:#0F6B3C; }
    .dash-total-num { font-size:1.75rem; font-weight:800; color:#0F6B3C; line-height:1.1; }
    .dash-bloque { border:1px solid #E5E7EB; border-radius:14px; padding:0.85rem 1rem; margin-top:0.75rem; border-left-width:4px; }
    .dash-bloque-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.5rem; margin-bottom:0.55rem; }
    .dash-bloque-titulo { font-size:0.78rem; font-weight:800; letter-spacing:0.03em; text-transform:uppercase; }
    .dash-fila { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.4rem 0; border-top:1px solid #F1F5F9; font-size:0.95rem; }
    .dash-fila:first-of-type { border-top:0; }
    .dash-fila strong { font-variant-numeric:tabular-nums; }
    .dash-fila-num { text-align:right; line-height:1.2; }
    .dash-fila-detalle { display:block; margin-top:0.15rem; font-size:0.72rem; font-weight:600; color:var(--color-muted,#667); }
    .dash-tag { display:inline-block; margin-left:0.35rem; border-radius:6px; background:#DCFCE7; color:#166534; font-size:0.7rem; font-weight:700; padding:0.1rem 0.4rem; vertical-align:middle; }
    .dash-padron-grid { display:grid; gap:0.55rem; margin-top:0.75rem; }
    .dash-padron-box { background:#F8FAFC; border:1px solid #E2E8F0; border-radius:12px; padding:0.65rem 0.8rem; }
    .dash-padron-box .lbl { font-size:0.78rem; color:var(--color-muted,#667); }
    .dash-padron-box .val { font-size:1.15rem; font-weight:800; color:var(--color-ink,#122); }
    .dash-nota { margin-top:0.85rem; font-size:0.78rem; line-height:1.4; color:var(--color-muted,#667); }
</style>
<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">Cómo va la venta</h1>
            <p class="page-uso">Resumen de todas las cajas. Elija Hoy, Esta semana, Todo el evento, o un rango de fechas.</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.dashboard', ['periodo' => $key]) }}"
                   class="rounded-xl px-4 py-2 text-[16px] font-semibold {{ $periodo === $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 grid gap-4 md:grid-cols-3">
        <div>
            <label class="field-label" for="desde">Desde</label>
            <input id="desde" type="date" name="desde" value="{{ $fecha_desde instanceof \Carbon\Carbon ? $fecha_desde->format('Y-m-d') : $fecha_desde }}" class="field-input">
        </div>
        <div>
            <label class="field-label" for="hasta">Hasta</label>
            <input id="hasta" type="date" name="hasta" value="{{ $fecha_hasta instanceof \Carbon\Carbon ? $fecha_hasta->format('Y-m-d') : $fecha_hasta }}" class="field-input">
        </div>
        <div class="flex items-end">
            <div class="form-actions w-full">
                <button class="btn-primary" type="submit">Ver resumen</button>
            </div>
        </div>
    </form>

    <div class="grid gap-4 lg:grid-cols-2">
        <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($recaudado_periodo, 2) }}</span>
            <span class="text-data">Hoy S/ {{ number_format($recaudado_hoy, 2) }} · Todo el evento S/ {{ number_format($recaudado_acumulado, 2) }}</span>
            @if ($totalMetodos > 0)
                <div class="resumen-barra-mix" aria-hidden="true">
                    @foreach ($metodosPago as $clave => $item)
                        @php $ancho = ((float) ($por_metodo[$clave] ?? 0) / $totalMetodos) * 100; @endphp
                        @if ($ancho > 0)
                            <span style="width: {{ $ancho }}%; background: {{ $item['color'] }}"></span>
                        @endif
                    @endforeach
                </div>
            @endif
            <div class="resumen-desglose">
                @foreach ($metodosPago as $clave => $item)
                    <div class="resumen-desglose-fila">
                        <span class="text-data"><span class="resumen-desglose-punto" style="background: {{ $item['color'] }}"></span>{{ $item['etiqueta'] }}</span>
                        <strong class="text-data">S/ {{ number_format($por_metodo[$clave] ?? 0, 2) }}</strong>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="dash-entradas">
            <div class="dash-entradas-head">
                <div>
                    <div class="dash-entradas-title">
                        Entradas vendidas ({{ $rango['etiqueta'] }})
                        <span class="dash-pill dash-pill--mint">{{ $totalEmitidos }} ítems</span>
                    </div>
                </div>
                <div class="dash-total">
                    <span class="dash-total-label">TOTAL EMITIDOS</span>
                    <span class="dash-total-num">{{ $totalEmitidos }}</span>
                </div>
            </div>

            @forelse ($gruposDesglose as $grupo)
                <div class="dash-bloque" style="border-left-color: {{ $grupo['color'] }}">
                    <div class="dash-bloque-head">
                        <span class="dash-bloque-titulo" style="color: {{ $grupo['color'] }}">
                            {{ $grupo['letra'] }}. {{ $grupo['titulo'] }}
                        </span>
                        <span class="dash-pill" style="background: {{ $grupo['color'] }}18; color: {{ $grupo['color'] }}">
                            {{ $grupo['badge'] }}
                        </span>
                    </div>
                    @foreach ($grupo['filas'] as $item)
                        <div class="dash-fila">
                            <span class="text-data">
                                {{ $item['etiqueta'] }}
                                @if (!empty($item['badge']))
                                    <span class="dash-tag">{{ $item['badge'] }}</span>
                                @endif
                            </span>
                            <div class="dash-fila-num">
                                <strong class="text-data">{{ $item['cantidad'] }}</strong>
                                @if (!empty($item['detalle']))
                                    <span class="dash-fila-detalle">{{ $item['detalle'] }}</span>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @empty
                <p class="text-data">Sin ventas en este periodo.</p>
            @endforelse
            <p class="dash-nota">A y B cuentan paquetes/entradas; en C (reinado/danza) la cifra grande son personas (plazas): un código puede ser para varias personas y el cobro es por persona. El dinero total está en «Dinero cobrado»; lo pendiente en «Saldo por cobrar». Para cuadrar soles use Reporte de ventas.</p>
        </div>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <div class="resumen-cifra resumen-cifra--marca">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Aforo día kermés</span>
            <span class="resumen-cifra-valor">{{ $aforo['ocupados'] }} <span class="text-lg font-normal text-[var(--color-muted)]">/ {{ $aforo['maximo'] }}</span></span>
            <div class="mt-2 h-2 rounded-full bg-[var(--color-line)] overflow-hidden">
                <div class="h-full bg-[var(--color-brand)]" style="width: {{ min(100, $aforo['porcentaje']) }}%"></div>
            </div>
            <span class="text-data">{{ $aforo['porcentaje'] }}% ocupado</span>
        </div>
        <div class="resumen-cifra resumen-cifra--warn">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Saldo por cobrar</span>
            <span class="resumen-cifra-valor">S/ {{ number_format($saldo_por_cobrar, 2) }}</span>
            <span class="text-data">Saldo de ventas a medias (todo el evento). No suma con los precios de Entradas vendidas.</span>
            <a class="resumen-cifra-ir" href="{{ route('admin.deudores') }}">{{ $ventas_incompletas }} ventas pendientes</a>
        </div>
        <div class="resumen-cifra resumen-cifra--ok">
            <span class="resumen-cifra-barra" aria-hidden="true"></span>
            <span class="field-label">Padrón</span>
            <span class="resumen-cifra-valor">{{ $padron['total'] }}</span>
            <span class="text-data">alumnos vigentes</span>

            <div class="dash-padron-grid">
                <div class="dash-padron-box">
                    <div class="lbl">Familias</div>
                    <div class="val">{{ $padron['familias'] ?? 0 }}</div>
                    <div class="lbl mt-1">
                        Con 1 paquete: {{ $padron['familias_un_paquete'] ?? 0 }}
                        · Con 2 paquetes: {{ $padron['familias_dos_paquetes'] ?? 0 }}
                    </div>
                </div>
                <div class="dash-padron-box">
                    <div class="lbl">Paquetes que deben venderse</div>
                    <div class="val">{{ $padron['paquetes_esperados'] ?? 0 }}</div>
                    <div class="lbl mt-1">= familias de 1 paquete + (familias de 4+ hijos × 2)</div>
                </div>
                <div class="dash-padron-box">
                    <div class="lbl">Avance de paquetes</div>
                    <div class="val">{{ $padron['paquetes_vendidos'] ?? 0 }} / {{ $padron['paquetes_esperados'] ?? 0 }}</div>
                    <div class="mt-2 h-2 rounded-full bg-[var(--color-line)] overflow-hidden">
                        <div class="h-full bg-[var(--color-brand)]" style="width: {{ min(100, $padron['porcentaje_paquetes'] ?? 0) }}%"></div>
                    </div>
                    <div class="lbl mt-1">Faltan {{ $padron['paquetes_faltan'] ?? 0 }} · {{ $padron['porcentaje_paquetes'] ?? 0 }}%</div>
                </div>
            </div>

            @if (auth()->user()->puedeVerPadronEstado())
                <a class="resumen-cifra-ir" href="{{ route('padron.estado') }}">Ver padrón y estado de pago</a>
            @endif
        </div>
    </div>

    <div class="card-panel overflow-hidden w-fit max-w-full">
        <div class="border-b border-[var(--color-line)] px-4 py-3">
            <h2 class="font-semibold">Cómo van las cajeras ({{ $rango['etiqueta'] }})</h2>
        </div>
        <div class="tabla-lineas-wrap tabla-lineas-wrap--ajustada" style="border:0;border-radius:0">
            <table class="data-table data-table--lineas data-table--ajustada">
                <thead>
                    <tr>
                        <th>Cajera</th>
                        <th>Punto de venta</th>
                        <th>Caja de hoy</th>
                        <th>Ventas</th>
                        <th>Dinero cobrado</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($cajeras as $fila)
                        <tr>
                            <td class="text-data">{{ $fila['nombre'] }}</td>
                            <td class="text-data">{{ $fila['punto'] }}@if ($fila['serie']) ({{ $fila['serie'] }})@endif</td>
                            <td class="caja-estado--{{ $fila['caja_clase'] }}">{{ $fila['caja'] }}</td>
                            <td class="text-data">{{ $fila['ventas'] }}</td>
                            <td class="text-data font-bold">S/ {{ number_format($fila['recaudado'], 2) }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-data">No hay cajeras activas.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection