@section('title', __('radio.home_title'))
@section('head')
    <style>
        .bar {
            height: 3px;
            width: 100%;
            margin-top: -1px;
        }
        .in {
            animation: fill 25s linear 1;
            height: 100%;
            background-color: #ffffff;

        }
        @keyframes fill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }



        .slider-color {
            -webkit-appearance: none;
            width: 100%;
            height: 13px;
            border-radius: 5px;
            background: #dbdbdb;
            outline: none;
            opacity:1;
            -webkit-transition: opacity .15s ease-in-out;
            transition: opacity .15s ease-in-out;
        }
        .slider-color:hover {
            opacity:1;
        }
        .slider-color::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #239e76;
            cursor: pointer;
        }
        .slider-color::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border: 0;
            border-radius: 50%;
            background: #239e76;
            cursor: pointer;
        }


        @-webkit-keyframes blinking {
            0% { opacity: 1.0; }
            70% { opacity: 0.4; }
            100% { opacity: 1.0; }
        }
        .blink{
            color:#239E76;
            animation: blinking 1.5s linear infinite;
        }
    </style>
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.home_h1') }}
                    </h1>
                </div>
            </div>
        </div>
    </div>


    <div class="row">

        <div class="col-md-4">
            <div class="block block-rounded bg-primary text-white mb-3">
                <div class="block-content text-center p-1">

                    <div class="bar">
                        <div class="in" id="progress-bar"></div>
                    </div>
                    <div class="float-end me-2"><i class="fa fa-refresh text-white clickable refCur"></i></div>
                    <div id="currentListeners">
                        <h1 class="text-white pt-2 mb-0 ps-4">0</h1><h6 class="text-white pt-1 mb-3">...</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">

            <div class="block block-rounded">
                <div class="block-content p-0">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0 me-2">
                            <img src="/assets/img/cover.jpg" class="plCover" width="100" height="100">
                        </div>
                        <div class="flex-shrink-1 me-2">
                            <i class="fa fa-3x fa-fw fa-circle-play clickable icopl player-radio-play d-block"></i>
                            <i class="fa fa-3x fa-fw fa-circle-stop clickable icopl player-radio-pause d-none"></i>
                        </div>
                        <div class="flex-grow-2 overflow-hidden curMusic d-none d-md-block">
                            <div class="fw-semibold t-overflow playerCurrentTitle">{{ __('radio.home_player_current') }}</div>
                            <div class="fs-sm t-overflow playerCurrent me-3">...</div>
                        </div>
                        <div class="flex-shrink-3 ml-auto me-3">
                            <i class="fa icon-volume fa-volume-high clickable"></i> <input id="volumeSlider" type="range" min="0" max="100" value="100" class="slider-color" style="max-width:97px;">
                        </div>
                    </div>
                    <audio width="0px" height="0px" id="html5pl" preload="none">
                        <source id="srcP" src="https://{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL') }}:{{ $streamData->port }}/live">
                    </audio>
                </div>
            </div>




        </div>

    </div>

	@if($siteData->stream_server == 'hts033' || $siteData->stream_server == 'hts077')
        <div class="row">
		<div class="col-md-12">
			<div class="alert alert-warning">{{ __('radio.home_maintenance_notice_1') }}
			<br>{{ __('radio.home_maintenance_notice_2') }}</div>
		</div>
		</div>
	@endif
	
	<div class="row">
        <div class="col-lg-7 col-sm-12">


            <div class="block block-rounded infoBlock">
                <ul class="nav nav-tabs nav-tabs-block align-items-center" role="tablist">
                    <li class="nav-item d-none navRelay">
                        <button class="nav-link text-md-start" id="btn-block03-tab" data-bs-toggle="tab" data-bs-target="#block03-tab" role="tab" aria-controls="block03-tab" aria-selected="true">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <i class="fa fa-circle blink"></i>
                                </div>
                                <div class="mb-0">
                                    <dt class="fs-6 fw-semibold">{{ __('radio.home_block_item_relay') }}</dt>
                                    <span class="fw-medium fs-xs fw-medium text-muted mb-0">{{ __('radio.home_block_item_type_4') }}</span>
                                </div>
                            </div>
                        </button>
                    </li>
                    <li class="nav-item navBlock01">
                        <button class="nav-link text-md-start active" id="btn-block01-tab" data-bs-toggle="tab" data-bs-target="#block01-tab" role="tab" aria-controls="block01-tab" aria-selected="true">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <i class="fa fa-circle icon-info-block01"></i>
                                </div>
                                <div class="mb-0">
                                        <dt class="fs-6 fw-semibold h1-info-block01">...</dt>
                                        <span class="fw-medium fs-xs fw-medium text-muted mb-0 h2-info-block01">...</span>
                                </div>
                            </div>
                        </button>
                    </li>
                    <li class="nav-item navBlock02">
                        <button class="nav-link text-md-start" id="btn-block02-tab" data-bs-toggle="tab" data-bs-target="#block02-tab" role="tab" aria-controls="block02-tab" aria-selected="true">
                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                <div class="me-3">
                                    <i class="fa fa-circle icon-info-block02"></i>
                                </div>
                                <div class="mb-0">
                                    <dt class="fs-6 fw-semibold h1-info-block02">...</dt>
                                    <span class="fw-medium fs-xs fw-medium text-muted mb-0 h2-info-block02">...</span>
                                </div>
                            </div>
                        </button>
                    </li>

                    <li class="nav-item ml-auto me-4 clickable"><i class="fa fa-refresh refInfoBlock"></i></li>
                </ul>

                <div class="block-content tab-content p-0">
                    <div class="tab-pane active" id="block01-tab" role="tabpanel" aria-labelledby="block01-tab">
                        <div class="block mb-0 bg-warning-light text-center infoSecPlan d-none">
                            <div class="block-content pb-1 pt-2">
                                <p class="mb-0">{{ __('radio.home_block_item_autodj_msg') }}</p>
                            </div>
                        </div>

                        <div class="content-block01"></div>

                    </div>

                    <div class="tab-pane" id="block02-tab" role="tabpanel" aria-labelledby="block02-tab">

                        <div class="content-block02"></div>

                    </div>

                    <div class="tab-pane" id="block03-tab" role="tabpanel" aria-labelledby="block03-tab">

                        <div class="content-block03"></div>

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

        </div>


        <div class="col-lg-5 col-sm-12">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title hupper"><i class="fa fa-fw fa-border-all"></i> {{ __('radio.home_blockinfo_title') }}</h3>
                </div>
                <div class="block-content p-0 ps-3 pe-3 pb-3">
                    <div class="flex-grow-1 align-self-center">
                        <div class="row">
                            <div class="col-6">
                                <div class="mt-3">
                                    <b class="text-muted mb-2 d-block">{{ __('radio.home_blockinfo_item_1') }} <b class="float-end fa-xs pdspace d-none d-xl-block">{{ formatBytes($streamData->plan_space_used) }} / {{ formatBytes($streamData->plan_space) }}</b></b>
                                    <div class="progress progress-bar-rounded progress-bar-lg m2-2">
                                        <div class="progress-bar bg-primary" style="width:{{ round(($streamData->plan_space_used / $streamData->plan_space) * 100) }}%;" role="progressbar"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mt-3 d-grid">
                                    <b class="text-muted mb-2 d-block">{{ __('radio.home_blockinfo_item_2') }}</b>
                                    <span class="text-small t-overflow">
                                        <a href="https://{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL','brascast.com') }}:{{ $streamData->port }}/live" target="_blank">
                                            https://{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL','brascast.com') }}:{{ $streamData->port }}/live <i class="fa fa-external-link d-none d-lg-inline"></i>
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-6">
                                <div class="mt-3">
                                    <b class="text-muted mb-2 d-block">{{ __('radio.home_blockinfo_item_3') }}</b>
                                    <span>{{ $streamData->plan_bitrate }} kbps</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mt-3">
                                    <b class="text-muted mb-2 d-block">{{ __('radio.home_blockinfo_item_4') }}</b>
                                    <span>{{ ($streamData->plan_listeners == '999999' || $streamData->plan_listeners == '0' ? 'Ilimitados' : $streamData->plan_listeners) }}</span>
                                </div>
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-6">
                                <div class="mt-3">
                                    <b class="text-muted mb-2 d-block">{{ __('radio.home_blockinfo_item_5') }}</b>
                                    <span>{{ $playlists->count() }}</span>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="mt-3">
                                    <b class="text-muted mb-2 d-block">{{ __('radio.home_blockinfo_item_6') }}</b>
                                    <span>{{ $schedules->count() }}</span>
                                </div>
                            </div>
                        </div>

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

			<div class="row g-2 align-items-stretch">
				<div class="col-6 d-flex">
					@include('radio.includes.calendarWidget')
				</div>
				<div class="col-6 d-flex">
					<a href="{{ route('radio.library.r') }}"
					   class="block block-rounded js-appear-enabled bg-primary text-white w-100 mb-0 d-flex align-items-center justify-content-center"
					   data-toggle="appear"
					   style="min-height:100%">
						<div class="block-content block-content-full w-100">
							<div class="py-0 text-center">
								<i class="fa fa-4x fa-box-open"></i>
								<div class="fs-4 fw-semibold pt-3 mb-0" style="font-size:18px">{{ __('radio.home_blockinfo_library_h1') }}</div>
								<p class="fw-normal mb-2 pt-1" style="font-size:14px">{{ __('radio.home_blockinfo_library_h2') }}</p>
								<div class="d-inline-block px-3 py-2 rounded-3 fs-xs fw-semibold text-white bg-outline-light">
									{{ __('radio.home_blockinfo_library_btn') }}
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>

        </div>
    </div>





</div>

</div>

</main>


@include('includes/footer')


<div class="modal fade" id="modal-changePlaylist" tabindex="-1" role="dialog" aria-labelledby="modal-changePlaylist" aria-hidden="true">
    <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.home_blockinfo_changepl_h1') }}</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 fs-sm pb-3">

					<div class="mb-2">
					<select class="form-select selectedPlaylist">
                        <option value="">{{ __('radio.home_blockinfo_changepl_option') }}</option>
                        @foreach($playlists as $playlist)
                            <option value="{{ $playlist->id }}">{{ $playlist->name }}</option>
                        @endforeach
                    </select>
					</div>
					
					<div class="mb-0">
						<label class="form-label" for="skipCurrent">{{ __('radio.home_changepl_start_label') }}</label>
						<select class="form-select skipCurrent" id="skipCurrent">
							<option value="1">{{ __('radio.home_changepl_start_now') }}</option>
							<option value="2">{{ __('radio.home_changepl_start_queue') }}</option>
						</select>
					</div>
					
                </div>
                <div class="block-content block-content-full text-end bg-body">
                    <button type="button" class="btn btn-sm btn-alt-secondary me-1" data-bs-dismiss="modal">{{ __('radio.home_blockinfo_changepl_btn_cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-primary changePlaylist disabled AutoDJControl-change" data-bs-dismiss="modal">{{ __('radio.home_blockinfo_changepl_btn_confirm') }}</button>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script>var LNG_plTitle = '{{ __('radio.home_player_current') }}'; var LNG_plTitleOff = '{{ __('radio.home_js_player_offline') }}';</script>
<script>window.LNG = Object.assign(window.LNG || {}, {
    autodj_stop_confirm: @json(__('radio.home_js_autodj_stop_confirm')),
    action_confirm: @json(__('site.action_confirm')),
    action_cancel: @json(__('radio.app_action_cancel'))
});</script>
<script src="/assets/js/pages/radio.js?v=1.0.18"></script>
<script>
    listenersNow();
    infoBroadcast();
    playerCurrent();
    getCover();
    var srcstream = "https://{{ $getServerDetails->name }}.{{ env('BASE_SERVER_URL','brascast.com') }}:{{ $streamData->port }}/live";
</script>
<script src="/assets/js/pages/player-radio.js"></script>
<script src="/assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js"></script>
</body>
</html>