@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">
@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]};
                </script>

                <div id="theme-container-overlay" class="">
                    <div class="inner-content">
                        <div class="success-message">
                            <i class="fa fa-check" style="font-size: 26px;"></i><br />
                            {{ __('site.customize_theme_saved') }}<br /><br />
                            <a href="#" class="btn btn-default" 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 class="modal fade" id="theme-modal" role="dialog" data-bs-keyboard="false" data-bs-backdrop="static">
                    <div class="modal-dialog modal-lg 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">{{ __('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">
                                    <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 id="theme-container">
                    <div id="theme-control-bar">
                        <div id="theme-styles" class="block">
                            <div class="block-header with-border">
                                <h4 class="block-title">{{ __('site.customize_style_title') }}</h4>
                            </div>
                            <div class="block-body 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_primary') }}</label>
                                    <div class="color-input"><i data-background="#ffffff" style="background: #ffffff;"></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_secondary') }}</label>
                                    <div class="color-input"><i data-background="#000000" style="background: #000000;"></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_tertiary') }}</label>
                                    <div class="color-input"><i data-background="#239E76" style="background: #239E76;"></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="12">{{ __('site.customize_font_small') }}</option>
                                        <option value="14">{{ __('site.customize_font_normal') }}</option>
                                        <option value="16" selected="selected">{{ __('site.customize_font_large') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div id="theme-modules" class="block block-solid">
                            <div class="block-header with-border">
                                <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" 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" 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" 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" 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" 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" 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" 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" 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" 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.page_events_h1') }}</a>
                                        </li>
                                        <li class="module-item" 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.page_links_h1') }}</a>
                                        </li>
                                        <li class="module-item" 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" 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" 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.page_freem_h1') }}</a>
                                        </li>
                                        <li class="module-item" 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>
                                        <li class="module-item" 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" 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.page_promo_h1') }}</a>
                                        </li>
                                        <li class="module-item" 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" 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.page_messages_h1') }}</a>
                                        </li>
                                        <li class="module-item" 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" 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.page_slider_h1') }}</a>
                                        </li>
                                        <li class="module-item" 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" data-max="0" 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.page_videos_h1') }}</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 lighter">

                            <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;">
                                <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 = 19;
                                var ACTUAL_CONTAINER_MODULES = {"1":[{"id":1,"actualID":4197092,"identifier":"menu","moduleID":14,"accept":[1,2,3,4,5],"size":4,"reduced":0,"resizable":false},{"id":2,"actualID":4197093,"identifier":"cover","moduleID":15,"accept":[1],"size":4,"reduced":0,"resizable":false},{"id":3,"actualID":4197094,"identifier":"notice","moduleID":2,"accept":[1,2,3,4,5],"size":4,"reduced":0,"resizable":false}],"2":[{"id":4,"actualID":4197095,"identifier":"menu","moduleID":14,"accept":[1,2,3,4,5],"size":1,"reduced":0,"resizable":false},{"id":5,"actualID":4197096,"identifier":"event","moduleID":3,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false},{"id":6,"actualID":4197097,"identifier":"promotion","moduleID":4,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false},{"id":7,"actualID":4197098,"identifier":"news","moduleID":8,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false}],"3":[{"id":8,"actualID":4197099,"identifier":"featured","moduleID":7,"accept":[2,3,4],"size":2,"reduced":0,"resizable":true},{"id":9,"actualID":4197100,"identifier":"chat","moduleID":19,"accept":[2,3,4],"size":2,"reduced":0,"resizable":true},{"id":10,"actualID":4197101,"identifier":"message","moduleID":9,"accept":[2,3,4],"size":2,"reduced":0,"resizable":true},{"id":11,"actualID":4197102,"identifier":"playing-now","moduleID":5,"accept":[2,3,4],"size":2,"reduced":0,"resizable":true},{"id":12,"actualID":4197103,"identifier":"video","moduleID":10,"accept":[2,3,4],"size":2,"reduced":0,"resizable":true},{"id":13,"actualID":4197104,"identifier":"access-stats","moduleID":17,"accept":[2,3,4],"size":2,"reduced":0,"resizable":true}],"4":[{"id":14,"actualID":4197105,"identifier":"top-music","moduleID":16,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false},{"id":15,"actualID":4197106,"identifier":"music-request","moduleID":18,"accept":[2,4],"size":1,"reduced":0,"resizable":false},{"id":16,"actualID":4197107,"identifier":"poll","moduleID":12,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false},{"id":17,"actualID":4197108,"identifier":"social","moduleID":13,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false},{"id":18,"actualID":4197109,"identifier":"link","moduleID":11,"accept":[2,3,4],"size":1,"reduced":0,"resizable":false}]};
                            </script>
                        </div>

                    </div>
                </div>

            </section>


@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>