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

@section('title', ''.env('APP_NAME').' | Contas')

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

    <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 contas <a href="{{$button}}" 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="facebook" class='mr-0'></i> <span>ADICIONAR CONTA</span>
                    </a>
                    </h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Gostaria de ver os detalhes das suas contas?</p>
                </div>
                <hr style="margin-top: 1em; border-color: #e5e7eb36;">
            </div>
        </div>

        @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">
                            Nome
                          </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">
                            Páginas
                          </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">
                            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">
                            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');

                              $GetPages = DB::table("facebook_pages")
                                  ->where('user_id', '=', $user->id)
                                  ->where('account_id', '=', $Account->id)
                                  ->get();

                              $CountPages = $GetPages->count();

                              if ($CountPages > 0) {
                                  $total_for = 0;
                                  foreach ($GetPages as $key_rels) {
                                      $total_for += $key_rels->leads; // Corrigido: atribuindo o resultado da soma de volta
                                  }
                              } else {
                                  $total_for = 0;
                              }
                          @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="{{ asset('images/profile_pictures/'.$Account->avatar) }}" 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 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 == 0 ? 'bg-red-600' : 'bg-green-600' }}">
                                    {{$CountPages}}
                                </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 
                                    {{ $total_for == 0 ? 'bg-red-600' : 'bg-green-600' }}">
                                    {{$total_for}}
                                </span>
                            </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 class="px-5 py-5 border-b border-gray-700 bg-gray-800 text-sm">
                              <div class="flex">
                                <div class="ml-1">
                                  @if ($Account->status == "active")
                                    <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">
                                      ATIVO
                                    </span>
                                  @else
                                    @if ($Account->status == disabled)
                                      <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-blue-600 text-white text-xs font-semibold px-2.5 py-0.5 rounded">
                                        DESATIVADO
                                      </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">
                              <i data-feather="x" class='mr-0' style="color: #e91e63; cursor: pointer;" onclick="Delet('{{ $Account->id }}')"></i>
                            </td>
                          </tr>
                        @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 src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <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 conta?")) {
              // Se confirmado, enviar o POST usando jQuery
              $.ajax({
                  url: '{{env('APP_URL')}}user/facebook/meta/accounts/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 conta. Tente novamente.");
                  }
              });
          } 
        }
    </script>
@endsection