@extends('admin.layout.main')

@section('admin')
    <div class="flex flex-col h-full">
        <!-- Header -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
                    <p class="text-gray-500 dark:text-gray-400 mt-1">Welcome back, {{ auth()->user()->name }}</p>
                    <div
                        class="mt-2 inline-flex items-center gap-2 text-sm bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 px-3 py-1 rounded-full">
                        <i class="fas fa-building text-xs"></i>
                        <span>{{ auth()->user()->branch?->name ?? 'N/A' }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <div class="hidden sm:block text-sm text-gray-500 dark:text-gray-400">
                        {{ now()->format('l, F j') }}
                    </div>
                    <div
                        class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white">
                        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <!-- Projects -->
            <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Projects</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $project->count() }}</p>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
                        <i class="fas fa-layer-group text-blue-500 dark:text-blue-400"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-2">
                        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                            @php
                                $inProgressCount = $project->where('status', 'in_progress')->count();
                                $progress = $project->count() > 0 ? ($inProgressCount / $project->count()) * 100 : 0;
                            @endphp
                            <div class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
                                style="width: {{ $progress }}%"></div>
                        </div>
                        <span class="text-xs font-medium text-blue-600 dark:text-blue-400">{{ $inProgressCount }}</span>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">In progress</p>
                </div>
            </div>

            <!-- Revenue -->
            <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Revenue</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">
                            {{ number_format($servicesRequest->sum('total_price'), 0) }} SR
                        </p>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-green-50 dark:bg-green-900/20 flex items-center justify-center">
                        <i class="fas fa-chart-line text-green-500 dark:text-green-400"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                    <div class="flex items-center gap-2">
                        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                            @php
                                $monthlyRevenue = $servicesRequest
                                    ->where('created_at', '>=', now()->startOfMonth())
                                    ->sum('total_price');
                                $totalRevenue = $servicesRequest->sum('total_price');
                                $revenueProgress = $totalRevenue > 0 ? ($monthlyRevenue / $totalRevenue) * 100 : 0;
                            @endphp
                            <div class="bg-green-500 h-1.5 rounded-full transition-all duration-300"
                                style="width: {{ min($revenueProgress, 100) }}%"></div>
                        </div>
                        <span class="text-xs font-medium text-green-600 dark:text-green-400">
                            {{ number_format($monthlyRevenue, 0) }} SR
                        </span>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">This month</p>
                </div>
            </div>

            <!-- Service Requests -->
            <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Requests</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $servicesRequest->count() }}</p>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center">
                        <i class="fas fa-inbox text-orange-500 dark:text-orange-400"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                    @php
                        $pendingCount = $servicesRequest->where('status', 'pending')->count();
                        $pendingProgress =
                            $servicesRequest->count() > 0 ? ($pendingCount / $servicesRequest->count()) * 100 : 0;
                    @endphp
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Pending</span>
                        <span class="text-xs font-medium text-orange-600 dark:text-orange-400">{{ $pendingCount }}</span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-1">
                        <div class="bg-orange-500 h-1.5 rounded-full transition-all duration-300"
                            style="width: {{ $pendingProgress }}%"></div>
                    </div>
                </div>
            </div>

            <!-- Invoices -->
            <div class="bg-white dark:bg-gray-800 rounded-xl p-5 border border-gray-100 dark:border-gray-700/50 shadow-sm">
                <div class="flex items-start justify-between">
                    <div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Invoices</p>
                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $invoice->count() }}</p>
                    </div>
                    <div class="w-10 h-10 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center">
                        <i class="fas fa-file-invoice text-purple-500 dark:text-purple-400"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                    @php
                        $paidInvoices = $invoice->where('status', 'paid')->count();
                        $paidProgress = $invoice->count() > 0 ? ($paidInvoices / $invoice->count()) * 100 : 0;
                    @endphp
                    <div class="flex items-center justify-between">
                        <span class="text-xs text-gray-500 dark:text-gray-400">Paid</span>
                        <span
                            class="text-xs font-medium text-purple-600 dark:text-purple-400">{{ number_format($paidProgress, 0) }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mt-1">
                        <div class="bg-purple-500 h-1.5 rounded-full transition-all duration-300"
                            style="width: {{ $paidProgress }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Recent Activity -->
            <div class="space-y-6">
                <!-- Service Requests -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm">
                    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <h2 class="font-semibold text-gray-900 dark:text-white">Recent Requests</h2>
                            <a href="{{ route('admin.service-requests.index') }}"
                                class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                                View all
                            </a>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse($servicesRequest->sortByDesc('created_at')->take(6) as $request)
                            @php
                                $contactInfo = $request->contact_info ?? [];
                                $statusColors = [
                                    'pending' => 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30',
                                    'in_progress' => 'bg-blue-100 text-blue-800 dark:bg-blue-900/30',
                                    'approved' => 'bg-green-100 text-green-800 dark:bg-green-900/30',
                                    'completed' => 'bg-green-100 text-green-800 dark:bg-green-900/30',
                                    'cancelled' => 'bg-red-100 text-red-800 dark:bg-red-900/30',
                                ];
                            @endphp
                            <div class="px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
                                            <i class="fas fa-file-alt text-blue-500 dark:text-blue-400 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                                {{ $contactInfo['name'] ?? 'Unknown' }}
                                            </p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $request->created_at->format('M j') }} •
                                                {{ number_format($request->total_price, 0) }} SR
                                            </p>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span
                                            class="text-xs px-2 py-1 rounded-full {{ $statusColors[$request->status] ?? 'bg-gray-100 dark:bg-gray-700' }}">
                                            {{ ucfirst(str_replace('_', ' ', $request->status)) }}
                                        </span>
                                        <a href="{{ route('admin.service-requests.show', $request) }}"
                                            class="text-gray-400 hover:text-blue-500 dark:hover:text-blue-400">
                                            <i class="fas fa-chevron-right text-xs"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="px-5 py-8 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-inbox text-2xl mb-2 opacity-50"></i>
                                <p class="text-sm">No requests found</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <!-- Recent Projects -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm">
                    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <h2 class="font-semibold text-gray-900 dark:text-white">Active Projects</h2>
                            <a href="{{ route('admin.Project.allProject.index') }}"
                                class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                                View all
                            </a>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse($project->where('status', 'Active')->sortByDesc('created_at')->take(4) as $projectItem)
                            <div class="px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <div class="mb-2">
                                    <div class="flex items-center justify-between mb-1">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                            {{ $projectItem->name }}
                                        </p>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ number_format($projectItem->amount, 0) }} SR
                                        </p>
                                    </div>
                                    <p class="text-xs text-gray-500 dark:text-gray-400">
                                        {{ $projectItem->user->name ?? 'No client' }}
                                    </p>
                                </div>

                            </div>
                        @empty
                            <div class="px-5 py-8 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-project-diagram text-2xl mb-2 opacity-50"></i>
                                <p class="text-sm">No active projects</p>
                            </div>
                        @endforelse
                    </div>
                </div>


                <div class=" bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h2 class="font-semibold text-gray-900 dark:text-white mb-4">Activity Summary</h2>
                    <div class="space-y-4">
                        <!-- Service Requests by Status -->
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm text-gray-700 dark:text-gray-300">Service Requests Status</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $servicesRequest->count() }} total
                                </p>
                            </div>
                            <div class="flex items-center gap-2">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-yellow-500',
                                        'in_progress' => 'bg-blue-500',
                                        'completed' => 'bg-green-500',
                                        'cancelled' => 'bg-gray-400',
                                    ];
                                    $statusCounts = $servicesRequest->groupBy('status')->map->count();
                                @endphp
                                @foreach (['pending', 'in_progress', 'completed'] as $status)
                                    @if (isset($statusCounts[$status]))
                                        <div class="flex-1">
                                            <div class="h-2 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700">
                                                <div class="h-full {{ $statusColors[$status] }}" style="width: 100%">
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between mt-1">
                                                <span
                                                    class="text-xs text-gray-500 dark:text-gray-400 capitalize">{{ $status }}</span>
                                                <span
                                                    class="text-xs font-medium text-gray-900 dark:text-white">{{ $statusCounts[$status] }}</span>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <!-- Revenue Trend -->
                        <div>
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm text-gray-700 dark:text-gray-300">Monthly Revenue</p>
                                <p class="text-xs font-medium text-green-600 dark:text-green-400">
                                    {{ number_format($monthlyRevenue, 0) }} SR
                                </p>
                            </div>
                            <div class="h-20 flex items-end gap-1">
                                <!-- Simplified bar chart -->
                                @for ($i = 0; $i < 12; $i++)
                                    @php
                                        $height = rand(20, 80);
                                    @endphp
                                    <div class="flex-1 flex flex-col items-center">
                                        <div class="w-full bg-gradient-to-t from-green-500 to-green-400 rounded-t"
                                            style="height: {{ $height }}%"></div>
                                        <span
                                            class="text-xs text-gray-500 dark:text-gray-400 mt-1">{{ date('M', strtotime("-$i month")) }}</span>
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column -->
            <div class="space-y-6">
                <!-- Quick Stats -->
                <div
                    class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm p-5">
                    <h2 class="font-semibold text-gray-900 dark:text-white mb-4">Branch Overview</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="space-y-1">
                            <p class="text-sm text-gray-500 dark:text-gray-400">Blog Posts</p>
                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $blog->count() }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ $blog->where('status', 'published')->count() }} published
                            </p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm text-gray-500 dark:text-gray-400">Messages</p>
                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $contacts->count() }}</p>
                            <p class="text-xs text-red-500 dark:text-red-400">
                                {{ $contacts->where('status', 'new')->count() }} unread
                            </p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm text-gray-500 dark:text-gray-400">Transactions</p>
                            <p class="text-lg font-bold text-gray-900 dark:text-white">{{ $transaction->count() }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ number_format($transaction->sum('amount'), 0) }} SR total
                            </p>
                        </div>
                        <div class="space-y-1">
                            <p class="text-sm text-gray-500 dark:text-gray-400">Completion</p>
                            @php
                                $completedRequests = $servicesRequest->where('status', 'completed')->count();
                                $completionRate =
                                    $servicesRequest->count() > 0
                                        ? ($completedRequests / $servicesRequest->count()) * 100
                                        : 0;
                            @endphp
                            <p class="text-lg font-bold text-gray-900 dark:text-white">
                                {{ number_format($completionRate, 0) }}%</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Request completion</p>
                        </div>
                    </div>
                </div>

                <!-- Recent Invoices -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm">
                    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <h2 class="font-semibold text-gray-900 dark:text-white">Recent Invoices</h2>
                            <a href="{{ route('admin.invoice.index') }}"
                                class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                                View all
                            </a>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse($invoice->sortByDesc('created_at')->take(5) as $payment)
                            <div class="px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="w-8 h-8 rounded-lg {{ $payment->status == 'paid' ? 'bg-green-50 dark:bg-green-900/20' : 'bg-gray-50 dark:bg-gray-700' }} 
                                                flex items-center justify-center">
                                            <i
                                                class="fas fa-file-invoice {{ $payment->status == 'paid' ? 'text-green-500 dark:text-green-400' : 'text-gray-500 dark:text-gray-400' }} text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                                #{{ $payment->invoice_number ?? $payment->id }}
                                            </p>
                                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                                {{ $payment->user->name ?? 'N/A' }}
                                            </p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ number_format($payment->amount, 0) }} SR
                                        </p>
                                        <p
                                            class="text-xs {{ $payment->status == 'paid' ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400' }}">
                                            {{ ucfirst($payment->status) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="px-5 py-8 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-file-invoice text-2xl mb-2 opacity-50"></i>
                                <p class="text-sm">No invoices found</p>
                            </div>
                        @endforelse
                    </div>
                </div>

                <!-- Recent Messages -->
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700/50 shadow-sm">
                    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <h2 class="font-semibold text-gray-900 dark:text-white">Recent Messages</h2>
                            <a href="{{ route('admin.contacts.index') }}"
                                class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                                View all
                            </a>
                        </div>
                    </div>
                    <div class="divide-y divide-gray-100 dark:divide-gray-700">
                        @forelse($contacts->where('status', 'new')->sortByDesc('created_at')->take(3) as $contact)
                            <div class="px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-sm">
                                        {{ strtoupper(substr($contact->name, 0, 1)) }}
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center justify-between">
                                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                                {{ $contact->name }}
                                            </p>
                                            <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                                        </div>
                                        <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                            {{ Str::limit($contact->message, 50) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="px-5 py-8 text-center text-gray-500 dark:text-gray-400">
                                <i class="fas fa-envelope text-2xl mb-2 opacity-50"></i>
                                <p class="text-sm">No new messages</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>


    </div>

    <style>
        .dark .bg-gray-700 {
            background-color: rgba(55, 65, 81, 0.5);
        }
    </style>

    <script>
        // Animate progress bars on load
        document.addEventListener('DOMContentLoaded', function() {
            const progressBars = document.querySelectorAll('.h-1\\.5 > div');
            progressBars.forEach(bar => {
                const width = bar.style.width;
                bar.style.width = '0';
                setTimeout(() => {
                    bar.style.width = width;
                }, 100);
            });
        });
    </script>
@endsection