@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 || $isOfficeAdmin)
            <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'],['quote','Quotes'],['contracts','Contracts'],['sold','Sold'],['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 < 9)<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>Variations
            </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)
        @php $job->loadMissing(['variants.items.materialType', 'variants.respondedBy', 'variants.quote']); @endphp
        <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 Variation</h3>
                </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 Variation</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 Variation(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) }}
                        <span class="text-xs font-normal text-slate-500">incl. GST</span>
                    </div>
                    @endif
                </div>
                @if($variant->description)<p class="text-sm text-slate-400 mb-3">{{ $variant->description }}</p>@endif

                {{-- Material items table --}}
                @if($variant->items->count())
                <div class="overflow-x-auto mb-3 rounded-lg" style="background:#0d1929;">
                    <table class="w-full text-xs">
                        <thead>
                            <tr class="text-slate-500 border-b border-slate-700">
                                <th class="px-3 py-2 text-left font-medium">Description</th>
                                <th class="px-3 py-2 text-left font-medium">Code</th>
                                <th class="px-3 py-2 text-center font-medium">Unit</th>
                                <th class="px-3 py-2 text-right font-medium">Qty</th>
                                <th class="px-3 py-2 text-right font-medium">Retail</th>
                                <th class="px-3 py-2 text-right font-medium">Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($variant->items as $item)
                            <tr class="border-b border-slate-800/50">
                                <td class="px-3 py-2 text-white">{{ $item->description }}</td>
                                <td class="px-3 py-2 text-slate-400 font-mono">{{ $item->item_code ?? '—' }}</td>
                                <td class="px-3 py-2 text-center text-slate-400">{{ $item->unit ?? 'Each' }}</td>
                                <td class="px-3 py-2 text-right text-slate-300">{{ number_format((float)$item->qty, 2) }}</td>
                                <td class="px-3 py-2 text-right text-slate-300">${{ number_format((float)$item->retail_price, 2) }}</td>
                                <td class="px-3 py-2 text-right text-green-400 font-medium">${{ number_format($item->retailTotal(), 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="px-3 py-2 text-right text-slate-400">Subtotal (ex. GST)</td>
                                <td class="px-3 py-2 text-right text-green-400 font-semibold">${{ number_format($variant->totalRetail(), 2) }}</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="px-3 py-1 text-right text-slate-500">GST (10%)</td>
                                <td class="px-3 py-1 text-right text-slate-400">${{ number_format($variant->totalRetail() * 0.10, 2) }}</td>
                            </tr>
                            <tr class="border-t border-slate-600">
                                <td colspan="5" class="px-3 py-2 text-right text-white font-semibold">Total (inc. GST)</td>
                                <td class="px-3 py-2 text-right text-white font-bold">${{ number_format($variant->totalRetail() * 1.10, 2) }}</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
                @endif

                @if($variant->stripe_payment_status)
                <p class="text-xs text-slate-500 mb-2">Payment: <span class="text-indigo-400 font-medium">{{ ucfirst(str_replace('_',' ',$variant->stripe_payment_status)) }}</span></p>
                @endif

                @if($variant->status === 'pending' && in_array(auth()->user()->role?->name, ['office_admin','project_manager','sales_consultant','accounts']))
                <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" onclick="return confirm('Mark this variant as accepted?')"><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" onclick="return confirm('Mark this variant as rejected?')"><i class="fas fa-times mr-1"></i> Reject</button>
                    </form>
                    <form method="POST" action="{{ route('jobs.variants.destroy', [$job, $variant]) }}" onsubmit="return confirm('Delete this variant?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-secondary text-sm text-red-400"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
                @elseif($variant->status === 'rejected')
                <p class="text-xs text-red-400 mt-2 pt-2 border-t border-slate-700"><i class="fas fa-times-circle mr-1"></i>Rejected{{ $variant->responded_at ? ' on '.$variant->responded_at->format('d M Y') : '' }}</p>
                @elseif($variant->status === 'accepted')
                <p class="text-xs text-green-400 mt-2 pt-2 border-t border-slate-700"><i class="fas fa-check-circle mr-1"></i>Accepted{{ $variant->responded_at ? ' on '.$variant->responded_at->format('d M Y') : '' }}</p>
                @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 Variations yet for this job.</p>
            </div>
            @endforelse

            {{-- Add Variation Modal with Material Picker --}}
            <div x-show="addVariant" x-cloak class="fixed inset-0 z-50 flex items-center justify-center" style="background:rgba(0,0,0,0.75);">
                <div class="card w-full mx-4 flex flex-col" style="max-width:860px; max-height:90vh; overflow-y:auto;"
                     x-data="variantMaterialPicker()" @click.outside="addVariant = false">
                    <div class="flex items-center justify-between p-5 border-b border-slate-700 sticky top-0 z-10" style="background:#1e2a3a;">
                        <h3><i class="fas fa-code-branch text-indigo-400 mr-2"></i>Add Variation</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="p-5 space-y-5" id="add-variant-form">
                        @csrf

                        {{-- Basic info --}}
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Variation Title*</label>
                                <input type="text" name="name"  class="input text-sm py-1.5" required placeholder="Variation Title...">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Variation Description</label>
                                <input type="text" name="internal_notes"  class="input text-sm py-1.5" placeholder="Variation Description...">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Material Type *</label>
                                <select x-model="selectedTypeId" name="items[material_type_id]" @change="loadMaterials()" required class="input text-sm py-1.5">
                                    <option value="">-- Select Type --</option>
                                    @foreach($materialTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Material *</label>
                                <select x-model="selectedMaterialId" name="items[material_id]" @change="fillFromMaterial()" required class="input text-sm py-1.5">
                                    <option value="">-- Choose --</option>
                                    <template x-for="m in materials" :key="m.id">
                                        <option :value="m.id" :data-wsale="m.wsale_price" :data-retail="m.retail_price"
                                            :data-desc="m.description" :data-code="m.item_code" :data-unit="m.unit" :data-comments="m.comments"
                                            x-text="m.description + ' (' + m.item_code + ')'"></option>
                                    </template>
                                </select>
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Description</label>
                                <input type="text" readonly name="items[description]" x-model="form.description" class="input text-sm py-1.5" required placeholder="Material description...">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Item Code</label>
                                <input type="text" readonly name="items[item_code]" x-model="form.item_code" class="input text-sm py-1.5" placeholder="e.g. CA-FL">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Unit</label>
                                <input type="text" readonly name="items[unit]" x-model="form.unit" class="input text-sm py-1.5" placeholder="Each, L/m, Job...">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Qty *</label>
                                <input type="number" name="items[qty]" x-model="form.qty" class="input text-sm py-1.5" step="1" min="1" required value="1">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">W/Sale Price $</label>
                                <input type="number" name="items[wsale_price]" x-model="form.wsale_price" class="input text-sm py-1.5" step="0.01" min="0">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Retail Price $ <span class="text-green-500">(client)</span></label>
                                <input type="number" name="items[retail_price]" x-model="form.retail_price" class="input text-sm py-1.5" step="0.01" min="0">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Note</label>
                                <input type="text" name="items[comments]" x-model="form.comments" class="input text-sm py-1.5" placeholder="Optional notes...">
                            </div>
                        </div>

                        {{-- Materials Section --}}
                        <!-- <div>
                            <div class="flex items-center justify-between mb-3">
                                <h4 class="text-sm font-semibold text-white"><i class="fas fa-boxes text-orange-400 mr-2"></i>Materials</h4>
                                <span class="text-xs text-slate-400">Price to client = qty × retail price (ex. GST)</span>
                            </div>

                            {{-- Existing items list --}}
                            <template x-if="items.length > 0">
                                <div class="overflow-x-auto mb-3 rounded-lg" style="background:#0d1929;">
                                    <table class="w-full text-xs">
                                        <thead>
                                            <tr class="text-slate-500 border-b border-slate-700">
                                                <th class="px-3 py-2 text-left">Description</th>
                                                <th class="px-3 py-2 text-center">Unit</th>
                                                <th class="px-3 py-2 text-right">Qty</th>
                                                <th class="px-3 py-2 text-right">Retail Price</th>
                                                <th class="px-3 py-2 text-right">Total</th>
                                                <th class="px-3 py-2"></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <template x-for="(item, idx) in items" :key="idx">
                                                <tr class="border-b border-slate-800/50">
                                                    <td class="px-3 py-2 text-white" x-text="item.description"></td>
                                                    <td class="px-3 py-2 text-center text-slate-400" x-text="item.unit || 'Each'"></td>
                                                    <td class="px-3 py-2 text-right text-slate-300" x-text="parseFloat(item.qty).toFixed(2)"></td>
                                                    <td class="px-3 py-2 text-right text-slate-300" x-text="' $' + parseFloat(item.retail_price).toFixed(2)"></td>
                                                    <td class="px-3 py-2 text-right text-slate-300" x-text="' $' + (parseFloat(item.qty) * parseFloat(item.retail_price)).toFixed(2)"></td>
                                                    <td class="px-3 py-2 text-center">
                                                        <button type="button" @click="removeItem(idx)" class="text-slate-400 hover:text-slate-300"><i class="fas fa-times"></i></button>
                                                    </td>
                                                </tr>
                                            </template>
                                        </tbody>
                                    </table>
                                </div>
                            </template>

                            <div class="flex items-center gap-3">
                                <input type="number" name="qty" min="0" step="0.01" class="input" placeholder="Qty" required>
                                <input type="number" name="retail_price" min="0" step="0.01" class="input" placeholder="Retail Price" required>
                                <input type="text" name="description" class="input" placeholder="Description">
                                <input type="text" name="unit" class="input" placeholder="Unit">
                                <button type="button" @click="addItem" class="btn btn-primary"><i class="fas fa-plus"></i></button>
                            </div>
                        </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 Variation</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
@push('scripts')
<script>
function variantMaterialPicker() {
    return {
        selectedTypeId: '',
        selectedMaterialId: '',
        materials: [],
        items: [],
        form: {
            material_id: null,
            material_type_id: null,
            description: '',
            item_code: '',
            unit: 'Each',
            qty: 1,
            wsale_price: '',
            retail_price: '',
            comments: '',
        },
        get subtotal() {
            return this.items.reduce(function(sum, item) {
                return sum + (parseFloat(item.qty) * parseFloat(item.retail_price));
            }, 0);
        },
        loadMaterials() {
            this.selectedMaterialId = '';
            this.materials = [];
            this.resetForm();
            if (!this.selectedTypeId) return;
            fetch('{{ url("/materials/api/type/") }}/' + this.selectedTypeId + '/materials')
                .then(r => r.json())
                .then(d => { this.materials = d; });
        },
        fillFromMaterial() {
            if (!this.selectedMaterialId) { this.resetForm(); return; }
            const m = this.materials.find(x => x.id == this.selectedMaterialId);
            if (!m) return;
            this.form.material_id      = m.id;
            this.form.material_type_id = this.selectedTypeId;
            this.form.description      = m.description;
            this.form.item_code        = m.item_code || '';
            this.form.unit             = m.unit || 'Each';
            this.form.wsale_price      = m.wsale_price || '0';
            this.form.retail_price     = m.retail_price || '0';
            this.form.comments         = m.comments || '';
            this.form.qty              = 1;
        },
        addItem() {
            if (!this.form.description) { alert('Please select a material first.'); return; }
            if (!this.form.qty || parseFloat(this.form.qty) <= 0) { alert('Please enter a valid quantity.'); return; }
            this.items.push({
                material_id:      this.form.material_id,
                material_type_id: this.form.material_type_id,
                description:      this.form.description,
                item_code:        this.form.item_code,
                unit:             this.form.unit,
                qty:              this.form.qty,
                wsale_price:      this.form.wsale_price,
                retail_price:     this.form.retail_price,
                comments:         this.form.comments,
            });
            this.selectedMaterialId = '';
            this.resetForm();
        },
        removeItem(idx) {
            this.items.splice(idx, 1);
        },
        resetForm() {
            this.form = {
                material_id: null,
                material_type_id: this.selectedTypeId || null,
                description: '',
                item_code: '',
                unit: 'Each',
                qty: 1,
                wsale_price: '',
                retail_price: '',
                comments: '',
            };
        },
    };
}
</script>
@endpush