@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/mobile-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>
            </div>
        </div>
    </div>


    <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">
            
            <a id="save-theme" href="" class="btn btn-primary mb-4" style="width: 50%;" onclick="return false;">{{ __('site.customize_save_theme') }}</a>
            

            <div id="theme-control-bar1" class="theme-control-bar-closed">
            <button class="btn-primary menu-toggle mb-4" onclick="toggleMenu()">
                <i class="fas fa-puzzle-piece"></i> 
            </button>

                <div id="theme-modules" class="block">


                    <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 color-picker" 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">
                                    <input type="color" class="color-picker-input" value="{{ $siteData->p1 }}" style="background: {{ $siteData->p1 }};">
                                </div>
                            </div>
                            <div class="form-group mb-2 color-picker" 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">
                                    <input type="color" class="color-picker-input" value="{{ $siteData->p2 }}" style="background: {{ $siteData->p2 }};">
                                </div>
                            </div>
                            <div class="form-group mb-2 color-picker" 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">
                                    <input type="color" class="color-picker-input" value="{{ $siteData->p3 }}" style="background: {{ $siteData->p3 }};">
                                </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_alt') }}</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>
                                    <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>
                                    <li class="module-item border-bottom" data-max="1" 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="1" 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>
                                    <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>
                                    <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="1" 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>
                                    <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>
                                    <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>
                                    <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" 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>
                </div>
            </div>




            <div style="padding-left: 5%; padding-right: 5%;">
                <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>
                    <div class="theme-container-group" style="margin-bottom: 5px; display: flex; flex-wrap: wrap;">
                        <div class="pull-left" style="width: 100%; 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: 100%; padding-right: 5px; padding-left: 5px;">
                            <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: 100%; 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>


</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/mobile-customize.js?t=1.0.1"></script>
</body>

</html>