@section('title', 'Gestão Central de Licenças - 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">Gestão Central de Licenças</h1>

         <div class="flex items-center gap-2 mb-5">
             <button
                    wire:click='addApplication'
                    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">

            <thead class="bg-blue-600 text-white">
                <tr>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Código</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Cilente</eth>
                    <th class="px-6 py-4 text-left text-sm font-semibold">IP</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Posto</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Produto</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Parceiro</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Ativação</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Expiração</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold">Status</th>
                    <th class="px-6 py-4 text-center text-sm font-semibold">Duração</th>
                    <th class="px-6 py-4 text-center text-sm font-semibold">Amb.Serviço</th>
                </tr>
            </thead>

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

                @forelse($data as $application)
                <tr class="hover:bg-gray-50 transition">

                    <td class="px-6 py-4 font-medium text-gray-800">
                        {{ $application['app_name'] }}
                    </td>

                    <td class="px-6 py-4 text-gray-700">
                        {{ $application['version'] ?? '-' }}
                    </td>

                    <td class="px-6 py-4 text-gray-700">
                        {{ $application['language'] ?? '-' }}
                    </td>

                    <td class="px-6 py-4 text-gray-700 max-w-xs truncate">
                        {{ $application['description'] ?? '-' }}
                    </td>

                    <td class="px-6 py-4 text-gray-700">
                        {{ $application['file_name'] ?? '-' }}
                    </td>

                    <td class="px-6 py-4 text-gray-700">
                        {{ $application['file_size'] ?? '-' }}
                    </td>

                    <td class="px-6 py-4">
                        <span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md bg-green-100 text-green-700">
                            <i class="fa-solid fa-check"></i>
                            Ativa
                        </span>
                    </td>

                    <td class="px-6 py-4">
                        <div class="flex justify-center gap-2">
                            <button class="w-9 h-9 flex items-center justify-center rounded-md bg-red-500 hover:bg-red-600 text-white">
                                <i class="fa-solid fa-lock"></i>
                            </button>

                            <button class="w-9 h-9 flex items-center justify-center rounded-md bg-blue-500 hover:bg-blue-600 text-white">
                                <i class="fa-solid fa-rotate"></i>
                            </button>

                            <button class="w-9 h-9 flex items-center justify-center rounded-md bg-gray-500 hover:bg-gray-600 text-white">
                                <i class="fa-solid fa-trash"></i>
                            </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

