    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-js">$(document).ready(function(){
    builder.reArrangeLayout();
    builder.triggerDragnDrop();

    $(&#039;.widget-row&#039;).click(function () {
        $(this).css(&#039;cursor&#039;, &#039;grabbing&#039;);
        $(this).css(&#039;cursor&#039;, &#039;-moz-grabbing&#039;);
        $(this).css(&#039;cursor&#039;, &#039;-webkit-grabbing&#039;);
    })
});

var builder = {
    &#039;triggerDragnDrop&#039; : function () {
        $(&#039;.droparea&#039;).sortable({
            placeholder: &quot;ui-state-highlight&quot;,
            connectWith: &#039;.droparea&#039;,
            items: &#039;.moveable&#039;,
            receive: function () {
                var main_col_pos = $(this).closest(&#039;.main-column&#039;).find(&#039;.main-col-pos&#039;).val();
                var main_row_pos = $(this).closest(&#039;.widget-row&#039;).find(&#039;.main-row-pos&#039;).val();
                var sub_col_pos = $(this).closest(&#039;.column-area&#039;).find(&#039;.sub-col-pos&#039;).val();
                var sub_row_pos = $(this).closest(&#039;.sub-row&#039;).find(&#039;.sub-row-pos&#039;).val();

                $(this).find(&#039;.module-in-main-row&#039;).val(main_row_pos);
                $(this).find(&#039;.module-in-main-col&#039;).val(main_col_pos);
                $(this).find(&#039;.module-in-sub-row&#039;).val(sub_row_pos);
                $(this).find(&#039;.module-in-sub-col&#039;).val(sub_col_pos);
            },
            stop: function() {
                builder.reArrangeLayout();
            }
        }).droppable({
            accept: &#039;.moveable&#039;
        });

        $(&#039;.widget-container&#039;).sortable({
            placeholder: &quot;ui-state-highlight&quot;,
            stop: function () {
                builder.reArrangeLayout();
            }
        });
    },

    &#039;plusMainColumn&#039; : function (container) {
        var column_count = parseInt(container.closest(&#039;.col-count&#039;).find(&#039;.count&#039;).text());
        if(column_count &lt; 12) {
            if(column_count &lt; 4) {
                column_count++;
            } else {
                if(column_count &gt;= 4 &amp;&amp; column_count &lt; 6) {
                    column_count = 6;
                } else {
                    if(column_count &gt;= 6) column_count = 12;
                }
            }

            container.closest(&#039;.col-count&#039;).find(&#039;.count&#039;).html(column_count);
            var row_container = container.closest(&#039;.widget-row&#039;).find(&#039;.row-content&#039;);
            builder.divideMainColumn(column_count, row_container);
        }

        builder.triggerDragnDrop();
    },

    &#039;plusSubColumn&#039; : function (container) {
        var column_count = parseInt(container.closest(&#039;.sub-col-count&#039;).find(&#039;.count&#039;).text());
        if(column_count &lt; 12) {
            if(column_count &lt; 4) {
                column_count++;
            } else {
                if(column_count &gt;= 4 &amp;&amp; column_count &lt; 6) {
                    column_count = 6;
                } else {
                    if(column_count &gt;= 6) column_count = 12;
                }
            }

            container.closest(&#039;.sub-col-count&#039;).find(&#039;.count&#039;).html(column_count);
            var row_container = container.closest(&#039;.sub-row&#039;).find(&#039;.sub-row-content&#039;);
            builder.divideSubColumn(column_count, row_container);
        }

        builder.triggerDragnDrop();
    },

    &#039;minusMainColumn&#039; : function (container) {
        var column_count = parseInt(container.closest(&#039;.col-count&#039;).find(&#039;.count&#039;).text());
        if(column_count &gt; 1) {
            if(column_count &lt;= 12 &amp;&amp; column_count &gt; 6) {
                column_count = 6;
            } else {
                if(column_count &lt;= 6 &amp;&amp; column_count &gt; 4) {
                    column_count = 4;
                } else {
                    if(column_count &lt;= 4) {
                        column_count--;
                    }
                }
            }
            container.closest(&#039;.col-count&#039;).find(&#039;.count&#039;).html(column_count);
            var row_container = container.closest(&#039;.widget-row&#039;).find(&#039;.row-content&#039;);
            builder.divideMainColumn(column_count, row_container);
        }

        builder.triggerDragnDrop();
    },

    &#039;minusSubColumn&#039; : function (container) {
        var column_count = parseInt(container.closest(&#039;.sub-col-count&#039;).find(&#039;.count&#039;).text());
        if(column_count &gt; 1) {
            if(column_count &lt;= 12 &amp;&amp; column_count &gt; 6) {
                column_count = 6;
            } else {
                if(column_count &lt;= 6 &amp;&amp; column_count &gt; 4) {
                    column_count = 4;
                } else {
                    if(column_count &lt;= 4) {
                        column_count--;
                    }
                }
            }
            container.closest(&#039;.sub-col-count&#039;).find(&#039;.count&#039;).html(column_count);
            var row_container = container.closest(&#039;.sub-row&#039;).find(&#039;.sub-row-content&#039;);
            builder.divideSubColumn(column_count, row_container);
        }

        builder.triggerDragnDrop();
    },

    &#039;customMainColumns&#039; : function (container) {
        var row_container = container.closest(&#039;.widget-row&#039;).find(&#039;.row-content&#039;);
        builder.setUpMainColumns(row_container);
        builder.triggerDragnDrop();
    },

    &#039;customSubColumns&#039; : function (container) {
        var row_container = container.closest(&#039;.sub-row&#039;).find(&#039;.sub-row-content&#039;);
        builder.setUpSubColumns(row_container);
        builder.triggerDragnDrop();
    },

    &#039;divideMainColumn&#039; : function (col_number, container) {
        switch (col_number) {
            case 1:
                builder.drawMainColumns(&quot;12&quot;, container);
                break;
            case 2:
                builder.drawMainColumns(&quot;6 + 6&quot;, container);
                break;
            case 3:
                builder.drawMainColumns(&quot;4 + 4 + 4&quot;, container);
                break;
            case 4:
                builder.drawMainColumns(&quot;3 + 3 + 3 + 3&quot;, container);
                break;
            case 6:
                builder.drawMainColumns(&quot;2 + 2 + 2 + 2 + 2 + 2&quot;, container);
                break;
            case 12:
                builder.drawMainColumns(&quot;1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1&quot;, container);
                break;
            default: break;
        }
        builder.triggerDragnDrop();
    },

    &#039;divideSubColumn&#039; : function (col_number, container) {
        switch (col_number) {
            case 1:
                builder.drawSubColumns(&quot;12&quot;, container);
                break;
            case 2:
                builder.drawSubColumns(&quot;6 + 6&quot;, container);
                break;
            case 3:
                builder.drawSubColumns(&quot;4 + 4 + 4&quot;, container);
                break;
            case 4:
                builder.drawSubColumns(&quot;3 + 3 + 3 + 3&quot;, container);
                break;
            case 6:
                builder.drawSubColumns(&quot;2 + 2 + 2 + 2 + 2 + 2&quot;, container);
                break;
            case 12:
                builder.drawSubColumns(&quot;1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1&quot;, container);
                break;
            default: break;
        }
        builder.triggerDragnDrop();
    },

    &#039;setUpSubColumns&#039; : function (container) {
        var cols = container.closest(&#039;.sub-row&#039;).find(&#039;.sub-cols-format&#039;).val();
        var text_custom_columns = $(&#039;#text-custom-columns&#039;).val();
        var columns = prompt(text_custom_columns, cols);
        if(columns !== null) {
            builder.drawSubColumns(columns, container);
        }
        builder.triggerDragnDrop();
    },

    &#039;setUpMainColumns&#039; : function (container) {
        var cols = container.closest(&#039;.widget-row&#039;).find(&#039;.cols-format&#039;).val();
        var text_custom_columns = $(&#039;#text-custom-columns&#039;).val();
        var columns = prompt(text_custom_columns, cols);
        if(columns !== null) {
            builder.drawMainColumns(columns, container);
        }
        builder.triggerDragnDrop();
    },

    &#039;drawSubColumns&#039; : function (cols, container) {
        var html = &quot;&quot;;
        var count = 0;
        var col_count = 0;
        var isDraw = false;
        var row_pos = container.closest(&#039;.widget-row&#039;).find(&#039;.main-row-pos&#039;).val();
        var main_col_pos = container.closest(&#039;.main-column&#039;).find(&#039;.main-col-pos&#039;).val();
        var sub_row_pos = container.closest(&#039;.sub-row&#039;).find(&#039;.sub-row-pos&#039;).val();
        var text_insert_module = $(&#039;#text-insert-module&#039;).val();
        var text_add_module = $(&#039;#text-add-module&#039;).val();
        var text_columns_error_format = $(&#039;#text-columns-error-format&#039;).val();

        var columns = cols.split(&#039;+&#039;).map(function (str) {
            return str.trim();
        });

        if(columns) {
            var col_num = columns.length;

            columns.forEach(function (col) {
                if(col != &quot;0&quot;) {
                    count += parseInt(col);
                } else {
                    count = 13;
                }
            });

            if(count == 12) {
                isDraw = true;
            }

            if(isDraw) {
                columns.forEach(function (col) {
                    if(container.has(&#039;.sub-col-&#039; + col_count + &#039; .layout-module-info&#039;).length) {
                        html += &#039;           &lt;div class=&quot;col-sm-&#039; + col + &#039; column-area&quot;&gt;&#039;;
                        html += &#039;               &lt;div class=&quot;module-area droparea ui-droppable ui-sortable sub-col-&#039; + col_count + &#039;&quot;&gt;&#039;;
                        html +=                 container.find(&#039;.sub-col-&#039; + col_count).html();
                        html += &#039;               &lt;/div&gt;&#039;;
                        html += &#039;               &lt;div class=&quot;col-action&quot;&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;action-group&quot;&gt;&#039;;
                        html += &#039;                       &lt;a class=&quot;a-module-add&quot; onclick=&quot;builder.showAllModules($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt; &#039; + text_add_module + &#039;&lt;/a&gt;&#039;;
                        html += &#039;                   &lt;/div&gt;&#039;;
                        html += &#039;               &lt;/div&gt;&#039;;
                        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-col-pos&quot; value=&quot;&#039; + col_count + &#039;&quot; /&gt;&#039;;
                        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-col-format&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ main_col_pos +&#039;][sub_rows][&#039;+ sub_row_pos +&#039;][sub_cols][&#039;+ col_count +&#039;][format]&quot; value=&quot;&#039; + col + &#039;&quot; /&gt;&#039;;
                        html += &#039;           &lt;/div&gt;&#039;;
                        col_count++;
                        container.find(&#039;.sub-col-&#039; + col_count).find(&#039;.text-insert-module&#039;).hide();
                    } else {
                        html += &#039;           &lt;div class=&quot;col-sm-&#039; + col + &#039; column-area&quot;&gt;&#039;;
                        html += &#039;               &lt;div class=&quot;module-area droparea ui-droppable ui-sortable sub-col-&#039; + col_count + &#039;&quot;&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;text-insert-module&quot;&gt;&lt;span&gt;&#039;+ text_insert_module +&#039;&lt;/span&gt;&lt;/div&gt;&#039;;
                        html += &#039;               &lt;/div&gt;&#039;;
                        html += &#039;               &lt;div class=&quot;col-action&quot;&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;action-group&quot;&gt;&#039;;
                        html += &#039;                       &lt;a class=&quot;a-module-add&quot; onclick=&quot;builder.showAllModules($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt; &#039; + text_add_module + &#039;&lt;/a&gt;&#039;;
                        html += &#039;                   &lt;/div&gt;&#039;;
                        html += &#039;               &lt;/div&gt;&#039;;
                        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-col-pos&quot; value=&quot;&#039; + col_count + &#039;&quot; /&gt;&#039;;
                        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-col-format&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ main_col_pos +&#039;][sub_rows][&#039;+ sub_row_pos +&#039;][sub_cols][&#039;+ col_count +&#039;][format]&quot; value=&quot;&#039; + col + &#039;&quot; /&gt;&#039;;
                        html += &#039;           &lt;/div&gt;&#039;;
                        col_count++;
                    }
                });

                container.closest(&#039;.sub-row&#039;).find(&#039;.count&#039;).html(col_num);
                container.closest(&#039;.sub-row&#039;).find(&#039;.sub-cols-format&#039;).val(cols);
                container.html(html);
            } else {
                alert(text_columns_error_format);
            }
        } else {
            alert(text_columns_error_format);
        }
        builder.triggerDragnDrop();
    },

    &#039;drawMainColumns&#039; : function (cols, container) {
        var html = &quot;&quot;;
        var count = 0;
        var col_count = 0;
        var isDraw = false;
        var row_pos = container.closest(&#039;.widget-row&#039;).find(&#039;.main-row-pos&#039;).val();
        var text_insert_module = $(&#039;#text-insert-module&#039;).val();
        var text_add_module = $(&#039;#text-add-module&#039;).val();
        var text_columns_error_format = $(&#039;#text-columns-error-format&#039;).val();
        var text_columns = $(&quot;#text-columns&quot;).val();
        var text_custom_columns = $(&#039;#text-custom-columns&#039;).val();

        var columns = cols.split(&#039;+&#039;).map(function (str) {
            return str.trim();
        });

        if(columns) {
            var col_num = columns.length;

            columns.forEach(function (col) {
                if(col != &quot;0&quot;) {
                    count += parseInt(col);
                } else {
                    count = 13;
                }
            });

            if(count == 12) {
                isDraw = true;
            }

            if(isDraw) {
                columns.forEach(function (col) {
                    if(container.has(&#039;.main-col-&#039; + col_count + &#039; .sub-row&#039;).length) {
                        html += &#039;&lt;div class=&quot;col-sm-&#039; + col + &#039; main-column&quot;&gt;&#039;;
                        html += &#039;   &lt;input type=&quot;hidden&quot; class=&quot;main-col-pos&quot; value=&quot;&#039; + col_count + &#039;&quot; /&gt;&#039;;
                        html += &#039;   &lt;input type=&quot;hidden&quot; class=&quot;main-col-format&quot; value=&quot;&#039; + col + &#039;&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ col_count +&#039;][format]&quot; /&gt;&#039;;
                        html += &#039;   &lt;a class=&quot;a-sub-row-add&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;builder.drawSubRow($(this))&quot;&gt;Add Row in this Column&lt;/a&gt;&#039;;
                        html += &#039;   &lt;div class=&quot;main-col-content main-col-&#039; + col_count + &#039;&quot;&gt;&#039;;
                        html +=     container.find(&#039;.main-col-&#039; + col_count).html();
                        html += &#039;   &lt;/div&gt;&#039;;
                        html += &#039;&lt;/div&gt;&#039;;
                        col_count++;
                    } else {
                        html += &#039;&lt;div class=&quot;col-sm-&#039; + col + &#039; main-column&quot;&gt;&#039;;
                        html += &#039;   &lt;input type=&quot;hidden&quot; class=&quot;main-col-pos&quot; value=&quot;&#039; + col_count + &#039;&quot; /&gt;&#039;;
                        html += &#039;   &lt;input type=&quot;hidden&quot; class=&quot;main-col-format&quot; value=&quot;&#039; + col + &#039;&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ col_count +&#039;][format]&quot; /&gt;&#039;;
                        html += &#039;   &lt;a class=&quot;a-sub-row-add&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;builder.drawSubRow($(this))&quot;&gt;Add Row in this Column&lt;/a&gt;&#039;;
                        html += &#039;   &lt;div class=&quot;main-col-content main-col-&#039; + col_count + &#039;&quot;&gt;&#039;;
                        html += &#039;       &lt;div class=&quot;sub-row sub-row-0&quot;&gt;&#039;;
                        html += &#039;           &lt;div class=&quot;sub-row-action&quot;&gt;&#039;;
                        html += &#039;               &lt;div class=&quot;action-group&quot;&gt;&#039;;
                        html += &#039;                   &lt;span class=&quot;row-identify&quot;&gt;&#039; + text_columns + &#039;&lt;/span&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;sub-col-count&quot;&gt;&#039;;
                        html += &#039;                       &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.plusSubColumn($(this))&quot; rel=&quot;1&quot; class=&quot;col-plus&quot;&gt;&lt;/a&gt;&#039;;
                        html += &#039;                       &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&#039;;
                        html += &#039;                       &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.minusSubColumn($(this))&quot; rel=&quot;1&quot; class=&quot;col-minus&quot;&gt;&lt;/a&gt;&#039;;
                        html += &#039;                   &lt;/div&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;a-group&quot;&gt;&#039;;
                        html += &#039;                       &lt;a class=&quot;a-column-custom&quot; title=&quot;&#039; + text_custom_columns + &#039;&quot; onclick=&quot;builder.customSubColumns($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;/a&gt;&#039;;
                        html += &#039;                       &lt;a class=&quot;a-row-delete&quot; onclick=&quot;builder.removeSubRow($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;/a&gt;&#039;;
                        html += &#039;                   &lt;/div&gt;&#039;;
                        html += &#039;               &lt;/div&gt;&#039;;
                        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-cols-format&quot; value=&quot;12&quot; /&gt;&#039;;
                        html += &#039;           &lt;/div&gt;&#039;;
                        html += &#039;           &lt;div class=&quot;sub-row-content&quot;&gt;&#039;;
                        html += &#039;               &lt;div class=&quot;col-sm-12 column-area&quot;&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;module-area droparea ui-droppable ui-sortable sub-col-0&quot;&gt;&#039;;
                        html += &#039;                       &lt;div class=&quot;text-insert-module&quot;&gt;&lt;span&gt;&#039;+ text_insert_module +&#039;&lt;/span&gt;&lt;/div&gt;&#039;;
                        html += &#039;                   &lt;/div&gt;&#039;;
                        html += &#039;                   &lt;div class=&quot;col-action&quot;&gt;&#039;;
                        html += &#039;                       &lt;div class=&quot;action-group&quot;&gt;&#039;;
                        html += &#039;                           &lt;a class=&quot;a-module-add&quot; onclick=&quot;builder.showAllModules($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt; &#039; + text_add_module + &#039;&lt;/a&gt;&#039;;
                        html += &#039;                       &lt;/div&gt;&#039;;
                        html += &#039;                   &lt;/div&gt;&#039;;
                        html += &#039;                   &lt;input type=&quot;hidden&quot; class=&quot;sub-col-pos&quot; value=&quot;0&quot; /&gt;&#039;;
                        html += &#039;                   &lt;input type=&quot;hidden&quot; class=&quot;sub-col-format&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ col_count +&#039;][sub_rows][0][sub_cols][0][format]&quot; value=&quot;12&quot; /&gt;&#039;;
                        html += &#039;               &lt;/div&gt;&#039;;
                        html += &#039;           &lt;/div&gt;&#039;;
                        html += &#039;           &lt;input type=&quot;hidden&quot; class=&quot;sub-row-pos&quot; value=&quot;0&quot; /&gt;&#039;;
                        html += &#039;       &lt;/div&gt;&#039;;
                        html += &#039;   &lt;/div&gt;&#039;;
                        html += &#039;&lt;/div&gt;&#039;;
                        col_count++;
                    }
                });

                container.closest(&#039;.widget-row&#039;).find(&#039;.count&#039;).html(col_num);
                container.closest(&#039;.widget-row&#039;).find(&#039;.cols-format&#039;).val(cols);
                container.html(html);
            } else {
                alert(text_columns_error_format);
            }
        } else {
            alert(text_columns_error_format);
        }
        builder.triggerDragnDrop();
    },

    &#039;drawSubRow&#039;  : function (element) {
        var html = &quot;&quot;;
        var text_insert_module = $(&#039;#text-insert-module&#039;).val();
        var text_add_module = $(&#039;#text-add-module&#039;).val();
        var text_columns = $(&quot;#text-columns&quot;).val();
        var text_custom_columns = $(&#039;#text-custom-columns&#039;).val();

        var main_column_container = element.closest(&#039;.main-column&#039;);
        var main_row_pos = element.closest(&#039;.widget-row&#039;).find(&#039;.main-row-pos&#039;).val();
        var main_col_count = main_column_container.find(&#039;.main-col-pos&#039;).val();
        var sub_row_pos = main_column_container.find(&#039;.main-col-&#039;+ main_col_count).find(&#039;.sub-row:last .sub-row-pos&#039;).val();
        if(sub_row_pos == null) {
            sub_row_pos = 0;
        } else {
            sub_row_pos++;
        }

        html += &#039;   &lt;div class=&quot;sub-row sub-row-&#039; + sub_row_pos + &#039;&quot;&gt;&#039;;
        html += &#039;       &lt;div class=&quot;sub-row-action&quot;&gt;&#039;;
        html += &#039;           &lt;div class=&quot;action-group&quot;&gt;&#039;;
        html += &#039;               &lt;span class=&quot;row-identify&quot;&gt;&#039; + text_columns + &#039;&lt;/span&gt;&#039;;
        html += &#039;               &lt;div class=&quot;sub-col-count&quot;&gt;&#039;;
        html += &#039;                   &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.plusSubColumn($(this))&quot; rel=&quot;1&quot; class=&quot;col-plus&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;                   &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&#039;;
        html += &#039;                   &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.minusSubColumn($(this))&quot; rel=&quot;1&quot; class=&quot;col-minus&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;               &lt;/div&gt;&#039;;
        html += &#039;               &lt;div class=&quot;a-group&quot;&gt;&#039;;
        html += &#039;                   &lt;a class=&quot;a-column-custom&quot; title=&quot;&#039; + text_custom_columns + &#039;&quot; onclick=&quot;builder.customSubColumns($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;                   &lt;a class=&quot;a-row-delete&quot; onclick=&quot;builder.removeSubRow($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;               &lt;/div&gt;&#039;;
        html += &#039;           &lt;/div&gt;&#039;;
        html += &#039;           &lt;input type=&quot;hidden&quot; class=&quot;sub-cols-format&quot; value=&quot;12&quot; /&gt;&#039;;
        html += &#039;       &lt;/div&gt;&#039;;
        html += &#039;       &lt;div class=&quot;sub-row-content&quot;&gt;&#039;;
        html += &#039;           &lt;div class=&quot;col-sm-12 column-area&quot;&gt;&#039;;
        html += &#039;               &lt;div class=&quot;module-area droparea ui-droppable ui-sortable sub-col-0&quot;&gt;&#039;;
        html += &#039;                   &lt;div class=&quot;text-insert-module&quot;&gt;&lt;span&gt;&#039;+ text_insert_module +&#039;&lt;/span&gt;&lt;/div&gt;&#039;;
        html += &#039;               &lt;/div&gt;&#039;;
        html += &#039;               &lt;div class=&quot;col-action&quot;&gt;&#039;;
        html += &#039;                   &lt;div class=&quot;action-group&quot;&gt;&#039;;
        html += &#039;                       &lt;a class=&quot;a-module-add&quot; onclick=&quot;builder.showAllModules($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt; &#039; + text_add_module + &#039;&lt;/a&gt;&#039;;
        html += &#039;                   &lt;/div&gt;&#039;;
        html += &#039;               &lt;/div&gt;&#039;;
        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-col-pos&quot; value=&quot;0&quot; /&gt;&#039;;
        html += &#039;               &lt;input type=&quot;hidden&quot; class=&quot;sub-col-format&quot; name=&quot;widget[&#039;+ main_row_pos + &#039;][main_cols][&#039;+ main_col_count +&#039;][sub_rows][&#039;+ sub_row_pos +&#039;][sub_cols][0][format]&quot; value=&quot;12&quot; /&gt;&#039;;
        html += &#039;           &lt;/div&gt;&#039;;
        html += &#039;       &lt;/div&gt;&#039;;
        html += &#039;       &lt;input type=&quot;hidden&quot; class=&quot;sub-row-pos&quot; value=&quot;&#039; + sub_row_pos + &#039;&quot; /&gt;&#039;;
        html += &#039;   &lt;/div&gt;&#039;;

        main_column_container.find(&#039;.main-col-&#039;+ main_col_count).append(html);
        builder.triggerDragnDrop();
    },

    &#039;drawMainRow&#039; : function (row_number) {
        var text_columns = $(&quot;#text-columns&quot;).val();
        var text_insert_module = $(&quot;#text-insert-module&quot;).val();
        var text_add_module = $(&#039;#text-add-module&#039;).val();
        var text_custom_columns = $(&#039;#text-custom-columns&#039;).val();
        var text_custom_classname = $(&#039;#text-custom-classname&#039;).val();
        var html = &quot;&quot;;
        html += &#039;&lt;div class=&quot;widget-row col-sm-12&quot;&gt;&#039;;
        html += &#039;   &lt;div class=&quot;row-action&quot;&gt;&#039;;
        html += &#039;       &lt;div class=&quot;action-group&quot;&gt;&#039;;
        html += &#039;           &lt;input type=&quot;text&quot; class=&quot;form-control input-class-name&quot; name=&quot;widget[&#039;+ row_number + &#039;][class]&quot; value=&quot;&quot; placeholder=&quot;&#039;+ text_custom_classname +&#039;&quot; /&gt;&#039;;
        html += &#039;           &lt;span class=&quot;row-identify&quot;&gt;&#039;+ text_columns +&#039;&lt;/span&gt;&#039;;
        html += &#039;           &lt;div class=&quot;col-count&quot;&gt;&#039;;
        html += &#039;               &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.plusMainColumn($(this));&quot; rel=&quot;1&quot; class=&quot;col-plus&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;               &lt;span class=&quot;count&quot; &gt;1&lt;/span&gt;&#039;;
        html += &#039;               &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.minusMainColumn($(this));&quot; rel=&quot;1&quot; class=&quot;col-minus&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;           &lt;/div&gt;&#039;;
        html += &#039;           &lt;div class=&quot;a-group&quot;&gt;&#039;;
        html += &#039;               &lt;a class=&quot;a-column-custom&quot; onclick=&quot;builder.customMainColumns($(this));&quot; href=&quot;javascript:void(0);&quot; title=&quot;&#039; + text_custom_columns + &#039;&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;               &lt;a class=&quot;a-row-delete&quot; onclick=&quot;builder.removeRow($(this));&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;           &lt;/div&gt;&#039;;
        html += &#039;       &lt;/div&gt;&#039;;
        html += &#039;       &lt;input type=&quot;hidden&quot; class=&quot;cols-format&quot; value=&quot;12&quot; /&gt;&#039;;
        html += &#039;   &lt;/div&gt;&#039;;
        html += &#039;   &lt;div class=&quot;row-content row-&#039;+ row_number +&#039;&quot;&gt;&#039; +
            &#039;       &lt;div class=&quot;col-sm-12 main-column&quot;&gt;&#039; +
            &#039;           &lt;input type=&quot;hidden&quot; class=&quot;main-col-pos&quot; value=&quot;0&quot; /&gt;&#039; +
            &#039;           &lt;input type=&quot;hidden&quot; class=&quot;main-col-format&quot; name=&quot;widget[&#039;+ row_number + &#039;][main_cols][0][format]&quot; value=&quot;12&quot; /&gt;&#039; +
            &#039;           &lt;a class=&quot;a-sub-row-add&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;builder.drawSubRow($(this))&quot;&gt;Add Row in this Column&lt;/a&gt;&#039; +
            &#039;           &lt;div class=&quot;main-col-content main-col-0&quot;&gt;&#039; +
            &#039;               &lt;div class=&quot;sub-row sub-row-0&quot;&gt;&#039; +
            &#039;                   &lt;div class=&quot;sub-row-action&quot;&gt;&#039; +
            &#039;                       &lt;div class=&quot;action-group&quot;&gt;&#039; +
            &#039;                           &lt;span class=&quot;row-identify&quot;&gt;&#039;+ text_columns +&#039;&lt;/span&gt;&#039; +
            &#039;                           &lt;div class=&quot;sub-col-count&quot;&gt;&#039; +
            &#039;                               &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.plusSubColumn($(this))&quot; rel=&quot;1&quot; class=&quot;col-plus&quot;&gt;&lt;/a&gt;&#039; +
            &#039;                               &lt;span class=&quot;count&quot;&gt;1&lt;/span&gt;&#039; +
            &#039;                               &lt;a href=&quot;javascript:void(0);&quot; onclick=&quot;builder.minusSubColumn($(this))&quot; rel=&quot;1&quot; class=&quot;col-minus&quot;&gt;&lt;/a&gt;&#039; +
            &#039;                           &lt;/div&gt;&#039; +
            &#039;                           &lt;div class=&quot;a-group&quot;&gt;&#039; +
            &#039;                               &lt;a class=&quot;a-column-custom&quot; onclick=&quot;builder.customSubColumns($(this))&quot; href=&quot;javascript:void(0);&quot; title=&quot;&#039; + text_custom_columns + &#039;&quot;&gt;&lt;/a&gt;&#039; +
            &#039;                               &lt;a class=&quot;a-row-delete&quot; onclick=&quot;builder.removeSubRow($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;/a&gt;&#039; +
            &#039;                           &lt;/div&gt;&#039; +
            &#039;                       &lt;/div&gt;&#039; +
            &#039;                       &lt;input type=&quot;hidden&quot; class=&quot;sub-cols-format&quot; value=&quot;12&quot; /&gt;&#039; +
            &#039;                   &lt;/div&gt;&#039; +
            &#039;                   &lt;div class=&quot;sub-row-content&quot;&gt;&#039; +
            &#039;                       &lt;div class=&quot;col-sm-12 column-area&quot;&gt;&#039; +
            &#039;                           &lt;div class=&quot;module-area droparea ui-droppable ui-sortable sub-col-0&quot;&gt;&#039; +
            &#039;                               &lt;div class=&quot;text-insert-module&quot;&gt;&lt;span&gt;&#039;+ text_insert_module +&#039;&lt;/span&gt;&lt;/div&gt;&#039; +
            &#039;                           &lt;/div&gt; &#039; +
            &#039;                           &lt;div class=&quot;col-action&quot;&gt; &#039; +
            &#039;                               &lt;div class=&quot;action-group&quot;&gt;&#039; +
            &#039;                                   &lt;a class=&quot;a-module-add&quot; onclick=&quot;builder.showAllModules($(this))&quot; href=&quot;javascript:void(0);&quot;&gt;&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt; &#039; + text_add_module + &#039;&lt;/a&gt; &#039; +
            &#039;                               &lt;/div&gt; &#039; +
            &#039;                           &lt;/div&gt; &#039; +
            &#039;                           &lt;input type=&quot;hidden&quot; class=&quot;sub-col-pos&quot; value=&quot;0&quot; /&gt;&#039; +
            &#039;                           &lt;input type=&quot;hidden&quot; class=&quot;sub-col-format&quot; name=&quot;widget[&#039;+ row_number + &#039;][main_cols][0][sub_rows][0][sub_cols][0][format]&quot; value=&quot;12&quot; /&gt;&#039; +
            &#039;                       &lt;/div&gt; &#039; +
            &#039;                   &lt;/div&gt; &#039; +
            &#039;                   &lt;input type=&quot;hidden&quot; class=&quot;sub-row-pos&quot; value=&quot;0&quot; /&gt;&#039; +
            &#039;               &lt;/div&gt; &#039; +
            &#039;           &lt;/div&gt; &#039; +
            &#039;       &lt;/div&gt; &#039; +
            &#039;   &lt;/div&gt; &#039; +
            &#039;   &lt;input type=&quot;hidden&quot; class=&quot;main-row-pos&quot; value=&quot;&#039;+ row_number +&#039;&quot; /&gt;&#039; +
            &#039;&lt;/div&gt;&#039;;
        $(&#039;.widget-container&#039;).append(html);
        builder.triggerDragnDrop();
    },

    &#039;removeSubRow&#039; : function (container) {
        container.closest(&#039;.sub-row&#039;).remove();
        builder.reArrangeLayout();
    },

    &#039;removeRow&#039; : function (container) {
        container.closest(&#039;.widget-row&#039;).remove();
        builder.reArrangeLayout();
    },

    &#039;showAllModules&#039; : function (container) {
        var row_pos = container.closest(&#039;.widget-row&#039;).find(&#039;.main-row-pos&#039;).val();
        var sub_row_pos = container.closest(&#039;.sub-row&#039;).find(&#039;.sub-row-pos&#039;).val();
        var col_pos = container.closest(&#039;.main-column&#039;).find(&#039;.main-col-pos&#039;).val();
        var sub_col_pos = container.closest(&#039;.column-area&#039;).find(&#039;.sub-col-pos&#039;).val();
        $(&#039;#module-row&#039;).val(row_pos);
        $(&#039;#module-col&#039;).val(col_pos);
        $(&#039;#module-sub-row&#039;).val(sub_row_pos);
        $(&#039;#module-sub-col&#039;).val(sub_col_pos);
        $(&#039;.popup-background&#039;).show();
        $(&#039;.popup-loader-img&#039;).show();
        $(&#039;.all-modules-container&#039;).show(600);
        builder.triggerDragnDrop();
    },

    &#039;closeAllModules&#039; : function() {
        $(&#039;.all-modules-container&#039;).hide(600);
        $(&#039;.popup-background&#039;).hide();
        $(&#039;.popup-loader-img&#039;).hide();
    },

    &#039;addModule&#039; : function(name, code, url) {
        var row_pos =  $(&#039;#module-row&#039;).val();
        var col_pos =  $(&#039;#module-col&#039;).val();
        var sub_row_pos =  $(&#039;#module-sub-row&#039;).val();
        var sub_col_pos =  $(&#039;#module-sub-col&#039;).val();

        html = &#039;&lt;div class=&quot;layout-module-info moveable&quot;&gt;&#039;;
        html += &#039;	&lt;div class=&quot;top&quot;&gt;&#039;;
        html += &#039;		&lt;div class=&quot;module-info&quot;&gt;&#039;;
        html += &#039;			&lt;p&gt;&#039; + name + &#039;&lt;/p&gt;&#039;;
        html += &#039;		    &lt;a class=&quot;btn-edit&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;loadModule(\&#039;&#039; + url + &#039;\&#039;)&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;			&lt;a class=&quot;btn-remove&quot; href=&quot;javascript:void(0);&quot; onclick=&quot;builder.removeModule($(this))&quot;&gt;&lt;/a&gt;&#039;;
        html += &#039;		&lt;/div&gt;&#039;;
        html += &#039;	&lt;/div&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-in-main-row&quot; value=&quot;&#039; + row_pos +&#039;&quot; /&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-in-main-col&quot; value=&quot;&#039; + col_pos +&#039;&quot; /&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-in-sub-row&quot; value=&quot;&#039; + sub_row_pos +&#039;&quot; /&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-in-sub-col&quot; value=&quot;&#039; + sub_col_pos +&#039;&quot; /&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-code&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ col_pos +&#039;][sub_rows][&#039;+ sub_row_pos +&#039;][sub_cols][&#039;+ sub_col_pos +&#039;][info][module][0][code]&quot; value=&quot;&#039; + code +&#039;&quot; /&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-name&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ col_pos +&#039;][sub_rows][&#039;+ sub_row_pos +&#039;][sub_cols][&#039;+ sub_col_pos +&#039;][info][module][0][name]&quot; value=&quot;&#039; + name +&#039;&quot; /&gt;&#039;;
        html += &#039;	&lt;input type=&quot;hidden&quot; class=&quot;module-url&quot; name=&quot;widget[&#039;+ row_pos + &#039;][main_cols][&#039;+ col_pos +&#039;][sub_rows][&#039;+ sub_row_pos +&#039;][sub_cols][&#039;+ sub_col_pos +&#039;][info][module][0][url]&quot; value=&quot;&#039; + url +&#039;&quot; /&gt;&#039;;
        html +=	&#039;&lt;/div&gt;&#039;;

        $(&#039;.widget-container .row-&#039; + row_pos + &#039; .main-col-&#039; + col_pos + &#039; .sub-row-&#039; + sub_row_pos + &#039; .sub-col-&#039; + sub_col_pos + &#039; .text-insert-module&#039;).hide();
        $(&#039;.widget-container .row-&#039; + row_pos + &#039; .main-col-&#039; + col_pos + &#039; .sub-row-&#039; + sub_row_pos + &#039; .sub-col-&#039; + sub_col_pos).append(html);
        builder.closeAllModules();
        builder.reArrangeLayout();
        builder.triggerDragnDrop();
    },

    &#039;removeModule&#039; : function (container) {
        var module_area = container.closest(&#039;.module-area&#039;);
        container.closest(&#039;.layout-module-info&#039;).remove();
        if(module_area.has(&#039;.layout-module-info&#039;).length) {
            module_area.find(&#039;.text-insert-module&#039;).hide();
        } else {
            module_area.find(&#039;.text-insert-module&#039;).show();
        }
        builder.reArrangeLayout();
        builder.triggerDragnDrop();
    },

    &#039;reArrangeLayout&#039; : function () {
        var main_row_pos = 0;
        $(&#039;.widget-container .widget-row&#039;).each(function () {
            $(this).find(&#039;.main-row-pos&#039;).val(main_row_pos);
            $(this).find(&#039;.row-content&#039;).removeClass().addClass(&#039;row-content row-&#039; + main_row_pos);
            $(this).find(&#039;.input-class-name&#039;).attr(&#039;name&#039;, &#039;widget[&#039; + main_row_pos + &#039;][class]&#039;);

            var main_col_pos = 0;
            $(this).find(&#039;.main-column&#039;).each(function () {
                $(this).find(&#039;.main-col-pos&#039;).val(main_col_pos);
                $(this).find(&#039;.main-col-content&#039;).removeClass().addClass(&#039;main-col-content main-col-&#039; + main_col_pos);
                $(this).find(&#039;.main-col-format&#039;).attr(&#039;name&#039;, &#039;widget[&#039; + main_row_pos + &#039;][main_cols][&#039; + main_col_pos + &#039;][format]&#039;);

                var sub_row_pos = 0;
                $(this).find(&#039;.sub-row&#039;).each(function () {
                    $(this).find(&#039;.sub-row-pos&#039;).val(sub_row_pos);
                    $(this).removeClass().addClass(&#039;sub-row sub-row-&#039; + sub_row_pos);

                    var sub_col_pos = 0;
                    $(this).find(&#039;.column-area&#039;).each(function () {
                        $(this).find(&#039;.sub-col-pos&#039;).val(sub_col_pos);
                        $(this).find(&#039;.sub-col-format&#039;).attr(&#039;name&#039;, &#039;widget[&#039; + main_row_pos + &#039;][main_cols][&#039; + main_col_pos + &#039;][sub_rows][&#039; + sub_row_pos + &#039;][sub_cols][&#039; + sub_col_pos + &#039;][format]&#039;);
                        $(this).find(&#039;.module-area&#039;).removeClass().addClass(&#039;module-area droparea ui-droppable ui-sortable sub-col-&#039; + sub_col_pos);

                        if($(this).has(&#039;.layout-module-info&#039;).length) {
                            $(this).find(&#039;.text-insert-module&#039;).hide();
                        } else {
                            $(this).find(&#039;.text-insert-module&#039;).show();
                        }

                        var module_pos = 0;
                        $(this).find(&#039;.layout-module-info&#039;).each(function () {
                            $(this).find(&#039;.module-in-main-row&#039;).val(main_row_pos);
                            $(this).find(&#039;.module-in-main-col&#039;).val(main_col_pos);
                            $(this).find(&#039;.module-in-sub-row&#039;).val(sub_row_pos);
                            $(this).find(&#039;.module-in-sub-sol&#039;).val(sub_col_pos);

                            $(this).find(&#039;.module-code&#039;).attr(&#039;name&#039;, &#039;widget[&#039; + main_row_pos + &#039;][main_cols][&#039; + main_col_pos + &#039;][sub_rows][&#039; + sub_row_pos + &#039;][sub_cols][&#039; + sub_col_pos + &#039;][info][module][&#039; + module_pos + &#039;][code]&#039;);
                            $(this).find(&#039;.module-name&#039;).attr(&#039;name&#039;, &#039;widget[&#039; + main_row_pos + &#039;][main_cols][&#039; + main_col_pos + &#039;][sub_rows][&#039; + sub_row_pos + &#039;][sub_cols][&#039; + sub_col_pos + &#039;][info][module][&#039; + module_pos + &#039;][name]&#039;);
                            $(this).find(&#039;.module-url&#039;).attr(&#039;name&#039;, &#039;widget[&#039; + main_row_pos + &#039;][main_cols][&#039; + main_col_pos + &#039;][sub_rows][&#039; + sub_row_pos + &#039;][sub_cols][&#039; + sub_col_pos + &#039;][info][module][&#039; + module_pos + &#039;][url]&#039;);

                            module_pos++;
                        });

                        sub_col_pos++;
                    });

                    sub_row_pos++;
                });

                main_col_pos++;
            });

            main_row_pos++;
        });
    }
};</code></pre>        </div>
    </div>