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

@section('title', ''.env('APP_NAME').' | Listar Envios em Páginas - Leads')

@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 dos seus Envios em Páginas <a href="{{env('APP_URL')}}user/facebook/meta/pages/send" 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="message-square" class='mr-0'></i> <span>Enviar Mensagens</span>
                    </a>
                    </h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Gostaria de ver os detalhes dos seus envios?</p>
                </div>
                <hr style="margin-top: 1em; border-color: #e5e7eb36;">
            </div>
        </div>

        <div style="margin-top: 1em; display: flex; width: 100%;">
          <h2 style="margin-right: 1em; text-transform: uppercase; font-weight: 400;">Desativar ou ativar CRON</h2>
          <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" id="toggleSwitch" class="sr-only peer" 
              {{ env('TOGGLE_STATE') === 'ON' ? 'checked' : '' }}>
            <div class="w-14 h-7 bg-red-500 peer-checked:bg-green-500 rounded-full peer transition-all duration-300"></div>
            <div class="absolute left-1 top-1 bg-white w-5 h-5 rounded-full shadow-md transition-all duration-300 peer-checked:translate-x-7"></div>
          </label>
        </div>
        <hr style="margin-top: 1em; border-color: #e5e7eb36;">

        <script>
        document.addEventListener("DOMContentLoaded", function () {
            const toggleSwitch = document.getElementById("toggleSwitch");

            // Alterar estado no .env
            toggleSwitch.addEventListener("change", function () {
                fetch("{{env('APP_URL')}}toggle", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ state: toggleSwitch.checked ? "ON" : "OFF" })
                });
            });
        });
        </script>


        @if(session('success'))
            <div 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">
                            Campanha
                          </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">
                            Total
                          </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">
                            Sucesso
                          </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">
                            Erro
                          </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">
                            Pages
                          </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">
                           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">
                            Agendado
                          </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">
                            Controle
                          </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">
                            Status
                          </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');


                              $timers = $Account->timer;

                              // Crie um objeto DateTime a partir da string
                              $datesw = new DateTime($timers);

                              // Separe a data e a hora
                              $onlyDate_register = $datesw->format('d/m/Y');
                              $onlyDate_registers = $datesw->format('H:i:s');

                              $CountPages_1 = DB::table("facebook_pages_conversations_send_list")
                                  ->where('conversations_send_id', $Account->id)
                                  ->count();

                              $CountPages_3 = DB::table("facebook_pages_conversations_send_list_pages")
                                  ->where('conversations_send_id', $Account->id)
                                  ->count();

                          @endphp
                          <tr>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <p class="text-gray-300 whitespace-no-wrap" style="margin-bottom: 0;">
                                  <a href="{{env('APP_URL')}}user/facebook/meta/pages/list/send/details/{{ $Account->id }}"><strong>{{ $Account->camp }}</strong></a>
                                </p>
                            </td>
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                                <span 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 
                                    {{ $CountPages_1 == 0 ? 'bg-red-600' : 'bg-green-600' }}">
                                    {{$CountPages_1}}
                                </span>
                            </td>

                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <span id="value_1_{{ $Account->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->send == 0 || is_null($Account->send) ? 'bg-red-600' : 'bg-green-600' }}">
                                  {{ $Account->send ?? 0 }}
                              </span>
                          </td>

                          <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <span id="value_2_{{ $Account->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">
                                  {{ $Account->error ?? 0 }}
                              </span>
                          </td>


                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                                <span 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 
                                    {{ $CountPages_1 == 0 ? 'bg-red-600' : 'bg-blue-600' }}">
                                    {{$CountPages_3}}
                                </span>
                            </td>

                            
                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <p style="font-size: 0.8em;" class="text-gray-300 whitespace-no-wrap">{{ $onlyDate }}, {{ $onlyTime }}</p>
                            </td>


                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <p style="font-size: 0.8em;" class="text-gray-300 whitespace-no-wrap">{{ $onlyDate_register }}, {{$onlyDate_registers}}</p>
                            </td>

                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                                @php
                                    $isPaused = \Carbon\Carbon::parse($Account->timer)->greaterThan(\Carbon\Carbon::now());
                                @endphp

                                <button  type="button" id="pauseResumeButton-{{ $Account->id }}"
                                    onclick="togglePause({{ $Account->id }})"
                                    class="px-4 py-0.5 font-bold rounded 
                                        {{ $isPaused ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} 
                                        text-white">
                                    {{ $isPaused ? 'RETOMAR' : 'PAUSAR' }}
                                </button>

                                <script>
                                function togglePause(leadId) {
                                    fetch('{{env('APP_URL')}}send-leads/toggle-pause', {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                        },
                                        body: JSON.stringify({ id: leadId })
                                    })
                                    .then(response => response.json())
                                    .then(data => {
                                        if (data.success) {
                                            // Atualiza o botão sem precisar reload
                                            const button = document.getElementById('pauseResumeButton-' + leadId);
                                            if (data.paused) {
                                                button.innerText = 'RETOMAR';
                                                button.classList.remove('bg-green-600', 'hover:bg-green-700');
                                                button.classList.add('bg-red-600', 'hover:bg-red-700');
                                            } else {
                                                button.innerText = 'PAUSAR';
                                                button.classList.remove('bg-red-600', 'hover:bg-red-700');
                                                button.classList.add('bg-green-600', 'hover:bg-green-700');
                                            }
                                        } else {
                                            alert('Erro: ' + data.message);
                                        }
                                    })
                                    .catch(error => {
                                        console.error('Erro:', error);
                                        alert('Erro ao tentar pausar/despausar');
                                    });
                                }
                                </script>
                            </td>

                            <td class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <div class="flex">
                                <div class="ml-1" id="value_tx_{{ $Account->id }}">
                                  @if ($Account->status == "2")
                                    <span
                                      style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;"
                                      class="bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                    FINALIZADO
                                    </span>
                                  @else
                                    @if ($Account->status == 1)
                                      <span
                                        style="padding: 0em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em; background-color: #2196f3!important; display: inline-flex; justify-content: space-between; align-items: center;"
                                        class="bg-blue-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                        <i data-feather="refresh-ccw" class='mr-0 rotate-infinite' style="color: #fff; cursor: pointer; margin-left: 0em; margin-right: 0.2em; width: 1.7em"></i>
                                      </span>
                                    @else
                                      <span
                                        style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em; background-color: #e91e63!important;"
                                        class="bg-red-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                        DESATIVADO
                                      </span>
                                    @endif
                                  @endif
                                </div>
                              </div>
                            </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/send/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/sends/total/{{ $Account->id }}', // Substitua pela URL correta do seu endpoint
                                type: 'GET',
                                success: function(response) {
                                  const totalSends = response.total_sends; // Valor retornado
                                  const totalSends1 = response.total_erros; // Valor retornado
                                  const statusDiv = document.getElementById('value_1_{{ $Account->id }}'); // Elemento da div
                                  const statusDiv1 = document.getElementById('value_2_{{ $Account->id }}'); // Elemento da div
                                  const statusDiv2 = document.getElementById('value_tx_{{ $Account->id }}'); // Elemento da div

                                  if (totalSends === 0) {
                                      // Se total_sends for 0, adiciona uma classe e remove outra
                                      statusDiv.classList.add('bg-red-600'); // Exemplo de classe para erro
                                      statusDiv.classList.remove('bg-green-600');
                                      // Atualiza o conteúdo da div
                                      statusDiv.textContent = '0';
                                  } else {
                                      // Se total_sends for maior que 0, faz o inverso
                                      statusDiv.classList.add('bg-green-600'); // Exemplo de classe para sucesso
                                      statusDiv.classList.remove('bg-red-600');
                                      // Atualiza o conteúdo da div com o número de envios
                                      statusDiv.textContent = `${totalSends}`;
                                  }

                                  if (totalSends1 === 0) {
                                      // Atualiza o conteúdo da div
                                      statusDiv1.textContent = '0';
                                  } else {
                                      // Atualiza o conteúdo da div com o número de envios
                                      statusDiv1.textContent = `${totalSends1}`;
                                  }


                                  if (response.status == "2") {
                                    statusDiv2.innerHTML = `<span
                                      style="padding: 0.4em 0.9em; border-radius: 5px; opacity: 1; text-transform: uppercase; font-size: 0.8em;"
                                      class="bg-green-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                      ENVIOS FINALIZADOS
                                    </span>`;
                                  }

                                },
                                error: function(xhr, status, error) {
                                    // Caso ocorra algum erro na requisição
                                    //alert("Ocorreu um erro ao buscar o total de conversas.");
                                }
                              });
                            }, 5000); // 10 segundos
                          </script>
                        @endforeach
                      </tbody>
                    </table>

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