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

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

@php
    $streamUrl = 'https://' . $getServerDetails->name . '.' . env('BASE_SERVER_URL', 'brascast.com') . ':' . $streamData->port . '/live';
@endphp

@include('includes/header-novo')

<main class="app-main">

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

    {{-- aviso preso a dois servidores especificos, mantido como estava --}}
    @if($siteData->stream_server == 'hts033' || $siteData->stream_server == 'hts077')
        <div class="flash flash--warn">
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span>{{ __('radio.home_maintenance_notice_1') }} {{ __('radio.home_maintenance_notice_2') }}</span>
        </div>
    @endif

    @include('includes.flash')

    <div class="rhome is-loading-state"
         data-url-state="{{ route('radio.state') }}"
         data-url-action="/stream/action"
         data-stream="{{ $streamUrl }}"
         data-url-cover="https://cover-api.brascast.com/cover?p={{ $streamData->port }}&s={{ $siteData->stream_server }}"
         data-cover-on="{{ $coverOn ? '1' : '0' }}"
         data-msg-listener-one="{{ __('radio.home_listeners_unique') }}"
         data-msg-listener-many="{{ __('radio.home_listeners_multiple') }}"
         data-word-listener-one="{{ __('radio.home_listeners_word_one') }}"
         data-word-listener-many="{{ __('radio.home_listeners_word_many') }}"
         data-msg-onair="{{ __('radio.home_block_item_type_2') }}"
         data-msg-standby="{{ __('radio.home_block_item_type_3') }}"
         data-msg-off="{{ __('radio.home_block_item_type_1') }}"
         data-msg-relay-on="{{ __('radio.home_block_item_type_4') }}"
         data-msg-autodj-bg="{{ __('radio.home_block_item_autodj_msg') }}"
         data-msg-live-off="{{ __('radio.home_block_ajax_live_off_h1') }}"
         data-msg-live-off-hint="{{ __('radio.home_block_ajax_live_off_h2') }}"
         data-msg-autodj-off="{{ __('radio.home_block_ajax_autodj_stoped_h1') }}"
         data-msg-autodj-off-hint="{{ __('radio.home_block_ajax_autodj_stoped_h2') }}"
         data-msg-waiting="{{ __('radio.home_block_ajax_autodj_waiting') }}"
         data-msg-playing="{{ __('radio.home_player_current') }}"
         data-msg-nobroadcast="{{ __('radio.home_player_no_broadcast') }}"
         data-msg-next="{{ __('radio.home_block_ajax_autodj_item5') }}"
         data-msg-player-off="{{ __('radio.home_js_player_offline') }}"
         data-msg-stop-confirm="{{ __('radio.home_js_autodj_stop_confirm') }}"
         data-msg-cancel="{{ __('radio.app_action_cancel') }}"
         data-msg-error="{{ __('site.page_media_remove_error') }}"
         data-msg-unreachable="{{ __('radio.home_state_unreachable') }}"
         data-msg-sched-now="{{ __('radio.home_next_sched_now') }}"
         data-msg-mute="{{ __('radio.home_player_mute') }}"
         data-msg-unmute="{{ __('radio.home_player_unmute') }}"
         data-unit-day="{{ __('radio.unit_day_short') }}"
         data-unit-hour="{{ __('radio.unit_hour_short') }}"
         data-unit-min="{{ __('radio.unit_minute_short') }}"
         data-unit-sec="{{ __('radio.unit_second_short') }}">

        <div class="rhome__main">

            {{-- o que o ouvinte esta escutando, fora das abas: trocar de aba nao faz perder isto de vista --}}
            <section class="hero">
                {{-- os ouvintes vem primeiro no codigo e ficam a esquerda: e o numero que o cliente procura --}}
                <div class="hero__audience">
                    <strong class="hero__count" data-listeners><span class="rskel rskel--num"></span></strong>
                    <small class="hero__count-label" data-listeners-label>{{ __('radio.home_listeners_word_many') }}</small>
                    <small class="hero__count-note">{{ __('radio.home_listeners_now') }}</small>
                </div>

                <div class="hero__now">
                    <button class="hero__play" type="button" aria-label="{{ __('radio.home_player_current') }}" disabled>
                        <i class="fa-solid fa-play"></i>
                    </button>

                    <span class="hero__cover" data-cover><i class="fa-solid fa-music"></i></span>

                    <span class="hero__meta">
                        <span class="hero__eyebrow" data-eyebrow><span class="rskel rskel--eyebrow"></span></span>
                        <span class="hero__track" data-track><span class="rskel rskel--track"></span></span>
                        <span class="hero__next" data-next><span class="rskel rskel--next"></span></span>
                    </span>

                    <span class="hero__vol">
                        <button class="hero__mute" type="button" data-mute aria-pressed="false"
                                aria-label="{{ __('radio.home_player_mute') }}">
                            <i class="fa-solid fa-volume-high"></i>
                        </button>
                        <input type="range" min="0" max="100" value="80" aria-label="{{ __('radio.home_player_current') }}" data-volume>
                    </span>
                </div>
            </section>

            {{-- o aviso fica fora do cartao: dentro dele parecia parte do que
                 esta no ar, e o cliente lia como defeito da propria emissora --}}
            <p class="txb__offline" data-offline hidden>
                <i class="fa-solid fa-triangle-exclamation"></i>
                <span data-offline-text></span>
            </p>

            <section class="sec txb">
                <div class="txb__tabs" role="tablist">
                    <button class="txb__tab is-on" type="button" data-pane="autodj">
                        <span class="dot"></span>
                        <span class="txb__tab-text">
                            <strong>{{ __('radio.home_block_item_autodj') }}</strong>
                            <small data-state-autodj>--</small>
                        </span>
                    </button>

                    <button class="txb__tab" type="button" data-pane="live">
                        <span class="dot"></span>
                        <span class="txb__tab-text">
                            <strong>{{ __('radio.home_block_item_live') }}</strong>
                            <small data-state-live>--</small>
                        </span>
                    </button>

                    <button class="txb__tab" type="button" data-pane="relay" hidden>
                        <span class="dot"></span>
                        <span class="txb__tab-text">
                            <strong>{{ __('radio.home_block_item_relay') }}</strong>
                            <small data-state-relay>--</small>
                        </span>
                    </button>

                    <button class="tx__refresh txb__refresh" type="button" title="{{ __('radio.home_block_ajax_autodj_item6_btn') }}" data-refresh>
                        <i class="fa-solid fa-arrows-rotate"></i>
                    </button>
                </div>

                <div class="txb__body" data-body="autodj">
                    <p class="txb__state" data-note-autodj></p>

                    <div class="tx__facts" data-facts-autodj>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_autodj_item1') }}</span>
                            <span class="tx__val" data-codec><span class="rskel rskel--val"></span></span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_autodj_item2') }}</span>
                            <span class="tx__val" data-since><span class="rskel rskel--val"></span></span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_autodj_item3') }}</span>
                            <span class="tx__val" data-playlist><span class="rskel rskel--val"></span></span>
                        </span>

                        {{-- so em segundo plano: e o audio que volta quando o locutor sair --}}
                        <span class="tx__fact" data-fact-resume hidden>
                            <span class="tx__key">{{ __('radio.home_block_ajax_autodj_resume') }}</span>
                            <span class="tx__val" data-resume>--</span>
                        </span>
                    </div>

                    @include('radio.includes.schedules')

                    <div class="tx__acts" data-acts-autodj hidden>
                        <button class="btn btn--danger" type="button" data-act="AutoDJControl" data-arg="stop" data-confirm="{{ __('radio.home_js_autodj_stop_confirm') }}">
                            <i class="fa-solid fa-power-off"></i> {{ __('radio.home_block_ajax_autodj_btnact_1') }}
                        </button>
                        <button class="btn btn--ghost" type="button" data-act="ReloadPlaylist"
                                data-confirm="{{ __('radio.home_js_reload_confirm') }}"
                                data-confirm-note="{{ __('radio.home_js_reload_confirm_note') }}">
                            <i class="fa-solid fa-rotate"></i> {{ __('radio.home_block_ajax_autodj_btnact_2') }}
                        </button>
                        <button class="btn btn--ghost" type="button" data-open-playlist>
                            <i class="fa-solid fa-list"></i> {{ __('radio.home_block_ajax_autodj_btnact_3') }}
                        </button>
                        <button class="btn btn--ghost" type="button" data-act="SkipSong" data-confirm="{{ __('radio.home_js_skip_confirm') }}">
                            <i class="fa-solid fa-forward-step"></i> {{ __('radio.home_block_ajax_autodj_btnact_4') }}
                        </button>
                    </div>

                    {{-- desligado: a aba explica o que fazer, em vez de mostrar dados vazios --}}
                    <div class="tx__none" data-acts-autodj-off hidden>
                        @if($playlists->count())
                            <span class="tx__none-ico"><i class="fa-solid fa-power-off"></i></span>
                            <h3 class="tx__none-title">{{ __('radio.home_block_ajax_autodj_stoped_h1') }}</h3>
                            <p class="tx__none-text">{{ __('radio.home_block_ajax_autodj_stoped_h2') }}</p>

                            {{-- escolher e ligar num passo so: ligar e sempre imediato,
                                 e a fila so existe para trocar com o Auto DJ no ar --}}
                            <div class="tx__start">
                                <select class="input tx__start-pick" data-start-pick aria-label="{{ __('radio.home_blockinfo_changepl_option') }}">
                                    <option value="">{{ __('radio.home_block_ajax_autodj_stoped_option') }}</option>
                                    @foreach($playlists as $playlist)
                                        <option value="{{ $playlist->id }}">{{ $playlist->name }}</option>
                                    @endforeach
                                </select>

                                <button class="btn btn--primary" type="button" data-start-autodj
                                        data-msg-starting="{{ __('radio.home_block_ajax_autodj_starting') }}">
                                    @include('includes.spinner')
                                    <i class="fa-solid fa-play"></i>
                                    <span data-start-label>{{ __('radio.home_block_ajax_autodj_stoped_btn') }}</span>
                                </button>
                            </div>
                        @else
                            <span class="tx__none-ico"><i class="fa-solid fa-list-ol"></i></span>
                            <h3 class="tx__none-title">{{ __('radio.home_block_ajax_autodj_stoped_empty_h1') }}</h3>
                            <p class="tx__none-text">{{ __('radio.home_block_ajax_autodj_stoped_empty_h2') }}</p>

                            <div class="tx__none-acts">
                                <a class="btn btn--primary" href="{{ route('radio.playlists.c') }}">
                                    <i class="fa-solid fa-plus"></i>
                                    <span>{{ __('radio.home_block_ajax_autodj_stoped_empty_btn') }}</span>
                                </a>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="txb__body" data-body="live" hidden>
                    <p class="txb__state" data-note-live></p>

                    {{-- sem ninguem conectado a aba explica o que fazer, em vez de so avisar --}}
                    <div class="tx__none" data-live-none hidden>
                        <span class="tx__none-ico"><i class="fa-solid fa-microphone-lines-slash"></i></span>
                        <h3 class="tx__none-title">{{ __('radio.home_block_ajax_live_off_h1') }}</h3>
                        <p class="tx__none-text">{{ __('radio.home_block_ajax_live_off_h2') }}</p>

                        <div class="tx__none-acts">
                            <a class="btn btn--primary" href="{{ route('radio.live-passwords.r') }}">
                                <i class="fa-solid fa-key"></i>
                                <span>{{ __('radio.home_block_ajax_live_off_btn') }}</span>
                            </a>
                            <a class="btn btn--ghost" href="{{ route('radio.live-passwords.c') }}">
                                <i class="fa-solid fa-plus"></i>
                                <span>{{ __('radio.password_new_title') }}</span>
                            </a>
                        </div>
                    </div>

                    <div class="tx__facts" data-facts-live hidden>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_live_item_1') }}</span>
                            <span class="tx__val" data-live-codec>--</span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_live_item_2') }}</span>
                            <span class="tx__val" data-live-name>--</span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_live_item_3') }}</span>
                            <span class="tx__val" data-live-since>--</span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.home_block_ajax_live_item_4') }}</span>
                            <span class="tx__val" data-live-ip>--</span>
                        </span>
                    </div>

                    <div class="tx__acts" data-acts-live>
                        <button class="btn btn--danger" type="button" data-act="StopLive" data-arg="stop" data-live-only hidden
                                data-confirm="{{ __('radio.home_js_live_stop_confirm') }}"
                                data-confirm-note="{{ __('radio.home_js_live_stop_confirm_note') }}">
                            <i class="fa-solid fa-link-slash"></i> {{ __('radio.home_block_ajax_live_btn') }}
                        </button>
                        {{-- as senhas ficam no bloco de "sem locutor" e no menu:
                             com alguem no ar, o que resta a fazer aqui e desconectar --}}
                    </div>
                </div>

                <div class="txb__body" data-body="relay" hidden>
                    <p class="txb__state" data-note-relay></p>

                    <div class="tx__facts" data-facts-relay hidden>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.relays_form_name') }}</span>
                            <span class="tx__val" data-relay-name>--</span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.relays_table_start') }}</span>
                            <span class="tx__val" data-relay-since>--</span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.relays_table_end') }}</span>
                            <span class="tx__val" data-relay-until>--</span>
                        </span>
                        <span class="tx__fact">
                            <span class="tx__key">{{ __('radio.relays_show_url') }}</span>
                            <span class="tx__val" data-relay-url>--</span>
                        </span>
                    </div>

                    <div class="tx__acts tx__acts--relay">
                        <button class="btn btn--danger" type="button" data-act="StopRelay" data-relay-only hidden
                                data-confirm="{{ __('radio.relays_stop_confirm') }}"
                                data-confirm-note="{{ __('radio.home_js_relay_stop_confirm_note') }}">
                            <i class="fa-solid fa-link-slash"></i> {{ __('radio.relays_action_stop') }}
                        </button>

                        <a class="btn btn--ghost" href="{{ route('radio.relays.r') }}">
                            <i class="fa-solid fa-gear"></i> {{ __('radio.home_relay_manage') }}
                        </a>
                    </div>
                </div>
            </section>

            {{-- nasce escondida: sem transmissao ela nao aparece, e mostrar o
                 esqueleto para depois sumir era um piscar sem informacao --}}
            <section class="sec rhist" hidden>
                <div class="sec__head">
                    <h2 class="sec__title">
                        <i class="fa-solid fa-clock-rotate-left"></i> {{ __('radio.home_block_ajax_autodj_item6') }}
                    </h2>
                    <a class="sec__link" href="{{ route('radio.historyAll') }}">{{ __('radio.home_block_ajax_autodj_item6_btn') }}</a>
                </div>
                <div class="sec__body">
                    <ul class="hlist" data-history></ul>
                </div>
            </section>
        </div>

        <aside class="rhome__side">
            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-chart-simple"></i> {{ __('radio.home_blockinfo_title') }}</h2>
                </div>
                <div class="sec__body">
                    <div class="cons">
                        <div class="cons__row">
                            <span class="cons__key">{{ __('radio.home_blockinfo_item_1') }}</span>
                            <span class="cons__val">
                                {{ formatBytes($streamData->plan_space_used) }}
                                <small>/ {{ formatBytes($streamData->plan_space) }}</small>
                            </span>
                        </div>

                        @php
                            $usoDisco = $streamData->plan_space > 0
                                ? min(100, round(($streamData->plan_space_used / $streamData->plan_space) * 100, 1))
                                : 0;
                        @endphp

                        <div class="cons__bar"><span style="width: {{ max($usoDisco, 0.5) }}%"></span></div>

                        <div class="cons__row">
                            <span class="cons__key">{{ __('radio.home_blockinfo_item_3') }}</span>
                            <span class="cons__val">{{ $streamData->plan_bitrate }} kbps</span>
                        </div>

                        <div class="cons__row">
                            <span class="cons__key">{{ __('radio.home_blockinfo_item_4') }}</span>
                            <span class="cons__val">
                                {{ ($streamData->plan_listeners == '999999' || $streamData->plan_listeners == '0' ? __('radio.home_blockinfo_unlimited') : $streamData->plan_listeners) }}
                            </span>
                        </div>

                        <div class="cons__row cons__row--link">
                            <span class="cons__key">{{ __('radio.home_blockinfo_item_2') }}</span>
                            <a href="{{ $streamUrl }}" target="_blank" rel="noopener">
                                {{ $streamUrl }} <i class="fa-solid fa-arrow-up-right-from-square"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            @include('radio.includes.campaigns')

            {{-- o card inteiro e o link, como era no painel antigo --}}
            <a class="libcard" href="{{ route('radio.library.r') }}">
                <i class="fa-solid fa-box-open libcard__ico"></i>

                <strong class="libcard__title">{{ __('radio.home_blockinfo_library_h1') }}</strong>
                <span class="libcard__text">{{ __('radio.home_blockinfo_library_h2') }}</span>

                <span class="libcard__cta">
                    {{ __('radio.home_blockinfo_library_btn') }} <i class="fa-solid fa-arrow-right"></i>
                </span>
            </a>
        </aside>
    </div>

    <div class="modal plmodal" hidden>
        <div class="modal__card" role="dialog" aria-modal="true" aria-labelledby="plmodal-title">
            <h2 class="modal__title" id="plmodal-title">{{ __('radio.home_blockinfo_changepl_h1') }}</h2>

            <label class="field">
                <span class="field__label">{{ __('radio.home_blockinfo_changepl_option') }}</span>
                <select class="input" data-playlist-pick>
                    <option value="">{{ __('radio.home_blockinfo_changepl_option') }}</option>
                    @foreach($playlists as $playlist)
                        <option value="{{ $playlist->id }}">{{ $playlist->name }}</option>
                    @endforeach
                </select>
            </label>

            <label class="field">
                <span class="field__label">{{ __('radio.home_changepl_start_label') }}</span>
                <select class="input" data-playlist-when>
                    <option value="1">{{ __('radio.home_changepl_start_now') }}</option>
                    <option value="2">{{ __('radio.home_changepl_start_queue') }}</option>
                </select>
            </label>

            <div class="modal__foot">
                <button class="btn btn--ghost" type="button" data-close>{{ __('radio.home_blockinfo_changepl_btn_cancel') }}</button>
                <button class="btn btn--primary" type="button" data-playlist-confirm>
                    @include('includes.spinner')
                    <span class="btn__label">{{ __('radio.home_blockinfo_changepl_btn_confirm') }}</span>
                </button>
            </div>
        </div>
    </div>

</main>

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

@include('includes/footer-novo')