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

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

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

    $audioServers = ['hts03', 'hts10', 'hts05', 'hts06', 's01', 'hts04', 'hts01', 'hts07', 'hts08', 'hts02', 'hts09'];
    $hasAudio     = in_array($siteData->stream_server, $audioServers);

    $fadeTimes = [2, 4, 6, 8, 10];
    $fadeFiles = [10 => null, 20 => null, 30 => null, 60 => __('radio.settings_minute_1'), 90 => __('radio.settings_minute_1_half')];
    $bitrates  = [32, 48, 64, 96];

    if ($streamData->plan_bitrate >= 128) {
        $bitrates[] = 128;
    }

    if ($streamData->plan_bitrate > 128) {
        $bitrates = array_merge($bitrates, [192, 256, 320]);
    }
@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.menu_item_6') }}</h1>
            <p class="page-sub">{{ __('radio.settings_page_sub') }}</p>
        </div>
    </header>

    <div class="rset"
         data-url="{{ route('radio.sett.r.do') }}"
         data-msg-title="{{ __('radio.settings_confirm_title') }}"
         data-msg-text="{{ __('radio.settings_confirm_text') }}"
         data-msg-confirm="{{ __('site.action_confirm') }}"
         data-msg-fail="{{ __('radio.settings_save_error') }}"
         data-url-device="{{ route('radio.sett.device.remove') }}"
         data-msg-device-title="{{ __('radio.devices_revoke') }}"
         data-msg-device-text="{{ __('radio.devices_revoke_confirm') }}">

        <nav class="rset__nav">
            <button type="button" class="rset__nav-item is-active" data-go="settings">
                <span class="rset__nav-ic"><i class="fa-solid fa-sliders"></i></span>
                <span class="rset__nav-txt">
                    <b>{{ __('radio.menu_item_6') }}</b>
                    <span>{{ __('radio.settings_nav_sub') }}</span>
                </span>
            </button>

            <button type="button" class="rset__nav-item" data-go="devices">
                <span class="rset__nav-ic"><i class="fa-solid fa-clock-rotate-left"></i></span>
                <span class="rset__nav-txt">
                    <b>{{ __('radio.devices_nav') }}</b>
                    <span>{{ __('radio.devices_nav_sub') }}</span>
                </span>
            </button>
        </nav>

        <section class="sec rset__panel" data-pane="settings">

            <div class="rset__group">
                <h2 class="rset__group-title">{{ __('radio.settings_section_stream') }}</h2>

                <div class="rset__row">
                    <span class="rset__info">
                        <span class="rset__name">{{ __('radio.settings_codec') }}</span>
                        <span class="rset__help">{{ __('radio.settings_help_codec') }}</span>
                    </span>
                    <span class="rset__ctrl">
                        <select class="input" name="autodj_codec">
                            <option value="mp3" @selected($streamData->autodj_codec == 'mp3')>MP3</option>
                            <option value="aac" @selected($streamData->autodj_codec == 'aac')>AAC</option>
                        </select>
                    </span>
                </div>

                <div class="rset__row">
                    <span class="rset__info">
                        <span class="rset__name">{{ __('radio.settings_bitrate') }}</span>
                        <span class="rset__help">{{ __('radio.settings_help_bitrate') }}</span>
                    </span>
                    <span class="rset__ctrl">
                        <select class="input" name="autodj_bitrate">
                            @foreach($bitrates as $bitrate)
                                <option value="{{ $bitrate }}" @selected($streamData->autodj_bitrate == $bitrate)>{{ $bitrate }}kbps</option>
                            @endforeach
                        </select>
                    </span>
                </div>

                <div class="rset__row">
                    <span class="rset__info">
                        <span class="rset__name">{{ __('radio.settings_channels') }}</span>
                        <span class="rset__help">{{ __('radio.settings_help_channels') }}</span>
                    </span>
                    <span class="rset__ctrl">
                        <select class="input" name="autodj_channel">
                            <option value="1" @selected($streamData->autodj_channel == '1')>Mono</option>
                            <option value="2" @selected($streamData->autodj_channel != '1')>Stereo</option>
                        </select>
                    </span>
                </div>

                <div class="rset__row">
                    <span class="rset__info">
                        <span class="rset__name">{{ __('radio.settings_samplerate') }}</span>
                    </span>
                    <span class="rset__ctrl">
                        <input type="text" class="input" value="44100Hz" readonly>
                    </span>
                </div>

                <div class="rset__row">
                    <span class="rset__info">
                        <span class="rset__name">{{ __('general.label_timezone') }}</span>
                        <span class="rset__help">{{ __('radio.settings_help_timezone') }}</span>
                    </span>
                    <span class="rset__ctrl">
                        <input type="text" class="input" readonly
                               value="{{ $streamData->timezone == 'America/Sao_Paulo' ? __('radio.settings_timezone_brasilia') : $streamData->timezone }}">
                        <a class="btn btn--ghost" href="{{ route('settings.r') }}" data-tip="{{ __('general.action_edit') }}">
                            <i class="fa-solid fa-pen"></i>
                        </a>
                    </span>
                </div>
            </div>

            @if($hasAudio)
                <div class="rset__group">
                    <h2 class="rset__group-title">{{ __('radio.settings_section_audio') }}</h2>

                    <div class="rset__row">
                        <span class="rset__info">
                            <span class="rset__name">{{ __('radio.settings_fade_type') }}</span>
                            <span class="rset__help">{{ __('radio.settings_help_fade') }}</span>
                            <span class="rset__hint" data-fade-hint @if($streamData->autodj_fade_type != 'crossfade') hidden @endif>
                                {!! __('radio.settings_crossfade_msg') !!}
                            </span>
                        </span>
                        <span class="rset__ctrl">
                            <select class="input" name="autodj_fade_type" data-fade-type>
                                <option value="none" @selected($streamData->autodj_fade_type == 'none')>{{ __('radio.settings_fade_none') }}</option>
                                <option value="simple" @selected($streamData->autodj_fade_type == 'simple')>{{ __('radio.settings_fade_simple') }}</option>
                                @if($streamData->autodj_fade_type == 'crossfade')
                                    <option value="crossfade" selected>Crossfade</option>
                                @endif
                            </select>
                        </span>
                    </div>

                    <div class="rset__row">
                        <span class="rset__info">
                            <span class="rset__name">{{ __('radio.settings_preset') }}</span>
                            <span class="rset__help">{{ __('radio.settings_help_preset') }}</span>
                        </span>
                        <span class="rset__ctrl">
                            <select class="input" name="autodj_preset">
                                <option value="off" @selected($streamData->autodj_preset == 'off')>{{ __('radio.settings_preset_off') }}</option>
                                <option value="light" @selected($streamData->autodj_preset == 'light')>{{ __('radio.settings_preset_light') }}</option>
                                <option value="balanced" @selected($streamData->autodj_preset == 'balanced')>{{ __('radio.settings_preset_balanced') }}</option>
                                <option value="strong" @selected($streamData->autodj_preset == 'strong')>{{ __('radio.settings_preset_strong') }}</option>
                                <option value="aggressive" @selected($streamData->autodj_preset == 'aggressive')>{{ __('radio.settings_preset_aggressive') }}</option>
                            </select>
                        </span>
                    </div>

                    <div class="rset__row" data-fade-box @if($streamData->autodj_fade_type == 'none') hidden @endif>
                        <span class="rset__info">
                            <span class="rset__name">{{ __('radio.settings_fade_duration') }}</span>
                            <span class="rset__help">{{ __('radio.settings_help_fade_duration') }}</span>
                        </span>
                        <span class="rset__ctrl">
                            <select class="input" name="autodj_fade_time">
                                @foreach($fadeTimes as $seconds)
                                    <option value="{{ $seconds }}" @selected($streamData->autodj_fade_time == $seconds)>{{ __('radio.settings_seconds', ['count' => $seconds]) }}</option>
                                @endforeach
                            </select>
                        </span>
                    </div>

                    <div class="rset__row" data-fade-box @if($streamData->autodj_fade_type == 'none') hidden @endif>
                        <span class="rset__info">
                            <span class="rset__name">{{ __('radio.settings_fade_min_length') }}</span>
                            <span class="rset__help">{{ __('radio.settings_help_fade_min') }}</span>
                        </span>
                        <span class="rset__ctrl">
                            <select class="input" name="autodj_fade_file">
                                @foreach($fadeFiles as $seconds => $label)
                                    <option value="{{ $seconds }}" @selected($streamData->autodj_fade_file == $seconds)>{{ $label ?: __('radio.settings_seconds', ['count' => $seconds]) }}</option>
                                @endforeach
                            </select>
                        </span>
                    </div>
                </div>
            @endif

            <footer class="rset__foot">
                <button type="button" class="btn btn--primary rset__save">
                    @include('includes/spinner')
                    <span>{{ __('general.action_save_changes') }}</span>
                </button>
            </footer>

        </section>

        <section class="sec rset__panel" data-pane="devices" hidden>

            <div class="rset__group">
                <h2 class="rset__group-title">{{ __('radio.devices_title') }}</h2>
                <p class="rset__group-sub">{{ __('radio.devices_sub') }}</p>

                @if(config('session.driver') !== 'database')
                    <p class="rset__empty">{{ __('radio.devices_off') }}</p>
                @elseif(!$devices->count())
                    <p class="rset__empty">{{ __('radio.devices_empty') }}</p>
                @else
                    <ul class="rdev">
                        @foreach($devices as $device)
                            <li class="rdev__item @if($device->current) is-current @endif">
                                <span class="rdev__ic"><i class="{{ $device->icon }}"></i></span>

                                <span class="rdev__info">
                                    <span class="rdev__name">{{ $device->os }} <span class="rdev__dot">&middot;</span> {{ $device->browser }}</span>
                                    <span class="rdev__meta">
                                        {{ $device->ip_address }}
                                        <span class="rdev__dot">&middot;</span>
                                        {{ __('radio.devices_last_seen', ['date' => $device->seen->format('d/m/Y H:i')]) }}
                                    </span>
                                </span>

                                @if($device->current)
                                    <span class="rdev__tag"><i class="fa-solid fa-circle"></i> {{ __('radio.devices_current') }}</span>
                                @else
                                    <button type="button" class="btn btn--ghost rdev__off" data-device="{{ $device->id }}">
                                        {{ __('radio.devices_revoke') }}
                                    </button>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>

        </section>

    </div>

</main>

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

@include('includes/footer-novo')