@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 && $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') }}">
@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">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ $pageTitle }}</h1>
            <p class="page-sub">{{ $isTpl ? __('radio.pl_editor_sub_template') : __('radio.pl_editor_sub') }}</p>
        </div>
    </header>

    <div class="pled"
         data-srv="{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL', 'brascast.com') }}"
         data-hash="{{ EncryptBras($streamData->port) }}"
         data-load-srv="{{ $tplParts ? $tplParts[0] . '.' . env('BASE_SERVER_URL', 'brascast.com') : '' }}"
         data-load-hash="{{ $tplParts ? EncryptBras($tplParts[1]) : '' }}"
         data-playlist="{{ $isEdit ? $playlistData->id : '' }}"
         data-url-save="{{ $isEdit && !$isTpl ? route('radio.playlists.u.do', $playlistData->id) : route('radio.playlists.c.do') }}"
         data-limit="2000"
         data-msg-listen="{{ __('radio.fm_action_listen') }}"
         data-msg-stop="{{ __('radio.fm_action_stop') }}"
         data-msg-remove="{{ __('general.action_remove') }}"
         data-msg-move="{{ __('radio.pl_action_move') }}"
         data-msg-open="{{ __('radio.fm_action_open') }}"
         data-msg-empty-folder="{{ __('radio.fm_empty_folder') }}"
         data-msg-no-audio="{{ __('radio.fm_no_audio_found') }}"
         data-msg-no-results="{{ __('radio.pl_js_search_no_results') }}"
         data-msg-empty-items="{{ __('radio.pl_empty_items') }}"
         data-url-back="{{ route('radio.playlists.r') }}"
         data-msg-selected-one="{{ trans_choice('radio.pl_selected_count', 1, ['count' => ':count']) }}"
         data-msg-selected-many="{{ trans_choice('radio.pl_selected_count', 2, ['count' => ':count']) }}"
         data-msg-files-one="{{ trans_choice('radio.playlists_files_count', 1, ['count' => ':count']) }}"
         data-msg-files-many="{{ trans_choice('radio.playlists_files_count', 2, ['count' => ':count']) }}"
         data-msg-warning="{{ __('radio.pl_js_warning_title') }}"
         data-msg-got-it="{{ __('radio.action_got_it') }}"
         data-msg-remove-title="{{ __('general.action_remove') }}"
         data-msg-name-required="{{ __('radio.pl_js_name_required') }}"
         data-msg-min-one="{{ __('radio.pl_js_min_one_file') }}"
         data-msg-fail="{{ __('radio.playlists_action_error') }}"
         data-msg-clear-title="{{ __('radio.pl_js_clear_title') }}"
         data-msg-clear-text="{{ __('radio.pl_js_clear_text') }}"
         data-msg-shuffle-title="{{ __('radio.pl_js_shuffle_title') }}"
         data-msg-shuffle-text="{{ __('radio.pl_js_shuffle_text') }}"
         data-msg-remove-one="{{ __('radio.pl_js_remove_selected_one', ['count' => ':count']) }}"
         data-msg-remove-many="{{ __('radio.pl_js_remove_selected_many', ['count' => ':count']) }}"
         data-msg-confirm="{{ __('site.action_confirm') }}"
         data-msg-interleave-need="{{ __('radio.pl_js_interleave_need_audios') }}"
         data-msg-interleave-files="{{ __('radio.pl_interleave_need_files') }}"
         data-msg-interleave-none="{{ __('radio.pl_js_interleave_none') }}"
         data-msg-fill="{{ __('radio.pl_js_fill_all_fields') }}"
         data-msg-play="{{ __('radio.pl_player_play') }}"
         data-msg-pause="{{ __('radio.pl_player_pause') }}"
         data-msg-close-player="{{ __('radio.pl_player_close') }}"
         data-msg-drop-here="{{ __('radio.pl_drop_here') }}"
         data-msg-search-path="{{ __('radio.pl_search_results', ['term' => ':term']) }}"
         data-msg-remove-type="{{ __('radio.pl_remove_type', ['type' => ':type']) }}"
         data-msg-remove-type-one="{{ trans_choice('radio.pl_remove_type_confirm', 1, ['count' => ':count', 'type' => ':type']) }}"
         data-msg-remove-type-many="{{ trans_choice('radio.pl_remove_type_confirm', 2, ['count' => ':count', 'type' => ':type']) }}"
         data-type-audio="{{ __('radio.pl_type_music') }}"
         data-type-com="{{ __('radio.pl_type_ad') }}"
         data-type-vin="{{ __('radio.pl_type_jingle') }}"
         data-type-pod="{{ __('radio.pl_type_podcast') }}"
         data-type-time="{{ __('radio.pl_type_time') }}"
         data-type-add="{{ __('radio.pl_type_program') }}"
         data-type-addp="{{ __('radio.pl_type_short') }}"
         data-type-addf="{{ __('radio.pl_type_weekend') }}"
         data-type-camp="{{ __('radio.pl_type_campaign') }}"
         data-type-vina="{{ __('radio.pl_type_jingle_pack') }}"
         data-types-audio="{{ __('radio.pl_types_music') }}"
         data-types-com="{{ __('radio.pl_types_ad') }}"
         data-types-vin="{{ __('radio.pl_types_jingle') }}"
         data-types-vina="{{ __('radio.pl_types_jingle_pack') }}"
         data-types-pod="{{ __('radio.pl_types_podcast') }}"
         data-types-time="{{ __('radio.pl_types_time') }}"
         data-types-add="{{ __('radio.pl_types_program') }}"
         data-types-addp="{{ __('radio.pl_types_short') }}"
         data-types-addf="{{ __('radio.pl_types_weekend') }}"
         data-types-camp="{{ __('radio.pl_types_campaign') }}"
         data-msg-il-selected-one="{{ trans_choice('radio.pl_selected_count', 1, ['count' => ':count']) }}"
         data-msg-il-selected-many="{{ trans_choice('radio.pl_selected_count', 2, ['count' => ':count']) }}"
         data-msg-il-all-one="{{ trans_choice('radio.pl_interleave_source_all', 1, ['count' => ':count', 'folder' => ':folder']) }}"
         data-msg-il-all-many="{{ trans_choice('radio.pl_interleave_source_all', 2, ['count' => ':count', 'folder' => ':folder']) }}"
         data-msg-il-none="{{ __('radio.pl_interleave_source_none') }}"
         data-msg-il-result-one="{{ trans_choice('radio.pl_interleave_result', 1, ['count' => ':count']) }}"
         data-msg-il-result-many="{{ trans_choice('radio.pl_interleave_result', 2, ['count' => ':count']) }}">

        <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__acoes">
                    <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>
        </section>

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

        <div class="pled__grid">

            <section class="sec pled__pane">
                <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') }}" data-tip="{{ __('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>
                    <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>

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

            </section>

            <section class="sec pled__pane">
                <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__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 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__thead">
                    <input type="checkbox" class="pled__all-items" aria-label="{{ __('radio.pl_select_all') }}" data-tip="{{ __('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="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>
@endsection

@include('includes/footer-novo')