@extends('layouts.dashboard')

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

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

@section('content')
<div class="container mx-auto px-6 py-8 bg-gray-50 min-h-screen">

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-10">
        @php
        $stats = [
        ['label' => 'Total Visitors', 'value' => $dashboardStats['total_visitors'], 'icon' => '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 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z', 'color' => 'text-red-600'],
        ['label' => 'Total Revenue By Visitors', 'value' => '₹' . number_format($dashboardStats['total_revenue']), 'icon' => 'M12 8c-1.657 0-3 1.343-3 3s1.343 3 3 3 3-1.343 3-3-1.343-3-3-3z M2 17V7a2 2 0 012-2h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2z', 'color' => 'text-green-600'],
        ['label' => 'Current Month Visitors', 'value' => $dashboardStats['current_month_visitrs'], 'icon' => 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1', 'color' => 'text-gray-700'],
        ['label' => 'Total Revenue By Members', 'value' => '₹' . number_format($dashboardStats['total_revenue_by_members']), 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', 'color' => 'text-blue-600'],
        ['label' => 'Current Month Members Revenue', 'value' => '₹' . number_format($dashboardStats['current_month_revenue_by_members']), 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', 'color' => 'text-blue-600'],
        ['label' => 'Paid (Member)', 'value' => $dashboardStats['paid_by_member'], 'icon' => 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z', 'color' => 'text-blue-600'],
        ['label' => 'Paid (Visitor)', 'value' => $dashboardStats['paid_by_visitor'], 'icon' => 'M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z', 'color' => 'text-amber-600'],
        ];
        @endphp

        @foreach($stats as $stat)
        <div class="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow p-5 border border-gray-100 relative overflow-hidden">
            <div class="flex flex-col">
                <p class="text-xs font-bold text-gray-400 uppercase tracking-wider">{{ $stat['label'] }}</p>
                <p class="text-2xl font-extrabold text-gray-800 mt-1">{{ $stat['value'] }}</p>
            </div>
            <div class="absolute right-4 bottom-4 opacity-10">
                <svg class="w-12 h-12 {{ $stat['color'] }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $stat['icon'] }}"></path>
                </svg>
            </div>
        </div>
        @endforeach
    </div>

    <div class="mb-12">
        <div class="relative rounded-2xl overflow-hidden bg-[#A02128] shadow-2xl p-1 bg-gradient-to-br from-[#A02128] to-[#6b1418]">
            <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,...');"></div>
            <div class="relative px-8 py-10 flex flex-col md:flex-row items-center justify-between text-white">
                <div class="text-center md:text-left mb-6 md:mb-0">
                    <span class="inline-block bg-white/20 backdrop-blur-md px-4 py-1 rounded-full text-xs font-bold tracking-widest mb-4 border border-white/30">
                        🏆 TOP PERFORMER OF THE MONTH
                    </span>
                    @if($topReferrersCurrent)
                    <h2 class="text-5xl font-black mb-2 tracking-tight">{{ $topReferrersCurrent->name }}</h2>
                    <p class="text-xl font-light text-red-100 italic">{{ $topReferrersCurrent->company ?? 'Company Not Listed' }}</p>

                    <div class="mt-6 flex flex-wrap gap-4 text-sm font-medium">
                        <span class="flex items-center bg-black/10 px-3 py-1.5 rounded-lg border border-white/10">📞 {{ $topReferrersCurrent->phone ?? 'N/A' }}</span>
                        <span class="flex items-center bg-black/10 px-3 py-1.5 rounded-lg border border-white/10">📧 {{ $topReferrersCurrent->email ?? 'N/A' }}</span>
                    </div>
                    @else
                    <p class="text-2xl opacity-80">Calculating this month's results...</p>
                    @endif
                </div>

                @if($topReferrersCurrent)
                <div class="bg-white/10 backdrop-blur-xl border border-white/20 p-8 rounded-2xl text-center min-w-[220px]">
                    <!-- <p class="text-xs font-bold uppercase tracking-widest text-red-100 mb-1">Impact Score</p> -->
                    <div class="text-7xl font-black">{{ $topReferrersCurrent->referred_visitors_count ?? 0 }}</div>
                    <p class="text-sm font-medium mt-2">Visitors</p>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
        <!-- <div class="lg:col-span-1 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <h3 class="font-bold text-gray-800 mb-6 flex items-center">
                <svg class="w-5 h-5 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                Revenue Status
            </h3>
            <div class="space-y-4">
                <div class="flex items-center justify-between p-3 bg-green-50 rounded-xl border border-green-100">
                    <span class="text-sm font-semibold text-green-700">Paid Settlements</span>
                    <span class="text-xl font-bold text-green-800">{{ $visitorStats['paid'] }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-amber-50 rounded-xl border border-amber-100">
                    <span class="text-sm font-semibold text-amber-700">Pending Dues</span>
                    <span class="text-xl font-bold text-amber-800">{{ $visitorStats['pending'] }}</span>
                </div>
                <div class="flex items-center justify-between p-3 bg-red-50 rounded-xl border border-red-100">
                    <span class="text-sm font-semibold text-red-700">Failed / Rejected</span>
                    <span class="text-xl font-bold text-red-800">{{ $visitorStats['failed'] }}</span>
                </div>
            </div>
        </div> -->


        <div class="lg:col-span-1 bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
            <h3 class="font-bold text-gray-800 mb-6">Upcoming Chapter Meetings</h3>
            <div class="space-y-4">
                @forelse($upcomingMeetings as $meeting)
                <div class="relative pl-6 border-l-2 border-red-500 py-1">
                    <p class="text-sm font-bold text-gray-800">{{ \Carbon\Carbon::parse($meeting->meeting_date)->format('D, d M Y') }}</p>
                    <!-- <p class="text-xs text-gray-500">{{ \Carbon\Carbon::parse($meeting->meeting_date)->format('h:i A') }} • Main Chapter Hall</p> -->
                </div>
                @empty
                <p class="text-center text-gray-400 py-10">No upcoming meetings scheduled.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-bold text-gray-800">Recent Visitor Activity</h3>
            <!-- <button class="text-xs font-bold text-red-600 hover:text-red-800 uppercase tracking-widest">View Full Report</button> -->
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50/50">
                        <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">Visitor</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">Invited By</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">Amount</th>
                        <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase tracking-widest">Status</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @foreach($recentVisitors as $visitor)
                    <tr class="hover:bg-gray-50/50 transition-colors">
                        <td class="px-6 py-2">
                            <div class="font-bold text-gray-800">{{ $visitor->name }}</div>
                            <div class="text-xs text-gray-400">{{ $visitor->company ?? '-' }}</div>
                        </td>
                        <td class="px-6 py-4 text-sm font-medium text-gray-600">
                            {{ $visitor->referredBy->name ?? 'Direct' }}
                        </td>
                        <td class="px-6 py-2 text-sm font-black text-gray-800">₹{{ number_format($visitor->amount ?? 0) }}</td>
                        <td class="px-6 py-2">
                            @php
                            $statusClasses = [
                            'paid' => 'bg-green-100 text-green-700',
                            'pending' => 'bg-amber-100 text-amber-700',
                            'failed' => 'bg-red-100 text-red-700',
                            ][$visitor->status] ?? 'bg-gray-100 text-gray-700';
                            @endphp
                            <span class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest {{ $statusClasses }}">
                                {{ $visitor->status }}
                            </span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </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