@extends('layouts.app')
@section('title', $job->job_number)
@section('breadcrumb')<a href="{{ route('jobs.index') }}" class="hover:text-white">{{ isset($isTrades) && $isTrades ? 'My Jobs' : (isset($isDesigner) && $isDesigner ? 'My Jobs' : 'Jobs') }}</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')
@php
    $isTrades        = isset($isTrades) && $isTrades;
    $isProcessor     = isset($isProcessor) && $isProcessor;
    $isFactoryEmployee = isset($isFactoryEmployee) && $isFactoryEmployee;
    $isDesigner      = isset($isDesigner) && $isDesigner;
    $isRestrictedRole = $isProcessor || $isFactoryEmployee;

    $authUser = auth()->user();
    $isOfficeAdmin = $authUser->role?->name === 'office_admin';

    // Tab visibility: office_admin always sees all tabs; others respect DB permissions
    $canSeeOverview   = $isOfficeAdmin || $authUser->hasPermission('job_tabs.overview');
    $canSeeWorksOrder = $isOfficeAdmin || $authUser->hasPermission('job_tabs.works_order');
    $canSeePayments   = $isOfficeAdmin || $authUser->hasPermission('job_tabs.payments');
    $canSeeVariants   = $isOfficeAdmin || $authUser->hasPermission('job_tabs.variants');
    $canSeeInvoices   = $isOfficeAdmin || $authUser->hasPermission('job_tabs.invoices');
    $canSeeDocuments  = $isOfficeAdmin || $authUser->hasPermission('job_tabs.documents');

    // Default first visible tab
    if ($isFactoryEmployee) {
        $defaultTab = 'assigned-tasks';
    } elseif ($isRestrictedRole) {
        $defaultTab = 'processor-drawings';
    } elseif ($canSeeOverview) {
        $defaultTab = 'overview';
    } elseif ($canSeeWorksOrder) {
        $defaultTab = 'works-order';
    } elseif ($canSeePayments) {
        $defaultTab = 'payments';
    } elseif ($canSeeVariants) {
        $defaultTab = 'variants';
    } elseif ($canSeeInvoices) {
        $defaultTab = 'invoice';
    } elseif ($canSeeDocuments) {
        $defaultTab = 'documents';
    } else {
        $defaultTab = 'overview';
    }
@endphp
<div x-data="{ tab: '{{ $defaultTab }}' }" class="space-y-5">

    <!-- Header -->
    <div class="card p-5">
        <div class="flex items-start justify-between">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300 text-lg">
                    {{ $job->contact?->initials ?? '??' }}
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h1>{{ $job->contact?->full_name ?? 'Unknown' }}</h1>
                        <span class="badge badge-{{ $job->stageColor() }}">{{ $job->stageLabel() }}</span>
                        @if($job->status === 'completed')
                        <span class="badge badge-emerald"><i class="fas fa-check-circle mr-1"></i>Completed</span>
                        @endif
                    </div>
                    <div class="text-sm text-slate-400 mt-1">{{ $job->job_number }} · {{ $job->site_address }}, {{ $job->site_suburb }}</div>
                </div>
            </div>
            @if(!$isTrades && !$isRestrictedRole && !$isDesigner)
            <div class="flex gap-2">
                <a href="{{ route('jobs.edit', $job) }}" class="btn btn-secondary"><i class="fas fa-edit"></i> Edit</a>
                @if(auth()->user()->role?->name === 'office_admin')
                <form method="POST" action="{{ route('jobs.destroy', $job) }}" onsubmit="return confirm('Delete this job?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn" style="background:#7f1d1d;color:#fca5a5;"><i class="fas fa-trash"></i></button>
                </form>
                @endif
            </div>
            @endif
            @if($isDesigner)
            <div class="flex gap-2">
                @if($job->quote)
                <a href="{{ route('quotes.show', $job->quote) }}" class="btn btn-secondary"><i class="fas fa-file-invoice"></i> View Quote</a>
                @else
                <a href="{{ route('quotes.create', ['job_id'=>$job->id]) }}" class="btn btn-primary"><i class="fas fa-plus"></i> Prepare Quote</a>
                @endif
            </div>
            @endif
        </div>
    </div>

    @if(!$isRestrictedRole)
    <!-- Pipeline Progress (hidden for processor/factory_employee) -->
    <div class="card p-5">
        <h3 class="mb-4">Job Pipeline</h3>
        <div class="flex items-center overflow-x-auto pb-2">
            @php
            $stages = [['lead','Lead'],['consult','Consult'],['sold','Sold'],['contracts','Contracts'],['cm','Check Measure'],['processing','Processing'],['delivery','Delivery'],['installation','Install'],['completion','Complete']];
            $currentIdx = array_search($job->stage, array_column($stages, 0));
            @endphp
            @foreach($stages as $i => [$key, $label])
            <div class="stepper-step" style="min-width: 70px;">
                <div class="stepper-circle {{ $i < $currentIdx ? 'bg-green-700 text-green-300' : ($i === $currentIdx ? 'bg-blue-600 text-white' : 'bg-slate-700 text-slate-500') }}" style="width: 28px; height: 28px; font-size: 10px;">
                    @if($i < $currentIdx)<i class="fas fa-check"></i>@else{{ $i + 1 }}@endif
                </div>
                <div class="text-center mt-1 {{ $i === $currentIdx ? 'text-blue-400' : 'text-slate-500' }}" style="font-size: 10px;">{{ $label }}</div>
            </div>
            @if($i < 8)<div class="flex-1 h-px bg-slate-700 mb-5" style="min-width: 8px;"></div>@endif
            @endforeach
        </div>
         {{-- ══════════════════════════════════════════════════════════════
             PROCESSING STAGE SUB-TREE
             Visually branches from node 6 (Processing) in the stepper.
             Placed BEFORE Move to Stage so it sits inside the pipeline.
             Green = completed (with date), Blue = pending/in_progress.
             ══════════════════════════════════════════════════════════════ --}}
        @php
            $pipelineAssignments = $job->employeeTaskAssignments ?? collect();
            $processingStageIdx  = 5; 
        @endphp
        @if($pipelineAssignments->count() > 0)
        <div class="mt-4">
            {{-- ── Vertical stem + Processing node label ── --}}
            <div class="flex" style="padding-left:0;">
                {{-- Left column: vertical line + dot aligned under step 6 --}}
                <!-- <div class="flex flex-col items-center flex-shrink-0" style="width:14px;margin-top:0;">
                    <div style="width:2px;height:12px;background:#334155;"></div>
                    <div style="width:10px;height:10px;border-radius:50%;background:#2563eb;border:2px solid #93c5fd;flex-shrink:0;"></div>
                    <div style="width:2px;flex:1;min-height:8px;background:#334155;"></div>
                </div> -->
                {{-- Right column: header + task list --}}
                <div class="flex-1 ml-3" style="padding-left: 700px;">
                    <div class="flex flex-col items-center flex-shrink-0" style="width:14px;margin-top:0;">
                    <div style="width:2px;height:12px;background:#334155;"></div>
                    <div style="width:10px;height:10px;border-radius:50%;background:#2563eb;border:2px solid #93c5fd;flex-shrink:0;"></div>
                    <div style="width:2px;flex:1;min-height:8px;background:#334155;"></div>
                </div> 
                    {{-- Header row --}}
                    <div class="flex items-center gap-2 mb-3" style="min-height:22px;">
                        <span class="text-xs font-bold text-blue-300 uppercase tracking-wider">
                            <i class="fas fa-sitemap mr-1.5"></i>Manufacturing
                        </span>
                        <span class="badge badge-gray text-xs">{{ $pipelineAssignments->count() }} task(s)</span>
                    </div>
                    {{-- Task rows --}}
                    <div class="border-l-2 border-slate-700 pl-3 space-y-2">
                        @foreach($pipelineAssignments as $pAssign)
                        @php
                            $ptStatus   = $pAssign->task_status ?? 'pending';
                            $ptDone     = $ptStatus === 'completed';
                            $ptCompDate = $ptDone ? $pAssign->updated_at : null;
                            $ptEmpName  = $pAssign->user?->name ?? '—';
                            $ptEmpInit  = strtoupper(substr($ptEmpName, 0, 1));
                            $ptTaskName = $pAssign->taskType?->name ?? '—';
                        @endphp
                        <div class="relative flex items-center gap-2">
                            {{-- Branch dot --}}
                            <div class="absolute flex-shrink-0 rounded-full"
                                 style="left:-16px;top:50%;transform:translateY(-50%);
                                        width:8px;height:8px;
                                        background:{{ $ptDone ? '#22c55e' : '#3b82f6' }};"></div>
                            {{-- Task card --}}
                            <div class="flex-1 flex flex-wrap items-center gap-2 py-2 px-3 rounded-lg"
                                 style="background:{{ $ptDone ? '#052e16' : '#0c1a2e' }};
                                        border:1px solid {{ $ptDone ? '#166534' : '#1e3a5f' }};">
                                {{-- Employee avatar + name --}}
                                <div class="flex items-center gap-1.5">
                                    <div class="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0"
                                         style="background:{{ $ptDone ? '#14532d' : '#1e3a5f' }};
                                                color:{{ $ptDone ? '#86efac' : '#93c5fd' }};">
                                        {{ $ptEmpInit }}
                                    </div>
                                    <span class="text-xs text-slate-300 font-medium whitespace-nowrap">{{ $ptEmpName }}</span>
                                </div>
                                <span class="text-slate-600 text-xs">·</span>
                                {{-- Task name --}}
                                <span class="text-sm text-white font-semibold flex-1">{{ $ptTaskName }}</span>
                                {{-- Status badge --}}
                                @if($ptDone)
                                <span class="badge badge-green text-xs flex-shrink-0">
                                    <i class="fas fa-check-circle mr-1"></i>Completed
                                </span>
                                @elseif($ptStatus === 'in_progress')
                                <span class="badge badge-blue text-xs flex-shrink-0">
                                    <i class="fas fa-spinner mr-1"></i>In Progress
                                </span>
                                @elseif($ptStatus === 'paused')
                                <span class="badge badge-yellow text-xs flex-shrink-0">
                                    <i class="fas fa-pause mr-1"></i>Paused
                                </span>
                                @else
                                <span class="badge badge-blue text-xs flex-shrink-0">
                                    <i class="fas fa-clock mr-1"></i>Pending
                                </span>
                                @endif
                                {{-- Allocated hours --}}
                                @if($pAssign->allocated_hours)
                                <span class="text-xs text-slate-500 flex-shrink-0">
                                    {{ $pAssign->allocated_hours }}h allocated
                                </span>
                                @endif
                                {{-- Completion date --}}
                                @if($ptDone && $ptCompDate)
                                <span class="text-xs text-green-400 flex-shrink-0 ml-auto">
                                    <i class="fas fa-calendar-check mr-1"></i>{{ $ptCompDate->format('d M Y') }}
                                </span>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @endif
        @if(!$isTrades && !$isDesigner && in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
        <form method="POST" action="{{ route('jobs.advance_stage', $job) }}" class="mt-3 flex items-center gap-3">
            @csrf
            <select name="stage" class="input" style="width:200px;">
                @foreach($stages as [$key, $label])
                <option value="{{ $key }}" {{ $job->stage === $key ? 'selected' : '' }}>{{ $label }}</option>
                @endforeach
            </select>
            <button type="submit" class="btn btn-primary"><i class="fas fa-arrow-right mr-1"></i>Move to Stage</button>
        </form>
        @endif
    </div>
    @endif

    @if(session('success'))
    <div class="card p-3 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2 text-sm">
        <i class="fas fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="card p-3 border-red-600 bg-red-900/20 text-red-300 flex items-center gap-2 text-sm">
        <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
    </div>
    @endif

    @if($isFactoryEmployee)
    {{-- FACTORY EMPLOYEE: Assigned Tasks + Processor Drawing Documents tabs --}}
    <div class="card overflow-hidden">
        <div class="flex border-b border-slate-700">
            <button @click="tab='assigned-tasks'"
                    :class="tab==='assigned-tasks' ? 'border-b-2 border-yellow-500 text-yellow-400' : 'text-slate-500 hover:text-slate-300'"
                    class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-tasks text-xs"></i> My Assigned Tasks
            </button>
            <button @click="tab='processor-drawings'"
                    :class="tab==='processor-drawings' ? 'border-b-2 border-indigo-500 text-indigo-400' : 'text-slate-500 hover:text-slate-300'"
                    class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-drafting-compass text-xs"></i> Processor Drawing Documents
            </button>
        </div>
        <div x-show="tab==='assigned-tasks'" class="p-5">
            <div class="mb-4">
                <h3 class="flex items-center gap-2 mb-1">
                    <i class="fas fa-tasks text-yellow-400"></i> My Assigned Tasks — {{ $job->job_number }}
                </h3>
                <p class="text-xs text-slate-500">Tasks assigned by the processor for this job.</p>
            </div>
            @if(isset($myTaskAssignments) && $myTaskAssignments->count() > 0)
            <div class="space-y-2">
                @foreach($myTaskAssignments as $assignment)
                <div class="flex items-center gap-3 p-3 rounded-lg" style="background:#0f172a;border:1px solid #1e293b;">
                    <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-tasks text-blue-400 text-xs"></i>
                    </div>
                    <div class="flex-1">
                        <div class="text-sm font-semibold text-white">{{ $assignment->taskType?->name ?? '—' }}</div>
                        <div class="text-xs text-slate-500">Employee Task &middot; {{ $job->job_number }}</div>
                    </div>
                    <span class="badge badge-blue">Active</span>
                </div>
                @endforeach
            </div>
            @if($job->status !== 'completed')
            <div class="mt-4 p-3 rounded-lg bg-blue-900/10 border border-blue-800">
                <div class="flex items-center gap-3">
                    <i class="fas fa-stopwatch text-blue-400"></i>
                    <div class="flex-1">
                        <div class="text-sm text-white font-medium">Ready to log time?</div>
                        <div class="text-xs text-slate-400">Go to your timesheet to start a timer for these tasks.</div>
                    </div>
                    <a href="{{ route('timesheet.index') }}" class="btn btn-primary text-sm">
                        <i class="fas fa-play"></i> My Timesheet
                    </a>
                </div>
            </div>
            @endif
            @else
            <div class="text-center py-10">
                <i class="fas fa-inbox text-slate-700 text-4xl mb-3 block"></i>
                <p class="text-slate-400 text-sm">No tasks assigned to you for this job yet.</p>
                <p class="text-xs text-slate-500 mt-1">Contact your processor to assign tasks.</p>
            </div>
            @endif
        </div>
        <div x-show="tab==='processor-drawings'" class="p-5">
            @include('jobs.partials._processor_drawings_tab')
        </div>
    </div>

    @elseif($isRestrictedRole)
    {{-- PROCESSOR: Employee Task Assignments + Processor Drawing Documents tabs --}}
    <div x-data="{
            open: false,
            selectedTasks: [],
            toggleTask(id) {
                const idx = this.selectedTasks.indexOf(id);
                if (idx > -1) { this.selectedTasks.splice(idx, 1); }
                else { this.selectedTasks.push(id); }
            },
            isSelected(id) { return this.selectedTasks.includes(id); }
        }" class="card p-5 mb-5">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="flex items-center gap-2">
                    <i class="fas fa-user-hard-hat text-yellow-400 text-sm"></i> Factory Employee Task Assignments
                </h3>
                <p class="text-xs text-slate-500 mt-0.5">Assign employee tasks to factory employees for this job.</p>
            </div>
            <button @click="open = !open; if(!open) selectedTasks = []" class="btn btn-secondary text-xs" x-text="open ? 'Cancel' : '+ Assign Task'"></button>
        </div>

        <div x-show="open" x-cloak class="mt-4 pt-4 border-t border-slate-700">
            <form method="POST" action="{{ route('processing.assign_employee_task', $job) }}" class="space-y-5">
                @csrf

                {{-- Employee select --}}
                <div>
                    <label class="block text-sm text-slate-400 mb-1">Factory Employee <span class="text-red-400">*</span></label>
                    <select name="user_id" class="input" required>
                        <option value="">— Select employee —</option>
                        @foreach($factoryEmployees ?? [] as $emp)
                        <option value="{{ $emp->id }}">{{ $emp->name }}</option>
                        @endforeach
                    </select>
                </div>

                {{-- Task checkboxes --}}
                <div>
                    <label class="block text-sm text-slate-400 mb-2">
                        Task Type <span class="text-red-400">*</span>
                        <span class="text-slate-500 font-normal">(select at least one)</span>
                    </label>
                    <div class="rounded-lg border border-slate-600 p-4 grid grid-cols-2 gap-x-6 gap-y-3">
                        @foreach($employeeTaskTypes ?? [] as $tt)
                        <label class="flex items-center gap-2 cursor-pointer select-none">
                            <input type="checkbox"
                                   name="task_type_ids[]"
                                   value="{{ $tt->id }}"
                                   @change="toggleTask({{ $tt->id }})"
                                   class="w-4 h-4 rounded border-slate-500 bg-slate-800 text-blue-500 accent-blue-500 cursor-pointer">
                            <span class="text-sm text-slate-300">{{ $tt->name }}</span>
                        </label>
                        @endforeach
                    </div>
                </div>

                {{-- Dynamic hours inputs — one per selected task --}}
                <template x-if="selectedTasks.length > 0">
                    <div class="space-y-3">
                        <p class="text-sm text-slate-400">Allocate Hours <span class="text-red-400">*</span> <span class="text-slate-500 font-normal">(fill in hours for each selected task)</span></p>
                        @foreach($employeeTaskTypes ?? [] as $tt)
                        <div x-show="isSelected({{ $tt->id }})" x-cloak class="flex items-center gap-4">
                            <span class="text-sm text-slate-300 w-48 flex-shrink-0">{{ $tt->name }}</span>
                            <input type="number"
                                   name="allocated_hours[{{ $tt->id }}]"
                                   :required="isSelected({{ $tt->id }})"
                                   min="0.5" step="0.5"
                                   placeholder="e.g. 2.5"
                                   class="input w-40">
                        </div>
                        @endforeach
                    </div>
                </template>

                <div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-user-plus mr-1"></i> Assign Task
                    </button>
                </div>
            </form>
        </div>

        @php $assignments = $job->employeeTaskAssignments ?? collect(); @endphp
        @if($assignments->count() > 0)
        <div class="mt-4 space-y-3">
            @foreach($assignments->groupBy('user_id') as $userId => $userAssignments)
            @php $emp = $userAssignments->first()->user; @endphp
            <div class="rounded-lg p-4" style="background:#0f172a;border:1px solid #1e293b;">
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-8 h-8 rounded-full bg-yellow-900 flex items-center justify-center text-xs font-bold text-yellow-300">
                        {{ $emp?->initials ?? '?' }}
                    </div>
                    <div class="text-sm font-semibold text-white">{{ $emp?->name ?? 'Unknown' }}</div>
                    <span class="badge badge-gray text-xs">{{ $userAssignments->count() }} {{ Str::plural('task', $userAssignments->count()) }}</span>
                </div>
                <div class="space-y-2 mt-2">
                    @foreach($userAssignments as $assignment)
                    @php
                        $loggedMins = \App\Models\TimeEntry::where('user_id', $assignment->user_id)
                            ->where('job_id', $assignment->job_id)
                            ->where('task_type_id', $assignment->task_type_id)
                            ->whereIn('status', ['paused','completed'])
                            ->sum('duration_minutes');
                        $loggedHrs = round($loggedMins / 60, 2);
                        $pct = ($assignment->allocated_hours > 0) ? min(100, round(($loggedHrs / $assignment->allocated_hours) * 100, 1)) : null;
                        $statusBadges = ['pending'=>'badge-gray','in_progress'=>'badge-blue','paused'=>'badge-yellow','completed'=>'badge-green'];
                        $sb = $statusBadges[$assignment->task_status ?? 'pending'] ?? 'badge-gray';
                    @endphp
                    <div class="rounded-lg p-3" style="background:#1e293b;border:1px solid #334155;">
                        <div class="flex items-center gap-2 flex-wrap mb-1">
                            <i class="fas fa-tasks text-xs text-blue-400"></i>
                            <span class="text-sm text-white font-medium">{{ $assignment->taskType?->name ?? '—' }}</span>
                            <span class="badge {{ $sb }} text-xs">{{ ucfirst(str_replace('_',' ', $assignment->task_status ?? 'pending')) }}</span>
                            @if($assignment->allocated_hours)
                            <span class="text-xs text-slate-400 ml-auto">Allocated: <span class="text-white font-medium">{{ $assignment->allocated_hours }}h</span></span>
                            @endif

                            @if($assignment->task_status != 'completed')
                            <form method="POST"
                                  action="{{ route('processing.remove_employee_task', $assignment) }}"
                                  class="inline"
                                  onsubmit="return confirm('Remove this task assignment?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-slate-500 hover:text-red-400 text-xs ml-1" title="Remove">
                                    <i class="fas fa-times"></i>
                                </button>
                            </form>@endif
                        </div>
                        @if($assignment->allocated_hours && $pct !== null)
                        <div class="mt-2">
                            <div class="flex justify-between text-xs text-slate-400 mb-1">
                                <span>{{ $loggedHrs }}h / {{ $assignment->allocated_hours }}h logged</span>
                                <span class="{{ $pct >= 100 ? 'text-green-400' : ($pct >= 60 ? 'text-yellow-400' : 'text-slate-400') }}">{{ $pct }}%</span>
                            </div>
                            <div class="h-1.5 rounded-full bg-slate-700">
                                <div class="h-1.5 rounded-full {{ $pct >= 100 ? 'bg-green-500' : ($pct >= 60 ? 'bg-yellow-500' : 'bg-blue-500') }}"
                                     style="width: {{ $pct }}%"></div>
                            </div>
                        </div>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div class="mt-4 text-sm text-slate-500 text-center py-4">
            <i class="fas fa-user-clock text-slate-700 text-2xl block mb-2"></i>
            No employee tasks assigned yet for this job.
        </div>
        @endif
    </div>

    <div class="card overflow-hidden">
        <div class="flex border-b border-slate-700">
            <button @click="tab='processor-drawings'"
                    :class="tab==='processor-drawings' ? 'border-b-2 border-indigo-500 text-indigo-400' : 'text-slate-500'"
                    class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-drafting-compass text-xs"></i> Processor Drawing Documents
            </button>
        </div>
        <div x-show="tab==='processor-drawings'" class="p-5">
            @include('jobs.partials._processor_drawings_tab')
        </div>
    </div>

    @elseif($isTrades)
    {{-- ── TRADES: simplified job view ──────────────────────────────────────── --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div class="lg:col-span-2 space-y-5">
            <div class="card p-5">
                <h3 class="mb-4">Job Details</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div><span class="text-xs text-slate-500">Job Number</span><div class="text-sm text-white font-medium">{{ $job->job_number }}</div></div>
                    <div><span class="text-xs text-slate-500">Status</span><div class="mt-0.5"><span class="badge {{ $job->status === 'active' ? 'badge-green' : 'badge-gray' }}">{{ ucwords(str_replace('_',' ',$job->status)) }}</span></div></div>
                    <div><span class="text-xs text-slate-500">Project Type</span><div class="text-sm text-white">{{ $job->project_type ? ucfirst($job->project_type) : '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Expected Completion</span><div class="text-sm text-white">{{ $job->expected_completion?->format('d M Y') ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Site Address</span><div class="text-sm text-white">{{ $job->site_address ?? '—' }}</div></div>
                    <div><span class="text-xs text-slate-500">Suburb</span><div class="text-sm text-white">{{ $job->site_suburb ?? '—' }}, {{ $job->site_state ?? '' }} {{ $job->site_postcode ?? '' }}</div></div>
                </div>
                @if($job->notes)
                <div class="mt-4 pt-4 border-t border-slate-700">
                    <div class="text-xs text-slate-500 mb-1">Notes</div>
                    <p class="text-sm text-slate-300">{{ $job->notes }}</p>
                </div>
                @endif
            </div>
            @if($job->status !== 'completed')
            <!-- <div class="card p-5">
                <h3 class="mb-4"><i class="fas fa-stopwatch mr-2 text-blue-400"></i>Log Time on this Job</h3>
                <a href="{{ route('timesheet.index') }}?job_id={{ $job->id }}" class="btn btn-primary">
                    <i class="fas fa-play"></i> Go to My Timesheet
                </a>
                <p class="text-xs text-slate-500 mt-2">Start your timer from the Timesheet page and select this job.</p>
            </div> -->
            @else
            <div class="card p-4 border-emerald-700 bg-emerald-900/10">
                <div class="flex items-center gap-3">
                    <i class="fas fa-check-circle text-emerald-400 text-xl"></i>
                    <div>
                        <div class="text-sm font-medium text-emerald-300">This job is completed</div>
                        <div class="text-xs text-slate-400 mt-0.5">No further time can be logged on completed jobs.</div>
                    </div>
                </div>
            </div>
            @endif
        </div>
        <div>
            @if($job->contact)
            <div class="card p-5">
                <h3 class="mb-3">Client</h3>
                <div class="flex items-center gap-3 mb-3">
                    <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300">{{ $job->contact->initials }}</div>
                    <div>
                        <div class="text-sm font-medium text-white">{{ $job->contact->full_name }}</div>
                        <div class="text-xs text-slate-400">{{ $job->contact->company ?? 'Individual' }}</div>
                    </div>
                </div>
                @if($job->contact->phone)
                <a href="tel:{{ $job->contact->phone }}" class="flex items-center gap-2 text-sm text-slate-300 mb-1"><i class="fas fa-phone w-4"></i>{{ $job->contact->phone }}</a>
                @endif
            </div>
            @endif
        </div>
    </div>

    @else
    {{-- ── FULL VIEW for non-trades (includes designer) ──────────────────────── --}}

    @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']) && $job->status !== 'completed')
    <div class="card p-5" x-data="{ assignOpen: false }">
        <div class="flex items-center justify-between mb-3">
            <div>
                <h3 class="flex items-center gap-2"><i class="fas fa-wrench text-yellow-400"></i> Assigned Trades</h3>
                <p class="text-xs text-slate-500 mt-0.5">Assign trades workers to this job. They will see it in their job list and can log time against it.</p>
            </div>
            <button @click="assignOpen = !assignOpen" class="btn btn-secondary text-sm">
                <i class="fas fa-user-plus"></i> Assign Trade
            </button>
        </div>
        @if($job->tradeUsers->count())
        <div class="flex flex-wrap gap-2 mb-3">
            @foreach($job->tradeUsers as $tu)
            <div class="flex items-center gap-2 px-3 py-1.5 rounded-full" style="background:#1e293b;border:1px solid #334155;">
                <div class="w-6 h-6 rounded-full bg-yellow-900 flex items-center justify-center text-xs font-bold text-yellow-300">{{ $tu->initials }}</div>
                <span class="text-sm text-white">{{ $tu->name }}</span>
                <form method="POST" action="{{ route('jobs.remove_trade', [$job, $tu]) }}" class="inline" onsubmit="return confirm('Remove {{ $tu->name }} from this job?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="text-slate-500 hover:text-red-400 ml-1 text-xs"><i class="fas fa-times"></i></button>
                </form>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-sm text-slate-500 mb-3">No trades workers assigned yet.</p>
        @endif
        <div x-show="assignOpen" x-cloak>
            <form method="POST" action="{{ route('jobs.assign_trade', $job) }}" class="flex gap-3 items-end mt-2 pt-3 border-t border-slate-700">
                @csrf
                <div class="flex-1">
                    <label>Select Trades User</label>
                    <select name="user_id" class="input" required>
                        <option value="">— Select a trades worker —</option>
                        @foreach($availableTradesUsers as $tu)
                        @if(!$job->tradeUsers->contains('id', $tu->id))
                        <option value="{{ $tu->id }}">{{ $tu->name }}</option>
                        @endif
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="btn btn-primary"><i class="fas fa-user-plus"></i> Assign</button>
                <button type="button" @click="assignOpen = false" class="btn btn-secondary">Cancel</button>
            </form>
        </div>
    </div>
    @endif

    <!-- Tabs -->
    <div class="card overflow-hidden">
        <div class="flex border-b border-slate-700 overflow-x-auto">
            @if($canSeeOverview)
            <button @click="tab='overview'" :class="tab==='overview' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-info-circle text-xs"></i>Overview
            </button>

            <button @click="tab='task'" :class="tab==='task' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-tasks text-xs"></i>Task
            </button>
            @endif
            @if($canSeeWorksOrder)
            <button @click="tab='works-order'" :class="tab==='works-order' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-clipboard-list text-xs"></i>Works Order
            </button>
            @endif
            @if($canSeePayments)
            <!-- <button @click="tab='payments'" :class="tab==='payments' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-dollar-sign text-xs"></i>Payments
            </button> -->
            @endif
            @if($canSeeVariants)
            <button @click="tab='variants'" :class="tab==='variants' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-code-branch text-xs"></i>Variants
            </button>
            @endif
            @if($canSeeInvoices)
            <button @click="tab='invoice'" :class="tab==='invoice' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-file-invoice-dollar text-xs"></i>Invoices
            </button>
            @endif
            @if($canSeeDocuments)
            <button @click="tab='documents'" :class="tab==='documents' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-folder text-xs"></i>Documents
            </button>
            @endif
           
            @if(auth()->user()->role->name == 'processor')
            <button @click="tab='processor-drawings'" :class="tab==='processor-drawings' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-drafting-compass text-xs"></i>Processor Drawings
            </button>@endif
            @if(auth()->user()->role->name == 'factory_employee')
            <button @click="tab='processor-drawings'" :class="tab==='processor-drawings' ? 'border-b-2 border-blue-500 text-blue-400' : 'text-slate-500 hover:text-slate-300'"
                class="px-5 py-3 text-sm font-medium whitespace-nowrap flex items-center gap-2 transition-colors">
                <i class="fas fa-drafting-compass text-xs"></i>Processor Drawings
            </button>@endif
        </div>

        <!-- Overview Tab -->
        @if($canSeeOverview)
        <div x-show="tab==='overview'" class="p-5">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 space-y-5">
                    <div class="grid grid-cols-2 gap-5">
                        <div>
                            <h3 class="mb-3">Job Details</h3>
                            <div class="space-y-3">
                                <div><span class="text-xs text-slate-500">Project Type</span><div class="text-sm text-white">{{ $job->project_type ? ucfirst($job->project_type) : '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Design Style</span><div class="text-sm text-white">{{ $job->design_style ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Rooms</span><div class="text-sm text-white">{{ $job->num_rooms ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Source</span><div class="text-sm text-white">{{ $job->source ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Sale Date</span><div class="text-sm text-white">{{ $job->sale_date?->format('d M Y') ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Expected Completion</span><div class="text-sm text-white">{{ $job->expected_completion?->format('d M Y') ?? '—' }}</div></div>
                                @if($job->designer)
                                <div><span class="text-xs text-slate-500">Designer</span><div class="text-sm text-white">{{ $job->designer->name }}</div></div>
                                @endif
                            </div>
                        </div>
                        <div>
                            <h3 class="mb-3">Team</h3>
                            <div class="space-y-3">
                                <div><span class="text-xs text-slate-500">Consultant</span><div class="text-sm text-white">{{ $job->consultant?->name ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Project Manager</span><div class="text-sm text-white">{{ $job->manager?->name ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Site Address</span><div class="text-sm text-white">{{ $job->site_address ?? '—' }}</div></div>
                                <div><span class="text-xs text-slate-500">Suburb</span><div class="text-sm text-white">{{ $job->site_suburb ?? '—' }}, {{ $job->site_state ?? '' }} {{ $job->site_postcode ?? '' }}</div></div>
                            </div>
                        </div>
                    </div>
                    @if($job->description)
                    <div><h3 class="mb-2">Description</h3><p>{{ $job->description }}</p></div>
                    @endif
                    @if($job->notes)
                    <div><h3 class="mb-2">Notes</h3><p>{{ $job->notes }}</p></div>
                    @endif
                    @if($job->next_action)
                    <div class="p-4 rounded-lg" style="background:#1e3a5f;border:1px solid #2563eb;">
                        <div class="text-xs text-blue-400 mb-1 font-medium"><i class="fas fa-bolt mr-1"></i>Next Action</div>
                        <p class="text-sm text-blue-100">{{ $job->next_action }}</p>
                    </div>
                    @endif
                    @if(isset($allTimeEntries) && $allTimeEntries->count() > 0)
                    <div>
                        <h3 class="mb-3">Time Logged</h3>
                        <div class="flex justify-between text-sm">
                            <span class="text-slate-400">Total hours logged</span>
                            <span class="text-white font-medium">{{ number_format($allTimeEntries->sum('duration_minutes') / 60, 1) }}h</span>
                        </div>
                    </div>
                    @endif
                </div>
                @if(auth()->user()->role->id == 2 ||  auth()->user()->role->id== 10 || auth()->user()->role->id == 3)
                <div class="space-y-4">
                    <div class="card p-5" style="background:#0f172a;">
                        <h3 class="mb-3">Job Value</h3>
                        <div class="text-3xl font-bold text-white">${{ number_format($job->job_value ?? 0) }}</div>
                        <div class="text-xs text-slate-500 mt-1">Total job value</div>
                        <div class="mt-4 space-y-2 border-t border-slate-700 pt-3">
                            @foreach([['Deposit (30%)', ($job->job_value??0)*0.3],['CM (20%)',($job->job_value??0)*0.2],['Delivery (20%)',($job->job_value??0)*0.2],['Completion (30%)',($job->job_value??0)*0.3]] as [$lbl,$amt])
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-400">{{ $lbl }}</span>
                                <span class="text-white">${{ number_format($amt) }}</span>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    @if($job->contact)
                    <div class="card p-5" style="background:#0f172a;">
                        <h3 class="mb-3">Client</h3>
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300">{{ $job->contact->initials }}</div>
                            <div>
                                <div class="text-sm font-medium text-white">{{ $job->contact->full_name }}</div>
                                <div class="text-xs text-slate-400">{{ $job->contact->company ?? 'Individual' }}</div>
                            </div>
                        </div>
                        @if($job->contact->email)
                        <a href="mailto:{{ $job->contact->email }}" class="flex items-center gap-2 text-sm text-blue-400 hover:text-blue-300 mb-1"><i class="fas fa-envelope w-4"></i>{{ $job->contact->email }}</a>
                        @endif
                        @if($job->contact->phone)
                        <a href="tel:{{ $job->contact->phone }}" class="flex items-center gap-2 text-sm text-slate-300"><i class="fas fa-phone w-4"></i>{{ $job->contact->phone }}</a>
                        @endif
                        <a href="{{ route('contacts.show', $job->contact) }}" class="mt-3 block text-xs text-blue-400 hover:text-blue-300">View full profile →</a>
                    </div>
                    @endif
                    @if($job->warranty_expiry)
                    <div class="card p-5" style="background:#0f172a;">
                        <h3 class="mb-2">Warranty</h3>
                        <div class="text-sm text-white">Expires {{ $job->warranty_expiry->format('d M Y') }}</div>
                        <div class="text-xs text-slate-400 mt-1">{{ $job->warranty_expiry->diffForHumans() }}</div>
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>

        <div x-show="tab==='task'" class="p-5">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                @php
                    $isAdmin = auth()->user()->role?->name === 'office_admin';
                    $tasks = \App\Models\Task::with(['assignee','creator'])
                        ->where('job_id', $job->id)
                        ->when(!$isAdmin, fn($q) => $q->where('assigned_to', auth()->id()))
                        ->orderByRaw("FIELD(status,'to_do','in_progress','done')")
                        ->orderBy('due_date')
                        ->get();
                @endphp
                @include('tasks.job_tasks', ['tasks' => $tasks, 'jobId' => $job->id, 'isAdmin' => $isAdmin])
            </div>
        </div>


       
        @endif

        <!-- Works Order Tab -->
        @if($canSeeWorksOrder)
        <div x-show="tab==='works-order'" class="p-5">
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h3 class="flex items-center gap-2"><i class="fas fa-clipboard-list text-blue-400"></i> Works Orders</h3>
                        <p class="text-xs text-slate-500 mt-0.5">Scope-of-works documents with trade task lines for this job</p>
                    </div>
                    @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager','accounts']))
                    <a href="{{ route('jobs.works-orders.create', $job) }}" class="btn btn-primary text-sm">
                        <i class="fas fa-plus mr-1"></i> New Works Order
                    </a>
                    @endif
                </div>
                @forelse($job->worksOrders as $wo)
                <div class="card" style="background:#0f172a;border:1px solid #1e293b;">
                    <div class="p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex-1 min-w-0">
                                <div class="flex items-center gap-2 mb-1">
                                    <a href="{{ route('jobs.works-orders.show', [$job, $wo]) }}" class="text-sm font-bold text-white hover:text-blue-300">{{ $wo->order_number }}</a>
                                    <span class="badge badge-{{ $wo->statusColor() }}">{{ $wo->statusLabel() }}</span>
                                </div>
                                @if($wo->scope_of_works)
                                <p class="text-xs text-slate-400 truncate">{{ Str::limit($wo->scope_of_works, 120) }}</p>
                                @else
                                <p class="text-xs text-slate-500 italic">No scope documented yet</p>
                                @endif
                                <div class="flex items-center gap-4 mt-2 text-xs text-slate-500">
                                    @if($wo->issued_date)<span><i class="fas fa-calendar-check mr-1"></i>Issued {{ $wo->issued_date->format('d M Y') }}</span>@endif
                                    @if($wo->target_completion)<span><i class="fas fa-flag-checkered mr-1"></i>Target {{ $wo->target_completion->format('d M Y') }}</span>@endif
                                    @if($wo->items->count() > 0)
                                    <span><i class="fas fa-tasks mr-1"></i>{{ $wo->items->where('status','done')->count() }}/{{ $wo->items->count() }} tasks</span>
                                    @endif
                                </div>
                            </div>
                            <div class="flex items-center gap-2 flex-shrink-0">
                                @if($wo->items->count() > 0)
                                @php $pct = $wo->completionPct(); @endphp
                                <div class="text-right">
                                    <div class="text-xs text-slate-400 mb-1">{{ $pct }}%</div>
                                    <div class="w-24 h-1.5 bg-slate-700 rounded-full overflow-hidden">
                                        <div class="h-full rounded-full" style="width:{{ $pct }}%; background:{{ $pct===100 ? '#4ade80' : '#3b82f6' }};"></div>
                                    </div>
                                </div>
                                @endif
                                <a href="{{ route('jobs.works-orders.show', [$job, $wo]) }}" class="btn btn-secondary text-xs py-1.5">View →</a>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <div class="card p-10 text-center" style="background:#0f172a;">
                    <i class="fas fa-clipboard-list text-4xl text-slate-700 mb-3"></i>
                    <div class="text-sm text-slate-400">No works orders yet</div>
                    @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager','accounts']))
                    <a href="{{ route('jobs.works-orders.create', $job) }}" class="inline-flex items-center gap-2 mt-4 text-sm text-blue-400 hover:text-blue-300">
                        <i class="fas fa-plus text-xs"></i> Create first works order
                    </a>
                    @endif
                </div>
                @endforelse

                @if($job->productionOrders->count() > 0)
                <div class="mt-2">
                    <h4 class="text-sm font-semibold text-slate-400 mb-3 flex items-center gap-2">
                        <i class="fas fa-industry text-xs"></i> Production / Manufacturing Orders
                        <span class="badge badge-gray">{{ $job->productionOrders->count() }}</span>
                    </h4>
                    @foreach($job->productionOrders as $po)
                    <div class="card p-4 mb-2" style="background:#0f172a;border:1px solid #1e293b;">
                        <div class="flex items-start justify-between">
                            <div>
                                <div class="flex items-center gap-2 mb-1">
                                    <span class="text-sm font-bold text-white">{{ $po->order_number ?? ('PO-'.str_pad($po->id,4,'0',STR_PAD_LEFT)) }}</span>
                                    <span class="badge badge-{{ $po->status === 'completed' ? 'green' : ($po->status === 'in_progress' ? 'blue' : 'gray') }}">{{ ucfirst(str_replace('_',' ',$po->status ?? 'pending')) }}</span>
                                </div>
                                <div class="text-sm text-slate-300">{{ $po->description ?? 'Production order' }}</div>
                                <div class="text-xs text-slate-500 mt-1">Supplier: {{ $po->supplier ?? '—' }}@if($po->due_date) · Due: {{ \Carbon\Carbon::parse($po->due_date)->format('d M Y') }}@endif</div>
                            </div>
                            @if($po->cost)<div class="text-sm font-bold text-white">${{ number_format($po->cost) }}</div>@endif
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
        @endif

        <!-- Payments Tab -->
        @if($canSeePayments)
        <div x-show="tab==='payments'" class="p-5">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                    <h3 class="mb-4">Payment Schedule</h3>
                    @php
                    $payments = [
                        ['Deposit (30%)', 'deposit_paid', ($job->job_value??0)*0.30, '#2563eb'],
                        ['Check Measure (20%)', 'cm_paid', ($job->job_value??0)*0.20, '#7c3aed'],
                        ['Delivery (20%)', 'delivery_paid', ($job->job_value??0)*0.20, '#d97706'],
                        ['Final Payment (30%)', 'final_paid', ($job->job_value??0)*0.30, '#16a34a'],
                    ];
                    @endphp
                    <div class="space-y-3">
                        @foreach($payments as [$lbl, $field, $amt, $color])
                        <div class="flex items-center gap-4 p-4 rounded-lg" style="background:#0f172a;border:1px solid {{ $job->$field ? $color.'66' : '#1e293b' }};">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0" style="background:{{ $job->$field ? $color.'22' : '#1e293b' }};">
                                <i class="fas {{ $job->$field ? 'fa-check-circle' : 'fa-circle' }}" style="color:{{ $job->$field ? $color : '#475569' }};"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-sm font-medium text-white">{{ $lbl }}</div>
                                <div class="text-xs text-slate-500">${{ number_format($amt) }}</div>
                            </div>
                            @if(auth()->user()->role?->name === 'office_admin')
                            <form method="POST" action="{{ route('jobs.update', $job) }}">
                                @csrf @method('PATCH')
                                <input type="hidden" name="{{ $field }}" value="{{ $job->$field ? '0' : '1' }}">
                                <button type="submit" class="btn btn-secondary text-xs">{{ $job->$field ? 'Mark Unpaid' : 'Mark Paid' }}</button>
                            </form>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="card p-5" style="background:#0f172a;">
                    <h3 class="mb-4">Payment Summary</h3>
                    @php
                    $paid = collect(['deposit_paid','cm_paid','delivery_paid','final_paid'])
                        ->filter(fn($f) => $job->$f)
                        ->map(fn($f) => match($f) {
                            'deposit_paid'  => ($job->job_value??0)*0.30,
                            'cm_paid'       => ($job->job_value??0)*0.20,
                            'delivery_paid' => ($job->job_value??0)*0.20,
                            'final_paid'    => ($job->job_value??0)*0.30,
                            default => 0
                        })->sum();
                    $outstanding = ($job->job_value ?? 0) - $paid;
                    $paidPct = ($job->job_value ?? 0) > 0 ? ($paid / $job->job_value) * 100 : 0;
                    @endphp
                    <div class="space-y-4">
                        <div class="flex justify-between"><span class="text-slate-400">Total Job Value</span><span class="font-bold text-white">${{ number_format($job->job_value ?? 0) }}</span></div>
                        <div class="flex justify-between"><span class="text-slate-400">Received</span><span class="font-bold text-green-400">${{ number_format($paid) }}</span></div>
                        <div class="flex justify-between"><span class="text-slate-400">Outstanding</span><span class="font-bold text-amber-400">${{ number_format($outstanding) }}</span></div>
                        <div>
                            <div class="flex justify-between text-xs text-slate-500 mb-1"><span>Collection Progress</span><span>{{ round($paidPct) }}%</span></div>
                            <div class="progress-bar"><div class="progress-fill bg-green-500" style="width:{{ $paidPct }}%;"></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Variants Tab -->
        @if($canSeeVariants)
        <div x-show="tab==='variants'" class="p-5" x-data="{ addVariant: false }">
            <div class="flex items-center justify-between mb-5">
                <div>
                    <h3 class="flex items-center gap-2"><i class="fas fa-code-branch text-indigo-400"></i>Job Variants</h3>
                    <p class="text-xs text-slate-500 mt-1">Track quote options presented to the client.</p>
                </div>
                @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager','sales_consultant','accounts']))
                <button @click="addVariant = true" class="btn btn-primary text-sm"><i class="fas fa-plus mr-1"></i>Add Variant</button>
                @endif
            </div>
            @if(isset($variantRevenue) && $job->variants->where('status','accepted')->count())
            <div class="p-3 rounded-lg mb-5 flex items-center gap-3" style="background:#14532d22;border:1px solid #16a34a44;">
                <i class="fas fa-check-circle text-green-400"></i>
                <div class="text-sm text-green-300">
                    <strong>{{ $job->variants->where('status','accepted')->count() }}</strong> accepted variant(s) adding <strong>${{ number_format($variantRevenue, 2) }}</strong> to job revenue
                </div>
            </div>
            @endif
            @forelse($job->variants->sortByDesc('created_at') as $variant)
            <div class="card p-5 mb-4">
                <div class="flex items-start justify-between mb-2">
                    <div class="flex items-center gap-3">
                        <span class="badge badge-{{ $variant->statusColor() }}">{{ ucfirst($variant->status) }}</span>
                        <h3 class="text-base">{{ $variant->name }}</h3>
                    </div>
                    @if($variant->price_adjustment != 0)
                    <div class="text-sm font-bold {{ $variant->price_adjustment > 0 ? 'text-green-400' : 'text-red-400' }}">
                        {{ $variant->price_adjustment > 0 ? '+' : '' }}${{ number_format(abs($variant->price_adjustment), 2) }}
                    </div>
                    @endif
                </div>
                @if($variant->description)<p class="text-sm text-slate-400 mb-3">{{ $variant->description }}</p>@endif
                @if($variant->status === 'pending' && in_array(auth()->user()->role?->name, ['office_admin','project_manager','sales_consultant']))
                <div class="flex gap-2 mt-3 pt-3 border-t border-slate-700">
                    <form method="POST" action="{{ route('jobs.variants.accept', [$job, $variant]) }}" class="flex-1">
                        @csrf
                        <button type="submit" class="btn btn-success w-full justify-center text-sm"><i class="fas fa-check mr-1"></i> Accept</button>
                    </form>
                    <form method="POST" action="{{ route('jobs.variants.reject', [$job, $variant]) }}" class="flex-1">
                        @csrf
                        <button type="submit" class="btn btn-danger w-full justify-center text-sm"><i class="fas fa-times mr-1"></i> Reject</button>
                    </form>
                </div>
                @endif
            </div>
            @empty
            <div class="card p-12 text-center" style="background:#0f172a;">
                <i class="fas fa-code-branch text-slate-700 text-4xl mb-3 block"></i>
                <p class="text-slate-400">No variants yet for this job.</p>
            </div>
            @endforelse
            <div x-show="addVariant" x-cloak class="fixed inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.7);">
                <div class="card p-6 w-full max-w-lg mx-4" @click.outside="addVariant = false">
                    <div class="flex items-center justify-between mb-4">
                        <h3>Add Variant</h3>
                        <button @click="addVariant = false" class="text-slate-400 hover:text-white"><i class="fas fa-times"></i></button>
                    </div>
                    <form method="POST" action="{{ route('jobs.variants.store', $job) }}" class="space-y-4">
                        @csrf
                        <div><label>Variant Title *</label><input type="text" name="name" class="input" required></div>
                        <div><label>Price Adjustment ($) *</label><input type="number" name="price_adjustment" value="0" step="0.01" class="input" required></div>
                        <div><label>Description</label><textarea name="description" rows="3" class="input"></textarea></div>
                        <div class="flex gap-3 pt-2">
                            <button type="button" @click="addVariant = false" class="btn btn-secondary flex-1">Cancel</button>
                            <button type="submit" class="btn btn-primary flex-1"><i class="fas fa-plus mr-1"></i>Add Variant</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif

        <!-- Invoice Tab -->
        @if($canSeeInvoices)
        <div x-show="tab==='invoice'" class="p-5">
            <div class="space-y-5">
                @forelse($job->jobInvoices as $inv)
                <div class="card p-4" style="background:#0f172a;">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-1">
                                <i class="fas fa-file-invoice-dollar text-amber-400"></i>
                                <span class="font-medium text-white">{{ $inv->invoice_number ?? 'No Invoice #' }}</span>
                                <span class="text-xs text-slate-400">{{ $inv->invoice_date?->format('d M Y') ?? '—' }}</span>
                            </div>
                            <div class="text-lg font-bold text-amber-400 mb-1">${{ number_format($inv->invoice_amount, 2) }}</div>
                            @if($inv->note)<p class="text-sm text-slate-400">{{ $inv->note }}</p>@endif
                        </div>
                        @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
                        <form method="POST" action="{{ route('jobs.invoices.destroy', [$job, $inv]) }}" onsubmit="return confirm('Delete?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-slate-500 hover:text-red-400 text-xs ml-4"><i class="fas fa-trash"></i></button>
                        </form>
                        @endif
                    </div>
                </div>
                @empty
                <div class="text-center py-8 text-slate-500"><i class="fas fa-file-invoice-dollar text-3xl mb-2 block text-slate-700"></i><p class="text-sm">No invoices recorded yet.</p></div>
                @endforelse
                @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager','accounts']))
                <div class="card p-5">
                    <h3 class="mb-4">Add Invoice</h3>
                    <form method="POST" action="{{ route('jobs.invoices.store', $job) }}" enctype="multipart/form-data" class="space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div><label>Invoice Number</label><input type="text" name="invoice_number" class="input"></div>
                            <div><label>Invoice Date *</label><input type="date" name="invoice_date" class="input" value="{{ date('Y-m-d') }}" required></div>
                            <div><label>Amount (incl GST) *</label><input type="number" name="invoice_amount" class="input" step="0.01" min="0" required></div>
                        </div>
                        <div><label>Note</label><textarea name="note" rows="2" class="input"></textarea></div>
                        <div class="flex justify-end">
                            <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-2"></i>Add Invoice</button>
                        </div>
                    </form>
                </div>
                @endif
            </div>
        </div>
        @endif

        <!-- Documents Tab -->
        @if($canSeeDocuments)
        <div x-show="tab==='documents'" class="p-5">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                @if($job->quote)
                <a href="{{ route('quotes.show', $job->quote) }}" class="card p-4 flex items-center gap-3 hover:border-blue-500 transition-colors" style="background:#0f172a;">
                    <div class="w-10 h-10 rounded-lg bg-blue-900 flex items-center justify-center"><i class="fas fa-file-invoice text-blue-400"></i></div>
                    <div><div class="text-sm font-medium text-white">Quote {{ $job->quote->quote_number }}</div><div class="text-xs text-slate-400">${{ number_format($job->quote->total ?? 0) }} · {{ ucfirst($job->quote->status) }}</div></div>
                    <i class="fas fa-chevron-right ml-auto text-slate-600"></i>
                </a>
                @else
                <a href="{{ route('quotes.create', ['job_id'=>$job->id]) }}" class="card p-4 flex items-center gap-3 border-dashed hover:border-blue-500 transition-colors" style="background:#0f172a;">
                    <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center"><i class="fas fa-plus text-slate-500"></i></div>
                    <div><div class="text-sm font-medium text-slate-400">Create Quote</div><div class="text-xs text-slate-500">No quote linked yet</div></div>
                </a>
                @endif
                @if($job->contract)
                <a href="{{ route('contracts.show', $job->contract) }}" class="card p-4 flex items-center gap-3 hover:border-purple-500 transition-colors" style="background:#0f172a;">
                    <div class="w-10 h-10 rounded-lg bg-purple-900 flex items-center justify-center"><i class="fas fa-file-contract text-purple-400"></i></div>
                    <div><div class="text-sm font-medium text-white">Contract {{ $job->contract->contract_number }}</div><div class="text-xs text-slate-400">{{ ucfirst($job->contract->status) }}</div></div>
                    <i class="fas fa-chevron-right ml-auto text-slate-600"></i>
                </a>
                @else
                <a href="{{ route('contracts.create', ['job_id'=>$job->id]) }}" class="card p-4 flex items-center gap-3 border-dashed hover:border-purple-500 transition-colors" style="background:#0f172a;">
                    <div class="w-10 h-10 rounded-lg bg-slate-800 flex items-center justify-center"><i class="fas fa-plus text-slate-500"></i></div>
                    <div><div class="text-sm font-medium text-slate-400">Create Contract</div><div class="text-xs text-slate-500">No contract linked yet</div></div>
                </a>
                @endif
                @if($job->checkMeasure)
                <a href="{{ route('check_measure.show', $job->checkMeasure) }}" class="card p-4 flex items-center gap-3 hover:border-teal-500 transition-colors" style="background:#0f172a;">
                    <div class="w-10 h-10 rounded-lg bg-teal-900 flex items-center justify-center"><i class="fas fa-ruler text-teal-400"></i></div>
                    <div><div class="text-sm font-medium text-white">Check Measure</div><div class="text-xs text-slate-400">{{ ucfirst($job->checkMeasure->status ?? 'pending') }}</div></div>
                    <i class="fas fa-chevron-right ml-auto text-slate-600"></i>
                </a>
                @endif
            </div>
        </div>
        @endif

        <!-- Processor Drawings Tab -->
        <div x-show="tab==='processor-drawings'" class="p-5">
            @include('jobs.partials._processor_drawings_tab')
        </div>
    </div>

    @endif {{-- end non-trades / processor view --}}

</div>
@endsection