@section('title', 'Playlist')
@section('head')
    <style>
        .popup-btn{
            position: fixed;
            font-size:18px;
            top: 50%;
            left: 28px;
            transform-origin: 0% 0%;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg) translateX(-50%);
            z-index: 998;
            padding: 0px 10px !important;
            font-weight: 400;
            border-radius: 5px 5px 0px 0px;
            background: #4b5563;
            border-color: #4b5563;
            color:#fff;
        }
        .popup-btn:hover{
            color:#fff;
        }
        .offcanvas{
            z-index: 999999!important;
        }
        .custom-select .selected-label{font-size:12px;}
		.checkAll{width: 1.2em; height: 1.2em;}
		
		.nav-tabs-scroll-wrap {
			position: relative;
			display: flex;
			align-items: stretch;
			overflow: hidden;
		}

		.nav-tabs-nowrap {
			flex-wrap: nowrap !important;
			overflow-x: auto;
			overflow-y: hidden;
			scroll-behavior: smooth;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			flex: 1;
			min-width: 0;
		}

		.nav-tabs-nowrap::-webkit-scrollbar {
			display: none;
		}

		.nav-tabs-arrow {
			flex-shrink: 0;
			width: 22px;
			border: none;
			background: #f8f9fa;
			color: #aaa;
			font-size: 11px;
			cursor: pointer;
			padding: 0;
			transition: color .2s, background .2s;
			border-bottom: 1px solid #dee2e6;
			z-index: 2;
		}

		.nav-tabs-arrow:hover {
			color: #555;
			background: #eee;
		}

		.nav-tabs-arrow.d-none {
			display: none !important;
		}
    </style>
    <link href="/assets/css/playlist-mobile.css?v=1.0.06" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')

<button class="btn popup-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft" aria-controls="offcanvasLeft">
    {{ __('radio.pl_table_files') }}
</button>


<div class="offcanvas offcanvas-start bg-body-extra-light" tabindex="-1" id="offcanvasLeft"  data-bs-keyboard="false" aria-labelledby="offcanvasLeftLabel">
    <button type="button" class="d-none" data-bs-dismiss="offcanvas"></button>
    <div class="offcanvas-body fs-sm">
        <div class="block block-rounded block-bordered listSongs" style="margin-bottom:10px!important;">
            <div class="nav-tabs-scroll-wrap">
				<button class="nav-tabs-arrow nav-tabs-arrow-left d-none" onclick="scrollNavTabs(-120)">
					<i class="fa fa-chevron-left"></i>
				</button>
				<ul class="nav nav-tabs nav-tabs-block align-items-center nav-tabs-nowrap" role="tablist">
					<li class="nav-item navBlock01">
						<button class="nav-link typeBtn text-md-start btnType-1 active" onclick="nav('');" id="">
							<div class="flex-grow-1 d-flex justify-content-between align-items-center">
								<div class="mb-0 text-center">
									<i class="fa fa-folder-open mus-color fa-2x pb-1"></i>
									<dt class="fw-semibold h1-info-block01">{{ __('radio.fm_tab_musics') }}</dt>
								</div>
							</div>
						</button>
					</li>
					<li class="nav-item navBlock01">
						<button class="nav-link typeBtn text-md-start btnType-2" onclick="nav('Comerciais');" id="Comerciais">
							<div class="flex-grow-1 d-flex justify-content-between align-items-center">
								<div class="mb-0 text-center">
									<i class="fa fa-folder ann-color fa-2x pb-1"></i>
									<dt class="fw-semibold h1-info-block01">{{ __('radio.fm_tab_ads') }}</dt>
								</div>
							</div>
						</button>
					</li>
					<li class="nav-item navBlock01">
						<button class="nav-link typeBtn text-md-start btnType-3" onclick="nav('Vinhetas');" id="Vinhetas">
							<div class="flex-grow-1 d-flex justify-content-between align-items-center">
								<div class="mb-0 text-center">
									<i class="fa fa-folder vin-color fa-2x pb-1"></i>
									<dt class="fw-semibold h1-info-block01">{{ __('radio.library_tab_vinhetas') }}</dt>
								</div>
							</div>
						</button>
					</li>
					<li class="nav-item navBlock01">
						<button class="nav-link typeBtn text-md-start btnType-5" onclick="nav('Podcasts');" id="Podcasts">
							<div class="flex-grow-1 d-flex justify-content-between align-items-center">
								<div class="mb-0 text-center">
									<i class="fa fa-folder pod-color fa-2x pb-1"></i>
									<dt class="fw-semibold h1-info-block01">{{ __('radio.app_mod_podcasts') }}</dt>
								</div>
							</div>
						</button>
					</li>
					<li class="nav-item navBlock01">
						<button class="nav-link typeBtn text-md-start btnType-4" onclick="nav('','','1');" id="Adicionais">
							<div class="flex-grow-1 d-flex justify-content-between align-items-center">
								<div class="mb-0 text-center">
									<i class="fa fa-plus-circle add-color fa-2x pb-1"></i>
									<dt class="fw-semibold h1-info-block01">{{ __('general.sec_additional') }}</dt>
								</div>
							</div>
						</button>
					</li>
				</ul>
				<button class="nav-tabs-arrow nav-tabs-arrow-right" onclick="scrollNavTabs(120)">
					<i class="fa fa-chevron-right"></i>
				</button>
			</div>
            <div class="block-content p-0">
                <div class="p-2 mb-0">
                    <div class="input-group">
                        <input type="text" class="form-control" id="search" placeholder="{{ __('radio.fm_search_placeholder') }}" autocomplete="off">
                        <button type="button" class="ms-2 btn rounded-pill btn-alt-info d-none clSearch" onclick="nav('','')">{{ __('radio.playlists_clear_search') }}</button>
                    </div>
                </div>
                <div class="d-flex align-items-center pt-2 pb-2 topborder">
                    <div class="flex-shrink-0 ms-2 me-1">
                        <input type="checkbox" class="form-check-input checkAll">
                    </div>
                    <div class="flex-shrink-1 ms-2">
                        <i class="fa fa-folder-open me-2"></i>
                    </div>
                    <div class="flex-shrink-2 curLoc t-overflow"><b>Músicas</b></div>

                </div>
                <input type="hidden" class="cLocation" value=""/>
                <div class="fl-manager"></div>
            </div>
        </div>

        <div class="ml-auto me-2">
            <button class="btn btn-light pl-unmark fs-sm fw-normal btn-xs mb-0 d-none" style="padding:8px 5px!important;">{{ __('radio.action_unselect') }}</button>
            <button class="btn btn-primary pl-addto fs-sm fw-normal btn-xs mb-0 d-none" style="padding:8px 5px!important;">{{ __('radio.playlists_add_to') }}</button>
            <button class="btn btn-warning pl-custom fs-sm fw-normal btn-xs" onclick="customize()" style="padding:8px 5px!important;">{{ __('radio.pl_action_interleave') }}</button>
        </div>

        <div style="left: 32%;position: absolute;bottom: 8px;" onclick="closeOffcanvas();" class="btn btn-sm btn-alt-danger">{{ __('radio.pl_close_files') }}</div>
    </div>
</div>

<div class="cont-pl mt-2">

    <div class="block mb-0">
        <div class="block-content pb-2 ps-1 pe-1 pt-1">
            <div class="form-floating mb-0 h-width">
                <input type="hidden" name="id" value="">
                <input type="text" class="form-control" id="name" name="name" autocomplete="off" onkeyup="this.value = this.value.replace(/[^a-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑA-Z0-9 \.]/g, ''); limit(this);"
                       value="{{ (Route::currentRouteName() === 'radio.playlists.u' ? $playlistData->name : '') }}">
                <label class="float-name" for="float-name">{{ __('radio.playlists_name_label') }}</label>
            </div>
            <div class="errormsg d-none text-danger animated fadeIn"></div>
        </div>
    </div>

    <div class="block m-0" style="box-shadow: none;">
        <div class="block plblock position-relative">

            <div id="list-container" class="disable-selection"  style="margin-top: 0;">
                <div class="block-items" style="margin-top: 0;">
                    <a id="ouvirRadio" onclick="stopPPlayer();" style="top: 5px;right: 20px;position: absolute;z-index: 9598;background: white;display:none;" class="btn btn-sm">
                        <i class="fa fa-stop-circle" style="font-size: 15px;line-height: 23px;"></i></a>
                    <div class="block-item block-item-archive" data-path="">
                        <div class="player-progress-bar">
                            <div class="player-progress-bar-value" style="width: 0px;"></div>
                        </div>
                        <div class="block-item-internal">
                            <div class="block-item-name" style="margin-top: -1px;margin-bottom: 1px;">&nbsp;</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex align-items-center pt-0 pb-2 border-1 border-bottom">
                <div class="flex-shrink-1 t-overflow fw-bold ms-2">{{ __('radio.pl_table_files') }}</div>

                <div class="ml-auto pe-1">
                    <div class="custom-select">
                        <input type="hidden" name="type" id="type" value="{{ (Route::currentRouteName() === 'radio.playlists.u' ? $playlistData->type : '0') }}">
                        <div class="selected-value with-icon">
                            <div class="selected-label">
							{{
								$isTemplate
								? ($playlistData->type == '1' ? __('radio.pl_mode_random') : __('radio.pl_mode_sequential'))
								: (Route::currentRouteName() === 'radio.playlists.u'
									? ($playlistData->type == '1' ? __('radio.pl_mode_random') : __('radio.pl_mode_sequential'))
									: __('radio.pl_mode_sequential'))
							}}
							</div>
                            <div class="selected-caret">
                                <i class="fa fa-caret-down"></i>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="block-content p-0">
                <ul class="list-group striped-list fl-playlist ui-sortable position-relative ui-sortable">

                </ul>
            </div>
            <div class="card-footer border-top-0 d-flex align-items-center pt-2 pb-2 ps-1 pe-1">
                <div class="d-flex align-items-center">
                    <h6 class="mb-0">{{ __('radio.pl_total_label') }} (<span id="totalpl_itens">0</span>)</h6>
                    <div class="ms-1 mb-0 fw-bold pl-total-time">00:00:00</div>
                </div>
                <div class="ml-auto mb-0 rem_d">
                    <button class="btn fs-sm fw-normal btn-xs nbr D_PRO" onclick="deleteByType('tp-addp')" style="background: #b68eff; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_HRC" onclick="deleteByType('tp-time')" style="background: #f7c99a; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_PRG" onclick="deleteByType('tp-add')" style="background: #e99af7; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_PROF" onclick="deleteByType('tp-addf')" style="background: #f79acf; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_CAM" onclick="deleteByType('tp-camp')" style="background: #7de0ce; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_COM" onclick="deleteByType('tp-com')" style="background: #F9BCB2; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_VIN" onclick="deleteByType('tp-vin')" style="background: #7dccff; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_POD" onclick="deleteByType('tp-pod')" style="background: #6C7AE0; display: none;"><i class="fa fa-times"></i></button>
                    <button class="btn fs-sm fw-normal btn-xs nbr D_MUS"  onclick="deleteByType('tp-audio')" style="background: #6cf9a5; display: none;"><i class="fa fa-times"></i></button>
                </div>

            </div>
        </div>
    </div>

    <div class="d-flex flex-wrap align-items-center" style="margin-bottom:60px">
		<div class="d-flex gap-2">
			<button type="button" class="btn btn-primary btnSavePl" onclick="createPlaylist()">{{ $isTemplate ? __('radio.playlists_templates_use') : (Route::currentRouteName() === 'radio.playlists.u' ? __('general.action_save') : __('radio.fm_btn_create')) }}</button>
			<button type="button" class="btn btn-danger" onclick="history.go(-1)">{{ __('radio.app_action_cancel') }}</button>
		</div>
		<div class="ms-auto d-flex gap-1">
			<button class="btn shuffle btn-secondary fs-sm fw-normal btn-xs">{{ __('radio.pl_action_shuffle') }}</button>
			<button class="btn btn-danger pl-rall fs-sm fw-normal btn-xs">{{ __('radio.app_action_clear') }}</button>
		</div>
	</div>

</div>




</div>

</main>


<div id="fl-player"></div>
<div id="pl-player"></div>


<div class="modal fade" id="mod-customize" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="block-header block-header-default">
                    <h3 class="block-title">{{ __('radio.pl_action_interleave') }}</h3>
                    <div class="block-options">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="block-content cont-customize">

                    <div class="mb-4 d-flex align-items-center">
                        <input type="number" min="1" max="999" class="form-control form-control-lg" id="c1" style="width:70px">
                        <span class="ms-2 me-2 fw-semibold">{{ __('radio.pl_interleave_every') }}</span>
                        <input type="number" min="1" max="999" class="form-control form-control-lg" id="c2" style="width:70px">
                        <select class="form-select ms-2" id="c_type" style="width:200px">
                            <option value="1">{{ __('radio.pl_interleave_type_all') }}</option>
                            <option value="2">{{ __('radio.pl_interleave_type_music') }}</option>
                            <option value="3">{{ __('radio.pl_interleave_type_short') }}</option>
                            <option value="4">{{ __('radio.pl_interleave_type_program') }}</option>
                            <option value="8">{{ __('radio.pl_interleave_type_podcast') }}</option>
                        </select>
                    </div>

                </div>
                <div class="block-content block-content-full text-end bg-body bl-customize">
                    <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">{{ __('radio.app_action_cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary" onclick="doCustomizePl()">{{ __('radio.pl_action_interleave') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="modal" id="modalPlMode" tabindex="-1" role="dialog" aria-labelledby="modalPlMode" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered rounded" role="document">
        <div class="modal-content">
            <div class="block block-rounded block-transparent mb-0">
                <div class="d-flex p-2 border-bottom">
                    <div class="ps-2 pt-1"><h4 class="mb-0">{{ __('radio.pl_mode_title') }}</h4></div>

                    <div class="ml-auto">
                        <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close" style="font-size:20px">
                            <i class="fa fa-fw fa-times"></i>
                        </button>
                    </div>
                </div>

                <div class="block-content block-content-full space-y-3">
                    <div class="form-check form-block optTypeMode" id="0" data-name="{{ __('radio.pl_mode_sequential') }}">
                        <input type="radio" class="form-check-input" id="type_0" name="typePl" {{ ($isTemplate ? $playlistData->type == '0' : (Route::currentRouteName() === 'radio.playlists.u' && $playlistData->type == '0' || Route::currentRouteName() === 'radio.playlists.c')) ? 'checked' : '' }}>
                        <label class="form-check-label" for="type1">
                                <span class="d-block fw-normal p-1">
                                  <span class="d-block fw-semibold mb-1">{{ __('radio.pl_mode_sequential') }}</span>
                                  <span class="d-block fs-sm fw-medium text-muted">{{ __('radio.pl_mode_sequential_desc') }}</span>
                                </span>
                        </label>
                    </div>
                    <div class="form-check form-block optTypeMode" id="1" data-name="{{ __('radio.pl_mode_random') }}">
                        <input type="radio" class="form-check-input" id="type_1" name="typePl" {{ ($isTemplate ? $playlistData->type == '1' : (Route::currentRouteName() === 'radio.playlists.u' && $playlistData->type == '1')) ? 'checked' : '' }}>
                        <label class="form-check-label" for="type2">
                            <span class="d-block fw-normal p-1">
                              <span class="d-block fw-semibold mb-1">{{ __('radio.pl_mode_random') }}</span>
                              <span class="d-block fs-sm fw-medium text-muted">{{ __('radio.pl_mode_random_desc') }}</span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/pages/bootbox.all.min.js"></script>
<script src="/assets/js/pages/hash.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
{{--<script>var file_srv = "{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}"; var file_hash = "{{ EncryptBras($streamData->port) }}"; let sumDUr = 0; var routeDo = '{{ (Route::currentRouteName() === 'radio.playlists.u' ? route('radio.playlists.u.do',$playlistData->id) : route('radio.playlists.c.do')) }}'; var hasU = {{ (Route::currentRouteName() === 'radio.playlists.u' ? '1' : '0') }}; @if(Route::currentRouteName() === 'radio.playlists.u') var idP = {{ $playlistData->id }}; @endif</script>--}}
<script>
    var file_srv = "{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}";
    var file_hash = "{{ EncryptBras($streamData->port) }}";

    @if($isTemplate && $templateData)
        @php [$templateName, $templatePort] = explode('||', $templateData); @endphp
        var template_file = "{{ $templateName }}.{{ env('BASE_SERVER_URL') }}||{{ EncryptBras((int)$templatePort) }}";
    @else
        var template_file = null;
    @endif

    let sumDUr = 0;
    var routeDo = '{{ ($isTemplate || Route::currentRouteName() !== 'radio.playlists.u') ? route('radio.playlists.c.do') : route('radio.playlists.u.do', $playlistData->id) }}';
    var hasU = {{ (Route::currentRouteName() === 'radio.playlists.u' ? '1' : '0') }};

    @if(Route::currentRouteName() === 'radio.playlists.u')
        var idP = {{ $playlistData->id }};
    @endif
	
	function scrollNavTabs(amount) {
		var el = document.querySelector('.nav-tabs-nowrap');
		el.scrollLeft += amount;
	}

	(function() {
		var el = document.querySelector('.nav-tabs-nowrap');
		if (!el) return;
		el.addEventListener('scroll', function() {
			var atStart = el.scrollLeft <= 4;
			var atEnd   = el.scrollLeft + el.clientWidth >= el.scrollWidth - 4;
			document.querySelector('.nav-tabs-arrow-left').classList.toggle('d-none', atStart);
			document.querySelector('.nav-tabs-arrow-right').classList.toggle('d-none', atEnd);
		});
		// estado inicial
		el.dispatchEvent(new Event('scroll'));
	})();
</script>
<script>
    window.LNG = Object.assign(window.LNG || {}, {
        action_cancel: @json(__('radio.app_action_cancel')),
        action_confirm: @json(__('site.action_confirm')),
        action_close: @json(__('radio.action_close')),
        playlists_clear_search: @json(__('radio.playlists_clear_search')),
        fm_empty_no_files_title: @json(__('radio.pl_js_no_files_title')),
        fm_empty_no_files_desc: @json(__('radio.pl_js_no_files_desc')),
        fm_empty_open_library: @json(__('radio.pl_js_open_library')),
        fm_no_audio_found: @json(__('radio.pl_js_no_audio_found')),
        fm_search_no_results: @json(__('radio.pl_js_search_no_results')),
        pl_clear_confirm_title: @json(__('radio.pl_js_clear_title')),
        pl_clear_confirm_text: @json(__('radio.pl_js_clear_text')),
        pl_shuffle_confirm_title: @json(__('radio.pl_js_shuffle_title')),
        pl_shuffle_confirm_text: @json(__('radio.pl_js_shuffle_text')),
        pl_interleave_need_audios: @json(__('radio.pl_js_interleave_need_audios')),
        pl_fill_all_fields: @json(__('radio.pl_js_fill_all_fields')),
        pl_interleaving: @json(__('radio.pl_js_interleaving')),
        pl_type_audios: @json(__('radio.pl_js_type_audios')),
        pl_type_musics: @json(__('radio.pl_js_type_musics')),
        pl_type_shorts: @json(__('radio.pl_js_type_shorts')),
        pl_type_programs: @json(__('radio.pl_js_type_programs')),
        pl_type_podcasts: @json(__('radio.pl_js_type_podcasts')),
        pl_warning_title: @json(__('radio.pl_js_warning_title')),
        pl_interleave_none: @json(__('radio.pl_js_interleave_none')),
        pl_field_required: @json(__('radio.pl_js_field_required')),
        pl_min_one_file: @json(__('radio.pl_js_min_one_file')),
    });
</script>
<script src="/assets/js/pages/playlist-mobile.js?v=1.0.10"></script>
</body>
</html>