@extends('layouts.app')

@section('title', 'Typist Work Queue')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Typist & Processor Work Queue</h1>
            <p class="text-xs text-slate-500">Active applications waiting for typing, document verification, or government submission.</p>
        </div>

        <a href="{{ route('app.applications.index') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold text-xs rounded-xl">Application Directory</a>
    </div>

    <!-- Work Queue Cards Grid (Requirements 86-87) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-xs">
        @forelse($applications as $app)
            <div class="bg-white dark:bg-slate-800 rounded-3xl p-5 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4">
                <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
                    <div>
                        <a href="{{ route('app.applications.show', $app->id) }}" class="font-mono font-extrabold text-sky-600 hover:underline block text-sm">{{ $app->application_number }}</a>
                        <span class="text-[10px] text-slate-400 font-bold uppercase">{{ $app->service ? $app->service->name_en : 'Service' }}</span>
                    </div>
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase {{ $app->priority === 'urgent' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600' }}">
                        {{ $app->priority }}
                    </span>
                </div>

                <div class="space-y-1">
                    <span class="text-slate-400 text-[10px] block uppercase font-bold">Customer Profile</span>
                    <span class="font-bold text-slate-900 dark:text-white block">{{ $app->customer ? $app->customer->full_name_en : 'N/A' }}</span>
                    <span class="text-[10px] font-mono text-slate-500">Mobile: {{ $app->customer ? $app->customer->primary_mobile : 'N/A' }}</span>
                </div>

                <div class="pt-2 border-t border-slate-100 dark:border-slate-700 flex justify-between items-center">
                    <span class="text-[10px] text-sky-600 font-bold uppercase">Stage: {{ $app->currentStage ? $app->currentStage->stage_name_en : 'Start Stage' }}</span>
                    @if(!$app->assigned_user_id)
                        <form action="{{ route('app.applications.claim', $app->id) }}" method="POST">
                            @csrf
                            <button type="submit" class="px-3 py-1 bg-sky-600 text-white font-bold text-[10px] rounded-lg shadow-sm">Claim Application</button>
                        </form>
                    @else
                        <a href="{{ route('app.applications.show', $app->id) }}" class="px-3 py-1 bg-slate-900 text-white font-bold text-[10px] rounded-lg">Process Now</a>
                    @endif
                </div>
            </div>
        @empty
            <div class="col-span-3 p-8 bg-white dark:bg-slate-800 rounded-3xl text-center text-slate-400">
                Your processing queue is currently clear! 🎉
            </div>
        @endforelse
    </div>
</div>
@endsection