@php
    $isEdit    = Route::currentRouteName() === 'radio.playlists.u';
    $isTpl     = $isTemplate ?? false;
    $pageTitle = $isTpl ? __('radio.playlists_edit_template') : ($isEdit ? __('radio.playlists_edit_title') : __('radio.playlists_create'));
    $tplParts  = ($templateData ?? null) ? explode('||', $templateData) : null;
    $isRandom  = $isEdit && (string) $playlistData->type === '1';
@endphp

@section('title', $pageTitle)

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

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_radio')],
        ['label' => __('radio.menu_item_2'), 'url' => route('radio.playlists.r')],
        ['label' => $pageTitle],
    ];

    $tabs = [
        ''            => ['fa-music', __('radio.fm_tab_musics'), 'audio'],
        'Comerciais'  => ['fa-bullhorn', __('radio.fm_tab_ads'), 'com'],
        'Vinhetas'    => ['fa-wave-square', __('radio.library_tab_vinhetas'), 'vin'],
        'Podcasts'    => ['fa-podcast', __('radio.app_mod_podcasts'), 'pod'],
        'additionals' => ['fa-box-open', __('radio.pl_tab_additionals'), 'extra'],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main plmob">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ $pageTitle }}</h1>
        </div>
    </header>

    @include('radio.includes.playlist-editor-open', ['plClass' => 'pled--mob'])

        <section class="sec pled__namecard">
            <div class="sec__body pled__form">
                <label class="pled__label" for="pl-name">{{ __('radio.playlists_name_label') }}</label>
                <input type="text" id="pl-name" class="input" maxlength="100" autocomplete="off"
                       value="{{ $isEdit ? $playlistData->name : '' }}">

                <div class="pled__pick">
                    <input type="hidden" id="pl-type" value="{{ $isRandom ? '1' : '0' }}">
                    <button type="button" class="btn btn--ghost pled__pick-btn" aria-haspopup="true" aria-expanded="false">
                        <i class="fa-solid {{ $isRandom ? 'fa-shuffle' : 'fa-list-ol' }}" data-pick-icon></i>
                        <span data-pick-label>{{ $isRandom ? __('radio.playlists_type_random') : __('radio.playlists_type_sequential') }}</span>
                        <i class="fa-solid fa-chevron-down pled__pick-caret"></i>
                    </button>
                    <div class="pled__pick-menu" hidden>
                        <button type="button" class="pled__pick-opt" data-value="0" data-icon="fa-list-ol" data-short="{{ __('radio.playlists_type_sequential') }}">
                            <i class="fa-solid fa-list-ol"></i>
                            <span>
                                <b>{{ __('radio.pl_mode_sequential') }}</b>
                                <span>{{ __('radio.pl_mode_sequential_desc') }}</span>
                            </span>
                            <i class="fa-solid fa-check pled__pick-check"></i>
                        </button>
                        <button type="button" class="pled__pick-opt" data-value="1" data-icon="fa-shuffle" data-short="{{ __('radio.playlists_type_random') }}">
                            <i class="fa-solid fa-shuffle"></i>
                            <span>
                                <b>{{ __('radio.pl_mode_random') }}</b>
                                <span>{{ __('radio.pl_mode_random_desc') }}</span>
                            </span>
                            <i class="fa-solid fa-check pled__pick-check"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <p class="pled__limit" hidden>
            <i class="fa-solid fa-triangle-exclamation"></i>
            <span>{!! __('radio.playlists_limit_warning') !!}</span>
        </p>

        <nav class="plmob__switch">
            <button type="button" class="plmob__seg is-active" data-mobpane="files">
                <i class="fa-solid fa-folder-open"></i>
                <span>{{ __('radio.pl_mob_tab_library') }}</span>
            </button>
            <button type="button" class="plmob__seg" data-mobpane="items">
                <i class="fa-solid fa-list-ul"></i>
                <span>{{ __('radio.pl_mob_tab_playlist') }}</span>
                <b data-mobcount>0</b>
            </button>
        </nav>

        <div class="pled__grid">

            <section class="sec pled__pane" data-mobbox="files">
                <nav class="pled__tabs">
                    @foreach($tabs as $key => $tab)
                        <button type="button" class="pled__tab pled__tab--{{ $tab[2] }} @if($loop->first) is-active @endif" data-area="{{ $key }}">
                            <span class="pled__tab-ico"><i class="fa-solid {{ $tab[0] }}"></i></span>
                            <span>{{ $tab[1] }}</span>
                        </button>
                    @endforeach
                </nav>

                <div class="pled__bar pled__bar--search">
                    <div class="pled__search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input type="search" class="input pled__search-input" autocomplete="off"
                               placeholder="{{ __('radio.fm_search_placeholder') }}">
                        <button type="button" class="pled__search-clear" hidden>{{ __('radio.playlists_clear_search') }}</button>
                    </div>

                    <div class="pled__player" hidden>
                        <button type="button" class="pled__player-btn" data-player-toggle>
                            <i class="fa-solid fa-pause"></i>
                        </button>
                        <span class="pled__player-name"></span>
                        <span class="pled__player-time">00:00</span>
                        <input type="range" class="pled__player-seek" min="0" max="1000" value="0"
                               aria-label="{{ __('radio.pl_player_seek') }}">
                        <span class="pled__player-total">00:00</span>
                        <button type="button" class="pled__player-btn pled__player-close" data-player-stop>
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>

                <div class="pled__bar pled__bar--loc">
                    <input type="checkbox" class="pled__all-files" aria-label="{{ __('radio.pl_select_all') }}">
                    <i class="fa-solid fa-folder-open pled__loc-icon"></i>
                    <nav class="pled__path"></nav>
                    <span class="pled__count" data-files-count></span>
                </div>

                <div class="pled__body">
                    <ul class="pled__files pled__list-zebra"></ul>
                </div>

                <div class="plmob__foot">
                    <button type="button" class="btn btn--primary pled__add" disabled>
                        <i class="fa-solid fa-plus"></i>
                        <span>{{ __('radio.playlists_add_to') }}</span>
                    </button>
                </div>
            </section>

            <section class="sec pled__pane" data-mobbox="items">
                <header class="sec__head">
                    <h2 class="sec__title">{{ __('radio.pl_items_title') }}</h2>
                    <span class="sec__meta"><b data-total-files></b></span>
                </header>

                <div class="pled__bar pled__bar--acts">
                    <div class="pled__acts">
                        <button type="button" class="btn btn--ghost pled__remsel" hidden>
                            <i class="fa-solid fa-trash-can"></i>
                            <span>{{ __('site.btn_remselect') }}</span>
                        </button>
                        <button type="button" class="btn btn--ghost pled__interleave">
                            <i class="fa-solid fa-shuffle"></i>
                            <span>{{ __('radio.pl_action_interleave') }}</span>
                        </button>
                        <button type="button" class="btn btn--ghost pled__shuffle">
                            <i class="fa-solid fa-arrow-right-arrow-left"></i>
                            <span>{{ __('radio.pl_action_shuffle') }}</span>
                        </button>
                        <button type="button" class="btn btn--ghost pled__clear">
                            <i class="fa-solid fa-eraser"></i>
                            <span>{{ __('radio.pl_action_clear') }}</span>
                        </button>
                    </div>

                    <div class="pled__player" hidden>
                        <button type="button" class="pled__player-btn" data-player-toggle>
                            <i class="fa-solid fa-pause"></i>
                        </button>
                        <span class="pled__player-name"></span>
                        <span class="pled__player-time">00:00</span>
                        <input type="range" class="pled__player-seek" min="0" max="1000" value="0"
                               aria-label="{{ __('radio.pl_player_seek') }}">
                        <span class="pled__player-total">00:00</span>
                        <button type="button" class="pled__player-btn pled__player-close" data-player-stop>
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>
                </div>

                <div class="pled__bar pled__bar--ifind">
                    <div class="pled__search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input type="search" class="input pled__ifind-input" autocomplete="off"
                               placeholder="{{ __('radio.pl_items_search') }}">
                        <button type="button" class="pled__search-clear pled__ifind-clear" hidden>{{ __('radio.playlists_clear_search') }}</button>
                    </div>
                    <span class="pled__ifind-count" hidden></span>
                </div>

                <div class="pled__thead">
                    <input type="checkbox" class="pled__all-items" aria-label="{{ __('radio.pl_select_all') }}">
                    <span class="pled__thead-icon"></span>
                    <span class="pled__thead-start">{{ __('radio.pl_starts_at') }}</span>
                    <span class="pled__thead-name">{{ __('radio.pl_table_file') }}</span>
                </div>

                <div class="pled__body">
                    <ol class="pled__items"></ol>
                </div>

                <footer class="pled__foot">
                    <span class="pled__time">{{ __('radio.pl_total_time') }} <b data-total-time>00:00:00</b></span>
                    <div class="pled__types"></div>
                </footer>
            </section>

        </div>

        <div class="plmob__bar">
            <a href="{{ route('radio.playlists.r') }}" class="btn btn--ghost pled__back">{{ __('radio.pl_action_back') }}</a>
            <button type="button" class="btn btn--primary pled__save">
                @include('includes/spinner')
                <span>{{ $isTpl ? __('radio.playlists_templates_use') : ($isEdit ? __('general.action_save') : __('radio.fm_btn_create')) }}</span>
            </button>
        </div>

        <div class="modal plmodal" data-modal-interleave hidden>
            <div class="modal__card" role="dialog" aria-modal="true">
                <h2 class="modal__title">{{ __('radio.pl_action_interleave') }}</h2>
                <p class="plmodal__hint">{{ __('radio.pl_interleave_help') }}</p>

                <div class="plmodal__source">
                    <i class="fa-solid fa-folder-open"></i>
                    <span data-il-source></span>
                </div>

                <div class="plmodal__row">
                    <label class="plmodal__cell">
                        <span class="plmodal__cap">{{ __('radio.pl_interleave_add') }}</span>
                        <input class="input plmodal__num" type="number" min="1" max="999" value="1" data-il-add>
                    </label>
                    <label class="plmodal__cell">
                        <span class="plmodal__cap">{{ __('radio.pl_interleave_every') }}</span>
                        <input class="input plmodal__num" type="number" min="1" max="999" value="3" data-il-each>
                    </label>
                    <label class="plmodal__cell plmodal__cell--grow">
                        <span class="plmodal__cap">{{ __('radio.pl_interleave_type_label') }}</span>
                        <select class="input" data-il-type>
                            <option value="all">{{ __('radio.pl_interleave_type_all') }}</option>
                            <option value="tp-audio">{{ __('radio.pl_interleave_type_music') }}</option>
                            <option value="tp-pod">{{ __('radio.pl_interleave_type_podcast') }}</option>
                            <option value="tp-addp">{{ __('radio.pl_interleave_type_short') }}</option>
                            <option value="tp-add">{{ __('radio.pl_interleave_type_program') }}</option>
                            <option value="tp-addf">{{ __('radio.pl_interleave_type_weekend') }}</option>
                        </select>
                    </label>
                </div>

                <p class="plmodal__preview" data-il-preview></p>
                <p class="plmodal__error" data-il-error hidden></p>

                <div class="modal__foot">
                    <button class="btn btn--ghost" type="button" data-close>{{ __('site.btn_cancel') }}</button>
                    <button class="btn btn--primary" type="button" data-il-run>
                        @include('includes.spinner')
                        <span>{{ __('radio.pl_action_interleave') }}</span>
                    </button>
                </div>
            </div>
        </div>

    </div>

</main>

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

@include('includes/footer-novo')