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

@section('title', ''.env('APP_NAME').' | Minha Conta')

@section('content')
    <div class="section container px-5 py-8 mx-auto" style="width: 100%;">
        <form action="{{ route('user.account.update') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <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; color: #fff;">
                            Minha Conta
                        </h2>
                        <p style="color: #ffffffb3;" 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; border-color: #e5e7eb36;">

                    @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

                    <!-- 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: 1em;">
                          <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="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" value="{{ old('name', $user->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" value="{{ old('email', $user->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">
                            </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">
                            </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" style="border-color: #e5e7eb36;">
                                <div class="text-center">
                                    <div id="img-upload">
                                        @if($user->thumbnail)
                                          <!-- Se o thumbnail existir, usa a URL como background -->
                                          <img src="{{ asset('thumbnails/' . $user->thumbnail) }}">
                                        @else
                                          <!-- Se o thumbnail não existir, mostra uma imagem padrão ou cor de fundo -->
                                          <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>
                                        @endif
                                    </div>
                                    <div class="mt-0 flex text-sm leading-6 text-gray-600">
                                        <label style="background-color: #1f2937!important; color: #fff!important;" 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 style="background-color: #1f2937!important; color: #fff!important;">Carregar um arquivo</span>
                                            <input id="file-upload" name="thumbnail" type="file" class="sr-only">
                                        </label>
                                        <p class="pl-1" style="color: #ffffffb3;">ou arraste e solte</p>
                                    </div>
                                    <p class="text-xs leading-5 text-gray-600" style="color: #ffffffb3;"><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">
                    <span>Salvar Alterações</span> <i data-feather="edit" class='mr-0'></i>
                </button>
            </div>
        </form>
    </div>
@endsection