@section('title', __('radio.alexa_title'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radioapp.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radioalexa.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_radio')],
        ['label' => __('radio.menu_item_5')],
        ['label' => __('radio.alexa_title')],
    ];

    $status = $skill ? (string) $skill->status : null;

    $states = [
        '0' => ['icon' => 'fa-hourglass-half', 'title' => __('radio.alexa_sent_h1'),
                'text' => __('radio.alexa_sent_h2'), 'tag' => __('radio.alexa_tag_pending'), 'tone' => 'wait'],
        '1' => ['icon' => 'fa-circle-check', 'title' => __('radio.alexa_state_live_title'),
                'text' => __('radio.alexa_state_live_text'), 'tag' => __('radio.alexa_tag_live'), 'tone' => 'ok'],
        '2' => ['icon' => 'fa-circle-xmark', 'title' => __('radio.alexa_state_refused_title'),
                'text' => __('radio.alexa_state_refused_text'), 'tag' => __('radio.alexa_tag_refused'), 'tone' => 'bad'],
        '3' => ['icon' => 'fa-magnifying-glass', 'title' => __('radio.alexa_state_review_title'),
                'text' => __('radio.alexa_state_review_text'), 'tag' => __('radio.alexa_tag_review'), 'tone' => 'work'],
        '4' => ['icon' => 'fa-circle-minus', 'title' => __('radio.alexa_state_off_title'),
                'text' => __('radio.alexa_state_off_text'), 'tag' => __('radio.alexa_tag_off'), 'tone' => 'bad'],
    ];

    $state = $status !== null ? ($states[$status] ?? $states['0']) : null;

    /* Recusada e o unico estado que volta a aceitar solicitacao: nos outros
       quatro o pedido ja esta com alguem. */
    $showForm = $siteData->alexa && ($status === null || $status === '2');
    $waiting = in_array($status, ['0', '3'], true);

    $sentAt = $skill && ! empty($skill->created_at) ? strtotime($skill->created_at) : null;
    $deadline = $sentAt ? date('d/m/Y', strtotime('+' . $reviewDays . ' days', $sentAt)) : null;

    $pickers = [
        ['field' => 'thumbnailImg', 'label' => __('radio.alexa_thumbnail'), 'size' => 108,
         'need' => __('radio.alexa_error_thumbnail'), 'help' => __('radio.alexa_help_thumbnail'),
         'image' => $images['thumbnail']],
        ['field' => 'iconImg', 'label' => __('radio.alexa_icon'), 'size' => 512,
         'need' => __('radio.alexa_error_icon'), 'help' => __('radio.alexa_help_icon'),
         'image' => $images['icon']],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('radio.alexa_title') }}</h1>
            <p class="page-sub">{{ __('radio.alexa_page_sub') }}</p>
        </div>
    </header>

@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>

@elseif(! $siteData->alexa)

    <section class="sec">
        <div class="appstate appstate--off">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <h3>{{ __('radio.feature_unavailable_plan') }}</h3>
            <p>{{ __('radio.feature_unavailable_contact') }}</p>
        </div>
    </section>

@else

    @if($state)
        <section class="sec">
            <div class="appstate {{ $state['tone'] === 'bad' ? 'appstate--off' : '' }}">
                <i class="fa-solid {{ $state['icon'] }}"></i>
                <h3>{{ $state['title'] }}</h3>
                <p>{{ $state['text'] }}</p>

                @if($status === '1')
                    <p class="alxsay alxsay--live">
                        <i class="fa-solid fa-quote-left"></i>
                        <b>{{ __('radio.alexa_phrase_sample', ['name' => $skill->invocation]) }}</b>
                    </p>
                @endif

                @if($waiting && $deadline)
                    <p class="alxwhen">
                        {{ __('radio.alexa_sent_deadline') }} <b>{{ $deadline }}</b>
                        <span class="alxwhen__why" data-tip="{{ __('radio.alexa_sent_deadline_info') }}">
                            <i class="fa-solid fa-question"></i>
                        </span>
                    </p>
                @endif

                <span class="appbar__tag appbar__tag--{{ $state['tone'] }}">{{ $state['tag'] }}</span>

                <dl class="alxfacts">
                    <div>
                        <dt>{{ __('radio.alexa_label_name') }}</dt>
                        <dd>{{ $skill->name }}</dd>
                    </div>
                    <div>
                        <dt>{{ __('radio.alexa_label_invocation') }}</dt>
                        <dd>{{ $skill->invocation }}</dd>
                    </div>
                </dl>

                @if($sentAt)
                    <p class="alxwhen alxwhen--sent">{{ __('radio.alexa_sent_at', ['date' => date('d/m/Y', $sentAt)]) }}</p>
                @endif

                @if($images['thumbnail'] || $images['icon'])
                    <div class="alxshots">
                        @foreach($pickers as $picker)
                            @if($picker['image'])
                                <figure>
                                    <img src="{{ $picker['image'] }}" alt="{{ $picker['label'] }}">
                                    <figcaption>{{ $picker['label'] }}</figcaption>
                                </figure>
                            @endif
                        @endforeach
                    </div>
                @endif

                @if($status === '1' && ! empty($skill->link))
                    <a class="btn btn--primary alxstore" href="{{ $skill->link }}" target="_blank" rel="noopener noreferrer">
                        <i class="fa-brands fa-amazon"></i>
                        <span>{{ __('radio.alexa_store_link') }}</span>
                    </a>
                @endif
            </div>
        </section>
    @endif

    @if($showForm)
        <div class="alxgrid">
            <form class="sec alxform" method="POST" enctype="multipart/form-data"
                  action="{{ route('radio.alexa.r.do') }}"
                  data-phrase="{{ __('radio.alexa_phrase_sample') }}"
                  data-msg-png="{{ __('radio.alexa_val_png') }}"
                  data-msg-max="{{ __('radio.alexa_val_max') }}"
                  data-msg-error="{{ __('radio.alexa_api_error') }}">
                @csrf

                <div class="sec__head">
                    <h2 class="sec__title">
                        <i class="fa-solid fa-sliders"></i>
                        {{ $status === '2' ? __('radio.alexa_new_request') : __('radio.alexa_form_title') }}
                    </h2>
                </div>

                <div class="sec__body">
                    <div class="grid-2">
                        <label class="field field--full {{ $errors->has('name') ? 'is-bad' : '' }}" data-wrap="name" data-msg-need="{{ __('radio.alexa_val_name') }}">
                            <span class="field__label">{{ __('radio.alexa_label_name') }}</span>
                            <input class="input" type="text" name="name" maxlength="150"
                                   value="{{ old('name', $skill->name ?? '') }}" autocomplete="off">
                            <span class="field__help">{{ __('radio.alexa_help_name') }}</span>
                            <p class="alxerr" data-err="name" @if(! $errors->has('name')) hidden @endif>{{ $errors->first('name') }}</p>
                        </label>

                        <label class="field field--full {{ $errors->has('invocation') ? 'is-bad' : '' }}" data-wrap="invocation" data-msg-need="{{ __('radio.alexa_val_invocation') }}">
                            <span class="field__label">{{ __('radio.alexa_label_invocation') }}</span>
                            <input class="input" type="text" name="invocation" maxlength="150"
                                   value="{{ old('invocation', $skill->invocation ?? '') }}" autocomplete="off" data-say-in>
                            <span class="field__help">{{ __('radio.alexa_help_invocation') }}</span>
                            <p class="alxsay" data-say hidden>
                                <i class="fa-solid fa-quote-left"></i>
                                <span>{{ __('radio.alexa_phrase_hint') }}</span>
                                <b data-say-out></b>
                            </p>
                            <p class="alxerr" data-err="invocation" @if(! $errors->has('invocation')) hidden @endif>{{ $errors->first('invocation') }}</p>
                        </label>
                    </div>

                    <div class="sec__head alxform__split">
                        <h2 class="sec__title"><i class="fa-solid fa-image"></i> {{ __('radio.alexa_images_title') }}</h2>
                    </div>

                    <div class="alxpicks">
                        @foreach($pickers as $picker)
                            <div class="field {{ $errors->has($picker['field']) ? 'is-bad' : '' }}" data-wrap="{{ $picker['field'] }}" data-pick
                                 data-size="{{ $picker['size'] }}"
                                 data-msg-need="{{ $picker['need'] }}"
                                 data-msg-dim="{{ __('radio.alexa_val_dim', ['size' => $picker['size'] . ' x ' . $picker['size']]) }}">
                                <span class="field__label">{{ $picker['label'] }}</span>

                                <label class="alxdrop" data-drop>
                                    <input type="file" name="{{ $picker['field'] }}" accept="image/png,.png" hidden data-file>

                                    <img class="alxdrop__prev" alt="" data-prev hidden>

                                    <span class="alxdrop__empty">
                                        <i class="fa-solid fa-cloud-arrow-up"></i>
                                        <b>{{ __('radio.alexa_image_pick') }}</b>
                                        <span>{{ __('radio.alexa_image_rules', ['size' => $picker['size'] . ' x ' . $picker['size']]) }}</span>
                                    </span>

                                    <span class="alxdrop__change">{{ __('radio.alexa_image_change') }}</span>
                                </label>

                                <p class="alxpick__help">{{ $picker['help'] }}</p>

                                <p class="alxerr" data-err="{{ $picker['field'] }}" @if(! $errors->has($picker['field'])) hidden @endif>{{ $errors->first($picker['field']) }}</p>
                            </div>
                        @endforeach
                    </div>

                    <div class="alxform__foot">
                        <p class="alxerr alxerr--wide" data-err-form hidden></p>

                        <button type="submit" class="btn btn--primary" data-send>
                            @include('includes/spinner')
                            <span>{{ __('radio.alexa_submit') }}</span>
                        </button>
                    </div>
                </div>
            </form>

            <aside class="sec alxside">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-brands fa-amazon"></i> {{ __('radio.alexa_how_title') }}</h2>
                </div>

                <div class="sec__body">
                    <ol class="alxsteps">
                        <li>{{ __('radio.alexa_how_1') }}</li>
                        <li>{{ __('radio.alexa_how_2') }}</li>
                        <li>{{ __('radio.alexa_how_3') }}</li>
                    </ol>

                    <img class="alxart" src="{{ assetv('/assets/img/alexa.png') }}" alt="" loading="lazy">
                </div>
            </aside>
        </div>
    @endif

@endif

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/pages/radio-alexa.js') }}"></script>
@endsection

@include('includes/footer-novo')