@section('title', __('site.page_customize_title'))

@section('head')
    <link rel="stylesheet" href="/assets/customize/css/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/customize/css/colorpicker.css">
    <link rel="stylesheet" href="/assets/customize/css/select2.css">
    <link rel="stylesheet" href="/assets/customize/css/jquery.fileupload.css">
    <link rel="stylesheet" href="/assets/customize/css/theme-customize.css">
    <link rel="stylesheet" href="/assets/css/pages/sitecustomize.css">
    <link rel="stylesheet" href="{{ route('cssTheme', $siteData->id) }}">
@endsection

@php
    $rows = [];

    foreach ($containers as $container) {
        $last = count($rows) - 1;

        if ($container['row'] === 'group' && $last >= 0 && $rows[$last]['row'] === 'group') {
            $rows[$last]['items'][] = $container;
            continue;
        }

        $rows[] = ['row' => $container['row'], 'items' => [$container]];
    }
@endphp

@include('includes/header-novo')

<main class="app-main">

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_customize_title') }}</h1>
            <p class="page-sub">{{ __('site.page_customize_sub') }}</p>
        </div>

        <div class="page-head__acts">
            <a class="btn btn--soft-blue" href="{{ route('site.theme.themes.r') }}">
                <i class="fa-solid fa-swatchbook"></i> {{ __('site.menu_item_6_sub_1') }}
            </a>
            <a class="btn btn--ghost" href="https://{{ $siteData->domain }}" target="_blank" rel="noopener">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('site.page_themes_open_site') }}
            </a>
        </div>
    </header>

    @if($isMobile == 'true')
        <div class="cempty">
            <span class="apierr__ico"><i class="fa-solid fa-desktop"></i></span>
            <p class="apierr__text">{{ __('site.customize_mobile_only_desktop') }}</p>
        </div>
    @else
        <div id="theme-container-overlay">
            <div class="inner-content">
                <div class="success-message">
                    <i class="fa-solid fa-circle-check"></i><br>
                    {{ __('site.customize_saved_success') }}<br><br>
                    <a href="#" class="btn btn--ghost">OK</a>
                </div>
                <div class="loading-message">
                    @include('includes.spinner')
                    <span>{{ __('site.customize_saving') }}</span>
                </div>
            </div>
        </div>

        <div id="theme-container" class="tcwrap">
            <div id="theme-control-bar" class="tcrail">
                <section class="tccard" id="theme-styles">
                    <h2 class="tccard__head">{{ __('site.customize_style_title') }}</h2>

                    <div class="tccard__body">
                        {{-- as três cores lado a lado: em coluna, empurravam o salvar para fora da tela --}}
                        <div class="tccolors">
                            <div class="form-group" data-primary="1" data-background=".bg-color-1" data-border=".border-color-1" data-color=".color-1">
                                <div class="color-input" title="{{ __('site.customize_color_background') }}">
                                    <i data-background="{{ $siteData->p1 }}" style="background: {{ $siteData->p1 }};"></i>
                                </div>
                                <label>{{ __('site.customize_color_background') }}</label>
                            </div>

                            <div class="form-group" data-background=".bg-color-2" data-border=".border-color-2" data-color=".color-2">
                                <div class="color-input" title="{{ __('site.customize_color_titles_texts') }}">
                                    <i data-background="{{ $siteData->p2 }}" style="background: {{ $siteData->p2 }};"></i>
                                </div>
                                <label>{{ __('site.customize_color_titles_texts') }}</label>
                            </div>

                            <div class="form-group" data-background=".bg-color-3" data-border=".border-color-3" data-color=".color-3">
                                <div class="color-input" title="{{ __('site.customize_color_buttons_details') }}">
                                    <i data-background="{{ $siteData->p3 }}" style="background: {{ $siteData->p3 }};"></i>
                                </div>
                                <label>{{ __('site.customize_color_buttons_details') }}</label>
                            </div>
                        </div>

                        <div class="form-group tcfont">
                            <label>{{ __('site.customize_font_size') }}</label>
                            <select id="font-size-selector" class="tcinput">
                                <option value="14" @selected($siteData->font == '14')>{{ __('site.customize_font_small') }}</option>
                                <option value="16" @selected($siteData->font == '16')>{{ __('site.customize_font_normal') }}</option>
                                <option value="18" @selected($siteData->font == '18')>{{ __('site.customize_font_large') }}</option>
                            </select>
                        </div>
                    </div>
                </section>

                <section class="tccard" id="theme-modules">
                    <h2 class="tccard__head">{{ __('site.customize_modules_title') }}</h2>

                    <p class="tchint"><i class="fa-solid fa-arrows-up-down-left-right"></i> {{ __('site.page_customize_drag_hint') }}</p>

                    <div class="tcpalette">
                        <ul class="nav">
                            @foreach($palette as $item)
                                <li class="module-item" data-max="{{ $item['max'] }}"
                                    data-accept="{{ json_encode($item['accept']) }}"
                                    data-module="{{ $item['id'] }}"
                                    data-identifier="{{ $item['slug'] }}">
                                    <a href="#" class="nav-link">
                                        <i class="fa {{ $item['icon'] }}"></i> {{ __($item['label']) }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </section>

                <a id="save-theme" href="#" class="btn btn--primary tcsave" onclick="return false;">
                    <i class="fa-solid fa-floppy-disk"></i> {{ __('site.customize_save_theme') }}
                </a>
            </div>

            <div class="tcstage">
                <p class="tcloading">
                    @include('includes.spinner')
                    {{ __('site.page_customize_loading_modules') }}
                </p>

                <div class="theme-body bg-color-1 color-2 font-size {{ isLight($siteData->p1) }}">
                    @foreach($rows as $row)
                        @if($row['row'] === 'group')
                            <div class="theme-container-group">
                                @foreach($row['items'] as $container)
                                    <div class="tccol" style="width: {{ $container['width'] }}%">
                                        @include('site.themes.parts.area', ['area' => $container])
                                    </div>
                                @endforeach
                            </div>
                        @else
                            @include('site.themes.parts.area', ['area' => $row['items'][0]])
                        @endif
                    @endforeach

                    <script type="text/javascript">
                        var MODULE_INCREMENT = {{ $totalModules }};
                        var ACTUAL_CONTAINER_MODULES = {!! html_entity_decode($actualModules) !!};
                    </script>
                </div>
            </div>
        </div>

        <div class="modal tcmodal" id="theme-modal" hidden>
            <div class="modal__card modal__card--wide" role="dialog" aria-modal="true">
                <div class="tcmodal__head">
                    <h2 class="modal__title">{{ __('site.customize_modal_title') }}</h2>
                    <button class="tcmodal__x close" type="button"><i class="fa-solid fa-xmark"></i></button>
                </div>

                <div class="tcmodal__body">
                    <div class="modal-loading">@include('includes.spinner')</div>

                    <div class="loading" style="display: none;">
                        @include('includes.spinner')
                        <span>{{ __('site.customize_loading') }}</span>
                    </div>

                    <div class="modal-body-inner"></div>
                </div>

                <div class="modal__foot">
                    <button type="button" class="btn btn--ghost cancel">{{ __('site.btn_cancel') }}</button>
                    <button type="button" class="btn btn--primary confirm" data-action="confirm">{{ __('site.action_save') }}</button>
                </div>
            </div>
        </div>
    @endif

</main>

@section('scripts')
    <script type="text/javascript">
        var IS_MOBILE = {{ $isMobile }};
        var CUSTOMIZE_CSS_STICKY = true;
        var PREVIEW_FROM_THEME = true;
        var PREVIEW_EMPTY_LABEL = @json(__('site.page_customize_module_empty'));
        var PREVIEW_EDIT_ERROR = @json(__('site.page_customize_edit_error'));
        var AcceptReduced = {"3":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,19,20,22,23,24,25]};
    </script>
    <script src="/assets/customize/js/jquery-1.11.3.min.js"></script>
    <script src="/assets/customize/js/jquery-ui.min.js"></script>
    <script src="/assets/customize/js/utils.js"></script>
    <script src="/assets/customize/js/colorpicker.js"></script>
    <script src="/assets/customize/js/select2.js"></script>
    <script src="/assets/customize/js/pt-br.js"></script>
    <script src="/assets/customize/js/jquery.iframe-transport.js"></script>
    <script src="/assets/customize/js/jquery.fileupload.js"></script>
    <script src="/assets/customize/js/jquery.fileupload-process.js"></script>
    <script src="/assets/customize/js/jquery.fileupload-validate.js"></script>
    <script src="/assets/customize/js/uploader.js"></script>
    <script src="/assets/customize/js/theme-customize.js?t=2"></script>
@endsection

@include('includes/footer-novo')