@extends('admin.layouts.app')

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

@section('content')
    <!-- Header -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-900">CRM Dashboard</h2>
            <p class="text-gray-500">Overview of your sales pipeline</p>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.crm.leads.index') }}" class="btn btn-secondary">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 6h16M4 10h16M4 14h16M4 18h16" />
                </svg>
                View All Leads
            </a>
            <a href="{{ route('admin.crm.leads.create') }}" class="btn btn-primary">
                <svg class="w-5 h-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>
                Add Lead
            </a>
        </div>
    </div>

    <!-- Stats Overview -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
        <div class="bg-white rounded-xl p-5 shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-2">
                <span class="text-gray-500 text-sm">Total Leads</span>
                <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </div>
            </div>
            <div class="text-3xl font-bold text-gray-900">{{ $stats['total_leads'] }}</div>
        </div>

        <div class="bg-orange-50 rounded-xl p-5 border border-orange-100">
            <div class="flex items-center justify-between mb-2">
                <span class="text-orange-600 text-sm">New Leads</span>
                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                </div>
            </div>
            <div class="text-3xl font-bold text-orange-600">{{ $stats['new_leads'] }}</div>
        </div>

        <div class="bg-red-50 rounded-xl p-5 border border-red-100">
            <div class="flex items-center justify-between mb-2">
                <span class="text-red-600 text-sm">Hot Leads 🔥</span>
                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
                    </svg>
                </div>
            </div>
            <div class="text-3xl font-bold text-red-600">{{ $stats['hot_leads'] }}</div>
        </div>

        <div class="bg-green-50 rounded-xl p-5 border border-green-100">
            <div class="flex items-center justify-between mb-2">
                <span class="text-green-600 text-sm">Converted</span>
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <div class="text-3xl font-bold text-green-600">{{ $stats['converted'] }}</div>
            <div class="text-sm text-green-600 mt-1">{{ $stats['conversion_rate'] }}% rate</div>
        </div>

        <div class="bg-gradient-to-br from-primary-500 to-primary-700 rounded-xl p-5 text-white">
            <div class="flex items-center justify-between mb-2">
                <span class="text-primary-100 text-sm">This Month Value</span>
                <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>
            <div class="text-2xl font-bold">
                ₹{{ number_format($stats['total_deal_value'] / 100000, 2) }} Lac
            </div>
        </div>
    </div>

    <!-- Follow-up Alerts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Today's Follow-ups -->
        <div class="bg-white rounded-xl shadow-sm">
            <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900 flex items-center gap-2">
                    <span class="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></span>
                    Today's Follow-ups ({{ $stats['today_follow_ups'] }})
                </h3>
            </div>
            <div class="p-4">
                @if ($todayFollowUps->count() > 0)
                    <div class="space-y-3">
                        @foreach ($todayFollowUps as $lead)
                            <a href="{{ route('admin.crm.leads.show', $lead) }}"
                                class="flex items-center justify-between p-3 bg-purple-50 rounded-lg hover:bg-purple-100 transition">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white font-medium text-sm">
                                        {{ strtoupper(substr($lead->name, 0, 2)) }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900">{{ $lead->name }}</p>
                                        <p class="text-sm text-gray-500">{{ $lead->phone }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-medium text-purple-600">
                                        {{ $lead->next_follow_up->format('h:i A') }}</p>
                                    @if ($lead->follow_up_note)
                                        <p class="text-xs text-gray-500">{{ Str::limit($lead->follow_up_note, 30) }}</p>
                                    @endif
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <p class="text-center text-gray-500 py-8">No follow-ups scheduled for today</p>
                @endif
            </div>
        </div>

        <!-- Overdue Follow-ups -->
        <div class="bg-white rounded-xl shadow-sm">
            <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                <h3 class="font-semibold text-gray-900 flex items-center gap-2">
                    <span class="w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                    Overdue Follow-ups ({{ $stats['overdue_follow_ups'] }})
                </h3>
            </div>
            <div class="p-4">
                @if ($overdueFollowUps->count() > 0)
                    <div class="space-y-3">
                        @foreach ($overdueFollowUps as $lead)
                            <a href="{{ route('admin.crm.leads.show', $lead) }}"
                                class="flex items-center justify-between p-3 bg-red-50 rounded-lg hover:bg-red-100 transition">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white font-medium text-sm">
                                        {{ strtoupper(substr($lead->name, 0, 2)) }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900">{{ $lead->name }}</p>
                                        <p class="text-sm text-gray-500">{{ $lead->phone }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <p class="text-sm font-medium text-red-600">
                                        {{ $lead->next_follow_up->diffForHumans() }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                @else
                    <p class="text-center text-gray-500 py-8">No overdue follow-ups 👏</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Leads by Status -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Leads by Status</h3>
            <div class="space-y-3">
                @php
                    $statuses = App\Models\Lead::getStatuses();
                    $maxCount = !empty($leadsByStatus) ? max($leadsByStatus) : 1;
                @endphp
                @foreach ($statuses as $key => $info)
                    @php $count = $leadsByStatus[$key] ?? 0; @endphp
                    <div>
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-gray-600">{{ $info['label'] }}</span>
                            <span class="font-medium">{{ $count }}</span>
                        </div>
                        <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                            <div class="h-full bg-{{ $info['color'] }}-500 rounded-full transition-all"
                                style="width: {{ ($count / $maxCount) * 100 }}%"></div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <!-- Leads by Source -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Leads by Source</h3>
            <div class="space-y-3">
                @php
                    $sources = App\Models\Lead::getSources();
                    $maxSourceCount = !empty($leadsBySource) ? max($leadsBySource) : 1;
                    $colors = ['blue', 'green', 'purple', 'orange', 'pink', 'cyan', 'indigo', 'amber', 'teal', 'rose'];
                @endphp
                @foreach ($sources as $key => $label)
                    @php
                        $count = $leadsBySource[$key] ?? 0;
                        $colorIndex = array_search($key, array_keys($sources)) % count($colors);
                    @endphp
                    @if ($count > 0)
                        <div>
                            <div class="flex items-center justify-between text-sm mb-1">
                                <span class="text-gray-600">{{ $label }}</span>
                                <span class="font-medium">{{ $count }}</span>
                            </div>
                            <div class="h-2 bg-gray-100 rounded-full overflow-hidden">
                                <div class="h-full bg-{{ $colors[$colorIndex] }}-500 rounded-full transition-all"
                                    style="width: {{ ($count / $maxSourceCount) * 100 }}%"></div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <!-- Recent Leads -->
    <div class="bg-white rounded-xl shadow-sm">
        <div class="p-4 border-b border-gray-100 flex items-center justify-between">
            <h3 class="font-semibold text-gray-900">Recent Leads</h3>
            <a href="{{ route('admin.crm.leads.index') }}" class="text-sm text-primary-600 hover:underline">View All
                →</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Lead</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Contact</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Source</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Priority</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Status</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Created</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach ($recentLeads as $lead)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <a href="{{ route('admin.crm.leads.show', $lead) }}"
                                    class="font-medium text-gray-900 hover:text-primary-600">
                                    {{ $lead->name }}
                                </a>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ $lead->phone }}</td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ $lead->source_label }}</td>
                            <td class="px-4 py-3">
                                <span
                                    class="px-2 py-1 rounded-full text-xs font-medium
                                    {{ $lead->priority === 'hot' ? 'bg-red-100 text-red-700' : '' }}
                                    {{ $lead->priority === 'warm' ? 'bg-amber-100 text-amber-700' : '' }}
                                    {{ $lead->priority === 'cold' ? 'bg-blue-100 text-blue-700' : '' }}">
                                    {{ $lead->priority_label }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <span
                                    class="px-2 py-1 rounded-full text-xs font-medium bg-{{ $lead->status_color }}-100 text-{{ $lead->status_color }}-700">
                                    {{ $lead->status_label }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-500">{{ $lead->created_at->diffForHumans() }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection