<!Doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="msapplication-TileColor" content="#07030c">
    <meta name="theme-color" content="#07030c">
    <title> {{ $page_title }} | {{ site('name') }}</title>

    <link rel="shortcut icon" href="{{ asset('assets/images/' . site('favicon')) }}" type="image/x-icon">
    <link rel="apple-touch-icon" href="{{ asset('assets/images/' . site('favicon')) }}" type="image/x-icon">

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <meta name="google-adsense-account" content="ca-pub-2451537563071235">
    
    
    


    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.min.css">

    <link rel="stylesheet" href="{{ asset('/assets/templates/pandel/css/output.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/templates/pandel/css/styles.css') }}">
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

  <!-- PWA Meta -->
  <link rel="manifest" href="{{ asset('manifest.json') }}" />
  <meta name="theme-color" content="#000000" />
  <link rel="apple-touch-icon" href="{{ asset('favicon.png') }}">

  <!-- Register Service Worker -->
  
  <script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register("{{ url('service-worker.js') }}")
        .then(function(registration) {
          console.log('Service Worker registered with scope:', registration.scope);
        })
        .catch(function(error) {
          console.log('Service Worker registration failed:', error);
        });
    });
  }
</script>

<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace();
</script>


<!-- Enable Dark Mode using class strategy -->
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
          extend: {
            colors: {
              darkbg: '#000000',
            },
          },
        },
      }
    </script>

    

    <style>
        .button-spinner {
            border: 4px solid #60A4F6;
            /* Light grey background */
            border-top: 4px solid #A320D8;
            /* Blue color for the spinner */
            border-radius: 50%;
            width: 25px;
            height: 25px;
            animation: spin 1s linear infinite;
            /* Spinning animation */
            top: 3;
            left: 3;
            position: absolute;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .not-allowed-cursor {
            cursor: not-allowed;
        }

        .disabled-button {
            background-color: #6b6b6b !important;
            cursor: not-allowed !important;
            color: #fff !important;
            font-weight: bold;
            pointer-events: none !important;
        }
    </style>

    <style>
        /* Hide number input arrows */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Hide number input arrows in Firefox */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        /* Sidebar Base Styles */
        .custom-sidebar {
            position: fixed;
            top: 75px;
            right: 10px;
            /* Visible by default */
            width: 200px;
            height: 200px;
            background: rgba(45, 48, 57, 0.7);
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            transition: right 0.3s ease-in-out;
            z-index: 9999;
        }

        /* Sidebar List Styling */
        .custom-sidebar ul {
            padding: 20px;
            list-style: none;
        }

        .custom-sidebar ul li {
            margin-bottom: 12px;
        }

        .custom-sidebar ul li a {
            display: flex;
            align-items: center;
            color: white;
            text-decoration: none;
            gap: 8px;
            font-size: 14px;
        }

        .custom-sidebar ul li a:hover {
            color: #FFD700;
        }

        /* Logout Button */
        .custom-sidebar .logout-container {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: #dc2626;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            text-align: center;
            padding: 10px;
        }

        .custom-sidebar .logout-container a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            text-decoration: none;
            gap: 8px;
        }

        .custom-sidebar .logout-container a:hover {
            opacity: 0.8;
        }

        .logoutBtn {
            background-color: red;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .logoutBtn:hover {
            background-color: darkred;
        }
    </style>

    @yield('css')

</head>


<!--<body class="bg-black text-gray-300">-->
    <body class="bg-white dark:bg-black text-gray-300 dark:text-white min-h-screen flex flex-col">

    {{-- preloader --}}
  
    @if (site('preloader') == 1)
        @include('templates.' . site('template') . '.loaders.preloader')
    @endif
    
    
    
      <div id="installPopup" class="fixed bottom-4 left-4 right-4 mx-auto max-w-sm bg-white dark:bg-black shadow-lg rounded-lg p-4 border border-gray-200 dark:border-gray-700 flex items-center justify-between z-50 hidden">
  <div>
    <p class="text-base font-semibold mb-1">Install this App</p>
    <p class="text-sm text-gray-500">Get a better experience by installing this app.</p>
  </div>
  <div class="flex flex-col gap-2 ml-4">
    <button id="installButton" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded">
      Install
    </button>
    <button id="dismissButton" class="text-xs text-gray-500 hover:text-gray-700">
      Dismiss
    </button>
  </div>
</div>
    


    <div x-data="{ isSidebarOpen: false, isCollapsed: false }">
        <!-- Mobile Nav Bar -->
   
            <div class="lg:hidden flex items-center justify-between p-4 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-700">

            <div class="flex items-center">
                <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo" class="w-32" />
            </div>

            <div class="flex">
                <div id="theme-toggle-m" class="cursor-pointer p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <i data-feather="moon" class="dark:hidden"></i>
            <i data-feather="sun" class="hidden dark:inline"></i>
        </div>
                <div>
                    <!-- Profile Button mobile and tablet -->
                    <button
                        class="sideDdropdownBtn rounded-full bg-gray-800 p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 mr-1">
                        <img src="{{ asset('storage/profile/' . user()->photo) }}" alt="Profile Icon"
                            class="h-8 w-8 rounded-full" /></button>
                </div>

                <button @click="isSidebarOpen = !isSidebarOpen" class="text-gray-300">
                    <!-- Hamburger to X Transition -->
                    <svg x-show="!isSidebarOpen" xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6 transition-transform duration-300" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                    <svg x-show="isSidebarOpen" xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6 transition-transform duration-300" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>

        <!-- Desktop Top Navigation -->
        
        <div class="hidden lg:flex items-center justify-end fixed top-0 right-0 left-0 bg-white dark:bg-black border-b border-gray-200 dark:border-gray-700 py-4 px-6 z-10">
  
            <div class="flex items-center justify-end h-16 px-6 relative">
                <div id="theme-toggle" class="cursor-pointer p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
            <i data-feather="moon" class="dark:hidden"></i>
            <i data-feather="sun" class="hidden dark:inline"></i>
        </div>
                <!-- Profile Icon with Dropdown -->
                <div class="flex items-center">
                    <div class="relative">
                        <!-- Profile Button Desktop -->
                        <button
                            class="sideDdropdownBtn rounded-full bg-gray-800 p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            <img src="{{ asset('storage/profile/' . user()->photo) }}" alt="Profile Icon"
                                class="h-8 w-8 rounded-full" /></button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="fixed top-0 left-0 h-full bg-white dark:bg-black border-r border-gray-200 dark:border-gray-700 z-20 transform transition-all duration-300" :class="{
      'translate-x-0 lg:translate-x-0': isSidebarOpen,
      '-translate-x-full lg:translate-x-0': !isSidebarOpen,
      'w-64': !isCollapsed,
      'w-20': isCollapsed
    }">
            <!-- Logo Section -->
            <div class="flex items-center p-4 justify-between">
                <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo" class="w-40"
                    :class="{ 'hidden': isCollapsed }" />
                <!-- Toggle Collapse Button (Desktop Only) -->
                <button @click="isCollapsed = !isCollapsed" class="hidden lg:block text-gray-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transition-transform duration-300"
                        fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="{ 'rotate-180': isCollapsed }">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                    </svg>
                </button>
            </div>

            <!-- Navigation Links -->
            <nav class="">
                <div class="space-y-2" x-data="{
                    selectedDropdown: null,
                    items: [{
                            name: 'Dashboard',
                            icon: '{{ asset('assets/templates/pandel/images/dashboardIcon.png') }}',
                            @if (request()->routeIs('user.dashboard')) active: true, @endif
                            hasDropdown: false,
                            link: '{{ route('user.dashboard') }}'
                        },
                        {
                            name: 'Cards',
                            icon: '{{ asset('assets/images/card.png') }}',
                            @if (request()->routeIs('user.cards')) active: true, @endif
                            hasDropdown: false,
                            link: '{{ route('user.cards') }}'
                        },
                        {
                            name: 'Mining',
                            icon: '{{ asset('assets/templates/pandel/images/botsIcon.png') }}',
                            @if (request()->routeIs('user.mining')) active: true, @endif
                            hasDropdown: false,
                            link: '{{ route('user.mining') }}'
                        },
                        {
                            name: 'Deposit',
                            icon: '{{ asset('assets/templates/pandel/images/depositIcon.png') }}',
                            @if (request()->routeIs('user.deposits.*')) active: true, @endif
                            hasDropdown: true,
                            dropdown: [
                                { name: 'Deposit History', link: '{{ route('user.deposits.index', ['target' => 'history']) }}' },
                                { name: 'New Deposit', link: '{{ route('user.deposits.index', ['target' => 'deposit']) }}' }
                            ]
                        },
                        {
                            name: 'AI Bots',
                            icon: '{{ asset('assets/templates/pandel/images/botsIcon.png') }}',
                            @if (request()->routeIs('user.bots.*')) active: true, @endif
                            hasDropdown: true,
                            dropdown: [
                                { name: 'My AI Bots', link: '{{ route('user.bots.index', ['target' => 'bots']) }}' },
                                { name: 'Activate AI Bot', link: '{{ route('user.bots.index', ['target' => 'activate']) }}' },
                                { name: 'AI Trading History', link: '{{ route('user.bots.index', ['target' => 'history']) }}' },
                                { name: 'Daily Summary', link: '{{ route('user.bots.index', ['target' => 'summary']) }}' }
                            ]
                        },
                        {
                            name: 'Withdraw',
                            icon: '{{ asset('assets/templates/pandel/images/withdrawIcon.png') }}',
                            @if (request()->routeIs('user.withdrawals.*')) active: true, @endif
                            hasDropdown: true,
                            dropdown: [
                                { name: 'Withdrawal History', link: '{{ route('user.withdrawals.index', ['target' => 'history']) }}' },
                                { name: 'New Withdrawal', link: '{{ route('user.withdrawals.index', ['target' => 'withdraw']) }}' },
                                { name: 'Withdrawal Wallets', link: '{{ route('user.withdrawals.index', ['target' => 'wallets']) }}' }
                            ]
                        },
                        {
                            name: 'P2P',
                            icon: '{{ asset('assets/templates/pandel/images/p2pIcon.png') }}',
                            @if (request()->routeIs('user.transfers.*')) active: true, @endif
                            hasDropdown: true,
                            dropdown: [
                                { name: 'P2P History', link: '{{ route('user.transfers.index', ['target' => 'history']) }}' },
                                { name: 'New P2P', link: '{{ route('user.transfers.index', ['target' => 'p2p']) }}' }
                            ]
                        },
                        {
                            name: 'My Referrals',
                            icon: '{{ asset('assets/templates/pandel/images/referralsIcon.png') }}',
                            @if (request()->routeIs('user.referrals')) active: true, @endif
                            hasDropdown: false,
                            link: '{{ route('user.referrals') }}'
                        },
                        {
                            name: 'My Transactions',
                            icon: '{{ asset('assets/templates/pandel/images/transactionsIcon.png') }}',
                            @if (request()->routeIs('user.transactions.index')) active: true, @endif
                            hasDropdown: false,
                            link: '{{ route('user.transactions.index') }}'
                        }
                    ]
                }">
                    <template x-for="(item, index) in items" :key="index">
                        <div class="relative">
                            <!-- Main Navigation Link -->
                            <a :href="!item.hasDropdown ? item.link : '#'"
                                @click="item.hasDropdown ? (selectedDropdown = selectedDropdown === index ? null : index) : null"
                                class="flex items-center justify-between px-4 py-3 rounded-md transition-colors duration-200"
                                :class="{
                                    'bg-gray-100 dark:bg-gray-800 text-black dark:text-white border-l-4 border-blue-600': item.active,
                    'text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white': !item.active
                                }">
                             
                                <div class="flex items-center">
                                    <img :src="item.icon" class="h-5 w-5" :class="{ 'mr-3': !isCollapsed }"
                                        :alt="item.name" />
                                    <span x-show="!isCollapsed" x-text="item.name"></span>
                                </div>
                                <!-- Dropdown Icon -->
                                <template x-if="item.hasDropdown">
                                    <div class="text-gray-400 focus:outline-none">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                            class="h-5 w-5 transition-transform duration-300" fill="none"
                                            viewBox="0 0 24 24" stroke="currentColor"
                                            :class="{ 'rotate-180': selectedDropdown === index }">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M19 9l-7 7-7-7" />
                                        </svg>
                                    </div>
                                </template>
                            </a>

                            <!-- Dropdown Menu -->
                           <div x-show="selectedDropdown === index" x-transition class="absolute left-0 mt-1 w-48 bg-white dark:bg-gray-800 shadow-lg rounded-md overflow-hidden z-30">
            <template x-for="dropdownItem in item.dropdown" :key="dropdownItem.name">
              <a :href="dropdownItem.link" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
                <span x-text="dropdownItem.name"></span>
              </a>
            </template>
          </div>
                        </div>
                    </template>
                </div>

                <!-- Get Pro Section -->
               <!-- Get Pro Section -->
      <div x-show="!isCollapsed" class="mt-0 lg:mt-0 mb-5 text-center px-4">
        <img src="{{ asset('/assets/templates/pandel/images/revenue-bro.png') }}" alt="" class="mx-auto w-20 mb-2" />
        <!--<h3 class="text-black dark:text-white font-semibold mb-2">Join our community</h3>-->
        <!--<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Become part of our community.</p>-->
        <a href="{{ site('whatsapp') }}" target="_blank" class="block bg-green-600 hover:bg-green-700 text-white py-2 rounded-md">Join our community</a>
      </div>
            </nav>

        </div>

        {{-- <!-- Main Content Area --> --}}
        <!-- Sidebar Menu -->
        <aside id="customSideDropdown" class="hidden">
            <div>
                <ul>
                    <li><a href="{{ route('user.profile.index') }}">
                            <img src="{{ asset('/assets/templates/pandel/images/icon/user_icon.svg') }}"
                                alt="icon">
                            My Profile
                        </a>
                    </li>
                    <li><a href="{{ route('user.profile.edit') }}">
                            <img src="{{ asset('/assets/templates/pandel/images/icon/user_edit_icon.svg') }}"
                                alt="icon">
                            Edit Profile
                        </a>
                    </li>
                    <li><a href="{{ route('user.kyc.index') }}">
                            <img src="{{ asset('/assets/templates/pandel/images/icon/kyc_icon.svg') }}"
                                alt="icon">
                            KYC
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Logout Button -->
            <div class="logout-container logout">
                <a role="button">
                    <img src="{{ asset('/assets/templates/pandel/images/icon/logout_icon.svg') }}" alt="icon">
                    Logout
                </a>
            </div>
        </aside>

        {{-- container --}}
        <main id="main" class="mt-0 lg:mt-0 p-2 lg:p-4">

            @yield('contents')
            
            
            
            <!-- Mobile Bottom Navigation -->
              <nav class="fixed bottom-0 left-0 right-0 z-50 sm:hidden">
                <div class="relative bg-white dark:bg-gray-800 shadow-2xl pt-0 pb-4 rounded-t-3xl border-t dark:border-gray-700">
            
                  <!-- Floating Dashboard Button -->
                  <div class="absolute -top-7 left-1/2 transform -translate-x-1/2">
                    <a href="{{ route('user.dashboard') }}" class="w-16 h-16 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white rounded-full flex items-center justify-center shadow-xl border-4 border-white dark:border-gray-900 text-2xl">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
                    <path
                        d="M11.47 3.84a.75.75 0 011.06 0l8.69 8.69a.75.75 0 101.06-1.06l-8.689-8.69a2.25 2.25 0 00-3.182 0l-8.69 8.69a.75.75 0 001.061 1.06l8.69-8.69z" />
                    <path
                        d="M12 5.432l8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 01-.75-.75v-4.5a.75.75 0 00-.75-.75h-3a.75.75 0 00-.75.75V21a.75.75 0 01-.75.75H5.625a1.875 1.875 0 01-1.875-1.875v-6.198a2.29 2.29 0 00.091-.086L12 5.43z" />
                </svg>
                    </a>
                  </div>
            
                  <!-- Navigation Items -->
                  <div class="flex justify-between items-center px-2 mt-3 text-sm font-medium">
                    <a href="{{ route('user.deposits.index', ['target' => 'deposit']) }}" class="flex flex-col items-center text-gray-600 dark:text-gray-300 space-y-1 w-1/5">
                      <div class="text-2xl">
                          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor"
                    class="bi bi-box-arrow-in-down-left" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M9.636 2.5a.5.5 0 0 0-.5-.5H2.5A1.5 1.5 0 0 0 1 3.5v10A1.5 1.5 0 0 0 2.5 15h10a1.5 1.5 0 0 0 1.5-1.5V6.864a.5.5 0 0 0-1 0V13.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z" />
                    <path fill-rule="evenodd"
                        d="M5 10.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1H6.707l8.147-8.146a.5.5 0 0 0-.708-.708L6 9.293V5.5a.5.5 0 0 0-1 0v5z" />
                </svg>
                      </div>
                      <span>Deposit</span>
                    </a>
            
                    <a href="{{ route('user.withdrawals.index', ['target' => 'withdraw']) }}" class="flex flex-col items-center text-gray-600 dark:text-gray-300 space-y-1 w-1/5">
                      <div class="text-2xl">
                          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor"
                    class="bi bi-box-arrow-in-down-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M6.364 2.5a.5.5 0 0 1 .5-.5H13.5A1.5 1.5 0 0 1 15 3.5v10a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 2 13.5V6.864a.5.5 0 1 1 1 0V13.5a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5v-10a.5.5 0 0 0-.5-.5H6.864a.5.5 0 0 1-.5-.5z" />
                    <path fill-rule="evenodd"
                        d="M11 10.5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1 0-1h3.793L1.146 1.854a.5.5 0 1 1 .708-.708L10 9.293V5.5a.5.5 0 0 1 1 0v5z" />
                </svg>
                      </div>
                      <span>Withdraw</span>
                    </a>
            
                    <!-- Spacer for floating dashboard -->
                    <div class="w-1/5"></div>
            
                    <a href="{{ route('user.bots.index', ['target' => 'activate']) }}" class="flex flex-col items-center text-gray-600 dark:text-gray-300 space-y-1 w-1/5">
                      <div class="text-2xl">
                          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="currentColor" class="bi bi-robot"
                    viewBox="0 0 16 16">
                    <path
                        d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5ZM3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.58 26.58 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.933.933 0 0 1-.765.935c-.845.147-2.34.346-4.235.346-1.895 0-3.39-.2-4.235-.346A.933.933 0 0 1 3 9.219V8.062Zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a24.767 24.767 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25.286 25.286 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135Z" />
                    <path
                        d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2V1.866ZM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5Z" />
                </svg>
                      </div>
                      <span>AI Bots</span>
                    </a>
            
                    <a href="{{ route('user.mining') }}" class="flex flex-col items-center text-gray-600 dark:text-gray-300 space-y-1 w-1/5">
                      <div class="text-2xl">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4 text-xs sm:text-sm" fill="currentColor">
  <path d="M160 0c17.7 0 32 14.3 32 32V64h32V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h32V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h24c26.5 0 48 21.5 48 48v24h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H464v32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H464v32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H464v24c0 26.5-21.5 48-48 48H392v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V448H296v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V448H200v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V448H112c-26.5 0-48-21.5-48-48V376H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V280H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V184H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V96c0-26.5 21.5-48 48-48h24V32c0-17.7 14.3-32 32-32zM128 160v192h256V160H128z"/>
</svg>


                      </div>
                      <span>Mine</span>
                    </a>
                  </div>
                </div>
              </nav>


            {{-- modal for logout --}}
            <div class="w-full bg-black">
                <div id="logOutModal" class="hidden fixed inset-0 bg-black bg-opacity-75 transition-opacity z-10">
                    <div class="fixed inset-0 z-10 flex items-center justify-center">
                        <div class="bg-gray-950 text-white rounded-lg shadow-lg w-96 p-6 relative">
                            <!-- Close Button -->
                            <button id="closeLogOutModal"
                                class="absolute top-4 right-4 text-gray-400 hover:text-white">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>

                            <!-- logout -->
                            <div class="text-center mb-4 -800 pb-2">
                                <span class="text-lg text-gray-400">Do you really want to Logout?</span>

                                <form action="{{ route('user.logout') }}" method="post" class="mt-5 gen-form"
                                    data-action="redirect" data-url="{{ url('/') }}">
                                    @csrf

                                    <div class="w-full py-12">
                                        <div class="flex justify-center text-center">
                                            <button type="submit"
                                                class="logoutBtn rounded-full px-10 py-2 lg:w-52 w-full transition delay-100 duration-200 ease-in-out ">
                                                <span class="px-2">Log Out</span>
                                            </button>
                                        </div>
                                    </div>

                                </form>

                            </div>


                        </div>
                    </div>
                </div>
            </div>

        </main>

    </div>
    
    
  

    
    
    <script>
  let deferredPrompt;
  const installPopup = document.getElementById('installPopup');
  const installButton = document.getElementById('installButton');
  const dismissButton = document.getElementById('dismissButton');

  // Listen for the install prompt event
  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;

    const dismissed = localStorage.getItem('pwa-install-dismissed');
    const installed = localStorage.getItem('pwa-installed');

    if (!dismissed && !installed) {
      installPopup.style.display = 'flex';
    }
  });

  // Install button click
  installButton.addEventListener('click', async () => {
    installPopup.style.display = 'none';

    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;
      if (outcome === 'accepted') {
        console.log('App installed');
        localStorage.setItem('pwa-installed', 'yes');
      } else {
        console.log('App install dismissed');
      }
      deferredPrompt = null;
    }
  });

  // Dismiss button click
  dismissButton.addEventListener('click', () => {
    installPopup.style.display = 'none';
    localStorage.setItem('pwa-install-dismissed', 'yes');
  });

  // Optionally, listen to appinstalled event
  window.addEventListener('appinstalled', () => {
    console.log('App was installed');
    localStorage.setItem('pwa-installed', 'yes');
    installPopup.style.display = 'none';
  });
</script>



    {{-- qrcode --}}
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>

    {{-- Include SweetAlert2 JavaScript file --}}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.js"></script>

    <script src="{{ asset('/assets/templates/pandel/scripts/dash.js') }}"></script>

    @yield('scripts')
    @stack('scripts')
    
    
    <script>
        const themeTogglem = document.getElementById('theme-toggle-m');
        const htmlElementm = document.documentElement;

        // Load saved theme or system preference
        if (localStorage.getItem('theme-m') === 'dark') {
            htmlElementm.classList.add('dark');
        } else if (!localStorage.getItem('theme-m')) {
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                htmlElementm.classList.add('dark');
            }
        }

        // Toggle theme on icon click
        themeTogglem.addEventListener('click', () => {
            htmlElementm.classList.toggle('dark');
            if (htmlElementm.classList.contains('dark')) {
                localStorage.setItem('theme-m', 'dark');
            } else {
                localStorage.setItem('theme-m', 'light');
            }
            feather.replace();
        });

        // Initialize icons
        feather.replace();
    </script>
    

    <script>
        const themeToggle = document.getElementById('theme-toggle');
        const htmlElement = document.documentElement;

        // Load saved theme or system preference
        if (localStorage.getItem('theme') === 'dark') {
            htmlElement.classList.add('dark');
        } else if (!localStorage.getItem('theme')) {
            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
                htmlElement.classList.add('dark');
            }
        }

        // Toggle theme on icon click
        themeToggle.addEventListener('click', () => {
            htmlElement.classList.toggle('dark');
            if (htmlElement.classList.contains('dark')) {
                localStorage.setItem('theme', 'dark');
            } else {
                localStorage.setItem('theme', 'light');
            }
            feather.replace();
        });

        // Initialize icons
        feather.replace();
    </script>

    {{-- toggle for sideDdropdownBtn --}}
    <script>
        $(document).ready(function() {
            // Dropdown Toggle
            $(".sideDdropdownBtn").click(function(event) {
                event.stopPropagation(); // Prevent click event from bubbling up
                $("#customSideDropdown").toggleClass("hidden custom-sidebar");
            });

            // Close dropdown on click outside
            $(document).click(function(event) {
                if (!$(event.target).closest("#customSideDropdown, .sideDdropdownBtn").length) {
                    $("#customSideDropdown").addClass("hidden").removeClass("custom-sidebar");
                }
            });
        });

        // log out
        $(document).on("click", ".logout", function() {
            $("#logOutModal").removeClass("hidden");
        });

        // Close Logout Modal  
        $(document).on("click", "#closeLogOutModal", function() {
            $("#logOutModal").addClass("hidden");
        });
    </script>




    {{-- livechat --}}
    {!! json_decode(site('livechat')) !!}


<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        @if(session('success'))
            showToast('{{ session('success') }}', 'success');
        @elseif(session('error'))
            showToast('{{ session('error') }}', 'error');
        @elseif(session('warning'))
            showToast('{{ session('warning') }}', 'warning');
        @elseif(session('info'))
            showToast('{{ session('info') }}', 'info');
        @endif
    });

    function showToast(message, type = 'info') {
        Swal.fire({
            toast: true,
            position: 'top-end',
            icon: type,
            title: message,
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            background: '#1a1a2e',
            color: '#fff',
            iconColor: '#ff6900'
        });
    }
</script>


</body>

</html>
