@php
    $customer = auth()->guard('customer')->user();
    $cart = \Cart::getCart();
    $cartItemCount = isset($cart->items) ? count($cart->items) : 0;
@endphp
<div class="sidebar open" id="sidebar-profile">
    <div class="sidebarLogo">
        <a href="{{ route('shop.home.catalog') }}"> <img src="{{bagisto_asset('images/ai-printing-logo.svg')}}"
                alt="Logo" id="logoImg"></a>
        <button class="sidebar-toggle-btn sidebar-toggle-click" id="sidebarToggleBtn"><i class="fas fa-chevron-right sidebar-toggle-click"></i></button>
    </div>
    <ul class="sidebarList dropdownCommon">
        <li>
            <button type="button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="icon"><i class="fas fa-cog"></i></span>
                <span class="title">My Store</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                <a href="{{ route('shop.customers.account.myproduct') }}"> <button class="dropdown-item" type="button">
                        <span class="icon"><i class="fas fa-cog"></i> </span>
                        <p> My Products Store
                            <span class="storeStatus">Connected</span>
                        </p>
                    </button></a>
                </li>
               <!-- <li>
                    <button class="dropdown-item" type="button">
                   <span class="icon"><i class="fab fa-shopify"></i> </span>
                        <p> My Store
                            <span class="storeStatus">Connected</span>
                        </p>
                    </button>
                </li>-->

                <hr>

                <li>
                   <a href="{{ route('shop.manage.store') }}">
                    <button class="dropdown-item" type="button">
                        <p> Manage my stores </p>
                    </button>
                    </a>
                </li>
                <li>
                <a href="{{ route('shop.customers.account.store') }}">
                    <button class="dropdown-item" type="button">
                        <p> Add a new store </p>
                        <span class="icon ms-auto"><i class="fas fa-plus"></i></span>
                    </button></a>
                </li>
            </ul>
        </li>
        <li class="{{ request()->is('customer/account/dashboard') ? 'active' : '' }}">
            <a href="{{ route('shop.customers.account.dashboard') }}">
                <span class="icon"><i class="fas fa-home"></i></span>
                <span class="title">Dashboard</span>
            </a>
        </li>
        <li class="{{ request()->is('catalog') ? 'active' : '' }}">
            <a href="{{ route('shop.home.catalog') }}">
                <span class="icon"><i class="fas fa-file-alt"></i></span>
                <span class="title">Catalog</span>
            </a>
        </li>
        <li class="{{ request()->is('customer/account/myproducts') || request()->is('customer/account/productdetails*') ? 'active' : '' }}">
            <a href="{{ route('shop.customers.account.myproduct') }}">
                <span class="icon"><i class="fas fa-tshirt"></i></span>
                <span class="title">My Products</span>
            </a>
        </li>
        <li class="{{ request()->is('checkout/cart') ? 'active' : '' }}">
            <a href="{{ route('shop.checkout.cart.index') }}">
                <span class="icon"><i class="fa fa-shopping-cart"></i></span>
                <span class="title">Go To Cart </span>
                <span class="cart-count"> ({{ $cartItemCount }})</span>
            </a>
        </li>
        <li class="{{ request()->is('customer/wishlist') ? 'active' : '' }}">
            <a href="{{ route('shop.customers.account.wishlist.index') }}">
                <span class="icon"><i class="fa fa-heart"></i></span>
                <span class="title">Wishlist</span>
            </a>
        </li>
        <li class="{{ request()->is('customer/account/orders*') ? 'active' : '' }}">
            <a href="{{ route('shop.customers.account.orders.index') }}">
                <span class="icon"><i class="fas fa-truck"></i></span>
                <span class="title">My Orders</span>
            </a>
        </li>
        <li class="{{ request()->is('customer/account/reseller-orders') ? 'active' : '' }}">
            <a href="{{ route('shop.customers.account.resellerorders.index') }}">
                <span class="icon"><i class="fas fa-truck"></i></span>
                <span class="title">Reseller Orders</span>
            </a>
        </li>
        <li class="{{ request()->is('customer/account/wallet') ? 'active' : '' }}">
            <a href="{{ route('shop.customers.account.wallet') }}">
                <span class="icon"><i class="fas fa-dollar-sign"></i></span>
                <span class="title">Wallet</span>
            </a>
        </li>
        <!--<li>
            <a href="#">
                <span class="icon"><i class="fas fa-poll"></i></span>
                <span class="title">Insights</span>
            </a>
        </li>-->
        <li class="{{ request()->is('customer/account/profile') || request()->is('customer/account/addresses') ? 'active' : '' }}">
            <button type="button" class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                <span class="icon"><i class="fas fa-cog"></i></span>
                <span class="title">Account</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <a class="dropdown-item" href="{{ route('shop.customers.account.profile.index') }}">
                        My Account
                    </a>
                </li>
                <li>
                    <a class="dropdown-item" href="{{ route('shop.customers.account.addresses.index') }}">
                        My Address
                    </a>
                </li>
                <form method="POST" action="{{ route('shop.customer.session.destroy') }}" id="customerLogout">
                    @csrf
                    <input type="hidden" name="_method" value="DELETE">
                </form>

                <li>
                    <a class="dropdown-item" href="{{ route('shop.customer.session.destroy') }}"
                        onclick="event.preventDefault(); document.getElementById('customerLogout').submit();"> Log Out
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>
@push('scripts')
<script>
// Sidebar Menu Code 
function initialize() {
    const sidebar = document.getElementById('sidebar-profile');
    const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
    const logoImg = document.getElementById('logoImg');
    const collapseBtn = document.getElementById('collapseBtn');
      if (sidebarToggleBtn) {
        sidebarToggleBtn.addEventListener('click', function() {
        console.log('click');
        sidebar.classList.toggle('open');
        const baseUrl = "{{ url('/') }}";
        if (sidebar.classList.contains('open')) {
            logoImg.src = baseUrl +
                '/images/ai-printing-logo.svg'; // Change to big logo when sidebar opens
        } else {
            logoImg.src = baseUrl +
                '/images/aip-logo.svg'; // Change back to small logo when sidebar closes
        }
    });
      } else {
        // Retry if the button is not yet available
        setTimeout(initialize, 100);
      }
    }

document.addEventListener('click', function(event) {
    const sidebar = document.getElementById('sidebar-profile');
    const sidebarToggleBtn = document.getElementById('sidebarToggleBtn');
    const logoImg = document.getElementById('logoImg');
    const collapseBtn = document.getElementById('collapseBtn');
    if (event.target && event.target.classList.contains('sidebar-toggle-click')) {
        sidebar.classList.toggle('open');
        const baseUrl = "{{ url('/') }}";
        if (sidebar.classList.contains('open')) {
            logoImg.src = '{{bagisto_asset('images/ai-printing-logo.svg')}}'; // Change to big logo when sidebar opens
        } else {
            logoImg.src = '{{bagisto_asset('images/aip-logo.svg')}}'; // Change back to small logo when sidebar closes
        }
    }
   

    // collapseBtn.addEventListener('click', function () {
    //     sidebar.classList.remove('open');
    //     logoImg.src = 'images/aip-logo.svg'; // Change back to small logo when sidebar collapses
    // });

});

document.addEventListener('click', function(event) {
      // Check if the clicked element is the button with class 'shop-button'
      if (event.target && event.target.classList.contains('shop-button')) {
        handleClick(event);
      }
    });

    // Define the click event handler function
    function handleClick(event) {
      console.log('Button clicked!');
      alert('Button clicked!');
    }
</script>
@endpush