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


    {{-- alpine js --}}
    <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" />

    {{-- 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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet" />

    {{-- 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/lunex/css/output.css') }}">

    <style>
        .button-spinner {
            border: 4px solid #000000;
            /* Light grey background */
            border-top: 4px solid #04fc57;
            /* 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-white">

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


    {{-- start content --}}
    <nav class="p-4 bg-black text-white">
        <div class="container mx-auto flex justify-between items-center">
            <!-- Logo -->
            <div class="text-2xl font-bold cursor-pointer">
                <a href="{{ route('home') }}">
                    <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo" class="h-12" />
                </a>
            </div>

            <!-- Menu -->
            <div x-data="{ open: false }" class="relative">
                <!-- Hamburger Button -->
                <button @click="open = !open" class="lg:hidden focus:outline-none">
                    <!-- Hamburger Icon -->
                    <img src="{{ asset('/assets/templates/lunex/images/menu-icon.png') }}" alt=""
                        class="h-6 w-6 filter brightness-0 invert" />
                </button>

                <!-- Mobile/Tablet Menu -->
                <div x-show="open" x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 transform translate-x-full"
                    x-transition:enter-end="opacity-100 transform translate-x-0"
                    x-transition:leave="transition ease-in duration-300"
                    x-transition:leave-start="opacity-100 transform translate-x-0"
                    x-transition:leave-end="opacity-0 transform translate-x-full" class="fixed inset-0 z-50 lg:hidden"
                    style="display: none">
                    <!-- Backdrop -->
                    <div @click="open = false" class="fixed inset-0 bg-black bg-opacity-50"></div>

                    <!-- Menu Container -->
                    <div class="absolute right-0 top-0 h-full w-64 bg-black p-6 shadow-lg">
                        <!-- Close Button -->
                        <button @click="open = false" class="absolute top-4 right-4 focus:outline-none">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>

                        <!-- Menu Items -->
                        <ul class="flex flex-col space-y-4 mt-10">
                            <li>
                                <a href="{{ route('about') }}" class="hover:border-b-2 hover:border-[#A3DC2F]">About
                                    Us</a>
                            </li>
                            <li>
                                <a href="{{ route('pricing') }}" class="hover:border-b-2 hover:border-[#A3DC2F]">AI
                                    Bots</a>
                            </li>
                            <li>
                                <a href="{{ route('trades') }}" class="hover:border-b-2 hover:border-[#A3DC2F]">Live AI
                                    Trades</a>
                            </li>
                            <li>
                                <a href="{{ route('tos') }}" class="hover:border-b-2 hover:border-[#A3DC2F]">TOS</a>
                            </li>
                            <li>
                                <a href="{{ route('contact') }}"
                                    class="hover:border-b-2 hover:border-[#A3DC2F]">Contact</a>
                            </li>
                            <li>
                                <a href="{{ route('faqs') }}" class="hover:border-b-2 hover:border-[#A3DC2F]">FAQ</a>
                            </li>
                        </ul>

                        <!-- Auth Buttons -->
                        <div class="mt-6 flex flex-col space-y-4">
                            @if (user())
                                <a href="{{ route('user.dashboard') }}"
                                    class="px-4 py-2 rounded-md text-black gradient-bg text-center text-sm font-semibold">Dashboard</a>
                            @else
                                <a href="{{ route('user.login') }}"
                                    class="px-4 py-2 rounded-md text-black gradient-bg text-center text-sm font-semibold">Sign
                                    In</a>
                                <a href="{{ route('user.register') }}"
                                    class="px-4 py-2 gradient-border rounded-md text-center text-sm font-semibold">Sign
                                    Up</a>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Desktop Menu -->
                <div class="hidden lg:flex lg:items-center lg:space-x-6">
                    <ul class="flex space-x-6">
                        <li>
                            <a href="{{ route('about') }}"
                                class="hover:border-b-2 hover:border-[#A3DC2F] @if (request()->routeIs('about')) border-b-2 border-[#a3dc2f] @endif ">About
                                Us</a>
                        </li>
                        <li>
                            <a href="{{ route('pricing') }}"
                                class="hover:border-b-2 hover:border-[#A3DC2F] @if (request()->routeIs('pricing')) border-b-2 border-[#a3dc2f] @endif">AI
                                Bots</a>
                        </li>
                        <li>
                            <a href="{{ route('trades') }}"
                                class="hover:border-b-2 hover:border-[#A3DC2F] @if (request()->routeIs('trades')) border-b-2 border-[#a3dc2f] @endif">Live
                                AI
                                Trades</a>
                        </li>
                        <li>
                            <a href="{{ route('tos') }}"
                                class="hover:border-b-2 hover:border-[#A3DC2F] @if (request()->routeIs('tos')) border-b-2 border-[#a3dc2f] @endif">TOS</a>
                        </li>
                        <li>
                            <a href="{{ route('contact') }}"
                                class="hover:border-b-2 hover:border-[#A3DC2F] @if (request()->routeIs('contact')) border-b-2 border-[#a3dc2f] @endif">Contact</a>
                        </li>
                        <li>
                            <a href="{{ route('faqs') }}"
                                class="hover:border-b-2 hover:border-[#A3DC2F] @if (request()->routeIs('faqs')) border-b-2 border-[#a3dc2f] @endif">FAQ</a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Buttons (Desktop) -->
            <div class="hidden lg:flex space-x-4">
                @if (user())
                    <a href="{{ route('user.dashboard') }}"
                        class="px-8 py-2 font-semibold rounded-md text-sm text-black gradient-bg justify-center items-center flex">Dashboard</a>
                @else
                    <a href="{{ route('user.login') }}"
                        class="px-8 py-2 font-semibold rounded-md text-sm text-black gradient-bg justify-center items-center flex">Sign
                        In</a>
                    <a href="{{ route('user.register') }}" class="px-8 py-2 gradient-border text-sm rounded-md">Sign
                        Up</a>
                @endif
            </div>
        </div>
    </nav>

    <header id="header">
        @yield('header')
    </header>



    <main class="main" id="main">
        @yield('contents')
    </main>

    <section class="pt-8 md:pt-20 px-6 md:px-20 lg:px-40 mb-4 md:mb-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
            <!-- Left Side: Large Box (Full Height) -->
            <div class="bg-gray-100 p-6 rounded-xl flex flex-col justify-center h-full">
                <p class="text-sm font-medium text-gray-500 md:mb-4">Up to</p>
                <h2 class="text-3xl md:text-5xl font-bold text-gray-800 md:mb-4">
                    USD5.5M+
                </h2>
                <p class="text-gray-600 mt-1">Deposits</p>
            </div>

            <!-- Right Side: Stats Boxes -->
            <div class="flex flex-col gap-4 h-full">
                <div class="bg-gray-100 p-4 rounded-lg flex items-center flex-grow text-lg md:text-xl">
                    <h3 class="font-bold text-gray-800">200+</h3>
                    <span class="ml-2 md:ml-6 text-gray-600">Countries</span>
                </div>
                <div class="bg-gray-100 p-4 rounded-lg flex items-center flex-grow text-lg md:text-xl">
                    <h3 class="font-bold text-gray-800">3.5k</h3>
                    <span class="ml-2 md:ml-6 text-gray-600">Users</span>
                </div>
                <div class="bg-gray-100 p-4 rounded-lg flex items-center flex-grow text-lg md:text-xl">
                    <h3 class="font-bold text-gray-800">USD10.2M+</h3>
                    <span class="ml-2 md:ml-6 text-gray-600">Withdrawals</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Container -->
    <footer class="bg-black text-white px-6 py-12">
        <div class="max-w-7xl mx-auto">
            <!-- Main Footer Content -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <!-- Logo and Description Section -->
                <div class="space-y-6 md:col-span-1">
                    <div class="text-2xl font-bold">
                        <a href="{{ route('home') }}">
                            <img src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo"
                                class="w-32 h-12" />
                        </a>
                    </div>

                    <!-- Social Icons -->
                    <div class="flex space-x-4">
                        <a href="{{ site('twitter') }}" class="hover:text-gray-300">
                            <img src="{{ asset('/assets/templates/lunex/images/Icon awesome-twitter.svg') }}"
                                alt="" class="w-4 h-4" />
                        </a>
                        <a href="{{ site('facebook') }}" class="hover:text-gray-300">
                            <img src="{{ asset('/assets/templates/lunex/images/Icon awesome-facebook.svg') }}"
                                alt="" class="w-4 h-4" />
                        </a>
                        <a href="{{ site('linkedin') }}" class="hover:text-gray-300">
                            <img src="{{ asset('/assets/templates/lunex/images/Icon awesome-linkedin.svg') }}"
                                alt="" class="w-4 h-4" />
                        </a>
                        <a href="{{ site('youtube') }}" class="hover:text-gray-300">
                            <img src="{{ asset('/assets/templates/lunex/images/Icon awesome-youtube.svg') }}"
                                alt="" class="w-4 h-4" />
                        </a>
                    </div>

                    <!-- Description -->
                    <p class="text-gray-300 text-sm">
                        Your ultimate trading companion, utilizing cutting-edge technology
                        to unlock new market potentials and amplify your investment
                        returns like never before.
                    </p>
                </div>

                <!-- Navigation Links -->
                <div class="md:col-span-2 grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-lg font-semibold mb-4">Navigate</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="{{ route('home') }}" class="text-gray-300 hover:text-white">Home</a>
                            </li>
                            <li>
                                <a href="{{ route('about') }}" class="text-gray-300 hover:text-white">About</a>
                            </li>
                            <li>
                                <a href="{{ route('pricing') }}" class="text-gray-300 hover:text-white">Product</a>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-4">Support Us</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="{{ route('faqs') }}" class="text-gray-300 hover:text-white">FAQ's</a>
                            </li>
                            <li>
                                <a href="{{ route('contact') }}" class="text-gray-300 hover:text-white">Contact
                                    Us</a>
                            </li>
                        </ul>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-4">Resources</h3>
                        <ul class="space-y-2">
                            <li>
                                <a href="{{ route('privacy') }}" class="text-gray-300 hover:text-white">Privacy
                                    Policy</a>
                            </li>
                            <li>
                                <a href="{{ route('tos') }}" class="text-gray-300 hover:text-white">Terms of
                                    service</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="space-y-4">
                    <h3 class="text-lg font-semibold">Contact US</h3>
                    <p class="text-gray-300">{{ site('email') }}</p>
                    <p class="text-gray-300">+{{ site('phone') }}</p>
                    <p class="text-gray-300">
                        {{ site('address') }}, {{ site('city') }},{{ site('state') }},
                        {{ site('country') }}
                    </p>
                    <a href="{{ route('contact') }}"
                        class="bg-[#a4db74] text-black px-6 py-2 rounded-4xl hover:bg-[#556f3e] transition-colors">
                        Help Center
                    </a>
                </div>
            </div>

            <!-- Footer Bottom -->
            <div class="mt-12 pt-8 border-t border-gray-800">
                <p class="text-gray-400 text-sm">&copy; All Services Operational</p>
            </div>
        </div>
    </footer>
    {{-- end content --}}



    {{-- 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: #07851c; 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>
