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

@section('title', ''.env('APP_NAME_DASHBOARD').' | Criar Nova Página')

@section('content')
    <div class="section">
        <form action="{{ route('admin.pages.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 Página <a href="{{ url('/admin/pages') }}" 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())
                    <div class="flex p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert" style="margin-bottom: 0em; margin-top: 1em;">
                      <svg class="flex-shrink-0 inline w-4 h-4 me-3 mt-[2px]" 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">Danger</span>
                      <div>
                        <span class="font-medium">Forneça todos os dados para continuar:</span>
                          <ul class="mt-1.5 list-disc list-inside">
                            @foreach ($errors->all() as $error)
                              <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                      </div>
                    </div>
                  @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="first-name" class="block text-sm font-medium leading-6 text-gray-900">Título</label>
                          <div class="mt-2">
                            <input type="text" name="title" id="title" autocomplete="title" 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="last-name" class="block text-sm font-medium leading-6 text-gray-900">Slug</label>
                          <div class="mt-2">
                            <input type="text" name="slug" id="slug" autocomplete="slug" 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="col-span-full">
                      <label for="about" class="block text-sm font-medium leading-6 text-gray-900">Descrição</label>
                      <div class="mt-2">
                        <textarea id="content" required="" name="content" rows="3" 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"></textarea>
                      </div>
                    </div>
                    <div class="col-span-full" 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">PNG, JPG, GIF até 100MB</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="border-gray-900/10 pb-0" style="margin-top: -1.4em;">
                      <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                        <div class="sm:col-span-6">
                          <label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">Visibilidade</label>
                          <div class="mt-2">
                            <select name="visibility" id="visibility" autocomplete="visibility" 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" style="width: 100%!important; max-width: 100%!important">
                              <option value="public">Pública</option>
                              <option value="private">Privada</option>
                              <option value="password">Protegida por senha</option>
                            </select>
                          </div>
                        </div>
                        <div class="sm:col-span-6" id="passwords" style="display: none; margin-top: -0.9em;">
                          <label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">Senha de Acesso</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">
                          </div>
                        </div>
                        <div class="sm:col-span-3" style="margin-top: -1em;">
                          <div class="relative flex gap-x-3">
                            <div class="flex h-6 items-center">
                              <input type="checkbox" name="is_main" id="is_main" value="1" type="checkbox" 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">
                            </div>
                            <div class="text-sm leading-6">
                              <label for="offers" class="font-medium text-gray-900">Página Principal</label>
                              <p class="text-gray-500">Ativando essa função, essa página será a página inicial do seu projeto.</p>
                            </div>
                          </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 Página <i data-feather="plus" class='mr-0'></i></button>
            </div>
        </form>
    </div>

    <!-- JavaScript para mostrar/ocultar o campo de senha -->
    <script>
        document.getElementById('visibility').addEventListener('change', function() {
            var passwordField = document.getElementById('passwords');
            if (this.value === 'password') {
                passwordField.style.display = 'unset';
            } else {
                passwordField.style.display = 'none';
            }
        });

        document.getElementById('title').addEventListener('input', function() {
            var title = this.value;
            var slug = title
                .toLowerCase()
                .trim()
                .replace(/[\s\-]+/g, '-')   // Replaces spaces and hyphens with a single hyphen
                .replace(/[^\w\-]+/g, '')   // Removes all non-word characters
                .replace(/\-\-+/g, '-')     // Replaces multiple hyphens with a single one
                .replace(/^-+/, '')         // Trims hyphens from the start
                .replace(/-+$/, '');        // Trims hyphens from the end

            document.getElementById('slug').value = slug;
        });

        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