@section('title', 'Área do Cliente - ZEINER')
<div class="bg-gray-100">  
        
  <livewire:dashboard.client.header />
  <x-dashboard.side-bar />


    <!-- OVERLAY (quando sidebar está aberta no mobile) -->
    <div id="overlay" class="hidden fixed inset-0 bg-black bg-opacity-40 z-40 lg:hidden"></div>

        <!-- CONTEÚDO PRINCIPAL -->
        <main class="lg:ml-64 pt-15 p-6">
            <h1 class="text-3xl font-bold text-gray-700 mb-6">Área do Cliente</h1>
                        
        <x-dashboard.stats />
          <livewire:dashboard.client.company-service />           
        </main>
        <x-home.whatsapp-floating-button />    
   
    </div>


 @push('scripts')
    <script>
        const sidebar = document.getElementById("sidebar");
        const menuBtn = document.getElementById("menuBtn");
        const overlay = document.getElementById("overlay");
        const closeSidebar = document.getElementById("closeSidebar");


        closeSidebar.onclick = () => {
            sidebar.classList.add("-translate-x-full");
            overlay.classList.add("hidden");
        };

        menuBtn.onclick = () => {
            sidebar.classList.toggle("-translate-x-full");
            overlay.classList.toggle("hidden");
        };

        overlay.onclick = () => {
            sidebar.classList.add("-translate-x-full");
            overlay.classList.add("hidden");
        };

        const userMenuBtn = document.getElementById("userMenuBtn");
        const userMenu = document.getElementById("userMenu");
        const userMenuWrapper = document.getElementById("userMenuWrapper");

        // Abre e fecha ao clicar
        userMenuBtn.onclick = () => {
            userMenu.classList.toggle("hidden");
        };

        // Fecha ao clicar fora
        document.addEventListener("click", function (event) {
            if (!userMenuWrapper.contains(event.target)) {
                userMenu.classList.add("hidden");
            }
        });

    </script>     
 @endpush
