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

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

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

    $areas = [
        '' => ['fa-music', __('radio.fm_tab_musics'), __('radio.fm_area_musics_help')],
        'Comerciais' => ['fa-bullhorn', __('radio.fm_tab_ads'), __('radio.fm_area_ads_help')],
        'Vinhetas' => ['fa-wave-square', __('radio.library_tab_vinhetas'), __('radio.fm_area_vinhetas_help')],
        'Podcasts' => ['fa-podcast', __('radio.app_mod_podcasts'), __('radio.fm_area_podcasts_help')],
    ];
@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_2_sub_1') }}</h1>
            <p class="page-sub">{{ __('radio.fm_page_sub') }}</p>
        </div>
    </header>

    <div class="fman"
         data-srv="{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL', 'brascast.com') }}"
         data-hash="{{ EncryptBras($streamData->port) }}"
         data-port="{{ $streamData->port }}"
         data-storage="{{ config('radio.cover_url') }}"
         data-url-inject="{{ route('radio.file-manager.r.inject') }}"
         data-url-cover="{{ route('radio.file-manager.r.do') }}"
         data-url-embed="{{ route('radio.file-manager.r.embed') }}"
         data-readonly="Podcasts"
         data-msg-musics="{{ __('radio.fm_tab_musics') }}"
         data-msg-sending="{{ __('radio.fm_upload_sending') }}"
         data-msg-leave="{{ __('radio.fm_upload_leave') }}"
         data-msg-space="{{ __('radio.fm_upload_no_space') }}"
         data-msg-listen="{{ __('radio.fm_action_listen') }}"
         data-msg-stop="{{ __('radio.fm_action_stop') }}"
         data-msg-rename="{{ __('radio.fm_action_rename') }}"
         data-msg-remove="{{ __('radio.fm_action_remove') }}"
         data-msg-no-name="{{ __('radio.fm_no_name') }}"
         data-msg-more="{{ __('radio.fm_more_actions') }}"
         data-msg-open="{{ __('radio.fm_action_open') }}"
         data-msg-autodj="{{ __('radio.playlists_action_play_autodj') }}"
         data-msg-cover="{{ __('radio.fm_change_cover') }}"
         data-msg-player="{{ __('radio.fm_generate_player') }}"
         data-msg-download="{{ __('radio.library_download') }}"
         data-msg-empty-title="{{ __('radio.fm_empty_folder') }}"
         data-msg-empty-question="{{ __('radio.fm_empty_folder_question') }}"
         data-msg-empty-none="{{ __('radio.fm_no_audio_found') }}"
         data-msg-empty-send="{{ __('radio.fm_send_files') }}"
         data-msg-empty-folder="{{ __('radio.fm_empty_create_folder') }}"
         data-msg-empty-help="{{ __('radio.fm_empty_help') }}"
         data-msg-empty-link="{{ __('radio.app_ads_tips_link') }}"
         data-msg-search-empty="{{ __('radio.fm_search_empty') }}"
         data-msg-search-cancel="{{ __('radio.fm_search_cancel') }}"
         data-msg-confirm-file="{{ __('radio.fm_confirm_remove_file') }}"
         data-msg-confirm-file-warn="{{ __('radio.fm_confirm_remove_file_warning') }}"
         data-msg-confirm-folder="{{ __('radio.fm_confirm_remove_folder') }}"
         data-msg-confirm-folder-warn="{{ __('radio.fm_confirm_remove_folder_warning') }}"
         data-msg-confirm-files="{{ __('radio.fm_confirm_remove_files') }}"
         data-msg-confirm-files-warn="{{ __('radio.fm_confirm_remove_files_warning') }}"
         data-msg-inject-ok="{{ __('radio.fm_inject_success') }}"
         data-msg-cover-ok="{{ __('radio.fm_cover_upload_success') }}"
         data-msg-cover-error="{{ __('radio.fm_cover_error_title') }}"
         data-msg-cover-format="{{ __('radio.fm_cover_err_format') }}"
         data-msg-cover-size="{{ __('radio.fm_cover_err_size', ['max' => 5]) }}"
         data-msg-cover-broken="{{ __('radio.fm_cover_err_broken') }}"
         data-cover-formats="{{ implode(',', config('radio.cover_formats')) }}"
         data-msg-error="{{ __('radio.fm_error') }}"
         data-msg-folders-one="{{ trans_choice('radio.fm_counter_folders', 1, ['count' => ':count']) }}"
         data-msg-folders-many="{{ trans_choice('radio.fm_counter_folders', 2, ['count' => ':count']) }}"
         data-msg-files-one="{{ trans_choice('radio.fm_counter_files', 1, ['count' => ':count']) }}"
         data-msg-files-many="{{ trans_choice('radio.fm_counter_files', 2, ['count' => ':count']) }}"
         data-msg-folder-required="{{ __('radio.fm_folder_name_required') }}"
         data-msg-play="{{ __('radio.pl_player_play') }}"
         data-msg-pause="{{ __('radio.pl_player_pause') }}">

        <nav class="fman__areas">
            @foreach($areas as $chave => $area)
                <button class="fman__area {{ $chave === '' ? 'is-on' : '' }}" type="button" data-area="{{ $chave }}">
                    <i class="fa-solid {{ $area[0] }}"></i>
                    <span class="fman__area-name">{{ $area[1] }}</span>
                    <span class="fman__area-help">{{ $area[2] }}</span>
                </button>
            @endforeach
        </nav>

        <div class="fman__cols">
            {{-- o cartao so aparece quando o envio comeca, pelo botao da lista --}}
            <section class="sec fman__send" data-send hidden>
                <div class="sec__head fman__send-head">
                    <h2 class="sec__title"><i class="fa-solid fa-cloud-arrow-up"></i> {{ __('radio.fm_upload_title') }}</h2>

                    <button class="fman__send-close" type="button" data-send-close aria-label="{{ __('site.btn_cancel') }}">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <div class="sec__body">
                    <p class="fman__dest" data-dest-box>
                        <i class="fa-solid fa-folder-open"></i>
                        <span>{{ __('radio.fm_uploading_to_folder') }} <b data-dest>{{ __('radio.fm_tab_musics') }}</b></span>
                    </p>

                    <button class="fman__drop" type="button" data-drop>
                        <i class="fa-solid fa-file-audio"></i>
                        <span class="fman__drop-title">{{ __('radio.fm_dropzone_title') }}</span>
                        <span class="fman__drop-note">{{ __('radio.fm_upload_formats') }}</span>
                        <span class="fman__drop-btn">{{ __('radio.fm_send_files') }}</span>
                    </button>

                    <input class="fman__file" type="file" accept=".mp3,audio/mpeg" multiple data-input hidden>

                    <ul class="fman__queue" data-queue></ul>
                </div>
            </section>

            <section class="sec fman__list">
                <div class="sec__head fman__toolbar">
                    <label class="fman__search">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input class="input" type="search" data-search placeholder="{{ __('radio.fm_search_placeholder') }}" autocomplete="off">
                    </label>

                    <div class="fman__tools">
                        <button class="btn btn--primary btn--sm" type="button" data-send-open>
                            <i class="fa-solid fa-cloud-arrow-up"></i> {{ __('radio.fm_upload_title') }}
                        </button>

                        <button class="btn btn--ghost btn--sm" type="button" data-new-folder>
                            <i class="fa-solid fa-folder-plus"></i> {{ __('radio.fm_new_folder') }}
                        </button>

                        <button class="btn btn--danger btn--sm" type="button" data-remove-selected disabled>
                            <i class="fa-solid fa-trash"></i> {{ __('site.btn_remselect') }}
                        </button>
                    </div>
                </div>

                <p class="fman__lock" data-lock hidden>
                    <i class="fa-solid fa-lock"></i>
                    <span>{{ __('radio.fm_readonly_note') }}</span>
                </p>

                <div class="fman__path">
                    <label class="fman__check">
                        <input type="checkbox" data-check-all>
                        <span class="sr-only">{{ __('radio.fm_select_all') }}</span>
                    </label>

                    <nav class="fman__crumbs" data-crumbs></nav>

                    <span class="fman__count" data-count></span>
                </div>

                <div class="fman__body">
                    <ul class="fman__items" data-items></ul>

                    <div class="fman__loading" data-loading hidden>
                        @include('includes.spinner')
                    </div>
                </div>

                <div class="fman__player" data-player hidden>
                    <p class="fman__player-track">
                        <i class="fa-solid fa-music"></i>
                        <span data-player-name></span>
                    </p>

                    <div class="fman__player-ctrl">
                        <button class="fman__player-skip" type="button" data-player-back
                                aria-label="{{ __('radio.fm_player_back') }}" title="{{ __('radio.fm_player_back') }}">
                            <svg class="fman__skip-ic" viewBox="0 0 56 56" fill="currentColor" aria-hidden="true" focusable="false"><path d="M 27.9999 54.4024 C 41.0546 54.4024 51.9063 43.5742 51.9063 30.4961 C 51.9063 18.9649 43.4687 9.1914 32.5234 7.0351 L 32.5234 3.7070 C 32.5234 2.0430 31.3749 1.5976 30.0858 2.5117 L 22.6093 7.7383 C 21.5546 8.4883 21.5312 9.6133 22.6093 10.3867 L 30.0624 15.6367 C 31.3749 16.5742 32.5234 16.1289 32.5234 14.4414 L 32.5234 11.0898 C 41.3827 13.1055 47.8983 21.0039 47.8983 30.4961 C 47.8983 41.5586 39.0390 50.4180 27.9999 50.4180 C 16.9374 50.4180 8.0546 41.5586 8.0780 30.4961 C 8.1014 23.8398 11.3358 17.9570 16.3280 14.3945 C 17.2890 13.6680 17.5936 12.5664 16.9843 11.5820 C 16.4218 10.6211 15.1327 10.3633 14.1014 11.1602 C 8.0546 15.5430 4.0937 22.6211 4.0937 30.4961 C 4.0937 43.5742 14.9218 54.4024 27.9999 54.4024 Z M 21.0390 40.1055 C 21.9530 40.1055 22.5155 39.4727 22.5155 38.4883 L 22.5155 23.6992 C 22.5155 22.5039 21.9296 21.8711 20.8749 21.8711 C 20.2187 21.8711 19.7499 22.0820 18.9062 22.6445 L 15.6952 24.8242 C 15.1562 25.2227 14.8983 25.6445 14.8983 26.1836 C 14.8983 26.9570 15.5077 27.6133 16.2577 27.6133 C 16.7265 27.6133 16.9609 27.5195 17.3827 27.1680 L 19.5858 25.5508 L 19.5858 38.4883 C 19.5858 39.4492 20.1483 40.1055 21.0390 40.1055 Z M 32.9452 40.3867 C 36.8358 40.3867 39.3905 37.8789 39.3905 34.1055 C 39.3905 30.6602 37.0702 28.1992 33.7421 28.1992 C 32.3358 28.1992 30.8358 28.8320 30.1562 29.8867 L 30.5546 24.8242 L 37.5624 24.8242 C 38.2655 24.8242 38.8514 24.2617 38.8514 23.4649 C 38.8514 22.6680 38.2655 22.1524 37.5624 22.1524 L 30.0858 22.1524 C 28.8436 22.1524 28.1640 22.8555 28.0702 24.0976 L 27.5546 30.8476 C 27.4609 32.0195 28.0702 32.5820 29.1014 32.5820 C 29.8749 32.5820 30.2030 32.4414 30.8593 31.9258 C 31.7733 31.1055 32.4765 30.7773 33.4140 30.7773 C 35.2421 30.7773 36.4609 32.1133 36.4609 34.1524 C 36.4609 36.2149 35.0077 37.7149 33.0858 37.7149 C 31.6796 37.7149 30.5077 36.9180 29.8983 35.6992 C 29.5468 35.0898 29.1249 34.7617 28.5390 34.7617 C 27.7655 34.7617 27.2265 35.3242 27.2265 36.1211 C 27.2265 36.4492 27.2968 36.7539 27.4140 37.0586 C 28.0468 38.7461 30.1093 40.3867 32.9452 40.3867 Z"></path></svg>
                        </button>

                        <button class="fman__player-btn" type="button" data-player-toggle
                                aria-label="{{ __('radio.pl_player_pause') }}" title="{{ __('radio.pl_player_pause') }}">
                            <i class="fa-solid fa-pause"></i>
                        </button>

                        <button class="fman__player-skip" type="button" data-player-fwd
                                aria-label="{{ __('radio.fm_player_forward') }}" title="{{ __('radio.fm_player_forward') }}">
                            <svg class="fman__skip-ic" viewBox="0 0 56 56" fill="currentColor" aria-hidden="true" focusable="false"><path d="M 27.9999 54.4024 C 41.0546 54.4024 51.9063 43.5742 51.9063 30.4961 C 51.9063 22.6211 47.9219 15.5430 41.8983 11.1602 C 40.8671 10.3633 39.5780 10.6211 38.9921 11.5820 C 38.4062 12.5664 38.7109 13.6680 39.6483 14.3945 C 44.6405 17.9570 47.8983 23.8398 47.9219 30.4961 C 47.9454 41.5586 39.0390 50.4180 27.9999 50.4180 C 16.9374 50.4180 8.1014 41.5586 8.1014 30.4961 C 8.1014 21.0039 14.6171 13.1055 23.4765 11.0898 L 23.4765 14.4649 C 23.4765 16.1289 24.6249 16.5742 25.8905 15.6602 L 33.3905 10.4102 C 34.4452 9.6836 34.4687 8.5586 33.3905 7.7851 L 25.9140 2.5351 C 24.6249 1.5976 23.4765 2.0430 23.4765 3.7305 L 23.4765 7.0351 C 12.5077 9.1680 4.0937 18.9649 4.0937 30.4961 C 4.0937 43.5742 14.9218 54.4024 27.9999 54.4024 Z M 21.0390 40.1055 C 21.9530 40.1055 22.5155 39.4727 22.5155 38.4883 L 22.5155 23.6992 C 22.5155 22.5039 21.9296 21.8711 20.8749 21.8711 C 20.2187 21.8711 19.7499 22.0820 18.9062 22.6445 L 15.6952 24.8242 C 15.1562 25.2227 14.8983 25.6445 14.8983 26.1836 C 14.8983 26.9570 15.5077 27.6133 16.2577 27.6133 C 16.7265 27.6133 16.9609 27.5195 17.3827 27.1680 L 19.5858 25.5508 L 19.5858 38.4883 C 19.5858 39.4492 20.1483 40.1055 21.0390 40.1055 Z M 32.9452 40.3867 C 36.8358 40.3867 39.3905 37.8789 39.3905 34.1055 C 39.3905 30.6602 37.0702 28.1992 33.7421 28.1992 C 32.3358 28.1992 30.8358 28.8320 30.1562 29.8867 L 30.5546 24.8242 L 37.5624 24.8242 C 38.2655 24.8242 38.8514 24.2617 38.8514 23.4649 C 38.8514 22.6680 38.2655 22.1524 37.5624 22.1524 L 30.0858 22.1524 C 28.8436 22.1524 28.1640 22.8555 28.0702 24.0976 L 27.5546 30.8476 C 27.4609 32.0195 28.0702 32.5820 29.1014 32.5820 C 29.8749 32.5820 30.2030 32.4414 30.8593 31.9258 C 31.7733 31.1055 32.4765 30.7773 33.4140 30.7773 C 35.2421 30.7773 36.4609 32.1133 36.4609 34.1524 C 36.4609 36.2149 35.0077 37.7149 33.0858 37.7149 C 31.6796 37.7149 30.5077 36.9180 29.8983 35.6992 C 29.5468 35.0898 29.1249 34.7617 28.5390 34.7617 C 27.7655 34.7617 27.2265 35.3242 27.2265 36.1211 C 27.2265 36.4492 27.2968 36.7539 27.4140 37.0586 C 28.0468 38.7461 30.1093 40.3867 32.9452 40.3867 Z"></path></svg>
                        </button>
                    </div>

                    <span class="fman__player-time" data-player-time>00:00</span>

                    <input class="fman__player-seek" type="range" min="0" max="1000" value="0" disabled
                           data-player-seek aria-label="{{ __('radio.pl_player_seek') }}">

                    <span class="fman__player-total" data-player-total>00:00</span>

                    <label class="fman__player-vol" title="{{ __('radio.fm_player_volume') }}">
                        <i class="fa-solid fa-volume-high" data-player-vol-ic></i>
                        <input type="range" min="0" max="100" value="100"
                               data-player-vol aria-label="{{ __('radio.fm_player_volume') }}">
                    </label>

                    <button class="fman__player-btn fman__player-close" type="button" data-player-stop
                            aria-label="{{ __('radio.pl_player_close') }}" title="{{ __('radio.pl_player_close') }}">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </section>
        </div>

    <div class="modal fmodal" data-modal-folder hidden>
        <div class="modal__card" role="dialog" aria-modal="true">
            <h2 class="modal__title" data-folder-title>{{ __('radio.fm_modal_new_folder_title') }}</h2>

            <label class="field">
                <span class="field__label">{{ __('radio.fm_folder_name') }}</span>
                <input class="input" type="text" data-folder-name autocomplete="off" maxlength="60">
            </label>

            <p class="fmodal__hint" data-folder-hint hidden>{{ __('radio.fm_rename_warning') }}</p>
            <p class="fmodal__error" data-folder-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-folder-save>
                    @include('includes.spinner')
                    <span data-folder-action>{{ __('radio.fm_btn_create') }}</span>
                </button>
            </div>
        </div>
    </div>

    <div class="modal fmodal cvmodal" data-modal-cover hidden>
        <div class="modal__card" role="dialog" aria-modal="true">
            <h2 class="modal__title">{{ __('radio.fm_cover_title') }}</h2>

            <p class="cvmodal__sub" data-cover-name></p>

            <label class="cover" data-cover-drop>
                <img src="/assets/img/cover.jpg" alt="" data-cover-preview>

                <span class="cover__veil">
                    <i class="fa-solid fa-image"></i>
                    <span>{{ __('radio.fm_cover_choose') }}</span>
                </span>

                <input type="file" accept="{{ collect(config('radio.cover_formats'))->map(fn ($f) => '.' . $f)->implode(',') }}" data-cover-input hidden>
            </label>

            <p class="cover__file" data-cover-file hidden>
                <i class="fa-regular fa-circle-check"></i>
                <span data-cover-file-text></span>
            </p>

            <ul class="cvmodal__specs">
                <li data-cover-tip>
                    <i class="fa-solid fa-arrow-up-from-bracket"></i>
                    <span>{{ __('radio.fm_cover_drop') }}</span>
                </li>
                <li>
                    <i class="fa-regular fa-image"></i>
                    <span>{{ __('radio.fm_cover_specs', ['list' => strtoupper(implode(', ', config('radio.cover_formats')))]) }}</span>
                </li>
                <li>
                    <i class="fa-regular fa-circle-question"></i>
                    <span>{{ __('radio.fm_cover_default_note') }}</span>
                </li>
            </ul>

            <p class="cvmodal__error" data-cover-error hidden>
                <i class="fa-solid fa-circle-exclamation"></i>
                <span data-cover-error-text></span>
            </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-cover-save disabled>
                    @include('includes.spinner')
                    {{ __('site.action_save') }}
                </button>
            </div>
        </div>
    </div>

    <div class="modal fmodal" data-modal-player hidden>
        <div class="modal__card" role="dialog" aria-modal="true">
            <h2 class="modal__title" data-player-title></h2>

            <div class="fmodal__player" data-player-box></div>

            <label class="field">
                <span class="field__label">{{ __('radio.fm_embed_code') }}</span>
                <textarea class="input fmodal__code" rows="3" readonly data-player-code onclick="this.select()"></textarea>
            </label>

            <div class="modal__foot">
                <button class="btn btn--ghost" type="button" data-close>{{ __('general.action_close') }}</button>
            </div>
        </div>
    </div>

    </div>

</main>

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

@include('includes/footer-novo')