@section('title', __('general.header_web_players_title'))

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

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_web')],
        ['label' => __('general.header_web_players_title'), 'url' => route('radio.widgets.r')],
        ['label' => __('general.widgets_players_bar')],
    ];

    /**
     * O mesmo numero serve de tudo: imagem de previa, rotulo e trecho da url.
     * A porta vai cifrada porque o player publico e quem a decifra.
     */
    $hash = str_replace('/', 'brascsep', EncryptBras($siteData->stream_port));

    /* cada barra tem a altura do proprio desenho; sem ela o iframe estica */
    $models = collect([
        ['n' => '01', 'h' => 61],
        ['n' => '02', 'h' => 61],
        ['n' => '03', 'h' => 100],
        ['n' => '04', 'h' => 61],
        ['n' => '05', 'h' => 61],
        ['n' => '06', 'h' => 80],
        ['n' => '07', 'h' => 80],
        ['n' => '08', 'h' => 80],
        ['n' => '09', 'h' => 88],
    ])->map(function ($model) use ($hash) {
        return [
            'label' => __('general.widgets_model_n', ['number' => $model['n']]),
            'img' => '/players/style' . $model['n'] . '.png',
            'url' => rtrim(config('app.url'), '/') . '/player/' . $model['n'] . '/' . $hash,
            'height' => $model['h'],
        ];
    });
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('general.header_web_players_title') }}</h1>
            <p class="page-sub">{{ __('general.widgets_page_sub') }}</p>
        </div>
    </header>

    <div class="wglayout"
         data-player-cards
         data-msg-copied="{{ __('general.action_copied') }}"
         data-msg-copy-error="{{ __('general.widgets_copy_error') }}"
         data-popup-label="{{ __('radio.players_popup_link') }}">

        @include('widgets.side')

        <div>
            <section class="sec">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-window-maximize"></i> {{ __('general.widgets_players_bar') }}</h2>
                    <p class="sec__desc">{{ __('general.widgets_bar_sub') }}</p>
                </div>

                <div class="sec__body">
                    <div class="wggrid wggrid--bar">
                        @foreach($models as $model)
                            <button class="wgcard" type="button"
                                    data-model
                                    data-name="{{ $model['label'] }}"
                                    data-url="{{ $model['url'] }}"
                                    data-mode="iframe"
                                    data-width="100%"
                                    data-height="{{ $model['height'] }}"
                                    data-fixed="1"
                                    data-auto="1"
                                    data-volume="1">
                                <span class="wgcard__shot">
                                    <img src="{{ $model['img'] }}" alt="{{ $model['label'] }}" loading="lazy">
                                </span>

                                <span class="wgcard__foot">
                                    <span class="wgcard__name">{{ $model['label'] }}</span>

                                    <span class="wgcard__cta">
                                        <i class="fa-solid fa-code"></i> {{ __('general.widgets_generate_code') }}
                                    </span>
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>
            </section>
        </div>

    </div>

    @include('includes.player-code-modal')

</main>

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

@include('includes/footer-novo')