@extends('layouts.app')
@section('title', $job->job_number)
@section('breadcrumb')<a href="{{ route('jobs.index') }}" class="hover:text-white">{{ isset($isTrades) && $isTrades ? '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; @endphp
<div x-data="{ tab: 'overview' }" 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)
            <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
        </div>
    </div>

    <!-- Pipeline Progress -->
    <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>
        @if(!$isTrades && 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>

    @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($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">
            <!-- Job Info -->
            <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>

            <!-- Quick Timer for this job -->
            @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>
            <!-- Client Info -->
            @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 ──────────────────────────────────────────── --}}

    {{-- ── Trade Assignment Section (admin/PM only) ──────────────────────────── --}}
    @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
    <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>

        {{-- Currently assigned trades --}}
        @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

        {{-- Assign form --}}
        <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">
            @foreach([['overview','Overview','fa-info-circle'],['works-order','Works Order','fa-clipboard-list'],['payments','Payments','fa-dollar-sign'],['variants','Variants','fa-code-branch'],['invoice','Invoices','fa-file-invoice-dollar'],['documents','Documents','fa-folder']] as [$t,$l,$icon])
            <button @click="tab='{{ $t }}'" :class="tab==='{{ $t }}' ? '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 {{ $icon }} text-xs"></i>{{ $l }}
            </button>
            @endforeach
        </div>

        <!-- Overview Tab -->
        <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>
                            </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

                    <!-- Time entries overview (non-financial) -->
                    @if(isset($allTimeEntries) && $allTimeEntries->count() > 0)
                    <div>
                        <h3 class="mb-3">Time Logged</h3>
                        <div class="space-y-2">
                            @php $totalMins = $allTimeEntries->sum('duration_minutes'); @endphp
                            <div class="flex justify-between text-sm">
                                <span class="text-slate-400">Total hours logged</span>
                                <span class="text-white font-medium">{{ number_format($totalMins / 60, 1) }}h</span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
                <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%)','deposit_paid',(($job->job_value??0)*0.3)],['CM (20%)',null,(($job->job_value??0)*0.2)],['Delivery (20%)',null,(($job->job_value??0)*0.2)],['Completion (30%)',null,(($job->job_value??0)*0.3)]] as [$lbl,$fld,$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

                    <!-- Gross Profit card -->
                    @if(isset($grossProfit))
                    <!-- <div class="card p-5" style="background:#0f172a;">
                        <h3 class="mb-3">Gross Profit</h3>
                        <div class="text-2xl font-bold {{ $grossProfit >= 0 ? 'text-green-400' : 'text-red-400' }}">${{ number_format($grossProfit) }}</div>
                        <div class="text-xs text-slate-500 mt-1">{{ $grossMargin }}% margin</div>
                        <div class="mt-3 space-y-1 text-xs border-t border-slate-700 pt-3">
                            <div class="flex justify-between"><span class="text-slate-400">Revenue</span><span class="text-white">${{ number_format($revenue) }}</span></div>
                            <div class="flex justify-between"><span class="text-slate-400">Materials</span><span class="text-red-400">-${{ number_format($materialCost) }}</span></div>
                            <div class="flex justify-between"><span class="text-slate-400">Labour</span><span class="text-red-400">-${{ number_format($labourCost) }}</span></div>
                        </div>
                    </div> -->
                    @endif
                </div>
            </div>
        </div>

        <!-- Works Order Tab -->
        <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']))
                    <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 transition-colors">{{ $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']))
                    <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>
                            <div class="text-right">
                                @if($po->cost)<div class="text-sm font-bold text-white">${{ number_format($po->cost) }}</div>@endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
        </div>

        <!-- Payments Tab -->
        <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>

        <!-- Variants Tab -->
        <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']))
                <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>
                    <div class="flex items-center gap-3">
                        @if($variant->price_adjustment != 0)
                        <div class="text-right">
                            <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>
                        </div>
                        @endif
                    </div>
                </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>

        <!-- Invoice Tab -->
        <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>

        <!-- Documents Tab -->
        <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>
    </div>

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

</div>
@endsection