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

@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/dropzone/min/dropzone.min.css">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/sitelook.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.top_menu_item_site')],
        ['label' => __('site.menu_item_6')],
        ['label' => __('site.menu_item_6_sub_4')],
    ];

    $base = 'https://' . $serverData->name . '/contents/' . session('siteID') . '/background/';
    $image = $bg->img ?? '' ? $base . $bg->img : null;

    $positions = [
        'left top', 'center top', 'right top',
        'left center', 'center center', 'right center',
        'left bottom', 'center bottom', 'right bottom',
    ];

    $repeats = [
        'no-repeat' => __('site.page_bg_repeat_0'),
        'repeat-x' => __('site.page_bg_repeat_x'),
        'repeat-y' => __('site.page_bg_repeat_y'),
        'repeat' => __('site.page_bg_repeat_xy'),
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

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

        <div class="page-head__acts">
            <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>

    @include('includes.flash')

    @if($apiError)
        <div class="apierr">
            <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
            <p class="apierr__text">{{ $apiError }}</p>
        </div>
    @else
        <form class="bgform" method="POST" action="{{ route('site.theme.bg.u.do') }}"
              data-base="{{ $base }}"
              data-msg-saving="{{ __('site.configs_saving') }}"
              data-msg-remove-title="{{ __('site.page_bg_remove_title') }}"
              data-msg-remove-text="{{ __('site.page_bg_remove_text') }}"
              data-msg-remove-btn="{{ __('site.page_bg_remove') }}">

            <div class="bgform__cols">
                <section class="sec">
                    <div class="sec__head">
                        <h2 class="sec__title"><i class="fa-solid fa-image"></i> {{ __('site.page_bg_block_image') }}</h2>
                    </div>

                    <div class="sec__body">
                        {{-- div e não form: form aninhado é descartado pelo parser --}}
                        <div class="bgdrop" data-url="{{ route('site.theme.bg.upload') }}">
                            <img class="bgdrop__img" src="{{ $image }}" alt="" {{ $image ? '' : 'hidden' }}>

                            <span class="bgdrop__empty">
                                <i class="fa-solid fa-cloud-arrow-up"></i>
                                <span>{{ __('site.page_bg_drop_here') }}</span>
                            </span>

                            <span class="bgdrop__change">{{ __('site.page_bg_change') }}</span>
                        </div>

                        <input type="hidden" name="bg_img" class="bgform__img" value="{{ $bg->img ?? '' }}">

                        <p class="bghint"><i class="fa-solid fa-circle-info"></i> {{ __('site.page_bg_size_hint') }}</p>
                    </div>
                </section>

                <section class="sec">
                    <div class="sec__head">
                        <h2 class="sec__title"><i class="fa-solid fa-sliders"></i> {{ __('site.page_bg_block_how') }}</h2>
                    </div>

                    <div class="sec__body">
                        <div class="field field--stack">
                            <span class="field__label">{{ __('site.page_bg_opacity') }}</span>

                            <div class="bgrange">
                                <input class="bgrange__input" type="range" name="opacity" min="0" max="100" step="10"
                                       value="{{ $bg->opacity ?? 0 }}" style="--fill: {{ (int) ($bg->opacity ?? 0) }}%">
                                <output class="bgrange__value">{{ $bg->opacity ?? 0 }}%</output>
                            </div>

                            <span class="field__help">{{ __('site.page_bg_opacity_help') }}</span>
                        </div>

                        <label class="row">
                            <span class="row__text">
                                <strong>{{ __('site.page_bg_cover') }}</strong>
                                <small>{{ __('site.page_bg_cover_help') }}</small>
                            </span>
                            <span class="switch">
                                <input type="hidden" name="size" value="0">
                                <input type="checkbox" name="size" value="1" class="bgform__cover" @checked($bg->cover ?? false)>
                                <span class="switch__track"><span class="switch__knob"></span></span>
                            </span>
                        </label>

                        <div class="field field--stack bgform__loose">
                            <span class="field__label">{{ __('site.page_bg_repeat') }}</span>

                            <select class="input bgform__repeat" name="repeat">
                                @foreach($repeats as $value => $label)
                                    <option value="{{ $value }}" @selected(($bg->repeat ?? 'no-repeat') === $value)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="field field--stack bgform__loose">
                            <span class="field__label">{{ __('site.page_bg_position') }}</span>

                            <input type="hidden" name="position" class="bgform__position" value="{{ $bg->position ?? 'center center' }}">

                            <div class="bggrid">
                                @foreach($positions as $position)
                                    <button class="bggrid__cell {{ ($bg->position ?? 'center center') === $position ? 'is-on' : '' }}"
                                            type="button" data-position="{{ $position }}"
                                            aria-label="{{ $position }}"></button>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-eye"></i> {{ __('site.page_bg_preview') }}</h2>
                    <p class="sec__desc">{{ __('site.page_bg_preview_help') }}</p>
                </div>

                <div class="sec__body">
                    <div class="bgpreview">
                        <span class="bgpreview__paint"></span>

                        <span class="bgpreview__page">
                            <span class="bgpreview__bar"></span>
                            <span class="bgpreview__line"></span>
                            <span class="bgpreview__line bgpreview__line--short"></span>
                        </span>
                    </div>
                </div>
            </section>

            <div class="bgform__foot">
                @if($bg->img ?? '')
                    <button class="btn btn--soft-red bgremove" type="button">
                        <i class="fa-solid fa-trash"></i> {{ __('site.page_bg_remove') }}
                    </button>
                @endif

                <button class="btn btn--primary bgform__submit" type="submit">
                    @include('includes.spinner')
                    <span class="btn__label">{{ __('site.action_save') }}</span>
                </button>
            </div>
        </form>

        <form class="bgrmform" method="POST" action="{{ route('site.theme.u.bg.rm') }}" hidden></form>
    @endif

</main>

@section('scripts')
    <script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
    <script src="{{ assetv('/assets/js/site-look.js') }}"></script>
@endsection

@include('includes/footer-novo')