$(' <div class="floated-customizer-btn third-floated-btn"> <div class="icon-w"> <i class="fa fa-cog fa-spin"></i> </div><span>Customizer</span> </div><div class="floated-customizer-panel"> <div class="fcp-content"> <div class="close-customizer-btn"><i class="icon-close"></i></div><div class="customizer-title"> <h5>Template Customizer</h5> <p class="mb-0">Customize & Preview in Real Time</p></div><div class="fcp-group"> <div class="fcp-group-contents"> <div class="main-option"> <div class="row"> <div class="col"> <div class="main-theme-layout-container"> <a href="#" class="main-theme-layout" theme-layout="main-theme-layout-5" title="Light Layout"><img src="assets/images/light.png" alt="Light Layout"></a> <a href="#" class="main-theme-layout" theme-layout="main-theme-layout-1" title="Dark Sidebar"><img src="assets/images/sidebar-dark.png" alt="Dark Sidebar"></a> <a href="#" class="main-theme-layout" theme-layout="main-theme-layout-2" title="Dark Page-body"><img src="../assets/images/customizer/page-bosy-dark.png" alt="Dark Page-body"></a> <a href="#" class="main-theme-layout" theme-layout="main-theme-layout-3" title="Dark Page-body & Sidebar"><img src="assets/images/page-body-sidebar.png" alt="Dark Page-body & Sidebar"></a> <a href="#" class="main-theme-layout" theme-layout="main-theme-layout-4" title="Dark Layout"><img src="assets/images/dark.png" alt="Dark Layout"></a> </div></div></div></div></div></div><div CLASS="fcp-options"> <div class="fcp-group"> <div class="fcp-group-contents"> <div class="layout-option"> <ul class="nav nav-tabs border-tab nav-primary" id="top-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="top-home-tab" data-bs-toggle="tab" href="#nav_Layouts" role="tab" aria-controls="nav_Layouts" aria-selected="true"> Layouts</a></li><li class="nav-item" role="presentation"> <a class="nav-link" id="profile-top-tab1" data-bs-toggle="tab" href="#nav_navigation" role="tab" aria-controls="nav_navigation" aria-selected="false">Sidebar</a></li></ul> <div class="tab-content" id="top-tabContent1"> <div class="tab-pane fade active show" id="nav_Layouts" role="tabpanel"> <div class="row"> <div class="col"> <div class="form-group mb-0"> <div class="radio radio-primary m-t-5 m-b-5"> <input type="radio" name="menu-layouts" id="default_menu" value="menu-layout-default"> <label for="default_menu">Default</label> </div><div class="radio radio-primary"> <input type="radio" name="menu-layouts" id="collapsed_menu" value="menu-layout-collapsed"> <label for="collapsed_menu">Collapsed Menu</label> </div></div></div></div></div><div class="tab-pane fade" id="nav_navigation" role="tabpanel" aria-labelledby="profile-top-tab"> <div class="row"> <div class="col-sm-12"> <div class="form-group mb-0"> <div class="checkbox checkbox-primary m-squar"> <input id="navigation_scroll_check" type="checkbox" name="naviagation-layout-checkbox" value="native-scroll"> <label for="navigation_scroll_check" class="mt-0">Nativ Scroll</label> </div><div class="checkbox checkbox-primary m-squar"> <input id="navigation_bordered_check" type="checkbox" name="naviagation-layout-checkbox" value="navigation-bordered"> <label for="navigation_bordered_check">Bordered Navigation</label> </div><div class="checkbox checkbox-primary m-squar"> <input id="navigation_rightside_check" type="checkbox" name="naviagation-layout-checkbox" value="navigation-rightside"> <label for="navigation_rightside_check">Right Side Icons</label> </div><div class="checkbox checkbox-primary m-squar"> <input id="navigation_back_image_check" type="checkbox" name="naviagation-layout-checkbox" value="native-image-bg"> <label for="navigation_back_image_check">Background Image</label> </div><div class="checkbox checkbox-primary m-squar"> <input id="navigation_default_check" type="checkbox" name="naviagation-layout-checkbox" value="native-default"> <label for="navigation_default_check">Default Navigation</label> <p class="mb-0"><b>Note : </b>For trying other option need to please uncheck all option</p></div></div></div></div></div></div></div></div></div><div class="fcp-group border-bottom-0"> <div class="fcp-group-header">Header Color Options</div><div class="fcp-group-contents"> <div class="navigation-color-option"> <ul class="nav nav-tabs border-tab nav-primary" id="top-tab1" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link active" id="contact-top-tab" data-bs-toggle="tab" href="#fullnav_dark" role="tab" aria-controls="fullnav_dark" aria-selected="false">Header</a></li><li class="nav-item" role="presentation"> <a class="nav-link" id="top-home-tab1" data-bs-toggle="tab" href="#semi_light" role="tab" aria-controls="semi_light" aria-selected="true"> Brand</a></li><li class="nav-item" role="presentation"> <a class="nav-link" id="profile-top-tab" data-bs-toggle="tab" href="#semi_dark" role="tab" aria-controls="semi_dark" aria-selected="false">Only nav</a></li></ul> <div class="tab-content" id="top-tabContent"> <div class="tab-pane fade" id="semi_light" role="tabpanel" aria-labelledby="top-home-tab"> <div class="row"> <div class="col-12"> <div class="mb-3"> <div class="fcp-group-header-sub">Dark Version</div><div class="radio radio-default"> <input type="radio" name="semi-light" id="semi_light_default" value="bg-default"> <label for="semi_light_default"></label> </div><div class="radio radio-primary"> <input type="radio" name="semi-light" id="semi_light_primary" value="bg-primary"> <label for="semi_light_primary"></label> </div><div class="radio radio-secondary"> <input type="radio" name="semi-light" id="semi_light_secondary" value="bg-secondary"> <label for="semi_light_secondary"></label> </div><div class="radio radio-danger"> <input type="radio" name="semi-light" id="semi_light_danger" value="bg-danger"> <label for="semi_light_danger"></label> </div><div class="radio radio-success"> <input type="radio" name="semi-light" id="semi_light_success" value="bg-success"> <label for="semi_light_success"></label> </div><div class="radio radio-info"> <input type="radio" name="semi-light" id="semi_light_info" value="bg-info"> <label for="semi_light_info"></label> </div><div class="radio radio-light"> <input type="radio" name="semi-light" id="semi_light_light" value="bg-light"> <label for="semi_light_light"></label> </div></div></div><div class="col-12"> <div> <div class="fcp-group-header-sub">Light Version</div><div class="radio radio-default"> <input type="radio" name="semi-light" id="semi_light_default_light" value="bg-default-light-color"> <label for="semi_light_default_light"></label> </div><div class="radio radio-primary"> <input type="radio" name="semi-light" id="semi_light_primary_light" value="bg-primary-light-color"> <label for="semi_light_primary_light"></label> </div><div class="radio radio-secondary"> <input type="radio" name="semi-light" id="semi_light_secondary_light" value="bg-secondary-light-color"> <label for="semi_light_secondary_light"></label> </div><div class="radio radio-danger"> <input type="radio" name="semi-light" id="semi_light_danger_light" value="bg-danger-light-color"> <label for="semi_light_danger_light"></label> </div><div class="radio radio-success"> <input type="radio" name="semi-light" id="semi_light_success_light" value="bg-success-light-color"> <label for="semi_light_success_light"></label> </div><div class="radio radio-info"> <input type="radio" name="semi-light" id="semi_light_info_light" value="bg-info-light-color"> <label for="semi_light_info_light"></label> </div><div class="radio radio-light"> <input type="radio" name="semi-light" id="semi_light_light_light" value="bg-light-light-color"> <label for="semi_light_light_light"></label> </div></div></div></div></div><div class="tab-pane fade" id="semi_dark" role="tabpanel" aria-labelledby="profile-top-tab"> <div class="row"> <div class="col-12"> <div class="mb-3"> <div class="fcp-group-header-sub">Dark Version</div><div class="radio radio-default"> <input type="radio" name="header-light" id="header_light_default" value="bg-default"> <label for="header_light_default"></label> </div><div class="radio radio-primary"> <input type="radio" name="header-light" id="header_light_primary" value="bg-primary"> <label for="header_light_primary"></label> </div><div class="radio radio-secondary"> <input type="radio" name="header-light" id="header_light_secondary" value="bg-secondary"> <label for="header_light_secondary"></label> </div><div class="radio radio-danger"> <input type="radio" name="header-light" id="header_light_danger" value="bg-danger"> <label for="header_light_danger"></label> </div><div class="radio radio-success"> <input type="radio" name="header-light" id="header_light_success" value="bg-success"> <label for="header_light_success"></label> </div><div class="radio radio-info"> <input type="radio" name="header-light" id="header_light_info" value="bg-info"> <label for="header_light_info"></label> </div></div></div><div class="col-12"> <div class="mb-3"> <div class="fcp-group-header-sub">Dark Version</div><div class="radio radio-default"> <input type="radio" name="header-light" id="header_light_default_light" value="bg-default-light-colo] "> <label for="header_light_default_light"></label> </div><div class="radio radio-primary"> <input type="radio" name="header-light" id="header_light_primary_light" value="bg-primary-light-color"> <label for="header_light_primary_light"></label> </div><div class="radio radio-secondary"> <input type="radio" name="header-light" id="header_light_secondary_light" value="bg-secondary-light-color"> <label for="header_light_secondary_light"></label> </div><div class="radio radio-danger"> <input type="radio" name="header-light" id="header_light_danger_light" value="bg-danger-light-color"> <label for="header_light_danger_light"></label> </div><div class="radio radio-success"> <input type="radio" name="header-light" id="header_light_success_light" value="bg-success-light-color"> <label for="header_light_success_light"></label> </div><div class="radio radio-info"> <input type="radio" name="header-light" id="header_light_info_light" value="bg-info-light-color"> <label for="header_light_info_light"></label> </div></div></div></div></div><div class="tab-pane fade active show" id="fullnav_dark" role="tabpanel" aria-labelledby="contact-top-tab"> <div class="row"> <div class="col-12"> <div class="fcp-group-header-sub">Light Version</div><div class="mb-3"> <div class="radio radio-default"> <input type="radio" name="navu-light" id="nav_light_default" value="bg-default"> <label for="nav_light_default"></label> </div><div class="radio radio-primary"> <input type="radio" name="navu-light" id="nav_light_primary" value="bg-primary"> <label for="nav_light_primary"></label> </div><div class="radio radio-secondary"> <input type="radio" name="navu-light" id="nav_light_secondary" value="bg-secondary"> <label for="nav_light_secondary"></label> </div><div class="radio radio-danger"> <input type="radio" name="navu-light" id="nav_light_danger" value="bg-danger"> <label for="nav_light_danger"></label> </div><div class="radio radio-success"> <input type="radio" name="navu-light" id="nav_light_success" value="bg-success"> <label for="nav_light_success"></label> </div><div class="radio radio-info"> <input type="radio" name="navu-light" id="nav_light_info" value="bg-info"> <label for="nav_light_info"></label> </div></div></div><div class="col-12"> <div class="fcp-group-header-sub">Dark Version</div><div class="mb-3"> <div class="radio radio-default"> <input type="radio" name="navu-light" id="nav_light_default_light_color" value="bg-default-light-colo"> <label for="nav_light_default_light_color"></label> </div><div class="radio radio-primary"> <input type="radio" name="navu-light" id="nav_light_primary_light_color" value="bg-primary-light-color"> <label for="nav_light_primary_light_color"></label> </div><div class="radio radio-secondary"> <input type="radio" name="navu-light" id="nav_light_secondary_light_color" value="bg-secondary-light-color"> <label for="nav_light_secondary_light_color"></label> </div><div class="radio radio-danger"> <input type="radio" name="navu-light" id="nav_light_danger_light_color" value="bg-danger-light-color"> <label for="nav_light_danger_light_color"></label> </div><div class="radio radio-success"> <input type="radio" name="navu-light" id="nav_light_success_light_color" value="bg-success-light-color"> <label for="nav_light_success_light_color"></label> </div><div class="radio radio-info"> <input type="radio" name="navu-light" id="nav_light_info_light_color" value="bg-info-light-color"> <label for="nav_light_info_light_color"></label> </div></div></div></div></div></div></div></div></div></div></div></div>').appendTo($('body'));
(function() {
})();

//live customizer js
$(document).ready(function() {
    $(".floated-customizer-btn").on('click', function() {
        $(".floated-customizer-panel").toggleClass("active");
    });

    $(".close-customizer-btn").on('click', function() {
        $(".floated-customizer-panel").removeClass("active");
    });

    // live customizer menu-color-option js
    $('input[type=radio][name=menu-color-option]').change(function() {
        var menu_color_option_color = $(this).val();
        if(menu_color_option_color == 'menu-dark'){
            $(".page-sidebar").addClass("page-sidebar-dark");
        }
        else{
            $(".page-sidebar").removeClass("page-sidebar-dark");
        }
    });

    // live customizer semi-logo-background-color-option
    $('input[type=radio][name=semi-light]').change(function() {
        var semi_nav_bg = $(this).val();
        $('.main-header-left').attr("semilight-bg-color", semi_nav_bg);
        $('.main-header-right').attr("header-bg-color", "");
    });

    // live customizer header-background-color-option
    $('input[type=radio][name=header-light]').change(function() {
        var header_nav_bg = $(this).val();
        $('.main-header-right').attr("header-bg-color", header_nav_bg);
        $('.main-header-left').attr("semilight-bg-color", "");
    });

    // live customizer  nav-bar-background-color-option
    $('input[type=radio][name=navu-light]').change(function() {
        var nav_nav_bg = $(this).val();
        $('.main-header-left').attr("semilight-bg-color", nav_nav_bg);
        $('.main-header-right').attr("header-bg-color", nav_nav_bg);
    });

    // live customizer main-theme-layout
    $('input[type=radio][name=main-theme-layout]').change(function() {
        var main_theme_layout = $(this).val();
        $('.main-header-left').attr("semilight-bg-color", "");
        $('.main-header-right').attr("header-bg-color", "");
        $("body").attr("main-theme-layout", main_theme_layout);
    });

    // live customizer main-theme-layout
    $('.main-theme-layout').click(function() {
        var main_theme_layout = $(this).attr("theme-layout");
        $('.main-header-left').attr("semilight-bg-color", "");
        $('.main-header-right').attr("header-bg-color", "");
        $("body").attr("main-theme-layout", main_theme_layout);
    });

    // live customizer menu-layout
    $('input[type=radio][name=menu-layouts]').change(function() {
        var menu_layout = $(this).val();
        if(menu_layout == "menu-layout-collapsed"){
            $("#sidebar-toggle").prop('checked', false);
            $(".page-body-wrapper").addClass("sidebar-close");
        }else{
            $("#sidebar-toggle").prop('checked', true);
            $(".page-body-wrapper").removeClass("sidebar-close");
        }
    });

    $("input[type=checkbox][name=naviagation-layout-checkbox]").change(function(){
        $("input:checkbox[name=naviagation-layout-checkbox]:checked").each(function(){
            var nav_layout_c = $(this).val();
            $(".page-sidebar").addClass(nav_layout_c);

            if($(".page-sidebar").hasClass("native-scroll")){
                $(".page-sidebar").removeClass("custom-scrollbar");
            }
            if(nav_layout_c == "native-default"){
                $("#navigation_bordered_check").prop( "checked", false );
                $("#navigation_rightside_check").prop( "checked", false );
                $("#navigation_scroll_check").prop( "checked", false );
                $("#navigation_back_image_check").prop( "checked", false );
            }
        });

        $("input:checkbox[name=naviagation-layout-checkbox]:not(:checked)").each(function () {
            var nav = $(this).val();
            $(".page-sidebar").removeClass(nav);
            if(nav == "native-scroll"){
                $(".page-sidebar").addClass("custom-scrollbar");
            }
        });
    });

    // tooltip on theme layouts
    $(".main-theme-layout").tooltip();
});