@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')],
    ];
@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_notify_page_sub') }}</p>
        </div>
    </header>

    @include('radio.includes.apps-nav')
    @include('radio.includes.app-live-head')

    <section class="sec appnotify"
             data-url-notify="{{ route('radio.apps.r.android-notify') }}"
             data-msg-required="{{ __('radio.app_notify_text_required') }}"
             data-msg-error="{{ __('radio.app_save_error') }}"
             data-msg-wait="{{ __('radio.app_notify_wait') }}">

        <div class="sec__head sec__head--row">
            <div>
                <h2 class="sec__title"><i class="fa-solid fa-bell"></i> {{ __('radio.app_notify_sent_title') }}</h2>
                <p class="sec__desc">{{ trans_choice('radio.app_notify_count', $appNotify->count(), ['count' => $appNotify->count()]) }}</p>
            </div>

            <button type="button" class="btn btn--primary" data-notify-open>
                <i class="fa-solid fa-plus"></i>
                <span>{{ __('radio.app_notify_new_action') }}</span>
            </button>
        </div>

        @if($appNotify->count())
            @foreach($appNotify as $notify)
                <article class="ntrow">
                    <span class="ntrow__when">{{ date('d/m/Y H:i', strtotime($notify->created_at)) }}</span>
                    <p class="ntrow__text">{{ $notify->message }}</p>
                </article>
            @endforeach
        @else
            <div class="cempty">
                <span class="apierr__ico"><i class="fa-solid fa-bell-slash"></i></span>
                <p class="apierr__text">{{ __('radio.msg_no_records') }}</p>
            </div>
        @endif

        {{-- o aviso nasce aqui dentro: a tela é a lista, escrever é uma ação --}}
        <div class="modal ntmodal" hidden>
            <div class="modal__card" role="dialog" aria-modal="true" aria-labelledby="ntmodal-title">
                <h2 class="modal__title" id="ntmodal-title">{{ __('radio.app_notify_new_title') }}</h2>
                <p class="modal__text">{{ __('radio.app_notify_new_sub') }}</p>

                <label class="appfield">
                    <span class="appfield__label">{{ __('radio.app_notify_message') }}</span>
                    <textarea class="input appnotify__text" rows="4" maxlength="250"
                              data-notify placeholder="{{ __('radio.app_notify_placeholder') }}"></textarea>
                    <span class="appfield__help">
                        <span data-notify-count>0</span>/250 {{ __('radio.app_name_limit_chars') }}
                    </span>
                </label>

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

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

                <div class="modal__foot">
                    <button type="button" class="btn btn--ghost" data-notify-close>{{ __('site.btn_cancel') }}</button>

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

</main>

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

@include('includes/footer-novo')