@extends('layouts.app')
@section('title', 'Dashboard')
@section('breadcrumb')Dashboard@endsection

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1>Dashboard</h1>
            <p>Welcome back, {{ auth()->user()->name }}. Here's what's happening today.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('leads.create') }}" class="btn btn-secondary"><i class="fas fa-user-plus"></i> New Lead</a>
            <a href="{{ route('jobs.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> New Job</a>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="stat-card">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Total Jobs</span>
                <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: #1e40af22;">
                    <i class="fas fa-briefcase text-blue-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $totalJobs }}</div>
            <div class="text-xs text-slate-500 mt-1">All time</div>
        </div>
        <div class="stat-card">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Active Jobs</span>
                <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: #16653422;">
                    <i class="fas fa-play-circle text-green-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $activeJobs }}</div>
            <div class="text-xs text-green-400 mt-1"><i class="fas fa-arrow-up text-xs"></i> Currently in progress</div>
        </div>
        <div class="stat-card">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Jobs This Month</span>
                <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: #92400e22;">
                    <i class="fas fa-calendar-check text-yellow-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $jobsThisMonth }}</div>
            <div class="text-xs text-slate-500 mt-1">{{ now()->format('F Y') }}</div>
        </div>
        <div class="stat-card">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Overdue Items</span>
                <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background: #7f1d1d22;">
                    <i class="fas fa-exclamation-triangle text-red-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $overdueItems }}</div>
            <div class="text-xs text-red-400 mt-1">Needs attention</div>
        </div>
    </div>

    <!-- Pipeline Summary -->
    <div class="card p-5">
        <div class="flex items-center justify-between mb-4">
            <h3>Job Pipeline</h3>
            <a href="{{ route('jobs.index') }}" class="text-sm text-blue-400 hover:text-blue-300">View all <i class="fas fa-arrow-right text-xs ml-1"></i></a>
        </div>
        <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-9 gap-3">
            @foreach([
                ['label' => 'Lead',       'key' => 'lead',         'color' => '#94a3b8', 'icon' => 'user-plus'],
                ['label' => 'Consult',    'key' => 'consult',      'color' => '#60a5fa', 'icon' => 'comments'],
                ['label' => 'Sold',       'key' => 'sold',         'color' => '#4ade80', 'icon' => 'handshake'],
                ['label' => 'Contracts',  'key' => 'contracts',    'color' => '#c084fc', 'icon' => 'file-contract'],
                ['label' => 'Chk Meas.', 'key' => 'cm',           'color' => '#818cf8', 'icon' => 'ruler'],
                ['label' => 'Processing', 'key' => 'processing',   'color' => '#2dd4bf', 'icon' => 'industry'],
                ['label' => 'Delivery',   'key' => 'delivery',     'color' => '#fb923c', 'icon' => 'truck'],
                ['label' => 'Install.',   'key' => 'installation', 'color' => '#fbbf24', 'icon' => 'tools'],
                ['label' => 'Complete',   'key' => 'completion',   'color' => '#34d399', 'icon' => 'check-circle'],
            ] as $stage)
            <a href="{{ route('jobs.index', ['stage' => $stage['key']]) }}"
               class="text-center p-3 rounded-xl transition-colors hover:bg-slate-700/50"
               style="background: #0f172a; border: 1px solid #334155;">
                <div class="text-2xl font-bold mb-1" style="color: {{ $stage['color'] }}">{{ $pipeline[$stage['key']] ?? 0 }}</div>
                <div class="text-xs text-slate-400">{{ $stage['label'] }}</div>
            </a>
            @endforeach
        </div>
    </div>

    <!-- Main content grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Jobs -->
        <div class="lg:col-span-2 card p-5">
            <div class="flex items-center justify-between mb-4">
                <h3>Recent Jobs</h3>
                <a href="{{ route('jobs.index') }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-xs text-slate-500 border-b border-slate-700">
                            <th class="text-left pb-2 font-medium">Job</th>
                            <th class="text-left pb-2 font-medium">Client</th>
                            <th class="text-left pb-2 font-medium">Stage</th>
                            <th class="text-right pb-2 font-medium">Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentJobs as $job)
                        <tr class="table-row" onclick="window.location='{{ route('jobs.show', $job) }}'">
                            <td class="py-2 pr-4">
                                <div class="text-sm font-medium text-white">{{ $job->job_number }}</div>
                                <div class="text-xs text-slate-500">{{ $job->project_type ? ucfirst($job->project_type) : 'Kitchen' }}</div>
                            </td>
                            <td class="py-2 pr-4">
                                <div class="text-sm text-slate-300">{{ $job->contact?->full_name ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $job->site_suburb }}</div>
                            </td>
                            <td class="py-2 pr-4">
                                <span class="badge badge-{{ $job->stageColor() }}">{{ $job->stageLabel() }}</span>
                            </td>
                            <td class="py-2 text-right">
                                <div class="text-sm font-medium text-white">${{ number_format($job->job_value ?? 0) }}</div>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="4" class="py-8 text-center text-slate-500">No jobs yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Right column -->
        <div class="space-y-4">
            <!-- Upcoming Events -->
            <div class="card p-5">
                <div class="flex items-center justify-between mb-3">
                    <h3>Upcoming Events</h3>
                    <a href="{{ route('calendar.index') }}" class="text-sm text-blue-400 hover:text-blue-300">Calendar</a>
                </div>
                <div class="space-y-3">
                    @forelse($upcomingEvents as $event)
                    <div class="flex gap-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0" style="background:#1e293b;">
                            <i class="fas fa-calendar-day text-blue-400 text-sm"></i>
                        </div>
                        <div class="min-w-0">
                            <div class="text-sm text-white font-medium truncate">{{ $event->title }}</div>
                            <div class="text-xs text-slate-500">{{ $event->start_at->format('D d M, g:ia') }}</div>
                        </div>
                    </div>
                    @empty
                    <p class="text-sm text-slate-500 text-center py-4">No upcoming events</p>
                    @endforelse
                </div>
            </div>

            <!-- Pending Tasks -->
            <div class="card p-5">
                <div class="flex items-center justify-between mb-3">
                    <h3>Pending Tasks</h3>
                </div>
                <div class="space-y-2">
                    @forelse($pendingTasks as $task)
                    <div class="flex items-center gap-3 py-2 border-b border-slate-700 last:border-0">
                        <div class="w-2 h-2 rounded-full flex-shrink-0 {{ $task->priority === 'high' ? 'bg-red-400' : ($task->priority === 'medium' ? 'bg-yellow-400' : 'bg-slate-500') }}"></div>
                        <div class="flex-1 min-w-0">
                            <div class="text-sm text-white truncate">{{ $task->title }}</div>
                            <div class="text-xs text-slate-500">Due {{ $task->due_date?->format('d M') ?? 'No date' }}</div>
                        </div>
                        <span class="badge badge-{{ $task->status === 'in_progress' ? 'blue' : 'gray' }} text-xs">{{ ucwords(str_replace('_', ' ', $task->status)) }}</span>
                    </div>
                    @empty
                    <p class="text-sm text-slate-500 text-center py-4">No pending tasks</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Leads + Quotes -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Recent Leads -->
        <div class="card p-5">
            <div class="flex items-center justify-between mb-4">
                <h3>Recent Leads</h3>
                <a href="{{ route('leads.index') }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>
            <div class="space-y-0">
                @forelse($recentLeads as $lead)
                <div class="flex items-center gap-3 py-3 border-b border-slate-700 last:border-0 cursor-pointer hover:bg-slate-800 -mx-2 px-2 rounded" onclick="window.location='{{ route('leads.show', $lead) }}'">
                    <div class="w-9 h-9 rounded-full bg-blue-900 flex items-center justify-center text-sm font-bold text-blue-300">
                        {{ $lead->contact?->initials ?? '??' }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-white">{{ $lead->contact?->full_name ?? 'Unknown' }}</div>
                        <div class="text-xs text-slate-500">{{ $lead->source }} · {{ $lead->enquiry_date?->diffForHumans() }}</div>
                    </div>
                    <span class="badge badge-{{ $lead->statusColor() }}">{{ $lead->statusLabel() }}</span>
                </div>
                @empty
                <p class="text-sm text-slate-500 text-center py-4">No leads yet</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Quotes -->
        <div class="card p-5">
            <div class="flex items-center justify-between mb-4">
                <h3>Recent Quotes</h3>
                <a href="{{ route('quotes.index') }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>
            <div class="space-y-0">
                @forelse($recentQuotes as $quote)
                <div class="flex items-center gap-3 py-3 border-b border-slate-700 last:border-0 cursor-pointer hover:bg-slate-800 -mx-2 px-2 rounded" onclick="window.location='{{ route('quotes.show', $quote) }}'">
                    <div class="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0" style="background: #1e40af22;">
                        <i class="fas fa-file-invoice text-blue-400 text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium text-white">{{ $quote->quote_number }}</div>
                        <div class="text-xs text-slate-500">{{ $quote->contact?->full_name ?? '—' }}</div>
                    </div>
                    <div class="text-right">
                        <div class="text-sm font-medium text-white">${{ number_format($quote->total ?? 0) }}</div>
                        <span class="badge badge-{{ $quote->statusColor() }}">{{ $quote->statusLabel() }}</span>
                    </div>
                </div>
                @empty
                <p class="text-sm text-slate-500 text-center py-4">No quotes yet</p>
                @endforelse
            </div>
        </div>
    </div>

    <!-- ═══════════════════ OPERATIONAL PANELS ═══════════════════ -->
    <div class="flex items-center gap-3">
        <div class="flex-1 h-px bg-slate-700"></div>
        <span class="text-xs text-slate-500 font-semibold uppercase tracking-widest">Operational Status</span>
        <div class="flex-1 h-px bg-slate-700"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        <!-- ─── Contracts Administration ──────────────────────────────── -->
        <div class="card p-5">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:#3b0764aa;">
                        <i class="fas fa-file-contract text-purple-400 text-sm"></i>
                    </div>
                    <div>
                        <h3 class="leading-none">Contracts Administration</h3>
                        <p class="text-xs text-slate-500 mt-0.5">{{ $pipeline['contracts'] }} job(s) at contracts stage</p>
                    </div>
                </div>
                <a href="{{ route('jobs.index', ['stage' => 'contracts']) }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>

            <!-- Alert badges -->
            <div class="flex flex-wrap gap-2 mb-4">
                @if($unsignedContracts > 0)
                <span class="inline-flex items-center gap-1.5 text-xs bg-red-900/30 text-red-300 border border-red-800 rounded-full px-3 py-1">
                    <i class="fas fa-exclamation-circle text-xs"></i>
                    {{ $unsignedContracts }} unsigned contract{{ $unsignedContracts > 1 ? 's' : '' }}
                </span>
                @endif
                @if($pendingDepositContracts > 0)
                <span class="inline-flex items-center gap-1.5 text-xs bg-amber-900/30 text-amber-300 border border-amber-800 rounded-full px-3 py-1">
                    <i class="fas fa-dollar-sign text-xs"></i>
                    {{ $pendingDepositContracts }} deposit{{ $pendingDepositContracts > 1 ? 's' : '' }} outstanding
                </span>
                @endif
                @if($unsignedContracts === 0 && $pendingDepositContracts === 0)
                <span class="inline-flex items-center gap-1.5 text-xs bg-green-900/30 text-green-300 border border-green-800 rounded-full px-3 py-1">
                    <i class="fas fa-check-circle text-xs"></i>All contracts up to date
                </span>
                @endif
            </div>

            <div class="space-y-2">
                @forelse($contractsJobs as $job)
                <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-700/40 cursor-pointer transition-colors" onclick="window.location='{{ route('jobs.show', $job) }}'">
                    <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center text-xs font-bold text-purple-300 flex-shrink-0">
                        {{ $job->contact?->initials ?? '??' }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm text-white font-medium">{{ $job->contact?->full_name ?? 'Unknown' }}</div>
                        <div class="text-xs text-slate-500">{{ $job->job_number }} · {{ $job->site_suburb }}</div>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <div class="text-xs font-bold text-white">${{ number_format($job->job_value ?? 0) }}</div>
                        @php $latestContract = $job->contracts->first(); @endphp
                        @if($latestContract?->signed_date)
                        <span class="text-xs text-green-400"><i class="fas fa-check text-xs"></i> Signed</span>
                        @elseif($latestContract)
                        <span class="text-xs text-amber-400">Unsigned</span>
                        @else
                        <span class="text-xs text-slate-500">No contract</span>
                        @endif
                    </div>
                </div>
                @empty
                <div class="text-center py-6 text-slate-500">
                    <i class="fas fa-file-contract text-2xl mb-2 block opacity-20"></i>
                    <p class="text-sm">No jobs at contracts stage</p>
                </div>
                @endforelse
            </div>
        </div>

        <!-- ─── Processing / Manufacturing ────────────────────────────── -->
        <div class="card p-5">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:#134e4aaa;">
                        <i class="fas fa-industry text-teal-400 text-sm"></i>
                    </div>
                    <div>
                        <h3 class="leading-none">Processing / Manufacturing</h3>
                        <p class="text-xs text-slate-500 mt-0.5">{{ $pipeline['processing'] }} job(s) in production</p>
                    </div>
                </div>
                <a href="{{ route('jobs.index', ['stage' => 'processing']) }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>
            <div class="space-y-2">
                @forelse($processingStats as $row)
                @php $job = $row['job']; $pct = $row['total'] > 0 ? ($row['completed'] / $row['total']) * 100 : 0; @endphp
                <div class="p-3 rounded-lg cursor-pointer hover:bg-slate-700/40 transition-colors" style="background:#0f172a;" onclick="window.location='{{ route('jobs.show', $job) }}'">
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center gap-2 min-w-0">
                            <div class="w-7 h-7 rounded-full bg-teal-900 flex items-center justify-center text-xs font-bold text-teal-300 flex-shrink-0">
                                {{ $job->contact?->initials ?? '??' }}
                            </div>
                            <div class="min-w-0">
                                <div class="text-sm text-white font-medium truncate">{{ $job->contact?->full_name ?? 'Unknown' }}</div>
                                <div class="text-xs text-slate-500">{{ $job->job_number }}</div>
                            </div>
                        </div>
                        <div class="text-right flex-shrink-0 ml-2">
                            <div class="text-xs text-teal-400 font-bold">{{ $row['completed'] }}/{{ $row['total'] }} orders</div>
                            @if($row['pending'] > 0)
                            <div class="text-xs text-amber-400">{{ $row['pending'] }} pending</div>
                            @else
                            <div class="text-xs text-green-400">All done</div>
                            @endif
                        </div>
                    </div>
                    @if($row['total'] > 0)
                    <div class="progress-bar">
                        <div class="h-1.5 rounded-full" style="width: {{ $pct }}%; background: #2dd4bf;"></div>
                    </div>
                    @else
                    <div class="text-xs text-slate-600 text-center">No production orders yet</div>
                    @endif
                </div>
                @empty
                <div class="text-center py-6 text-slate-500">
                    <i class="fas fa-industry text-2xl mb-2 block opacity-20"></i>
                    <p class="text-sm">No jobs in processing</p>
                </div>
                @endforelse
            </div>
        </div>

        <!-- ─── Pre-Delivery ──────────────────────────────────────────── -->
        <div class="card p-5">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:#7c2d12aa;">
                        <i class="fas fa-truck text-orange-400 text-sm"></i>
                    </div>
                    <div>
                        <h3 class="leading-none">Pre-Delivery</h3>
                        <p class="text-xs text-slate-500 mt-0.5">{{ $pipeline['delivery'] }} job(s) awaiting delivery</p>
                    </div>
                </div>
                <a href="{{ route('jobs.index', ['stage' => 'delivery']) }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>

            @if($scheduledDeliveries->count())
            <div class="mb-4 p-3 rounded-lg" style="background:#0f172a; border: 1px solid #431407;">
                <div class="text-xs text-orange-400 font-semibold mb-2"><i class="fas fa-calendar-alt mr-1"></i>Upcoming Scheduled Deliveries</div>
                @foreach($scheduledDeliveries as $del)
                <div class="flex items-center justify-between py-1.5 border-b border-slate-800 last:border-0">
                    <div class="text-xs text-white">{{ $del->job?->contact?->full_name ?? $del->job?->job_number ?? '—' }}</div>
                    <div class="text-xs text-orange-300">{{ \Carbon\Carbon::parse($del->scheduled_date)->format('D d M') }}</div>
                </div>
                @endforeach
            </div>
            @endif

            <div class="space-y-2">
                @forelse($deliveryJobs as $job)
                <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-700/40 cursor-pointer transition-colors" onclick="window.location='{{ route('jobs.show', $job) }}'">
                    <div class="w-8 h-8 rounded-full bg-orange-900 flex items-center justify-center text-xs font-bold text-orange-300 flex-shrink-0">
                        {{ $job->contact?->initials ?? '??' }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm text-white font-medium">{{ $job->contact?->full_name ?? 'Unknown' }}</div>
                        <div class="text-xs text-slate-500">{{ $job->job_number }} · {{ $job->site_suburb }}</div>
                    </div>
                    <div class="text-xs font-bold text-white">${{ number_format($job->job_value ?? 0) }}</div>
                </div>
                @empty
                <div class="text-center py-6 text-slate-500">
                    <i class="fas fa-truck text-2xl mb-2 block opacity-20"></i>
                    <p class="text-sm">No jobs awaiting delivery</p>
                </div>
                @endforelse
            </div>
        </div>

        <!-- ─── Installation / Completion ─────────────────────────────── -->
        <div class="card p-5">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:#713f12aa;">
                        <i class="fas fa-tools text-yellow-400 text-sm"></i>
                    </div>
                    <div>
                        <h3 class="leading-none">Installation / Completion</h3>
                        <p class="text-xs text-slate-500 mt-0.5">
                            {{ $pipeline['installation'] }} installing · {{ $pipeline['completion'] }} completing
                        </p>
                    </div>
                </div>
                <a href="{{ route('jobs.index', ['stage' => 'installation']) }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>

            @if($upcomingInstalls->count())
            <div class="mb-4 p-3 rounded-lg" style="background:#0f172a; border: 1px solid #3f3f1a;">
                <div class="text-xs text-yellow-400 font-semibold mb-2"><i class="fas fa-calendar-alt mr-1"></i>Upcoming Installations</div>
                @foreach($upcomingInstalls as $inst)
                <div class="flex items-center justify-between py-1.5 border-b border-slate-800 last:border-0">
                    <div class="text-xs text-white truncate flex-1">{{ $inst->title }}</div>
                    <div class="text-xs text-yellow-300 flex-shrink-0 ml-2">{{ $inst->start_at->format('D d M') }}</div>
                    @if($inst->assignedTo)
                    <div class="text-xs text-slate-500 flex-shrink-0 ml-2">{{ $inst->assignedTo->name }}</div>
                    @endif
                </div>
                @endforeach
            </div>
            @endif

            <div class="space-y-2">
                @forelse($installationJobs as $job)
                <div class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-700/40 cursor-pointer transition-colors" onclick="window.location='{{ route('jobs.show', $job) }}'">
                    <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0
                        {{ $job->stage === 'completion' ? 'bg-emerald-900 text-emerald-300' : 'bg-yellow-900 text-yellow-300' }}">
                        {{ $job->contact?->initials ?? '??' }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm text-white font-medium">{{ $job->contact?->full_name ?? 'Unknown' }}</div>
                        <div class="text-xs text-slate-500">{{ $job->job_number }} · {{ $job->site_suburb }}</div>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span class="badge badge-{{ $job->stageColor() }} text-xs">{{ $job->stageLabel() }}</span>
                    </div>
                </div>
                @empty
                <div class="text-center py-6 text-slate-500">
                    <i class="fas fa-tools text-2xl mb-2 block opacity-20"></i>
                    <p class="text-sm">No jobs in installation or completion</p>
                </div>
                @endforelse
            </div>
        </div>
    </div>

</div>
@endsection