<!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="#0F172A">
    <meta name="theme-color" content="#0F172A">
    <title> {{ $page_title }} | {{ site('name') }}</title>

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

    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    {{-- rubik 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=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    {{-- sweet alert 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/trello/css/main.css') }}"> --}}

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

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

    <style>
        .button-spinner {
            border: 4px solid #f3f3f3;
            /* Light grey background */
            border-top: 4px solid #3498db;
            /* Blue color for the spinner */
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            /* Spinning animation */
            position: absolute;
            /* display: inline-block; */
            top: 3px;
            left: 3px;

        }

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

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

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


        /* logout button */
        /* .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;
        } */

        .active-nav-gradient::before {
            content: '';
            position: absolute;
            width: 62px;
            height: 48px;
            bottom: 4px;
            right: 14px;
            border-radius: 9999px;
            z-index: -10;
            filter: blur(10px);
            background: conic-gradient(#561BBE 0deg, #70E6FB 90deg, #FBF8B3 180deg, #FA8792 270deg);

        }
    </style>

    <style>
        body {
            display: flex;
            min-height: 100vh;
        }

        #sidebar {
            width: 112px;
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            z-index: 10;
            display: flex;
            flex-direction: column;
        }

        #navigation-items {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.5rem;
        }

        #main-content {
            flex: 1;
            margin-left: 112px;
            max-width: calc(100% - 112px);
        }

        /* For tablet and mobile screens */
        @media (max-width: 1023px) {
            #sidebar {
                transform: translateX(-100%);
                height: 50vh;
                top: 10% !important;
                display: flex;
                flex-direction: column;
            }

            #navigation-items {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                overflow-y: auto;
                max-height: calc(100vh - 80px);
                /* Account for logo area */
            }

            #sidebar.translate-x-0 {
                transform: translateX(0);
            }

            #main-content {
                margin-left: 0;
                max-width: 100%;
            }
        }

        /* For larger screens */
        @media (min-width: 1280px) {
            #sidebar {
                height: 50vh !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
            }

            #navigation-items {
                max-height: none;
                overflow: visible;
            }

            .space-y-6 {
                margin-top: 0 !important;
            }
        }

        /* For larger screens */
        @media (min-width: 1024px) {
            #sidebar {
                height: 50vh !important;
                top: 50% !important;
                transform: translateY(-50%) !important;
                background: rgba(255, 255, 255, 0.5);
            }

            #navigation-items {
                max-height: none;
                overflow: visible;
            }

            .space-y-6 {
                margin-top: 0 !important;
            }
        }
    </style>

    @yield('css')
    {{-- @vite(['public/assets/templates/trello/css/main.css']) --}}
</head>

<body class="bg-[#0F172A]  overflow-x-hidden">
    {{-- preloader  --}}
    @if (site('preloader') == 1)
        @include('templates.' . site('template') . '.loaders.preloader')
    @endif
    {{-- preloader ends  --}}

    <div id="app" class="w-full">

        <!-- Mobile Nav Bar -->
        <div
            class="lg:hidden w-screen  bg-white/50 backdrop-blur-sm z-30 flex items-center justify-between px-4 py-2 border-b border-b-gray-400">
            <div class="flex items-center"> <a href="{{ route('user.dashboard') }}"> <img
                        src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo"
                        class="w-32 md:w-40" /></a>

            </div>

            <div class="flex items-center">
                <div x-data="{ open: false }" class="relative">
                    <!-- Profile Button mobile and tablet -->

                    <button class="rounded-full focus:outline-none  focus:ring-offset-2 flex items-center"
                        @click="open = !open">
                        <img src="{{ asset('storage/profile/' . user()->photo) }}" alt="Profile Icon"
                            class="h-8 w-8 rounded-full" />
                    </button>
                    <!-- Dropdown Menu -->
                    <div x-show="open" @click.away="open = false"
                        class="absolute right-0 mt-2 w-48 z-50 bg-gradient-to-r from-slate-800/90 to-slate-600/90  shadow-lg rounded-lg overflow-hidden">
                        <a href="{{ route('user.profile.index') }}"
                            class="block px-4 py-2 text-gray-200 hover:text-[#bd7fee]">My
                            Profile</a>
                        <a href="{{ route('user.profile.edit') }}"
                            class="block px-4 py-2 text-gray-200 hover:text-[#bd7fee]">Edit Profile</a>
                        <a href="{{ route('user.kyc.index') }}"
                            class="block px-4 py-2 text-gray-200 hover:text-[#bd7fee]">KYC</a>
                        <form method="POST" action="{{ route('user.logout') }}" class="gen-form"
                            data-action="redirect" data-url="{{ url('/') }}">
                            @csrf
                            <button type="submit" class="w-full text-left px-4 py-2 text-gray-200 bg-[#ea0a0e]">
                                Logout
                            </button>
                        </form>
                    </div>

                </div>

                <button id="toggle-sidebar" class="text-gray-300">
                    <!-- Hamburger Icon -->
                    <svg id="hamburger-icon" 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>
                    <!-- X Icon (hidden by default) -->
                    <svg id="close-icon" xmlns="http://www.w3.org/2000/svg"
                        class="h-6 w-6 transition-transform duration-300 hidden" 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:block fixed top-0 right-0 left-0 border-b border-b-gray-600 z-10 py-3 backdrop-blur-md ">

            <div class="flex items-center h-16 px-6 relative">
                <!-- Profile Icon with Dropdown -->
                <div class="flex items-center justify-between w-full">
                    <div class="flex items-center p-4 justify-start">
                        <img id="sidebar-logo" src="{{ asset('assets/images/' . site('logo_rec')) }}" alt="Logo"
                            class="w-60" />
                    </div>

                    <div class="relative p-4" x-data="{ open: false }">
                        <!-- Profile Button -->
                        <button @click="open = !open"
                            class="rounded-full focus:outline-none focus:ring-offset-2 focus:ring-none flex gap-2 items-center">
                            <img src="{{ asset('storage/profile/' . user()->photo) }}" alt="Profile Icon"
                                class="h-12 w-12 rounded-full" />
                            <p class="text-white text-sm">{{ user()->name ?? 'Not Set' }}</p>
                            <img src="{{ asset('/assets/templates/trello/images/dropdown-icon.svg') }}" alt=""
                                class="h-4 w-4">
                        </button>

                        <!-- Dropdown Menu -->
                        <div x-show="open" @click.away="open = false"
                            class="absolute right-0 mt-2 w-48 bg-gradient-to-r from-slate-800/90 to-slate-600/90 backdrop-blur-sm shadow-lg rounded-2xl overflow-hidden z-50">
                            <a href="{{ route('user.profile.index') }}"
                                class="block px-4 py-2 text-gray-200 hover:text-[#bd7fee]">My
                                Profile</a>
                            <a href="{{ route('user.profile.edit') }}"
                                class="block px-4 py-2 text-gray-200 hover:text-[#bd7fee]">Edit
                                Profile</a>
                            <a href="{{ route('user.kyc.index') }}"
                                class="block px-4 py-2 text-gray-200 hover:text-[#bd7fee]">KYC</a>
                            <form method="POST" action="{{ route('user.logout') }}" class="gen-form"
                                data-action="redirect" data-url="{{ url('/') }}">
                                @csrf
                                <button type="submit"
                                    class="w-full text-left px-4 py-2 text-gray-200 bg-[#ea0a0e] cursor-pointer ">
                                    Logout
                                </button>
                            </form>
                        </div>
                    </div>

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

        <!-- Sidebar -->
        <div id="sidebar"
            class=" min-h-fit bg-white/25 backdrop-blur-sm rounded-tr-4xl md:rounded-tr-[200px] rounded-br-4xl md:rounded-br-[200px] transition-all duration-300 ease-in-out z-40 lg:translate-x-0 w-28 md:py-20">

            <!-- Logo Section -->

            <!-- Navigation Links -->
            <nav class="flex-1 flex flex-col">
                <div class="space-y-0" id="navigation-items">
                    <!-- Navigation items will be inserted here by jQuery -->
                </div>
            </nav>
        </div>

        {{-- main body content  --}}
        @yield('contents')
        {{-- <div class="min-h-[80vh]"></div> --}}

        <footer class="min-w-screen mx-auto">
            <div class="mt-8 text-center text-sm text-gray-400 mb-4">
                All Rights Operational
            </div>
        </footer>


    </div>



    {{-- sidebar script  --}}
    <script>
        $(document).ready(function() {
            // Navigation items data
            const navigationItems = [{
                    name: 'Dashboard',
                    icon: "{{ asset('assets/templates/trello/images/dashboard-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.dashboard') }}",
                    active: "{{ request()->routeIs('user.dashboard') }}"
                },
                {
                    name: 'Deposit',
                    icon: "{{ asset('assets/templates/trello/images/deposit-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.deposits.index') }}",
                    active: "{{ request()->routeIs('user.deposits.index') }}"
                },
                {
                    name: 'AI Bots',
                    icon: "{{ asset('assets/templates/trello/images/ai-bots-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.bots.index') }}",
                    active: "{{ request()->routeIs('user.bots.index') }}"

                },
                {
                    name: 'Withdraw',
                    icon: "{{ asset('assets/templates/trello/images/withdrawal-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.withdrawals.index') }}",
                    active: "{{ request()->routeIs('user.withdrawals.index') }}"

                },
                {
                    name: 'P2p',
                    icon: "{{ asset('assets/templates/trello/images/peer-to-peer-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.transfers.index') }}",
                    active: "{{ request()->routeIs('user.transfers.index') }}"

                },
                {
                    name: 'My Referrals',
                    icon: "{{ asset('assets/templates/trello/images/referrals-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.referrals') }}",
                    active: "{{ request()->routeIs('user.referrals') }}"


                },
                {
                    name: 'My Transactions',
                    icon: "{{ asset('assets/templates/trello/images/transaction-icon.svg') }}",
                    hasDropdown: false,
                    link: "{{ route('user.transactions.index') }}",
                    active: "{{ request()->routeIs('user.transactions.index') }}"

                }
            ];



            // Set active menu item based on current URL
            const currentPath = window.location.href;
            navigationItems.forEach(item => {
                if (currentPath === item.link) {
                    item.active = true;
                }
            });

            // Variables for tracking state
            let isSidebarOpen = false;

            // Render navigation items
            function renderNavigationItems() {
                $('#navigation-items').empty();

                navigationItems.forEach((item, index) => {
                    const navItem = $(`
                <div class="relative">
                    <a href="${item.link}" 
                        class="flex flex-col items-center gap-1 px-1 transition-all duration-300 ${item.active ? 'active-nav-gradient text-white'  : 'text-white/50 hover:text-gray-600'}" 
                        data-index="${index}">
                        <div class="relative w-10 h-10 flex items-center justify-center rounded-full ${item.active ? 'text-white ' : 'bg-transparent'}">
                            <img src="${item.icon}" class="h-5 w-5" alt="${item.name}" />
                        </div>
                        <span class="text-sm text-center">${item.name}</span>
                    </a>
                </div>
            `);

                    $('#navigation-items').append(navItem);
                });
            }

            // Toggle sidebar on mobile only
            $('#toggle-sidebar').on('click', function() {
                isSidebarOpen = !isSidebarOpen;
                if (isSidebarOpen) {
                    $('#sidebar').removeClass('-translate-x-full').addClass('translate-x-0');
                    $('#hamburger-icon').addClass('hidden');
                    $('#close-icon').removeClass('hidden');
                } else {
                    $('#sidebar').removeClass('translate-x-0').addClass('-translate-x-full');
                    $('#hamburger-icon').removeClass('hidden');
                    $('#close-icon').addClass('hidden');
                }
            });

            // Initial render
            renderNavigationItems();
        });
    </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/trello/scripts/dashboard.js') }}"></script>

    @yield('scripts')
    @stack('scripts')



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



</body>

</html>
