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

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

@section('content')
    <div class="sectio menus-mobile">
        <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 Menu 
                        <a href="{{ route('menus.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 Menu</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;">
            </div>
        </div>

        <div class="space-y-12">
            <!-- 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
            <!-- Exibir a lista de menus -->
            <ul id="menu-list" class="sortable" style="margin-top: 1em;">
                @if($menus->count() > 0)
                    @foreach($menus as $menu)
                        <li data-id="{{ $menu->id }}">
                            <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden handle" style="background-color: #fff!important; margin-bottom: 0.5em; padding: 0.8em 0.8em; cursor: move; display: inline-flex; align-items: center; justify-content: space-between;">
                                <span style="font-weight: 500; text-transform: uppercase; font-size: 0.9em!important;">{{ $menu->title }}</span>

                                <div>
                                    <a href="{{ url('/admin/menus/'.$menu->id.'/edit') }}" 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" style="text-transform: uppercase; margin-left: 0.5em;">
                                        <i data-feather="edit" class='mr-0'></i>
                                    </a>

                                    <button data-id="{{ $menu->id }}" class="delete-menu-item 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" style="text-transform: uppercase; margin-left: 0.5em;">
                                    <i data-feather="x-circle" class='mr-0'></i>
                                    </button>
                                </div>
                            </div>
                            @if($menu->children->count() > 0)
                                <ul class="sortable flox">
                                    @foreach($menu->children as $child)
                                        <li data-id="{{ $child->id }}">
                                            <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden handle" style="background-color: #fff!important; margin-bottom: 0.5em; padding: 0.6em 0.8em; cursor: move; display: inline-flex; align-items: center; justify-content: space-between;">
                                                <span style="font-weight: 500; text-transform: uppercase; font-size: 0.9em!important;">{{ $child->title }}</span>
                                                <div>
                                                    <a href="{{ url('/admin/menus/'.$child->id.'/edit') }}" 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" style="text-transform: uppercase; margin-left: 0.5em;">
                                                        <i data-feather="edit" class='mr-0'></i>
                                                    </a>

                                                    <button data-id="{{ $child->id }}" class="delete-menu-item 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" style="text-transform: uppercase; margin-left: 0.5em;">
                                                        <i data-feather="x-circle" class='mr-0'></i>
                                                    </button>
                                                </div>
                                            </div>
                                            @if($child->children->count() > 0)
                                                <ul class="sortable flox-x">
                                                    @foreach($child->children as $grandchild)
                                                        <li data-id="{{ $grandchild->id }}">
                                                            <div class="inline-block min-w-full shadow-md rounded-lg overflow-hidden handle" style="background-color: #fff!important; margin-bottom: 0.5em; padding: 0.4em 0.8em; cursor: move; display: inline-flex; align-items: center; justify-content: space-between;">
                                                                <span style="font-weight: 500; text-transform: uppercase; font-size: 0.9em!important;">{{ $grandchild->title }}</span>
                                                                <div>
                                                                    <a href="{{ url('/admin/menus/'.$grandchild->id.'/edit') }}" 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" style="text-transform: uppercase; margin-left: 0.5em;">
                                                                        <i data-feather="edit" class='mr-0'></i>
                                                                    </a>
                                                                    <button data-id="{{ $grandchild->id }}" class="delete-menu-item 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" style="text-transform: uppercase; margin-left: 0.5em;">
                                                                        <i data-feather="x-circle" class='mr-0'></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @endif
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </li>
                    @endforeach
                @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('menus.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 Menus
                      </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
            </ul>
        </div>
    </div>

    <style type="text/css">
        #massDeleteBtn { opacity: 0.6; transition: 1s; }
        #massDeleteBtn:hover{ opacity: 1; transition: 1s; }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function initializeSortable(element) {
                Sortable.create(element, {
                    animation: 150,
                    group: 'shared',
                    handle: '.handle',
                    fallbackOnBody: true,
                    swapThreshold: 0.65,
                    onEnd: function (evt) {
                        let order = [];

                        function captureOrder(element, parentId) {
                            Array.from(element.children).forEach((child, index) => {
                                order.push({
                                    id: child.getAttribute('data-id'),
                                    position: index + 1,
                                    parent_id: parentId
                                });
                                let sublist = child.querySelector('ul');
                                if (sublist) {
                                    captureOrder(sublist, child.getAttribute('data-id'));
                                }
                            });
                        }

                        captureOrder(document.querySelector('#menu-list'), null);

                        fetch('{{ route('menus.order') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify({ order: order })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (!data.success) {
                                alert('Failed to update menu order');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                        });
                    }
                });
            }

            // Inicializa o sortable para todos os elementos com a classe 'sortable'
            document.querySelectorAll('.sortable').forEach(element => initializeSortable(element));

            // Adiciona o evento de deletar ao botão
            document.querySelectorAll('.delete-menu-item').forEach(button => {
                button.addEventListener('click', function () {
                    const menuId = this.getAttribute('data-id');
                    if (confirm('Tem certeza que deseja deletar este menu?')) {
                        fetch(`/admin/menus/${menuId}`, {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Remova o item da lista
                                this.closest('li').remove();
                            } else {
                                alert('Não foi possível deletar o menu.');
                            }
                        })
                        .catch(error => {
                            console.error('Erro ao deletar:', error);
                        });
                    }
                });
            });

        });
    </script>
@endsection