@extends('partials.layout')

@section('title','Cuadre de Caja')
@section('subtitle','Listado de cuadres registrados por fecha, turno y usuario')

@section('back')
    <a class="btn" href="{{ route('dashboard') }}">← Volver</a>
@endsection

@section('content')
    <form method="GET" action="{{ route('cierres_turno.cuadre_caja.lista') }}" style="display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
            <div style="display:flex;flex-direction:column;min-width:180px;">
                <label style="font-weight:600;margin-bottom:4px">Fecha inicio</label>
                <input type="date" name="fecha_inicio" value="{{ old('fecha_inicio', $fechaInicio ?? '') }}">
            </div>
            <div style="display:flex;flex-direction:column;min-width:180px;">
                <label style="font-weight:600;margin-bottom:4px">Fecha fin</label>
                <input type="date" name="fecha_fin" value="{{ old('fecha_fin', $fechaFin ?? '') }}">
            </div>
            <div style="display:flex;flex-direction:column;min-width:180px;">
                <label style="font-weight:600;margin-bottom:4px">Turno</label>
                <select name="id_turno">
                    <option value="">Todos</option>
                    @foreach($turnos as $turno)
                        <option value="{{ $turno->id_turno }}" {{ isset($idTurno) && $idTurno == $turno->id_turno ? 'selected' : '' }}>{{ $turno->turnos }}</option>
                    @endforeach
                </select>
            </div>
            <div style="display:flex;flex-direction:column;min-width:220px;">
                <label style="font-weight:600;margin-bottom:4px">Usuario</label>
                <select name="id_usuario">
                    <option value="">Todos</option>
                    @foreach($usuarios as $usuario)
                        <option value="{{ $usuario->id_usuario }}" {{ isset($idUsuario) && $idUsuario == $usuario->id_usuario ? 'selected' : '' }}>{{ trim(($usuario->nombres ?? '') . ' ' . ($usuario->apellidos ?? '') . ' ' . ($usuario->usuario ?? '')) }}</option>
                    @endforeach
                </select>
            </div>
            <div style="display:flex;align-items:flex-end;gap:8px;">
                <button type="submit" class="btn primary">Filtrar</button>
                <a class="btn" href="{{ route('cierres_turno.cuadre_caja.lista') }}">Limpiar</a>
            </div>
        </div>
        <a class="btn primary" href="{{ route('cierres_turno.cuadre_caja') }}">Nuevo cuadre</a>
    </form>

    @if($cuadres->isEmpty())
        <div style="padding:14px 16px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#475569">No hay cuadres de caja registrados todavía.</div>
    @else
        <div style="overflow-x:auto;border:1px solid #e2e8f0;border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,0.06)">
            <table style="width:100%;border-collapse:collapse;min-width:700px">
                <thead style="background:#eff6ff;text-align:left">
                    <tr>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Fecha de registro</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Fecha</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Turno</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Usuario</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Diferencia</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cuadres as $cuadre)
                        <tr style="border-top:1px solid #e5eefb">
                            <td style="padding:10px 12px;color:#334155">{{ $cuadre['fecha_registro'] ?? 'N/A' }}</td>
                            <td style="padding:10px 12px;font-weight:700;color:#111827">{{ $cuadre['fecha_display'] ?? $cuadre['fecha'] }}</td>
                            <td style="padding:10px 12px;color:#334155">{{ $cuadre['turno'] ?? 'N/A' }}</td>
                            <td style="padding:10px 12px;color:#334155">{{ $cuadre['usuario'] ?? 'N/A' }}</td>
                            @php
                                $diferencia = isset($cuadre['diferencia']) ? (float) $cuadre['diferencia'] : 0.0;
                                $diffClass = ($diferencia > -1 && $diferencia < 10) ? 'background:#dcfce7;color:#166534' : 'background:#fee2e2;color:#991b1b';
                            @endphp
                            <td style="padding:10px 12px;"><span style="display:inline-block;padding:6px 10px;border-radius:999px;{{ $diffClass }}">{{ number_format($diferencia, 2, '.', '') }}</span></td>
                            <td style="padding:10px 12px">
                                <a class="btn" href="{{ route('cierres_turno.cuadre_caja.ver', ['fecha' => $cuadre['fecha'], 'idTurno' => $cuadre['id_turno'], 'idUsuario' => $cuadre['id_usuario'], 'fechaRegistro' => $cuadre['fecha_registro_raw'] ?? $cuadre['fecha_registro'] ?? null]) }}{{ request()->getQueryString() ? '?' . request()->getQueryString() : '' }}">Ver detalle</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
@endsection