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

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

    /* Registro do termo desta radio; pode nao existir se nunca foi preenchido. */
    $iosTerm = $iosTerm ?? null;
    $termStep = $iosTerm ? (int) ($iosTerm->step ?? 1) : 1;
    $termStat = $iosTerm ? (string) ($iosTerm->status ?? '0') : '0';
    $finalized = $iosTerm && $termStep >= 4;

    /* Aplicativo ja publicado ou na fila da loja quer dizer termo resolvido,
       inclusive quando o cliente mandou o documento assinado por fora. Nesse
       caso a tela nao pode voltar a pedir o preenchimento. */
    $estados = \App\Services\AppsMenu::states((int) $streamData->port, $appData ?? null);
    $resolvido = $estados['term'] === 'approved';

    /* com o aplicativo ja na loja nao cabe dizer que ele esta em desenvolvimento */
    $appPublicado = $estados['android'] === 'published';

    /* O admin grava o codigo do motivo; o texto ao cliente sai daqui. */
    $rejectReasons = [
        'signature' => __('radio.app_ios_reject_signature'),
        'name' => __('radio.app_ios_reject_name'),
        'document' => __('radio.app_ios_reject_document'),
        'address' => __('radio.app_ios_reject_address'),
        'document_file' => __('radio.app_ios_reject_document_file'),
        'other' => __('radio.app_ios_reject_other'),
    ];
    $rejectMsg = $rejectReasons[$iosTerm->reject_reason ?? 'other'] ?? $rejectReasons['other'];
    $rejectNote = trim((string) ($iosTerm->reject_note ?? ''));

    $signedAt = !empty($iosTerm->signed_at) ? date('d/m/Y \à\s H:i', strtotime($iosTerm->signed_at)) : null;
@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_ios_title') }}</h1>
            <p class="page-sub">{{ __('radio.app_ios_page_sub') }}</p>
        </div>
    </header>

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

@if($finalized && $termStat === '0' && !$resolvido)

    <section class="sec">
        <div class="appstate">
            <i class="fa-solid fa-hourglass-half"></i>
            <h3>{{ __('radio.app_ios_pending_title') }}</h3>
            <p>{{ __('radio.app_ios_pending_p1') }}</p>
            <p>{{ __('radio.app_ios_pending_p2') }}</p>
            @if($signedAt)
                <p class="appstate__when">{{ __('radio.app_ios_term_sent_at', ['date' => $signedAt]) }}</p>
            @endif
            <span class="appbar__tag appbar__tag--wait">
                <i class="fa-solid fa-clock"></i> {{ __('radio.app_ios_awaiting_approval') }}
            </span>
        </div>
    </section>

@elseif($resolvido || ($finalized && $termStat === '1'))

    <section class="sec">
        <div class="appstate">
            <i class="fa-solid fa-circle-check"></i>
            <h3>{{ __('radio.app_ios_approved_title') }}</h3>
            @if($appPublicado)
                <p>{{ __('radio.app_ios_approved_live') }}</p>
            @else
                <p>{{ __('radio.app_ios_approved_p1') }} <b>{{ __('radio.app_ios_approved_strong') }}</b> {{ __('radio.app_ios_approved_p2') }}</p>
            @endif

            @if($signedAt)
                <p class="appstate__when">{{ __('radio.app_ios_term_signed_at', ['date' => $signedAt]) }}</p>
            @endif

            <span class="appbar__tag appbar__tag--ok">
                @if($appPublicado)
                    <i class="fa-solid fa-circle-check"></i> {{ __('radio.apps_state_published') }}
                @else
                    <i class="fa-solid fa-screwdriver-wrench"></i> {{ __('radio.app_ios_in_development') }}
                @endif
            </span>
        </div>
    </section>

@elseif($finalized && $termStat === '2')

    <section class="sec termredo"
             data-url-restart="{{ route('radio.app.ios-term.restart') }}"
             data-msg-redo-title="{{ __('radio.app_ios_redo_title') }}"
             data-msg-redo-text="{{ __('radio.app_ios_redo_text') }}"
             data-msg-redo-btn="{{ __('radio.app_ios_redo') }}"
             data-msg-error="{{ __('radio.app_ios_generic_error') }}">
        <div class="appstate appstate--off">
            <i class="fa-solid fa-circle-xmark"></i>
            <h3>{{ __('radio.app_ios_rejected_title') }}</h3>
            <p>{{ __('radio.app_ios_rejected_p1') }}</p>

            <div class="termredo__reason">
                <strong><i class="fa-solid fa-circle-info"></i> {{ __('radio.app_ios_reject_reason') }}</strong>
                <span>{{ $rejectMsg }}</span>
                @if($rejectNote)<span class="termredo__note">{{ $rejectNote }}</span>@endif
            </div>

            <p>{{ __('radio.app_ios_rejected_p2') }}</p>

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

@else

    <div class="termwrap"
         data-url-step="{{ route('radio.app.ios-term.step') }}"
         data-url-save="{{ route('radio.app.ios-term.save') }}"
         data-url-upload="{{ route('radio.app.ios-term.upload') }}"
         data-url-download="{{ route('radio.app.ios-term.download') }}"
         data-step="{{ $termStep }}"
         data-saved="{{ $iosTerm ? json_encode($iosTerm) : '' }}"
         data-msg-saving="{{ __('radio.app_saving') }}"
         data-msg-error="{{ __('radio.app_ios_generic_error') }}"
         data-msg-radio-required="{{ __('radio.app_ios_err_radio_name') }}"
         data-msg-holder-required="{{ __('radio.app_ios_err_holder_pj') }}"
         data-msg-holder-required-pf="{{ __('radio.app_ios_err_holder_pf') }}"
         data-msg-doc-invalid="{{ __('radio.app_ios_err_doc_cnpj') }}"
         data-msg-doc-invalid-pf="{{ __('radio.app_ios_err_doc_cpf') }}"
         data-msg-address="{{ __('radio.app_ios_err_address') }}"
         data-msg-cep-notfound="{{ __('radio.app_ios_err_cep') }}"
         data-msg-sign-required="{{ __('radio.app_ios_err_signature') }}"
         data-msg-file-required="{{ __('radio.app_ios_err_file') }}"
         data-msg-file-format="{{ __('radio.app_ios_err_file_format') }}"
         data-msg-file-size="{{ __('radio.app_ios_err_file_size') }}"
         data-msg-steps-first="{{ __('radio.app_ios_err_steps_first') }}"
         data-msg-confirm-title="{{ __('radio.app_ios_confirm_title') }}"
         data-msg-confirm-btn="{{ __('radio.app_ios_confirm_send') }}"
         data-msg-confirm-text="{{ __('radio.app_ios_confirm_text') }}"
         data-msg-doc-ok="{{ __('radio.app_ios_doc_valid') }}"
         data-today="{{ \Carbon\Carbon::now('America/Sao_Paulo')->locale('pt_BR')->isoFormat('D [de] MMMM [de] YYYY') }}"
         data-label-company-name="{{ __('radio.app_ios_company_name') }}"
         data-label-person-name="{{ __('radio.app_ios_person_name') }}"
         data-label-company-name-ph="{{ __('radio.app_ios_company_name_placeholder') }}"
         data-label-person-name-ph="{{ __('radio.app_ios_person_name_placeholder') }}"
         data-label-sig-waiting="{{ __('radio.app_ios_awaiting_signature') }}"
         data-label-sig-done="{{ __('radio.app_ios_signature_captured') }}"
         data-label-badge-waiting="{{ __('radio.app_ios_preview_waiting') }}"
         data-label-badge-filling="{{ __('radio.app_ios_preview_filling') }}"
         data-label-badge-ready="{{ __('radio.app_ios_preview_ready') }}"
         data-label-badge-signed="{{ __('radio.app_ios_preview_signed') }}"
         data-label-badge-file="{{ __('radio.app_ios_preview_file') }}"
         data-fields="{{ __('radio.app_ios_cep') }}|{{ __('radio.app_ios_street') }}|{{ __('radio.app_ios_number') }}|{{ __('radio.app_ios_district') }}|{{ __('radio.app_ios_city') }}|{{ __('radio.app_ios_uf') }}">

        <div class="termwrap__main">
            <div class="appform">

                {{-- passo 1 --}}
                <section class="sec appstep @if($termStep > 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_ios_step1') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="1" @if($termStep > 1) hidden @endif>
                        <label class="appfield">
                            <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_radio_name') }}</span>
                            <input type="text" class="input" data-field="radio_name" maxlength="120"
                                   placeholder="{{ __('radio.app_ios_radio_name_placeholder') }}" autocomplete="off">
                            <span class="appfield__help">{{ __('radio.app_ios_radio_name_hint') }}</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_continue') }}</span>
                                @include('includes.spinner')
                            </button>
                        </div>
                    </div>
                </section>

                {{-- passo 2 --}}
                <section class="sec appstep @if($termStep > 2) is-done @endif @if($termStep < 2) is-locked @endif" data-step-box="2">
                    <button type="button" class="appstep__head" data-step-head="2" @disabled($termStep < 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_ios_step2') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="2" @if($termStep != 2) hidden @endif>
                        <div class="appfield">
                            <span class="appfield__label">{{ __('radio.app_ios_who_authorizes') }}</span>
                            <div class="termkind">
                                <label class="termkind__opt">
                                    <input type="radio" name="entity_type" value="PJ" checked data-entity>
                                    <span><i class="fa-solid fa-building"></i> {{ __('radio.app_ios_company') }}</span>
                                </label>
                                <label class="termkind__opt">
                                    <input type="radio" name="entity_type" value="PF" data-entity>
                                    <span><i class="fa-solid fa-user"></i> {{ __('radio.app_ios_individual') }}</span>
                                </label>
                            </div>
                            <span class="appfield__help">{{ __('radio.app_ios_entity_hint') }}</span>
                        </div>

                        <div class="termgrid">
                            <label class="appfield termgrid__wide">
                                <span class="appfield__label appfield__label--req" data-label-name>{{ __('radio.app_ios_company_name') }}</span>
                                <input type="text" class="input" data-field="document_name" maxlength="255"
                                       placeholder="{{ __('radio.app_ios_company_name_placeholder') }}" autocomplete="organization">
                            </label>

                            <label class="appfield">
                                <span class="appfield__label appfield__label--req" data-label-doc>CNPJ</span>
                                <input type="text" class="input" data-field="document_number" maxlength="18"
                                       placeholder="00.000.000/0000-00" inputmode="numeric" autocomplete="off">
                                <span class="appfield__help termdoc" data-doc-status hidden></span>
                            </label>
                        </div>

                        <p class="appfield__group">{{ __('radio.app_ios_address') }}</p>

                        <div class="termgrid">
                            <label class="appfield">
                                <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_cep') }}</span>
                                <span class="termcep">
                                    <input type="text" class="input" data-field="cep" maxlength="9"
                                           placeholder="00000-000" inputmode="numeric" autocomplete="postal-code">
                                    <i class="fa-solid fa-magnifying-glass" data-cep-status></i>
                                </span>
                                <span class="appfield__help">{{ __('radio.app_ios_cep_hint') }}</span>
                            </label>

                            <label class="appfield termgrid__wide">
                                <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_street') }}</span>
                                <input type="text" class="input" data-field="street" maxlength="255" autocomplete="address-line1">
                            </label>

                            <label class="appfield termgrid__thin">
                                <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_number') }}</span>
                                <input type="text" class="input" data-field="number" maxlength="20" autocomplete="off">
                            </label>

                            <label class="appfield">
                                <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_district') }}</span>
                                <input type="text" class="input" data-field="district" maxlength="255" autocomplete="address-level3">
                            </label>

                            <label class="appfield">
                                <span class="appfield__label">{{ __('radio.app_ios_complement') }}</span>
                                <input type="text" class="input" data-field="complement" maxlength="255"
                                       placeholder="{{ __('radio.app_ios_complement_placeholder') }}" autocomplete="address-line2">
                            </label>

                            <label class="appfield">
                                <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_city') }}</span>
                                <input type="text" class="input" data-field="city" maxlength="255" autocomplete="address-level2">
                            </label>

                            <label class="appfield termgrid__thin">
                                <span class="appfield__label appfield__label--req">{{ __('radio.app_ios_uf') }}</span>
                                <input type="text" class="input" data-field="uf" maxlength="2" placeholder="SC" autocomplete="address-level1">
                            </label>
                        </div>

                        <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($termStep < 3) is-locked @endif" data-step-box="3">
                    <button type="button" class="appstep__head" data-step-head="3" @disabled($termStep < 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_ios_step3') }}</span>
                        <i class="fa-solid fa-chevron-down appstep__chev"></i>
                    </button>

                    <div class="appstep__body" data-step-body="3" @if($termStep < 3) hidden @endif>

                        <p class="appstep__intro">{{ __('radio.app_ios_how_sign_hint') }}</p>

                        <div class="termways">
                            <button type="button" class="termway is-active" data-way="digital">
                                <span class="termway__ic"><i class="fa-solid fa-signature"></i></span>
                                <b>{{ __('radio.app_ios_sign_now') }}</b>
                                <span>{{ __('radio.app_ios_sign_now_desc') }}</span>
                            </button>

                            <button type="button" class="termway" data-way="manual">
                                <span class="termway__ic"><i class="fa-solid fa-file-arrow-down"></i></span>
                                <b>{{ __('radio.app_ios_sign_manual') }}</b>
                                <span>{{ __('radio.app_ios_sign_manual_desc') }}</span>
                            </button>
                        </div>

                        {{-- assinatura na tela --}}
                        <div class="termpanel" data-panel="digital">
                            <p class="appfield__group">{{ __('radio.app_ios_digital_signature') }}</p>
                            <p class="appstep__intro">{{ __('radio.app_ios_digital_signature_desc') }}</p>

                            <div class="termsign">
                                <canvas class="termsign__pad" data-pad></canvas>
                                <span class="termsign__line"></span>
                            </div>

                            <div class="termsign__bar">
                                <span class="appbar__tag appbar__tag--wait" data-sig-status>
                                    <i class="fa-solid fa-pen-nib"></i> {{ __('radio.app_ios_awaiting_signature') }}
                                </span>

                                <span class="termsign__acts">
                                    <button type="button" class="btn btn--ghost" data-sig-clear>
                                        <i class="fa-solid fa-eraser"></i> {{ __('radio.app_action_clear') }}
                                    </button>
                                    <button type="button" class="btn btn--ghost" data-sig-full hidden>
                                        <i class="fa-solid fa-up-right-and-down-left-from-center"></i> {{ __('radio.app_ios_sign_fullscreen') }}
                                    </button>
                                </span>
                            </div>

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

                            <div class="appstep__foot">
                                <button type="button" class="btn btn--primary appstep__save" data-send-digital>
                                    <span><i class="fa-solid fa-file-pdf"></i> {{ __('radio.app_ios_generate_pdf') }}</span>
                                    @include('includes.spinner')
                                </button>
                            </div>
                        </div>

                        {{-- assinatura no papel --}}
                        <div class="termpanel" data-panel="manual" hidden>
                            <ol class="termsteps">
                                <li><b>{{ __('radio.app_ios_upload_step1_strong') }}</b> {{ __('radio.app_ios_upload_step1') }}</li>
                                <li><b>{{ __('radio.app_ios_upload_step2_strong') }}</b> {{ __('radio.app_ios_upload_step2') }}</li>
                                <li><b>{{ __('radio.app_ios_upload_step3_strong') }}</b> {{ __('radio.app_ios_upload_step3') }}</li>
                            </ol>

                            <button type="button" class="btn btn--ghost termsteps__get" data-download>
                                <i class="fa-solid fa-file-arrow-down"></i> {{ __('radio.app_ios_download_pdf') }}
                            </button>

                            <p class="appfield__group">{{ __('radio.app_ios_upload_label') }}</p>

                            <label class="termdrop" data-drop>
                                <input type="file" accept="application/pdf,.pdf" data-file hidden>
                                <i class="fa-solid fa-cloud-arrow-up"></i>
                                <b>{{ __('radio.app_ios_dropzone_title') }}</b>
                                <span>{{ __('radio.app_ios_dropzone_hint') }}</span>
                            </label>

                            <div class="termfile" data-file-card hidden>
                                <i class="fa-solid fa-file-pdf"></i>
                                <span class="termfile__meta">
                                    <b data-file-name></b>
                                    <span data-file-size></span>
                                </span>
                                <button type="button" class="pact pact--del" data-file-clear
                                        title="{{ __('radio.app_action_clear') }}">
                                    <i class="fa-solid fa-xmark"></i>
                                </button>
                            </div>

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

                            <div class="appstep__foot">
                                <button type="button" class="btn btn--primary appstep__save" data-send-manual>
                                    <span><i class="fa-solid fa-paper-plane"></i> {{ __('radio.app_ios_send_signed') }}</span>
                                    @include('includes.spinner')
                                </button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <aside class="termwrap__side">
            <div class="termprev">
                <div class="termprev__bar">
                    <span class="termprev__label">{{ __('radio.app_ios_preview_label') }}</span>
                    <span class="appbar__tag appbar__tag--wait" data-badge>{{ __('radio.app_ios_preview_waiting') }}</span>
                </div>

                <div class="termprev__scroll">
                    <div class="termprev__empty" data-prev-empty>
                        <i class="fa-solid fa-file-contract"></i>
                        <b>{{ __('radio.app_ios_preview_empty_1') }}</b>
                        <span>{{ __('radio.app_ios_preview_empty_2') }}</span>
                    </div>

                    <div class="termpaper" data-prev-paper hidden>
                        <h2 class="termpaper__title">{{ $contractTitle }}</h2>
                        <div data-prev-body></div>

                        <div class="termpaper__sign">
                            <span class="termpaper__line">
                                <img src="" alt="{{ __('radio.app_ios_signature_alt') }}" data-prev-sig hidden>
                                <em data-prev-sig-empty>{{ __('radio.app_ios_signature_placeholder') }}</em>
                            </span>
                            <b data-prev-sig-name></b>
                            <span data-prev-sig-doc></span>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>

    {{-- moldes do termo, o mesmo texto que vira PDF --}}
    <template data-contract="PJ">{!! $contractPJ !!}</template>
    <template data-contract="PF">{!! $contractPF !!}</template>

    {{-- assinatura em tela cheia, para o celular --}}
    <div class="termfull" data-full hidden>
        <div class="termfull__head">
            <b><i class="fa-solid fa-signature"></i> {{ __('radio.app_ios_digital_signature') }}</b>
            <button type="button" class="btn btn--ghost" data-full-cancel>
                <i class="fa-solid fa-xmark"></i> {{ __('radio.app_action_cancel') }}
            </button>
        </div>

        <div class="termfull__body">
            <p class="termfull__tip">
                <i class="fa-solid fa-rotate"></i>
                {{ __('radio.app_ios_rotate_1') }} <b>{{ __('radio.app_ios_horizontal') }}</b> {{ __('radio.app_ios_rotate_2') }}
            </p>
            <div class="termfull__pad">
                <canvas data-full-pad></canvas>
                <span class="termsign__line"></span>
            </div>
        </div>

        <div class="termfull__foot">
            <button type="button" class="btn btn--ghost" data-full-clear>
                <i class="fa-solid fa-eraser"></i> {{ __('radio.app_action_clear') }}
            </button>
            <button type="button" class="btn btn--primary" data-full-ok>
                <i class="fa-solid fa-check"></i> {{ __('radio.app_ios_confirm_signature') }}
            </button>
        </div>
    </div>

@endif

</main>

@section('scripts')
    @if(!$finalized)
        <script src="{{ assetv('/assets/js/lib/signature_pad.umd.min.js') }}"></script>
    @endif
    <script src="{{ assetv('/assets/js/pages/radio-app-ios-term.js') }}"></script>
@endsection

@include('includes/footer-novo')