@section('title', __('radio.app_webapp_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/radiowebapp.css') }}">
@endsection

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

    $passo = (int) ($appData->step ?? 1);
    $publicado = ($appData->status ?? '0') === '1';

    /* modulos do passo 2, na ordem em que aparecem no web app */
    $modulos = [
        'mod_schedule' => ['fa-calendar-days', __('radio.app_mod_schedule'), __('radio.app_mod_schedule_desc')],
        'mod_chat' => ['fa-comments', __('radio.app_mod_chat'), __('radio.app_mod_chat_desc')],
        'mod_messages' => ['fa-comment-dots', __('radio.app_mod_messages'), __('radio.app_mod_messages_desc')],
        'mod_requests' => ['fa-music', __('radio.app_mod_requests'), __('radio.app_mod_requests_desc')],
    ];

    [$logoW, $logoH] = \App\Services\AppImage::SPECS['pwa_logo'];
    [$iconW, $iconH] = \App\Services\AppImage::SPECS['pwa_icon'];
    [$bgW, $bgH] = \App\Services\AppImage::SPECS['pwa_bg'];
@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.app_webapp_title') }}</h1>
            <p class="page-sub">{{ __('radio.app_webapp_page_sub') }}</p>
        </div>
    </header>

    @include('radio.includes.apps-nav')

@if($apiError ?? null)

    <section class="sec">
        <div class="apierr">
            <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
            <p class="apierr__text">{{ $apiError }}</p>
        </div>
    </section>

@elseif(!$siteData->pwa)

    <section class="sec">
        <div class="appstate">
            <i class="fa-solid fa-earth-americas"></i>
            <h3>{{ __('radio.app_webapp_no_plan') }}</h3>
            <p>{{ __('radio.app_webapp_no_plan_p1') }}</p>
            <p>{{ __('radio.app_webapp_no_plan_p2') }}</p>
            <a class="btn btn--primary" href="{{ route('radio.home.r') }}">
                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                <span>{{ __('radio.app_plan_change') }}</span>
            </a>
        </div>
    </section>

@elseif($publicado)

    <section class="sec wapub"
             data-url-reset="{{ route('radio.apps.r.webapp-change') }}"
             data-msg-redo-title="{{ __('radio.app_webapp_redo_title') }}"
             data-msg-redo-text="{{ __('radio.app_webapp_redo_text') }}"
             data-msg-redo-btn="{{ __('radio.app_webapp_redo') }}"
             data-msg-error="{{ __('radio.app_api_error') }}"
             data-msg-copied="{{ __('general.action_copied') }}"
             data-msg-copy-error="{{ __('general.widgets_copy_error') }}">

        <div class="wapub__body">
            <div class="wapub__top">
                <span class="appbar__tag appbar__tag--ok">
                    <i class="fa-solid fa-circle-check"></i> {{ __('radio.app_status_published') }}
                </span>
                <span class="wapub__installs">{{ trans_choice('radio.app_webapp_installs', (int) $appData->downloads, ['count' => $appData->downloads]) }}</span>
            </div>

            <span class="wapub__label">{{ __('radio.app_webapp_address') }}</span>

            <div class="wapub__link">
                <a class="wapub__addr" href="https://{{ $siteData->domain }}/app/" target="_blank" rel="noopener">https://{{ $siteData->domain }}/app/</a>

                <button type="button" class="wapub__copy" data-copy="https://{{ $siteData->domain }}/app/">
                    <i class="fa-regular fa-copy"></i>
                    <span data-copy-label>{{ __('general.action_copy') }}</span>
                </button>
            </div>

            <div class="wapub__acts">
                <a class="btn btn--primary" href="https://{{ $siteData->domain }}/app/" target="_blank" rel="noopener">
                    <i class="fa-solid fa-arrow-up-right-from-square"></i>
                    <span>{{ __('radio.app_webapp_open') }}</span>
                </a>
                <p class="wapub__hint">{{ __('radio.app_webapp_live_sub') }}</p>
            </div>

            <p class="modal__error" data-redo-error hidden></p>

            <div class="wapub__foot">
                <p class="appnote">
                    <i class="fa-solid fa-circle-info"></i>
                    <span>{{ __('radio.app_webapp_redo_note') }}</span>
                </p>

                <button type="button" class="btn btn--ghost appstep__save" data-redo>
                    <span><i class="fa-solid fa-rotate-left"></i> {{ __('radio.app_webapp_redo') }}</span>
                    @include('includes.spinner')
                </button>
            </div>
        </div>
    </section>

@else

    <div class="appwrap">
        <div class="appwrap__main">
            <div class="appform"
                 data-url-step="{{ route('radio.apps.r.webapp-step') }}"
                 data-url-preview="{{ route('radio.apps.r.webapp-preview') }}"
                 data-step="{{ $passo }}"
                 data-msg-error="{{ __('radio.app_save_error') }}"
                 data-msg-name-required="{{ __('radio.app_name_required') }}"
                 data-msg-img-min="{{ __('radio.app_img_min') }}"
                 data-msg-upload-choose="{{ __('radio.app_upload_choose') }}"
                 data-msg-bg-required="{{ __('radio.app_bg_required') }}"
                 data-msg-images-required="{{ __('radio.app_webapp_images_required') }}"
                 data-msg-your-radio="{{ __('radio.app_preview_your_radio') }}">

                {{-- passo 1 --}}
                <section class="sec appstep @if($passo > 1) is-done @endif" data-step-box="1">
                    <button type="button" class="appstep__head" data-step-head="1">
                        <span class="appstep__num"><b>1</b><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                        <span class="appstep__title">{{ __('radio.app_step1_name') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="1" @if($passo > 1) hidden @endif>
                        <label class="appfield">
                            <span class="appfield__label">{{ __('radio.app_name_label') }}</span>
                            <input type="text" class="input" data-name maxlength="30"
                                   value="{{ $appData->name ?? '' }}" placeholder="{{ __('radio.app_name_placeholder') }}">
                            <span class="appfield__help">
                                <span data-name-count>0</span>/30 {{ __('radio.app_name_limit_chars') }}
                            </span>
                        </label>

                        <p class="modal__error" data-error-1 hidden></p>

                        <div class="appstep__foot">
                            <button type="button" class="btn btn--primary appstep__save" data-save="1">
                                <span>{{ __('radio.app_action_save_continue') }}</span>
                                @include('includes.spinner')
                            </button>
                        </div>
                    </div>
                </section>

                {{-- passo 2 --}}
                <section class="sec appstep @if($passo > 2) is-done @endif @if($passo < 2) is-locked @endif" data-step-box="2">
                    <button type="button" class="appstep__head" data-step-head="2" @disabled($passo < 2)>
                        <span class="appstep__num"><b>2</b><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                        <span class="appstep__title">{{ __('radio.app_step2_modules') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="2" @if($passo != 2) hidden @endif>
                        <p class="appstep__intro">{{ __('radio.app_webapp_modules_intro') }}</p>

                        <ul class="appmods">
                            <li class="appmod appmod--fixed">
                                <span class="appmod__ico"><i class="fa-solid fa-tower-broadcast"></i></span>
                                <span class="appmod__text">
                                    <b>{{ __('radio.app_mod_now') }} <em>{{ __('radio.app_required_badge') }}</em></b>
                                    <span>{{ __('radio.app_webapp_mod_now_desc') }}</span>
                                </span>
                            </li>

                            @foreach($modulos as $chave => $item)
                                @php $ligado = ($appData->{$chave} ?? '1') != '0'; @endphp
                                <li class="appmod @if(!$ligado) is-off @endif" data-mod-item>
                                    <span class="appmod__ico"><i class="fa-solid {{ $item[0] }}"></i></span>
                                    <span class="appmod__text">
                                        <b>{{ $item[1] }}</b>
                                        <span>{{ $item[2] }}</span>
                                    </span>
                                    <label class="switch">
                                        <input type="checkbox" data-mod="{{ $chave }}" value="1" @checked($ligado)>
                                        <span class="switch__track"><span class="switch__knob"></span></span>
                                    </label>
                                </li>
                            @endforeach
                        </ul>

                        <p class="modal__error" data-error-2 hidden></p>

                        <div class="appstep__foot">
                            <button type="button" class="btn btn--primary appstep__save" data-save="2">
                                <span>{{ __('radio.app_action_save_continue') }}</span>
                                @include('includes.spinner')
                            </button>
                        </div>
                    </div>
                </section>

                {{-- passo 3 --}}
                <section class="sec appstep @if($passo > 3) is-done @endif @if($passo < 3) is-locked @endif" data-step-box="3">
                    <button type="button" class="appstep__head" data-step-head="3" @disabled($passo < 3)>
                        <span class="appstep__num"><b>3</b><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                        <span class="appstep__title">{{ __('radio.app_step3_look') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="3" @if($passo != 3) hidden @endif>
                        <label class="appfield">
                            <span class="appfield__label">{{ __('radio.app_bg_title') }}</span>
                            <select class="input" data-bg-type>
                                <option value="1" @selected(($appData->bg_type ?? '1') !== '3')>{{ __('radio.app_bg_only_color') }}</option>
                                <option value="3" @selected(($appData->bg_type ?? '1') === '3')>{{ __('radio.app_bg_color_and_image') }}</option>
                            </select>
                            <span class="appfield__help">{{ __('radio.app_bg_desc') }}</span>
                        </label>

                        <div class="appfield" data-bg-image hidden>
                            <span class="appfield__label">{{ __('radio.app_bg_image') }}</span>
                            @include('radio.includes.app-upload', ['campo' => 'bg', 'largura' => $bgW, 'altura' => $bgH])
                            <p class="modal__error" data-error-bgImg hidden></p>
                        </div>

                        <div class="appfield">
                            <span class="appfield__label">{{ __('radio.app_logo_title') }}</span>
                            <span class="appfield__help">{{ __('radio.app_webapp_logo_desc') }}</span>
                            @include('radio.includes.app-upload', ['campo' => 'logo', 'largura' => $logoW, 'altura' => $logoH])
                            <p class="modal__error" data-error-logoImg hidden></p>
                        </div>

                        <div class="appfield">
                            <span class="appfield__label">{{ __('radio.app_icon_title') }}</span>
                            <span class="appfield__help">{{ __('radio.app_webapp_icon_desc') }}</span>
                            @include('radio.includes.app-upload', ['campo' => 'icon', 'largura' => $iconW, 'altura' => $iconH])
                            <p class="modal__error" data-error-iconImg hidden></p>
                        </div>

                        <div class="appcolors">
                            <div class="appfield">
                                <span class="appfield__label">{{ __('radio.app_webapp_color_bg') }}</span>
                                <span class="appcolor">
                                    <input type="color" data-color="color1" value="{{ $appData->p1 ?? '#ffffff' }}">
                                    <output data-color-out="color1">{{ $appData->p1 ?? '#ffffff' }}</output>
                                </span>
                            </div>

                            <div class="appfield">
                                <span class="appfield__label">{{ __('radio.app_webapp_color_text') }}</span>
                                <span class="appcolor">
                                    <input type="color" data-color="color2" value="{{ $appData->p2 ?? '#000000' }}">
                                    <output data-color-out="color2">{{ $appData->p2 ?? '#000000' }}</output>
                                </span>
                            </div>
                        </div>

                        <p class="modal__error" data-error-3 hidden></p>

                        <div class="appstep__foot">
                            <button type="button" class="btn btn--primary appstep__save" data-save="3">
                                <span>{{ __('radio.app_action_save_continue') }}</span>
                                @include('includes.spinner')
                            </button>
                        </div>
                    </div>
                </section>

                {{-- passo 4 --}}
                <section class="sec appstep @if($passo < 4) is-locked @endif" data-step-box="4">
                    <button type="button" class="appstep__head" data-step-head="4" @disabled($passo < 4)>
                        <span class="appstep__num"><b>4</b><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                        <span class="appstep__title">{{ __('radio.app_step4_publish') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="4" @if($passo != 4) hidden @endif>
                        <p class="appstep__intro">{{ __('radio.app_webapp_publish_intro') }}</p>

                        <p class="appnote">
                            <i class="fa-solid fa-link"></i>
                            <span>{{ __('radio.app_webapp_address') }}: <b>https://{{ $siteData->domain }}/app/</b></span>
                        </p>

                        <p class="modal__error" data-error-4 hidden></p>

                        <div class="appstep__foot">
                            <button type="button" class="btn btn--primary appstep__save" data-save="4">
                                <span>{{ __('radio.app_webapp_publish') }}</span>
                                @include('includes.spinner')
                            </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <aside class="appwrap__side">
            <div class="apppreview">
                <span class="apppreview__label">{{ __('radio.app_preview_label') }}</span>
                <div class="apppreview__phone">
                    <iframe src="{{ route('radio.apps.r.webapp-preview') }}" title="{{ __('radio.app_preview_label') }}"
                            data-preview loading="lazy"></iframe>
                </div>
            </div>
        </aside>
    </div>

@endif

</main>

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

@include('includes/footer-novo')