@extends('layouts.app')
@section('title', 'Job #'.$job->id)
@section('content')
<div class="d-flex justify-content-between align-items-start mb-3"><div><a href="{{ route('dashboard') }}" class="text-decoration-none">&larr; Dashboard</a><h1 class="h3 mt-2">Job #{{ $job->id }} · {{ ucfirst($job->type) }}</h1></div><div class="d-flex gap-2">
@if(in_array($job->status, ['pending','running']))<form method="post" action="{{ route('jobs.cancel', $job) }}">@csrf<button class="btn btn-outline-danger">Cancel</button></form>@endif
@if($job->failed_items || $job->cancelled_items)<form method="post" action="{{ route('jobs.retry', $job) }}">@csrf<button class="btn btn-warning">Retry failed</button></form>@endif
</div></div>
<div class="card mb-3"><div class="card-body"><div class="d-flex justify-content-between mb-2"><strong id="status-text">{{ ucfirst($job->status) }}</strong><span id="counts">{{ $job->completed_items }} completed · {{ $job->failed_items }} failed · {{ $job->cancelled_items }} cancelled · {{ $job->total_items }} total</span></div>@php($percent = $job->total_items ? round((($job->completed_items+$job->failed_items+$job->cancelled_items)/$job->total_items)*100) : 0)<div class="progress"><div id="progress" class="progress-bar" style="width:{{ $percent }}%">{{ $percent }}%</div></div></div></div>
<div class="card"><div class="table-responsive"><table class="table mb-0"><thead><tr><th>Product</th><th>Status</th><th>Attempts</th><th>Error</th><th>Started</th></tr></thead><tbody>
@foreach($items as $item)<tr><td>@if($item->product)<a href="{{ route('products.show', $item->product) }}">{{ $item->product->name }}</a>@else Catalog discovery @endif</td><td><span class="badge text-bg-{{ $item->status === 'completed' ? 'success' : ($item->status === 'failed' ? 'danger' : 'secondary') }}">{{ $item->status }}</span></td><td>{{ $item->attempts }}</td><td class="text-danger small" style="max-width:550px">{{ $item->error_message }}</td><td>{{ optional($item->started_at)->format('Y-m-d H:i:s') }}</td></tr>@endforeach
</tbody></table></div></div><div class="mt-3">{{ $items->links() }}</div>
@endsection
@push('scripts')
@if(in_array($job->status, ['pending','running']))<script>
const poll = setInterval(async () => { const r = await fetch(@json(route('jobs.status', $job))); const s = await r.json(); document.getElementById('status-text').textContent = s.status.charAt(0).toUpperCase()+s.status.slice(1); document.getElementById('counts').textContent = `${s.completed} completed · ${s.failed} failed · ${s.cancelled} cancelled · ${s.total} total`; const bar=document.getElementById('progress'); bar.style.width=s.percent+'%'; bar.textContent=s.percent+'%'; if (!['pending','running'].includes(s.status)) { clearInterval(poll); location.reload(); } }, 2000);
</script>@endif
@endpush