@extends('admin.settings.sidebar')
@section('title', __('personalization.front_menu.title'))
@section('script')
    <script src="{{ Vite::asset('resources/global/js/sort.js') }}" type="module"></script>

@endsection
@section('setting')
    <div class="card">
            <div class="card-heading">
                <div>
                    <h4 class="font-semibold uppercase text-gray-600 dark:text-gray-400">
                        {{ __('personalization.front_menu.title') }}
                    </h4>
                </div>
                <div>
                    <button type="button" class="btn btn-primary text-sm w-full max-w-md sm:w-auto" id="saveButton" {{ $menus->count() == 0 ? 'disabled' : '' }}>{{ __('global.save') }}</button>
                    <a class="btn btn-secondary mt-2 text-sm sm:ml-1 sm:mt-0 w-full max-w-md sm:w-auto" href="{{ route('admin.personalization.menulinks.create', ['type' => 'front']) }}">{{ __('personalization.addelement') }}</a>
                </div>
                </div>
            @csrf
            @if ($errors->any())
                <div class="alert text-red-700 bg-red-100 mt-2" role="alert">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line></svg>
                    @foreach ($errors->all() as $error)
                        {!! $error !!}<br/>
                    @endforeach
                </div>
            @endif
            <ul data-button="#saveButton" data-url="{{ route('admin.personalization.menulinks.sort', ['type' => 'front']) }}" is="sort-list">
                @foreach ($menus as $menu)
                <li class="sortable-item {{ $menu->hasChildren() ? 'sortable-parent' : '' }}" id="{{ $menu->id }}">
                    <div class="card bg-white dark:bg-slate-900 dark:border-gray-800">
                        <div class="flex justify-between">
                            <div class="flex">
                                {!! $menu->getHtmlIcon() !!}
                                <span class="font-semibold text-gray-600 dark:text-gray-400 my-auto">{{ $menu->name }}</span>

                                @if ($menu->hasChildren())
                                    <span class="text-gray-400 dark:text-gray-600">({{ $menu->children->count() }})</span>
                                @endif
                            </div>
                            <div>
                                <a href="{{ route('admin.personalization.menulinks.show', ['menulink' => $menu->id]) }}">
                                    <span class="py-1.5">
                                      <span class="py-1 px-2 inline-flex justify-center items-center gap-2 rounded-lg border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
                                          <i class="bi bi-eye-fill"></i>
                                        {{ __('global.show') }}
                                      </span>
                                    </span>
                                </a>
                                <form method="POST" action="{{ route('admin.personalization.menulinks.delete', ['menulink' => $menu->id]) }}" class="inline ml-2 confirmation-popup">
                                    @method('DELETE')
                                    @csrf
                                    <button>
                                          <span class="py-1 px-2 inline-flex justify-center items-center gap-2 rounded-lg border font-medium bg-red text-red-700 shadow-sm align-middle hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-red-900 dark:hover:bg-red-800 dark:border-red-700 dark:text-white dark:hover:text-white dark:focus:ring-offset-gray-800">
                                              <i class="bi bi-trash"></i>
                                            {{ __('global.delete') }}
                                          </span>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    @if (!empty($menu->children))
                        <ol is="sort-list2">

                    @foreach ($menu->children as $child)
                        <li class="sortable-item" id="{{ $child->id }}">
                            <div class="card bg-white dark:bg-slate-900 dark:border-gray-800 ml-4">
                                <div class="flex justify-between">
                                    <div class="flex">
                                        {!! $child->getHtmlIcon() !!}
                                        <span class="font-semibold text-gray-600 dark:text-gray-400 my-auto">{{ $child->name }}</span>
                                    </div>
                                    <div>
                                        <a href="{{ route('admin.personalization.menulinks.show', ['menulink' => $child->id]) }}">
                                    <span class="py-1.5">
                                      <span class="py-1 px-2 inline-flex justify-center items-center gap-2 rounded-lg border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800">
                                          <i class="bi bi-eye-fill"></i>
                                        {{ __('global.show') }}
                                      </span>
                                    </span>
                                        </a>
                                        <form method="POST" action="{{ route('admin.personalization.menulinks.delete', ['menulink' => $child->id]) }}" class="inline ml-2 confirmation-popup">
                                            @method('DELETE')
                                            @csrf
                                            <button>
                                          <span class="py-1 px-2 inline-flex justify-center items-center gap-2 rounded-lg border font-medium bg-red text-red-700 shadow-sm align-middle hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-red-900 dark:hover:bg-red-800 dark:border-red-700 dark:text-white dark:hover:text-white dark:focus:ring-offset-gray-800">
                                              <i class="bi bi-trash"></i>
                                            {{ __('global.delete') }}
                                          </span>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                        </ol>
                        @endif
                </li>
    @endforeach
            </ul>
@endsection