@section('title', __('site.page_players_title'))

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

@php
    $breadcrumb = [
        ['label' => __('general.top_menu_item_site')],
        ['label' => __('site.menu_item_6')],
        ['label' => __('site.menu_item_6_sub_6')],
    ];

    /* the number is the same everywhere: column, players/playerNN folder, shot and label */

    /* where each one sits, read from its own css: fixed at the bottom, or floating in a corner */
    $footerPlayers = ['7', '10', '15'];
    $miniPlayers = ['6', '12'];

    $players = collect($allowed)->map(function ($code) use ($footerPlayers, $miniPlayers) {
        $pad = str_pad((string) $code, 2, '0', STR_PAD_LEFT);
        $img = '/players/' . $pad . '.png';

        $spot = in_array((string) $code, $footerPlayers, true) ? 'footer'
            : (in_array((string) $code, $miniPlayers, true) ? 'mini' : null);

        return [
            'code' => (string) $code,
            'label' => __('site.page_players_name', ['n' => $pad]),
            'spot' => $spot,
            'spotLabel' => $spot ? __('site.page_players_tag_' . $spot) : null,
            // enquanto a prévia não existe, o cartão mostra o lugar dela
            'img' => file_exists(public_path('players/' . $pad . '.png')) ? $img : null,
        ];
    });
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('site.page_players_h1') }}</h1>
            <p class="page-sub">{{ __('site.page_players_sub') }}</p>
        </div>

        <div class="page-head__acts">
            <a class="btn btn--ghost" href="https://{{ $siteData->domain }}" target="_blank" rel="noopener">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('site.page_themes_open_site') }}
            </a>
        </div>
    </header>

    @include('includes.flash')

    @if($apiError)
        <div class="apierr">
            <span class="apierr__ico"><i class="fa-solid fa-plug-circle-xmark"></i></span>
            <p class="apierr__text">{{ $apiError }}</p>
        </div>
    @else
        <form class="plform {{ $player === '0' ? 'is-off' : '' }}" method="POST"
              action="{{ route('site.theme.players.r.do') }}" data-msg-saving="{{ __('site.configs_saving') }}">

            <section class="sec">
                <div class="sec__body">
                    <label class="row">
                        <span class="row__text">
                            <strong>{{ __('site.page_players_use_label') }}</strong>
                            <small>{{ __('site.page_players_use_help') }}</small>
                        </span>
                        <span class="switch">
                            <input type="hidden" name="use_player" value="0">
                            <input type="checkbox" name="use_player" value="1" class="plform__use" @checked($player !== '0')>
                            <span class="switch__track"><span class="switch__knob"></span></span>
                        </span>
                    </label>
                </div>
            </section>

            <section class="sec plform__pick">
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-circle-play"></i> {{ __('site.page_players_block') }}</h2>
                </div>

                <div class="sec__body">
                    <input type="hidden" name="player" class="plform__code" value="{{ $player !== '0' ? $player : '1' }}">

                    <div class="plgrid">
                        @foreach($players as $item)
                            <button class="plcard {{ (string) $player === $item['code'] ? 'is-on' : '' }}"
                                    type="button" data-code="{{ $item['code'] }}">

                                <span class="plcard__shot">
                                    @if($item['spot'])
                                        <span class="plcard__tag plcard__tag--{{ $item['spot'] }}">
                                            <i class="fa-solid {{ $item['spot'] === 'footer' ? 'fa-arrow-down' : 'fa-compress' }}"></i> {{ $item['spotLabel'] }}
                                        </span>
                                    @endif

                                    @if($item['img'])
                                        <img src="{{ $item['img'] }}" alt="" loading="lazy">
                                    @else
                                        <span class="plcard__soon">
                                            <i class="fa-solid fa-image"></i>
                                            {{ __('site.page_players_no_preview') }}
                                        </span>
                                    @endif
                                </span>

                                <span class="plcard__foot">
                                    <span class="plcard__name">{{ $item['label'] }}</span>
                                    <span class="plcard__mark"><i class="fa-solid fa-check"></i></span>
                                </span>
                            </button>
                        @endforeach
                    </div>
                </div>
            </section>

            <div class="bgform__foot">
                <button class="btn btn--primary plform__submit" type="submit">
                    @include('includes.spinner')
                    <span class="btn__label">{{ __('site.action_save') }}</span>
                </button>
            </div>
        </form>
    @endif

</main>

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

@include('includes/footer-novo')