@extends('theme::layout.layout')

@section('title', env('APP_NAME_DASHBOARD') . ' | Gerenciar Dispositivos')

@section('content')
<div class="container mx-auto px-4 py-8">
    <!-- Título e Botão de Adicionar Novo Grupo -->
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between mb-6">
        <div>
            <h2 class="text-2xl font-bold text-gray-800 uppercase">Gerenciar Dispositivos</h2>
            <p class="text-gray-600 mt-1">Essa funcionalidade é essencial para gerenciar dispositivos de WhatsApp.</p>
        </div>
        <a id="openModalBtn" style="text-transform: uppercase; cursor: pointer; border-radius: 25px;" 
            class="mt-4 md:mt-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <i data-feather="phone" class="mr-2"></i> ADICIONAR NOVO Dispositivo
        </a>
    </div>

    <style type="text/css">
        #buttonsContainer button { text-transform: uppercase; font-weight: 500; width: 100%; margin-bottom: 0.5em; border-radius: 25px; }
        #generateNewQRBtn { text-transform: uppercase; font-weight: 500; }
        #buttonsContainer { display: inline-flex; align-content: center; flex-wrap: wrap; width: 100%; }
        @media (max-width: 600px) {
            #modal { padding: 1em; }
           /* #qrCodeImage { width: 70%;  margin-left: 15%; }*/
        }
        /* #qrCodeImage { width: 90%;  margin-left: 5%; }*/
        #qrCodeImage { border: solid 1px #00000045; }
        .bg-black { background-color: rgb(0 0 0 / 81%); }
    </style>

    @if(session('success'))
        <div id="alert-border-3" class="flex items-center p-4 mb-4 text-green-800 border-t-4 border-green-300 bg-green-50 dark:text-green-400 dark:bg-gray-800 dark:border-green-800" role="alert" style="margin-bottom: 0em; margin-top: 0.5em;">
          <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
          </svg>
          <div class="ms-3 text-sm font-medium">
            {{ session('success') }}
          </div>
          <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700"  data-dismiss-target="#alert-border-3" aria-label="Close">
            <span class="sr-only">Dismiss</span>
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
          </button>
        </div>
    @endif

    @if(session('error'))
        <div id="alert-border-2" class="flex items-center p-4 mb-4 text-red-800 border-t-4 border-red-300 bg-red-50 dark:text-red-400 dark:bg-gray-800 dark:border-red-800" role="alert" style="margin-bottom: 0em; margin-top: 0.5em;">
            <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
            </svg>
            <div class="ms-3 text-sm font-medium">
                {{ session('error') }}
            </div>
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700"  data-dismiss-target="#alert-border-2" aria-label="Close">
            <span class="sr-only">Dismiss</span>
            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
            </svg>
            </button>
        </div>
    @endif

    <div id="modal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
        <div class="bg-white rounded-lg w-96 p-6" style="text-align: center;">
            <h2 class="text-xl font-semibold mb-1" style="text-transform: uppercase; font-size: 1em!important;">Acessar WhatsApp Web</h2>
            <p style="line-height: normal; font-size: 0.9em;">Use o WhatsApp no seu navegador para enviar mensagens privadas para seus amigos e familiares.</p>
            
            <!-- Input para o número de WhatsApp -->
            <input style="margin-top: 2em; margin-bottom: 1.5em;" id="whatsappNumber" value="82981940045" type="text" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6" placeholder="Digite o número do WhatsApp">
            
            <!-- Botões -->
            <div id="buttonsContainer" class="flex justify-between">
                <button id="confirmBtn" class="bg-green-500 text-white py-2 px-4 rounded">Conectar WhatsApp</button>
                <button id="closeModalBtn" class="bg-red-500 text-white py-2 px-4 rounded" style="display: unset!important;">Cancelar Conexão</button>
            </div>

            <!-- QR Code -->
            <div id="qrCodeContainer" class="mt-4 hidden">
            <!--     <h3 class="font-semibold">QR Code:</h3> -->
                <img style="border-radius: 5px;" id="qrCodeImage" class="w-full mt-2" src="" alt="QR Code">
                <!-- Botão para gerar novo QR Code -->
                <button style="background-color: #22c55e; width: 100%; border-radius: 25px;" id="generateNewQRBtn" class="bg-blue-500 text-white py-2 px-4 rounded mt-4 hidden">Gerar Novo QR Code</button>
            </div>

            <!-- Loading -->
            <div id="loadingContainer" class="hidden mt-4 text-center">
                <p style="color: #22c55e; text-transform: uppercase; font-weight: 500;">Carregando QR CODE...</p>
                <div style="width: 100%; text-align: center; display: inline-flex; justify-content: center; align-items: center;">
                    <img src="{{ asset('images/themes/whatsapp-loading.gif') }}" style="width: 5em;">
                </div>
            </div>

            <!-- Timer -->
            <div id="timerContainer" class="hidden mt-4 text-center">
                <p>Tempo de expiração: <span id="timer" style="font-weight: 500;">02:00</span></p>
            </div>
        </div>
    </div>

    <div class="py-0">
        @if($pages->count() > 0)
          <form action="dispositivos/delet" method="POST" id="massDeleteForm">
            @csrf
            @method('POST')
            <div class="-mx-4 sm:-mx-8 px-4 sm:px-8 py-4 overflow-x-auto">
              <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden" style="background-color: #fff!important;">
                <table class="min-w-full leading-normal">
                  <thead>
                    <tr>
                      <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider"><input type="checkbox" id="selectAll" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" style="margin-right: 0.5em;"> WhatsApp <button type="submit" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-4 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-red-700 stroke-white text-white hover:bg-red-950 h-[25px] min-w-[25px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4" id="massDeleteBtn" disabled style="text-transform: uppercase; margin-left: 0.5em;">Excluir <i data-feather="x-circle" class='mr-0'></i></button></th>
                      <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Data de Criação</th>
                      <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Última atualização</th>
                       <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                      <!-- <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100"></th> -->
                    </tr>
                  </thead>
                  <tbody>
                    @foreach ($pages as $page)
                        @php
                        $dateTime = $page->created_at;

                        // Crie um objeto DateTime a partir da string
                        $date = new DateTime($dateTime);

                        // Separe a data e a hora
                        $onlyDate = $date->format('d/m/Y');
                        $onlyTime = $date->format('H:i:s');


                        $dateTime_1 = $page->updated_at;

                        // Crie um objeto DateTime a partir da string
                        $date_1 = new DateTime($dateTime_1);

                        // Separe a data e a hora
                        $onlyDate_1 = $date_1->format('d/m/Y');
                        $onlyTime_1 = $date_1->format('H:i:s');
                        @endphp
                        <tr>
                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <div class="flex">
                              <input id="offers" name="posts[]" value="{{ $page->id }}" type="checkbox" class="postCheckbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" style="margin-right: 0.5em; margin-top: 0.7em;">

                              <img class="w-10 h-10 rounded-full" src="{{ $page->thumbnail ? asset('thumbnails/avatar/' . $page->thumbnail) : asset('images/avatar.jpg') }}" alt="">

                              <div class="ml-3">
                                <p class="text-gray-900 whitespace-no-wrap"> {{ $page->phone }}</p>
                                <p class="text-gray-600 whitespace-no-wrap">
                                    {{ $page->name }}
                                </p>
                              </div>
                            </div>
                          </td>

                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <p class="text-gray-900 whitespace-no-wrap">{{ $onlyDate }}</p>
                            <p class="text-gray-600 whitespace-no-wrap">{{ $onlyTime }}</p>
                          </td>

                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <p class="text-gray-900 whitespace-no-wrap">{{ $onlyDate_1 }}</p>
                            <p class="text-gray-600 whitespace-no-wrap">{{ $onlyTime_1 }}</p>
                          </td>

                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-1.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">ATIVO</button>
                          </td>

                         <!--  <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                            <a href="{{env('APP_URL')}}admin/builder/domains/{{ $page->id }}/edit" type="button" class="inline-block text-gray-500 hover:text-gray-700">
                              <svg class="inline-block h-6 w-6 fill-current"
                                viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm-2 6a2 2 0 104 0 2 2 0 00-4 0z"/></svg>
                            </a>
                          </td> -->

                        </tr>
                    @endforeach
                  </tbody>
                </table>

                <!-- Links de paginação -->
                <div style="padding: 1em 1em;">
                  {{ $pages->links() }}
                </div>

              </div>
            </div>
          </form>
        @else
          <div style="margin-top: 1.5em;" id="alert-additional-content-2" class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
            <div class="flex items-center">
              <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
              </svg>
              <span class="sr-only">Info</span>
              <h3 class="text-lg font-medium">Atenção</h3>
            </div>
            <div class="mt-2 mb-4 text-sm">
              Não foram encontrados itens disponíveis em nosso banco de dados.
            </div>
            <div class="flex">
              <!-- <a style="text-transform: uppercase;" href="{{ route('admin.pages.create') }}" class="text-white bg-red-800 hover:bg-red-900 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 me-2 text-center inline-flex items-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">
                <i data-feather="plus" class='mr-0'></i>
                Adicionar páginas
              </a> -->
              <button style="text-transform: uppercase;" type="button" class="text-red-800 bg-transparent border border-red-800 hover:bg-red-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-red-600 dark:border-red-600 dark:text-red-500 dark:hover:text-white dark:focus:ring-red-800" data-dismiss-target="#alert-additional-content-2" aria-label="Close">
                Fechar
              </button>
            </div>
          </div>
        @endif
    </div>

    <script>
        let qrInterval;  // Para armazenar o intervalo de requisição do QR Code
        let timerInterval;  // Para o timer de 1 minuto
        let remainingTime = 120;  // Tempo inicial do timer (60 segundos)
        let isTimerActive = false; // Flag para garantir que o timer só inicie uma vez

        // Função para formatar segundos no formato mm:ss
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
        }

        // Função para atualizar o timer na tela
        function updateTimer() {
            document.getElementById('timer').innerText = formatTime(remainingTime);
            if (remainingTime <= 0) {
                clearInterval(timerInterval); // Parar o timer
                resetConnection();  // Reiniciar o processo de conexão
            } else {
                remainingTime--;
            }
        }

        // Função para resetar o processo de conexão
        function resetConnection() {
            // Limpar o QR Code
            document.getElementById('qrCodeImage').src = '';
            document.getElementById('qrCodeContainer').classList.add('hidden');
            document.getElementById('loadingContainer').classList.add('hidden');

            // Exibir os inputs novamente
            document.getElementById('buttonsContainer').style.display = 'flex';
            document.getElementById('whatsappNumber').style.display = 'block'; // Mostrar o campo de número
            document.getElementById('whatsappNumber').value = ''; // Limpar o campo de número

            // Parar os intervalos
            clearInterval(qrInterval);
            document.getElementById('timerContainer').classList.add('hidden'); // Esconder o timer
            remainingTime = 60; // Resetar o timer
            document.getElementById('timer').innerText = remainingTime;
            isTimerActive = false;  // Resetar flag do timer
        }

        // Abrir Modal
        document.getElementById('openModalBtn').addEventListener('click', function() {
            document.getElementById('modal').classList.remove('hidden');
        });

        // Fechar Modal
        document.getElementById('closeModalBtn').addEventListener('click', function() {
            document.getElementById('modal').classList.add('hidden');
        });

        // Confirmar número e iniciar sessão
        document.getElementById('confirmBtn').addEventListener('click', async function() {
            const whatsappNumber = document.getElementById('whatsappNumber').value.trim();
            
            if (whatsappNumber === "") {
                alert("Por favor, insira um número válido.");
                return;
            }

            try {
                // Esconde inputs e exibe o loading
                document.getElementById('buttonsContainer').style.display = 'none';
                document.getElementById('loadingContainer').classList.remove('hidden');
                document.getElementById('whatsappNumber').style.display = 'none'; // Esconde o input de número

                // Enviar request para iniciar a sessão
                const startResponse = await axios.get(`{{$Api_Url}}start/${whatsappNumber}`);
                console.log(startResponse.data);

                // Após iniciar, começamos a requisição do QR Code em intervalos
                qrInterval = setInterval(async function() {
                    try {
                        const qrResponse = await axios.get(`{{$Api_Url}}qr/${whatsappNumber}`);
                        if (qrResponse.data.qr) {
                            // Exibir QR Code
                            document.getElementById('qrCodeImage').src = qrResponse.data.qr;
                            document.getElementById('qrCodeContainer').classList.remove('hidden');
                            document.getElementById('generateNewQRBtn').classList.remove('hidden');
                            document.getElementById('loadingContainer').classList.add('hidden'); // Esconde o loading
                            
                            // Iniciar o timer de 1 minuto, se não estiver ativo
                            if (!isTimerActive) {
                                document.getElementById('timerContainer').classList.remove('hidden'); // Exibe o timer
                                timerInterval = setInterval(updateTimer, 1000);  // Começa o timer
                                isTimerActive = true;  // Marcar o timer como ativo
                            }
                        } else {
                            if (qrResponse.data.message == "Cliente já está conectado.") {
                                console.log("Cliente já está conectado..");
                            } else {
                                console.log("Em conexão..");
                            }
                        }
                    } catch (error) {
                        console.error("Erro ao buscar o QR Code", error);
                        clearInterval(qrInterval); // Para o intervalo em caso de erro
                    }
                }, 5000); // Faz a requisição a cada 5 segundos

            } catch (error) {
                console.error(error);
                alert("Erro ao iniciar a sessão.");
            }
        });

        // Gerar Novo QR Code
        document.getElementById('generateNewQRBtn').addEventListener('click', function() {
            // Limpar o QR Code atual
            document.getElementById('qrCodeImage').src = '';
            document.getElementById('qrCodeContainer').classList.add('hidden');
            document.getElementById('loadingContainer').classList.add('hidden');

            // Exibir os inputs novamente
            document.getElementById('buttonsContainer').style.display = 'flex';
            document.getElementById('whatsappNumber').style.display = 'block'; // Mostrar o campo de número
            document.getElementById('whatsappNumber').value = ''; // Limpar o campo de número

            // Parar o intervalo do QR Code
            clearInterval(qrInterval);
            clearInterval(timerInterval);
            document.getElementById('timerContainer').classList.add('hidden'); // Esconder o timer
            remainingTime = 60; // Resetar o timer
            document.getElementById('timer').innerText = remainingTime;
            isTimerActive = false;  // Resetar flag do timer
        });

        document.getElementById('selectAll').addEventListener('click', function() {
            const checkboxes = document.querySelectorAll('.postCheckbox');
              checkboxes.forEach(checkbox => {
                  checkbox.checked = this.checked;
              });
              toggleDeleteButton();
        });

        document.querySelectorAll('.postCheckbox').forEach(checkbox => {
              checkbox.addEventListener('click', toggleDeleteButton);
        });

        function toggleDeleteButton() {
            const checkedCheckboxes = document.querySelectorAll('.postCheckbox:checked');
            const deleteButton = document.getElementById('massDeleteBtn');
            deleteButton.disabled = checkedCheckboxes.length === 0;
        }
    </script>
</div>
@endsection