<link rel="stylesheet" href="https://static.accessban.com/components/minicolors/jquery.minicolors.css">
<link rel="stylesheet" href="https://static.accessban.com/components/sweetalert2/dist/sweetalert2.min.css">

<script src="https://static.accessban.com/components/jquery/jquery-3.6.0.js"></script>
<script src="https://static.accessban.com/components/jquery/jquery-migrate-3.3.2.js"></script>
<script src="https://static.accessban.com/components/minicolors/jquery.minicolors.js"></script>
<script src="https://static.accessban.com/components/sweetalert2/dist/sweetalert2.all.min.js"></script>
<style>
    body.widget #output {
        font-size: 13px;
        letter-spacing: 0.5px;
    }

    #main {
        margin: 0px auto;
        width: 100%;
    }

    .header-breadcrumb {
        box-shadow: unset;
    }

    .widgets-builder {}

    .widget-body {
        position: relative;
    }

    .minicolors-theme-default .minicolors-swatch {
        width: 25px !important;
        height: 25px !important;
    }

    [dir="rtl"] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
        left: auto !important;
        right: 5px !important;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid #f9f9f9;
    }

    [dir="rtl"] .minicolors-theme-default .minicolors-input {
        text-align: left !important;
        cursor: pointer;
    }

    .input-opts {
        display: inline-block !important;
        max-width: 80px !important;
        margin-right: 5px !important;
        border: 1px solid #c4c4c4 !important;
        box-shadow: unset !important;
        border-radius: 25px !important;
        text-align: center !important;
        padding: 0 !important;
        color: #222 !important;
    }

    .header-cover-m {
        width: 550px;
        position: absolute;
        top: -330px;
        left: -0px;
    }

    .widgets-builder-header {
        background: #2962ff url(https://static.accessban.com/views/default/images/widgets-pattern.png);
        position: relative;
        background-size: 100%;
        overflow: hidden;
        min-height: 400px;
    }

    .widgets-builder-header .container.back-to-widgets {
        padding: 41px 15px 90px !important;
    }

    .widgets-builder-header .container.container-h-single {
        padding: 50px 15px;
        display: flex;
        align-items: center;
    }

    .container-h-single-content {
        flex-grow: 1;
    }

    .back-to-widgets-btn {
        color: #333 !important;
        display: flex;
        font-size: 14px;
        text-decoration: unset !important;
        background: #fff !important;
        border-radius: 30px;
        float: right;
        font-weight: 600;
        margin-left: 0;
        padding: 5px 20px 7px;
        align-items: center;
        height: 47px;
    }

    .back-to-widgets-btn:hover {
        background: #f8931d !important;
    }

    .back-to-widgets-btn:hover a {
        color: #fff !important;
    }

    .back-to-widgets-btn a {
        color: #333 !important;
        text-decoration: unset !important;
        text-align: center;
        display: flex;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
    }

    .back-to-widgets-btn i {
        font-size: 14px;
        display: block;
        margin-left: 6px;
        position: relative;
        top: 0px;
    }

    .widgets-builder-header .header-tag {
        display: inline-block;
        padding: 5px 10px 8px;
        background-color: #f8931d;
        color: #fff !important;
        font-size: 16px;
        line-height: 1;
        border-radius: 20px;
        font-weight: 600;
        text-decoration: unset !important;
    }


    .widgets-builder-header .header-title {
        font-size: 28px;
        color: #fff;
        font-weight: 600;
        padding: 15px 0px 5px !important;
    }

    .widgets-builder-header .header-description {
        font-size: 14px;
        color: #f0f0f0;
        text-align: justify;
    }

    .black-overlay {
        background: -webkit-linear-gradient(transparent, #000);
        background: -o-linear-gradient(transparent, #000);
        background: -ms-linear-gradient(transparent, #000);
        background: -moz-linear-gradient(transparent, #000);
        background: linear-gradient(transparent, #000);
        /* background: linear-gradient(to bottom, rgba(0, 135, 255, 0.84), #022e77); */
        background: linear-gradient(to bottom, rgba(47, 47, 47, 0.64), #040404);

        position: absolute;
        right: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.95;
    }

    .widgets-builder-header .container {
        z-index: 2;
        position: relative;
        padding: 120px 0px 115px;
    }

    .widgets-builder-row {
        padding: 80px 0px;
    }

    .widgets-builder-row.gray {
        background-color: #f8f9fd;
    }

    .widgets-builder-row-title {
        font-size: 32px !important;
        font-weight: 600 !important;
        margin: 0px !important;
        display: block;
    }

    .widgets-builder-row-title.center {
        text-align: center;
    }

    .widgets-builder-row-title.left {
        text-align: left;
    }

    .widgets-builder-row-title.right {
        text-align: right;
    }
    .tgju-widget-box ul li{
        margin-bottom: 0;
    }

    .widgets-builder-button-link {
        display: block !important;
    }

    .widgets-builder-row-description {
        font-size: 15px;
        line-height: 2;
        text-align: justify;
        padding: 30px 0px;
        color: #333;
    }

    .widgets-builder-button-link.center {
        text-align: center;
    }

    .widgets-builder-button-link.left {
        text-align: left;
    }

    .widgets-builder-button-link.right {
        text-align: right;
    }

    .widgets-builder-button {
        display: inline-block !important;
        font-size: 18px;
        border: #2559e8 1px solid;
        border-radius: 6px;
        color: #2861fd;
        font-weight: 500;
        padding: 8px 10px 10px;
        min-width: 200px;
        text-align: center;
    }

    .widgets-builder-button:hover {
        background: #2861fd;
        color: #fff;
    }

    .widgets-builder-box {
        /* border: 1px solid #e6e6e6; */
        margin: 0px;
        border-radius: 6px;
        min-height: 100px;
        /* background: #e6e6e6; */
    }

    .widgets-builder-preview {
        position: relative;
  background: #f6f5f4;
  padding: 30px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  min-width: 500px;
  margin-right: 30px;
    }
    .widgets-builder-preview-tag{
        position: absolute;
  transform: rotate(-90deg);
  left: 0;
  font-size: 40px;
  font-weight: 600;
  width: 55px;
  color: #e0e0e0;
    }
    .widgets-builder-preview-title {
        display: block;
        text-align: center;
        font-weight: 500;
        font-size: 13px;
        color: #4f4f4f;
        margin-bottom: 18px;
        letter-spacing: -0.5px;
    }

    .widgets-builder-settings {
        padding: 20px 0px 50px;
    }

    .widgets-builder-single-title {
        display: block;
        text-align: right;
        font-weight: 500;
        font-size: 14px;
        color: #4f4f4f;
        margin-bottom: 10px;
        letter-spacing: -0.5px;
    }

    .widgets-builder-setting-box,
    .widgets-builder-code-box {
        /* background: #f7f7f7; */
        /* padding: 10px; */
        border-radius: 4px;
        margin-top: 10px;
    }


    #output-market-overview,
    #output-ticker-single,
    #output-ticker-tap,
    #output-ticker,
    #output-market-data {
        border: #e8e7e7 dashed 2px;
        box-shadow: unset;
        background: unset;
        min-height: 350px;
        padding: 25px;
        text-align: left;
        font-size: 13px;
        direction: ltr;
    }

    .widget-items-title {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .widget-items-title h2,
    .widget-items-title h3 {
        font-size: 18px;
        font-weight: 600;
        margin-left: 8px;
        margin-bottom: 0px;
        font-family: iranyekan !important;

    }

    .widget-items-title h2::before,
    .widget-items-title h3::before {
        content: '';
        width: 6px;
        height: 6px;
        background: #ef8331;
        display: inline-block;
        border-radius: 50%;
        margin-left: 5px;
        position: relative;
        top: 0px;
    }

    .widget-items-title button {
        display: flex;
        align-items: center;
        font-size: 12px;
        padding: 4px 8px !important;
        margin: 0px;
        border-radius: 4px;
        background: #df7471;
        font-weight: 600;
    }

    .widget-items-title button i {
        font-size: 14px;
        margin-left: 5px;
        position: relative;
        top: 1px;
        font-weight: 500;
    }
    .widget-indicators-market-overview {
        border: 2px dashed rgb(232, 231, 231);
        border-radius: 4px;
        padding: 10px;
        }

    /* .widget-indicators-market-overview {
        border: 2px dashed #e8e7e7;
        border-radius: 4px;
        padding: 10px;
    }

    .widget-indicators-market-overview button {
        margin: 3px 0px 3px 3px;
        border-radius: 4px;
        padding: 3px 8px;
        font-size: 12px !important;
        background: #4f4f4f;
    }

    .widget-indicators-market-overview button i {
        float: right;
        position: relative;
        top: 5px;
        margin-left: 6px;
    } */

    .widget-hr {
        display: black;
        height: 25px;
    }

    .widget-items-settings-checkbox {
        padding: 5px 0px 0px;
        font-size: 14px;
        font-weight: 600;
    }

    .widget-items-settings-checkbox label {
        border-radius: 3px;
        padding: 0px 5px 2px;
        display: inline-block;
        line-height: 1.5;
        white-space: nowrap;
    }

    .widget-items-settings-checkbox label input {
        margin-left: 2px;
        position: relative;
        top: 1px;
        padding-left: 10px !important;
    }

    .lable-name {
        display: inline-block;
        background: #f9f9f9;
        padding: 1px 10px 4px 28px;
        margin-left: -25px;
        border-radius: 20px;
        color: #333;
        position: relative;
        top: 0px;
        border: 1px solid #e6e6e6;
    }

    /* .widget-items-settings-colors {
        padding: 10px 0 15px;
    } */
    .widget-items-settings-colors label {
        display: block;
        margin-bottom: 10px;
        width: 25%;
        float: right;
        padding-left: 5px;
    }

    .minicolors-theme-default.minicolors {
        display: inline-block;
        width: 100%;
    }

    .widget-items-settings-colors label input {
        width: 100% !important;
        min-width: unset !important;
    }

    .widget-items-settings-colors label span {
        display: block;
        font-size: 11px;
        color: #666;
        padding: 0 0 3px;
    }

    .widget-items-settings-colors label input {
        min-width: 125px;
        text-align: right;
        border: 1px solid #e6e6e6;
        box-shadow: unset;
        background: #f9f9f9;
        padding: 0px 10px !important;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
        height: 35px !important;
    }

    .minicolors-swatch::after {
        border-radius: 50% !important;
    }

    [dir="rtl"] .minicolors-theme-default.minicolors-position-left .minicolors-input {
        cursor: pointer;
    }

    .widgets-builder-home-icons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 30px;
        margin: 45px auto;
        text-align: center;
    }

    .widgets-builder-home-icon svg {
        width: 96px;
        height: auto;
        margin-bottom: -8px;
    }

    .widgets-builder-home-icon img {
        width: 75px;
        height: auto;
        margin-bottom: 10px;
    }

    .widgets-builder-home-icon {
        padding: 5px;
        border: 1px solid #d1d1d1;
        border-radius: 8px;
        transition: all .3s ease-in;
        height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #3f3f3f !important;
        font-size: 14px;
        text-decoration: unset !important;
    }

    .widgets-builder-home-icon.inactive {
        pointer-events: none;
        opacity: 0.3;
    }

    .widgets-builder-home-icon:hover {
        box-shadow: 0px 0px 15px #b7b7b7;
    }

    .widgets-builder-home-icon.active {
        box-shadow: 0px 0px 15px #b7b7b7;
    }

    .svg-fill-primary {
        fill: #f8931d !important;
    }

    html.dark .widgets-builder-home-icon {
        color: #fff !important;
        border: 1px solid #444;
        background: #999;
    }

    html.dark .widgets-builder-home-icon path,
    html.dark .widgets-builder-home-icon line {
        stroke: #fff;
    }

    html.dark .widgets-builder-home-icon circle {
        fill: #fff;
    }

    html.dark .widgets-builder-home-icon:hover {
        box-shadow: 0px 0px 15px #000;
        background: #b5b5b5;
    }

    html.dark .widgets-builder-home-icon.active {
        box-shadow: 0px 0px 15px #000;
        background: #b5b5b5;
    }

    @media (min-width: 1140px) {
        .left-80 {
            padding-left: 80px;
        }

        .right-80 {
            padding-right: 80px;
        }
    }

    @media (max-width: 1140px) {
        .widgets-builder-home-icons {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        }
    }

    @media (max-width: 992px) {
        .widgets-builder-home-icons {
            grid-template-columns: 1fr 1fr 1fr 1fr;
        }
    }

    @media (max-width: 769px) {
        .widgets-builder-home-icons {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    @media (max-width: 580px) {
        .widgets-builder-home-icons {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 320px) {
        .widgets-builder-home-icons {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 1250px) {
        html body #main {
            margin: 0 !important;
            width: 100% !important;
        }

        .header-breadcrumb {
            margin: 0 !important;
        }
    }

    @media all and (min-width:979px) and (max-width:1220px) {
        body #main {
            width: 100% !important;
        }

        .black-overlay {
            z-index: 0;
        }

        .widgets-builder .container {
            padding-right: 25px !important;
            padding-left: 25px !important;
            min-width: unset !important;
            z-index: unset !important;
            width: 100% !important;
            max-width: unset !important;
        }

        .widgets-builder-header .container.back-to-widgets {
            padding: 41px 25px 90px !important;
        }
    }

    @media (max-width: 992px) {
        .header-cover-m {
            display: none;
        }

        .black-overlay {
            z-index: 0;
        }

        .widgets-builder-header {
            min-height: unset;
        }

        .widgets-builder-header .container.container-h-single {
            padding: 30px 25px 30px !important;
            display: block;
        }

        .back-to-widgets-btn {
            margin: 18px 0;
        }

        .widgets-builder .container {
            padding: 50px 25px 40px !important;
            min-width: unset !important;
            z-index: unset !important;
            width: 100% !important;
            max-width: unset !important;
        }

        .widgets-builder-header .container.back-to-widgets {
            padding: 41px 25px 90px !important;
        }
    }

    @media (max-width: 860px) {

        html body #main,
        html body .container {
            padding: 0;
        }
    }

    @media (max-width: 760px) {
        .header-statement {
            margin-bottom: 0;
        }
    }

    @media (max-width: 580px) {
        .widget-items-settings-colors label {
            width: 33%;
        }
    }

    @media (max-width: 380px) {
        .widget-items-settings-colors label {
            width: 50%;
        }
    }

    .swal2-styled.swal2-confirm {
        background-color: #f8931d !important;
        font-size: 16px !important;
        font-family: iranyekan !important;
        padding: 5px 30px 8px !important;
    }

    .swal2-styled.swal2-confirm:focus {
        box-shadow: 0 0 0 3px rgba(248, 147, 29, 0.35) !important;
    }

    html.dark .widgets-builder-row.gray {
        background-color: #3c3c3c;
    }

    .tgju-widget-title-text {
        color: #222;
    }

    html.dark .tgju-widget-title-text,
    html.dark .tgju-widget-current-price,
    html.dark .tgju-widget-change,
    html.dark .tgju-widget-change .widget-change {
        color: #222;
    }

    html.dark .widgets-builder-row-description {
        color: #c7c7c7;
    }

    html.dark .widgets-builder-row-title {
        color: #fff !important;
    }

    html.dark .widgets-builder-button {
        border: #df7471 1px solid;
        color: #df7471;
    }

    html.dark .widgets-builder-button:hover {
        background: #df7471;
        color: #fff;
    }

    html.dark .widgets-builder-preview {
        background: #3c3c3c;
    }

    html.dark .widgets-builder-preview-title {
        color: #fff;
    }

    html.dark #output {
        color: #fff;
    }

    html.dark .lable-name {
        background: #3c3c3c;
        color: #fff;
        border: 1px solid #484848;
    }

    html.dark .widget-items-settings-checkbox label input {
        background: #313131;
        color: #fff !important;
        border: 1px solid #484848 !important;
    }
</style>
<style type="text/css">
    label {
        vertical-align: middle;
    }


    #twp-wrap div {
        transition: opacity linear .15s;
    }

    #twp-wrap h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: normal;
    }

    #twp-wrap .howto span {
        color: #6495ED;
        font-weight: 700;
        font-style: normal;
    }

    #twp-wrap input,
    button {
        vertical-align: middle !important;
    }

    #twp-wrap a {
        text-decoration: unset !important ;
        border-bottom: 0 !important ;
        padding-bottom: 0 ;
    }

    #twp-wrap code {
        padding: 2px 4px;
        font-size: 90%;
        color: #c7254e;
        background-color: #f9f2f4;
        border-radius: 4px;
        font-style: normal;
    }

    #twp-wrap a:hover {
        border-bottom: 2px solid #0091EA;
    }

    #twp-wrap input[type=text] {
        font-size: 1.5em;
        font-family: monospace;
        font-weight: 300;
    }

    #twp-wrap table {
        width: 100%
    }

    #twp-wrap tr,
    #twp-wrap th,
    #twp-wrap td {
        vertical-align: baseline !important;
        padding-top: 0 !important;
    }

    #floating_save_button {
        width: 65px;
        height: 65px;
        position: absolute;
        background: #CFD8DC;
        border-radius: 50%;
        right: 25px;
        text-align: center;
        opacity: 0.5;
        cursor: pointer;
    }

    #floating_save_button img {
        position: relative;
        top: 20px;
        width: 24px !important;
        height: 24px !important;
    }

    #floating_save_button:hover {
        opacity: 1;
    }

    .tabs {
        width: 100%;
        display: inline-block;
        font-family: iranyekan !important;
    }
    #twp-wrap {
        background: url("https://www.tgju.org/touch-icon-ipad.png") no-repeat;
        background-position: 20px 3px;
        background-size: 7%;
    }
    ul.tab-links {
        margin-bottom: 0px !important
    }

    .tab-links:after {
        display: block;
        clear: both;
        content: ''
    }

    .tab-links li {
        margin: 0 0px 15px 10px;
        float: left;
        list-style: none
    }

    .tab-links img {
        width: 24px !important;
        height: auto !important;
        vertical-align: -0.4em !important;
        margin: 0 5px !important;
    }

    .tab-links a {
        font-family: iranyekan !important;
        padding: 10px 20px !important;
        display: inline-block;
        border-bottom: 0 !important;
        border-radius: 40px;
        background: #E0E0E0;
        font-size: 13px;
        font-weight: 600;
        color: #4c4c4c;
        transition: all linear .15s;
        outline: 0 !important;
        box-shadow: none !important;
        letter-spacing: -0.3px;
    }

    .tab-links a:hover {
        background: #D6D6D6;
        text-decoration: none
    }

    li.active a,
    li.active a:hover {
        background: #fff;
        color: #4c4c4c
    }

    .tab-content {
        padding: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
    }

    .tab {
        display: none
    }

    .tab.active {
        display: flex
    }

    .form-table tr {
        border-bottom: 1px solid #ddd;
    }

    .form-table tr:last-child {
        border-bottom: 0 !important;
    }

    textarea#twp_channel_pattern {
        resize: vertical;
        width: 48%;
        height: auto;
        min-height: 128px;
    }

    div#output-market-overview {
        width: 48%;
        display: inline-block;
        vertical-align: top;
        white-space: pre;
        border: 1px solid #ddd;
        height: 122px;
        background: #F1F1F1;
        cursor: not-allowed;
        padding: 2px 6px;
        overflow-y: auto
    }

    .twp-radio-group {
        line-height: 2em;
    }

    .twp-radio-group input {
        margin-top: 1px;
    }

    .emojione {
        font-size: inherit;
        height: 3ex;
        width: 3.1ex;
        min-height: 20px;
        min-width: 20px;
        display: inline-block;
        margin: -.2ex .15em .2ex;
        line-height: normal;
        vertical-align: middle
    }

    img.emojione {
        width: auto
    }

    .d-flex{
        display: flex;
    }

    @media screen and (max-width: 415px) {
        .twp_label {
            display: none;
        }

        .tab-links img {
            width: 32px !important;
            height: auto !important;
        }
    }
</style>
<?php if (is_rtl()) {
    echo '<style type="text/css"> 
        #floating_save_button{left: 25px !important; right: auto !important;}
        .tab-links li {float:right !important;}
        </style>
        ';
}

?>
<div id="twp-wrap" class="wrap">
    <style id="widget-style"></style>
    <div class="tabs">
        <ul class="tab-links">
            <li class="active"><a href="#tgju_tab1"><span class="twp_label">ویجت نمای بازار</span></a></li>
            <li><a href="#tgju_tab2"><span class="twp_label">ویجت بلوک قیمتی</span></a></li>
            <li><a href="#tgju_tab3"><span class="twp_label">ویجت نوار متحرک قیمت‌ها</span></a></li>
            <li><a href="#tgju_tab4"><span class="twp_label">ویجت چند بلوکی نمایش قیمت‌ها</span></a></li>
            <li><a href="#tgju_tab5"><span class="twp_label">ویجت جدول نمایش قیمت‌ها</span></a></li>
        </ul>

        <div class="modal fade" id="indicator-modal" tabindex="-1" role="dialog" style="display: none;">
            <div class="modal-dialog-box" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <a href="#" class="modal-close" onclick="if (!window.__cfRLUnblockHandlers) return false; $(this).parents('.modal').eq(0).toggle(); return false;" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </a>
                        <div class="modal-title">شاخص یاب</div>
                        <div style="clear: both"></div>
                    </div>
                    <div class="modal-body">
                        <div id="columns2"></div>
                    </div>
                    <div class="modal-footer">
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content">
            <div id="tgju_tab1" class="tab active">
                <div class="container widgets-builder-settings">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-tgju-single-ticker-widget-ticker-widget-title">تنظیمات</span>
                            <div class="widgets-builder-setting-box ">
                                <div class="widget-items-title">
                                    <h2>آیتم ها</h2>
                                    <button onclick="widget_indicator()">
                                        <i class="fa fa-th" aria-hidden="true"></i>
                                        <div class="indicator-btn-title">شاخص یاب</div>
                                    </button>
                                </div>

                                <div class="widget-indicators-market-overview">
                                    <button data-widget-item-market-overview="" name="398096">
                                        بیت کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398096')"></i>
                                    </button>
                                    <button data-widget-item-market-overview="" name="398097">
                                        اتریوم
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398097')"></i>
                                    </button>
                                    <button data-widget-item-market-overview="" name="535605">
                                        سولانا
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('535605')"></i>
                                    </button>
                                    <button data-widget-item-market-overview="" name="398115">
                                        بایننس کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398115')"></i>
                                    </button>
                                    <button data-widget-item-market-overview="" name="398102">
                                        کاردانو
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398102')"></i>
                                    </button>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>ابزارها</h3>
                                </div>
                                <div class="widget-items-settings-checkbox">
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-market-overview="" id="dot" checked=""> نمایش بولت </label>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>رنگ ها</h3>
                                </div>
                                <div class="widget-items-settings-colors">
                                    <label><span>پس زمینه</span><input type="text" id="c-widget-background-tab1" class="colorpicker-tab1" data-control="hue" value="#fff"></label>
                                    <label><span>هاور آیتم</span><input type="text" id="c-widget-item-hover-tab1" class="colorpicker-tab1" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>حاشیه</span><input type="text" id="c-widget-border-tab1" class="colorpicker-tab1" data-control="hue" value="#e0e3eb"></label>
                                    <label><span>رنگ لودینگ</span><input type="text" id="c-widget-loading-tab1" class="colorpicker-tab1" data-control="hue" value="#222222"></label>
                                    <label><span>جداکننده آیتم‌ها</span><input type="text" id="c-widget-seprator-tab1" class="colorpicker-tab1" data-control="hue" value="#e0e3eb"></label>
                                    <label><span>عنوان آیتم</span><input type="text" id="c-widget-title-tab1" class="colorpicker-tab1" data-control="hue" value="#222"></label>
                                    <label><span>رنگ بولت</span><input type="text" id="c-widget-dot-tab1" class="colorpicker-tab1" data-control="hue" value="#fa941a"></label>
                                    <label><span>قیمت آیتم</span><input type="text" id="c-widget-price-tab1" class="colorpicker-tab1" data-control="hue" value="#222"></label>
                                    <label><span>رنگ کاهش تغییر</span><input type="text" id="c-widget-low-tab1" class="colorpicker-tab1" data-control="hue" value="#ef5350"></label>
                                    <label><span>رنگ افزایش تغییر</span><input type="text" id="c-widget-high-tab1" class="colorpicker-tab1" data-control="hue" value="#26a69a"></label>
                                    <label><span>رنگ کپی رایت</span><input type="text" id="c-widget-copyright-tab1" class="colorpicker-tab1" data-control="hue" value="#9db2bd"></label>
                                    <label><span>رنگ کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-tab1" class="colorpicker-tab1" data-control="hue" value="#fff"></label>
                                    <label><span>رنگ متن کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-text-tab1" class="colorpicker-tab1" data-control="hue" value="#222"></label>

                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-12">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد خروجی برای استفاده در سایت</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="output-market-overview" style="direction: ltr;">
                            </textarea>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد shortcode</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="shortcode-market-overview" style="direction: ltr;">
                            </textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="widgets-builder-preview ">
                <div class="widgets-builder-preview-tag">PREVIEW</div>
                    <span class="widgets-builder-preview-title">پیش نمایش</span>
                    <div class="widget-body-market-overview" style="max-width: 350px;margin: auto;">
                        <div class="widget-preview-market-overview">
                            <tgju type="market-overview" items="398096,398097,535605,398115,398102" columns="dot" token="webservice"></tgju>
                            <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tgju_tab2">
                <div class="widgets-builder-preview ">
                    <span class="widgets-builder-preview-title">پیش نمایش</span>
                    <div class="widget-body-ticker-single" style="max-width: 280px;margin: auto;">
                        <div class="widget-preview-ticker-single">
                            <tgju type="ticker-single" items="398096" columns="dot" token="webservice"></tgju>
                            <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                        </div>
                    </div>
                </div>
                <div class="container widgets-builder-settings">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-tgju-single-ticker-widget-ticker-widget-title">تنظیمات</span>
                            <div class="widgets-builder-setting-box ">
                                <div class="widget-items-title">
                                    <h2>آیتم ها</h2>
                                    <button onclick="widget_indicator()">
                                        <i class="fa fa-th" aria-hidden="true"></i>
                                        <div class="indicator-btn-title">شاخص یاب</div>
                                    </button>
                                </div>

                                <div class="widget-indicators-ticker-single">
                                <button data-widget-item-ticker-single="" name="398096" onclick="remove_indicator('398102')">
                                        بیت کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398102')"></i>
                                    </button>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>ابزارها</h3>
                                </div>
                                <div class="widget-items-settings-checkbox">
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-ticker-single="" id="dot" checked=""> نمایش بولت </label>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>رنگ ها</h3>
                                </div>
                                <div class="widget-items-settings-colors">
                                    <label><span>پس زمینه</span><input type="text" id="c-widget-background-tab2" class="colorpicker-tab2" data-control="hue" value="#fff"></label>
                                    <label><span>هاور آیتم</span><input type="text" id="c-widget-item-hover-tab2" class="colorpicker-tab2" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>حاشیه</span><input type="text" id="c-widget-border-tab2" class="colorpicker-tab2" data-control="hue" value="#e0e3eb"></label>
                                    <label><span>جداکننده آیتم‌ها</span><input type="text" id="c-widget-seprator-tab2" class="colorpicker-tab2" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>عنوان آیتم</span><input type="text" id="c-widget-title-tab2" class="colorpicker-tab2" data-control="hue" value="#222"></label>
                                    <label><span>رنگ بولت</span><input type="text" id="c-widget-dot-tab2" class="colorpicker-tab2" data-control="hue" value="#fa941a"></label>
                                    <label><span>قیمت آیتم</span><input type="text" id="c-widget-price-tab2" class="colorpicker-tab2" data-control="hue" value="#222"></label>
                                    <label><span>رنگ کاهش تغییر</span><input type="text" id="c-widget-low-tab2" class="colorpicker-tab2" data-control="hue" value="#ef5350"></label>
                                    <label><span>رنگ افزایش تغییر</span><input type="text" id="c-widget-high-tab2" class="colorpicker-tab2" data-control="hue" value="#26a69a"></label>
                                    <label><span>رنگ کپی رایت</span><input type="text" id="c-widget-copyright-tab2" class="colorpicker-tab2" data-control="hue" value="#9db2bd"></label>
                                    <label><span>رنگ کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-tab2" class="colorpicker-tab2" data-control="hue" value="#fff"></label>
                                    <label><span>رنگ متن کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-text-tab2" class="colorpicker-tab2" data-control="hue" value="#222"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title" style="margin-top: 10px;display: block;">کد خروجی برای استفاده در سایت</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="output-ticker-single" style="direction: ltr;">
                                <tgju
                                    type="ticker-single"
                                    items="398096"
                                    columns="dot"
                                    token="webservice"
                                ></tgju>
                                <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                            </textarea>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد shortcode</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="shortcode-ticker-single" style="direction: ltr;">
                            </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tgju_tab3">
                <div class="widgets-builder-preview ">
                    <div class="container">
                        <span class="widgets-builder-preview-title">پیش نمایش</span>
                        <div class="widget-body-ticker-tap">
                            <div class="widget-preview-ticker-tap">
                                <tgju type="ticker-tap" items="398096,398097,535605,398115,398102" columns="dot" speed="35" token="webservice"></tgju>
                                <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container widgets-builder-settings">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-tgju-single-ticker-widget-ticker-widget-title">تنظیمات</span>
                            <div class="widgets-builder-setting-box ">
                                <div class="widget-items-title">
                                    <h2>آیتم ها</h2>
                                    <button onclick="widget_indicator()">
                                        <i class="fa fa-th" aria-hidden="true"></i>
                                        <div class="indicator-btn-title">شاخص یاب</div>
                                    </button>
                                </div>

                                <div class="widget-indicators-ticker-tap">
                                    <button data-widget-item-ticker-tap="" name="398096">
                                        بیت کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398096')"></i>
                                    </button>
                                    <button data-widget-item-ticker-tap="" name="398097">
                                        اتریوم
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398097')"></i>
                                    </button>
                                    <button data-widget-item-ticker-tap="" name="535605">
                                        سولانا
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('535605')"></i>
                                    </button>
                                    <button data-widget-item-ticker-tap="" name="398115">
                                        بایننس کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398115')"></i>
                                    </button>
                                    <button data-widget-item-ticker-tap="" name="398102">
                                        کاردانو
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398102')"></i>
                                    </button>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>ابزارها</h3>
                                </div>
                                <div class="widget-items-settings-checkbox">
                                    <label>
                                        <input type="checkbox" data-widget-option-ticker-tap="" data-widget-opts-ticker-tap="" id="dot" checked=""> نمایش بولت </label>
                                    <label>
                                        <div class="lable-name">سرعت حرکت</div><input type="number" data-widget-option-text="" class="input-opts" id="speed" value="35">
                                    </label>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>رنگ ها</h3>
                                </div>
                                <div class="widget-items-settings-colors">
                                    <label><span>پس زمینه</span><input type="text" id="c-widget-background-tab3" class="colorpicker-tab3" data-control="hue" value="#fff"></label>
                                    <label><span>هاور آیتم</span><input type="text" id="c-widget-item-hover-tab3" class="colorpicker-tab3" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>حاشیه</span><input type="text" id="c-widget-border-tab3" class="colorpicker-tab3" data-control="hue" value="#e0e3eb"></label>
                                    <label><span>جداکننده آیتم‌ها</span><input type="text" id="c-widget-seprator-tab3" class="colorpicker-tab3" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>عنوان آیتم</span><input type="text" id="c-widget-title-tab3" class="colorpicker-tab3" data-control="hue" value="#222"></label>
                                    <label><span>رنگ بولت</span><input type="text" id="c-widget-dot-tab3" class="colorpicker-tab3" data-control="hue" value="#fa941a"></label>
                                    <label><span>قیمت آیتم</span><input type="text" id="c-widget-price-tab3" class="colorpicker-tab3" data-control="hue" value="#222"></label>
                                    <label><span>رنگ کاهش تغییر</span><input type="text" id="c-widget-low-tab3" class="colorpicker-tab3" data-control="hue" value="#ef5350"></label>
                                    <label><span>رنگ افزایش تغییر</span><input type="text" id="c-widget-high-tab3" class="colorpicker-tab3" data-control="hue" value="#26a69a"></label>
                                    <label><span>رنگ کپی رایت</span><input type="text" id="c-widget-copyright-tab3" class="colorpicker-tab3" data-control="hue" value="#9db2bd"></label>
                                    <label><span>رنگ کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-tab3" class="colorpicker-tab3" data-control="hue" value="#fff"></label>
                                    <label><span>رنگ متن کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-text-tab3" class="colorpicker-tab3" data-control="hue" value="#222"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد خروجی برای استفاده در سایت</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="output-ticker-tap" style="direction: ltr;">
                            <tgju
                                type="ticker-tap"
                                items="398096,398097,535605,398115,398102"
                                columns="dot"
                                speed="35"
                                token="webservice"
                            ></tgju>
                            <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                        </textarea>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد shortcode</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="shortcode-ticker-tap" style="direction: ltr;">
                            </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tgju_tab4">
                <div class="widgets-builder-preview ">
                    <div class="container">
                        <span class="widgets-builder-preview-title">پیش نمایش</span>
                        <div class="widget-body-ticker">
                            <div class="widget-preview-ticker">
                                <tgju type="ticker" items="398096,398097,535605,398115,398102" columns="dot" token="webservice"></tgju>
                                <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container widgets-builder-settings">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-tgju-single-ticker-widget-ticker-widget-title">تنظیمات</span>
                            <div class="widgets-builder-setting-box ">
                                <div class="widget-items-title">
                                    <h2>آیتم ها</h2>
                                    <button onclick="widget_indicator()">
                                        <i class="fa fa-th" aria-hidden="true"></i>
                                        <div class="indicator-btn-title">شاخص یاب</div>
                                    </button>
                                </div>
                                <div class="widget-indicators-ticker">
                                    <button data-widget-item-ticker="" name="398096">
                                        بیت کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398096')"></i>
                                    </button>
                                    <button data-widget-item-ticker="" name="398097">
                                        اتریوم
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398097')"></i>
                                    </button>
                                    <button data-widget-item-ticker="" name="535605">
                                        سولانا
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('535605')"></i>
                                    </button>
                                    <button data-widget-item-ticker="" name="398115">
                                        بایننس کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398115')"></i>
                                    </button>
                                    <button data-widget-item-ticker="" name="398102">
                                        کاردانو
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398102')"></i>
                                    </button>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>ابزارها</h3>
                                </div>
                                <div class="widget-items-settings-checkbox">
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-ticker="" id="dot" checked=""> نمایش بولت </label>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>رنگ ها</h3>
                                </div>
                                <div class="widget-items-settings-colors">
                                    <label><span>پس زمینه</span><input type="text" id="c-widget-background-tab4" class="colorpicker-tab4" data-control="hue" value="#fff"></label>
                                    <label><span>هاور آیتم</span><input type="text" id="c-widget-item-hover-tab4" class="colorpicker-tab4" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>حاشیه</span><input type="text" id="c-widget-border-tab4" class="colorpicker-tab4" data-control="hue" value="#e0e3eb"></label>
                                    <label><span>جداکننده آیتم‌ها</span><input type="text" id="c-widget-seprator-tab4" class="colorpicker-tab4" data-control="hue" value="#f0f3fa"></label>
                                    <label><span>عنوان آیتم</span><input type="text" id="c-widget-title-tab4" class="colorpicker" -tab4 data-control="hue" value="#222"></label>
                                    <label><span>رنگ بولت</span><input type="text" id="c-widget-dot-tab4" class="colorpicker-tab4" data-control="hue" value="#fa941a"></label>
                                    <label><span>قیمت آیتم</span><input type="text" id="c-widget-price-tab4" class="colorpicker-tab4" data-control="hue" value="#222"></label>
                                    <label><span>رنگ کاهش تغییر</span><input type="text" id="c-widget-low-tab4" class="colorpicker-tab4" data-control="hue" value="#ef5350"></label>
                                    <label><span>رنگ افزایش تغییر</span><input type="text" id="c-widget-high-tab4" class="colorpicker-tab4" data-control="hue" value="#26a69a"></label>
                                    <label><span>رنگ کپی رایت</span><input type="text" id="c-widget-copyright-tab4" class="colorpicker-tab4" data-control="hue" value="#9db2bd"></label>
                                    <label><span>رنگ کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-tab4" class="colorpicker-tab4" data-control="hue" value="#fff"></label>
                                    <label><span>رنگ متن کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-text-tab4" class="colorpicker-tab4" data-control="hue" value="#222"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد خروجی برای استفاده در سایت</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="output-ticker" style="direction: ltr;">
                                <tgju
                                    type="ticker"
                                    items="398096,398097,535605,398115,398102"
                                    columns="dot"
                                    token="webservice"
                                ></tgju>
                                <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                            </textarea>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد shortcode</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="shortcode-ticker" style="direction: ltr;">
                            </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tgju_tab5">
                <div class="widgets-builder-preview ">
                    <div class="container">
                        <span class="widgets-builder-preview-title">پیش نمایش</span>
                        <div class="widget-body-market-data">
                            <div class="widget-preview-market-data">
                                <tgju type="market-data" items="398096,398097,535605,398115,398102" columns="dot,diff,low,high,time" token="webservice"></tgju>
                                <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container widgets-builder-settings">
                    <div class="row">
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-tgju-single-ticker-widget-ticker-widget-title">تنظیمات</span>
                            <div class="widgets-builder-setting-box ">
                                <div class="widget-items-title">
                                    <h2>آیتم ها</h2>
                                    <button onclick="widget_indicator()">
                                        <i class="fa fa-th" aria-hidden="true"></i>
                                        <div class="indicator-btn-title">شاخص یاب</div>
                                    </button>
                                </div>

                                <div class="widget-indicators-market-data">
                                    <button data-widget-item-market-data="" name="398096" onclick="remove_indicator('398096')">
                                        بیت کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398096')"></i>
                                    </button>
                                    <button data-widget-item-market-data="" name="398097" onclick="remove_indicator('398097')">
                                        اتریوم
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398097')"></i>
                                    </button>
                                    <button data-widget-item-market-data="" name="535605" onclick="remove_indicator('535605')">
                                        سولانا
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('535605')"></i>
                                    </button>
                                    <button data-widget-item-market-data="" name="398115" onclick="remove_indicator('398115')">
                                        بایننس کوین
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398115')"></i>
                                    </button>
                                    <button data-widget-item-market-data="" name="398102" onclick="remove_indicator('398102')">
                                        کاردانو
                                        <i class="fa fa-times" aria-hidden="true" onclick="remove_indicator('398102')"></i>
                                    </button>
                                </div>

                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>ابزارها</h3>
                                </div>
                                <div class="widget-items-settings-checkbox">
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-market-data="" id="dot" checked=""> نمایش بولت </label>
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-market-data="" id="diff" checked=""> تغییر</label>
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-market-data="" id="low" checked=""> کمترین</label>
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-market-data="" id="high" checked=""> بیشترین</label>
                                    <label><input type="checkbox" data-widget-option="" data-widget-opts-market-data="" id="time" checked=""> زمان</label>
                                </div>
                                <div class="widget-hr"></div>
                                <div class="widget-items-title">
                                    <h3>رنگ ها</h3>
                                </div>
                                <div class="widget-items-settings-colors">
                                    <label><span>پس زمینه</span><input type="text" id="c-widget-background-tab5" class="colorpicker-tab5" data-control="hue" value="#fff"></label>
                                    <label><span>حاشیه</span><input type="text" id="c-widget-border-tab5" class="colorpicker-tab5" data-control="hue" value="#e0e3eb"></label>
                                    <label><span>پس زمینه هدر لیست</span><input type="text" id="c-widget-header-tab5" class="colorpicker-tab5" data-control="hue" value="#fff"></label>
                                    <label><span>رنگ متن هدر لیست</span><input type="text" id="c-widget-header-color-tab5" class="colorpicker-tab5" data-control="hue" value="#222"></label>
                                    <label><span>هاور لیست</span><input type="text" id="c-widget-item-hover-tab5" class="colorpicker-tab5" data-control="hue" value="#ffffd7"></label>
                                    <label><span>جداکننده لیست</span><input type="text" id="c-widget-seprator-tab5" class="colorpicker-tab5" data-control="hue" value="#ececec"></label>
                                    <label><span>عنوان لیست</span><input type="text" id="c-widget-title-tab5" class="colorpicker-tab5" data-control="hue" value="#222"></label>
                                    <label><span>رنگ بولت</span><input type="text" id="c-widget-dot-tab5" class="colorpicker-tab5" data-control="hue" value="#fa941a"></label>
                                    <label><span>قیمت لیست</span><input type="text" id="c-widget-price-tab5" class="colorpicker-tab5" data-control="hue" value="#222"></label>
                                    <label><span>رنگ کاهش تغییر</span><input type="text" id="c-widget-low-tab5" class="colorpicker-tab5" data-control="hue" value="#ef5350"></label>
                                    <label><span>رنگ افزایش تغییر</span><input type="text" id="c-widget-high-tab5" class="colorpicker-tab5" data-control="hue" value="#26a69a"></label>
                                    <label><span>رنگ کپی رایت</span><input type="text" id="c-widget-copyright-tab5" class="colorpicker-tab5" data-control="hue" value="#9db2bd"></label>
                                    <label><span>رنگ کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-tab5" class="colorpicker-tab5" data-control="hue" value="#fff"></label>
                                    <label><span>رنگ متن کپی رایت داخلی</span><input type="text" id="c-widget-copyright-fix-text-tab5" class="colorpicker-tab5" data-control="hue" value="#222"></label>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد خروجی برای استفاده در سایت</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="output-market-data" style="direction: ltr;">
                                <tgju
                                    type="market-data"
                                    items="398096,398097,535605,398115,398102"
                                    columns="dot,diff,low,high,time"
                                    token="webservice"
                                ></tgju>
                                <script src="https://api.accessban.com/v1/widget/v2" defer></script>
                            </textarea>
                            </div>
                        </div>
                        <div class="col-12 col-lg-6">
                            <span class="widgets-builder-tgju-single-ticker-widget-title">کد shortcode</span>
                            <div class="widgets-builder-code-box">
                                <textarea id="shortcode-market-data" style="direction: ltr;">
                            </textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    global_current_tab_type = "market-overview";
    var global_live_current_tab_style = {};
    currentTab = '#tgju_tab1';
    $('.tabs ' + currentTab).fadeIn(400).siblings().hide();
    $('a[href="' + currentTab + '"]').parent('li').addClass('active').siblings().removeClass('active');
    $('.tabs .tab-links a').on('click', function(e) {
        var currentAttrValue = $(this).attr('href');
        // Show/Hide Tabs
        $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
        switch (currentAttrValue) {
            case '#tgju_tab1':
                global_current_tab_type = "market-overview";
                break;
            case '#tgju_tab2':
                global_current_tab_type = "ticker-single";
                break;
            case '#tgju_tab3':
                global_current_tab_type = "ticker-tap";
                break;
            case '#tgju_tab4':
                global_current_tab_type = "ticker";
                break;
            case '#tgju_tab5':
                global_current_tab_type = "market-data";
                break;
            default:
                global_current_tab_type = "market-overview";
                break;
        }
        $('#widget-style').html(global_live_current_tab_style[global_current_tab_type] ?? '');
        console.log(global_current_tab_type);
        console.log(global_live_current_tab_style);
    });
    var global_styles = '';

    function widget_preview(columns, items, reload) {
        var columns_str = items_str = items_url = '';
        var url = 'https://api.accessban.com/v1/widget/v2';

        if (items.length) {
            items_str = items.join(',');
        }

        if (columns.length) {
            columns_str = columns.join(',');
        }
        console.log('shortcode-' + global_current_tab_type);
        var output = '<tgju\n' +
            '\ttype="' + global_current_tab_type + '"\n' +
            '\titems="' + items_str + '"\n' +
            '\tcolumns="' + columns_str + '"\n' +
            '\ttoken="webservice"\n' +
            (global_styles != "" ? "\tstyles='{\n" + global_styles + "\n\t}'" : "") +
            '></tgju>\n' +
            '<script src="' + url + '" defer></scr' + 'ipt>';
        $('#output-' + global_current_tab_type).val(output);

        var shortcode = "[tgju type='"+global_current_tab_type+"' items='"+items_str+"' columns='"+columns_str+"' token='webservice' styles='"+global_styles.replace(/(\r\n|\n|\r|\t)/gm, "")+"']";
        $('#shortcode-' + global_current_tab_type).val(shortcode);

        if (reload) {
            $('.widget-preview-' + global_current_tab_type).remove();
            $('.widget-body-' + global_current_tab_type).prepend(
                '<div class="widget-preview-'+global_current_tab_type+'">\n' +
                '<tgju\n' +
                '\ttype="' + global_current_tab_type + '"\n' +
                '\titems="' + items_str + '"\n' +
                '\tcolumns="' + columns_str + '"\n' +
                '\ttoken="webservice"\n' +
                (global_styles != "" ? "\tstyles='{\n" + global_styles + "\n\t}'" : "") +
                '></tgju>\n' +
                '<script src="' + url + '" defer></scr' + 'ipt>' +
                '</div>'
            );
            $.getScript(url, function() {
                // document.querySelector('.loader').style.display = "none";
            });
        }
    }

    function widget_preview_tab3(columns, items, reload, text_item = [] )
    {
        var columns_str = items_str = items_url = '';
        var url = 'https://api.accessban.com/v1/widget/v2';
        
        if ( items.length ) {
            items_str = items.join(',');
        }

        var add_items = '';

        text_item.forEach(function(e) {
            add_items += '\t'+e+'="'+$('#'+e+'').val()+'"\n';
        });

        console.log(add_items);
        if ( columns.length ) {
            columns_str = columns.join(',');
        }
        
        var output = '<tgju\n'+
                        '\ttype="ticker-tap"\n'+
                        '\titems="'+items_str+'"\n'+
                        '\tcolumns="'+columns_str+'"\n'+
                        ''+add_items+''+
                        '\ttoken="webservice"\n'+
                        (global_styles != "" ? "\tstyles='{\n"+global_styles+"\n\t}'" : "" ) +
                    '></tgju>\n'+
                    '<script src="'+url+'" defer></scr'+'ipt>';
        $('#output-' + global_current_tab_type).val(output);
        var shortcode = "[tgju type='"+global_current_tab_type+"' items='"+items_str+"' columns='"+columns_str+"' "+add_items.replace(/(\r\n|\n|\r|\t)/gm, "")+" token='webservice' styles='"+global_styles.replace(/(\r\n|\n|\r|\t)/gm, "")+"']";
        $('#shortcode-' + global_current_tab_type).val(shortcode);
        if ( reload ) {
            $('.widget-preview-' + global_current_tab_type).remove();
            $('.widget-body-' + global_current_tab_type).prepend(
                '<div class="widget-preview-'+global_current_tab_type+'">\n' +
                    '<tgju\n'+
                        '\ttype="ticker-tap"\n'+
                        '\titems="'+items_str+'"\n'+
                        '\tcolumns="'+columns_str+'"\n'+
                        ''+add_items+''+
                        '\ttoken="webservice"\n'+
                        (global_styles != "" ? "\tstyles='{\n"+global_styles+"\n\t}'" : "" ) +
                    '></tgju>\n'+
                    '<script src="'+url+'" defer></scr'+'ipt>'+
                '</div>'
                );
            $.getScript(url, function() {
                // document.querySelector('.loader').style.display = "none";
            });
        }
    }

    $(document).ready(function() {
        function widget_data_update_tab3() {
            var opts = [];
            $('input[data-widget-opts-'+global_current_tab_type+']:checked').each(function() {
                opts.push($(this).attr('id'));
            });

            var text_item = [];
            $('input[data-widget-option-text]').each(function() {
                text_item.push($(this).attr('id'));
            });

            var items = [];
            $('button[data-widget-item-'+global_current_tab_type+']').each(function() {
                items.push($(this).attr('name'));
            });
            
            return {opts: opts, items: items, text_item: text_item};
        }

        function widget_data_update() {
            var opts = [];
            $('input[data-widget-opts-'+global_current_tab_type+']:checked').each(function() {
                opts.push($(this).attr('id'));
            });

            var items = [];
            $('button[data-widget-item-'+global_current_tab_type+']').each(function() {
                items.push($(this).attr('name'));
            });
            return {
                opts: opts,
                items: items
            };
        }
        $('input[data-widget-option-text]').keyup(function()
        {
            var data = widget_data_update_tab3();
            widget_preview_tab3(data.opts, data.items , true, data.text_item);
        });

        $('input[data-widget-option-ticker-tap]').change(function()
        {
            var data = widget_data_update_tab3();
            widget_preview_tab3(data.opts, data.items , true, data.text_item);
        });

        $('input[data-widget-option]').change(function() {
            var data = widget_data_update();
            widget_preview(data.opts, data.items, true);
        });

        // $("#output").focus(function() {
        //     var $this = $(this);
        //     $this.select();
        //     // Work around Chrome's little p137140lem
        //     $this.mouseup(function() {
        //         // Prevent further mouseup intervention
        //         $this.unbind("mouseup");
        //         return false;
        //     });
        // });
        $.getScript('https://static.accessban.com/components/minicolors/jquery.minicolors.js', function() {
            $('.colorpicker-tab1').each(function() {
                $(this).minicolors({
                    control: $(this).attr('data-control') || 'hue',
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    format: $(this).attr('data-format') || 'hex',
                    keywords: $(this).attr('data-keywords') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
                    opacity: $(this).attr('data-opacity'),
                    position: $(this).attr('data-position') || 'bottom left',
                    changeDelay: 500,
                    change: function(hex, opacity) {
                        var log;
                        try {
                            var styles = '';
                            var live_styles = '';
                            if ($('#c-widget-background-tab1').val() != "#ffffff") {
                                styles += '\t\t"background": "' + $('#c-widget-background-tab1').val() + '",\n';
                                live_styles += '.tgju-widget {background-color: ' + $('#c-widget-background-tab1').val() + ' !important;}';
                            }

                            if ($('#c-widget-loading-tab1').val() != "#222222") {
                                styles += '\t\t"loading": "' + $('#c-widget-loading-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-loading svg{fill: ' + $('#c-widget-loading-tab1').val() + ' !important;}';
                            }

                            if ($('#c-widget-item-hover-tab1').val() != "#f0f3fa") {
                                styles += '\t\t"hover": "' + $('#c-widget-item-hover-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item:hover {background: ' + $('#c-widget-item-hover-tab1').val() + ' !important;}';
                            }
                            if ($('#c-widget-border-tab1').val() != "#e0e3eb") {
                                styles += '\t\t"border": "' + $('#c-widget-border-tab1').val() + '",\n';
                                live_styles += '.tgju-widget {border-color: ' + $('#c-widget-border-tab1').val() + ' !important;}';
                            }
                            if ($('#c-widget-seprator-tab1').val() != "#e0e3eb") {
                                styles += '\t\t"separator": "' + $('#c-widget-seprator-tab1').val() + '",\n';
                                live_styles += '.tgju-widget.tgju-widget-box ul li{border-top: 1px solid ' + $('#c-widget-seprator-tab1').val() + ' !important;}';
                            }
                            if ($('#c-widget-title-tab1').val() != "#222222") {
                                styles += '\t\t"title": "' + $('#c-widget-title-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text{color: ' + $('#c-widget-title-tab1').val() + ' !important;}';
                            }

                            if ($('#c-widget-dot-tab1').val() != "#fa941a") {
                                styles += '\t\t"dot": "' + $('#c-widget-dot-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text.dot:before{background: ' + $('#c-widget-dot-tab1').val() + ' !important;}';
                            }

                            if ($('#c-widget-price-tab1').val() != "#222222") {
                                styles += '\t\t"price": "' + $('#c-widget-price-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-current-price{color: ' + $('#c-widget-price-tab1').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-widget-item{color: ' + $('#c-widget-price-tab1').val() + ' !important;}';
                            }
                            if ($('#c-widget-low-tab1').val() != "#ef5350") {
                                styles += '\t\t"low": "' + $('#c-widget-low-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-low .tgju-widget-content-row{color: ' + $('#c-widget-low-tab1').val() + ' !important;}';
                            }
                            if ($('#c-widget-high-tab1').val() != "#26a69a") {
                                styles += '\t\t"high": "' + $('#c-widget-high-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-high .tgju-widget-content-row{color: ' + $('#c-widget-high-tab1').val() + ' !important;}';
                            }
                            if ($('#c-widget-copyright-tab1').val() != "#9db2bd") {
                                styles += '\t\t"copyright": "' + $('#c-widget-copyright-tab1').val() + '",\n';
                                live_styles += '.tgju-copyright{color: ' + $('#c-widget-copyright-tab1').val() + ' !important;}';
                                live_styles += '.tgju-copyright a{color: ' + $('#c-widget-copyright-tab1').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-tab1').val() != "#ffffff") {
                                styles += '\t\t"copyright_fix": "' + $('#c-widget-copyright-fix-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix{background: ' + $('#c-widget-copyright-fix-tab1').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-text-tab1').val() != "#222222") {
                                styles += '\t\t"copyright_fix_text": "' + $('#c-widget-copyright-fix-text-tab1').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix a svg g{fill: ' + $('#c-widget-copyright-fix-text-tab1').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix a{color: ' + $('#c-widget-copyright-fix-text-tab1').val() + ' !important;}';
                            }

                            global_styles = styles.slice(0, -2);

                            $('#widget-style').html(live_styles);
                            global_live_current_tab_style[global_current_tab_type] = live_styles;
                            var data = widget_data_update();
                            widget_preview(data.opts, data.items, true);
                        } catch (e) {}
                    },
                    theme: 'default'
                });
            });

            $('.colorpicker-tab2').each(function() {
                $(this).minicolors({
                    control: $(this).attr('data-control') || 'hue',
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    format: $(this).attr('data-format') || 'hex',
                    keywords: $(this).attr('data-keywords') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
                    opacity: $(this).attr('data-opacity'),
                    position: $(this).attr('data-position') || 'bottom left',
                    changeDelay: 500,
                    change: function(hex, opacity) {
                        var log;
                        try {
                            var styles = '';
                            var live_styles = '';
                            if ($('#c-widget-background-tab2').val() != "#ffffff") {
                                styles += '\t\t"background": "' + $('#c-widget-background-tab2').val() + '",\n';
                                live_styles += '.tgju-widget {background-color: ' + $('#c-widget-background-tab2').val() + ' !important;}';
                            }
                            if ($('#c-widget-item-hover-tab2').val() != "#f0f3fa") {
                                styles += '\t\t"hover": "' + $('#c-widget-item-hover-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item:hover {background: ' + $('#c-widget-item-hover-tab2').val() + ' !important;}';
                            }
                            if ($('#c-widget-border-tab2').val() != "#e0e3eb") {
                                styles += '\t\t"border": "' + $('#c-widget-border-tab2').val() + '",\n';
                                live_styles += '.tgju-widget {border-color: ' + $('#c-widget-border-tab2').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix{box-shadow:-1px 0 3px 0 ' + $('#c-widget-border').val() + ' !important;}';
                            }
                            if ($('#c-widget-seprator-tab2').val() != "#f0f3fa") {
                                styles += '\t\t"separator": "' + $('#c-widget-seprator').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item::after{background: ' + $('#c-widget-seprator').val() + ' !important;}';
                            }
                            if ($('#c-widget-title-tab2').val() != "#222222") {
                                styles += '\t\t"title": "' + $('#c-widget-title-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text{color: ' + $('#c-widget-title-tab2').val() + ' !important;}';
                            }
                            if ($('#c-widget-dot-tab2').val() != "#fa941a") {
                                styles += '\t\t"dot": "' + $('#c-widget-dot-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text.dot:before{background: ' + $('#c-widget-dot-tab2').val() + ' !important;}';
                            }
                            if ($('#c-widget-price-tab2').val() != "#222222") {
                                styles += '\t\t"price": "' + $('#c-widget-price-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-current-price{color: ' + $('#c-widget-price-tab2').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-widget-item{color: ' + $('#c-widget-price-tab2').val() + ' !important;}';
                            }
                            if ($('#c-widget-low-tab2').val() != "#ef5350") {
                                styles += '\t\t"low": "' + $('#c-widget-low-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-low .tgju-widget-content-row{color: ' + $('#c-widget-low-tab2').val() + ' !important;}';
                            }
                            if ($('#c-widget-high-tab2').val() != "#26a69a") {
                                styles += '\t\t"high": "' + $('#c-widget-high-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-high .tgju-widget-content-row{color: ' + $('#c-widget-high-tab2').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-tab2').val() != "#9db2bd") {
                                styles += '\t\t"copyright": "' + $('#c-widget-copyright-tab2').val() + '",\n';
                                live_styles += '.tgju-copyright{color: ' + $('#c-widget-copyright-tab2').val() + ' !important;}';
                                live_styles += '.tgju-copyright a{color: ' + $('#c-widget-copyright-tab2').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-tab2').val() != "#ffffff") {
                                styles += '\t\t"copyright_fix": "' + $('#c-widget-copyright-fix-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix{background: ' + $('#c-widget-copyright-fix-tab2').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-text-tab2').val() != "#222222") {
                                styles += '\t\t"copyright_fix_text": "' + $('#c-widget-copyright-fix-text-tab2').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix a svg g{fill: ' + $('#c-widget-copyright-fix-text-tab2').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix a{color: ' + $('#c-widget-copyright-fix-text-tab2').val() + ' !important;}';
                            }

                            global_styles = styles.slice(0, -2);
                            $('#widget-style').html(live_styles);
                            global_live_current_tab_style[global_current_tab_type] = live_styles;
                            var data = widget_data_update();
                            widget_preview(data.opts, data.items, false);
                        } catch (e) {}
                    },
                    theme: 'default'
                });
            });

            $('.colorpicker-tab3').each(function() {
                $(this).minicolors({
                    control: $(this).attr('data-control') || 'hue',
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    format: $(this).attr('data-format') || 'hex',
                    keywords: $(this).attr('data-keywords') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
                    opacity: $(this).attr('data-opacity'),
                    position: $(this).attr('data-position') || 'bottom left',
                    changeDelay: 500,
                    change: function(hex, opacity) {
                        var log;
                        try {
                            var styles = '';
                            var live_styles = '';
                            if ($('#c-widget-background-tab3').val() != "#ffffff") {
                                styles += '\t\t"background": "' + $('#c-widget-background-tab3').val() + '",\n';
                                live_styles += '.tgju-widget {background-color: ' + $('#c-widget-background-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-item-hover-tab3').val() != "#f0f3fa") {
                                styles += '\t\t"hover": "' + $('#c-widget-item-hover-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item:hover {background: ' + $('#c-widget-item-hover-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-border-tab3').val() != "#e0e3eb") {
                                styles += '\t\t"border": "' + $('#c-widget-border-tab3').val() + '",\n';
                                live_styles += '.tgju-widget {border-color: ' + $('#c-widget-border-tab3').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix{box-shadow:-1px 0 3px 0 ' + $('#c-widget-border-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-seprator-tab3').val() != "#f0f3fa") {
                                styles += '\t\t"separator": "' + $('#c-widget-seprator-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item::after{background: ' + $('#c-widget-seprator-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-title-tab3').val() != "#222222") {
                                styles += '\t\t"title": "' + $('#c-widget-title-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text{color: ' + $('#c-widget-title-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-dot-tab3').val() != "#fa941a") {
                                styles += '\t\t"dot": "' + $('#c-widget-dot-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text.dot:before{background: ' + $('#c-widget-dot-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-price-tab3').val() != "#222222") {
                                styles += '\t\t"price": "' + $('#c-widget-price-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-current-price{color: ' + $('#c-widget-price-tab3').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-widget-item{color: ' + $('#c-widget-price-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-low-tab3').val() != "#ef5350") {
                                styles += '\t\t"low": "' + $('#c-widget-low-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-low .tgju-widget-content-row{color: ' + $('#c-widget-low-tab3').val() + ' !important;}';
                            }
                            if ($('#c-widget-high-tab3').val() != "#26a69a") {
                                styles += '\t\t"high": "' + $('#c-widget-high-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-high .tgju-widget-content-row{color: ' + $('#c-widget-high-tab3').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-tab3').val() != "#9db2bd") {
                                styles += '\t\t"copyright": "' + $('#c-widget-copyright-tab3').val() + '",\n';
                                live_styles += '.tgju-copyright{color: ' + $('#c-widget-copyright-tab3').val() + ' !important;}';
                                live_styles += '.tgju-copyright a{color: ' + $('#c-widget-copyright-tab3').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-tab3').val() != "#ffffff") {
                                styles += '\t\t"copyright_fix": "' + $('#c-widget-copyright-fix-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix{background: ' + $('#c-widget-copyright-fix-tab3').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-text-tab3').val() != "#222222") {
                                styles += '\t\t"copyright_fix_text": "' + $('#c-widget-copyright-fix-text-tab3').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix a svg g{fill: ' + $('#c-widget-copyright-fix-text-tab3').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix a{color: ' + $('#c-widget-copyright-fix-text-tab3').val() + ' !important;}';
                            }



                            global_styles = styles.slice(0, -2);
                            $('#widget-style').html(live_styles);
                            global_live_current_tab_style[global_current_tab_type] = live_styles;
                            var data = widget_data_update_tab3();
                            widget_preview_tab3(data.opts, data.items, true, data.text_item);
                        } catch (e) {}
                    },
                    theme: 'default'
                });
            });

            $('.colorpicker-tab4').each(function() {
                $(this).minicolors({
                    control: $(this).attr('data-control') || 'hue',
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    format: $(this).attr('data-format') || 'hex',
                    keywords: $(this).attr('data-keywords') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
                    opacity: $(this).attr('data-opacity'),
                    position: $(this).attr('data-position') || 'bottom left',
                    changeDelay: 500,
                    change: function(hex, opacity) {
                        var log;
                        try {
                            var styles = '';
                            var live_styles = '';
                            if ($('#c-widget-background-tab4').val() != "#ffffff") {
                                styles += '\t\t"background": "' + $('#c-widget-background-tab4').val() + '",\n';
                                live_styles += '.tgju-widget {background-color: ' + $('#c-widget-background-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-item-hover-tab4').val() != "#f0f3fa") {
                                styles += '\t\t"hover": "' + $('#c-widget-item-hover-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item:hover {background: ' + $('#c-widget-item-hover-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-border-tab4').val() != "#e0e3eb") {
                                styles += '\t\t"border": "' + $('#c-widget-border-tab4').val() + '",\n';
                                live_styles += '.tgju-widget {border-color: ' + $('#c-widget-border-tab4').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix{box-shadow:-1px 0 3px 0 ' + $('#c-widget-border-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-seprator-tab4').val() != "#f0f3fa") {
                                styles += '\t\t"separator": "' + $('#c-widget-seprator-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item::after{background: ' + $('#c-widget-seprator-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-title-tab4').val() != "#222222") {
                                styles += '\t\t"title": "' + $('#c-widget-title-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text{color: ' + $('#c-widget-title-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-dot-tab4').val() != "#fa941a") {
                                styles += '\t\t"dot": "' + $('#c-widget-dot-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text.dot:before{background: ' + $('#c-widget-dot-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-price-tab4').val() != "#222222") {
                                styles += '\t\t"price": "' + $('#c-widget-price-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-current-price{color: ' + $('#c-widget-price-tab4').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-widget-item{color: ' + $('#c-widget-price-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-low-tab4').val() != "#ef5350") {
                                styles += '\t\t"low": "' + $('#c-widget-low-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-low .tgju-widget-content-row{color: ' + $('#c-widget-low-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-high-tab4').val() != "#26a69a") {
                                styles += '\t\t"high": "' + $('#c-widget-high-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-item.widget-high .tgju-widget-content-row{color: ' + $('#c-widget-high-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-copyright-tab4').val() != "#9db2bd") {
                                styles += '\t\t"copyright": "' + $('#c-widget-copyright-tab4').val() + '",\n';
                                live_styles += '.tgju-copyright{color: ' + $('#c-widget-copyright-tab4').val() + ' !important;}';
                                live_styles += '.tgju-copyright a{color: ' + $('#c-widget-copyright-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-copyright-fix-tab4').val() != "#ffffff") {
                                styles += '\t\t"copyright_fix": "' + $('#c-widget-copyright-fix-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix{background: ' + $('#c-widget-copyright-fix-tab4').val() + ' !important;}';
                            }
                            if ($('#c-widget-copyright-fix-text-tab4').val() != "#222222") {
                                styles += '\t\t"copyright_fix_text": "' + $('#c-widget-copyright-fix-text-tab4').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix a svg g{fill: ' + $('#c-widget-copyright-fix-text-tab4').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix a{color: ' + $('#c-widget-copyright-fix-text-tab4').val() + ' !important;}';
                            }
                            global_styles = styles.slice(0, -2);
                            $('#widget-style').html(live_styles);
                            global_live_current_tab_style[global_current_tab_type] = live_styles;
                            var data = widget_data_update();
                            widget_preview(data.opts, data.items, true);
                        } catch (e) {}
                    },
                    theme: 'default'
                });
            });

            $('.colorpicker-tab5').each(function() {
                $(this).minicolors({
                    control: $(this).attr('data-control') || 'hue',
                    defaultValue: $(this).attr('data-defaultValue') || '',
                    format: $(this).attr('data-format') || 'hex',
                    keywords: $(this).attr('data-keywords') || '',
                    inline: $(this).attr('data-inline') === 'true',
                    letterCase: $(this).attr('data-letterCase') || 'lowercase',
                    opacity: $(this).attr('data-opacity'),
                    position: $(this).attr('data-position') || 'bottom left',
                    changeDelay: 500,
                    change: function(hex, opacity) {
                        var log;
                        try {
                            var styles = '';
                            var live_styles = '';
                            if ($('#c-widget-background-tab5').val() != "#ffffff") {
                                styles += '\t\t"background": "' + $('#c-widget-background-tab5').val() + '",\n';
                                live_styles += '.tgju-widget {background-color: ' + $('#c-widget-background-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-header-tab5').val() != "#ffffff") {
                                styles += '\t\t"hbackground": "' + $('#c-widget-header-tab5').val() + '",\n';
                                live_styles += 'html .tgju-widget .tgju-widget-table thead tr th {background-color: ' + $('#c-widget-header-tab5').val() + ' !important;}';
                            }

                            if ($('#c-widget-header-color-tab5').val() != "#222222") {
                                styles += '\t\t"hcolor": "' + $('#c-widget-header-color-tab5').val() + '",\n';
                                live_styles += 'html .tgju-widget .tgju-widget-table thead tr th {color: ' + $('#c-widget-header-color-tab5').val() + ' !important;}';
                            }

                            if ($('#c-widget-item-hover-tab5').val() != "#ffffd7") {
                                styles += '\t\t"hover": "' + $('#c-widget-item-hover-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-table tbody tr:hover {background: ' + $('#c-widget-item-hover-tab5').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-widget-table tbody tr:hover td {background: ' + $('#c-widget-item-hover-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-border-tab5').val() != "#e0e3eb") {
                                styles += '\t\t"border": "' + $('#c-widget-border-tab5').val() + '",\n';
                                live_styles += '.tgju-widget {border-color: ' + $('#c-widget-border-tab5').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix{box-shadow:-1px 0 3px 0 ' + $('#c-widget-border-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-seprator-tab5').val() != "#ececec") {
                                styles += '\t\t"borderlist": "' + $('#c-widget-seprator-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-table tr td{border-top: 1px solid  ' + $('#c-widget-seprator-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-title-tab5').val() != "#222222") {
                                styles += '\t\t"title": "' + $('#c-widget-title-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-table .tgju-widget-table-title {color: ' + $('#c-widget-title-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-dot-tab5').val() != "#fa941a") {
                                styles += '\t\t"dot": "' + $('#c-widget-dot-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-title-text.dot:before{background: ' + $('#c-widget-dot-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-price-tab5').val() != "#222222") {
                                styles += '\t\t"price": "' + $('#c-widget-price-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-table tr td{color: ' + $('#c-widget-price-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-low-tab5').val() != "#ef5350") {
                                styles += '\t\t"low": "' + $('#c-widget-low-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-table .c-low{color: ' + $('#c-widget-low-tab5').val() + ' !important;}';
                            }
                            if ($('#c-widget-high-tab5').val() != "#26a69a") {
                                styles += '\t\t"high": "' + $('#c-widget-high-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-widget-table .c-high{color: ' + $('#c-widget-high-tab5').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-tab5').val() != "#9db2bd") {
                                styles += '\t\t"copyright": "' + $('#c-widget-copyright-tab5').val() + '",\n';
                                live_styles += '.tgju-copyright{color: ' + $('#c-widget-copyright-tab5').val() + ' !important;}';
                                live_styles += '.tgju-copyright a{color: ' + $('#c-widget-copyright-tab5').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-tab5').val() != "#ffffff") {
                                styles += '\t\t"copyright_fix": "' + $('#c-widget-copyright-fix-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix{background: ' + $('#c-widget-copyright-fix-tab5').val() + ' !important;}';
                            }

                            if ($('#c-widget-copyright-fix-text-tab5').val() != "#222222") {
                                styles += '\t\t"copyright_fix_text": "' + $('#c-widget-copyright-fix-text-tab5').val() + '",\n';
                                live_styles += '.tgju-widget .tgju-copyright-fix a svg g{fill: ' + $('#c-widget-copyright-fix-text-tab5').val() + ' !important;}';
                                live_styles += '.tgju-widget .tgju-copyright-fix a{color: ' + $('#c-widget-copyright-fix-text-tab5').val() + ' !important;}';
                            }

                            global_styles = styles.slice(0, -2);
                            $('#widget-style').html(live_styles);
                            global_live_current_tab_style[global_current_tab_type] = live_styles;
                            var data = widget_data_update();
                            widget_preview(data.opts, data.items, true);
                        } catch (e) {}
                    },
                    theme: 'default'
                });
            });


        });


    });

    function remove_indicator(item) {
        if ($('.widget-indicators-'+global_current_tab_type+' button').length <= 1) {

            Swal.fire({
                title: 'خطا!',
                text: 'حداقل 1 شاخص باید در لیست موجود باشد',
                icon: 'error',
                confirmButtonText: 'بستن'
            })

        } else {

            $('.widget-indicators-'+global_current_tab_type+' button[name="' + item + '"]').remove();

            var opts_h = [];
            $('input[data-widget-opts-'+global_current_tab_type+']:checked').each(function() {
                opts_h.push($(this).attr('id'));
            });

            var items_h = [];
            $('button[data-widget-item-'+global_current_tab_type+']').each(function() {
                items_h.push($(this).attr('name'));
            });

            var text_item = [];
            $('input[data-widget-option-text]').each(function() {
                text_item.push($(this).attr('id'));
            });

            if (global_current_tab_type == 'ticker-tap') {
                widget_preview_tab3(opts_h, items_h, true, text_item);
            } else {
                widget_preview(opts_h, items_h, true);
            }
        }
    }

    function widget_indicator() {

        if ($('.widget-indicators-'+global_current_tab_type+' button').length >= 10) {
            Swal.fire({
                title: 'خطا!',
                text: 'حداکثر 10 شاخص قابل افزودن به ویجت می باشد',
                icon: 'error',
                confirmButtonText: 'بستن'
            })
        } else {
            $('#indicator-modal').show();
            $('#indicator-modal #columns2').html('');
            var link = document.createElement('link');
            link.setAttribute('rel', 'stylesheet');
            link.setAttribute('href', 'https://static.accessban.com/components/hcolumns/inc/hcolumns.css');
            document.getElementsByTagName('head')[0].appendChild(link);
            $.getScript("https://static.accessban.com/views/default/js/wp-hcolumns.js?01", function(data, textStatus, jqxhr) {
                $("#columns2").hColumns({
                    noContentString: $('html').attr('lang') == 'fa' ? 'شاخصی در این بخش وجود ندارد' : 'There is no index in this section',
                    searchable: !0,
                    searchPlaceholderString: $('html').attr('lang') == 'fa' ? 'فیلتر' : 'Filter',
                    customNodeTypeIndicator: {},
                    customNodeTypeHandler: {},
                    nodeSource: function(node_id, callback) {
                        if (!$('.column-loading').is(':visible')) {
                            $('.column-loading').show();
                            var category_id = node_id == null ? 0 : node_id;
                            var isMarket = $("#columns2.column-view-container .column > ul > li[data-node-id='" + node_id + "']").data('market');
                            if (typeof isMarket == "undefined")
                                isMarket = !1;
                            $.ajax({
                                type: 'get',
                                url: "https://api.accessban.com/v1/market/finder/list",
                                data: {
                                    type: 'dashboard',
                                    market: isMarket,
                                    id: category_id,
                                    lang: 'fa'
                                },
                                headers: {
                                    'X-Client-Name': 'main_site',
                                    'X-Client-Version': '1',
                                    'X-Client-SubSystem': 'main_site',
                                }
                            }).done(function(data) {
                                data = data.response.items;
                                $('.column-loading').hide();
                                return callback(null, data)
                            }).fail(function() {
                                return callback("AJAX error")
                            })
                        }
                    }
                });
                $('.column-view-composition').append('<span class="column-loading">درحال بارگزاری</span>')
            });
        }

    }
</script>