@php

    use Illuminate\Support\Facades\DB;

    $transactions = DB::select("
    SELECT transactions.*, users.name AS username 
    FROM transactions 
    JOIN users ON users.id = transactions.user_id 
    ORDER BY transactions.id DESC 
    LIMIT 10
");

@endphp

<!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>
    
     <!-- PWA Meta -->
  <link rel="manifest" href="{{ asset('manifest.json') }}" />
  <meta name="theme-color" content="#000000" />
  <link rel="apple-touch-icon" href="{{ asset('favicon.png') }}">
  
  <meta name="google-adsense-account" content="ca-pub-2451537563071235">

  <!-- 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>
    

    <meta name="author" content="support@rescron.com">
    <meta name="description" content="{{ $short_description }}">
    <meta property="og:url" content="{{ request()->url }}">
    <meta property="og:title" content="{{ $page_title }} | {{ site('name') }}">
    <meta property="og:description" content="{{ $short_description }}">
    <meta property="og:image" content="{{ asset('assets/images/' . site('cover')) }}">
    <meta name="robots" content="{{ site('robot') }}">


    <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://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <!-- animate on scroll  -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <!-- swiper  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />

    <!-- Owl Carousel CSS -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />

    <!-- fontawesome  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="{{ asset('/assets/templates/pandel/css/output.css') }}">
    <link rel="stylesheet" href="{{ asset('/assets/templates/pandel/css/styles.css') }}">
 



    @yield('css')
</head>


<body class="bg-black">


    @if (site('preloader') == 1)
        @include('templates.' . site('template') . '.loaders.front_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>
   

    <nav class="bg-blue-50 lg:bg-black px-8 md:px-16 py-4 md:py-8 mx-auto max-w-6xl shadow-lg lg:rounded-full rounded-lg lg:mt-4 lg:fixed top-0 left-0 right-0 z-50 transition-colors duration-300"
        x-data="{ open: false, scrolled: false }" x-init="window.addEventListener('scroll', () => scrolled = window.scrollY > 50)"
        :class="scrolled ? 'bg-white lg:bg-white border-none' : 'bg-blue-50 lg:bg-black '" data-aos="fade-down"
        data-aos-duration="2000">
        <div class="flex justify-between items-center">
            <!-- Logo and Menu Links -->
            <div class="flex items-center space-x-8">
                <div class="flex items-center space-x-2">
                    <div class="bg-black rounded-lg p-2">
                        <a href="{{ route('home') }}">
                            <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo"
                                class="w-32 h-12" />
                        </a>
                    </div>
                </div>
                <div class="hidden lg:flex space-x-8 items-center" x-data="{ openProducts: false, openCompany: false, openContact: false }">
                    <!-- Products Dropdown -->
                    <div class="relative" @mouseenter="openProducts = true" @mouseleave="openProducts = false">
                        <a href="#"
                            class="text-xl hover:text-sky-800 hover:font-semibold transition-colors duration-300"
                            :class="scrolled ? 'text-black' : 'text-white'">
                            Products <i class="fa-solid fa-caret-down ml-1"></i>
                        </a>
                        <div x-show="openProducts"
                            class="absolute top-full left-0 mt-2 w-48 bg-black text-white rounded-lg shadow-lg p-4"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95">
                            <a href="{{ route('pricing') }}"
                                class="block py-1 border-b border-gray-600 hover:text-sky-800">AI
                                Bots</a>
                            <a href="{{ route('trades') }}" class="block py-1 hover:text-sky-800">Live AI Trades</a>
                        </div>
                    </div>

                    <!-- Company Dropdown -->
                    <div class="relative" @mouseenter="openCompany = true" @mouseleave="openCompany = false">
                        <a href="#"
                            class="text-xl hover:text-sky-800 hover:font-semibold transition-colors duration-300"
                            :class="scrolled ? 'text-black' : 'text-white'">
                            Company <i class="fa-solid fa-caret-down ml-1"></i>
                        </a>
                        <div x-show="openCompany"
                            class="absolute top-full left-0 mt-2 w-48 bg-black text-white rounded-lg shadow-lg p-4"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95">
                            <a href="{{ route('about') }}"
                                class="block py-1 border-b border-gray-600 hover:text-sky-800">About</a>
                            <a href="{{ route('faqs') }}"
                                class="block py-1 border-b border-gray-600 hover:text-sky-800">FAQ</a>
                            <a href="{{ route('tos') }}" class="block py-1 hover:text-sky-800">TOS</a>
                        </div>
                    </div>

                    <!-- Contact Dropdown -->
                    <div class="relative" @mouseenter="openContact = true" @mouseleave="openContact = false">
                        <a href="#"
                            class="text-xl hover:text-sky-800 hover:font-semibold transition-colors duration-300"
                            :class="scrolled ? 'text-black' : 'text-white'">
                            Contact <i class="fa-solid fa-caret-down ml-1"></i>
                        </a>
                        <div x-show="openContact"
                            class="absolute top-full left-0 mt-2 w-48 bg-black text-white rounded-lg shadow-lg p-4"
                            x-transition:enter="transition ease-out duration-300"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-200"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95">
                            <a href="{{ route('contact') }}" class="block py-1 hover:text-sky-800">Contact Slip</a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Desktop Buttons -->
            <div class="hidden lg:flex space-x-4 items-center">
                <a href="{{ route('user.login') }}"
                    class="bg-sky-800 text-white font-medium px-4 py-2 rounded-lg text-xl hover:text-sky-800 hover:bg-transparent hover:border hover:border-sky-800 cursor-pointer transition-colors duration-300"
                    :class="scrolled ? 'hover:bg-transparent hover:text-sky-800 border-sky-800' : ''">
                    Sign in
                </a>
                <a href="{{ route('user.register') }}"
                    class="border border-sky-800 text-sky-800 font-medium px-4 py-2 rounded-lg text-xl hover:text-white hover:bg-sky-800 hover:border hover:border-none cursor-pointer">
                    Sign up
                </a>
            </div>

            <!-- Mobile Menu Button -->
            <button class="lg:hidden" @click="open = !open">
                <!-- Hamburger Icon when closed -->
                <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3.75 7.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
                </svg>

                <!-- X Icon when open -->
                <svg x-show="open" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div x-show="open" @click.outside="open = false"
            class="mt-4 space-y-2 lg:hidden bg-blue-50 px-6 py-4 rounded-md shadow-lg">
            <div x-data="{ activeDropdown: null }" class="space-y-4">
                <!-- Products Dropdown -->
                <div>
                    <a href="#" @click="activeDropdown = activeDropdown === 'products' ? null : 'products'"
                        class="text-black font-medium hover:text-sky-800 flex justify-between items-center">
                        Products
                        <i :class="activeDropdown === 'products' ? 'fa-solid fa-caret-up' : 'fa-solid fa-caret-down'"
                            class="ml-1"></i>
                    </a>
                    <div x-show="activeDropdown === 'products'" x-transition
                        class="bg-black text-white rounded-md mt-2 p-4 space-y-2">
                        <a href="{{ route('pricing') }}" class="block hover:underline">AI Bots</a>
                        <a href="{{ route('trades') }}" class="block hover:underline">Live AI Trades</a>
                    </div>
                </div>

                <!-- Company Dropdown -->
                <div>
                    <a href="#" @click="activeDropdown = activeDropdown === 'company' ? null : 'company'"
                        class="text-black font-medium hover:text-sky-800 flex justify-between items-center">
                        Company
                        <i :class="activeDropdown === 'company' ? 'fa-solid fa-caret-up' : 'fa-solid fa-caret-down'"
                            class="ml-1"></i>
                    </a>
                    <div x-show="activeDropdown === 'company'" x-transition
                        class="bg-black text-white rounded-md mt-2 p-4 space-y-2">
                        <a href="{{ route('about') }}" class="block hover:underline">About</a>
                        <a href="{{ route('faqs') }}" class="block hover:underline">FAQ</a>
                        <a href="{{ route('tos') }}" class="block hover:underline">TOS</a>
                    </div>
                </div>

                <!-- Contact Dropdown -->
                <div>
                    <a href="#" @click="activeDropdown = activeDropdown === 'contact' ? null : 'contact'"
                        class="text-black font-medium hover:text-sky-800 flex justify-between items-center">
                        Contact
                        <i :class="activeDropdown === 'contact' ? 'fa-solid fa-caret-up' : 'fa-solid fa-caret-down'"
                            class="ml-1"></i>
                    </a>
                    <div x-show="activeDropdown === 'contact'" x-transition
                        class="bg-black text-white rounded-md mt-2 p-4 space-y-2">
                        <a href="{{ route('contact') }}" class="block hover:underline">Contact Slip</a>
                    </div>
                </div>
            </div>

            <!-- Buttons -->
            <div class="flex gap-4">
                <a href="{{ route('user.login') }}"
                    class="flex-1 bg-sky-800 text-white font-medium px-4 py-2 rounded-lg">
                    Sign in
                </a>
                <a href="{{ route('user.register') }}"
                    class="flex-1 border border-sky-800 text-sky-800 font-medium px-4 py-2 rounded-lg">
                    Sign up
                </a>
            </div>
        </div>
    </nav>



    @yield('contents')



    <section class="px-6 lg:px-64 mt-16 md:mt12">
        {{-- counter --}}

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-14 @if (!request()->routeIs('home')) bg-gradient-to-r from-transparent to-gray-400/20 py-4 @endif"
            data-aos="zoom-in" data-aos-duration="1500">
            <!-- Column 1 -->
            <div class="flex flex-col gap-4">
                <div class="text-white font-semibold text-5xl text-center">
                    3.5K+
                    <span class="text-sky-400 block text-lg mt-2 md:mt-4">Users</span>
                </div>
            </div>
            <!-- Column 2 -->
            <div class="flex flex-col gap-4">
                <div class="text-white font-semibold text-5xl text-center">
                    USD5.5M+
                    <span class="text-sky-400 block text-lg mt-2 md:mt-4">Deposits</span>
                </div>
            </div>
            <!-- Column 3 -->
            <div class="flex flex-col gap-4">
                <div class="text-white font-semibold text-5xl text-center">
                    USD10.2M+
                    <span class="text-sky-400 block text-lg mt-2 md:mt-4">Withdrawals</span>
                </div>
            </div>
            <!-- Column 4 -->
            <div class="flex flex-col gap-4">
                <div class="text-white font-semibold text-5xl text-center">
                    200+
                    <span class="text-sky-400 block text-lg mt-2 md:mt-4">Countries Supported</span>
                </div>
            </div>
        </div>
        <!-- transaction carousel  -->
        @if (request()->routeIs('home'))
            <div class="relative overflow-hidden bg-gray-900 py-8 rounded-xl mb-8 ticker-container">
                <div class="flex items-center whitespace-nowrap animate-slide">
                    @foreach ($transactions as $data)
                        @php
                            if ($data->type == 'credit') {
                                $type = 'deposited';
                            } else {
                                $type = 'withdrew ';
                            }
                        @endphp
                        <!-- First set of messages -->
                        <span class="text-blue-400 mx-8 flex">
                            {{ $data->username }} {{ $type }} USD{{ number_format($data->amount, 2) }}
                        </span>
                    @endforeach

                </div>
            </div>
        @endif
    </section>



    <footer class="bg-black text-white py-8 px-6 lg:mx-64 border-t border-t-gray-800" data-aos="fade-up"
        data-aos-duration="1500">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6">
                <!-- Logo and Contact Section -->
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="mb-4">
                            <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt=""
                                class="w-96 h-24" />
                        </div>
                    </div>
                    <div>
                        <p class="text-white text-lg mb-6 font-semibold">Contact Us</p>
                        <p class="text-sm text-gray-500">
                            <i class="fa-solid fa-location-dot mr-2"></i> {{ site('address') }},
                            {{ site('city') }},{{ site('state') }}, {{ site('country') }}
                        </p>
                        <a class="text-sm mt-2 text-gray-500 block" href="mailto:{{ site('email') }}"><i
                                class="fa-solid fa-envelope mr-2"></i>
                            {{ site('email') }}</a>
                        <a class="text-sm mt-2 text-gray-500 block" href="tel:+{{ site('phone') }}"><i
                                class="fa-solid fa-phone mr-2"></i> {{ site('phone') }}</a>
                    </div>
                </div>

                <!-- Company Section -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 md:mt-8">Company</h3>
                    <ul class="space-y-2 text-gray-500">
                        <li>
                            <a href="{{ route('about') }}" class="text-sm hover:underline">About Us</a>
                        </li>
                        <li>
                            <a href="{{ route('about') }}" class="text-sm hover:underline">Our Vision</a>
                        </li>
                        <li>
                            <a href="{{ route('about') }}" class="text-sm hover:underline">Our Mission</a>
                        </li>
                        <li>
                            <a href="{{ route('contact') }}" class="text-sm hover:underline">Contact Us</a>
                        </li>
                    </ul>
                </div>

                <!-- Ecosystem Section -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 md:mt-8">Ecosystem</h3>
                    <ul class="space-y-2 text-gray-500">
                        <li>
                            <a href="{{ route('pricing') }}" class="text-sm hover:underline">AI bots</a>
                        </li>
                        <li>
                            <a href="{{ route('trades') }}" class="text-sm hover:underline">Live AI trades</a>
                        </li>
                        <li>
                            <a href="#" class="text-sm hover:underline">User Reviews</a>
                        </li>
                    </ul>
                </div>

                <!-- Resources Section -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 md:mt-8">Resources</h3>
                    <ul class="space-y-2 text-gray-500">
                        <li>
                            <a href="{{ route('tos') }}" class="text-sm hover:underline">TOS</a>
                        </li>
                        <li>
                            <a href="{{ route('privacy') }}" class="text-sm hover:underline">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="{{ route('about') }}" class="text-sm hover:underline">Community</a>
                        </li>
                        <li>
                            <a href="{{ route('faqs') }}" class="text-sm hover:underline">FAQ</a>
                        </li>
                    </ul>
                </div>

                <!-- Social Media Section -->
                <div>
                    <h3 class="text-lg font-semibold mb-4 md:mt-8">Connect With Us</h3>
                    <div class="flex space-x-4">
                        <a href="{{ site('facebook') }}" class="text-gray-400 hover:text-white">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                        <a href="{{ site('twitter') }}" class="text-gray-400 hover:text-white">
                            <i class="fa-brands fa-x-twitter"></i>
                        </a>
                        <a href="{{ site('instagram') }}" class="text-gray-400 hover:text-white">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                        <a href="{{ site('linkedin') }}" class="text-gray-400 hover:text-white">
                            <i class="fa-brands fa-linkedin"></i>
                        </a>
                        <a href="{{ site('pinterest') }}" class="text-gray-400 hover:text-white">
                            <i class="fa-brands fa-pinterest"></i>
                        </a>
                        <a href="{{ site('youtube') }}" class="text-gray-400 hover:text-white">
                            <i class="fa-brands fa-youtube"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="mt-8 text-center text-sm text-sky-400">
                All Rights Operational
            </div>
        </div>
    </footer>



    {{-- cookie consent --}}
    <div id="cookie-consent" class="hidden"
        style="width: 100%; position: fixed; z-index: 50; bottom: 0; left: 0; background-color: #120f1b50; background-opacity: 15%; backdrop-filter: blur(10px);">
        <div style="width: 100%; padding: 20px;">
            <div
                style="width: 100%;  gap: 12px; display: flex; flex-direction:column; justify-content: center; align-items: center; color: white;">
                <p style="text-align: center;">We use cookies to tailor your experience on {{ site('name') }}. Learn
                    more
                    in our <a href="{{ route('privacy') }}"
                        style="border-bottom: 1px solid white; color: inherit;">privacy policy</a>
                </p>
                <div style="text-align: center; padding-top: 24px; padding-bottom: 24px;">
                    <a id="consented" role="button"
                        style="border: 1px solid transparent; border-radius: 9999px; padding: 16px 40px; display: block; text-align: center; color: white; font-size: 1.125rem; background: #075985; width: 400px; margin: 0 auto; text-decoration: none;">
                        <span>Accept Cookies</span>
                    </a>
                </div>
            </div>
        </div>
    </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>


    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

    <script>
        AOS.init();
    </script>

    <script>
        //cookies
        window.onload = function() {
            // Check if the "cookie-consent" cookie exists
            if (!document.cookie.includes('cookie-consent')) {
                $('#cookie-consent').removeClass('hidden');
            }
        };

        function setCookie(cookieName, cookieValue) {
            var expirationDate = new Date();
            expirationDate.setFullYear(expirationDate.getFullYear() + 10); // Set expiration date to 10 years from now

            var cookieString = cookieName + '=' + cookieValue + '; expires=' + expirationDate.toUTCString() + '; path=/';

            document.cookie = cookieString;
        }


        $('#consented').on('click', function(e) {
            e.preventDefault();
            setCookie('cookie-consent', true);
            $('#cookie-consent').addClass('hidden');
        });
    </script>

    @yield('scripts')

    @stack('scripts')

    {{-- livechat --}}
    {!! json_decode(site('livechat')) !!}
    </script>

</body>

</html>
