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

@section('title', ''.env('APP_NAME_DASHBOARD').' | Criar Novo Usuário')

@section('content')
    <div class="section">
        <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <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;">Criar Usuário <a href="{{ url('/admin/users') }}" 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="arrow-left" class='mr-0'></i> <span>Voltar</span>
                    </a></h2>
                    <p class="mt-0 text-sm leading-0 text-gray-600">Essas informações serão exibidas publicamente, portanto, tome cuidado com o que você compartilha.</p>
                  </div>
                  <hr style="margin-top: 1em;">

                  @if ($errors->any())
                      @foreach ($errors->all() as $error)
                        <div class="bg-red-100 p-5 w-full sm:w-1/2 alert-dangers">
                          <div class="flex space-x-3">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="flex-none fill-current text-red-500 h-4 w-4">
                              <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.597 17.954l-4.591-4.55-4.555 4.596-1.405-1.405 4.547-4.592-4.593-4.552 1.405-1.405 4.588 4.543 4.545-4.589 1.416 1.403-4.546 4.587 4.592 4.548-1.403 1.416z" /></svg>
                            <div class="leading-tight flex flex-col space-y-2">
                              <div class="text-sm font-medium text-red-700">{{ $error }}</div>
                            </div>
                          </div>
                        </div>
                      @endforeach
                  @endif

                  <div class="border-gray-900/10 pb-0" style="margin-top: -1em;">
                      <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <div class="sm:col-span-3">
                          <label for="name" class="block text-sm font-medium leading-6 text-gray-900">Nome</label>
                          <div class="mt-2">
                            <input type="text" name="name" id="name" autocomplete="name" 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" required>
                          </div>
                        </div>
                        <div class="sm:col-span-3">
                          <label for="email" class="block text-sm font-medium leading-6 text-gray-900">E-mail</label>
                          <div class="mt-2">
                            <input type="email" 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" required>
                          </div>
                        </div>
                      </div>
                  </div>
                  <div class="mt-4 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-3">
                      <label for="password" class="block text-sm font-medium leading-6 text-gray-900">Senha</label>
                      <div class="mt-2">
                        <input type="password" name="password" id="password" 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" required>
                      </div>
                    </div>
                    <div class="sm:col-span-3">
                      <label for="password_confirmation" class="block text-sm font-medium leading-6 text-gray-900">Confirme a Senha</label>
                      <div class="mt-2">
                        <input type="password" name="password_confirmation" id="password_confirmation" 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" required>
                      </div>
                    </div>
                    <div class="col-span-full edit-fusion" style="margin-top: -1em;">
                      <label for="cover-photo" class="block text-sm font-medium leading-6 text-gray-900">Thumbnail (Opcional):</label>
                      <div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
                        <div class="text-center">
                          <div id="img-upload">
                            <svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                              <path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
                            </svg>
                          </div>
                          <div class="mt-0 flex text-sm leading-6 text-gray-600">
                            <label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
                              <span>Carregar um arquivo</span>
                              <input id="file-upload" name="thumbnail" type="file" class="sr-only">
                            </label>
                            <p class="pl-1">ou arraste e solte</p>
                          </div>
                          <p class="text-xs leading-5 text-gray-600"><strong>PNG, JPG, GIF</strong></p>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
            </div>
            <div class="mt-0 flex items-center justify-end gap-x-12" style="margin-top: 1em;">
                <button style="width: 100%; text-transform: uppercase;" type="submit" 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-[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">Adicionar Usuário <i data-feather="plus" class='mr-0'></i></button>
            </div>
        </form>
    </div>

    <script type="text/javascript">
      document.getElementById('file-upload').addEventListener('change', function(event) {
            const imgUploadDiv = document.getElementById('img-upload');
            
            // Limpa o conteúdo atual da div
            imgUploadDiv.innerHTML = '';

            // Obtém o arquivo selecionado
            const file = event.target.files[0];

            if (file) {
                // Cria um objeto URL para o arquivo
                const imgURL = URL.createObjectURL(file);

                // Cria um novo elemento img
                const imgElement = document.createElement('img');
                imgElement.src = imgURL;
                imgElement.alt = 'Imagem selecionada';

                // Adiciona a imagem à div
                imgUploadDiv.appendChild(imgElement);
            }
        });
    </script>
@endsection