@extends('admin/layouts/admin')
@section('title', __('personalization.sections.title'))
@section('scripts')
    <script src="{{ Vite::asset('resources/global/js/sort.js') }}" type="module"></script>
@endsection
@section('content')
    <div class="container mx-auto">

        @include('admin/shared/alerts')
        @if (!empty($pages))
            <div class="flex flex-col">
                <div class="-m-1.5 overflow-x-auto">
                    <div class="p-1.5 min-w-full inline-block align-middle">

                        <div class="grid grid-cols-6 gap-4">

                            <div class="col-span-6">
                                @if ($active_page == null)
                                    <div class="card">
                                        <h3
                                            class="text-xl mb-2 font-semibold text-gray-800 dark:text-gray-200 hidden sm:block">
                                            {{ __('personalization.sections.pages.title') }}
                                        </h3>
                                        <p class="text-sm mb-2 text-gray-600 dark:text-gray-400 hidden sm:block">
                                            {{ __('personalization.sections.pages.subheading') }}
                                        </p>
                                        <div class="flex flex-wrap">
                                            <nav class="grid grid-cols-3 gap-4" role="tablist"
                                                aria-orientation="horizontal">
                                                @foreach ($pages as $uuid => $item)
                                                    <a class="{{ $active_page == $uuid ? 'border' : '' }} bg-white p-4 transition duration-300 rounded-lg hover:bg-gray-100 dark:bg-slate-900 dark:border-gray-800 dark:hover:bg-white/[.05] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                                                        href="?active_page={{ $uuid }}">
                                                        <div class="flex">
                                                            <div
                                                                class="mt-1.5 flex justify-center flex-shrink-0 rounded-s-xl">
                                                                <i class="w-5 h-5 text-gray-800 dark:text-gray-200 {{ $item['icon'] ?? 'bi bi-people' }}"
                                                                    style="font-size: 25px"></i>
                                                            </div>

                                                            <div class="grow ms-6">
                                                                <h3
                                                                    class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
                                                                    {{ $item['title'] }}
                                                                </h3>
                                                                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                                                                    {{ __('personalization.sections.pages.description', ['name' => $item['title']]) }}
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </a>
                                                @endforeach
                                            </nav>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            @if ($active_page)

                                <div class="col-span-6">
                                    <div class="card">
                                        <div class="flex justify-between">
                                            <div>
                                                <h1 class="text-xl mb-2 font-semibold text-gray-800 dark:text-gray-200">
                                                    {{ __('personalization.sections.title') }}
                                                </h1>
                                                <p class="text-sm mb-2 text-gray-600 dark:text-gray-400">
                                                    {{ __('personalization.sections.subheading', ['name' => $active_page['title']]) }}
                                                </p>
                                            </div>
                                            <div>
                                                <a href="{{ route('admin.personalization.sections.index') }}"
                                                    class="btn btn-secondary my-auto">
                                                    {{ __('global.back') }}
                                                </a>
                                                <button type="button" class="btn btn-primary"
                                                    id="saveButton-{{ $uuid }}">{{ __('global.save') }}</button>
                                            </div>
                                        </div>
                                        @if ($active_page['sections']->isEmpty())
                                            <div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
                                                <i
                                                    class="bi bi-layout-text-sidebar text-6xl text-gray-800 dark:text-gray-200"></i>
                                                <p class="mt-5 text-sm text-gray-800 dark:text-gray-400 text-center">
                                                    {!! __('personalization.sections.empty') !!}
                                                </p>
                                            </div>
                                        @endif

                                        <div class="flex flex-wrap">
                                            <ul class="hs-accordion-group w-full flex flex-col gap-2"
                                                data-button="#saveButton-{{ $uuid }}"
                                                data-url="{{ route('admin.personalization.sections.sort') }}"
                                                is="sort-list">
                                                @foreach ($active_page['sections'] as $section)
                                                    <li class="hs-accordion bg-white border border-gray-200 shadow-sm rounded-xl dark:bg-slate-900 dark:border-slate-700 dark:shadow-slate-700/70 sortable-item"
                                                        id="{{ $section->id }}">
                                                        <div class="flex items-center justify-between p-4"
                                                            id="hs-basic-heading-{{ $section->id }}">
                                                            <div
                                                                class="flex items-center gap-2 text-gray-800 dark:text-gray-200 font-medium">
                                                                <i
                                                                    class="bi bi-grip-vertical text-gray-400 cursor-move handle"></i>
                                                                <span>{{ $section->formattedName() }}</span>
                                                            </div>
                                                            <div class="flex items-center gap-2"
                                                                onclick="event.stopPropagation();">
                                                                @if ($section->isPremium())
                                                                    <button type="button"
                                                                        class="btn btn-sm cursor-default">
                                                                        <i class="bi bi-star text-warning text-lg"></i>
                                                                    </button>
                                                                @endif
                                                                @if (!$section->is_active)
                                                                    <button type="button"
                                                                        class="btn btn-sm cursor-default">
                                                                        <i class="bi bi-eye-slash text-danger text-lg"></i>
                                                                    </button>
                                                                @endif

                                                                @if ($section->isModifiable())
                                                                    <a 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 p-3"
                                                                        href="{{ route($routePath . '.show', ['section' => $section]) }}">
                                                                        {{ __('global.edit') }}
                                                                        <span class="sr-only">{{ __('personalization.sections.edit_of', ['name' => $section->formattedName()]) }}</span>
                                                                    </a>
                                                                @else
                                                                    <button type="button" disabled aria-disabled="true"
                                                                        title="{{ __('personalization.sections.premium_locked') }}"
                                                                        class="py-1 px-2 inline-flex justify-center items-center gap-2 rounded-lg border font-medium bg-gray-100 text-gray-400 shadow-sm align-middle cursor-not-allowed text-sm dark:bg-slate-800 dark:border-gray-700 dark:text-gray-600">
                                                                        {{ __('global.edit') }}
                                                                    </button>
                                                                @endif
                                                                <div class="hs-dropdown relative inline-flex">
                                                                    <button
                                                                        id="hs-dropdown-custom-icon-trigger-{{ $section->id }}"
                                                                        type="button"
                                                                        class="hs-dropdown-toggle flex justify-center items-center size-9 text-sm font-semibold rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:p-3 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800 p-3"
                                                                        aria-haspopup="menu" aria-expanded="false"
                                                                        aria-label="{{ __('personalization.sections.more_actions_for', ['name' => $section->formattedName()]) }}">
                                                                        <i class="bi bi-three-dots"></i>
                                                                    </button>
                                                                    <div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-60 bg-white shadow-md rounded-lg p-1 space-y-0.5 mt-2 dark:bg-neutral-800 dark:border dark:border-neutral-700 z-50"
                                                                        role="menu" aria-orientation="vertical"
                                                                        aria-labelledby="hs-dropdown-custom-icon-trigger-{{ $section->id }}">
                                                                        <form method="POST"
                                                                            action="{{ route($routePath . '.clone', ['section' => $section]) }}">
                                                                            @csrf
                                                                            <button
                                                                                class="flex items-center gap-x-3.5 py-2 w-full px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700">
                                                                                {{ __('global.clone') }}
                                                                            </button>
                                                                        </form>

                                                                        <form method="POST"
                                                                            action="{{ route($routePath . '.restore', ['section' => $section]) }}">
                                                                            @csrf
                                                                            <button
                                                                                class="flex w-full items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700">
                                                                                {{ __('personalization.sections.restore') }}
                                                                            </button>
                                                                        </form>
                                                                        <form method="POST"
                                                                            action="{{ route($routePath . '.switch', ['section' => $section]) }}">
                                                                            @csrf
                                                                            <button
                                                                                class="flex w-full items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700">
                                                                                {{ $section->is_active ? __('personalization.sections.disable') : __('personalization.sections.enable') }}
                                                                            </button>
                                                                        </form>
                                                                    </div>
                                                                </div>

                                                                <button type="button"
                                                                    class="hs-accordion-toggle p-2 text-gray-500 hover:text-gray-700 dark:text-neutral-400 dark:hover:text-neutral-200"
                                                                    aria-expanded="false"
                                                                    aria-controls="hs-basic-collapse-{{ $section->id }}"
                                                                    aria-label="{{ __('personalization.sections.toggle_preview_for', ['name' => $section->formattedName()]) }}">
                                                                    <svg class="hs-accordion-active:hidden block size-4"
                                                                        aria-hidden="true"
                                                                        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">
                                                                        <path d="m6 9 6 6 6-6" />
                                                                    </svg>
                                                                    <svg class="hs-accordion-active:block hidden size-4"
                                                                        aria-hidden="true"
                                                                        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">
                                                                        <path d="m18 15-6-6-6 6" />
                                                                    </svg>
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <div id="hs-basic-collapse-{{ $section->id }}"
                                                            class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
                                                            role="region"
                                                            aria-labelledby="hs-basic-heading-{{ $section->id }}">
                                                            <div
                                                                class="px-4 pb-4 border-t border-gray-200 dark:border-neutral-700 pt-4">
                                                                <div class="container custom-scroll">
                                                                    {!! $section->toDTO()->render() !!}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="card">
                                        <h3
                                            class="text-xl font-semibold text-gray-800 dark:text-gray-200 hidden sm:block mb-4">
                                            {{ __('personalization.sections.types.title', ['name' => app('theme')->getTheme()->name]) }}
                                        </h3>
                                        <div class="pb-4 px-5">
                                            <ul class="w-full">
                                                @foreach ($themeSections as $section)
                                                    <li
                                                        class="flex items-center justify-between py-2 px-4 dark:border-neutral-700 rounded-lg mb-2">
                                                        <div
                                                            class="group relative flex flex-col h-full bg-white border border-gray-200 shadow-sm rounded-xl dark:bg-slate-900 dark:border-slate-700 dark:shadow-slate-700/70 w-full">
                                                            <div class="flex items-center justify-between gap-2 py-3 px-4 border-b border-gray-200 dark:border-slate-700">
                                                                <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">
                                                                    {{ $section->formattedName() }}
                                                                </span>
                                                                <form method="POST"
                                                                    action="{{ route($routePath . '.clone_section', ['section' => $section->uuid]) }}?active_page={{ $uuid }}">
                                                                    @csrf
                                                                    <button class="btn btn-primary btn-sm" type="submit">
                                                                        Installer
                                                                    </button>
                                                                </form>
                                                            </div>

                                                            <div class="container custom-scroll">
                                                                {!! $section->render() !!}
                                                            </div>
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                        </div>

        @endif
    @else
        <div
            class="min-h-60 flex flex-col bg-white border shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70">
            <div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
                <svg class="size-10 text-gray-500 dark:text-neutral-500" xmlns="http://www.w3.org/2000/svg"
                    width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="22" x2="2" y1="12" y2="12"></line>
                    <path
                        d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z">
                    </path>
                    <line x1="6" x2="6.01" y1="16" y2="16"></line>
                    <line x1="10" x2="10.01" y1="16" y2="16"></line>
                </svg>
                <p class="mt-2 text-sm text-gray-800 dark:text-neutral-300">
                    No sections found
                </p>
            </div>
        </div>
        @endif
    </div>
@endsection