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

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

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

    $base = rtrim(config('app.url'), '/');
    $hash = str_replace('/', 'brascsep', EncryptBras($siteData->stream_port));

    $tabs = [
        '1' => ['fa-square-caret-right', __('radio.players_tab_bar')],
        '2' => ['fa-layer-group', __('radio.players_tab_mini')],
        '3' => ['fa-clone', __('radio.players_tab_popup')],
        '4' => ['fa-tv', __('radio.players_tab_box')],
    ];

    $current = isset($tabs[$type]) ? (string) $type : '1';

    /* todo modelo le o fim da URL como iniciar-volume, entao todos oferecem as duas opcoes */
    $catalog = [
        '1' => [
            ['id' => '01', 'shot' => 'style01.png', 'w' => '100%', 'h' => 61],
            ['id' => '02', 'shot' => 'style02.png', 'w' => '100%', 'h' => 61],
            ['id' => '03', 'shot' => 'style03.png', 'w' => '100%', 'h' => 100],
            ['id' => '04', 'shot' => 'style04.png', 'w' => '100%', 'h' => 61],
            ['id' => '05', 'shot' => 'style05.png', 'w' => '100%', 'h' => 61],
        ],
        '2' => [
            ['id' => '01', 'shot' => 'style-mini01.png', 'w' => 450, 'h' => 90],
            ['id' => '02', 'shot' => 'style-mini02.png', 'w' => 380, 'h' => 60],
            ['id' => '03', 'shot' => 'style-mini03.png', 'w' => 250, 'h' => 165, 'radius' => 5],
        ],
        '3' => [
            ['id' => '01', 'shot' => 'style-pop01.png', 'w' => 600, 'h' => 230],
            ['id' => '02', 'shot' => 'style-pop02.png', 'w' => 500, 'h' => 170],
        ],
        '4' => [
            ['id' => 'box', 'shot' => 'stylebox.png', 'w' => '100%', 'h' => 420],
        ],
    ];

    $paths = ['1' => '/player/', '2' => '/player-mini/', '3' => '/player-pop/', '4' => '/player/box'];
    $models = $catalog[$current];
@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_5_sub_4') }}</h1>
            <p class="page-sub">{{ __('radio.players_page_sub') }}</p>
        </div>
    </header>

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

        <nav class="plrs__tabs">
            @foreach($tabs as $key => $tab)
                <a href="{{ (string) $key === '1' ? route('radio.players.r') : route('radio.players.r', $key) }}"
                   class="plrs__tab @if($current === (string) $key) is-active @endif">
                    <span class="plrs__tab-ic"><i class="fa-solid {{ $tab[0] }}"></i></span>
                    <span>{{ $tab[1] }}</span>
                </a>
            @endforeach
        </nav>

        <section class="sec">
            <header class="sec__head">
                <h2 class="sec__title">{{ $tabs[$current][1] }}</h2>
                <span class="sec__meta">{{ trans_choice('radio.players_count', count($models), ['count' => count($models)]) }}</span>
            </header>

            <div class="sec__body plrs__body">
                <ul class="plrs__grid plrs__grid--{{ $current === '4' ? 'wide' : ($current === '1' ? 'bar' : 'small') }}">
                    @foreach($models as $model)
                        @php
                            $name = $model['id'] === 'box'
                                ? $tabs['4'][1]
                                : __('radio.players_model', ['number' => $model['id']]);

                            $url = $current === '4'
                                ? $base . $paths['4'] . '/' . $hash
                                : $base . $paths[$current] . $model['id'] . '/' . $hash;

                            $size = $model['w'] === '100%'
                                ? __('radio.players_size_responsive')
                                : $model['w'] . ' x ' . $model['h'] . 'px';
                        @endphp

                        <li>
                            <button type="button" class="plrs__card"
                                    data-model
                                    data-name="{{ $name }}"
                                    data-url="{{ $url }}"
                                    data-mode="{{ $current === '3' ? 'popup' : 'iframe' }}"
                                    data-width="{{ $model['w'] }}"
                                    data-height="{{ $model['h'] }}"
                                    data-radius="{{ $model['radius'] ?? '' }}"
                                    data-fixed="{{ $current === '1' ? '1' : '' }}"
                                    data-no-height="{{ $current === '4' ? '1' : '' }}"
                                    data-auto="1"
                                    data-volume="1">
                                <span class="plrs__shot">
                                    <img src="/players/{{ $model['shot'] }}" alt="{{ $name }}" loading="lazy">
                                </span>

                                <span class="plrs__info">
                                    <span class="plrs__name">{{ $name }}</span>
                                    <span class="plrs__size">{{ $size }}</span>
                                </span>

                                <span class="plrs__cta">
                                    <i class="fa-solid fa-code"></i>
                                    <span>{{ __('radio.players_get_code') }}</span>
                                </span>
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>

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

    </div>

</main>

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

@include('includes/footer-novo')