@if ($isCustomizeMode() && request()->user()->hasAccessToCustomize()/*Auth::user()->hasAnyRole(array_merge($page->roles ?? [], [\App\Models\Role::ROLE_SUPER_ADMIN]))*/)

    <div class="row customize-action mb-5 bg-white text-black rounded p-2">
        {{--<div class="row bg-white text-black rounded p-1">--}}
            <div class="col-12">
                <h2 class="h4 mt-2 mb-4 text-primary">Menu Templates for {{ $page->title }}</h2>
            </div>
        @if ($menuTemplate)
            <div class="col-12">
                <p class="mb-1">Selected template</p>
                <p class="h2 text-danger fw-bold">
                    <i class="far fa-clone"></i>
                    {{ $menuTemplate->name }}
                </p>
            </div>
        @endif

        @if($hasMultipleTemplates())
            <div class="col-sm-6">
                <a data-bs-toggle="modal" data-bs-target="#menu-template-modal" class="btn d-block btn-dark my-2 border border-white">
                    <i class="fas fa-search"></i>
                    <b class="">Select Template</b>
                </a>
            </div>
        @endif

        @if(request()->user()->hasAnyPermission(
            \App\Models\Permission::PERM_CREATE_CUSTOM_MENU_TEMPLATE,
            \App\Models\Permission::PERM_UPDATE_CUSTOM_MENU_TEMPLATE,
            \App\Models\Permission::PERM_DELETE_CUSTOM_MENU_TEMPLATE
        ))
            <div class="col-sm-6">
                <a data-bs-toggle="modal" data-bs-target="#manage-template-modal" class="btn d-block btn-dark my-2 border border-white">
                    <i class="far fa-plus-square"></i>
                    <b class="">{{ $menuTemplate->created_by_id === request()->user()->id ? 'Update My' : 'Create Custom' }} Template</b>
                </a>
            </div>
        @endif

        @if ($page->show_assign_to_worker_button && Auth::user()->hasPermissionTo(\App\Models\Permission::PERM_ASSIGN_MENU_ITEM_TO_WORKER))
            <div class="col-sm-6">
                <a data-bs-toggle="modal" data-bs-target="#assign-template-modal" class="btn d-block btn-dark my-2 border border-white bg-danger">
                    <i class="far fa-user-circle"></i>
                    <b class="">Assign Template</b>
                </a>
            </div>
        @endif

        @if($getTemplateId())
            <div class="col-sm-6">
                <a onclick="reset_setting(event)" class="btn d-block btn-dark my-2 border border-white">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                    <b class="">Reset Settings</b>
                </a>
            </div>
        @endif

        @if ($hasTemplate())
            <div class="col-sm-6">
                <a id="save-and-exit" onClick="update_template_settings(event)" class="btn d-block btn-dark my-2 border border-white bg-primary">
                    <i class="fa-regular fa-floppy-disk"></i>
                    <b class="">Save & Exit</b>
                </a>
            </div>
        @endif

        @if ($page->show_welcome_page_button)
            @foreach(Auth::user()->dismissPages()->get() as $dismissPage)
                <div class="col-sm-6">
                    <a href="{{ url()->current() . '?dismiss=0' }}" class="btn d-block btn-dark my-2 border border-white">
                        <i class="fa-solid fa-toggle-on"></i>
                        <b class="">Show {{ $dismissPage->title }}</b>
                    </a>
                </div>
            @endforeach
        @endif

        <div class="col-sm-6">
            <a href="{{ url()->current() }}" class="btn d-block btn-dark my-2 border border-white">
                <i class="far fa-times-circle"></i>
                <b class="">Cancel</b>
            </a>
        </div>

        {{--@if ($menuTemplate->created_by_id === request()->user()->id)
            <div class="col-12">
                <label for="custom-template-background-color" class="text-white">Background Color</label>
                <select id="custom-template-background-color"
                        name="background_color"
                        class="form-control preset-color my-2"
                        tabindex="-1"
                >
                    <option value="">Choose...</option>
                    @foreach(json_decode(setting('preset_colors')) as $item)
                        <option value="{{ $item->color }}"
                                {{ $menuTemplate->background_color === $item->color ? 'selected' : '' }}
                        >{{ $item->name }}</option>
                    @endforeach
                </select>
            </div>
        @endif--}}
        <div class="col-12"></div>
        @if ($menuTemplate)
            @include('components.frontend.partials.assigned-user-list')
        @endif
        @include('components.frontend.partials.customise-button-access')
    {{--</div>--}}
</div>


@if(!$getTemplateId())
<div class="row">
    <div class="col-12">
        <div class="alert alert-warning" role="alert">
            {{ $page->no_template_message ?: 'No available template is found.' }}
        </div>
    </div>
</div>
@endif

    @push('js')
        <script>
            $(document).ready(function() {
                $('.select').select2({
                    width: '100%',
                });
                PresetColor.init({
                    colors: JSON.parse('{!! setting('preset_colors') !!}'),
                    color_selector: '#custom-template-background-color',
                    width: '100%',
                });

                $('#custom-template-background-color').on('select2:select', function (e) {
                    let data = e.params.data;
                    axios.put("{{ route('custom-page-menu-templates.background-color.update', ['template' => request('template'), 'pageMenuTemplate' => $menuTemplateId]) }}", {
                        background_color: e.params.data.color,
                    }).then((response) => {

                        iziToast.success({
                            title: response.data.status,
                            message: response.data.message,
                        });
                        $('<i class="fa-solid fa-spinner fa-spin fa-3x position-absolute"></i>')
                            .css({top: '40%', left: '49%', 'z-index':1000, color:e.params.data.color})
                            .appendTo('body');
                        setTimeout(function(){
                            window.location.reload();
                        }, 2000);

                    }).catch((errors) => {
                        iziToast.success({
                            title: 'Error',
                            message: errors.response.data.message,
                        });
                    }).finally(() => {});
                });
            });
        </script>
    @endpush
@endif