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

@section('content')
<div class="space-y-5" x-data="{ addingTask: false }">

{{-- Header --}}
<div class="flex items-start justify-between">
    <div>
        <div class="flex items-center gap-3 mb-1">
            <h1 class="text-2xl font-bold text-white">{{ $worksOrder->order_number }}</h1>
            <span class="badge badge-{{ $worksOrder->statusColor() }}">{{ $worksOrder->statusLabel() }}</span>
            @if($worksOrder->fault_approval_status === 'pending')
            <span class="badge badge-amber">Fault Approval Pending</span>
            @elseif($worksOrder->fault_approval_status === 'approved')
            <span class="badge badge-green">Faults Approved</span>
            @elseif($worksOrder->fault_approval_status === 'rejected')
            <span class="badge badge-red">Faults Rejected</span>
            @endif
        </div>
        <div class="text-sm text-slate-400">
            {{ $job->job_number }} · {{ $job->contact?->full_name ?? 'No client' }}
            @if($worksOrder->issued_date) · Issued {{ $worksOrder->issued_date->format('d M Y') }} @endif
        </div>
    </div>
    <div class="flex items-center gap-2">
        @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
        <a href="{{ route('jobs.works-orders.edit', [$job, $worksOrder]) }}" class="btn btn-secondary">
            <i class="fas fa-edit mr-1"></i> Edit
        </a>
        @endif
        <a href="{{ route('jobs.show', $job) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left mr-1"></i> Back to Job
        </a>
    </div>
</div>

@if(session('success'))
<div class="p-3 rounded-lg bg-green-900/30 border border-green-700 text-green-300 text-sm"><i class="fas fa-check-circle mr-1"></i>{{ session('success') }}</div>
@endif

{{-- Fault Approval Banner --}}
@if($worksOrder->fault_approval_status === 'pending' && in_array(auth()->user()->role?->name, ['office_admin','project_manager','accounts']))
<div class="card p-4 border border-amber-600 bg-amber-900/20">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <div class="text-amber-300 font-semibold mb-1"><i class="fas fa-exclamation-triangle mr-2"></i>Fault Cost Approval Required</div>
            <div class="text-sm text-amber-200">Total fault cost <strong>${{ number_format($worksOrder->totalFaultCost(), 2) }}</strong> exceeds the ${{ number_format($threshold, 0) }} threshold. Manager approval is required.</div>
        </div>
        <div class="flex gap-2">
            <form method="POST" action="{{ route('jobs.works-orders.approve-faults', [$job, $worksOrder]) }}">
                @csrf
                <input type="hidden" name="action" value="approved">
                <button type="submit" class="btn btn-primary bg-green-600 hover:bg-green-700 border-green-600">
                    <i class="fas fa-check mr-1"></i> Approve
                </button>
            </form>
            <form method="POST" action="{{ route('jobs.works-orders.approve-faults', [$job, $worksOrder]) }}">
                @csrf
                <input type="hidden" name="action" value="rejected">
                <button type="submit" class="btn btn-secondary border-red-600 text-red-400 hover:text-red-300">
                    <i class="fas fa-times mr-1"></i> Reject
                </button>
            </form>
        </div>
    </div>
</div>
@endif

{{-- Status Workflow --}}
@if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
<div class="card p-4">
    <form method="POST" action="{{ route('jobs.works-orders.status', [$job, $worksOrder]) }}" class="flex items-center gap-3">
        @csrf
        <label class="text-sm text-slate-400 whitespace-nowrap">Advance status:</label>
        <select name="status" class="input flex-1 max-w-xs">
            @foreach(['draft'=>'Draft','issued'=>'Issued','in_progress'=>'In Progress','completed'=>'Completed','cancelled'=>'Cancelled'] as $val => $lbl)
            <option value="{{ $val }}" {{ $worksOrder->status === $val ? 'selected' : '' }}>{{ $lbl }}</option>
            @endforeach
        </select>
        <button type="submit" class="btn btn-primary whitespace-nowrap"><i class="fas fa-arrow-right mr-1"></i>Update</button>
    </form>
    @php $pct = $worksOrder->completionPct(); @endphp
    @if($worksOrder->items->count() > 0)
    <div class="mt-3">
        <div class="flex justify-between text-xs text-slate-400 mb-1">
            <span>{{ $worksOrder->items->where('status','done')->count() }} / {{ $worksOrder->items->count() }} tasks complete</span>
            <span>{{ $pct }}%</span>
        </div>
        <div class="h-2 bg-slate-700 rounded-full overflow-hidden">
            <div class="h-full rounded-full transition-all" style="width:{{ $pct }}%; background: {{ $pct === 100 ? '#4ade80' : '#3b82f6' }};"></div>
        </div>
    </div>
    @endif
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    {{-- Left: Details + Scope + Tasks --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Work Order Details --}}
        <div class="card p-5">
            <h3 class="mb-4 flex items-center gap-2"><i class="fas fa-file-alt text-blue-400"></i> Work Order Details</h3>
            <div class="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
                <div class="space-y-2">
                    <div class="flex justify-between"><span class="text-slate-400">Date</span><span class="text-white">{{ $worksOrder->issued_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Factory Mgr Approval</span><span class="text-white">{{ $worksOrder->factory_manager_approval?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Given To Factory</span><span class="text-white">{{ $worksOrder->given_to_factory?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Manufacture Date</span><span class="text-white">{{ $worksOrder->manufacture_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Factory Completion</span><span class="text-white">{{ $worksOrder->factory_completion_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Target Completion</span><span class="text-white">{{ $worksOrder->target_completion?->format('d M Y') ?? '—' }}</span></div>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between"><span class="text-slate-400">Delivery Date</span><span class="text-white">{{ $worksOrder->delivery_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Delivered Date</span><span class="text-white">{{ $worksOrder->delivered_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Client Booking</span><span class="text-white">{{ $worksOrder->client_booking_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Client Completion</span><span class="text-white">{{ $worksOrder->client_completion_date?->format('d M Y') ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Order Type</span><span class="text-white">{{ $worksOrder->works_order_type ?? '—' }}</span></div>
                    <div class="flex justify-between"><span class="text-slate-400">Supervisor</span><span class="text-white">{{ $worksOrder->supervisor?->name ?? '—' }}</span></div>
                </div>
            </div>
            <div class="mt-3 flex items-center gap-2 text-sm">
                <span class="text-slate-400">Drawings Attached:</span>
                @if($worksOrder->drawings_attached)
                <span class="text-green-400"><i class="fas fa-check-square mr-1"></i>Yes</span>
                @else
                <span class="text-slate-500"><i class="fas fa-square mr-1"></i>No</span>
                @endif
            </div>
            @if($worksOrder->comments)
            <div class="mt-3 pt-3 border-t border-slate-700">
                <div class="text-xs text-slate-400 mb-1">Comments</div>
                <div class="text-sm text-slate-300 whitespace-pre-wrap">{{ $worksOrder->comments }}</div>
            </div>
            @endif
        </div>

        {{-- Faults Section --}}
        <div class="card overflow-hidden">
            <div class="p-4 border-b border-slate-700 flex items-center justify-between">
                <h3 class="flex items-center gap-2"><i class="fas fa-exclamation-triangle text-amber-400"></i> Faults</h3>
                @php $faultTotal = $worksOrder->totalFaultCost(); @endphp
                @if($faultTotal > 0)
                <span class="text-sm font-semibold text-amber-400">${{ number_format($faultTotal, 2) }}</span>
                @endif
            </div>
            @if($worksOrder->faults->count())
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-xs text-slate-400 border-b border-slate-700">
                        <th class="px-4 py-2 text-left">#</th>
                        <th class="px-4 py-2 text-left">Fault Type</th>
                        <th class="px-4 py-2 text-right">Cost</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($worksOrder->faults as $fault)
                    <tr class="table-row border-b border-slate-800">
                        <td class="px-4 py-2 text-slate-500">Fault {{ $fault->fault_number }}</td>
                        <td class="px-4 py-2 text-white">{{ $fault->fault_type ?? '—' }}</td>
                        <td class="px-4 py-2 text-right text-amber-400 font-medium">${{ number_format($fault->cost, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr class="font-semibold border-t-2 border-slate-600">
                        <td colspan="2" class="px-4 py-2 text-right text-slate-300">Total Fault Cost</td>
                        <td class="px-4 py-2 text-right text-amber-400">${{ number_format($faultTotal, 2) }}</td>
                    </tr>
                </tfoot>
            </table>
            @if($worksOrder->fault_approval_status === 'approved')
            <div class="px-4 py-3 bg-green-900/20 text-xs text-green-400">
                <i class="fas fa-check-circle mr-1"></i>Approved by {{ $worksOrder->faultApprover?->name }} on {{ $worksOrder->fault_approved_at?->format('d M Y H:i') }}
            </div>
            @elseif($worksOrder->fault_approval_status === 'rejected')
            <div class="px-4 py-3 bg-red-900/20 text-xs text-red-400">
                <i class="fas fa-times-circle mr-1"></i>Rejected by {{ $worksOrder->faultApprover?->name }} on {{ $worksOrder->fault_approved_at?->format('d M Y H:i') }}
            </div>
            @endif
            @else
            <div class="p-6 text-center text-slate-500 text-sm">No faults recorded.</div>
            @endif
        </div>

        {{-- Scope of Works --}}
        @if($worksOrder->scope_of_works || $worksOrder->special_instructions)
        <div class="card p-5">
            <h3 class="mb-3 flex items-center gap-2"><i class="fas fa-list-alt text-purple-400"></i> Scope of Works</h3>
            @if($worksOrder->scope_of_works)
            <div class="text-sm text-slate-300 whitespace-pre-wrap leading-relaxed bg-slate-900/50 rounded-lg p-4">{{ $worksOrder->scope_of_works }}</div>
            @endif
            @if($worksOrder->special_instructions)
            <div class="mt-4 p-3 rounded-lg border border-amber-800 bg-amber-900/20">
                <div class="text-xs font-medium text-amber-400 mb-1"><i class="fas fa-exclamation-triangle mr-1"></i>Special Instructions</div>
                <div class="text-sm text-amber-100 whitespace-pre-wrap">{{ $worksOrder->special_instructions }}</div>
            </div>
            @endif
        </div>
        @endif

        {{-- Task List --}}
        <div class="card overflow-hidden">
            <div class="flex items-center justify-between p-5 border-b border-slate-700">
                <h3 class="flex items-center gap-2"><i class="fas fa-tasks text-blue-400"></i> Task Lines</h3>
                @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
                <button @click="addingTask = !addingTask" class="btn btn-secondary text-xs"><i class="fas fa-plus mr-1"></i> Add Task</button>
                @endif
            </div>
            @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
            <div x-show="addingTask" x-cloak class="p-4 border-b border-slate-700 bg-slate-900/40">
                <form method="POST" action="{{ route('jobs.works-orders.items.store', [$job, $worksOrder]) }}" class="space-y-3">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div class="md:col-span-2">
                            <label class="block text-xs text-slate-400 mb-1">Description *</label>
                            <input type="text" name="description" class="input w-full" placeholder="e.g. Install upper cabinet carcasses" required>
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Trade</label>
                            <select name="trade" class="input w-full">
                                @foreach(['cabinet'=>'Cabinetry','bench'=>'Benchtop','tile'=>'Tiling','electrical'=>'Electrical','plumbing'=>'Plumbing','painting'=>'Painting','general'=>'General','other'=>'Other'] as $val => $lbl)
                                <option value="{{ $val }}">{{ $lbl }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Assignee</label>
                            <select name="assignee_id" class="input w-full">
                                <option value="">Unassigned</option>
                                @foreach($users as $u)
                                <option value="{{ $u->id }}">{{ $u->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Est. Hours</label>
                            <input type="number" name="estimated_hours" class="input w-full" step="0.5" min="0" placeholder="0.0">
                        </div>
                        <div>
                            <label class="block text-xs text-slate-400 mb-1">Notes</label>
                            <input type="text" name="notes" class="input w-full" placeholder="Optional">
                        </div>
                    </div>
                    <div class="flex gap-2">
                        <button type="submit" class="btn btn-primary text-sm"><i class="fas fa-plus mr-1"></i>Add Task</button>
                        <button type="button" @click="addingTask = false" class="btn btn-secondary text-sm">Cancel</button>
                    </div>
                </form>
            </div>
            @endif
            @forelse($worksOrder->items as $item)
            <div class="p-4 border-b border-slate-700 last:border-0 hover:bg-slate-800/30 transition-colors">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex items-start gap-3 flex-1 min-w-0">
                        <div class="mt-0.5">
                            @if($item->status === 'done')
                            <div class="w-5 h-5 rounded-full bg-green-600 flex items-center justify-center flex-shrink-0"><i class="fas fa-check text-white" style="font-size:10px;"></i></div>
                            @elseif($item->status === 'in_progress')
                            <div class="w-5 h-5 rounded-full bg-blue-600 flex items-center justify-center flex-shrink-0"><i class="fas fa-play text-white" style="font-size:9px;"></i></div>
                            @else
                            <div class="w-5 h-5 rounded-full border-2 border-slate-600 flex-shrink-0"></div>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm font-medium text-white {{ $item->status === 'done' ? 'line-through text-slate-500' : '' }}">{{ $item->description }}</div>
                            <div class="flex items-center gap-3 mt-1 flex-wrap">
                                <span class="text-xs text-slate-500 bg-slate-800 px-2 py-0.5 rounded">{{ \App\Models\WorksOrderItem::tradeLabel($item->trade) }}</span>
                                @if($item->assignee)<span class="text-xs text-slate-400"><i class="fas fa-user text-xs mr-1"></i>{{ $item->assignee->name }}</span>@endif
                                @if($item->estimated_hours)<span class="text-xs text-slate-400"><i class="fas fa-clock text-xs mr-1"></i>{{ $item->estimated_hours }}h</span>@endif
                            </div>
                            @if($item->notes)<div class="text-xs text-slate-500 mt-1 italic">{{ $item->notes }}</div>@endif
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager','lead_installer']))
                        <form method="POST" action="{{ route('jobs.works-orders.items.update', [$job, $worksOrder, $item]) }}" class="flex items-center gap-1">
                            @csrf @method('PATCH')
                            <input type="hidden" name="assignee_id" value="{{ $item->assignee_id }}">
                            <input type="hidden" name="estimated_hours" value="{{ $item->estimated_hours }}">
                            <input type="hidden" name="notes" value="{{ $item->notes }}">
                            <select name="status" onchange="this.form.submit()" class="input text-xs py-1" style="width:auto;">
                                <option value="pending" {{ $item->status==='pending' ? 'selected' : '' }}>Pending</option>
                                <option value="in_progress" {{ $item->status==='in_progress' ? 'selected' : '' }}>In Progress</option>
                                <option value="done" {{ $item->status==='done' ? 'selected' : '' }}>Done</option>
                            </select>
                        </form>
                        @endif
                        @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
                        <form method="POST" action="{{ route('jobs.works-orders.items.destroy', [$job, $worksOrder, $item]) }}">
                            @csrf @method('DELETE')
                            <button type="submit" class="text-slate-600 hover:text-red-400 transition-colors" onclick="return confirm('Remove this task?')">
                                <i class="fas fa-times text-xs"></i>
                            </button>
                        </form>
                        @endif
                    </div>
                </div>
            </div>
            @empty
            <div class="p-8 text-center text-slate-500">
                <i class="fas fa-tasks text-3xl mb-2 text-slate-700"></i>
                <div class="text-sm">No tasks added yet</div>
                @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
                <button @click="addingTask = true" class="text-xs text-blue-400 hover:text-blue-300 mt-1">Add the first task →</button>
                @endif
            </div>
            @endforelse
        </div>
    </div>

    {{-- Right Sidebar --}}
    <div class="space-y-4">
        <div class="card p-5" style="background:#0f172a;">
            <h3 class="mb-3">Schedule</h3>
            <div class="space-y-1.5 text-sm">
                <div class="flex justify-between"><span class="text-slate-400">Issue Date</span><span class="text-white">{{ $worksOrder->issued_date?->format('d M Y') ?? '—' }}</span></div>
                <div class="flex justify-between"><span class="text-slate-400">Target Completion</span>
                    <span class="{{ $worksOrder->target_completion && $worksOrder->target_completion->isPast() && $worksOrder->status !== 'completed' ? 'text-red-400' : 'text-white' }}">
                        {{ $worksOrder->target_completion?->format('d M Y') ?? '—' }}
                    </span>
                </div>
                @if($worksOrder->actual_completion)
                <div class="flex justify-between"><span class="text-slate-400">Actual Completion</span><span class="text-green-400">{{ $worksOrder->actual_completion->format('d M Y') }}</span></div>
                @endif
            </div>
        </div>

        @if($worksOrder->faults->count() && $faultTotal > 0)
        <div class="card p-5" style="background:#0f172a;">
            <h3 class="mb-3">Fault Summary</h3>
            <div class="flex justify-between text-sm mb-2">
                <span class="text-slate-400">Total Fault Cost</span>
                <span class="text-amber-400 font-semibold">${{ number_format($faultTotal, 2) }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-slate-400">Approval</span>
                @if($worksOrder->fault_approval_status === 'approved')
                <span class="text-green-400"><i class="fas fa-check mr-1"></i>Approved</span>
                @elseif($worksOrder->fault_approval_status === 'rejected')
                <span class="text-red-400"><i class="fas fa-times mr-1"></i>Rejected</span>
                @elseif($worksOrder->fault_approval_status === 'pending')
                <span class="text-amber-400"><i class="fas fa-clock mr-1"></i>Pending</span>
                @else
                <span class="text-slate-400">N/A</span>
                @endif
            </div>
            <div class="text-xs text-slate-500 mt-2">Fault costs reduce the gross profit for this job.</div>
        </div>
        @endif

        @if($worksOrder->items->count() > 0)
        <div class="card p-5" style="background:#0f172a;">
            <h3 class="mb-3">Task Summary</h3>
            <div class="space-y-2">
                @foreach(['pending'=>['Pending','text-slate-400'],'in_progress'=>['In Progress','text-blue-400'],'done'=>['Done','text-green-400']] as $s => [$lbl,$col])
                @php $cnt = $worksOrder->items->where('status',$s)->count(); @endphp
                @if($cnt > 0)
                <div class="flex justify-between text-sm"><span class="text-slate-400">{{ $lbl }}</span><span class="{{ $col }} font-medium">{{ $cnt }}</span></div>
                @endif
                @endforeach
            </div>
        </div>
        @endif

        @if($worksOrder->notes)
        <div class="card p-5" style="background:#0f172a;">
            <h3 class="mb-2">Notes</h3>
            <p class="text-sm text-slate-300">{{ $worksOrder->notes }}</p>
        </div>
        @endif

        @if(in_array(auth()->user()->role?->name, ['office_admin','project_manager']))
        <div class="card p-4" style="background:#0f172a;">
            <form method="POST" action="{{ route('jobs.works-orders.destroy', [$job, $worksOrder]) }}" onsubmit="return confirm('Delete this works order?')">
                @csrf @method('DELETE')
                <button type="submit" class="w-full text-sm text-red-400 hover:text-red-300 flex items-center gap-2 justify-center py-1">
                    <i class="fas fa-trash text-xs"></i> Delete Works Order
                </button>
            </form>
        </div>
        @endif
    </div>
</div>
</div>
@endsection