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

    <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="//unpkg.com/alpinejs" defer></script>

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

    {{-- google font --}}
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet" />

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

    {{-- glide --}}
    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">

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

    <style>
        .button-spinner {
            border: 4px solid rgb(255, 0, 170);
            /* Light grey background */
            border-top: 4px solid #000;
            /* Blue color for the spinner */
            border-radius: 50%;
            width: 25px;
            height: 25px;
            animation: spin 1s linear infinite;
            /* Spinning animation */
            position: absolute;
        }

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

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

        .not-allowed-cursor {
            cursor: not-allowed;
        }
    </style>

    @yield('css')
</head>


<body class="bg-black">

    @if (site('preloader') == 1)
        @include('templates.' . site('template') . '.loaders.front_preloader')
    @endif



    <nav class="bg-black text-white border-b border-gray-400/30" x-data="{ isOpen: false }" data-aos="fade-down"
        data-aos-duration="1500">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 lg:h-24">
                <!-- Logo -->
                <div class="flex-shrink-0">
                    <!-- logo image here  -->
                    <a href="{{ route('home') }}">
                        <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo" class="w-32 h-12" />
                    </a>
                </div>

                <!-- Desktop Menu -->
                <div class="hidden lg:flex items-center space-x-8">
                    <a href="{{ route('about') }}"
                        class="hover:text-blue-400 @if (request()->routeIs('about')) text-blue-400 @endif ">About Us</a>
                    <a href="{{ route('pricing') }}"
                        class="hover:text-blue-400 @if (request()->routeIs('pricing')) text-blue-400 @endif ">AI Bots</a>
                    <a href="{{ route('trades') }}"
                        class="hover:text-blue-400 @if (request()->routeIs('trades')) text-blue-400 @endif ">Live AI
                        Trades</a>
                    <a href="{{ route('tos') }}"
                        class="hover:text-blue-400 @if (request()->routeIs('tos')) text-blue-400 @endif ">TOS</a>
                    <a href="{{ route('contact') }}"
                        class="hover:text-blue-400 @if (request()->routeIs('contact')) text-blue-400 @endif ">Contact</a>
                    <a href="{{ route('faqs') }}"
                        class="hover:text-blue-400 @if (request()->routeIs('faqs')) text-blue-400 @endif ">FAQ</a>
                </div>

                <!-- Auth Buttons -->
                <div class="hidden lg:flex items-center space-x-4">
                    @if (user())
                        <a href="{{ route('user.dashboard') }}" class="gradient-btn">
                            <span class="relative z-20 text-white hover:text-white transition-colors">Dashboard</span>
                        </a>
                    @else
                        <a href="{{ route('user.login') }}" class="gradient-btn">
                            <span class="relative z-10 text-white hover:text-white transition-colors">Log in</span>
                        </a>
                        <a href="{{ route('user.register') }}" class="gradient-btn-filled">Sign Up</a>
                    @endif
                </div>

                <!-- Mobile menu button -->
                <div class="lg:hidden">
                    <button @click="isOpen = !isOpen" class="text-gray-300 hover:text-white">
                        <i class="fa-solid fa-ellipsis text-2xl"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div x-show="isOpen" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
            x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0"
            x-transition:leave-end="translate-x-full"
            class="lg:hidden fixed top-0 right-0 bottom-0 w-64 bg-black shadow-lg flex flex-col z-50">
            <!-- Add close button -->
            <button @click="isOpen = false"
                class="absolute top-4 right-4 text-white hover:text-blue-400 transition-colors duration-200">
                <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>

            <div class="px-4 pt-20 space-y-6 flex-grow">
                <a href="{{ route('about') }}" class="block hover:text-blue-400">About Us</a>
                <a href="{{ route('pricing') }}" class="block hover:text-blue-400">AI Bots</a>
                <a href="{{ route('trades') }}" class="block hover:text-blue-400">Live AI Trades</a>
                <a href="{{ route('tos') }}" class="block hover:text-blue-400">TOS</a>
                <a href="{{ route('contact') }}" class="block hover:text-blue-400">Contact</a>
                <a href="{{ route('faqs') }}" class="block hover:text-blue-400">FAQ</a>
            </div>

            <!-- auth buttons container -->
            <div class="px-4 py-6 space-y-4 border-t border-gray-800">
                <a href="{{ route('user.login') }}" class="gradient-btn block w-full text-center">
                    <span class="relative z-10 text-white hover:text-white transition-colors">Log in</span>
                </a>
                <a href="{{ route('user.register') }}" class="gradient-btn-filled block w-full text-center">Sign
                    Up</a>
            </div>
        </div>
    </nav>

    <!-- hero  -->

    <div class="main" id="main">
        @yield('contents')
    </div>
    @if (!request()->routeIs('about'))
        <!-- counter -->
        <section class="px-8 lg:px-40 mt-8 lg:mt-20">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-14" data-aos="zoom-in"
                data-aos-duration="1500">
                <!-- Column 1 -->
                <div class="flex flex-col gap-4">
                    <div
                        class="text-transparent bg-clip-text bg-gradient-to-r from-[#f472b6] to-[#1e40af] text-5xl font-bold text-center lg:text-start leading-normal">
                        3.5K+
                        <span class="text-white block text-lg mt-2 md:mt-4 lg:text-start uppercase">Users</span>
                    </div>
                </div>
                <!-- Column 2 -->
                <div class="flex flex-col gap-4">
                    <div
                        class="text-transparent bg-clip-text bg-gradient-to-r from-[#f472b6] to-[#1e40af] text-5xl font-bold text-center lg:text-start leading-normal">
                        USD5.5M+
                        <span class="text-white block text-lg mt-2 md:mt-4 lg:text-start uppercase">Deposits</span>
                    </div>
                </div>
                <!-- Column 3 -->
                <div class="flex flex-col gap-4">
                    <div
                        class="text-transparent bg-clip-text bg-gradient-to-r from-[#f472b6] to-[#1e40af] text-5xl font-bold text-center lg:text-start leading-normal">
                        USD10.2M+
                        <span class="text-white block text-lg mt-2 md:mt-4 lg:text-start uppercase">Withdrawals</span>
                    </div>
                </div>
                <!-- Column 4 -->
                <div class="flex flex-col gap-4">
                    <div
                        class="text-transparent bg-clip-text bg-gradient-to-r from-[#f472b6] to-[#1e40af] text-5xl font-bold text-center leading-normal lg:text-start">
                        200+
                        <span class="text-white block text-lg mt-2 md:mt-4 lg:text-start uppercase">Countries
                            Supported</span>
                    </div>
                </div>
            </div>
            <img src="{{ asset('/assets/templates/cavit/images/circles.svg') }}" alt=""
                class="absolute hidden right-60 lg:block" />
        </section>
    @endif


    <!-- footer  -->
    <footer class="bg-black text-white mt-8 lg:mt-40 mb-2">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between">
                <!-- Left Side: Logo -->
                <div class="mb-6 md:mb-0 w-full md:w-1/2">
                    <h2 class="text-2xl font-bold text-blue-400">
                        <a href="{{ route('home') }}">
                            <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo"
                                class="w-32 h-12" />
                        </a>
                    </h2>
                </div>

                <!-- Right Side: Columns (Company, Resources, Contact Us) -->
                <div class="w-full md:w-1/2 grid grid-cols-2 md:grid-cols-3 gap-6 text-gray-300 text-sm">
                    <!-- Company -->
                    <div class="text-gray-400">
                        <h3 class="font-semibold text-white mb-2">Company</h3>
                        <ul class="space-y-2">
                            <li><a href="{{ route('about') }}" class="hover:text-gray-400">About Us</a></li>
                            <li><a href="{{ route('about') }}" class="hover:text-gray-400">Our Vision</a></li>
                            <li><a href="{{ route('about') }}" class="hover:text-gray-400">Our Mission</a></li>
                            <li><a href="{{ route('contact') }}" class="hover:text-gray-400">Contact Us</a></li>
                        </ul>
                    </div>

                    <!-- Resources -->
                    <div class="text-gray-400">
                        <h3 class="font-semibold text-white mb-2">Resources</h3>
                        <ul class="space-y-2">
                            <li><a href="{{ route('tos') }}" class="hover:text-gray-400">TOS</a></li>
                            <li>
                                <a href="{{ route('privacy') }}" class="hover:text-gray-400">Privacy Policy</a>
                            </li>
                            <li><a href="{{ route('about') }}" class="hover:text-gray-400">Community</a></li>
                            <li><a href="{{ route('faqs') }}" class="hover:text-gray-400">FAQ</a></li>
                        </ul>
                    </div>

                    <!-- Contact Us -->
                    <div class="text-gray-400">
                        <h3 class="font-semibold text-white mb-2">Contact Us</h3>
                        <p class="flex items-center gap-2 mb-1">
                            <i class="fa-solid fa-location-dot mr-1"></i> {{ site('address') }},
                            {{ site('city') }},{{ site('state') }}, {{ site('country') }}
                        </p>
                        <p class="flex items-center gap-2 mb-1">
                            <i class="fa-solid fa-phone mr-1"></i> {{ site('phone') }}
                        </p>
                        <p class="flex items-center gap-2">
                            <i class="fa-solid fa-envelope mr-1"></i> {{ site('email') }}
                        </p>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="border-t border-gray-700 my-6"></div>

            <!-- Bottom Section -->
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm">All Services Operational</p>
                <div class="flex gap-3 mt-4 md:mt-0 text-white">
                    <a href="{{ site('instagram') }}" class="p-2 px-3 bg-gray-800 rounded-lg hover:bg-gray-700"><i
                            class="fa-brands fa-instagram"></i></a>
                    <a href="{{ site('facebook') }}" class="p-2 px-3 bg-gray-800 rounded-lg hover:bg-gray-700"><i
                            class="fa-brands fa-facebook-f"></i></a>
                    <a href="{{ site('pinterest') }}" class="p-2 px-3 bg-gray-800 rounded-lg hover:bg-gray-700"><i
                            class="fa-brands fa-pinterest"></i></a>
                    <a href="{{ site('twitter') }}" class="p-2 px-3 bg-gray-800 rounded-lg hover:bg-gray-700"><i
                            class="fa-brands fa-x-twitter"></i></a>
                    <a href="{{ site('youtube') }}" class="p-2 px-3 bg-gray-800 rounded-lg hover:bg-gray-700"><i
                            class="fa-brands fa-youtube"></i></a>
                    <a href="{{ site('linkedin') }}" class="p-2 px-3 bg-gray-800 rounded-lg hover:bg-gray-700"><i
                            class="fa-brands fa-linkedin-in"></i></a>
                </div>
            </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: #ca2075; width: 400px; margin: 0 auto; text-decoration: none;">
                        <span>Accept Cookies</span>
                    </a>
                </div>
            </div>
        </div>
    </div>



    <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/cavit/scripts/main.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.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>
