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

@section('title', env('APP_NAME_DASHBOARD') . ' | Mensagens Enviadas')

@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">Mensagens Enviadas</h2>
            <p class="text-gray-600 mt-1">Essa funcionalidade é essencial para gerenciar dispositivos de WhatsApp.</p>
        </div>
        <a href="{{env('APP_URL')}}user/whatsapp/disparar/mensagens" 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 ENVIO
        </a>
    </div>

    <style type="text/css">
      .class-buton-list button { display: inline-flex; }
      .class-buton-list button > svg { margin-left: 0.5em; width: 1.5em; } 
    </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 class="py-0">
        @if($pages->count() > 0)
          <form action="{{env('APP_URL')}}user/whatsapp/dispositivos/mensagens/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;"> Envios <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');
                        $status = $page->status;
                        @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;">

                              <div class="ml-3">
                                <div class="flex -space-x-4 rtl:space-x-reverse">
                                  @php
                                    // Carregar as sessões diretamente na view (não recomendado em termos de boas práticas)
                                    $whatsappMessageStoryId = $page->id; // Altere para o valor desejado
                                    $whatsappSelecteds = \Modules\ModuloSMTP\Entities\WhatsappSelecteds::where('whatsapp_message_story_id', $whatsappMessageStoryId)->limit(3)->get();

                                    $whatsappSelectedsAll = \Modules\ModuloSMTP\Entities\WhatsappSelecteds::where('whatsapp_message_story_id', $whatsappMessageStoryId)->get();
                                    $whatsappSelectedsCount = $whatsappSelectedsAll->count();

                                  @endphp 

                                  @foreach ($whatsappSelecteds as $whatsappSelecteds)
                                    @php
                                    // Carregar as mensagens selecionadas
                                    $whatsappMessageStoryIdDetails = $whatsappSelecteds->whatsapp_id; // Ou qualquer valor que você queira usar
                                    $whatsappSelecteds_Details = \Modules\ModuloSMTP\Entities\WhatsappSession::where('id', $whatsappMessageStoryIdDetails)->get();
                                    @endphp 
                                    <img class="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800" src="{{ $whatsappSelecteds_Details[0]->thumbnail ? asset('thumbnails/avatar/' . $whatsappSelecteds_Details[0]->thumbnail) : asset('images/avatar.jpg') }}" alt="{{ $whatsappSelecteds_Details[0]->name }}">
                                  @endforeach
                                  @if ($whatsappSelectedsCount > 3)
                                      <a class="flex flet-icon-avatars items-center justify-center w-10 h-10 text-xs font-medium text-white bg-gray-700 border-2 border-white rounded-full hover:bg-gray-600 dark:border-gray-800" style="font-weight: bold;">
                                          +{{ $whatsappSelectedsCount - 3 }}
                                      </a>
                                  @endif
                                </div>

                              </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 class-buton-list">
                            @if ($status === 'draft')
                                <button type="button" 
                                    class="text-white bg-blue-500 hover:bg-blue-600 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-400 dark:hover:bg-yellow-500 dark:focus:ring-blue-600">
                                    EM PROCESSO <i data-feather="battery-charging" class="mr-2"></i>
                                </button>
                            @elseif ($status === 'published')
                                <button type="button" 
                                    class="text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-300 font-medium rounded-full text-sm px-5 py-1.5 text-center me-2 mb-2 dark:bg-green-400 dark:hover:bg-green-500 dark:focus:ring-green-600">
                                    PROCESSADO <i data-feather="check-circle" class="mr-2"></i>
                                </button>
                            @elseif ($status === 'archived')
                                <button type="button" 
                                    class="text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-1.5 text-center me-2 mb-2 dark:bg-red-400 dark:hover:bg-red-500 dark:focus:ring-red-600">
                                    PAUSADO <i data-feather="pause-circle" class="mr-2"></i>
                                </button>
                            @endif
                        </td>


                          <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                            <a href="{{env('APP_URL')}}admin/whatsapp/detalhes/envio/{{ $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>
      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