@extends('layouts.app')
@section('title', 'Print Job Monitor')
@section('content')
<h4 class="mb-3">🖨️ Print Job Monitor</h4>

<div class="alert alert-{{ $agentStatus['class'] }}">
    <strong>Print Agent: {{ $agentStatus['label'] }}</strong>
    @if ($agentStatus['class'] !== 'success')
    <div class="small mt-1">
        This is almost always the actual cause of "printing isn't working" — the web app
        can only <em>queue</em> a print job (writing bytes to the database); a separate
        program (the print agent, see <code>/print-agent</code> in your project files) has
        to actually be running on a PC/laptop on the same network as your printer, polling
        this server, and forwarding the job to the printer over TCP. If it says "Never
        connected" or "Offline", start with: is <code>node agent.js</code> actually running
        right now, and does its <code>config.json</code> have the correct server URL and
        token?
    </div>
    @endif
</div>

<div class="row g-3 mb-4">
    <div class="col-6 col-md-3"><div class="card p-3"><div class="text-muted small">Pending</div><div class="fs-3 fw-bold {{ $counts['pending'] > 5 ? 'text-warning' : '' }}">{{ $counts['pending'] }}</div></div></div>
    <div class="col-6 col-md-3"><div class="card p-3"><div class="text-muted small">Failed</div><div class="fs-3 fw-bold {{ $counts['failed'] > 0 ? 'text-danger' : '' }}">{{ $counts['failed'] }}</div></div></div>
</div>

<div class="card p-3 mb-4">
    <h6>Test Print by Printer</h6>
    <p class="small text-muted">Sends a short ticket with no order data — the fastest way to check one printer's network path in isolation.</p>
    <div class="d-flex flex-wrap gap-2">
        @foreach ($printers as $p)
        <form method="POST" action="{{ route('admin.print-jobs.test-print', $p) }}">
            @csrf
            <button class="btn btn-outline-dark btn-sm">Test: {{ $p->name }} ({{ $p->connection_type === 'network' ? $p->ip_address : $p->usb_identifier }})</button>
        </form>
        @endforeach
    </div>
</div>

<h6>Recent Print Jobs</h6>
<table class="table bg-white table-sm">
    <thead><tr><th>Time</th><th>Type</th><th>Printer</th><th>Order</th><th>Status</th><th>Error</th><th></th></tr></thead>
    <tbody>
    @forelse ($jobs as $job)
    <tr class="{{ $job->status === 'failed' ? 'table-danger' : ($job->status === 'pending' ? 'table-warning' : '') }}">
        <td class="text-nowrap">{{ $job->created_at->format('d M h:i:s A') }}</td>
        <td>{{ strtoupper($job->type) }}</td>
        <td>{{ $job->printer->name ?? '—' }}</td>
        <td>{{ $job->order->order_number ?? '—' }}</td>
        <td><span class="badge bg-secondary">{{ ucfirst($job->status) }}</span></td>
        <td class="small text-danger">{{ $job->last_error }}</td>
        <td>
            @if ($job->status === 'failed')
            <form method="POST" action="{{ route('admin.print-jobs.retry', $job) }}" class="d-inline">
                @csrf
                <button class="btn btn-sm btn-outline-primary">Retry</button>
            </form>
            @endif
            <form method="POST" action="{{ route('admin.print-jobs.destroy', $job) }}" class="d-inline" onsubmit="return confirm('Remove this job from the queue?')">
                @csrf @method('DELETE')
                <button class="btn btn-sm btn-outline-danger">✕</button>
            </form>
        </td>
    </tr>
    @empty
    <tr><td colspan="7" class="text-muted">No print jobs yet.</td></tr>
    @endforelse
    </tbody>
</table>
@endsection