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

@section('title', ''.env('APP_NAME_DASHBOARD').' | Gerenciar Usuários')

@section('content')
    <div class="section">
        <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;">Gerenciar Usuários <a href="{{ route('admin.users.create') }}" 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 NOVO USUÁRIO</span>
                    </a></h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Essa funcionalidade é essencial para qualquer site que precise de atualizações regulares.</p>
                </div>
                <hr style="margin-top: 1em;">
            </div>
        </div>

        <!-- Formulário de filtragem -->
        <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden" style="background-color: #fff!important; margin-top: 1em; padding: 1.3em 1em;">
          <form method="GET" action="{{ route('admin.users.index') }}" class="filter-form-draken">
              <div class="border-gray-900/10 pb-0" style="margin-top: -2.8em;">
                  <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-2">
                      <div class="mt-2">
                        <input type="text" name="email" id="email" autocomplete="email" 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="E-mail" value="{{ $email }}">
                      </div>
                    </div>
                    <div class="sm:col-span-2">
                      <div class="mt-2">
                        <select name="status" id="status" autocomplete="status" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6" style="width: 100%!important; max-width: 100%!important">
                          <option value="">Todos</option>
                          <option value="active" {{ $status === 'active' ? 'selected' : '' }}>Ativo</option>
                          <option value="private" {{ $status === 'private' ? 'selected' : '' }}>Bloqueado</option>
                        </select>
                      </div>
                    </div>
                    <div class="sm:col-span-2">
                      <div class="mt-2">
                        <button style="width: 100%; padding: 1.4em!important;" href="{{ route('admin.users.create') }}" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-5 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-[29px] min-w-[29px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
                            <i data-feather="search" class='mr-0'></i> <span>FILTRAR</span>
                        </button>
                      </div>
                    </div>
                  </div>
              </div>
          </form>
        </div>

        <!-- Exibe a mensagem de sucesso -->
        @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

        <div class="py-0">
            @if($users->count() > 0)
              <form action="{{ route('admin.massDeleteUser') }}" method="POST" id="massDeleteForm">
                @csrf
                @method('DELETE')
                <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;"> Usuário <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">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">Status</th>
                          <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100"></th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach ($users 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');
                            @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!important;">
                                  <div class="flex-shrink-0 w-10 h-10">
                                    <img
                                      class="w-full h-full rounded-full"
                                      src="{{ $page->thumbnail ? asset('thumbnails/' . $page->thumbnail) : asset('images/avatar.jpg') }}"
                                    />
                                  </div>
                                  <div class="ml-3">
                                    <p class="text-gray-900 whitespace-no-wrap"> {{ $page->email }}</p>
                                    <p class="text-gray-600 whitespace-no-wrap">
                                        <a target="_blank" href="{{ url('/page/'.$page->slug.'') }}">{{ $page->name }}</a>
                                    </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"><a target="_blank" href="{{ url('/page/'.$page->slug.'') }}">{{ $page->name }}</a></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 }}</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">
                                @switch($page->status)
                                    @case('active')
                                        @php 
                                          $access = "Acesso Ativo"; 
                                          $color = "green";
                                        @endphp
                                        @break
                                    @case('private')
                                        @php 
                                          $access = "Bloqueado"; 
                                          $color = "red"; 
                                        @endphp
                                        @break
                                    @default
                                        @php 
                                          $access = "Desconhecida"; 
                                          $color = "red";
                                         @endphp
                                @endswitch
                                <span
                                  class="relative inline-block px-3 py-1 font-semibold text-{{$color}}-900 leading-tight">
                                  <span aria-hidden class="absolute inset-0 bg-{{$color}}-200 opacity-50 rounded-full"></span>
                                  <span class="relative" style="text-transform: uppercase;">{{ $access }}</span>
                                </span>
                              </td>
                              <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm text-right">
                                <a href="{{ route('admin.users.edit', $page->id) }}" 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;">
                      {{ $users->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.users.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 Usuários
                  </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 type="text/javascript">
          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