@include('components.frontend.sites.' . $page->template)

{{--<div class="page {{ $page->template }} @if($isCustomizeMode()) customize @endif">

    @if($showBody())
    <div class="row">
        <div class="col-12">
            <div class="page-body">{!! $page->body !!}</div>
        </div>
    </div>
    @endif

    @if($showBreadCrumb())
        <div class="row">
            <div class="col-12">
                <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        @foreach($showBreadCrumb() as $b)
                            <li class="breadcrumb-item {{ $b['active'] ? 'text-grey ' . $b['active'] : '' }}">
                                @if($b['href'])
                                    <a href="{{ $b['href'] }}">{{ $b['name'] }}</a>
                                @else
                                    <span class="fw-bold">{{ $b['name'] }}</span>
                                @endif
                            </li>
                        @endforeach
                    </ol>
                </nav>
            </div>
        </div>
    @endif

    @if($showContent())
        <div class="row">
            <div class="col-12">
                <div class="page-content">{!! $page->content !!}</div>
            </div>
        </div>
    @endif

    @if($showSearch())
        <div class="row">
            <div class="col-12">
                <x-search-panel :page="$page"></x-search-panel>
            </div>
        </div>
    @endif

    @if ($isCustomizeMode())
        <div class="customize-action my-5">
            @if($hasMultipleTemplates())
            <a data-bs-toggle="modal" data-bs-target="#menu-template-modal" class="btn d-block btn-dark my-2 border border-white">
                <i class="fa fa-list-alt fa-fw"></i>
                <b class="">TEMPLATES</b>
            </a>
            @endif

            @if($getTemplateId())
            <a onclick="reset_setting(event)" class="btn d-block btn-dark my-2 border border-white">
                <i class="fa fa-exclamation-triangle fa-fw"></i>
                <b class="">RESET SETTINGS</b>
            </a>
            @endif

            @if ($hasTemplate())
                <a onClick="update_template_settings(event)" class="btn d-block btn-dark my-2 border border-white">
                    <i class="fa fa-floppy-o fa-fw"></i>
                    <b class="">SAVE & EXIT</b>
                </a>
            @else
            <a href="{{ url()->current() }}" class="btn d-block btn-dark my-2 border border-white">
                <i class="fa fa-times-circle fa-fw"></i>
                <b class="">SAVE & EXIT</b>
            </a>
            @endif
        </div>
    @endif

    @if($isCustomizeMode() && !$getTemplateId())
        <div class="row">
            <div class="col-12">
                <div class="alert alert-warning" role="alert">
                    No available template is found.
                </div>
            </div>
        </div>
    @endif


    @switch(division($page->template))
        @case(\App\Models\TemplateMenuItem::DIVISION_DOCUMENT)
            <div class="row g-3">
                @if($links)
                    <div class="col-12 text-end">
                        <nav>
                            <ul class="pagination">
                                --}}{{-- Previous Page Link --}}{{--
                                @if (!$links['prev'])
                                    <li class="page-item disabled" aria-disabled="true">
                                        <span class="page-link">
                                            <i class="fas fa-arrow-left"></i>
                                        </span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $links['prev'] }}" rel="prev">
                                            --}}{{--@lang('pagination.previous')--}}{{--
                                            <i class="fas fa-arrow-left"></i>
                                        </a>
                                    </li>
                                @endif

                                --}}{{-- Next Page Link --}}{{--
                                @if ($links['next'])
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $links['next'] }}" rel="next">
                                            --}}{{--@lang('pagination.next')--}}{{--
                                            <i class="fas fa-arrow-right"></i>
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item disabled" aria-disabled="true">
                                        <span class="page-link">
                                            --}}{{--@lang('pagination.next')--}}{{--
                                            <i class="fas fa-arrow-right"></i>
                                        </span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                @endif

                @foreach ($menuItems as $item)

                    <x-frontend-menu-item
                            :item="$item"
                            :pageTemplate="$pageValue('template')"
                            :menuVisibleItems="$menuVisibleItems"
                            :viewByDefault="$viewByDefault"
                            :menuCookieItem="$menuCookieItem"
                    ></x-frontend-menu-item>

                @endforeach

            </div>
            @break

        @case(\App\Models\TemplateMenuItem::DIVISION_GLOSSARY)
            <div class="row">
                <div class="col-12">
                    <nav class="overflow-auto d-none d-md-block">
                        <ul class="pagination">
                            @if(request()->has('letter'))
                                <li class="page-item  ">
                                    <a class="page-link" href="{{ url()->current() }}">All</a>
                                </li>
                            @else
                                <li class="page-item disabled ">
                                    <span class="page-link" aria-hidden="true">All</span>
                                </li>
                            @endif
                            @foreach(range('A', 'Z') as $k => $c)

                                @if($c === request('letter'))
                                    <li class="page-item disabled">
                                        <span class="page-link" aria-hidden="true">{{ $c }}</span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ url()->current() }}?letter={{ $c }}">{{ $c }}</a>
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    </nav>
                    <div class="dropdown text-end d-block d-md-none">
                        <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                            @if(request()->has('letter'))
                                Glossary - {{ request('letter') }}
                            @else
                                All Glossary
                            @endif
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item @if(!request()->has('letter')) active @endif" href="{{ request()->has('letter') ? url()->current() : '' }}">All</a></li>
                            @foreach(range('A', 'Z') as $k => $c)
                                @if($c === request('letter'))
                                <li><a class="dropdown-item active" href="">{{ $c }}</a></li>
                                @else
                                    <li><a class="dropdown-item" href="{{ url()->current() }}?letter={{ $c }}">{{ $c }}</a></li>
                                @endif
                            @endforeach
                        </ul>
                    </div>
                </div>
                <div class="col-12">
                    <div class="masonry-container" data-masonry='{ "itemSelector": ".masonry-item", "columnWidth": 350 }'>
                        @foreach ($menuItems as $item)
                        <x-frontend-menu-item
                                :item="$item"
                                :pageTemplate="$pageValue('template')"
                                :menuVisibleItems="$menuVisibleItems"
                                :viewByDefault="$viewByDefault"
                                :menuCookieItem="$menuCookieItem"
                        ></x-frontend-menu-item>
                        @endforeach
                    </div>
                </div>
            </div>
            @break
        @case(\App\Models\TemplateMenuItem::DIVISION_UPDATE)
        @case(\App\Models\TemplateMenuItem::DIVISION_FAQ)
            <div class="row @if($menuItems->count()) g-4 @endif">
                @foreach ($menuItems as $item)

                    <x-frontend-menu-item
                            :item="$item"
                            :pageTemplate="$pageValue('template')"
                            :menuVisibleItems="$menuVisibleItems"
                            :viewByDefault="$viewByDefault"
                            :menuCookieItem="$menuCookieItem"
                    ></x-frontend-menu-item>

                @endforeach

                @if($links)
                    <div class="col-12">
                        {!!  $links !!}
                    </div>
                @endif
            </div>
            @break
        @default
            <div class="row @if($menuItems->count()) g-p-3 @endif">
            @foreach ($menuItems as $item)

                <x-frontend-menu-item
                        :item="$item"
                        :pageTemplate="$pageValue('template')"
                        :menuVisibleItems="$menuVisibleItems"
                        :viewByDefault="$viewByDefault"
                        :menuCookieItem="$menuCookieItem"
                ></x-frontend-menu-item>

            @endforeach

            @if($links)
                <div class="col-12">
                    {!!  $links !!}
                </div>
            @endif
            </div>
            @break
    @endswitch

    @if(!$menuItems->count())
        <div class="row">
            <div class="col-12">
                <div class="alert alert-info">
                    No {{ $page->template }} item is found
                </div>
            </div>
        </div>

    @endif


    @if($showFooter())
        <div class="row">
            <div class="col my-2">
                <div class="page-footer text-white">
                    {!! $showFooter() !!}
                </div>
            </div>
        </div>
    @endif

    @if($isCustomizeMode())
        <div id="menu-template-modal"
             class="modal"
             data-bs-backdrop="static"
             data-bs-keyboard="false"
             tabindex="-1"
             aria-labelledby="templateModal"
             aria-hidden="true"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Select Template</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        @foreach ($page->templates as $template)
                            <div style="background: #fff;margin-bottom: 5px;">
                                <a href="{{ url()->current() }}?customize=true&menu={{ $template->id }}">
                                    {{ $template->name }}
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>--}}

@push('css')
<style>
    {!! $page->custom_css !!}
</style>
@endpush

@push('js')

@if ($isCustomizeMode())
    <!-- Scripts -->
    {{--<script src="{{ url(asset('js/frontend.js')) }}"></script>
    <script src="{{ url(asset('js/app.js')) }}"></script>--}}
    @include('vendor.lara-izitoast.toast')
    <script>

        function reset_setting(e) {

            e.preventDefault();

            Swal.fire({
                title: 'Are you sure?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, reset it!'
            }).then((result) => {
                if (result.value) {
                    let data = {
                        pageId: '{{ $page->id }}',
                        templateId: '{{ $getTemplateId() }}',
                        menuItems: {}
                    };

                    axios({
                        url: "{{ route('control_menu_view') }}",
                        method: 'POST',
                        data: data
                    }).then((response) => {
                        iziToast.success({
                            title: 'Success',
                            message: 'Successfully updated.',
                        });
                        setTimeout(function(){
                            window.location.replace("{{ url()->current() }}")
                        }, 500);
                    });
                }
            })
        }

        function update_settings(){

            let data = {
                pageId: '{{ $page->id }}',
                templateId: '{{ $getTemplateId() }}',
                menuItems: {}
            };

            $.each($('input[type=checkbox]'), function(i, o) {
                data.menuItems['a' + $(o).data('id')] = $(o).is(':checked') ? 1 : 0;
            });

            axios({
                url: "{{ route('control_menu_view') }}",
                method: 'POST',
                data: data
            }).then((response) => {
                iziToast.success({
                    title: 'Success',
                    message: 'Successfully updated.',
                });
            });

            return true;
        }

        $('input[type=checkbox]').on('change', function (e) {
            update_settings();
        });

        function update_template_settings(e){
            e.preventDefault();
            if(update_settings()){
                setTimeout(() => {
                    window.location.href = "{{ url()->current() }}";
                }, 700);
            }
        }
    </script>
@endif
@endpush