@extends('layouts.admin')
@section('title', 'Scan Jobs — Admin')

@section('content')
    <h1 class="text-2xl font-bold mb-8">Scan Jobs</h1>
    <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-gray-800/50">
                <tr>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">ID</th>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">Dominio</th>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">Estado</th>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">Progreso</th>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">Encolado</th>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">Finalizado</th>
                    <th class="text-left px-4 py-3 text-gray-400 font-medium">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800">
                @forelse($jobs as $job)
                    <tr class="hover:bg-gray-800/50 transition">
                        <td class="px-4 py-3 text-gray-500">{{ $job->id }}</td>
                        <td class="px-4 py-3 text-blue-400">{{ $job->site->domain ?? '-' }}</td>
                        <td class="px-4 py-3">
                            <span
                                class="px-2 py-0.5 rounded text-xs {{ $job->status === 'done' ? 'bg-green-500/20 text-green-400' : ($job->status === 'failed' ? 'bg-red-500/20 text-red-400' : ($job->status === 'running' ? 'bg-blue-500/20 text-blue-400' : 'bg-yellow-500/20 text-yellow-400')) }}">{{ $job->status }}</span>
                        </td>
                        <td class="px-4 py-3">
                            <div class="w-20 h-2 rounded-full bg-gray-800 overflow-hidden">
                                <div class="h-full bg-blue-500 rounded-full" style="width:{{ $job->progress }}%"></div>
                            </div>
                        </td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $job->queued_at?->format('d/m H:i') }}</td>
                        <td class="px-4 py-3 text-gray-500 text-xs">{{ $job->finished_at?->format('d/m H:i') ?? '-' }}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-3">
                                <a href="{{ route('admin.job.detail', $job->id) }}"
                                    class="text-blue-400 hover:text-blue-300 text-xs">
                                    <i class="fas fa-eye mr-1"></i> Ver
                                </a>
                                <form action="{{ route('admin.job.destroy', $job->id) }}" method="POST"
                                    onsubmit="return confirm('¿Eliminar job #{{ $job->id }} y sus datos?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-400 hover:text-red-300 text-xs">
                                        <i class="fas fa-trash mr-1"></i> Eliminar
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-gray-600">Sin jobs</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $jobs->links() }}</div>
@endsection