@extends('layouts.portal')

@section('title', 'Technician Workshop Queue — Abu Dhabi Auto Care')

@section('content')
<div class="space-y-6">
    
    <div>
        <div class="flex items-center space-x-2 text-xs text-emerald-400 font-bold mb-1">
            <span>WORKSHOP FLOOR • MUSSAFAH M11</span>
        </div>
        <h1 class="text-2xl font-black text-white tracking-tight">Assigned Workshop Vehicle Jobs</h1>
        <p class="text-xs text-slate-400 mt-1">Technician view for updating preparation, spray booth baking, and quality control stages.</p>
    </div>

    <!-- Quick Stats (2 in-line on mobile) -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">
        <div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
            <span class="text-xs text-slate-400 font-semibold block">Vehicles in Progress</span>
            <span class="text-2xl font-black text-white mt-1 block">{{ $assignedJobs->count() }}</span>
        </div>
        <div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
            <span class="text-xs text-slate-400 font-semibold block">Currently in Paint Booth</span>
            <span class="text-2xl font-black text-purple-400 mt-1 block">{{ $inBoothCount }}</span>
        </div>
        <div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
            <span class="text-xs text-slate-400 font-semibold block">Completed by You</span>
            <span class="text-2xl font-black text-emerald-400 mt-1 block">{{ $completedCount }}</span>
        </div>
    </div>

    <!-- Assigned Jobs Cards -->
    <div class="space-y-6">
        @forelse($assignedJobs as $job)
            <div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 shadow-xl space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-4 border-b border-slate-800">
                    <div>
                        <div class="flex items-center space-x-2">
                            <span class="font-mono font-bold text-sky-400 text-sm">{{ $job->order_number }}</span>
                            <span class="text-white font-extrabold text-base">{{ $job->vehicle_make }} {{ $job->vehicle_model }} ({{ $job->vehicle_year ?: 'N/A' }})</span>
                        </div>
                        <div class="text-xs text-slate-400 mt-0.5">
                            Client: {{ $job->client->name }} • {{ $job->vehicle_category }} • Plate: {{ $job->vehicle_plate ?: 'N/A' }}
                        </div>
                    </div>
                    <div>
                        <span class="px-3 py-1 rounded text-xs font-bold uppercase {{ $job->status_badge_class }}">
                            {{ $job->status_label }}
                        </span>
                    </div>
                </div>

                <!-- Specs -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs bg-slate-950 p-4 rounded-2xl border border-slate-800">
                    <div>
                        <span class="text-slate-500 block">Service:</span>
                        <span class="font-semibold text-white">{{ $job->service_title }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Target Shade:</span>
                        <span class="font-bold text-amber-400">{{ $job->target_color ?: 'Factory Refresh' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Customer Request:</span>
                        <span class="text-slate-300 italic">{{ Str::limit($job->customer_notes ?: 'Standard job', 40) }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500 block">Current Stage:</span>
                        <span class="text-sky-400 font-semibold">{{ $job->progress_percent }}% Complete</span>
                    </div>
                </div>

                <!-- Quick Stage Update Form -->
                <form action="{{ route('staff.jobs.update_status', $job->id) }}" method="POST" class="pt-2 flex flex-col sm:flex-row items-center gap-3 text-xs">
                    @csrf
                    <div class="w-full sm:w-1/3">
                        <select name="status" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white font-bold text-xs focus:outline-none focus:border-emerald-500">
                            <option value="preparation_sanding" {{ $job->status === 'preparation_sanding' ? 'selected' : '' }}>Stage: Surface Prep & Sanding</option>
                            <option value="in_paint_booth" {{ $job->status === 'in_paint_booth' ? 'selected' : '' }}>Stage: In Paint Booth</option>
                            <option value="quality_inspection" {{ $job->status === 'quality_inspection' ? 'selected' : '' }}>Stage: Polishing & Quality Inspection</option>
                            <option value="ready_for_delivery" {{ $job->status === 'ready_for_delivery' ? 'selected' : '' }}>Stage: Ready for Delivery / Handover</option>
                        </select>
                    </div>
                    <div class="w-full sm:w-1/2">
                        <input type="text" name="note" required placeholder="Log technician note (e.g. 2nd coat applied, baking for 45 min at 65°C)" class="w-full px-3.5 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-white text-xs focus:outline-none focus:border-emerald-500">
                    </div>
                    <div class="w-full sm:w-auto">
                        <button type="submit" class="w-full sm:w-auto px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs transition shadow-lg shadow-emerald-600/20">
                            Update Stage
                        </button>
                    </div>
                </form>
            </div>
        @empty
            <div class="p-8 rounded-3xl bg-slate-900 border border-slate-800 text-center text-slate-500 text-xs">
                No active workshop jobs assigned to your queue at the moment.
            </div>
        @endforelse
    </div>

</div>
@endsection