<x-layouts::app title="Órdenes de trabajo" header="Órdenes de trabajo">
    <div class="flex w-full flex-col gap-6">
        <div>
            <h1 class="text-2xl font-bold text-[var(--setel-text)]">Órdenes de Trabajo</h1>
            <p class="mt-1 text-sm text-[var(--setel-text-muted)]">Listado operativo — datos de demostración.</p>
        </div>

        <div class="setel-card p-4 md:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:items-end">
                <div class="min-w-[14rem] flex-1">
                    <flux:input
                        label="Buscar"
                        placeholder="OT, sitio o técnico…"
                        icon="magnifying-glass"
                    />
                </div>
                <div class="w-full min-w-[12rem] sm:w-48">
                    <flux:select label="Estado">
                        <flux:select.option selected>Todos</flux:select.option>
                        <flux:select.option>Abierto</flux:select.option>
                        <flux:select.option>Pendiente</flux:select.option>
                        <flux:select.option>Cerrado</flux:select.option>
                        <flux:select.option>Anulado</flux:select.option>
                    </flux:select>
                </div>
                <div class="w-full min-w-[12rem] sm:w-48">
                    <flux:select label="Prioridad">
                        <flux:select.option selected>Todas</flux:select.option>
                        <flux:select.option>Alta</flux:select.option>
                        <flux:select.option>Media</flux:select.option>
                        <flux:select.option>Baja</flux:select.option>
                    </flux:select>
                </div>
                <div class="flex shrink-0 lg:ms-auto">
                    <button type="button" class="setel-btn-primary px-5 py-2.5">Nueva OT</button>
                </div>
            </div>
        </div>

        <div class="setel-card overflow-hidden">
            <div class="setel-table-wrap">
                <table class="setel-table min-w-[56rem]">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>OT</th>
                            <th>Sitio</th>
                            <th>Tipo trabajo</th>
                            <th>Técnico</th>
                            <th>NOC</th>
                            <th>Estado</th>
                            <th>Prioridad</th>
                            <th>SLA</th>
                            <th>Fecha escala</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ([
                            ['n' => 1, 'ot' => 'OT-2024-0234', 'sitio' => 'Torre Miraflores', 'tipo' => 'Mantenimiento correctivo', 'tec' => 'Juan Rojas', 'noc' => 'Carlos Mendoza', 'est' => 'Abierto', 'eb' => 'open', 'pri' => 'Alta', 'pb' => 'prio-high', 'sla' => '8 h', 'fecha' => '15/01/2025 08:30'],
                            ['n' => 2, 'ot' => 'OT-2024-0198', 'sitio' => 'Nodo San Isidro', 'tipo' => 'Inspección de torre', 'tec' => 'Pedro Salas', 'noc' => 'Ana Vargas', 'est' => 'Pendiente', 'eb' => 'pending', 'pri' => 'Media', 'pb' => 'prio-medium', 'sla' => '12 h', 'fecha' => '14/01/2025 14:00'],
                            ['n' => 3, 'ot' => 'OT-2024-0182', 'sitio' => 'Estación Cusco Central', 'tipo' => 'Cambio de equipos', 'tec' => 'Luis Quispe', 'noc' => 'Carlos Mendoza', 'est' => 'Cerrado', 'eb' => 'closed', 'pri' => 'Baja', 'pb' => 'prio-low', 'sla' => '6 h', 'fecha' => '13/01/2025 09:15'],
                            ['n' => 4, 'ot' => 'OT-2024-0165', 'sitio' => 'Sitio Alto Piura', 'tipo' => 'Verificación de enlace', 'tec' => 'Miguel Álvarez', 'noc' => 'Rosa Huamán', 'est' => 'Abierto', 'eb' => 'open', 'pri' => 'Media-baja', 'pb' => 'prio-medium-low', 'sla' => '24 h', 'fecha' => '12/01/2025 07:45'],
                            ['n' => 5, 'ot' => 'OT-2024-0151', 'sitio' => 'Torre Cerro Colorado', 'tipo' => 'Mantenimiento preventivo', 'tec' => 'Jorge Núñez', 'noc' => 'Carlos Mendoza', 'est' => 'Cancelado', 'eb' => 'cancelled', 'pri' => 'Muy baja', 'pb' => 'prio-very-low', 'sla' => '4 h', 'fecha' => '11/01/2025 16:20'],
                            ['n' => 6, 'ot' => 'OT-2024-0144', 'sitio' => 'Nodo Trujillo Norte', 'tipo' => 'Tendido de fibra', 'tec' => 'Juan Rojas', 'noc' => 'Ana Vargas', 'est' => 'Pendiente', 'eb' => 'pending', 'pri' => 'Alta', 'pb' => 'prio-high', 'sla' => '480 min', 'fecha' => '10/01/2025 11:00'],
                            ['n' => 7, 'ot' => 'OT-2024-0129', 'sitio' => 'Estación Iquitos Este', 'tipo' => 'Revisión de energía', 'tec' => 'Diego Ramos', 'noc' => 'Rosa Huamán', 'est' => 'Cerrado', 'eb' => 'closed', 'pri' => 'Media', 'pb' => 'prio-medium', 'sla' => '12 h', 'fecha' => '09/01/2025 10:30'],
                            ['n' => 8, 'ot' => 'OT-2024-0110', 'sitio' => 'Torre Chimbote Puerto', 'tipo' => 'Configuración de red', 'tec' => 'Pedro Salas', 'noc' => 'Carlos Mendoza', 'est' => 'Abierto', 'eb' => 'open', 'pri' => 'Baja', 'pb' => 'prio-low', 'sla' => '24 h', 'fecha' => '08/01/2025 13:40'],
                        ] as $row)
                            <tr>
                                <td class="tabular-nums text-[var(--setel-text-muted)]">{{ $row['n'] }}</td>
                                <td class="font-mono text-xs">{{ $row['ot'] }}</td>
                                <td>{{ $row['sitio'] }}</td>
                                <td>{{ $row['tipo'] }}</td>
                                <td>{{ $row['tec'] }}</td>
                                <td>{{ $row['noc'] }}</td>
                                <td><span class="setel-badge setel-badge--{{ $row['eb'] }}">{{ $row['est'] }}</span></td>
                                <td><span class="setel-badge setel-badge--{{ $row['pb'] }}">{{ $row['pri'] }}</span></td>
                                <td class="tabular-nums">{{ $row['sla'] }}</td>
                                <td class="text-[var(--setel-text-muted)]">{{ $row['fecha'] }}</td>
                                <td class="text-end">
                                    <div class="flex items-center justify-end gap-1">
                                        <flux:tooltip content="Abrir ficha">
                                            <button type="button" class="setel-btn-ghost" aria-label="Abrir ficha">
                                                <flux:icon.eye class="size-5" />
                                            </button>
                                        </flux:tooltip>
                                        <flux:tooltip content="Editar">
                                            <button type="button" class="setel-btn-ghost" aria-label="Editar">
                                                <flux:icon.pencil-square class="size-5" />
                                            </button>
                                        </flux:tooltip>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="flex flex-col items-center justify-between gap-3 border-t border-[var(--setel-card-border)] px-4 py-3 sm:flex-row">
                <p class="text-sm text-[var(--setel-text-muted)]">Mostrando 1–8 de 247 resultados</p>
                <div class="flex gap-2">
                    <button type="button" class="setel-btn-secondary opacity-50" disabled>Anterior</button>
                    <button type="button" class="setel-btn-secondary">Siguiente</button>
                </div>
            </div>
        </div>
    </div>
</x-layouts::app>
