@section('title', __('site.page_customize_title'))
@section('head')
    <link href="/assets/customize/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/jquery-ui.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/jquery-ui.structure.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/colorpicker.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/select2.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/jquery.fileupload.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/theme-customize.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/assets/customize/css/theme-main.css" media="screen" rel="stylesheet" type="text/css">
    <link href="{{ route('cssTheme',$siteData->id) }}" media="screen" rel="stylesheet" type="text/css">
@endsection
@include('includes/header')
@include('includes/topSite')
<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">
                        {{ __('site.page_customize_title') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_6') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.menu_item_6_sub_1') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    @if($isMobile == 'true')

        <div class="content content-full text-center mt-5">
            <div class="py-4">
                <h1 class="display-4 fw-bolder text-default">
                    <i class="far fa-face-frown"></i>  {{ __('site.customize_mobile_error_title') }}
                </h1>
                <h2 class="h4 fw-normal text-muted mb-5">
                    {{ __('site.customize_mobile_only_desktop') }}
                </h2>
            </div>
        </div>

    @else
        <section class="">
            <script type="text/javascript">
                var AcceptReduced = {"3":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,16,17,19,20,22,23,24,25]};
            </script>

            <div id="theme-container-overlay" class="">
                <div class="inner-content">
                    <div class="success-message">
                        <i class="fa fa-check-circle" style="font-size: 26px;"></i><br />
                        {{ __('site.customize_saved_success') }}<br /><br />
                        <a href="#" class="btn btn-alt-secondary" style="text-shadow: none;">OK</a>
                    </div>
                    <div class="loading-message">
                        <i class="fa fa-refresh fa-spin" style="font-size: 26px;"></i><br />{{ __('site.customize_saving') }}            </div>
                </div>
            </div>




            <div id="theme-container">
                <div id="theme-control-bar">
                    <div id="theme-styles" class="block block-rounded">
                        <div class="block-header border-bottom">
                            <h3 class="block-title mb-0">{{ __('site.customize_style_title') }}</h3>
                        </div>
                        <div class="block-content p-2">
                            <div class="form-group mb-2 " data-primary="1" data-background=".bg-color-1" data-border=".border-color-1" data-color=".color-1">
                                <label>{{ __('site.customize_color_background') }}</label>
                                <div class="color-input"><i data-background="{{ $siteData->p1 }}" style="background: {{ $siteData->p1 }};"></i></div>
                            </div>
                            <div class="form-group mb-2" data-background=".bg-color-2" data-border=".border-color-2" data-color=".color-2">
                                <label>{{ __('site.customize_color_titles_texts') }}</label>
                                <div class="color-input"><i data-background="{{ $siteData->p2 }}" style="background: {{ $siteData->p2 }};"></i></div>
                            </div>
                            <div class="form-group mb-2" data-background=".bg-color-3" data-border=".border-color-3" data-color=".color-3">
                                <label>{{ __('site.customize_color_buttons_details') }}</label>
                                <div class="color-input"><i data-background="{{ $siteData->p3 }}" style="background: {{ $siteData->p3 }};"></i></div>
                            </div>
							<div class="form-group mb-2" data-background=".bg-color-4" data-border=".border-color-4" data-color=".color-4">
                                <label>{{ __('site.customize_color_4') }}</label>
                                <div class="color-input"><i data-background="{{ $siteData->p4 }}" style="background: {{ $siteData->p4 }};"></i></div>
                            </div>
							<div class="form-group mb-2" data-background=".bg-color-5" data-border=".border-color-5" data-color=".color-5">
                                <label>{{ __('site.customize_color_5') }}</label>
                                <div class="color-input"><i data-background="{{ $siteData->p5 }}" style="background: {{ $siteData->p5 }};"></i></div>
                            </div>
                            <div class="form-group mb-2 no-margin">
                                <label>{{ __('site.customize_font_size') }}</label>
                                <select id="font-size-selector" class="form-select">
                                    <option value="14" {{ ($siteData->font == '14' ? 'selected' : '') }}>{{ __('site.customize_font_small') }}</option>
                                    <option value="16" {{ ($siteData->font == '16' ? 'selected' : '') }}>{{ __('site.customize_font_normal') }}</option>
                                    <option value="18" {{ ($siteData->font == '18' ? 'selected' : '') }}>{{ __('site.customize_font_large') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div id="theme-modules" class="block block-rounded">
                        <div class="block-header border-bottom">
                            <h4 class="block-title">{{ __('site.customize_modules_title') }}</h4>
                        </div>
                        <div class="block-body no-padding">
                            <div style="height: 350px; overflow: auto;">
                                <ul class="nav nav-pills flex-column mb-auto">
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="5" data-identifier="playing-now">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-play-circle"></i> {{ __('site.module_playing_now') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="6" data-identifier="album">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-file-image"></i> {{ __('site.module_albums') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="20" data-identifier="apps">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-mobile"></i> {{ __('site.module_apps') }}</a>
                                    </li>
									@if($siteData->stream_port)
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="22" data-identifier="camera">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-video-camera"></i> {{ __('site.module_studio_camera') }}</a>
                                    </li>
									@endif
                                    <li class="module-item border-bottom" data-max="0" data-accept="[2,3,4]" data-module="25" data-identifier="news-upd">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-newspaper"></i> {{ __('site.module_news_updated') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[1]" data-module="15" data-identifier="cover">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-inbox"></i> {{ __('site.module_cover') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="19" data-identifier="chat">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-comments"></i> {{ __('site.module_chat') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="7" data-identifier="featured">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-star"></i> {{ __('site.module_featured') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="0" data-accept="[2,3,4]" data-module="12" data-identifier="poll">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-edit"></i> {{ __('site.module_poll') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="17" data-identifier="access-stats">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-bar-chart"></i> {{ __('site.module_statistics') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="3" data-identifier="event">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-calendar"></i> {{ __('site.menu_item_3_sub_6') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="0" data-accept="[2,3,4]" data-module="11" data-identifier="link">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-link"></i> {{ __('site.menu_item_3_sub_10') }}</a>
                                    </li>
									@if(!$siteData->stream_tv)
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,4]" data-module="24" data-identifier="online-broadcaster">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-microphone"></i> {{ __('site.module_broadcaster_online') }}</a>
                                    </li>
									@endif
                                    <li class="module-item border-bottom" data-max="0" data-accept="[1,2,3,4,5]" data-module="14" data-identifier="menu">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-navicon"></i> {{ __('site.module_menu') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="0" data-accept="[1,2,3,4,5]" data-module="1" data-identifier="free">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-cube"></i> {{ __('site.menu_item_3_sub_8') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="0" data-accept="[2,3,4]" data-module="8" data-identifier="news">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-newspaper"></i> {{ __('site.module_news') }}</a>
                                    </li>
									@if($siteData->stream_tv && $siteData->stream_tv_name)
									<li class="module-item border-bottom" data-max="1" data-accept="[1,2,3,4,6]" data-module="26" data-identifier="player">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-tv"></i> {{ __('site.module_tv_player') }}</a>
                                    </li>	
									@endif
									@if(!$siteData->stream_tv)
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,4]" data-module="18" data-identifier="music-request">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-music"></i> {{ __('site.module_music_request') }}</a>
                                    </li>
									@endif
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="4" data-identifier="promotion">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-trophy"></i> {{ __('site.menu_item_5_sub_7') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="0" data-accept="[1,2,3,4,5]" data-module="2" data-identifier="notice">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-bullhorn"></i> {{ __('site.module_ads') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="9" data-identifier="message">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-comment"></i> {{ __('site.menu_item_5_sub_4') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="13" data-identifier="social">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-street-view"></i> {{ __('site.module_social') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="0" data-accept="[1,5]" data-module="21" data-identifier="slider">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-clone"></i> {{ __('site.menu_item_3_sub_5') }}</a>
                                    </li>
									@if(!$siteData->stream_tv)
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="16" data-identifier="top-music">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-music"></i> {{ __('site.module_top_music') }}</a>
                                    </li>
                                    <li class="module-item border-bottom" data-max="1" data-accept="[2,3,4]" data-module="23" data-identifier="last-played">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-music"></i> {{ __('site.module_last_played') }}</a>
                                    </li>
									<li class="module-item border-bottom" data-max="1" data-accept="[2,4]" data-module="27" data-identifier="podcasts">
										<a href="#" class="nav-link"><i class="me-1 fa fa-microphone"></i> {{ __('site.menu_item_7') }}</a>
									</li>
									@endif
                                    <li class="module-item" data-max="1" data-accept="[2,3,4]" data-module="10" data-identifier="video">
                                        <a href="#" class="nav-link"><i class="me-1 fa fa-video-camera"></i> {{ __('site.menu_item_3_sub_2') }}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <a id="save-theme" href="" class="btn btn-primary btn-large" style="width: 100%;" onclick="return false;">{{ __('site.customize_save_theme') }}</a>
                </div>

                <div style="padding-left: 220px;">
                    <div class="theme-body bg-color-1 color-2 font-size {{ isLight($siteData->p1) }}">

                        <div id="theme-container-1" data-id="1" data-size="4" class="theme-container empty container-size-4" style="min-height: 150px; margin-bottom: 5px;">
                            <div class="theme-container-overlay"><span><i class="fa fa-ban text-red" style="font-size: 50px;"></i><br /><div style="font-weight: bold; margin-top: 7px;">{{ __('site.customize_cannot_place') }}</div></span></div>
                            <div class="theme-container-placeholder">{{ __('site.customize_area_top') }}</div>
                        </div>
						@if($siteData->stream_tv && $siteData->stream_tv_name)
						<div id="theme-container-6" data-id="6" data-size="4" class="theme-container empty container-size-4" style="min-height: 100px; margin-bottom: 5px;">
                            <div class="theme-container-overlay"><span><i class="fa fa-ban text-red" style="font-size: 50px;"></i><br /><div style="font-weight: bold; margin-top: 7px;">{{ __('site.customize_cannot_place') }}</div></span></div>
                            <div class="theme-container-placeholder">{{ __('site.customize_area_tv_player') }}</div>
                        </div>
						@endif
                        <div class="theme-container-group" style="margin-bottom: 5px;">
                            <div class="pull-left" style="width: 25%; padding-right: 5px;">
                                <div id="theme-container-2" data-id="2" data-size="1" class="theme-container empty container-size-1" style="min-height: 450px;">
                                    <div class="theme-container-overlay"><span><i class="fa fa-ban text-red" style="font-size: 50px;"></i><br /><div style="font-weight: bold; margin-top: 7px;">{{ __('site.customize_cannot_place') }}</div></span></div>
                                    <div class="theme-container-placeholder align-top">{{ __('site.customize_area_left') }}</div>
                                </div>
                            </div>
                            <div class="pull-left" style="width: 50%;">
                                <div id="theme-container-3" data-id="3" data-size="2" class="theme-container empty container-size-2" style="min-height: 450px;">
                                    <div class="theme-container-overlay"><span><i class="fa fa-ban text-red" style="font-size: 50px;"></i><br /><div style="font-weight: bold; margin-top: 7px;">{{ __('site.customize_cannot_place') }}</div></span></div>
                                    <div class="theme-container-placeholder align-top">{{ __('site.customize_area_main') }}</div>
                                </div>
                            </div>
                            <div class="pull-left" style="width: 25%; padding-left: 5px;">
                                <div id="theme-container-4" data-id="4" data-size="1" class="theme-container empty container-size-1" style="min-height: 450px;">
                                    <div class="theme-container-overlay"><span><i class="fa fa-ban text-red" style="font-size: 50px;"></i><br /><div style="font-weight: bold; margin-top: 7px;">{{ __('site.customize_cannot_place') }}</div></span></div>
                                    <div class="theme-container-placeholder align-top">{{ __('site.customize_area_right') }}</div>
                                </div>
                            </div>
                        </div>
                        <div id="theme-container-5" data-id="5" data-size="4" class="theme-container empty container-size-4" style="min-height: 150px; margin-bottom: 5px;">
                            <div class="theme-container-overlay"><span><i class="fa fa-ban text-red" style="font-size: 50px;"></i><br /><div style="font-weight: bold; margin-top: 7px;">{{ __('site.customize_cannot_place') }}</div></span></div>
                            <div class="theme-container-placeholder">{{ __('site.customize_area_footer') }}</div>
                        </div>
                        <script type="text/javascript">
                            var MODULE_INCREMENT = {{ $totalModules }};
                            var ACTUAL_CONTAINER_MODULES = {!! html_entity_decode($actualModules) !!};
                        </script>
                    </div>

                </div>
            </div>

        </section>


        <div class="modal fade" id="theme-modal" role="dialog" data-bs-focus="false" data-bs-keyboard="false" data-bs-backdrop="static">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content"  style="overflow-y: hidden;">
                    <div class="block block-rounded block-transparent mb-0">
                        <div class="block-header block-header-default">
                            <h3 class="block-title">{{ __('site.customize_modal_title') }}</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 pt-1 pb-2 ps-2 pe-2 fs-sm" style="overflow: auto; max-height: 336px;">
                            <div class="modal-loading">
                                <i class="fa fa-refresh fa-spin"></i>
                            </div>
                            <div class="loading" style="display: none; height: 150px; padding: 30px 0px; text-align: center;">
                                <i class="fa fa-refresh fa-spin" style="font-size: 30px;"></i>
                                <span style="display: block; font-size: 17px; margin-top: 4px;">{{ __('site.customize_loading') }}</span>
                            </div>
                            <div class="modal-body-inner"></div>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-alt-secondary cancel" data-bs-dismiss="modal">{{ __('site.btn_cancel') }}</button>
                            <button type="button" class="btn btn-primary confirm" data-action="confirm">{{ __('site.action_save') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>



    @endif

</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script type="text/javascript">
    var IS_MOBILE = {{ $isMobile }};
</script>
<script type="text/javascript" src="/assets/customize/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/assets/customize/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/customize/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/customize/js/utils.js"></script>
<script type="text/javascript" src="/assets/customize/js/colorpicker.js"></script>
<script type="text/javascript" src="/assets/customize/js/select2.js"></script>
<script type="text/javascript" src="/assets/customize/js/pt-br.js"></script>
<script type="text/javascript" src="/assets/customize/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="/assets/customize/js/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/customize/js/jquery.fileupload-process.js"></script>
<script type="text/javascript" src="/assets/customize/js/jquery.fileupload-validate.js"></script>
<script type="text/javascript" src="/assets/customize/js/uploader.js"></script>
<script type="text/javascript" src="/assets/customize/js/theme-customize.js?t=1"></script>
</body>
</html>