@extends('partials.layout')

@section('title', 'Nuevo Despacho')
@section('subtitle', 'Registrar una nueva salida de combustible')

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

@section('content')
    @if($items->isNotEmpty())
        <div style="width:100%;max-width:720px;margin:0 auto 12px auto;padding:10px 12px;border:1px solid #e2e8f0;border-radius:12px;background:linear-gradient(135deg,#eff6ff,#f8fafc);box-shadow:0 6px 18px rgba(15,23,42,0.08)">
            <div style="display:flex;flex-direction:column;gap:8px">
                <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#2563eb;font-weight:700">Todos los registros de precios</div>
                <div style="overflow-x:auto;width:100%">
                    <table style="width:100%;border-collapse:collapse;background:#fff;border:1px solid #dbeafe;border-radius:12px;overflow:hidden">
                        <thead>
                            <tr style="background:#eff6ff;text-align:left">
                                <th style="padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#1e3a8a">Tipo</th>
                                <th style="padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#1e3a8a">TM</th>
                                <th style="padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#1e3a8a">TT</th>
                                <th style="padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#1e3a8a">TN</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($items as $item)
                                <tr style="border-top:1px solid #e5eefb">
                                    <td style="padding:6px 8px;font-size:12px;font-weight:700;color:#111827">{{ $item->tipoCombustible->nombre ?? 'N/A' }}</td>
                                    <td style="padding:6px 8px;font-size:12px;color:#111827">{{ number_format($item->precio_turno_manana, 2) }}</td>
                                    <td style="padding:6px 8px;font-size:12px;color:#111827">{{ number_format($item->precio_turno_tarde, 2) }}</td>
                                    <td style="padding:6px 8px;font-size:12px;color:#111827">{{ number_format($item->precio_turno_noche, 2) }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @else
        <div style="margin-bottom:16px;padding:14px 16px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#475569">No hay registros de precios disponibles.</div>
    @endif

    <form method="POST" action="{{ route('registros_salidas.store') }}">
        @csrf

        <div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px">
            {{-- 1) USUARIO --}}
            <div style="grid-column:1/-1">
                <label style="display:block;font-weight:700;margin-bottom:6px">Usuario</label>
                <input type="hidden" name="id_usuario" value="{{ auth()->id() }}">
                <input type="text"
                       value="{{ auth()->user()->nombres ?? auth()->user()->name ?? '' }} {{ auth()->user()->apellidos ?? '' }}"
                       readonly
                       style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">
            </div>

            {{-- 2) FECHA --}}
            <div style="grid-column:1/-1">
                <label style="display:block;font-weight:700;margin-bottom:6px">Fecha</label>
                <input name="fecha_inicio" type="date" value="{{ date('Y-m-d') }}" required
                       style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
            </div>

            {{-- 3) MANGUERA --}}
            <div style="grid-column:1/-1">
                <label style="display:block;font-weight:700;margin-bottom:6px">Manguera</label>
                <select name="id_manguera" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                    <option value="">-- Seleccione Manguera --</option>
                    @foreach($mangueras as $m)
                        <option value="{{ $m->id_manguera }}">
                            ISLA: {{ $m->cara->estacion->nombre }} - LADO: {{ $m->cara->nombre }} - MANGUERA #{{ $m->numero_manguera }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- 4) RESTO --}}
            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Turno</label>
                <select name="id_turno" required style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
                    <option value="">-- Seleccione Turno --</option>
                    @foreach($turnos as $t)
                        <option value="{{ $t->id_turno }}">{{ $t->turnos }}</option>
                    @endforeach
                </select>
            </div>

            {{-- Consumos / cálculo --}}
            <div>
                <label style="display:block;font-weight:700;margin-bottom:6px">Saldo final</label>
                <input id="saldo_final" name="saldo_final" type="number" step="0.001" required
                       style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
            </div>

            <input type="hidden" name="saldo_inicial" id="saldo_inicial" value="0">
        </div>


        <div style="margin-top:14px;display:none">
            <input type="hidden" name="galones" id="galones" value="">
            <input type="hidden" name="precio_galon" id="precio_galon" value="0">
            <input type="hidden" name="total" id="total" value="0">
        </div>

        <script>
            (function () {
                const saldoInicialEl = document.getElementById('saldo_inicial');
                const saldoFinalEl = document.getElementById('saldo_final');
                const galonesEl = document.getElementById('galones');

                function calc() {
                    const saldoInicial = parseFloat(saldoInicialEl?.value);
                    const saldoFinal = parseFloat(saldoFinalEl?.value);

                    if (!Number.isFinite(saldoInicial) || !Number.isFinite(saldoFinal)) {
                        galonesEl.value = '';
                        return;
                    }

                    const galones = saldoFinal - saldoInicial;
                    galonesEl.value = galones.toFixed(3);
                }

                ['input', 'change'].forEach(evt => {
                    saldoInicialEl?.addEventListener(evt, calc);
                    saldoFinalEl?.addEventListener(evt, calc);
                });

                calc();
            })();
        </script>


        <div style="margin-top:20px;display:flex;gap:10px">
            <button class="btn primary" type="submit">Guardar Registro</button>
            <a class="btn" href="{{ route('registros_salidas.index') }}">Cancelar</a>
        </div>
    </form>
@endsection