@extends('partials.layout')

@section('title','Detalle del Cuadre de Caja')
@section('subtitle','Resumen de lecturas por manguera')

@section('back')
    <a class="btn" href="{{ route('cierres_turno.cuadre_caja.lista') }}">← Volver a la lista</a>
@endsection

@section('content')
    <div style="display:grid;gap:12px;margin-bottom:14px">
        <div style="padding:12px 14px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;color:#334155">
            <strong>Fecha:</strong> {{ $fecha }}<br>
            <strong>Turno:</strong> {{ $items->first()->turno->turnos ?? 'N/A' }}<br>
            <strong>Usuario:</strong> {{ trim(($items->first()->usuario->nombres ?? '') . ' ' . ($items->first()->usuario->apellidos ?? '') . ' ' . ($items->first()->usuario->usuario ?? '')) }}
        </div>

        <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:900px">
                <thead style="background:#eff6ff;text-align:left">
                    <tr>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Isla</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Lado</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Manguera</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Combustible</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Saldo inicial</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Saldo final</th>
                        <th style="padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#1e3a8a">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $item)
                        <tr style="border-top:1px solid #e5eefb">
                            <td style="padding:10px 12px;color:#111827">{{ $item->manguera->cara->estacion->nombre ?? 'N/A' }}</td>
                            <td style="padding:10px 12px;color:#111827">{{ $item->manguera->cara->nombre ?? 'N/A' }}</td>
                            <td style="padding:10px 12px;color:#111827">{{ $item->manguera->numero_manguera ?? 'N/A' }}</td>
                            <td style="padding:10px 12px;color:#111827">{{ $item->manguera->tipoCombustible->nombre ?? 'N/A' }}</td>
                            <td style="padding:10px 12px;color:#111827">{{ number_format((float)($item->saldo_inicial ?? 0), 3) }}</td>
                            <td style="padding:10px 12px;color:#111827">{{ number_format((float)($item->saldo_final ?? 0), 3) }}</td>
                            <td style="padding:10px 12px;color:#111827">{{ number_format((float)($item->total ?? 0), 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection
