@extends('layouts.layout')
@section('content')
<main class="flex-1
                 min-w-0">


        <!-- TOPBAR -->

        <header class="h-20
                       bg-white
                       border-b
                       border-gray-200
                       px-5
                       lg:px-8
                       flex
                       items-center
                       justify-between">


            <div class="flex
                        items-center
                        gap-4">


                <!-- Mobile Menu -->

                <button onclick="toggleSidebar()"
                        class="lg:hidden
                               p-2
                               rounded-lg
                               bg-gray-100">


                    <svg class="w-6
                                h-6"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">


                        <path stroke-linecap="round"
                              stroke-linejoin="round"
                              stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"/>

                    </svg>

                </button>


                <div>

                    <h2 class="text-xl
                               sm:text-2xl
                               font-bold
                               text-gray-900">

                         <span class="capitalize">{{$users->role}}</span> Dashboard

                    </h2>


                    <p class="text-sm
                              text-gray-500
                              hidden sm:block">

                        Welcome back,
   

                    </p>

                </div>

            </div>


            <!-- System Status -->
             

            <div class="flex
                        items-center
                        gap-2
                        text-sm
                        text-gray-600">
                                    <!-- Card 1: Total Balance -->

                <button class="group flex items-center  px-5 py-3.5 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-green-700 hover:border-white/40 rounded-xl text-green-600 font-medium shadow-lg hover:shadow-xl transition-all duration-300 active:scale-95 cursor-pointer">
                    
 
                    <span class="text-lg font-bold opacity-70 group-hover:opacity-100 transition-all duration-300">
    ৳
</span>
                    
                    <span class="text-lg font-bold ml-1 opacity-70 group-hover:opacity-100 transition-all duration-300"> 500</span>

                    <!-- Plus Icon at the end -->

                </button>
                <div class="p-3 bg-white/20 rounded-lg text-green">
                </div>
          


                <span class="w-2
                             h-2
                             bg-green-500
                             rounded-full
                             animate-pulse">

                </span>
                


                <span class="hidden sm:block">

                    System Online

                </span>

            </div>

        </header>


        <!-- CONTENT -->

        <div class="p-5
                    lg:p-8">


            <!-- Welcome Banner -->

            <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 p-6 lg:p-8 text-white mb-8 shadow-xl">

    <div class="relative z-10">
        
        <!-- Balance & Stats Cards -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-2">
            
            <!-- Card 1: Total Balance -->
            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-4 flex items-center justify-between shadow-sm hover:bg-white/15 transition">
                <div>
                    <p class="text-xs uppercase tracking-wider text-indigo-200 font-semibold">মোট ব্যালেন্স</p>
                    <h3 class="text-2xl font-bold text-white mt-1">
                        ৳ {{ number_format($totalBalance ?? 0, 0) }}
                    </h3>
                </div>
                <a href="{{route('recharge.index')}}">

                <button class="group flex items-center gap-3 px-5 py-3.5 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/20 hover:border-white/40 rounded-xl text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300 active:scale-95 cursor-pointer">
                    
                    <!-- Wallet Icon with subtle animation on hover -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-white/90 group-hover:scale-110 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                    </svg>
                    
                    <span>Add Balance</span>

                    <!-- Plus Icon at the end -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-auto opacity-70 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4" />
                    </svg>
                </button>

                <!-- <button class="flex items-center gap-3 px-6 py-3.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-indigo-500/25 transition-all duration-300 active:scale-95 cursor-pointer">
    
               
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                    </svg>
                    
                    <span>Add Balance</span>
                </button> -->
                </a>
            </div>

            <!-- Card 2: Total Revenue -->
            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-4 flex items-center justify-between shadow-sm hover:bg-white/15 transition">
                <div>
                    <p class="text-xs uppercase tracking-wider text-indigo-200 font-semibold">মোট আয়</p>
                    <h3 class="text-2xl font-bold text-white mt-1">
                        ৳ {{ number_format($totalRevenue ?? 0, 0) }}
                    </h3>
                </div>
                <div class="p-3 bg-white/20 rounded-lg text-white">
                    <!-- Money Bag Icon -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <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>

            <!-- Card 3: Pending Requests -->
            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-xl p-4 flex items-center justify-between shadow-sm hover:bg-white/15 transition sm:col-span-2 lg:col-span-1">
                <div>
                    <p class="text-xs uppercase tracking-wider text-indigo-200 font-semibold">পেন্ডিং রিকোয়েস্ট</p>
                    <h3 class="text-2xl font-bold text-white mt-1">
                        {{ $pendingRequestsCount ?? 0 }} টি
                    </h3>
                </div>
                <div class="p-3 bg-white/20 rounded-lg text-white">
                    <!-- Clock Icon -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
            </div>

        </div>

    </div>

    <!-- Background Decorative Circles -->
    <div class="absolute -right-10 -top-20 w-64 h-64 rounded-full bg-white/10 blur-xl pointer-events-none"></div>
    <div class="absolute -right-5 -bottom-32 w-72 h-72 rounded-full bg-white/10 blur-xl pointer-events-none"></div>

</div>


            <!-- STAT CARDS -->

            <div class="grid
                        sm:grid-cols-2
                        xl:grid-cols-5
                        gap-5
                        mb-8">


                <!-- Total -->

                <div class="bg-white
                            rounded-2xl
                            p-5
                            shadow-sm
                            border
                            border-gray-100">


                    <div class="flex
                                items-center
                                justify-between">


                        <div class="w-12
                                    h-12
                                    rounded-xl
                                    bg-indigo-100
                                    text-indigo-600
                                    flex
                                    items-center
                                    justify-center">


                            <svg class="w-6
                                        h-6"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24">


                                <path stroke-linecap="round"
                                      stroke-linejoin="round"
                                      stroke-width="2"
                                      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>


                    <p class="text-sm
                              text-gray-500
                              mt-4">

                        Total Requests

                    </p>


                    <h3 class="text-3xl
                               font-extrabold
                               text-gray-900
                               mt-1">

                  

                    </h3>

                </div>


                <!-- Today -->

                <div class="bg-white
                            rounded-2xl
                            p-5
                            shadow-sm
                            border
                            border-gray-100">


                    <div class="w-12
                                h-12
                                rounded-xl
                                bg-blue-100
                                text-blue-600
                                flex
                                items-center
                                justify-center">


                        <svg class="w-6
                                    h-6"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">


                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M8 7V3m8 4V3m-9 8h10M5
                                  21h14a2 2 0 002-2V7a2
                                  2 0 00-2-2H5a2 2
                                  0 00-2 2v12a2 2
                                  0 002 2z"/>

                        </svg>

                    </div>


                    <p class="text-sm
                              text-gray-500
                              mt-4">

                        Today's Requests

                    </p>


                    <h3 class="text-3xl
                               font-extrabold
                               text-gray-900
                               mt-1">


                    </h3>

                </div>


                <!-- Pending -->

                <div class="bg-white
                            rounded-2xl
                            p-5
                            shadow-sm
                            border
                            border-gray-100">


                    <div class="w-12
                                h-12
                                rounded-xl
                                bg-yellow-100
                                text-yellow-600
                                flex
                                items-center
                                justify-center">


                        <svg class="w-6
                                    h-6"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">


                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M12 8v4l3 3m6-3a9 9
                                  0 11-18 0 9 9
                                  0 0118 0z"/>

                        </svg>

                    </div>


                    <p class="text-sm
                              text-gray-500
                              mt-4">

                        Pending Payment

                    </p>


                    <h3 class="text-3xl
                               font-extrabold
                               text-gray-900
                               mt-1">

                 

                    </h3>

                </div>


                <!-- Paid -->

                <div class="bg-white
                            rounded-2xl
                            p-5
                            shadow-sm
                            border
                            border-gray-100">


                    <div class="w-12
                                h-12
                                rounded-xl
                                bg-green-100
                                text-green-600
                                flex
                                items-center
                                justify-center">


                        <svg class="w-6
                                    h-6"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">


                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M5 13l4 4L19 7"/>

                        </svg>

                    </div>


                    <p class="text-sm
                              text-gray-500
                              mt-4">

                        Paid Requests

                    </p>


                    <h3 class="text-3xl
                               font-extrabold
                               text-gray-900
                               mt-1">

                 

                    </h3>

                </div>


                <!-- Approved -->

                <div class="bg-white
                            rounded-2xl
                            p-5
                            shadow-sm
                            border
                            border-gray-100">


                    <div class="w-12
                                h-12
                                rounded-xl
                                bg-purple-100
                                text-purple-600
                                flex
                                items-center
                                justify-center">


                        <svg class="w-6
                                    h-6"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24">


                            <path stroke-linecap="round"
                                  stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M9 12l2 2 4-4m5.618-4.016A11.955
                                  11.955 0 0112 2.944a11.955
                                  11.955 0 01-8.618 3.04A12.02
                                  12.02 0 003 9c0 5.591
                                  3.824 10.29 9 11.622C17.176
                                  19.29 21 14.591 21 9c0-1.042
                                 -.133-2.052-.382-3.016z"/>

                        </svg>

                    </div>


                    <p class="text-sm
                              text-gray-500
                              mt-4">

                        Approved

                    </p>


                    <h3 class="text-3xl
                               font-extrabold
                               text-gray-900
                               mt-1">

                 

                    </h3>

                </div>

            </div>


            <!-- RECENT REQUESTS -->

            <div class="bg-white
                        rounded-2xl
                        shadow-sm
                        border
                        border-gray-100
                        overflow-hidden">


                <!-- Header -->

                <div class="p-5
                            lg:p-6
                            border-b
                            border-gray-100
                            flex
                            items-center
                            justify-between">


                    <div>

                        <h2 class="text-lg
                                   font-bold
                                   text-gray-900">

                            Recent Verification Requests

                        </h2>


                        <p class="text-sm
                                  text-gray-500
                                  mt-1">

                            Latest submitted requests

                        </p>

                    </div>


                    <a href="requests.php"
                       class="text-sm
                              font-semibold
                              text-indigo-600
                              hover:text-indigo-800">

                        View All

                    </a>

                </div>


                <!-- Table -->

                <div class="overflow-x-auto">


                    <table class="w-full
                                  min-w-[800px]">


                        <thead class="bg-gray-50">


                            <tr>


                                <th class="text-left
                                           px-6
                                           py-4
                                           text-xs
                                           font-semibold
                                           text-gray-500
                                           uppercase">

                                    ID

                                </th>


                                <th class="text-left
                                           px-6
                                           py-4
                                           text-xs
                                           font-semibold
                                           text-gray-500
                                           uppercase">

                                    NID Number

                                </th>


                                <th class="text-left
                                           px-6
                                           py-4
                                           text-xs
                                           font-semibold
                                           text-gray-500
                                           uppercase">

                                    WhatsApp

                                </th>


                                <th class="text-left
                                           px-6
                                           py-4
                                           text-xs
                                           font-semibold
                                           text-gray-500
                                           uppercase">

                                    Payment

                                </th>


                                <th class="text-left
                                           px-6
                                           py-4
                                           text-xs
                                           font-semibold
                                           text-gray-500
                                           uppercase">

                                    Verification

                                </th>


                                <th class="text-left
                                           px-6
                                           py-4
                                           text-xs
                                           font-semibold
                                           text-gray-500
                                           uppercase">

                                    Date

                                </th>

                            </tr>

                        </thead>


                        <tbody class="divide-y
                                     divide-gray-100">


                       


                                <tr>

                                    <td colspan="6"
                                        class="px-6
                                               py-12
                                               text-center
                                               text-gray-500">


                                        No verification requests found.

                                    </td>

                                </tr>


           


                                    <tr class="hover:bg-gray-50">


                                        <td class="px-6
                                                   py-4
                                                   text-sm
                                                   font-semibold
                                                   text-gray-900">


                  

                                        </td>


                                        <td class="px-6
                                                   py-4
                                                   text-sm
                                                   text-gray-700">


                            
                                       

                                        </td>


                                        <td class="px-6
                                                   py-4
                                                   text-sm
                                                   text-gray-700">


                         
                                        </td>


                                        <td class="px-6
                                                   py-4">


            


                                                <span class="inline-flex
                                                             px-3
                                                             py-1
                                                             rounded-full
                                                             text-xs
                                                             font-semibold
                                                             bg-green-100
                                                             text-green-700">


                                                    Paid

                                                </span>


                                   


                                                <span class="inline-flex
                                                             px-3
                                                             py-1
                                                             rounded-full
                                                             text-xs
                                                             font-semibold
                                                             bg-yellow-100
                                                             text-yellow-700">


                                                    Pending

                                                </span>


                                 


                                        </td>


                                        <td class="px-6
                                                   py-4">


       

                                                <span class="inline-flex
                                                             px-3
                                                             py-1
                                                             rounded-full
                                                             text-xs
                                                             font-semibold
                                                             bg-green-100
                                                             text-green-700">

                                                    Approved

                                                </span>


                           

                                                <span class="inline-flex
                                                             px-3
                                                             py-1
                                                             rounded-full
                                                             text-xs
                                                             font-semibold
                                                             bg-red-100
                                                             text-red-700">

                                                    Rejected

                                                </span>


                                 


                                                <span class="inline-flex
                                                             px-3
                                                             py-1
                                                             rounded-full
                                                             text-xs
                                                             font-semibold
                                                             bg-gray-100
                                                             text-gray-700">

                                                    Pending

                                                </span>


                               


                                        </td>


                                        <td class="px-6
                                                   py-4
                                                   text-sm
                                                   text-gray-500">


                  

                                        </td>

                                    </tr>


             


                        </tbody>

                    </table>

                </div>

            </div>


        </div>

    </main>
    @endsection