{{--
    Tabla de ítems de inspección mecánica.
    Espera:
      $itemsDefinicion  — array con todos los ítems definidos
      $itemsGuardados   — colección keyBy('numero') con datos previos (vacía en create)
--}}

@php
    $seccionActual = null;
    $coloresSeccion = [
        'Inspecciones Estáticas de Motor' => '#1a3a5c',
        'Inspección Periféricos de Motor' => '#1e5c3a',
        'Aire Acondicionado HVAC'         => '#5c3a1a',
        'Sistema Neumático'               => '#3a1a5c',
    ];
@endphp

<div class="table-responsive mt-3">
<table class="table table-bordered table-sm align-middle" style="font-size:12px;">
    <thead class="table-secondary text-center">
        <tr>
            <th style="width:40px;">N°</th>
            <th class="text-start">Descripción</th>
            <th style="width:55px;" title="Buen estado">B</th>
            <th style="width:55px;" title="Aceptable">A</th>
            <th style="width:55px;" title="Requiere reemplazo">R</th>
            <th style="width:50px;" title="No aplica">N/A</th>
            <th style="width:50px;" title="Requiere reparación (kit disponible)">Rep.</th>
            <th style="width:80px;" title="Autorización del cliente">Autor.</th>
            <th style="width:100px;" title="Tipo de trabajo realizado">Trabajo</th>
            <th style="min-width:160px;">Observación</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($itemsDefinicion as $item)
            @php
                $n     = $item['numero'];
                $sec   = $item['seccion'];
                $saved = $itemsGuardados->get($n);

                $estadoVal     = old("items.{$n}.estado",              $saved->estado              ?? '');
                $noAplicaVal   = old("items.{$n}.no_aplica",           $saved->no_aplica           ?? false);
                $reparaVal     = old("items.{$n}.requiere_reparacion", $saved->requiere_reparacion ?? false);
                $autorizVal    = old("items.{$n}.autorizacion",        $saved->autorizacion        ?? '');
                $trabajoVal    = old("items.{$n}.trabajo",             $saved->trabajo             ?? '');
                $obsVal        = old("items.{$n}.observacion",         $saved->observacion         ?? '');
                $colorHeader   = $coloresSeccion[$sec] ?? '#444';
            @endphp

            {{-- Encabezado de sección --}}
            @if ($seccionActual !== $sec)
                @php $seccionActual = $sec; @endphp
                <tr>
                    <td colspan="10" class="fw-bold text-white text-uppercase ps-2 py-1"
                        style="background:{{ $colorHeader }}; letter-spacing:.5px;">
                        {{ $sec }}
                    </td>
                </tr>
            @endif

            <tr class="{{ $estadoVal === 'R' ? 'table-danger' : ($estadoVal === 'A' ? 'table-warning' : '') }}">
                <td class="text-center fw-bold">{{ $n }}</td>
                <td>{{ $item['descripcion'] }}</td>

                {{-- Estado: B --}}
                <td class="text-center">
                    <input type="radio" class="form-check-input item-estado"
                           name="items[{{ $n }}][estado]" value="B"
                           data-row="{{ $n }}"
                           {{ $estadoVal === 'B' ? 'checked' : '' }}>
                </td>
                {{-- Estado: A --}}
                <td class="text-center">
                    <input type="radio" class="form-check-input item-estado"
                           name="items[{{ $n }}][estado]" value="A"
                           data-row="{{ $n }}"
                           {{ $estadoVal === 'A' ? 'checked' : '' }}>
                </td>
                {{-- Estado: R --}}
                <td class="text-center">
                    <input type="radio" class="form-check-input item-estado"
                           name="items[{{ $n }}][estado]" value="R"
                           data-row="{{ $n }}"
                           {{ $estadoVal === 'R' ? 'checked' : '' }}>
                </td>
                {{-- No aplica --}}
                <td class="text-center">
                    <input type="checkbox" class="form-check-input"
                           name="items[{{ $n }}][no_aplica]" value="1"
                           {{ $noAplicaVal ? 'checked' : '' }}>
                </td>
                {{-- Requiere reparación --}}
                <td class="text-center">
                    <input type="checkbox" class="form-check-input"
                           name="items[{{ $n }}][requiere_reparacion]" value="1"
                           {{ $reparaVal ? 'checked' : '' }}>
                </td>
                {{-- Autorización --}}
                <td>
                    <select name="items[{{ $n }}][autorizacion]" class="form-select form-select-sm">
                        <option value="">—</option>
                        <option value="S"  {{ $autorizVal === 'S'  ? 'selected' : '' }}>Sí</option>
                        <option value="N"  {{ $autorizVal === 'N'  ? 'selected' : '' }}>No</option>
                        <option value="NA" {{ $autorizVal === 'NA' ? 'selected' : '' }}>N/A</option>
                    </select>
                </td>
                {{-- Trabajo --}}
                <td>
                    <select name="items[{{ $n }}][trabajo]" class="form-select form-select-sm">
                        <option value="">—</option>
                        <option value="OTP" {{ $trabajoVal === 'OTP' ? 'selected' : '' }}>OTP</option>
                        <option value="P"   {{ $trabajoVal === 'P'   ? 'selected' : '' }}>P</option>
                        <option value="Rep" {{ $trabajoVal === 'Rep' ? 'selected' : '' }}>Rep</option>
                        <option value="NA"  {{ $trabajoVal === 'NA'  ? 'selected' : '' }}>N/A</option>
                    </select>
                </td>
                {{-- Observación --}}
                <td>
                    <input type="text" name="items[{{ $n }}][observacion]"
                           value="{{ $obsVal }}"
                           class="form-control form-control-sm" maxlength="300">
                </td>
            </tr>
        @endforeach
    </tbody>
</table>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // Resaltar fila según estado seleccionado
    document.querySelectorAll('.item-estado').forEach(function (radio) {
        radio.addEventListener('change', function () {
            const row = this.closest('tr');
            row.classList.remove('table-danger', 'table-warning');
            if (this.value === 'R') row.classList.add('table-danger');
            if (this.value === 'A') row.classList.add('table-warning');
        });
    });
});
</script>