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

@section('title', ''.env('APP_NAME').' | Páginas')

@section('content')
    <style>
        .text-gray-900 { color: #fff; }
        .text-gray-600 { color: #ffffffb3; }
        th { background-color: #1f2937 !important; }
        #massDeleteForm > div > div > div { background-color: #1f2937 !important; }
    </style>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <div class="section container px-5 py-8 mx-auto" style="width: 100%;">
        <div class="space-y-12">
            <div class="border-gray-900/10 pb-0">
                <div class="title-drake-fusion-formated">
                    <h2 class="text-base font-semibold leading-4 text-gray-900 inline-flex-aliest" style="text-transform: uppercase;">
                        Listagem das suas Páginas <a href="{{env('APP_URL')}}user/facebook/meta/accounts" style="cursor: pointer;" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-2 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
                        <i data-feather="plus" class='mr-0'></i> <span>ADICIONAR CONTA</span>
                    </a>
                    </h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Gostaria de editar ou ver os detalhes das suas páginas?</p>
                </div>
                <hr style="margin-top: 1em; border-color: #e5e7eb36;">
            </div>
        </div>

        <div class="flex items-center justify-center w-full mt-10">
            <form action="{{env('APP_URL')}}user/facebook/meta/upload/json" method="POST" enctype="multipart/form-data" class="w-full">
                @csrf
                <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-30 border-2 border-gray-600 border-dashed rounded-lg cursor-pointer bg-gray-800 hover:bg-gray-700 dark:border-gray-500 dark:hover:border-gray-400">
                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                        <svg class="w-8 h-8 mb-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                        </svg>
                        <p class="mb-2 text-sm text-gray-400"><span class="font-semibold">Clique para enviar</span> ou arraste e solte</p>
                        <p class="text-xs text-gray-400">Somente arquivos JSON (Máx. 2MB)</p>
                    </div>
                    <input id="dropzone-file" name="json_file" type="file" accept=".json" class="hidden" required />
                </label>

                <div class="mt-3 flex justify-end">
                    <button style="width: 100%; text-transform: uppercase;" type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-lg shadow-md hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-800">
                        Enviar Arquivo
                    </button>
                </div>
            </form>
        </div>

        @if(session('success'))
            <div style="margin-top: 1em;" class="p-4 mb-4 text-sm text-green-700 bg-green-100 rounded-lg border border-green-400">
                <span class="font-medium">Sucesso!</span> {{ session('success') }}
            </div>
        @endif


        @if(session('error'))
            <div class="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg border border-red-400">
                <span class="font-medium">Erro!</span> {{ session('error') }}
            </div>
        @endif


        <div class="py-0">
            @if($Count_Accounts > 0)
              <form action="" method="POST" id="massDeleteForm" style="margin-top: 0.5em;">
                @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">

                    <table class="min-w-full leading-normal">
                      <thead>
                        <tr>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Página
                          </th>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Leads
                          </th>
                         <!--  <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Banidos
                          </th> -->
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Administrador
                          </th>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider">
                            Data de Criação
                          </th>
                          <th class="px-5 py-3 border-b-2 border-gray-700 bg-gray-900 text-left text-xs font-semibold text-gray-200 uppercase tracking-wider"></th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($Accounts as $Account)
                          @php
                              $dateTime = $Account->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');

                              $pictureUrl = "https://graph.facebook.com/v12.0/{$Account->page_id}/picture?type=large&access_token={$Account->acesss_token}";

                              $GetAccount = DB::table("facebook_tokens_accounts")->where('id', '=', $Account->account_id)->first();

                              if ($GetAccount) {
                                  // Avatar encontrado
                                  $avatar = asset('images/profile_pictures/'.$GetAccount->avatar);
                                  $nameAv = $GetAccount->name;
                              } else {
                                  // Avatar não encontrado
                                  $nameAv = "Desconhecido";
                                  $avatar = "https://media.istockphoto.com/id/587805078/fr/vectoriel/illustration-vectorielle-dimage-de-profil.jpg?s=612x612&w=0&k=20&c=bpFnb_A5lWAKq1hvchSCBKXzLSLTC9vxTaHcD-Pb80k=";
                              }
                          @endphp
                          <tr id="table_{{ $Account->id }}">
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <div class="flex items-center space-x-4"> <!-- Flexbox para alinhamento -->
                                <img src="{{$pictureUrl}}" alt="Foto de Perfil" class="rounded-full w-10 h-10"> <!-- Tamanho ajustado -->
                                <p class="text-gray-300 whitespace-no-wrap" style="margin-bottom: 0;">
                                  {{ $Account->name }}
                                </p>
                              </div>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <span id="CountPages_{{ $Account->page_id }}" style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" 
                                    class="text-white text-xs font-semibold px-2.5 py-0.5 rounded 
                                    {{ $Account->leads == 0 ? 'bg-red-600' : 'bg-green-600' }}">
                                  {{ empty($Account->leads) ? 0 : $Account->leads }}
                              </span>
                            </td>
                          <!--   <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <span id="CountPagesBlock_{{ $Account->page_id }}" style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;" 
                                    class="text-white text-xs font-semibold px-2.5 py-0.5 rounded 
                                    bg-red-600">
                                  {{ empty($Account->leads_block) ? 0 : $Account->leads_block }}
                              </span>
                            </td> -->
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <div class="flex items-center space-x-4"> <!-- Flexbox para alinhamento -->
                                <img src="{{ $avatar }}" alt="Foto de Perfil" class="rounded-full w-10 h-10" style="width: 2.2em; height: auto;"> <!-- Tamanho ajustado -->
                                <p class="text-gray-300 whitespace-no-wrap" style="margin-bottom: 0;">
                                  {{ $nameAv }}
                                </p>
                              </div>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <p class="text-gray-300 whitespace-no-wrap">{{ $onlyDate }}, {{ $onlyTime }}</p>
                            </td>
                            <td style="display: none;" class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <i data-feather="x" class='mr-0' style="color: #e91e63; cursor: pointer;" onclick="Delet('{{ $Account->id }}')"></i>
                            </td>
                            <td style="display: none;" class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm" id="git_{{ $Account->id }}">
                              <i data-feather="refresh-ccw" class="mr-0" style="color: #16a34a;"></i>                            </td>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <a href="{{env('APP_URL')}}user/facebook/meta/page/delet/{{ $Account->id }}"><i data-feather="x" class='mr-0' style="color: #e91e63; cursor: pointer;"></i></a>
                            </td>
                          </tr>
                          <script type="text/javascript">
                                                          // Chama a função a cada 15 segundos (15000 milissegundos) com o ID desejado
                              setInterval(function() {
                                $.ajax({
                                  url: '{{env('APP_URL')}}user/facebook/meta/pages/leads/total/{{ $Account->id }}', // Substitua pela URL correta do seu endpoint
                                  type: 'GET',
                                  success: function(response) {
                                      // Quando a requisição for bem-sucedida, lance um alerta com o total de conversas
                                      var totalConversations = response.total_conversations;
                                      var leads_block = response.leads_block;
                                      var Updater = response.updater;
                                      var statusnode = response.statusnode;

                                      // Atualiza o texto na div CountPages_{{ $Account->page_id }}
                                      //var currentCount = $('#CountPages_{{ $Account->page_id }}').text();

                                      // Verifica se o valor atual é igual ao totalConversations
                                      if (Updater === false) {
                                          // Se o valor for igual, remove a classe específica
                                          $('#git_{{ $Account->id }} svg').removeClass('rotate-infinite'); // Remove a classe 'rotate-infinite'
                                      } else {
                                          // Se o valor for diferente, adiciona a classe específica
                                          $('#git_{{ $Account->id }} svg').addClass('rotate-infinite'); // Adiciona a classe 'rotate-infinite'
                                          $('#CountPages_{{ $Account->page_id }}').addClass('bg-green-600');
                                          $('#CountPages_{{ $Account->page_id }}').removeClass('bg-red-600');
                                      }

                                      if (statusnode == "proccess") {
                                        $('#git_{{ $Account->id }} svg').css('color', '#acacac'); // Altere para a cor desejada
                                        $('#git_{{ $Account->id }} svg').removeClass('rotate-infinite'); // Remove a classe 'rotate-infinite'
                                      }

                                      // Atualiza o valor na div
                                      $('#CountPages_{{ $Account->page_id }}').text(totalConversations);
                                      $('#CountPagesBlock_{{ $Account->page_id }}').text(leads_block);
                                  },
                                  error: function(xhr, status, error) {
                                      // Caso ocorra algum erro na requisição
                                      //alert("Ocorreu um erro ao buscar o total de conversas.");
                                  }
                                });
                              }, 10000); // 15 segundos

                              $.ajax({
                                url: '{{env('APP_URL')}}user/facebook/meta/pages/leads/total/{{ $Account->id }}', // Substitua pela URL correta do seu endpoint
                                type: 'GET',
                                success: function(response) {
                                    // Quando a requisição for bem-sucedida, lance um alerta com o total de conversas
                                    var totalConversations = response.total_conversations;
                                    var Updater = response.updater;
                                    var statusnode = response.statusnode;

                                    // Atualiza o texto na div CountPages_{{ $Account->page_id }}
                                    //var currentCount = $('#CountPages_{{ $Account->page_id }}').text();

                                    // Verifica se o valor atual é igual ao totalConversations
                                    if (Updater === false) {
                                        // Se o valor for igual, remove a classe específica
                                        $('#git_{{ $Account->id }} svg').removeClass('rotate-infinite'); // Remove a classe 'rotate-infinite'
                                    } else {
                                        // Se o valor for diferente, adiciona a classe específica
                                        $('#git_{{ $Account->id }} svg').addClass('rotate-infinite'); // Adiciona a classe 'rotate-infinite'
                                        $('#CountPages_{{ $Account->page_id }}').addClass('bg-green-600');
                                        $('#CountPages_{{ $Account->page_id }}').removeClass('bg-red-600');
                                    }

                                    if (statusnode == "proccess") {
                                      $('#git_{{ $Account->id }} svg').css('color', '#acacac'); // Altere para a cor desejada
                                      $('#git_{{ $Account->id }} svg').removeClass('rotate-infinite'); // Remove a classe 'rotate-infinite'
                                    }

                                    // Atualiza o valor na div
                                    $('#CountPages_{{ $Account->page_id }}').text(totalConversations);
                                },
                                error: function(xhr, status, error) {
                                    // Caso ocorra algum erro na requisição
                                    //alert("Ocorreu um erro ao buscar o total de conversas.");
                                }
                              });
                                                      </script>
                        @endforeach
                      </tbody>
                    </table>

                    <div style="padding: 1em 1em;" class="pagenation">
                      {{ $Accounts->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">
                  <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>
    </div>

    
    <script>
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        function Delet(id) {
          // Confirmação antes de enviar o POST
          if (confirm("Você tem certeza que deseja deletar esta página?")) {
              // Se confirmado, enviar o POST usando jQuery
              $.ajax({
                  url: '{{env('APP_URL')}}user/facebook/meta/pages/delet', // A URL para onde o POST será enviado
                  type: 'POST',
                  data: {
                      id: id,  // Passando o ID da página que será deletada
                      _token: '{{ csrf_token() }}' // Adicionando o token CSRF para segurança
                  },
                  success: function(response) {
                      // Caso o POST seja bem-sucedido
                      //alert("Página deletada com sucesso!");
                      // Você pode adicionar outras ações aqui, como atualizar a interface
                      // Remover a div com o ID específico
                      $('#table_'+id).remove(); // Remove a div com o ID passado
                  },
                  error: function(xhr, status, error) {
                      // Caso haja algum erro durante o POST
                      alert("Ocorreu um erro ao deletar a página. Tente novamente.");
                  }
              });
          } 
        }

        function Git(id) {
            // Exibe uma mensagem de confirmação inicial
            const confirmScan = confirm("Tem certeza de que deseja realizar o scanner novamente desta página?");
            
            // Se o usuário não confirmar, encerra a função
            if (!confirmScan) {
                console.log("Ação cancelada pelo usuário.");
                return;
            }

            // Solicita a confirmação sobre o reset de paginação
            const resetPagination = confirm("Deseja reiniciar a paginação? Se selecionar 'Cancelar', o scanner continuará de onde parou.");

            // Define a URL com base na escolha do usuário
            const endpoint = resetPagination 
                ? '{{env('APP_URL')}}user/facebook/meta/pages/leads/' + id + '?reset=true' 
                : '{{env('APP_URL')}}user/facebook/meta/pages/leads/' + id;

            // Realiza a requisição AJAX
            $.ajax({
                url: endpoint, // URL com ou sem reset de paginação
                type: 'GET',
                success: function(response) {
                    window.location.reload();
                    // Quando a requisição for bem-sucedida, lance um alerta ou log
                    console.log("Scanner concluído com sucesso.");
                },
                error: function(xhr, status, error) {
                    // Caso ocorra algum erro na requisição
                    alert("Ocorreu um erro ao realizar o scanner.");
                }
            });
        }
    </script>

    <style type="text/css">
      @keyframes infinite-rotation {
          0% {
              transform: rotate(0deg);
          }
          100% {
              transform: rotate(360deg);
          }
      }

      .rotate-infinite {
          animation: infinite-rotation 2s linear infinite; /* Ajuste a velocidade (2s) conforme necessário */
      }
    </style>
@endsection