@extends('layouts.base')

@push('css')
<style>
    .bb{
        position: absolute;
        /* bottom: -34px; */
        margin-top: 0;
        flex-direction: row;
        justify-content: center;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        overflow: visible;
    }
</style>
@endpush
@section('content')

<div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Dashboard Card -->
            <div class="lg:col-span-2">
                <div class="bg-gradient-to-r from-sky-500 to-sky-800 rounded-t-2xl p-6 text-white relative">
    <div class="container mx-auto px-4 py-8 md:py-12 text-white relative z-10">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
            <!-- User Greeting -->
            <div class="mb-8 md:mb-0">
                <h1 class="text-3xl md:text-4xl font-bold mb-2">Hi, {{ ucfirst($user->full_name) }}</h1>
                <p class="text-lg md:text-xl opacity-90">
                    Welcome to {{ __system_settings('site_name') }}.
                </p>
            </div>

            <!-- Subscription / CTA Button -->
            <div>
                @if($subscription_active ?? false)
                    <span class="bg-white text-cyan-700 px-6 py-3 rounded-2xl font-semibold">
                        Active Subscription
                    </span>
                @else
                    <a href="{{ route('user.subscription.index') }}" class=" text-gray-700 px-6 py-3 rounded-2xl font-semibold  transition bg-[#00B3B3] hover:bg-[#003366]">
                        Subscribe Now
                    </a>
                @endif
            </div>
        </div>

        <!-- Action Cards -->
        <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-6 bb">
            <!-- Browse Celebrities -->
            <a href="{{ secure_url('celebrities') }}" class="bg-white text-gray-800 rounded-2xl p-2 flex  items-center text-center hover:shadow-lg transition">
                <img src="{{secure_url('public/img/user/bai-dashboard-events.png')}}" alt="Browse Celebrities" class="w-16 h-16 mb-4">
                <div>
                    <h3 class="font-semibold text-sm mb-1">Browse Celebrities</h3>
                   <p class="text-gray-600 text-xs">Explore our celebrity listings.</p>
                </div>
                
            </a>

            <!-- Submit Info Request -->
            <a href="{{ secure_url('info-request') }}" class="bg-white text-gray-800 rounded-2xl p-2 flex  items-center text-center hover:shadow-lg transition">
                <img src="{{secure_url('public/img/user/bai-dashboard-activities-submit-info.png')}}" alt="Submit Info Request" class="w-16 h-16 mb-4">
                <div>
                    <h3 class="font-semibold text-sm mb-1">Submit Info Request</h3>
                   <p class="text-gray-600 text-xs">Send us your inquiries easily.</p>
                </div>
                
            </a>

            <!-- Contact Us -->
            <a href="{{ secure_url('contact') }}" class="bg-white text-gray-800 rounded-2xl p-2 flex items-center text-center hover:shadow-lg transition">
                <img src="{{secure_url('public/img/user/bai-dashboard-activities-contact-template.png')}}" alt="Contact Us" class="w-16 h-16 mb-4">
                <div>
                <h3 class="font-semibold text-sm mb-1">Contact Us</h3>
                <p class="text-gray-600 text-xs">Get in touch with our team.</p>
               </div>
            </a>
        </div>
    </div>

    <!-- SVG Wave at bottom -->
    <svg class="absolute bottom-0 left-0 w-full h-20 text-white" preserveAspectRatio="none" viewBox="0 0 1440 320">
        <path fill="currentColor" fill-opacity="0.3" d="M0,96L48,122.7C96,149,192,203,288,213.3C384,224,480,192,576,160C672,128,768,96,864,101.3C960,107,1056,149,1152,181.3C1248,213,1344,235,1392,245.3L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
    </svg>
</div>
            </div>

            <!-- Usage Analytics Sidebar -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-md p-6">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-sm font-bold text-gray-800">Usage Analytics</h2>
                        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>

                    <!-- Total Fan Cards -->
                    <div class="mb-6">
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-600 font-medium">Total Fan Cards</p>
                                <p class="text-sm font-bold text-gray-800">{{$follower_counts}}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Total Request -->
                    <div>
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="w-10 h-10 rounded-full bg-yellow-400 flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                </svg>
                            </div>
                            <div>
                                <p class="text-xs text-gray-600 font-medium">Total Request</p>
                                <p class="text-sm font-bold text-gray-800">{{$requests_counts}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<!-- Alpine.js -->
<script src="//unpkg.com/alpinejs" defer></script>
@endpush