@extends('layouts.dashboard')

@section('title', 'Admin Dashboard')

@section('header-title', 'Executive Overview')

@section('content')
    <div class="p-6 max-w-7xl mx-auto space-y-6">

        <!-- HEADER -->
        <div
            class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pb-4 border-b border-gray-200 dark:border-gray-800">
            <div>
                <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Proposal Pipeline Dashboard</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400">Track, manage, and close your active client proposals.
                </p>
            </div>
            <div class="flex items-center gap-3">
                <span
                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400 rounded-full">
                    <span class="h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
                    Pipeline Healthy
                </span>
            </div>
        </div>

        <!-- PROPOSAL STATUS CARDS - Role-Based -->
        @php
            $userRole = auth()->user()->role->slug ?? '';

            $formatIndianCurrency = static function ($amount, $decimals = 2) {
                [$whole, $decimal] = array_pad(
                    explode('.', number_format((float) $amount, $decimals, '.', '')),
                    2,
                    null,
                );
                $sign = str_starts_with($whole, '-') ? '-' : '';
                $whole = ltrim($whole, '-');

                if (strlen($whole) > 3) {
                    $lastThreeDigits = substr($whole, -3);
                    $remainingDigits = substr($whole, 0, -3);
                    $remainingDigits = preg_replace('/\B(?=(\d{2})+(?!\d))/', ',', $remainingDigits);
                    $whole = $remainingDigits . ',' . $lastThreeDigits;
                }

                return $sign . $whole . ($decimal !== null ? '.' . $decimal : '');
            };
        @endphp
        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">

            {{-- CARD: TOTAL --}}
            <div
                class="bg-white dark:bg-[#1a1a1a] p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Total</p>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $totalProposals }}</h3>
                    <span class="text-xs font-medium text-gray-500 mt-2 flex items-center gap-0.5">
                        {{ strtoupper($userRole) }} scope
                    </span>
                </div>
                <div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 text-gray-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
            </div>

            {{-- CARD: PENDING APPROVAL --}}
            <div
                class="bg-white dark:bg-[#1a1a1a] p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-amber-500 uppercase tracking-wider">Pending</p>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $pendingCount }}</h3>
                    <span class="text-xs font-medium text-amber-500 mt-2 flex items-center gap-0.5">
                        Awaiting approval
                    </span>
                </div>
                <div class="p-3 rounded-lg bg-amber-50 dark:bg-amber-900/20 text-amber-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>

            {{-- CARD: APPROVED --}}
            <div
                class="bg-white dark:bg-[#1a1a1a] p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-green-500 uppercase tracking-wider">Approved</p>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $approvedCount }}</h3>
                    <span class="text-xs font-medium text-green-500 mt-2 flex items-center gap-0.5">
                        {{ $totalProposals > 0 ? round(($approvedCount / $totalProposals) * 100, 1) : 0 }}% win rate
                    </span>
                </div>
                <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900/20 text-green-500">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>

            {{-- CARD: REJECTED --}}
            <div
                class="bg-white dark:bg-[#1a1a1a] p-5 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-xs font-semibold text-red-500 uppercase tracking-wider">Rejected</p>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $rejectedCount }}</h3>
                    <span class="text-xs font-medium text-red-400 mt-2 flex items-center gap-0.5">
                        {{ $draftCount }} drafts pending
                    </span>
                </div>
                <div class="p-3 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-400">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>

        </div>

        <!-- ACTIVE CLIENT PROPOSALS SECTION -->
        <div
            class="bg-white dark:bg-[#1a1a1a] rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
            @php
                $draftRate = $totalProposals > 0 ? round(($draftCount / $totalProposals) * 100) : 0;
                $pendingRate = $totalProposals > 0 ? round(($pendingCount / $totalProposals) * 100) : 0;
                $wonRate = $totalProposals > 0 ? round(($approvedCount / $totalProposals) * 100) : 0;
                $rejectedRate = $totalProposals > 0 ? round(($rejectedCount / $totalProposals) * 100) : 0;
            @endphp

            <div
                class="p-5 border-b border-gray-100 dark:border-gray-800/60 flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
                <div>
                    <h2 class="font-bold text-gray-900 dark:text-white">Active Client Proposals</h2>
                    <p class="text-xs text-gray-400">Detailed client, product, value, handler, and stage visibility for the
                        current pipeline.</p>
                </div>
                <div class="flex flex-wrap items-center gap-2">
                    <span
                        class="inline-flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-600 dark:bg-gray-800/60 dark:text-gray-300">
                        Total <span class="text-gray-900 dark:text-white">{{ $totalProposals }}</span>
                    </span>
                    {{-- <span class="inline-flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-2 text-xs font-semibold text-gray-600 dark:bg-gray-800/60 dark:text-gray-300">
                    Draft <span class="text-gray-900 dark:text-white">{{ $draftCount }}</span>
                </span> --}}
                    <span
                        class="inline-flex items-center gap-2 rounded-lg bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-700 dark:bg-amber-900/20 dark:text-amber-300">
                        Pending / Review <span>{{ $pendingCount }}</span>
                    </span>
                    <span
                        class="inline-flex items-center gap-2 rounded-lg bg-green-50 px-3 py-2 text-xs font-semibold text-green-700 dark:bg-green-900/20 dark:text-green-300">
                        Approved <span>{{ $approvedCount }}</span>
                    </span>
                    <span
                        class="inline-flex items-center gap-2 rounded-lg bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 dark:bg-red-900/20 dark:text-red-300">
                        Rejected <span>{{ $rejectedCount }}</span>
                    </span>
                    <a href="{{ route('proposals.index') }}"
                        class="inline-flex items-center rounded-lg bg-[#FFB531] px-3 py-2 text-xs font-bold text-black transition-colors hover:bg-[#e09e26]">
                        View All
                    </a>
                </div>
            </div>

            {{-- <div class="grid grid-cols-1 gap-4 border-b border-gray-100 p-5 dark:border-gray-800/60 md:grid-cols-2 xl:grid-cols-4">
            <div>
                <div class="mb-1 flex justify-between text-xs">
                    <span class="font-medium text-gray-500 dark:text-gray-400">Draft</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $draftRate }}%</span>
                </div>
                <div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                    <div class="h-1.5 rounded-full bg-gray-400" style="width: {{ $draftRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="mb-1 flex justify-between text-xs">
                    <span class="font-medium text-gray-500 dark:text-gray-400">Pending / In Review</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $pendingRate }}%</span>
                </div>
                <div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                    <div class="h-1.5 rounded-full bg-amber-400" style="width: {{ $pendingRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="mb-1 flex justify-between text-xs">
                    <span class="font-medium text-gray-500 dark:text-gray-400">Approved</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $wonRate }}%</span>
                </div>
                <div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                    <div class="h-1.5 rounded-full bg-green-500" style="width: {{ $wonRate }}%"></div>
                </div>
            </div>
            <div>
                <div class="mb-1 flex justify-between text-xs">
                    <span class="font-medium text-gray-500 dark:text-gray-400">Rejected</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ $rejectedRate }}%</span>
                </div>
                <div class="h-1.5 w-full overflow-hidden rounded-full bg-gray-100 dark:bg-gray-800">
                    <div class="h-1.5 rounded-full bg-red-400" style="width: {{ $rejectedRate }}%"></div>
                </div>
            </div>
        </div> --}}

            <div class="overflow-x-auto">
                <table class="w-full min-w-[1180px] text-left border-collapse">
                    <thead>
                        <tr
                            class="bg-gray-50 dark:bg-gray-800/40 text-xs font-semibold text-gray-400 uppercase border-b border-gray-100 dark:border-gray-800">
                            <th class="p-4">S.No</th>
                            <th class="p-4">Client Details</th>
                            <th class="p-4">Proposal</th>
                            <th class="p-4">Product / Scope</th>
                            <th class="p-4">Value</th>
                            <th class="p-4">Stage</th>
                            <th class="p-4">handled By</th>
                            {{-- <th class="p-4">Created At</th> --}}
                            <th class="p-4 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody
                        class="text-sm divide-y divide-gray-100 dark:divide-gray-800/60 text-gray-600 dark:text-gray-300">
                        @forelse($proposals as $proposal)
                            @php
                                $statusClasses = [
                                    'draft' => 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300',
                                    'pending' => 'bg-amber-100 dark:bg-amber-900/20 text-amber-800 dark:text-amber-400',
                                    'pending_approval' =>
                                        'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400',
                                    'revision_requested' =>
                                        'bg-orange-100 dark:bg-orange-900/20 text-orange-800 dark:text-orange-400',
                                    'revised' => 'bg-slate-100 dark:bg-slate-800 text-slate-800 dark:text-slate-300',
                                    'approved' =>
                                        'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-400',
                                    'converted' => 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-400',
                                    'rejected' => 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-400',
                                ];
                                $statusDots = [
                                    'draft' => 'bg-gray-400',
                                    'pending' => 'bg-amber-400',
                                    'pending_approval' => 'bg-blue-500',
                                    'revision_requested' => 'bg-orange-500',
                                    'revised' => 'bg-slate-500',
                                    'approved' => 'bg-green-500',
                                    'converted' => 'bg-blue-500',
                                    'rejected' => 'bg-red-500',
                                ];
                                $statusLabels = [
                                    'draft' => 'Draft',
                                    'pending' => 'Submitted',
                                    'pending_approval' => 'In Review',
                                    'revision_requested' => 'Revision Requested',
                                    'revised' => 'Revised',
                                    'approved' => 'Approved',
                                    'converted' => 'Converted',
                                    'rejected' => 'Rejected',
                                ];
                                $statusClass = $statusClasses[$proposal->status] ?? $statusClasses['draft'];
                                $statusDot = $statusDots[$proposal->status] ?? $statusDots['draft'];
                                $statusLabel =
                                    $statusLabels[$proposal->status] ??
                                    ucfirst(str_replace('_', ' ', $proposal->status));
                                $clientName =
                                    $proposal->client?->company_name ??
                                    ($proposal->client?->contact_person ?? ($proposal->createdBy?->name ?? 'Client'));
                                $contactLine = collect([
                                    $proposal->client?->contact_person,
                                    $proposal->client?->phone,
                                    $proposal->client?->email,
                                ])
                                    ->filter()
                                    ->join(' | ');
                                $productName =
                                    $proposal->product?->name ?? ($proposal->product?->model_name ?? 'Proposal Item');
                                $variantName = $proposal->selectedVariant?->variant_name ?? 'Variant not selected';
                                $luxePackageSelection = match ($proposal->lux_package) {
                                    // 'yes' => 'Yes' . (($proposal->luxe_package_price ?? 0) > 0 ? ' - &#8377; ' . number_format($proposal->luxe_package_price, 2) : ''),
                                    'yes' => 'Yes',
                                    'no' => 'No',
                                    default => 'Not selected',
                                };
                                $createdDate = $proposal->created_at?->format('d M Y') ?? 'N/A';
                                $validUntil = $proposal->valid_until?->format('d M Y') ?? 'Not set';
                                $ageInDays = $proposal->created_at ? $proposal->created_at->diffInDays(now()) : null;
                                $approvalRecord = $proposal->approvals
                                    ->where('status', 'approved')
                                    ->sortByDesc('updated_at')
                                    ->first();
                                $approvalHistory = $proposal->histories
                                    ->whereIn('action_type', ['approved', 'revision_created'])
                                    ->sortByDesc('created_at')
                                    ->first();
                                $approvedBy = $approvalRecord?->approver?->name;

                                if (!$approvedBy && $proposal->status === 'approved') {
                                    $approvedBy =
                                        $approvalHistory?->actionBy?->name ??
                                        ($proposal->createdBy?->name ?? 'Approval recorded');
                                }
                            @endphp
                            <tr class="align-top hover:bg-gray-50/50 dark:hover:bg-gray-900/20 transition-colors">
                                <td class="p-4 text-xs font-bold text-gray-900 dark:text-white">
                                    {{ $proposals->firstItem() + $loop->index }}
                                </td>
                                <td class="p-4">
                                    <span
                                        class="block font-semibold text-gray-900 dark:text-white">{{ $clientName }}</span>
                                    <span
                                        class="mt-1 block max-w-[260px] text-xs text-gray-400">{{ $contactLine ?: 'Contact details not available' }}</span>
                                    @if ($proposal->client?->gst_number)
                                        <span
                                            class="mt-2 inline-flex rounded-md bg-gray-50 px-2 py-1 text-[11px] font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400">
                                            GST: {{ $proposal->client->gst_number }}
                                        </span>
                                    @endif
                                </td>
                                <td class="p-4">
                                    <span
                                        class="block whitespace-nowrap text-xs font-bold text-[#996515]">{{ $proposal->proposal_number }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Created: {{ $createdDate }}</span>
                                    @if (($proposal->revision_number ?? 0) > 0)
                                        <span
                                            class="mt-2 inline-flex rounded-md bg-orange-50 px-2 py-1 text-[11px] font-bold text-orange-700 dark:bg-orange-900/20 dark:text-orange-300">
                                            Rev {{ $proposal->revision_number }}
                                        </span>
                                    @endif
                                </td>
                                <td class="p-4">
                                    <span
                                        class="block text-xs font-medium text-gray-900 dark:text-white">{{ $productName }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Variant: {{ $variantName }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Luxe Package:
                                        {{ $luxePackageSelection }}</span>
                                </td>
                                <td class="p-4">
                                    <span class="block text-xs font-bold text-gray-900 dark:text-white">&#8377;
                                        {{ $formatIndianCurrency($proposal->final_amount ?? 0, 0) }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Base: &#8377;
                                        {{ $formatIndianCurrency($proposal->requested_price ?? ($proposal->original_price ?? 0)) }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Upgradations: &#8377;
                                        {{ $formatIndianCurrency($proposal->upgradation_total ?? 0) }}</span>
                                    @if (($proposal->discount_amount ?? 0) > 0)
                                        <span class="mt-1 block text-xs text-green-600 dark:text-green-400">Discount:
                                            &#8377;
                                            {{ $formatIndianCurrency($proposal->discount_amount) }}</span>
                                    @endif
                                </td>
                                <td class="p-4">
                                    <span
                                        class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-full {{ $statusClass }}">
                                        <span class="h-1.5 w-1.5 rounded-full {{ $statusDot }}"></span>
                                        {{ $statusLabel }}
                                    </span>
                                    {{-- <span class="mt-2 block text-xs text-gray-400">Level {{ $proposal->approval_level ?? 0 }}</span> --}}
                                </td>
                                <td class="p-4">
                                    <span
                                        class="block text-xs font-medium text-gray-900 dark:text-white">{{ $proposal->createdBy->name ?? 'N/A' }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Assigned:
                                        {{ $proposal->currentHandler->name ?? 'Not assigned' }}</span>
                                    <span class="mt-1 block text-xs text-gray-400">Approved by:
                                        {{ $approvedBy ?? 'Pending approval' }}</span>
                                </td>
                                {{-- <td class="p-4">
                                <span class="block text-xs font-semibold text-gray-900 dark:text-white">{{ $createdDate }}</span>
                                <span class="mt-1 block text-xs text-gray-400">Valid until {{ $validUntil }}</span>
                                <span class="mt-1 block text-xs text-gray-400">{{ is_null($ageInDays) ? 'Age unavailable' : $ageInDays . ' days in pipeline' }}</span>
                            </td> --}}
                                <td class="p-4 text-right">
                                    <a href="{{ route('proposals.show', $proposal) }}"
                                        class="inline-flex items-center justify-center rounded-lg bg-gray-100 px-3 py-2 text-xs font-bold text-gray-800 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
                                        View
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="p-8 text-center text-gray-500 dark:text-gray-400">No active
                                    proposals available.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($proposals->hasPages())
                <div class="border-t border-gray-100 px-5 py-4 dark:border-gray-800/60">
                    <div class="mb-3 text-xs font-semibold text-gray-500 dark:text-gray-400">
                        Showing {{ $proposals->firstItem() }} to {{ $proposals->lastItem() }} of
                        {{ $proposals->total() }} proposals
                    </div>
                    {{ $proposals->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection

@push('scripts')
    <style>
        /* Professional Font & Smooth Transitions */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }

        .glass {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
    </style>
@endpush