@extends('layouts.app')
@section('title', 'Processing — ' . $job->job_number)
@section('breadcrumb')<a href="{{ route('processing.index') }}" class="hover:text-white">Processing</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">{{ $job->job_number }}</span>@endsection

@section('content')
<div class="space-y-5">
    <div class="card p-5">
        <div class="flex items-center justify-between">
            <div>
                <div class="flex items-center gap-3 mb-1">
                    <h1>{{ $job->job_number }} — Processing</h1>
                    <span class="badge badge-{{ $job->stageColor() }}">{{ $job->stageLabel() }}</span>
                </div>
                <p>{{ $job->contact?->full_name }} · {{ $job->site_address }}, {{ $job->site_suburb }}</p>
            </div>
        </div>
    </div>

    <!-- Add New Processing Order Form -->
    <div x-data="{ open: false }" class="card p-5">
        <div class="flex items-center justify-between">
            <h3 class="flex items-center gap-2"><i class="fas fa-plus-circle text-blue-400 text-sm"></i>New Processing Order</h3>
            <button @click="open = !open" class="btn btn-secondary text-xs" x-text="open ? 'Cancel' : '+ Add Order'"></button>
        </div>
        <div x-show="open" x-cloak class="mt-4">
            <form method="POST" action="{{ route('processing.store_order', $job) }}" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @csrf
                <div class="md:col-span-2">
                    <label class="block text-sm text-slate-400 mb-1">Description *</label>
                    <input type="text" name="description" class="input" required placeholder="e.g. Cabinet carcasses, Doors, Benchtop...">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Supplier</label>
                    <input type="text" name="supplier" class="input" placeholder="Supplier name">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Order Date</label>
                    <input type="date" name="order_date" class="input" value="{{ date('Y-m-d') }}">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">ETA Date</label>
                    <input type="date" name="eta_date" class="input">
                </div>
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Total Items</label>
                    <input type="number" name="total_items" class="input" min="0" placeholder="0">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm text-slate-400 mb-1">Notes</label>
                    <textarea name="notes" class="input" rows="2" placeholder="Any additional notes..."></textarea>
                </div>
                <div class="md:col-span-2 flex justify-end">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-plus mr-1"></i>Create Processing Order</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Processing Orders -->
    <div class="space-y-4">
        @forelse($job->processingOrders as $order)
        <div class="card p-5">
            <div class="flex items-start justify-between mb-4">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-sm font-bold text-white">{{ $order->po_number }}</span>
                        <span class="badge badge-{{ $order->statusColor() }}">{{ ucwords(str_replace('_', ' ', $order->status)) }}</span>
                    </div>
                    <p class="text-sm">{{ $order->description }}</p>
                    <div class="flex gap-4 mt-2 text-xs text-slate-500">
                        <span><i class="fas fa-building mr-1"></i>{{ $order->supplier }}</span>
                        @if($order->order_date)
                        <span><i class="fas fa-calendar mr-1"></i>Ordered {{ $order->order_date->format('d M Y') }}</span>
                        @endif
                        @if($order->eta_date)
                        <span><i class="fas fa-truck mr-1"></i>ETA {{ $order->eta_date->format('d M Y') }}</span>
                        @endif
                    </div>
                </div>
                <div class="text-right">
                    <div class="text-2xl font-bold text-white">{{ $order->progress_pct }}%</div>
                    <div class="text-xs text-slate-500">{{ $order->completed_items }}/{{ $order->total_items }} items</div>
                </div>
            </div>
            <div class="progress-bar"><div class="progress-fill" style="width: {{ $order->progress_pct }}%"></div></div>
        </div>
        @empty
        <div class="card p-8 text-center text-slate-500">
            <i class="fas fa-box text-3xl mb-3 text-slate-700 block"></i>No processing orders yet.
        </div>
        @endforelse
    </div>

    <!-- Tasks -->
    @if($job->tasks && $job->tasks->count() > 0)
    <div class="card p-5">
        <h3 class="mb-4">Job Tasks</h3>
        <div class="space-y-2">
            @foreach($job->tasks as $task)
            <div class="flex items-center gap-3 py-2 border-b border-slate-700 last:border-0">
                <div class="w-2 h-2 rounded-full flex-shrink-0 {{ $task->priority === 'high' ? 'bg-red-400' : ($task->priority === 'medium' ? 'bg-yellow-400' : 'bg-slate-500') }}"></div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm text-white">{{ $task->title }}</div>
                    <div class="text-xs text-slate-500">{{ $task->assignedTo?->name }} · Due {{ $task->due_date?->format('d M') }}</div>
                </div>
                <span class="badge badge-{{ $task->status === 'completed' ? 'green' : ($task->status === 'in_progress' ? 'blue' : 'gray') }}">
                    {{ ucwords(str_replace('_', ' ', $task->status)) }}
                </span>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection