@extends('partials.layout')

@section('title', 'Editar registro de salida')
@section('subtitle', 'Actualizar registros_salidas')

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

@section('content')
    <form method="POST" action="{{ route('registros_salidas.update', $item->id_salida) }}">
        @csrf
        @method('PUT')

        <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="{{ old('id_usuario', $item->id_usuario ?? auth()->id()) }}">
                <input type="text"
                       value="{{ old('usuario_nombre', (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="{{ old('fecha_inicio', optional($item->fecha_inicio)->format('Y-m-d') ?: date('Y-m-d')) }}" required readonly
                       style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc;color:#475569">
            </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 }}" {{ (old('id_manguera', $item->id_manguera) == $m->id_manguera) ? 'selected' : '' }}>
                            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 }}" {{ (old('id_turno', $item->id_turno) == $t->id_turno) ? 'selected' : '' }}>{{ $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"
                       value="{{ old('saldo_final', $item->saldo_final ?? '') }}" required
                       style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:10px">
            </div>

            <input type="hidden" name="saldo_inicial" id="saldo_inicial" value="{{ old('saldo_inicial', $item->saldo_inicial ?? 0) }}">
        </div>

        <div style="margin-top:14px;display:none">
            <input type="hidden" name="galones" id="galones" value="{{ old('galones', $item->galones ?? '') }}">
            <input type="hidden" name="precio_galon" id="precio_galon" value="{{ old('precio_galon', $item->precio_galon ?? 0) }}">
            <input type="hidden" name="total" id="total" value="{{ old('total', $item->total ?? 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">Actualizar</button>
            <a class="btn" href="{{ route('registros_salidas.index') }}">Cancelar</a>
        </div>
    </form>
@endsection