@extends('layouts.app')

@section('title', $project->title)

@section('content')

@php
    $sv = $project->status instanceof \App\Enums\ProjectStatus ? $project->status->value : $project->status;
    $statusBadge = match($sv) {
        'active'    => 'bg-emerald-50 text-emerald-700',
        'completed' => 'bg-slate-100 text-slate-600',
        'on_hold'   => 'bg-amber-50 text-amber-600',
        'cancelled' => 'bg-red-50 text-red-600',
        default     => 'bg-slate-100 text-slate-500',
    };
    $statusLabel = match($sv) {
        'active'    => 'Active',
        'completed' => 'Completed',
        'on_hold'   => 'On Hold',
        'cancelled' => 'Cancelled',
        default     => ucfirst($sv),
    };
    $symMap         = $financials['symMap'];
    $hasOutstanding = !empty($financials['outstandingByCurrency']);
@endphp

<div class="px-8 py-8">

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-emerald-50 border border-emerald-100 px-4 py-3 text-sm text-emerald-700">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-6 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ session('error') }}
        </div>
    @endif

    {{-- Delete error --}}
    @if ($errors->has('delete'))
        <div class="mb-4 flex items-center gap-3 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
            {{ $errors->first('delete') }}
        </div>
    @endif

    {{-- Page header --}}
    <div class="flex items-start justify-between mb-8" data-header>
        <div>
            <div class="flex items-center gap-3">
                <h1 class="text-xl font-semibold text-slate-900">{{ $project->title }}</h1>
                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $statusBadge }}">
                    {{ $statusLabel }}
                </span>
            </div>
            <p class="text-sm text-slate-400 mt-0.5">
                <a href="{{ route('clients.show', $project->client) }}"
                   class="hover:text-sky-700 transition-colors">{{ $project->client->name }}</a>
            </p>
        </div>
        <div class="flex items-center gap-2">
            @can('projects.manage')
            <a href="{{ route('projects.edit', $project) }}"
               class="inline-flex items-center px-4 py-2 text-sm font-medium border border-slate-200 rounded-lg text-slate-600 bg-white hover:bg-slate-50 whitespace-nowrap transition-colors duration-150">
                Edit
            </a>
            @endcan
            @can('projects.manage')
            <form method="POST" action="{{ route('projects.destroy', $project) }}"
                  class="contents"
                  onsubmit="return confirm('Archive this project? This cannot be undone.')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        class="inline-flex items-center px-4 py-2 text-sm font-medium border border-amber-200 rounded-lg text-amber-600 bg-white hover:bg-amber-50 whitespace-nowrap transition-colors duration-150 cursor-pointer">
                    Archive
                </button>
            </form>
            @endcan
        </div>
    </div>

    {{-- Financial stat cards --}}
    <div class="grid grid-cols-4 gap-4 mb-8">

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Proposed</p>
            @if (empty($financials['totalProposedByCurrency']))
                <p class="text-2xl font-semibold text-slate-300">&mdash;</p>
            @else
                @foreach ($financials['totalProposedByCurrency'] as $cur => $amt)
                    <p class="text-2xl font-semibold text-slate-900">
                        {{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($amt, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Approved</p>
            @if (empty($financials['totalApprovedByCurrency']))
                <p class="text-2xl font-semibold text-slate-300">&mdash;</p>
            @else
                @foreach ($financials['totalApprovedByCurrency'] as $cur => $amt)
                    <p class="text-2xl font-semibold text-emerald-600">
                        {{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($amt, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Total Paid</p>
            @if (empty($financials['totalPaidByCurrency']))
                <p class="text-2xl font-semibold text-slate-300">&mdash;</p>
            @else
                @foreach ($financials['totalPaidByCurrency'] as $cur => $amt)
                    <p class="text-2xl font-semibold text-emerald-600">
                        {{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($amt, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

        <div data-stat-card class="bg-white border border-slate-100 rounded-xl p-5">
            <p class="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Outstanding</p>
            @if (!$hasOutstanding)
                <p class="text-2xl font-semibold text-emerald-600">Settled</p>
            @else
                @foreach ($financials['outstandingByCurrency'] as $cur => $amt)
                    <p class="text-2xl font-semibold text-amber-600">
                        {{ $symMap[$cur] ?? $cur }}&nbsp;{{ number_format($amt, 2) }}
                    </p>
                @endforeach
            @endif
        </div>

    </div>

    {{-- Three-column grid --}}
    <div class="grid grid-cols-3 gap-6">

        {{-- LEFT: col-span-2 --}}
        <div class="col-span-2 space-y-6">

            {{-- Proposals card --}}
            <div class="bg-white border border-slate-100 rounded-xl overflow-hidden" data-panel>
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-50">
                    <p class="text-sm font-semibold text-slate-900">Proposals</p>
                    <a href="{{ route('proposals.create') . '?project_id=' . $project->id }}"
                       class="inline-flex items-center gap-1 text-xs font-medium text-sky-700 hover:underline">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        New Proposal
                    </a>
                </div>

                @if ($project->proposals->isEmpty())
                    <div class="py-10 text-center">
                        <p class="text-sm text-slate-400">No proposals yet</p>
                        <a href="{{ route('proposals.create') . '?project_id=' . $project->id }}"
                           class="inline-flex items-center gap-1.5 mt-3 text-xs text-sky-700 hover:underline font-medium">
                            Create first proposal &rarr;
                        </a>
                    </div>
                @else
                    <table class="w-full">
                        <thead class="bg-slate-50 border-b border-slate-100">
                            <tr>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Title</th>
                                <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Amount</th>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Status</th>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Valid Until</th>
                                <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach ($project->proposals as $proposal)
                                @php
                                    $pSv = $proposal->status instanceof \App\Enums\ProposalStatus ? $proposal->status->value : $proposal->status;
                                    $pBadge = match($pSv) {
                                        'draft'    => 'bg-slate-100 text-slate-600',
                                        'sent'     => 'bg-sky-50 text-sky-700',
                                        'approved' => 'bg-emerald-50 text-emerald-700',
                                        'rejected' => 'bg-red-50 text-red-600',
                                        'expired'  => 'bg-amber-50 text-amber-600',
                                        default    => 'bg-slate-100 text-slate-500',
                                    };
                                    $pCur    = $proposal->currency instanceof \App\Enums\Currency ? $proposal->currency->value : (string) $proposal->currency;
                                    $pSymbol = $symMap[$pCur] ?? $pCur;
                                @endphp
                                <tr class="hover:bg-slate-50 transition-colors duration-150">
                                    <td class="px-5 py-4 text-sm font-medium text-slate-900">
                                        {{ $proposal->title ?? '&mdash;' }}
                                    </td>
                                    <td class="px-5 py-4 text-sm text-right font-mono font-medium text-slate-900 tabular-nums">
                                        {{ $pSymbol }}&nbsp;{{ number_format($proposal->amount, 2) }}
                                    </td>
                                    <td class="px-5 py-4">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $pBadge }}">
                                            {{ ucfirst($pSv) }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-4 text-sm text-slate-500">
                                        {{ $proposal->valid_until ? $proposal->valid_until->format('d M Y') : '&mdash;' }}
                                    </td>
                                    <td class="px-5 py-4 text-right">
                                        <a href="{{ route('proposals.show', $proposal) }}"
                                           class="text-xs text-sky-700 hover:underline">View &rarr;</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>

            {{-- Invoices card --}}
            <div class="bg-white border border-slate-100 rounded-xl overflow-hidden" data-panel>
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-50">
                    <p class="text-sm font-semibold text-slate-900">Invoices</p>
                </div>

                @if ($project->invoices->isEmpty())
                    <div class="py-10 text-center">
                        <p class="text-sm text-slate-400">No invoices yet</p>
                    </div>
                @else
                    <table class="w-full">
                        <thead class="bg-slate-50 border-b border-slate-100">
                            <tr>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Invoice #</th>
                                <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide">Amount</th>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Status</th>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Due Date</th>
                                <th scope="col" class="px-5 py-3.5 text-left text-xs font-medium text-slate-400 uppercase tracking-wide">Progress</th>
                                <th scope="col" class="px-5 py-3.5 text-right text-xs font-medium text-slate-400 uppercase tracking-wide"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach ($project->invoices as $invoice)
                                @php
                                    $iSv    = $invoice->status instanceof \App\Enums\InvoiceStatus ? $invoice->status->value : $invoice->status;
                                    $iBadge = match($iSv) {
                                        'unpaid'  => 'bg-amber-50 text-amber-700',
                                        'partial' => 'bg-sky-50 text-sky-700',
                                        'paid'    => 'bg-emerald-50 text-emerald-700',
                                        default   => 'bg-slate-100 text-slate-600',
                                    };
                                    $iLabel = match($iSv) {
                                        'unpaid'  => 'Unpaid',
                                        'partial' => 'Partial',
                                        'paid'    => 'Paid',
                                        default   => ucfirst($iSv),
                                    };
                                    $iSymbol      = $invoice->currency instanceof \App\Enums\Currency ? $invoice->currency->symbol() : (string) $invoice->currency;
                                    $totalPaid    = $invoice->payments->reduce(fn ($c, $p) => bcadd($c, (string) $p->amount, 2), '0');
                                    $paidPct      = bccomp((string) $invoice->amount, '0', 2) > 0
                                        ? min(100, max(0, (int) bcmul(bcdiv($totalPaid, (string) $invoice->amount, 4), '100', 0)))
                                        : 0;
                                    $progressColor = match($iSv) {
                                        'paid'    => 'bg-emerald-500',
                                        'partial' => 'bg-sky-500',
                                        default   => 'bg-slate-200',
                                    };
                                    $iOverdue = $invoice->due_date->isPast() && $iSv === 'unpaid';
                                @endphp
                                <tr class="hover:bg-slate-50 transition-colors duration-150">
                                    <td class="px-5 py-4 text-sm font-mono font-medium text-slate-600">
                                        {{ $invoice->invoice_number }}
                                    </td>
                                    <td class="px-5 py-4 text-sm text-right font-mono font-medium text-slate-900 tabular-nums">
                                        {{ $iSymbol }}&nbsp;{{ number_format($invoice->amount, 2) }}
                                    </td>
                                    <td class="px-5 py-4">
                                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $iBadge }}">
                                            {{ $iLabel }}
                                        </span>
                                    </td>
                                    <td class="px-5 py-4 text-sm {{ $iOverdue ? 'text-red-500 font-semibold' : 'text-slate-500' }}">
                                        {{ $invoice->due_date->format('d M Y') }}
                                    </td>
                                    <td class="px-5 py-4">
                                        <div class="flex items-center gap-2">
                                            <div class="flex-1 bg-slate-100 rounded-full h-1.5 min-w-[4rem]">
                                                <div class="h-1.5 rounded-full {{ $progressColor }} transition-all duration-300"
                                                     style="width: {{ $paidPct }}%"></div>
                                            </div>
                                            <span class="text-xs text-slate-400 tabular-nums">{{ $paidPct }}%</span>
                                        </div>
                                    </td>
                                    <td class="px-5 py-4 text-right">
                                        <a href="{{ route('invoices.show', $invoice) }}"
                                           class="text-xs text-sky-700 hover:underline">View &rarr;</a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>

        </div>

        {{-- RIGHT: col-span-1 --}}
        <div class="col-span-1 space-y-6">

            {{-- Project Details card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Project Details</p>

                <div class="space-y-3">

                    <div>
                        <p class="text-xs font-medium text-slate-400 mb-0.5">Description</p>
                        <p class="text-sm text-slate-600 whitespace-pre-line">{{ $project->description ?? '—' }}</p>
                    </div>

                    <div class="pt-2 border-t border-slate-50 flex items-start justify-between">
                        <p class="text-xs text-slate-400">Created</p>
                        <p class="text-xs font-medium text-slate-700">{{ $project->created_at->format('d M Y') }}</p>
                    </div>

                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Updated</p>
                        <p class="text-xs font-medium text-slate-700">{{ $project->updated_at->format('d M Y') }}</p>
                    </div>

                </div>
            </div>

            {{-- Client card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Client</p>

                <div class="space-y-2">
                    <p class="text-sm font-semibold text-slate-900">{{ $project->client->name }}</p>
                    @if ($project->client->email)
                        <a href="mailto:{{ $project->client->email }}"
                           class="block text-sm text-sky-700 hover:underline">{{ $project->client->email }}</a>
                    @endif
                    @if ($project->client->phone)
                        <p class="text-sm text-slate-500">{{ $project->client->phone }}</p>
                    @endif
                </div>

                <div class="mt-4 pt-4 border-t border-slate-50">
                    <a href="{{ route('clients.show', $project->client) }}"
                       class="inline-flex items-center gap-1 text-xs text-sky-700 hover:underline font-medium">
                        View Profile &rarr;
                    </a>
                </div>
            </div>

            {{-- Team card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <div class="flex items-center justify-between mb-4">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Project Team</p>
                    @if ($project->assignedUsers->isNotEmpty())
                    <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-sky-50 text-sky-700">
                        {{ $project->assignedUsers->count() }}
                    </span>
                    @endif
                </div>

                {{-- Member list --}}
                @if ($project->assignedUsers->isNotEmpty())
                <div class="space-y-3 mb-4">
                    @foreach ($project->assignedUsers as $member)
                    @php
                        $initials   = collect(explode(' ', $member->name))->map(fn($w) => strtoupper($w[0] ?? ''))->take(2)->implode('');
                        $memberRole = $member->roles->first()?->name ?? 'Staff';
                        $avatarColor = match(true) {
                            str_contains($memberRole, 'Admin')   => 'bg-slate-700 text-white',
                            str_contains($memberRole, 'Manager') => 'bg-emerald-600 text-white',
                            default                              => 'bg-sky-600 text-white',
                        };
                    @endphp
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full {{ $avatarColor }} flex items-center justify-center text-xs font-bold shrink-0">
                            {{ $initials }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-slate-900 truncate">{{ $member->name }}</p>
                            @if ($member->pivot->role_on_project)
                                <p class="text-xs text-slate-400 italic truncate">{{ $member->pivot->role_on_project }}</p>
                            @else
                                <p class="text-xs text-slate-400 truncate">{{ $memberRole }}</p>
                            @endif
                        </div>
                        @can('projects.manage')
                        <form method="POST" action="{{ route('projects.unassign', [$project, $member]) }}" class="contents">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="text-slate-300 hover:text-red-400 transition-colors duration-150 shrink-0 cursor-pointer"
                                    title="Remove from project">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                                </svg>
                            </button>
                        </form>
                        @endcan
                    </div>
                    @endforeach
                </div>
                @else
                <p class="text-xs text-slate-400 mb-4">No team members assigned yet.</p>
                @endif

                {{-- Assign form — managers only --}}
                @can('projects.manage')
                @if ($availableUsers->isNotEmpty())
                <div>
                    <button onclick="this.nextElementSibling.classList.toggle('hidden')"
                            class="text-xs text-sky-700 hover:underline font-medium cursor-pointer">
                        + Assign team member
                    </button>
                    <div class="hidden mt-3">
                        <form method="POST" action="{{ route('projects.assign', $project) }}">
                            @csrf
                            <div class="space-y-2">
                                <label for="team-user-select" class="sr-only">Select team member</label>
                                <select id="team-user-select" name="user_id" required
                                        class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                                    <option value="">Select team member…</option>
                                    @php
                                        $grouped = $availableUsers->groupBy(fn($u) => $u->roles->first()?->name ?? 'No Role');
                                    @endphp
                                    @foreach ($grouped as $roleName => $users)
                                    <optgroup label="{{ $roleName }}">
                                        @foreach ($users as $u)
                                        <option value="{{ $u->id }}">{{ $u->name }}</option>
                                        @endforeach
                                    </optgroup>
                                    @endforeach
                                </select>
                                <label for="team-role-input" class="sr-only">Role on project</label>
                                <input id="team-role-input" type="text" name="role_on_project"
                                       placeholder="Role on project (e.g. Lead Developer)"
                                       maxlength="100"
                                       class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-700 bg-white focus:outline-none focus:ring-2 focus:ring-sky-700 focus:border-transparent">
                                <button type="submit"
                                        class="w-full px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors duration-150 cursor-pointer">
                                    Assign
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                @elseif ($project->assignedUsers->isNotEmpty())
                <p class="text-xs text-slate-400">All users are already assigned.</p>
                @endif
                @endcan
            </div>

            {{-- Update Status card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-4">Update Status</p>

                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $statusBadge }}">
                    {{ $statusLabel }}
                </span>

                <form method="POST" action="{{ route('projects.update', $project) }}" class="mt-3">
                    @csrf
                    @method('PATCH')
                    <select name="status"
                            class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm text-slate-900 focus:outline-none focus:border-slate-900 focus:ring-2 focus:ring-slate-900/10 transition-colors">
                        @foreach ($projectStatuses as $status)
                            <option value="{{ $status->value }}"
                                    {{ $sv === $status->value ? 'selected' : '' }}>
                                {{ ucfirst(str_replace('_', ' ', $status->value)) }}
                            </option>
                        @endforeach
                    </select>
                    <button type="submit"
                            class="mt-2 w-full px-4 py-2 bg-sky-700 hover:bg-sky-800 text-white text-sm font-medium rounded-lg transition-colors cursor-pointer">
                        Update Status
                    </button>
                </form>
            </div>

            {{-- Timeline card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-5" data-panel>
                <div class="flex items-center justify-between mb-4">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Timeline</p>
                    <a href="{{ route('projects.edit', $project) }}"
                       class="text-xs text-sky-600 hover:text-sky-800 transition-colors">Edit</a>
                </div>

                @if ($project->start_date || $project->end_date || $project->estimated_days)
                    <div class="space-y-3">

                        @if ($project->start_date)
                            <div class="flex items-start justify-between">
                                <p class="text-xs text-slate-400">Start</p>
                                <p class="text-xs font-medium text-slate-700">{{ $project->start_date->format('d M Y') }}</p>
                            </div>
                        @endif

                        @if ($project->end_date)
                            <div class="flex items-start justify-between">
                                <p class="text-xs text-slate-400">Deadline</p>
                                <div class="text-right">
                                    <p class="text-xs font-medium text-slate-700">{{ $project->end_date->format('d M Y') }}</p>
                                    @if ($project->isOverdue())
                                        <span class="inline-block mt-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-100 text-red-700">
                                            {{ abs($project->daysRemaining()) }}d overdue
                                        </span>
                                    @elseif ($project->daysRemaining() !== null)
                                        <span class="inline-block mt-0.5 px-1.5 py-0.5 rounded text-[10px] font-semibold {{ $project->daysRemaining() <= 7 ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-500' }}">
                                            {{ $project->daysRemaining() }}d left
                                        </span>
                                    @endif
                                </div>
                            </div>
                        @endif

                        @php $duration = $project->durationInDays(); @endphp
                        @if ($duration)
                            <div class="flex items-start justify-between">
                                <p class="text-xs text-slate-400">Duration</p>
                                <p class="text-xs font-medium text-slate-700">{{ $project->durationForHumans() }}</p>
                            </div>
                        @endif

                        {{-- Progress bar (only when both dates set and not yet completed) --}}
                        @if ($project->start_date && $project->end_date && ! in_array($project->status->value, ['completed', 'cancelled']))
                            @php
                                $total   = max(1, $project->start_date->diffInDays($project->end_date));
                                $elapsed = min($total, max(0, $project->start_date->diffInDays(now())));
                                $pct     = round($elapsed / $total * 100);
                            @endphp
                            <div class="pt-1">
                                <div class="flex justify-between text-[10px] text-slate-400 mb-1">
                                    <span>Progress</span>
                                    <span>{{ $pct }}%</span>
                                </div>
                                <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full {{ $project->isOverdue() ? 'bg-red-500' : 'bg-sky-500' }} transition-all"
                                         style="width: {{ min(100, $pct) }}%"></div>
                                </div>
                            </div>
                        @endif

                        @if ($project->actual_completion_date)
                            <div class="flex items-start justify-between">
                                <p class="text-xs text-slate-400">Completed</p>
                                <p class="text-xs font-medium text-emerald-700">{{ $project->actual_completion_date->format('d M Y') }}</p>
                            </div>
                        @endif

                    </div>
                @else
                    <p class="text-xs text-slate-400 italic">No timeline set.
                        <a href="{{ route('projects.edit', $project) }}" class="text-sky-600 hover:underline">Add dates</a>
                    </p>
                @endif

                <div class="border-t border-slate-100 mt-4 pt-3 space-y-2">
                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Project age</p>
                        <p class="text-xs font-medium text-slate-700">{{ $project->created_at->diffForHumans() }}</p>
                    </div>
                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">First proposal</p>
                        <p class="text-xs font-medium text-slate-700">
                            {{ $project->proposals->sortBy('created_at')->first()?->created_at?->format('d M Y') ?? '&mdash;' }}
                        </p>
                    </div>
                    <div class="flex items-start justify-between">
                        <p class="text-xs text-slate-400">Last payment</p>
                        <p class="text-xs font-medium text-slate-700">
                            {{ $project->invoices->flatMap->payments->sortByDesc('paid_at')->first()?->paid_at?->format('d M Y') ?? '&mdash;' }}
                        </p>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>

<script>
(function() {
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (prefersReduced) return;
    var Motion = window.Motion;
    if (!Motion) return;

    var header = document.querySelector('[data-header]');
    if (header) {
        Motion.animate(header, { opacity: [0, 1], y: [12, 0] }, { duration: 0.25, easing: 'ease-out' });
    }

    var cards = document.querySelectorAll('[data-stat-card]');
    if (cards.length) {
        Motion.animate(cards, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.07), duration: 0.25, easing: 'ease-out' });
    }

    var panels = document.querySelectorAll('[data-panel]');
    if (panels.length) {
        Motion.animate(panels, { opacity: [0, 1], y: [12, 0] }, { delay: Motion.stagger(0.06, { start: 0.2 }), duration: 0.25, easing: 'ease-out' });
    }
})();
</script>

@endsection