@section('title', 'Serviços - ZEINER')
<div class="bg-gray-100">  
  <livewire:dashboard.client.header />
  <x-dashboard.admin-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">Serviços</h1>

         <div class="flex items-center gap-2 mb-5">
             <button
                    wire:click='addService'
                    class="px-3 py-1.5 rounded-md bg-blue-600 text-white text-sm font-medium
                    hover:bg-blue-700 transition focus:outline-none  focus:ring-2 focus:ring-blue-400">
                    Adicionar
            </button>

            <input type="text" class="px-3 py-1.5 w-full rounded-md focus:outline-none focus:border-blue-400 border border-gray-300  " placeholder="Pesquisar aplicativo"/>
         </div>


    <!-- TABELA DE APPS -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full border-collapse">

                    <!-- HEAD (desktop) -->
                    <thead class="hidden md:table-header-group bg-gray-100">
                        <tr class="bg-blue-600 text-white">
                            <th class="px-6 py-4  text-sm font-semibold ">Aplicativo</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Versão</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Linguagem</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Descrição</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Ficheiro</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Download</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Tamanho</th>
                            <th class="px-6 py-4  text-sm font-semibold ">Opções</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200">

                        <!-- USER ROW -->
                        @forelse($data as $key => $application)
                        <tr class="block md:table-row p-4 md:p-0 hover:bg-gray-50 transition">

                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <p class="text-gray-700 font-medium">
                                    {{$application['app_name']}}
                                </p>
                            </td>

                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <p class="text-gray-700">

                                </p>
                            </td>

                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <p class="text-gray-700">
                                </p>
                            </td>

                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <p class="text-gray-700"></p>
                                
                            </td>
                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <p class="text-gray-700"></p>
                            </td>
                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <p class="text-gray-700">

                                </p>                                
                            </td>

                            <td class="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                <div class="flex  gap-2 items-center text-white">
                                    <button
                                        class="px-3 py-1.5 rounded-md bg-blue-600 text-white text-sm font-medium
                                            hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-400">
                                        Editar
                                    </button>

                                    <button
                                        class="px-3 py-1.5 rounded-md bg-red-600 text-white text-sm font-medium
                                            hover:bg-red-700 transition focus:outline-none focus:ring-2 focus:ring-red-400">
                                        Eliminar
                                    </button>

                                </div>
                            </td>

                        </tr>
                        @empty
                         <tr class="hover:bg-gray-50 transition">
                            <td colspan="100%" class=" px-6 py-4">
                                <p class="text-gray-700 text-center font-medium w-full">
                                    Nenhum resultado encontrado!
                                </p>
                            </td>
                        </tr>

                        @endforelse
                        

                    </tbody>
                </table>
            </div>
        </div>

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