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

@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/sitefeatured.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('site.menu_item_3')],
        ['label' => __('site.menu_item_3_sub_4'), 'url' => route('site.featured.r')],
        ['label' => __('site.page_featured_new_h1')],
    ];

    $type = old('type', '3');

    $kinds = [
        '3' => ['label' => __('site.page_featured_type_4'), 'icon' => 'fa-newspaper', 'desc' => __('site.page_featured_kind_post')],
        '1' => ['label' => __('site.page_featured_type_2'), 'icon' => 'fa-calendar-days', 'desc' => __('site.page_featured_kind_event')],
        '2' => ['label' => __('site.page_featured_type_3'), 'icon' => 'fa-gift', 'desc' => __('site.page_featured_kind_promo')],
        '0' => ['label' => __('site.page_featured_type_1'), 'icon' => 'fa-image', 'desc' => __('site.page_featured_kind_image')],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

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

    @include('includes.flash')

    <form class="feaform" method="POST" action="{{ route('site.featured.c.do') }}"
          data-url-pick="{{ url('site/featured/getData') }}"
          data-msg-saving="{{ __('site.configs_saving') }}"
          data-msg-taken="{{ __('site.page_featured_taken') }}"
          data-msg-empty="{{ __('site.page_featured_pick_empty') }}"
          data-msg-error="{{ __('site.page_featured_pick_error') }}"
          data-msg-more="{{ __('site.page_featured_pick_more') }}">

        <input type="hidden" name="entry" class="feaform__entry" value="{{ old('entry') }}">
        <input type="hidden" name="feature_image" class="feaform__img" value="{{ old('feature_image') }}">

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

            <div class="sec__body">
                <div class="kinds">
                    @foreach($kinds as $key => $kind)
                        {{-- (string) porque o PHP converte chave numérica de array para int,
                             e sem isso a comparação estrita nunca casa e nada nasce marcado --}}
                        <label class="kind">
                            <input type="radio" name="type" value="{{ $key }}" @checked((string) $key === (string) $type)>
                            <span class="kind__ico"><i class="fa-solid {{ $kind['icon'] }}"></i></span>
                            <span class="kind__text">
                                <strong>{{ $kind['label'] }}</strong>
                                <small>{{ $kind['desc'] }}</small>
                            </span>
                            <span class="kind__tick"><i class="fa-solid fa-check"></i></span>
                        </label>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- escolher o registro apontado: vale para tudo que não é imagem própria --}}
        <section class="sec feapick" {{ $type === '0' ? 'hidden' : '' }}>
            <div class="sec__head feapick__head">
                <h2 class="sec__title"><i class="fa-solid fa-hand-pointer"></i> {{ __('site.page_featured_pick_title') }}</h2>

                <div class="ltools__search feapick__search">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input class="input feapick__q" type="text" autocomplete="off"
                           placeholder="{{ __('site.page_featured_new_placeh') }}">
                </div>
            </div>

            <div class="sec__body">
                @if(session('error_entry'))
                    <p class="field__err feapick__err">{{ session('error_entry') }}</p>
                @endif

                {{-- esqueleto no formato dos cartões reais, para a área não pular quando os dados chegam --}}
                <div class="pickskel">
                    @for($i = 0; $i < 6; $i++)
                        <div class="pickskel__item">
                            <span class="pickskel__img"></span>
                            <span class="pickskel__line"></span>
                            <span class="pickskel__line pickskel__line--short"></span>
                        </div>
                    @endfor
                </div>

                <div class="pickgrid"></div>

                <p class="pickstate" hidden></p>

                <button class="btn btn--ghost pickmore" type="button" hidden>{{ __('site.page_featured_pick_more') }}</button>
            </div>
        </section>

        {{-- imagem própria --}}
        <section class="sec feaown" {{ $type === '0' ? '' : 'hidden' }}>
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-image"></i> {{ __('site.page_featured_new_block_title') }}</h2>
            </div>

            <div class="sec__body">
                <div class="feaown__grid">
                    {{-- div e não form: form aninhado é descartado pelo parser do navegador,
                         e a caixa some junto com a classe que o dropzone procura --}}
                    <div class="feaown__preview feadrop" data-url="{{ route('site.featured.r.upload') }}">
                        <img class="feaown__img" src="" alt="" hidden>

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

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

                    <div class="feaown__fields">
                        <label class="field">
                            <span class="field__label">{{ __('site.page_featured_new_input_3') }}</span>
                            <input class="input" type="text" name="description" value="{{ old('description') }}" maxlength="255">
                            @if(session('error_description'))
                                <span class="field__err">{{ session('error_description') }}</span>
                            @endif
                        </label>

                        <label class="field">
                            <span class="field__label">{{ __('site.page_featured_new_input_4') }}</span>
                            <input class="input" type="url" name="link" value="{{ old('link') }}" placeholder="https://">
                        </label>
                    </div>
                </div>
            </div>
        </section>

        <section class="sec">
            <div class="sec__body">
                <label class="row">
                    <span class="row__text">
                        <strong>{{ __('site.page_featured_new_input_2') }}</strong>
                        <small>{{ __('site.page_featured_target_help') }}</small>
                    </span>
                    <span class="switch">
                        <input type="checkbox" name="target" value="1" @checked(old('target') == '1')>
                        <span class="switch__track"><span class="switch__knob"></span></span>
                    </span>
                </label>
            </div>
        </section>

        <div class="feaform__foot">
            <a class="btn btn--ghost" href="{{ route('site.featured.r') }}">{{ __('site.btn_cancel') }}</a>
            <button class="btn btn--primary feaform__submit" type="submit">
                @include('includes.spinner')
                <span class="btn__label">{{ __('site.action_save') }}</span>
            </button>
        </div>
    </form>

</main>

@section('scripts')
    <script>
        var LNG_DROPHERE = @json(__('site.page_featured_drop_here'));
        var LNG_CANCELUP = @json(__('site.site_file_cancel'));
        var LNG_CANCELEDUP = @json(__('site.site_file_canceled'));
        var LNG_REMOVE = @json(__('site.btn_remove'));
    </script>
    <script src="/assets/js/plugins/dropzone/min/dropzone.min.js"></script>
    <script src="{{ assetv('/assets/js/site-featured.js') }}"></script>
@endsection

@include('includes/footer-novo')