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

@section('content')
@php $userRole = $userRole ?? auth()->user()->role?->name ?? 'staff'; @endphp

{{-- ═══════════════════ TRADES DASHBOARD ═══════════════════ --}}
@if($userRole === 'trades')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1>Dashboard</h1>
            <p class="text-slate-400">Welcome back, {{ auth()->user()->name }}. Here's your work summary.</p>
        </div>
        <!-- <a href="{{ route('timesheet.index') }}" class="btn btn-primary">
            <i class="fas fa-stopwatch mr-2"></i>My Timesheet
        </a> -->
    </div>

    <!-- Running Timer Banner -->
    @if(isset($runningEntry) && $runningEntry)
    <div class="card p-4 flex items-center gap-4" style="border-color:#16a34a;background:#14532d22;">
        <div class="w-10 h-10 rounded-full bg-green-800 flex items-center justify-center flex-shrink-0 animate-pulse">
            <i class="fas fa-stopwatch text-green-300"></i>
        </div>
        <div class="flex-1">
            <div class="text-sm font-semibold text-green-300">Timer Running</div>
            <div class="text-xs text-slate-400">
                {{ $runningEntry->taskType?->name ?? 'General' }} — {{ $runningEntry->job?->contact?->full_name ?? $runningEntry->job?->job_number ?? 'No job' }}
            </div>
        </div>
        <a href="{{ route('timesheet.index') }}" class="btn btn-success text-sm">
            <i class="fas fa-stop mr-1"></i> Stop Timer
        </a>
    </div>
    @endif

    <!-- KPI cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <a href="{{ route('jobs.index') }}" class="stat-card stat-card-link block">
            <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:#1e40af22;">
                    <i class="fas fa-briefcase text-blue-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $myJobs->count() }}</div>
            <div class="text-xs text-slate-500 mt-1">Assigned to you</div>
        </a>
        <a href="{{ route('timesheet.index') }}" class="stat-card stat-card-link block">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Hours This Week</span>
                <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background:#16653422;">
                    <i class="fas fa-clock text-green-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $hoursThisWeek }}</div>
            <div class="text-xs text-slate-500 mt-1">{{ now()->startOfWeek()->format('d M') }} – {{ now()->endOfWeek()->format('d M') }}</div>
        </a>
        <a href="{{ route('jobs.index', ['status' => 'completed']) }}" class="stat-card stat-card-link block">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Completed Jobs</span>
                <div class="w-9 h-9 rounded-lg flex items-center justify-center" style="background:#16534922;">
                    <i class="fas fa-check-circle text-teal-400 text-sm"></i>
                </div>
            </div>
            <div class="text-3xl font-bold text-white">{{ $completedJobsCount }}</div>
            <div class="text-xs text-slate-500 mt-1">All time</div>
        </a>
    </div>

    <!-- My Jobs + Upcoming Events side by side -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- My Jobs -->
        <div class="lg:col-span-2 card p-5">
            <div class="flex items-center justify-between mb-4">
                <h3>My Active Jobs</h3>
                <a href="{{ route('jobs.index') }}" class="text-sm text-blue-400 hover:text-blue-300">View all</a>
            </div>
            @forelse($myJobs as $job)
            <div class="flex items-center gap-4 py-3 border-b border-slate-700 last:border-0 cursor-pointer hover:bg-slate-800/40 -mx-2 px-2 rounded transition-colors"
                 onclick="window.location='{{ route('jobs.show', $job) }}'">
                <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300 flex-shrink-0">
                    {{ $job->contact?->initials ?? '??' }}
                </div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-white">{{ $job->contact?->full_name ?? 'Unknown' }}</div>
                    <div class="text-xs text-slate-500">{{ $job->job_number }} · {{ $job->site_address ?? $job->site_suburb }}</div>
                </div>
                <div class="text-right flex-shrink-0">
                    <span class="badge badge-{{ $job->stageColor() }}">{{ $job->stageLabel() }}</span>
                </div>
                <i class="fas fa-chevron-right text-slate-600 text-xs flex-shrink-0"></i>
            </div>
            @empty
            <div class="text-center py-10 text-slate-500">
                <i class="fas fa-briefcase text-4xl mb-3 block opacity-20"></i>
                <p class="text-sm">No active jobs assigned to you.</p>
            </div>
            @endforelse
        </div>

        <!-- Upcoming Events (role-specific) -->
        <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($roleEvents ?? collect() as $event)
                <div class="flex gap-3">
                    <div class="flex-shrink-0 w-10 h-10 rounded-lg flex flex-col items-center justify-center text-center"
                         style="background:#1e293b;border:1px solid #334155;">
                        <div class="text-xs font-bold text-blue-300 leading-none">{{ $event->start_date->format('d') }}</div>
                        <div class="text-xs text-slate-500 leading-none mt-0.5">{{ $event->start_date->format('M') }}</div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="text-sm text-white font-medium truncate">{{ $event->name }}</div>
                        <div class="text-xs text-slate-500">
                            {{ $event->start_date->format('d M Y') }}
                            @if(!$event->start_date->equalTo($event->end_date))
                            – {{ $event->end_date->format('d M Y') }}
                            @endif
                        </div>
                    </div>
                </div>
                @empty
                <p class="text-sm text-slate-500 text-center py-6">No upcoming events</p>
                @endforelse
            </div>
        </div>
    </div>
</div>

@elseif(auth()->user()->role->name == 'check_measurer')

<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1>Dashboard</h1>
            <p class="text-slate-400">Welcome back, {{ auth()->user()->name }}. Here's what's happening today.</p>
        </div>
        
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <a href="{{ route('check_measure.create') }}" class="stat-card stat-card-link block">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Ready To CM 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">{{ $readycmjobs }}</div>
            <div class="text-xs text-slate-500 mt-1">All time</div>
        </a>
        <a href="{{ route('check_measure.index') }}" class="stat-card stat-card-link block">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Check Measured 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">{{ $checkmeasuredjobs }}</div>
            <!-- <div class="text-xs text-green-400 mt-1"><i class="fas fa-arrow-up text-xs"></i> Currently in progress</div> -->
        </a>
      
       
    </div>
</div>

{{-- ═══════════════════ FULL DASHBOARD (ALL OTHER ROLES) ═══════════════════ --}}
@else
@php
    $isAdmin   = $isAdmin   ?? in_array($userRole, ['office_admin','project_manager']);
    $isFinance = $isFinance ?? in_array($userRole, ['office_admin','project_manager','accounts']);
    $canCreateLead = ($userRole === 'office_admin') || (!empty($navPerms['leads.create'] ?? false));
    $canCreateJob  = ($userRole === 'office_admin') || (!empty($navPerms['jobs.create']  ?? false));
@endphp
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1>Dashboard</h1>
            <p class="text-slate-400">Welcome back, {{ auth()->user()->name }}. Here's what's happening today.</p>
        </div>
        <div class="flex gap-2">
            @if($canCreateLead)
            <a href="{{ route('leads.create') }}" class="btn btn-secondary"><i class="fas fa-user-plus"></i> New Lead</a>
            @endif
            @if($canCreateJob)
            <a href="{{ route('jobs.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> New Job</a>
            @endif
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <a href="{{ route('jobs.index') }}" class="stat-card stat-card-link block">
            <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>
        </a>
        <a href="{{ route('jobs.index', ['status' => 'active']) }}" class="stat-card stat-card-link block">
            <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>
        </a>
        <a href="{{ route('jobs.index', ['month' => 'current']) }}" class="stat-card stat-card-link block">
            <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>
        </a>
        <a href="{{ route('jobs.index', ['overdue' => '1']) }}" class="stat-card stat-card-link block">
            <div class="flex items-center justify-between mb-3">
                <span class="text-slate-400 text-sm font-medium">Overdue(Exceed Expected Completion)</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>
        </a>
    </div>

    <!-- Pipeline Summary (admin only) -->
    @if(auth()->user()->role->name == 'office_admin')
    <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>
    @endif

    @if(auth()->user()->role->name != 'check_measurer')
    <!-- 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">
                                @if(auth()->user()->role->id == 2 || auth()->user()->role->id == 10 || auth()->user()->role->id == 3)
                                <div class="text-sm font-medium text-white">${{ number_format($job->job_value ?? 0) }}</div>
                                @endif
                            </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: Role-specific Upcoming Events -->
        <div class="space-y-4">
            <div class="card p-5">
                <div class="flex items-center justify-between mb-3">
                    <h3>Upcoming Events</h3>
                    
                </div>
                <div class="space-y-3">
                    @forelse($roleEvents ?? collect() as $event)
                    <div class="flex gap-3">
                        <div class="flex-shrink-0 w-10 h-10 rounded-lg flex flex-col items-center justify-center text-center"
                             style="background:#1e293b;border:1px solid #334155;">
                            <div class="text-xs font-bold text-blue-300 leading-none">{{ $event->start_date->format('d') }}</div>
                            <div class="text-xs text-slate-500 leading-none mt-0.5">{{ $event->start_date->format('M') }}</div>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-sm text-white font-medium truncate">{{ $event->name }}</div>
                            <div class="text-xs text-slate-500">
                                {{ $event->start_date->format('d M Y') }}
                                @if(!$event->start_date->equalTo($event->end_date))
                                – {{ $event->end_date->format('d M Y') }}
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-sm text-slate-500 text-center py-4">No upcoming events</p>
                    @endforelse
                </div>
                @if($isAdmin ?? false)
                <div class="mt-3 pt-3 border-t border-slate-700">
                    <a href="{{ route('upcoming-events.index') }}" class="text-xs text-blue-400 hover:text-blue-300">
                        <i class="fas fa-cog mr-1"></i> Manage Events
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    <!-- Leads + Quotes — admin / PM / finance roles only -->
    @if($isAdmin || $isFinance)
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        @if($isAdmin && $recentLeads->count() >= 0)
        <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>
        @endif

        @if($isFinance && $recentQuotes->count() >= 0)
        <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>
        @endif
    </div>
    @endif

</div>
@endif {{-- end non-trades --}}
@endsection