@extends('layouts.app')

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

@section('content')
<div class="max-w-5xl mx-auto px-8 py-8">

    @php
        $sv = $proposal->status instanceof \App\Enums\ProposalStatus ? $proposal->status->value : $proposal->status;
        $currencyValue = $proposal->currency instanceof \App\Enums\Currency ? $proposal->currency->value : $proposal->currency;
        $isOverdue = $proposal->valid_until->isPast() && in_array($sv, ['draft','sent']);
        $daysRemaining = now()->diffInDays($proposal->valid_until, false);
        $pSv = $proposal->project?->status instanceof \App\Enums\ProjectStatus ? $proposal->project->status->value : $proposal->project?->status;
        $badgeClass = match($sv) {
            '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-700',
            default    => 'bg-slate-100 text-slate-600',
        };
        $currencySymbol = $proposal->currency instanceof \App\Enums\Currency ? $proposal->currency->symbol() : (string) $proposal->currency;
    @endphp

    {{-- Flash messages --}}
    @if (session('success'))
        <div class="mb-6 flex items-center gap-3 bg-emerald-50 border border-emerald-200 text-emerald-700 text-sm rounded-lg px-4 py-3">
            <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 bg-red-50 border border-red-200 text-red-600 text-sm rounded-lg px-4 py-3">
            <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

    {{-- Back link --}}
    <a href="{{ route('proposals.index') }}"
       class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-slate-700 transition-colors duration-150 mb-6">
        <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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
        </svg>
        Proposals
    </a>

    {{-- Page header --}}
    <div class="flex items-start justify-between gap-6 mb-8">
        <div class="flex-1 min-w-0">
            <h1 class="text-xl font-semibold text-slate-900 truncate">{{ $proposal->title }}</h1>
            <p class="text-sm text-slate-400 mt-1">{{ $proposal->client->name }} &middot; {{ $proposal->project?->title }}</p>
        </div>
        <div style="display:flex; align-items:center; gap:8px;">
            @can('proposals.edit')
            <a href="{{ route('proposals.edit', $proposal) }}"
               style="display:inline-flex; align-items:center; padding:8px 16px; font-size:13px; font-weight:500; border:1px solid #e2e8f0; border-radius:8px; color:#475569; text-decoration:none; white-space:nowrap; background:white;">
                Edit
            </a>
            @endcan
            <a href="{{ route('proposals.pdf', $proposal) }}"
               target="_blank"
               style="display:inline-flex; align-items:center; padding:8px 16px; font-size:13px; font-weight:500; border:1px solid #e2e8f0; border-radius:8px; color:#475569; text-decoration:none; white-space:nowrap; background:white;">
                Download PDF
            </a>
            @can('proposals.delete')
            <form method="POST" action="{{ route('proposals.destroy', $proposal) }}"
                  style="display:inline-flex; margin:0; padding:0;"
                  onsubmit="return confirm('Permanently delete this proposal? This cannot be undone.')">
                @csrf
                @method('DELETE')
                <button type="submit"
                        style="display:inline-flex; align-items:center; padding:8px 16px; font-size:13px; font-weight:500; border:1px solid #fecaca; border-radius:8px; color:#dc2626; background:white; cursor:pointer; white-space:nowrap;">
                    Delete
                </button>
            </form>
            @endcan
        </div>
    </div>

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

        {{-- LEFT: Main content (2/3) --}}
        <div class="col-span-2 space-y-6">

            {{-- PRIORITY 1 — Hero value card --}}
            <div class="bg-white border border-slate-100 rounded-xl p-6" data-panel>

                {{-- Amount + currency + status --}}
                <div class="flex items-start justify-between gap-4 mb-5">
                    <div>
                        <div class="flex items-baseline gap-3 flex-wrap">
                            <span class="text-4xl font-bold text-slate-900 font-mono">
                                {{ $currencySymbol }}&nbsp;{{ number_format((float) $proposal->amount, 2) }}
                            </span>
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-slate-100 text-slate-600 font-mono tracking-wide">
                                {{ $currencyValue }}
                            </span>
                        </div>
                    </div>
                    <span class="inline-flex items-center rounded-full px-3 py-1 text-sm font-semibold {{ $badgeClass }} shrink-0">
                        {{ ucfirst($sv) }}
                    </span>
                </div>

                {{-- Validity countdown --}}
                <div class="flex items-center gap-2 text-sm">
                    <svg class="w-4 h-4 {{ $isOverdue ? 'text-red-400' : ($daysRemaining <= 7 ? 'text-amber-400' : 'text-slate-300') }} shrink-0"
                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    <span class="text-slate-500">Valid until {{ $proposal->valid_until->format('d M Y') }}</span>
                    @if ($isOverdue)
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold bg-red-50 text-red-600">
                            Expired {{ abs((int) $daysRemaining) }} {{ Str::plural('day', abs((int) $daysRemaining)) }} ago
                        </span>
                    @elseif ($daysRemaining >= 0)
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold
                            {{ $daysRemaining <= 7 ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700' }}">
                            {{ (int) $daysRemaining }} {{ Str::plural('day', (int) $daysRemaining) }} remaining
                        </span>
                    @endif
                </div>

            </div>

            {{-- PRIORITY 2 — Scope of work card --}}
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-6 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Scope of work</p>
                </div>
                <div class="px-6 py-5">
                    <p class="text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">{{ $proposal->scope }}</p>
                </div>
                @if ($proposal->notes)
                    <div class="px-6 py-5 border-t border-slate-100 bg-slate-50 rounded-b-xl">
                        <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Notes</p>
                        <p class="text-sm text-slate-500 whitespace-pre-wrap leading-relaxed">{{ $proposal->notes }}</p>
                    </div>
                @endif
            </div>

        </div>

        {{-- RIGHT: Sidebar (1/3) --}}
        <div class="col-span-1 space-y-4">

            {{-- Card A — Client & project --}}
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Client &amp; project</p>
                </div>
                <div class="px-5 py-4 space-y-3">
                    <div>
                        <p class="text-xs text-slate-400 mb-0.5">Client</p>
                        <p class="text-sm font-semibold text-slate-900">{{ $proposal->client->name }}</p>
                        <p class="text-xs text-slate-400 mt-0.5">{{ $proposal->client->email }}</p>
                    </div>
                    <div class="border-t border-slate-50 pt-3">
                        <p class="text-xs text-slate-400 mb-0.5">Project</p>
                        <p class="text-sm font-semibold text-slate-900">{{ $proposal->project?->title }}</p>
                        @if($pSv)
                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium bg-slate-100 text-slate-600 mt-1.5">
                            {{ ucfirst(str_replace('_', ' ', $pSv)) }}
                        </span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Card B — Update status --}}
            @can('proposals.edit')
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Update status</p>
                </div>
                <div class="px-5 py-4">
                    <div class="mb-3">
                        <p class="text-xs text-slate-400 mb-1.5">Current status</p>
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $badgeClass }}">
                            {{ ucfirst($sv) }}
                        </span>
                    </div>
                    <form method="POST" action="{{ route('proposals.status', $proposal) }}">
                        @csrf
                        @method('PATCH')
                        <div class="space-y-3">
                            <div>
                                <label for="status-select" class="text-xs text-slate-400 block mb-1">New status</label>
                                <select id="status-select" name="status"
                                        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 transition-shadow duration-150">
                                    @foreach (\App\Enums\ProposalStatus::cases() as $s)
                                        <option value="{{ $s->value }}" {{ $sv === $s->value ? 'selected' : '' }}>
                                            {{ ucfirst($s->value) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <button type="submit"
                                    class="w-full bg-sky-700 text-white rounded-lg px-4 py-2 text-sm font-semibold hover:opacity-90 transition-all duration-200 cursor-pointer">
                                Update
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            @endcan

            {{-- Card C — Invoice --}}
            @if ($proposal->invoice)
            @php
                $inv = $proposal->invoice;
                $invSv = $inv->status instanceof \App\Enums\InvoiceStatus ? $inv->status->value : $inv->status;
                $invSymbol = $inv->currency instanceof \App\Enums\Currency ? $inv->currency->symbol() : (string) $inv->currency;
                $invBadge = match($invSv) {
                    'paid'    => 'bg-emerald-50 text-emerald-700',
                    'partial' => 'bg-sky-50 text-sky-700',
                    default   => 'bg-amber-50 text-amber-700',
                };
            @endphp
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Invoice</p>
                </div>
                <div class="px-5 py-4">
                    <div class="flex items-center justify-between mb-3">
                        <span class="font-mono text-sm font-semibold text-slate-900">{{ $inv->invoice_number }}</span>
                        <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {{ $invBadge }}">
                            {{ ucfirst($invSv) }}
                        </span>
                    </div>
                    <p class="text-2xl font-bold text-slate-900 font-mono mb-1">
                        {{ $invSymbol }}&nbsp;{{ number_format((float) $inv->amount, 2) }}
                    </p>
                    <p class="text-xs text-slate-400 mb-4">
                        Due {{ $inv->due_date->format('d M Y') }}
                    </p>
                    <a href="{{ route('invoices.show', $inv) }}"
                       class="block w-full text-center border border-slate-200 text-slate-600 rounded-lg px-4 py-2 text-sm font-medium hover:bg-slate-50 transition-colors duration-150">
                        View Invoice &rarr;
                    </a>
                </div>
            </div>
            @else
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Invoice</p>
                </div>
                <div class="px-5 py-7 flex flex-col items-center text-center">
                    <div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center mb-3">
                        <svg class="w-5 h-5 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                    </div>
                    <p class="text-xs text-slate-400 leading-relaxed max-w-[160px]">
                        Invoice appears once the proposal is approved
                    </p>
                </div>
            </div>
            @endif

            {{-- Card E — Client Deck --}}
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Client Deck</p>
                </div>
                <div class="px-5 py-4">
                    @if ($deckUrl)
                        {{-- Deck link exists --}}
                        <div class="space-y-3">
                            {{-- Copyable URL --}}
                            <div>
                                <label class="text-xs text-slate-400 block mb-1">Shareable link</label>
                                <div class="flex gap-1.5">
                                    <input type="text" readonly value="{{ $deckUrl }}"
                                           onclick="this.select()"
                                           class="flex-1 min-w-0 border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs font-mono text-slate-600 bg-slate-50 cursor-pointer focus:outline-none">
                                    <button type="button"
                                            onclick="navigator.clipboard.writeText({{ Js::from($deckUrl) }}).then(() => { this.textContent = 'Copied!'; setTimeout(() => this.textContent = 'Copy', 1500) })"
                                            class="shrink-0 px-2.5 py-1.5 text-xs font-medium border border-slate-200 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors cursor-pointer">
                                        Copy
                                    </button>
                                </div>
                            </div>

                            {{-- Deck status --}}
                            <div class="text-xs">
                                @if ($proposal->deck_approved_at)
                                    <span class="inline-flex items-center gap-1 text-emerald-700 font-medium">
                                        <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="M5 13l4 4L19 7"/>
                                        </svg>
                                        Approved {{ $proposal->deck_approved_at->diffForHumans() }}
                                    </span>
                                @elseif ($proposal->deck_rejected_at)
                                    <div>
                                        <span class="inline-flex items-center gap-1 text-red-600 font-medium">
                                            <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="M6 18L18 6M6 6l12 12"/>
                                            </svg>
                                            Declined {{ $proposal->deck_rejected_at->diffForHumans() }}
                                        </span>
                                        @if ($proposal->deck_rejection_reason)
                                            <p class="text-slate-400 mt-1 italic truncate" title="{{ $proposal->deck_rejection_reason }}">
                                                "{{ Str::limit($proposal->deck_rejection_reason, 60) }}"
                                            </p>
                                        @endif
                                    </div>
                                @elseif ($proposal->deck_viewed_at)
                                    <span class="inline-flex items-center gap-1 text-sky-700 font-medium">
                                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                        Viewed {{ $proposal->deck_viewed_at->diffForHumans() }}
                                    </span>
                                @else
                                    <span class="text-slate-400">Not yet viewed</span>
                                @endif
                            </div>

                            {{-- Action links --}}
                            <div class="flex items-center gap-3 pt-1 border-t border-slate-50">
                                <a href="{{ $deckUrl }}" target="_blank"
                                   class="text-xs text-sky-700 hover:underline font-medium">
                                    Preview &rarr;
                                </a>
                                @can('proposals.edit')
                                <form method="POST" action="{{ route('proposals.deck.generate', $proposal) }}" class="contents">
                                    @csrf
                                    <button type="submit"
                                            class="text-xs text-slate-400 hover:text-slate-600 transition-colors cursor-pointer">
                                        Regenerate link
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </div>
                    @else
                        {{-- No deck link yet --}}
                        @can('proposals.edit')
                        <div class="text-center py-2">
                            <form method="POST" action="{{ route('proposals.deck.generate', $proposal) }}">
                                @csrf
                                <button type="submit"
                                        class="w-full px-4 py-2.5 bg-sky-700 hover:bg-sky-800 text-white text-sm font-semibold rounded-lg transition-colors duration-150 cursor-pointer mb-3">
                                    Generate deck link
                                </button>
                            </form>
                            <p class="text-xs text-slate-400 leading-relaxed">
                                Share a professional proposal page with your client — no login required.
                            </p>
                        </div>
                        @else
                        <p class="text-xs text-slate-400">No deck link generated yet.</p>
                        @endcan
                    @endif
                </div>
            </div>

            {{-- Card D — Metadata --}}
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Details</p>
                </div>
                <div class="px-5 py-4 space-y-2.5">
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-slate-400">Created</span>
                        <span class="text-xs text-slate-600">{{ $proposal->created_at->format('d M Y') }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-slate-400">Updated</span>
                        <span class="text-xs text-slate-600">{{ $proposal->updated_at->format('d M Y') }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-slate-400">Proposal ID</span>
                        <span class="text-xs text-slate-600 font-mono">#{{ $proposal->id }}</span>
                    </div>
                </div>
            </div>

            {{-- Card F — Payment Milestones --}}
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50 flex items-center justify-between">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Payment Milestones</p>
                    @if ($proposal->milestones->count())
                    @php
                        $milestoneTotal = $proposal->milestones->reduce(fn($carry, $m) => bcadd($carry, (string) $m->amount, 2), '0.00');
                        $proposalAmount = number_format((float) $proposal->amount, 2, '.', '');
                        $milestoneMismatch = bccomp($milestoneTotal, $proposalAmount, 2) !== 0;
                    @endphp
                    <span class="text-xs font-mono {{ $milestoneMismatch ? 'text-amber-600' : 'text-emerald-600' }}">
                        {{ $currencySymbol }}{{ number_format((float) $milestoneTotal, 2) }}
                        / {{ $currencySymbol }}{{ number_format((float) $proposal->amount, 2) }}
                    </span>
                    @endif
                </div>
                <div class="px-5 py-4 space-y-3">
                    @forelse ($proposal->milestones as $milestone)
                    @php
                        $mStatus = $milestone->status;
                        $mBadge = match($mStatus) {
                            'paid'     => 'bg-emerald-50 text-emerald-700',
                            'invoiced' => 'bg-sky-50 text-sky-700',
                            default    => 'bg-amber-50 text-amber-700',
                        };
                        $mTriggerLabel = match($milestone->due_trigger) {
                            'on_signing'   => 'On signing',
                            'on_milestone' => 'On milestone',
                            'on_delivery'  => 'On delivery',
                            'custom_date'  => $milestone->due_date?->format('d M Y') ?? 'Custom date',
                            default        => $milestone->due_trigger,
                        };
                    @endphp
                    <div class="flex items-start gap-3 py-2 border-b border-slate-50 last:border-0">
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-slate-800 truncate">{{ $milestone->title }}</p>
                            @if ($milestone->description)
                            <p class="text-xs text-slate-400 mt-0.5 truncate">{{ $milestone->description }}</p>
                            @endif
                            <p class="text-xs text-slate-400 mt-0.5">{{ $mTriggerLabel }}</p>
                        </div>
                        <div class="text-right shrink-0">
                            <p class="text-sm font-semibold font-mono text-slate-900">{{ $currencySymbol }}{{ number_format((float) $milestone->amount, 2) }}</p>
                            @if ($milestone->percentage)
                            <p class="text-xs text-slate-400">{{ number_format((float) $milestone->percentage, 1) }}%</p>
                            @endif
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold mt-1 {{ $mBadge }}">
                                {{ ucfirst($mStatus) }}
                            </span>
                        </div>
                        @can('proposals.edit')
                        @if ($mStatus === 'pending')
                        <form method="POST" action="{{ route('milestones.destroy', $milestone) }}" class="contents"
                              onsubmit="return confirm('Remove this milestone?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-slate-300 hover:text-red-400 transition-colors mt-0.5 shrink-0 cursor-pointer" title="Remove milestone">
                                &times;
                            </button>
                        </form>
                        @endif
                        @endcan
                    </div>
                    @empty
                    <p class="text-xs text-slate-400 text-center py-2">No milestones added yet.</p>
                    @endforelse

                    {{-- Add Milestone form --}}
                    @can('proposals.edit')
                    <div x-data="{ open: false }" class="pt-2">
                        <button type="button"
                                @click="open = !open"
                                class="text-xs text-sky-700 hover:underline font-medium cursor-pointer">
                            + Add Milestone
                        </button>
                        <div x-show="open" x-transition class="mt-3 space-y-2" x-cloak>
                            <form method="POST" action="{{ route('milestones.store', $proposal) }}" class="space-y-2">
                                @csrf
                                <input type="hidden" name="currency" value="{{ $proposal->currency instanceof \App\Enums\Currency ? $proposal->currency->value : $proposal->currency }}">
                                <input type="text" name="title" placeholder="Milestone title" required
                                       class="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700">
                                <textarea name="description" placeholder="Description (optional)" rows="2"
                                          class="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 resize-none"></textarea>
                                <div class="grid grid-cols-2 gap-2">
                                    <input type="number" name="amount" placeholder="Amount" step="0.01" min="0" required
                                           class="border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700">
                                    <input type="number" name="percentage" placeholder="% of total" step="0.01" min="0" max="100"
                                           class="border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700">
                                </div>
                                <select name="due_trigger" x-model="trigger" x-data="{ trigger: 'on_milestone' }"
                                        class="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700 bg-white">
                                    <option value="on_signing">Due on signing</option>
                                    <option value="on_milestone" selected>Due on milestone</option>
                                    <option value="on_delivery">Due on delivery</option>
                                    <option value="custom_date">Custom date</option>
                                </select>
                                <div x-show="trigger === 'custom_date'" x-cloak>
                                    <input type="date" name="due_date"
                                           class="w-full border border-slate-200 rounded-lg px-2.5 py-1.5 text-xs text-slate-700 focus:outline-none focus:ring-2 focus:ring-sky-700">
                                </div>
                                <button type="submit"
                                        class="w-full bg-sky-700 text-white text-xs font-semibold rounded-lg px-3 py-2 hover:opacity-90 transition-opacity cursor-pointer">
                                    Add Milestone
                                </button>
                            </form>
                        </div>
                    </div>
                    @endcan
                </div>
            </div>

            {{-- Card G — Signature Status --}}
            <div class="bg-white border border-slate-100 rounded-xl" data-panel>
                <div class="px-5 py-4 border-b border-slate-50">
                    <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Signature</p>
                </div>
                <div class="px-5 py-4">
                    @if ($proposal->signature)
                    <div class="space-y-2">
                        <div class="flex items-center gap-2">
                            <div class="w-5 h-5 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
                                <svg class="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                            <span class="text-sm font-semibold text-emerald-700">Signed</span>
                        </div>
                        <div class="space-y-1 pl-7">
                            <p class="text-sm font-medium text-slate-900">{{ $proposal->signature->signatory_name }}</p>
                            <p class="text-xs text-slate-400">{{ $proposal->signature->signatory_email }}</p>
                            <p class="text-xs text-slate-400">{{ $proposal->signature->signed_at->format('d M Y, H:i') }}</p>
                            <p class="text-xs text-slate-300 font-mono">{{ substr(hash('sha256', $proposal->signature->signatory_email . '|' . $proposal->signature->signed_at), 0, 8) }}...</p>
                        </div>
                    </div>
                    @else
                    <div class="text-center py-2">
                        <div class="w-8 h-8 rounded-full bg-slate-50 flex items-center justify-center mx-auto mb-2">
                            <svg class="w-4 h-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
                            </svg>
                        </div>
                        <p class="text-xs text-slate-400">Awaiting client signature</p>
                        @if ($deckUrl ?? null)
                        <a href="{{ $deckUrl }}" target="_blank" class="text-xs text-sky-700 hover:underline mt-1 inline-block">
                            Open deck &rarr;
                        </a>
                        @endif
                    </div>
                    @endif
                </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;

    // Hero card + sidebar cards stagger in
    var panels = document.querySelectorAll('[data-panel]');
    if (panels.length) {
        Motion.animate(panels, { opacity: [0, 1], y: [16, 0] }, { delay: Motion.stagger(0.08), duration: 0.28, easing: 'ease-out' });
    }
})();
</script>
@endsection