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

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

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

    $situacao = $appData->status ?? '0';
    $passo = (int) ($appData->step ?? 1);
    /* Aplicativo iOS ja publicado ou na fila da Apple significa termo
       resolvido, mesmo sem pdf por aqui: parte dos clientes manda o termo
       assinado pelo WhatsApp. */
    $temTermo = file_exists(public_path('admin/termos/' . $siteData->stream_port . '.pdf'))
        || in_array(\App\Services\AppsMenu::states((int) $streamData->port, $appData ?? null)['term'], ['approved', 'review'], true);

    /* modulos do passo 2, na ordem em que aparecem no aplicativo */
    $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_camera' => ['fa-video', __('radio.app_mod_camera'), __('radio.app_mod_camera_desc')],
        'mod_requests' => ['fa-music', __('radio.app_mod_requests'), __('radio.app_mod_requests_desc')],
        'mod_top' => ['fa-ranking-star', __('radio.app_mod_top'), __('radio.app_mod_top_desc')],
        'mod_news' => ['fa-newspaper', __('radio.app_mod_news'), __('radio.app_mod_news_desc')],
        'mod_events' => ['fa-calendar-day', __('radio.app_mod_events'), __('radio.app_mod_events_desc')],
        'mod_team' => ['fa-users', __('radio.app_mod_team'), __('radio.app_mod_team_desc')],
        'mod_gallery' => ['fa-images', __('radio.app_mod_gallery'), __('radio.app_mod_gallery_desc')],
        'mod_promo' => ['fa-gift', __('radio.app_mod_promo'), __('radio.app_mod_promo_desc')],
        'mod_podcasts' => ['fa-podcast', __('radio.app_mod_podcasts'), __('radio.app_mod_podcasts_desc')],
    ];
@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_exclusive_title') }}</h1>
            <p class="page-sub">{{ __('radio.app_page_sub') }}</p>
        </div>
    </header>

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

    <div class="appwrap @if($situacao === '1' || $situacao === '2' || $situacao === '3' || $situacao === '4') appwrap--plain @endif">

        <div class="appwrap__main">

            @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($situacao === '4')
                <section class="sec">
                    <div class="appstate appstate--off">
                        <i class="fa-solid fa-ban"></i>
                        <h3>{{ __('radio.app_disabled_title') }}</h3>
                        <p>{{ __('radio.app_disabled_p1') }}</p>
                        <p>{{ __('radio.app_disabled_p2') }}</p>
                    </div>
                </section>

            @elseif($situacao === '2' || $situacao === '3')
                @include('radio.includes.app-platforms')

                <section class="sec">
                    <div class="appstate">
                        <i class="fa-solid fa-circle-check"></i>
                        <h3>{{ __('radio.app_requested_title') }}</h3>
                        <p>{{ __('radio.app_requested_android_p1') }}</p>
                        <p>{{ __('radio.app_requested_android_p2') }}</p>

                        @if($streamData->plan_app_ios && !$temTermo)
                            <div class="appstate__ios">
                                <p>
                                    <i class="fa-solid fa-circle-info"></i>
                                    {{ __('radio.app_ios_term_notice_1') }} <b>iOS</b> {{ __('radio.app_ios_term_notice_2') }}
                                </p>
                                <a class="btn btn--primary" href="{{ route('radio.app.ios-term', $siteData->stream_port) }}">
                                    <i class="fa-solid fa-file-signature"></i>
                                    <span>{{ __('radio.app_ios_term_fill') }}</span>
                                </a>
                            </div>
                        @endif
                    </div>
                </section>

            @else
                <div class="appform"
                     data-url-step="{{ route('radio.apps.r.android-doStep') }}"
                     data-url-preview="{{ route('radio.apps.r.android-preview', ['model' => $appModel]) }}"
                     data-step="{{ $passo }}"
                     data-msg-saving="{{ __('radio.app_saving') }}"
                     data-msg-save="{{ __('radio.app_action_save_continue') }}"
                     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') }}">

                    {{-- 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="appnote appnote--warn">
                                <i class="fa-solid fa-triangle-exclamation"></i>
                                <span>{{ __('radio.app_name_store_warning') }}</span>
                            </p>

                            <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_modules_intro') }}</p>

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

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

                                @php $dadosLigado = ($appData->cog_metadata ?? '1') != '0'; @endphp
                                <li class="appmod @if(!$dadosLigado) is-off @endif" data-mod-item>
                                    <span class="appmod__ico"><i class="fa-solid fa-tower-broadcast"></i></span>
                                    <span class="appmod__text">
                                        <b>{{ __('radio.app_cog_metadata') }}</b>
                                        <span>{{ __('radio.app_cog_metadata_desc') }}</span>
                                    </span>
                                    <label class="switch">
                                        <input type="checkbox" data-mod="cog_metadata" value="1" @checked($dadosLigado)>
                                        <span class="switch__track"><span class="switch__knob"></span></span>
                                    </label>
                                </li>

                                @php $albumLigado = ($appData->cog_albumdata ?? '1') != '0'; @endphp
                                <li class="appmod @if(!$albumLigado) is-off @endif" data-mod-item>
                                    <span class="appmod__ico"><i class="fa-solid fa-compact-disc"></i></span>
                                    <span class="appmod__text">
                                        <b>{{ __('radio.app_cog_albumdata') }}</b>
                                        <span>{{ __('radio.app_cog_albumdata_desc') }}</span>
                                    </span>
                                    <label class="switch">
                                        <input type="checkbox" data-mod="cog_albumdata" value="1" @checked($albumLigado)>
                                        <span class="switch__track"><span class="switch__knob"></span></span>
                                    </label>
                                </li>
                            </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" data-hero-box>
                                <span class="appfield__label">{{ __('radio.app_hero_label') }}</span>
                                <span class="appfield__help">{{ __('radio.app_hero_help') }}</span>
                                <select class="input" data-app-hero>
                                    <option value="cover" @selected($appHero === 'cover')>{{ __('radio.app_hero_cover') }}</option>
                                    <option value="wave" @selected($appHero === 'wave')>{{ __('radio.app_hero_wave') }}</option>
                                    <option value="card" @selected($appHero === 'card')>{{ __('radio.app_hero_card') }}</option>
                                    <option value="stack" @selected($appHero === 'stack')>{{ __('radio.app_hero_stack') }}</option>
                                </select>
                            </label>

                            <label class="appfield">
                                <span class="appfield__label">{{ __('radio.app_bg_type') }}</span>
                                <select class="input" data-bg-type>
                                    <option value="1">{{ __('radio.app_bg_solid_color') }}</option>
                                    <option value="3">{{ __('radio.app_bg_send_image') }}</option>
                                </select>
                            </label>

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

                            <div class="appfield" data-bg-image hidden>
                                <span class="appfield__label">{{ __('radio.app_bg_image') }}</span>
                                @include('radio.includes.app-upload', ['campo' => 'bg', 'largura' => 1080, 'altura' => 1920])
                                <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_logo_desc') }}</span>
                                @include('radio.includes.app-upload', ['campo' => 'logo', 'largura' => 450, 'altura' => 450])
                                <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_icon_desc') }}</span>
                                @include('radio.includes.app-upload', ['campo' => 'icon', 'largura' => 1024, 'altura' => 1024, 'previa' => true])
                                <p class="modal__error" data-error-iconImg hidden></p>
                            </div>

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

                                <div class="appfield">
                                    <span class="appfield__label">{{ __('radio.app_color_button_top') }}</span>
                                    <span class="appcolor">
                                        <input type="color" data-color="color2" value="{{ $appData->p2 ?? '#05b993' }}">
                                        <output data-color-out="color2">{{ $appData->p2 ?? '#05b993' }}</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>
                            @if($streamData->plan_app)
                                <p class="appstep__intro">{{ __('radio.app_publish_intro') }}</p>

                                <div class="appstep__foot">
                                    <button type="button" class="btn btn--primary" data-open-request @disabled($passo < 4)>
                                        <i class="fa-solid fa-paper-plane"></i>
                                        <span>{{ __('radio.app_action_request') }}</span>
                                    </button>
                                </div>
                            @else
                                <p class="appnote appnote--warn">
                                    <i class="fa-solid fa-triangle-exclamation"></i>
                                    <span>{{ __('radio.app_plan_no_android') }}</span>
                                </p>
                            @endif
                        </div>
                    </section>

                </div>
            @endif

        </div>

        @if($situacao !== '4' && $situacao !== '2' && $situacao !== '3')
            <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.android-preview', ['model' => $appModel, 'hero' => $appHero]) }}" data-preview
                                title="{{ __('radio.app_preview_label') }}" allowtransparency="true"></iframe>
                    </div>
                </div>
            </aside>
        @endif

    </div>

    @include('radio.includes.app-icon-preview')

    {{-- questionario obrigatorio antes de solicitar --}}
    <div class="modal appmodal" data-modal-request hidden>
        <div class="modal__card" role="dialog" aria-modal="true">
            <h2 class="modal__title">{{ __('radio.app_modal_title') }}</h2>
            <p class="modal__text">{{ __('radio.app_modal_intro') }}</p>

            {{-- as cinco afirmacoes precisam estar marcadas --}}
            <ul class="appquiz">
                @for($i = 1; $i <= 5; $i++)
                    <li class="appquiz__check">
                        <label class="appquiz__box">
                            <input type="checkbox" data-declare>
                            <span>{{ __('radio.app_modal_check' . $i) }}</span>
                        </label>
                    </li>
                @endfor
            </ul>

            {{-- e as tres perguntas precisam ser respondidas com nao --}}
            <ul class="appquiz appquiz--asks">
                @for($i = 1; $i <= 3; $i++)
                    <li class="appquiz__row">
                        <span class="appquiz__ask">{{ __('radio.app_modal_q' . $i) }}</span>
                        <span class="appquiz__opts">
                            <label class="appquiz__opt">
                                <input type="radio" name="quiz_{{ $i }}" value="sim" data-ask>
                                <span>{{ __('radio.app_yes') }}</span>
                            </label>
                            <label class="appquiz__opt">
                                <input type="radio" name="quiz_{{ $i }}" value="nao" data-ask>
                                <span>{{ __('radio.app_no') }}</span>
                            </label>
                        </span>
                    </li>
                @endfor
            </ul>

            <p class="appnote" data-quiz-hint>
                <i class="fa-solid fa-circle-info"></i>
                <span>{{ __('radio.app_modal_hint') }}</span>
            </p>

            <div class="modal__foot">
                <button type="button" class="btn btn--ghost" data-close>{{ __('radio.action_close') }}</button>
                <button type="button" class="btn btn--primary" data-finish disabled>
                    <span>{{ __('radio.app_modal_confirm') }}</span>
                    @include('includes.spinner')
                </button>
            </div>
        </div>
    </div>

</main>

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

@include('includes/footer-novo')