<?php
/**
 * Filename : index-2.php
 * Created  : Andy Christian S. Loyola <acl20032003@gmail.com> (https://AndyLoyola.Com)
 * Copyright 2024 - Andy Christian S. Loyola <acl20032003@gmail.com> (https://AndyLoyola.Com)
 *
 * Skype    : andy_christian_loyola_
 * Email    : acl20032003@gmail.com
 */
define ('_IN_MAIN_MODULE', 1);

?>



<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Elements</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro.css" />
    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-icons.css" />
    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-responsive.css" />
    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-colors.css" />

    <link type="text/css" rel="stylesheet" href="tmpl/js/jquery-ui/jquery-ui.min.css" />



    <style type="text/css">
        body {
            background: #c0c0c0;
            color: #000 !important;
            padding: 10px !important;
        }

        body, h1, h2, h3, h4, h5, h6, a, p {
            font-family: Arial, "Times New Roman", "Bitstream Charter", Times, serif !important;
            /*font-family: Courier, monospace !important;*/
        }

        h1, h2, h3, h4, h5, h6,
        label {
            font-weight: bold !important;
        }

        a {
            color: #000 !important;
        }

        .container {
            width: 1024px;
            margin: 0 auto !important;
        }


        .GeneratedMarquee {
            font-family: Courier, monospace !important;
            font-size: 18px !important;
            font-weight: bold !important;
            line-height: 1.3em !important;
            color: #ffff99 !important;
            background: #000 !important;
            padding: 3px !important;
        }


        .dragzone,
        .dropzone,
        .previewzone {
            padding: 10px;
            border: 2px dashed #ddd;
        }

        .dropzone {
            font-family: Arial;
            font-weight: bold;

            position: relative;
        }

        .dropzone .dropped {
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }

        .dropzone .dropped:last-child {
            margin-bottom: 0;
        }

        .dropzone:after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #999;
            font-size: 16px;
        }

        .dropzone.ui-droppable-active:after {

        }

        .editable-item {
            border-radius: 5px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
        }
    </style>
</head>
<body>

<marquee class="GeneratedMarquee" direction="left" scrollamount="11" behavior="scroll">Profitable News And Updates From TheProfitScoop.com Come Back To This Page Every Day And Watch Your Profitablility Grow.</marquee>

<div class="grid">
    <div class="row cell align-center">
        <a href="https://www.theprofitscoop.com" style="text-decoration:none!important;">
            <img border="0" src="https://www.theprofitscoop.com/logoscoop.png" width="224" height="167"> <br />
            <h1 class="text-bold">The Profit Scoop: HTML Elements</h1>
        </a>
    </div>

    <div class="row cells8 padding10 bg-white">
        <div class="cell"></div>
        <div class="cell colspan6 text-small">

            <div class="row cells8">
                <div class="cell colspan2">
                    <h3>Elements</h3> <hr />
                    <br />


                    <div class="dragzone">
                        <h3 class="draggable" contenteditable="false">Textbox</h3>
                        <div>
                            <input type="text" class="editable-item" placeholder="Enter text here" value="" />


                            <div class="item-controls" style="margin-top:20px;">
                                <hr /><br />

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Border Color</label>
                                    <input type="color" class="element-border-color" value="#ddd" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Border Thickness (px)</label>
                                    <input type="text" class="element-border-thickness" value="1" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Padding (px)</label>
                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Default Text </label>
                                    <input type="text" class="element-default-text" value="Enter text here" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Size </label>
                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Color</label>
                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
                                </div>

                                <div class="row cell">
                                    <label for="">Width (%) </label>
                                    <input type="text" class="element-width" value="100" style="width:100%;" />
                                </div>
                            </div>
                        </div>


                        <h3 class="draggable" contenteditable="false">Textarea</h3>
                        <div>
                            <textarea rows="5" class="editable-item" placeholder="Enter text here"></textarea>


                            <div class="item-controls" style="margin-top:20px;">
                                <hr /><br />

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Border Color</label>
                                    <input type="color" class="element-border-color" value="#ddd" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Border Thickness (px)</label>
                                    <input type="text" class="element-border-thickness" value="1" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Padding (px)</label>
                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Default Text </label>
                                    <input type="text" class="element-default-text" value="Enter text here" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Color</label>
                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Size </label>
                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
                                </div>

                                <div class="row cell">
                                    <label for="">Width (%) </label>
                                    <input type="text" class="element-width" value="100" style="width:100%;" />
                                </div>
                            </div>
                        </div>


                        <h3 class="draggable" contenteditable="false">Select</h3>
                        <div>
                            <select class="editable-item"></select>


                            <div class="item-controls" style="margin-top:20px;">
                                <hr /><br />

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Border Color</label>
                                    <input type="color" class="element-border-color" value="#ddd" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Border Thickness (px)</label>
                                    <input type="text" class="element-border-thickness" value="1" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Padding (px)</label>
                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Dropdown Texts </label>
                                    <input type="text" class="element-dropdown-text-1" value="Option 1" style="width:100%;" /> <br />
                                    <input type="text" class="element-dropdown-text-2" value="Option 2" style="width:100%;" /> <br />
                                    <input type="text" class="element-dropdown-text-3" value="Option 3" style="width:100%;" /> <br />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Size </label>
                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Color</label>
                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
                                </div>

                                <div class="row cell">
                                    <label for="">Width (%) </label>
                                    <input type="text" class="element-width" value="100" style="width:100%;" />
                                </div>
                            </div>
                        </div>


                        <h3 class="draggable" contenteditable="false">Radio Buttons</h3>
                        <div>
                            <div class="editable-item"></div>



                            <div class="item-controls" style="margin-top:20px;">
                                <hr /><br />

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Padding (px)</label>
                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Radio Texts </label>
                                    <input type="text" class="element-radio-text-1" value="Option 1" style="width:100%;" /> <br />
                                    <input type="text" class="element-radio-text-2" value="Option 2" style="width:100%;" /> <br />
                                    <input type="text" class="element-radio-text-3" value="Option 3" style="width:100%;" /> <br />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Size </label>
                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
                                </div>

                                <div class="row cell" style="margin-bottom:10px;">
                                    <label for="">Text Color</label>
                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
                                </div>
                            </div>
                        </div>


                        <h3 class="draggable" contenteditable="false">Button</h3>
                        <div>
                            <button class="editable-item">Click Me!</button>
                        </div>
                    </div>
                </div>



                <div class="cell colspan2">
                    <h3>Drop Zone</h3> <hr />
                    <br />


                    <div class="dropzone">
                    </div>
                </div>


                <div class="cell colspan4">
                    <h3>Preview</h3> <hr />
                    <br />

                    <div class="previewzone"></div>
                </div>
            </div>

        </div>
        <div class="cell"></div>
    </div>
</div>



<script src="tmpl/js/jquery-3.3.1.min.js"></script>
<script src="tmpl/css/metroui/js/metro.js"></script>
<script src="tmpl/js/jquery-ui/jquery-ui.min.js"></script>
<script src="tmpl/js/jquery.cookie.js"></script>

<script type="text/javascript">
    var indexJs = jQuery.noConflict();
    indexJs(function($) {
        $('.dragzone').accordion({
            collapsible : true,
            active      : false,
            heightStyle : 'content'
        });

        $('.dragzone > h3').draggable({
            containment : 'window',
            revert      : 'invalid',
            helper      : function() {
                var helper  = $(this).next().clone();

                return $('<div class="draggable-helper"></div>')
                    .append($(this).clone())
                    .append(helper);
            },
            start       : function(event, ui) {
                ui.helper.css('width', $(this).parent().width());
            }
        });


        $('.dropzone').droppable({
            accept  : '.dragzone > h3',
            drop    : function(event, ui) {
                var droppedHeader = ui.helper.find("h3").clone();
                var droppedContent = ui.helper.find("div").clone();

                // droppedContent.find('.item-controls').remove();
                droppedContent.each(function() {
                    $(this).find('.item-controls').remove();
                })


                // var accordionWrapper = $('<div class="accordion-wrapper"></div>');
                //
                // var newAccordion = $('<div class="accordion"></div>');
                // // newAccordion.append(droppedHeader).append(droppedContent<?php
    ///**
    // * Filename : index-2.php
    // * Created  : Andy Christian S. Loyola <acl20032003@gmail.com> (https://AndyLoyola.Com)
    // * Copyright 2024 - Andy Christian S. Loyola <acl20032003@gmail.com> (https://AndyLoyola.Com)
    // *
    // * Skype    : andy_christian_loyola_
    // * Email    : acl20032003@gmail.com
    // */
    //define ('_IN_MAIN_MODULE', 1);
    //
    //?>
    //
    //
    //
    //<!DOCTYPE html>
    //<html lang="en">
    //<head>
    //    <title>HTML Elements</title>
    //    <meta charset="utf-8" />
    //    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    //
    //    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro.css" />
    //    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-icons.css" />
    //    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-responsive.css" />
    //    <link type="text/css" rel="stylesheet" href="tmpl/css/metroui/css/metro-colors.css" />
    //
    //    <link type="text/css" rel="stylesheet" href="tmpl/js/jquery-ui/jquery-ui.min.css" />
    //
    //
    //
    //    <style type="text/css">
    //        body {
    //            background: #c0c0c0;
    //            color: #000 !important;
    //            padding: 10px !important;
    //        }
    //
    //        body, h1, h2, h3, h4, h5, h6, a, p {
    //            font-family: Arial, "Times New Roman", "Bitstream Charter", Times, serif !important;
    //            /*font-family: Courier, monospace !important;*/
    //        }
    //
    //        h1, h2, h3, h4, h5, h6,
    //        label {
    //            font-weight: bold !important;
    //        }
    //
    //        a {
    //            color: #000 !important;
    //        }
    //
    //        .container {
    //            width: 1024px;
    //            margin: 0 auto !important;
    //        }
    //
    //
    //        .GeneratedMarquee {
    //            font-family: Courier, monospace !important;
    //            font-size: 18px !important;
    //            font-weight: bold !important;
    //            line-height: 1.3em !important;
    //            color: #ffff99 !important;
    //            background: #000 !important;
    //            padding: 3px !important;
    //        }
    //
    //
    //        .dragzone,
    //        .dropzone,
    //        .previewzone {
    //            padding: 10px;
    //            border: 2px dashed #ddd;
    //        }
    //
    //        .dropzone {
    //            font-family: Arial;
    //            font-weight: bold;
    //
    //            position: relative;
    //        }
    //
    //        .dropzone .dropped {
    //            margin-bottom: 10px;
    //            padding: 10px;
    //            border-radius: 5px;
    //            font-weight: bold;
    //        }
    //
    //        .dropzone .dropped:last-child {
    //            margin-bottom: 0;
    //        }
    //
    //        .dropzone:after {
    //            position: absolute;
    //            top: 50%;
    //            left: 50%;
    //            transform: translate(-50%, -50%);
    //            color: #999;
    //            font-size: 16px;
    //        }
    //
    //        .dropzone.ui-droppable-active:after {
    //
    //        }
    //
    //        .editable-item {
    //            border-radius: 5px;
    //            -moz-border-radius: 5px;
    //            -webkit-border-radius: 5px;
    //        }
    //    </style>
    //</head>
    //<body>
    //
    //<marquee class="GeneratedMarquee" direction="left" scrollamount="11" behavior="scroll">Profitable News And Updates From TheProfitScoop.com Come Back To This Page Every Day And Watch Your Profitablility Grow.</marquee>
    //
    //<div class="grid">
    //    <div class="row cell align-center">
    //        <a href="https://www.theprofitscoop.com" style="text-decoration:none!important;">
    //            <img border="0" src="https://www.theprofitscoop.com/logoscoop.png" width="224" height="167"> <br />
    //            <h1 class="text-bold">The Profit Scoop: HTML Elements</h1>
    //        </a>
    //    </div>
    //
    //    <div class="row cells8 padding10 bg-white">
    //        <div class="cell"></div>
    //        <div class="cell colspan6 text-small">
    //
    //            <div class="row cells8">
    //                <div class="cell colspan2">
    //                    <h3>Elements</h3> <hr />
    //                    <br />
    //
    //
    //                    <div class="dragzone">
    //                        <h3 class="draggable" contenteditable="false">Textbox</h3>
    //                        <div>
    //                            <input type="text" class="editable-item" placeholder="Enter text here" value="" />
    //
    //
    //                            <div class="item-controls" style="margin-top:20px;">
    //                                <hr /><br />
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Border Color</label>
    //                                    <input type="color" class="element-border-color" value="#ddd" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Border Thickness (px)</label>
    //                                    <input type="text" class="element-border-thickness" value="1" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Padding (px)</label>
    //                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Default Text </label>
    //                                    <input type="text" class="element-default-text" value="Enter text here" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Size </label>
    //                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Color</label>
    //                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell">
    //                                    <label for="">Width (%) </label>
    //                                    <input type="text" class="element-width" value="100" style="width:100%;" />
    //                                </div>
    //                            </div>
    //                        </div>
    //
    //
    //                        <h3 class="draggable" contenteditable="false">Textarea</h3>
    //                        <div>
    //                            <textarea rows="5" class="editable-item" placeholder="Enter text here"></textarea>
    //
    //
    //                            <div class="item-controls" style="margin-top:20px;">
    //                                <hr /><br />
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Border Color</label>
    //                                    <input type="color" class="element-border-color" value="#ddd" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Border Thickness (px)</label>
    //                                    <input type="text" class="element-border-thickness" value="1" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Padding (px)</label>
    //                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Default Text </label>
    //                                    <input type="text" class="element-default-text" value="Enter text here" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Color</label>
    //                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Size </label>
    //                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell">
    //                                    <label for="">Width (%) </label>
    //                                    <input type="text" class="element-width" value="100" style="width:100%;" />
    //                                </div>
    //                            </div>
    //                        </div>
    //
    //
    //                        <h3 class="draggable" contenteditable="false">Select</h3>
    //                        <div>
    //                            <select class="editable-item"></select>
    //
    //
    //                            <div class="item-controls" style="margin-top:20px;">
    //                                <hr /><br />
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Border Color</label>
    //                                    <input type="color" class="element-border-color" value="#ddd" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Border Thickness (px)</label>
    //                                    <input type="text" class="element-border-thickness" value="1" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Padding (px)</label>
    //                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Dropdown Texts </label>
    //                                    <input type="text" class="element-dropdown-text-1" value="Option 1" style="width:100%;" /> <br />
    //                                    <input type="text" class="element-dropdown-text-2" value="Option 2" style="width:100%;" /> <br />
    //                                    <input type="text" class="element-dropdown-text-3" value="Option 3" style="width:100%;" /> <br />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Size </label>
    //                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Color</label>
    //                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell">
    //                                    <label for="">Width (%) </label>
    //                                    <input type="text" class="element-width" value="100" style="width:100%;" />
    //                                </div>
    //                            </div>
    //                        </div>
    //
    //
    //                        <h3 class="draggable" contenteditable="false">Radio Buttons</h3>
    //                        <div>
    //                            <div class="editable-item"></div>
    //
    //
    //
    //                            <div class="item-controls" style="margin-top:20px;">
    //                                <hr /><br />
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Padding (px)</label>
    //                                    <input type="text" class="element-padding" value="10" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Radio Texts </label>
    //                                    <input type="text" class="element-radio-text-1" value="Option 1" style="width:100%;" /> <br />
    //                                    <input type="text" class="element-radio-text-2" value="Option 2" style="width:100%;" /> <br />
    //                                    <input type="text" class="element-radio-text-3" value="Option 3" style="width:100%;" /> <br />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Size </label>
    //                                    <input type="text" class="element-text-size" value="12" style="width:100%;" />
    //                                </div>
    //
    //                                <div class="row cell" style="margin-bottom:10px;">
    //                                    <label for="">Text Color</label>
    //                                    <input type="color" class="element-text-color" value="#000" style="width:100%;" />
    //                                </div>
    //                            </div>
    //                        </div>
    //
    //
    //                        <h3 class="draggable" contenteditable="false">Button</h3>
    //                        <div>
    //                            <button class="editable-item">Click Me!</button>
    //                        </div>
    //                    </div>
    //                </div>
    //
    //
    //
    //                <div class="cell colspan2">
    //                    <h3>Drop Zone</h3> <hr />
    //                    <br />
    //
    //
    //                    <div class="dropzone">
    //                    </div>
    //                </div>
    //
    //
    //                <div class="cell colspan4">
    //                    <h3>Preview</h3> <hr />
    //                    <br />
    //
    //                    <div class="previewzone"></div>
    //                </div>
    //            </div>
    //
    //        </div>
    //        <div class="cell"></div>
    //    </div>
    //</div>
    //
    //
    //
    //<script src="tmpl/js/jquery-3.3.1.min.js"></script>
//
<script src="tmpl/css/metroui/js/metro.js"></script>
//
<script src="tmpl/js/jquery-ui/jquery-ui.min.js"></script>
//
<script src="tmpl/js/jquery.cookie.js"></script>
//
//
<script type="text/javascript">
    //    var indexJs = jQuery.noConflict();
    //    indexJs(function($) {
    //        $('.dragzone').accordion({
    //            collapsible : true,
    //            active      : false,
    //            heightStyle : 'content'
    //        });
    //
    //        $('.dragzone > h3').draggable({
    //            containment : 'window',
    //            revert      : 'invalid',
    //            helper      : function() {
    //                var helper  = $(this).next().clone();
    //
    //                return $('<div class="draggable-helper"></div>')
    //                    .append($(this).clone())
    //                    .append(helper);
    //            },
    //            start       : function(event, ui) {
    //                ui.helper.css('width', $(this).parent().width());
    //            }
    //        });
    //
    //
    //        $('.dropzone').droppable({
    //            accept  : '.dragzone > h3',
    //            drop    : function(event, ui) {
    //                var droppedHeader = ui.helper.find("h3").clone();
    //                var droppedContent = ui.helper.find("div").clone();
    //
    //                // droppedContent.find('.item-controls').remove();
    //                droppedContent.each(function() {
    //                    $(this).find('.item-controls').remove();
    //                })
    //
    //
    //                // var accordionWrapper = $('<div class="accordion-wrapper"></div>');
    //                //
    //                // var newAccordion = $('<div class="accordion"></div>');
    //                // // newAccordion.append(droppedHeader).append(droppedContent);
    //                //
    //                // droppedHeader.each(function(index) {
    //                //     newAccordion.append($(this));
    //                //     if (droppedContent.eq(index).length) {
    //                //         newAccordion.append(droppedContent.eq(index));
    //                //     }
    //                // });
    //                //
    //                // accordionWrapper.append(newAccordion);
    //                // $(this).empty().append(accordionWrapper);
    //
    //
    //                var newAccordion = $('<div class="accordion"></div>');
    //                droppedHeader.each(function(index) {
    //                    newAccordion.append($(this));
    //                    if (droppedContent.eq(index).length) {
    //                        newAccordion.append(droppedContent.eq('index'));
    //                    }
    //                });
    //
    //                // Create a wrapper for the new accordion and append to the droppable area
    //                var accordionWrapper = $('<div class="accordion-wrapper"></div>');
    //                accordionWrapper.append(newAccordion);
    //                $(this).append(accordionWrapper);
    //
    //
    //                $(this).removeClass('ui-state-highlight')
    //                    .append(newAccordion)
    //                    .css("min-height", 'auto');
    //
    //                // Reinitialize accordion within dropzone
    //                newAccordion.accordion({
    //                    collapsible: true,
    //                    active      : false,
    //                    heightStyle : 'content'
    //                });
    //
    //                //* make the dropzone sortable
    //                $(this).sortable({
    //                    handle  : 'h3',
    //                    stop    : function(event, ui) {
    //                        $(this).find('.accordion').accordion('refresh');
    //                        updatePreview();
    //                    }
    //                });
    //
    //                updatePreview();
    //            },
    //            over    : function(event, ui) {
    //                $(this).addClass('ui-state-highlight');
    //            },
    //            out     : function(event, ui) {
    //                $(this).removeClass('ui-state-highlight');
    //            }
    //        });
    //
    //
    //        function updatePreview() {
    //            var preview = $('.previewzone');
    //            preview.empty();
    //
    //            $('.dropzone .accordion').each(function() {
    //                var accordion = $(this);
    //                accordion.find('h3').each(function() {
    //                    var header = $(this).text().trim();
    //                    var content = $(this).next().clone().children().unwrap();
    //
    //                    console.log(content);
    //
    //                    var previewItem = $('<div class="preview-item"></div>');
    //                    previewItem.append(content);
    //                    previewItem.append('<br /><br />');
    //                    preview.append(previewItem);
    //                });
    //            });
    //        }
    //
    //
    //
    //
    //
    //
    //
    //
    //        //* border color
    //        $('.element-border-color').closest('div').parent('div').parent('div').find('.editable-item').css('border-color', $('.element-border-color').val());
    //
    //        $('.element-border-color').on('change', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //            $el.css('border-color', $val);
    //        });
    //
    //
    //        //* border thickness
    //        $('.element-border-thickness').closest('div').parent('div').parent('div').find('.editable-item').css('border-width', $('.element-border-thickness').val() +'px');
    //
    //        $('.element-border-thickness').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            if ($val.length <= 0) {
    //                $val = 0;
    //            }
    //
    //            $el.css('border-width', $val +'px');
    //        });
    //
    //
    //        //* padding
    //        $('.element-padding').closest('div').parent('div').parent('div').find('.editable-item').css('padding', $('.element-padding').val() +'px');
    //
    //        $('.element-padding').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            if ($val.length <= 0) {
    //                $val = 0;
    //            }
    //
    //            $el.css('padding', $val +'px');
    //        });
    //
    //
    //        //* default text
    //        $('.element-default-text').closest('div').parent('div').parent('div').find('.editable-item').attr('placeholder', $('.element-default-text').val());
    //
    //        $('.element-default-text').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            $el.attr('placeholder', $val);
    //        });
    //
    //
    //        //* text size
    //        $('.element-text-size').closest('div').parent('div').parent('div').find('.editable-item').css('font-size', $('.element-text-size').val() +'px');
    //
    //        $('.element-text-size').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            if ($val.length <= 0) {
    //                $val = 12;
    //            }
    //
    //            $el.css('font-size', $val +'px');
    //        });
    //
    //
    //        //* text color
    //        $('.element-text-color').closest('div').parent('div').parent('div').find('.editable-item').css('color', $('.element-text-color').val());
    //
    //        $('.element-text-color').on('change', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //            $el.css('color', $val);
    //        });
    //
    //
    //        //* width
    //        $('.element-width').closest('div').parent('div').parent('div').find('.editable-item').css('width', $('.element-width').val() +'%');
    //
    //        $('.element-width').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            $el.css('width', $val +'%');
    //        });
    //
    //
    //
    //        //* dropdown texts
    //        $('.element-dropdown-text-1').closest('div').parent('div').parent('div').find('.editable-item').append('<option value="" id="dropdown-text-1">'+ $('.element-dropdown-text-1').val() +'</option>');
    //        $('.element-dropdown-text-2').closest('div').parent('div').parent('div').find('.editable-item').append('<option value="" id="dropdown-text-2">'+ $('.element-dropdown-text-2').val() +'</option>');
    //        $('.element-dropdown-text-3').closest('div').parent('div').parent('div').find('.editable-item').append('<option value="" id="dropdown-text-3">'+ $('.element-dropdown-text-3').val() +'</option>');
    //
    //        $('.element-dropdown-text-1').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            $el.find('#dropdown-text-1').empty().append($val);
    //        });
    //
    //        $('.element-dropdown-text-2').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            $el.find('#dropdown-text-2').empty().append($val);
    //        });
    //
    //        $('.element-dropdown-text-3').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');
    //
    //
    //            $el.find('#dropdown-text-3').empty().append($val);
    //        });
    //
    //
    //        //* radio
    //        $('.element-radio-text-1').closest('div').parent('div').parent('div').find('.editable-item').append('<label id="radio-1"><input type="radio" /> '+ $('.element-radio-text-1').val() +'</label> <br /><br />');
    //        $('.element-radio-text-2').closest('div').parent('div').parent('div').find('.editable-item').append('<label id="radio-2"><input type="radio" /> '+ $('.element-radio-text-2').val() +'</label> <br /><br />');
    //        $('.element-radio-text-3').closest('div').parent('div').parent('div').find('.editable-item').append('<label id="radio-3"><input type="radio" /> '+ $('.element-radio-text-3').val() +'</label> <br /><br/>');
    //
    //        $('.element-radio-text-1').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item').find('#radio-1');
    //
    //
    //            $el.empty().append('<input type="radio" /> '+ $val);
    //        });
    //
    //        $('.element-radio-text-2').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item').find('#radio-2');
    //
    //
    //            $el.empty().append('<input type="radio" /> '+ $val);
    //        });
    //
    //        $('.element-radio-text-3').on('keyup', function() {
    //            var $this   = $(this),
    //                $val    = $this.val(),
    //                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item').find('#radio-3');
    //
    //
    //            $el.empty().append('<input type="radio" /> '+ $val);
    //        });
    //    });
    //</script>
//
</body>
//
</html>);
                //
                // droppedHeader.each(function(index) {
                //     newAccordion.append($(this));
                //     if (droppedContent.eq(index).length) {
                //         newAccordion.append(droppedContent.eq(index));
                //     }
                // });
                //
                // accordionWrapper.append(newAccordion);
                // $(this).empty().append(accordionWrapper);


                var newAccordion = $('<div class="accordion"></div>');
                droppedHeader.each(function(index) {
                    newAccordion.append($(this));
                    if (droppedContent.eq(index).length) {
                        newAccordion.append(droppedContent.eq('index'));
                    }
                });

                // Create a wrapper for the new accordion and append to the droppable area
                var accordionWrapper = $('<div class="accordion-wrapper"></div>');
                accordionWrapper.append(newAccordion);
                $(this).append(accordionWrapper);


                $(this).removeClass('ui-state-highlight')
                    .append(newAccordion)
                    .css("min-height", 'auto');

                // Reinitialize accordion within dropzone
                newAccordion.accordion({
                    collapsible: true,
                    active      : false,
                    heightStyle : 'content'
                });

                //* make the dropzone sortable
                $(this).sortable({
                    handle  : 'h3',
                    stop    : function(event, ui) {
                        $(this).find('.accordion').accordion('refresh');
                        updatePreview();
                    }
                });

                updatePreview();
            },
            over    : function(event, ui) {
                $(this).addClass('ui-state-highlight');
            },
            out     : function(event, ui) {
                $(this).removeClass('ui-state-highlight');
            }
        });


        function updatePreview() {
            var preview = $('.previewzone');
            preview.empty();

            $('.dropzone .accordion').each(function() {
                var accordion = $(this);
                accordion.find('h3').each(function() {
                    var header = $(this).text().trim();
                    var content = $(this).next().clone().children().unwrap();

                    console.log(content);

                    var previewItem = $('<div class="preview-item"></div>');
                    previewItem.append(content);
                    previewItem.append('<br /><br />');
                    preview.append(previewItem);
                });
            });
        }








        //* border color
        $('.element-border-color').closest('div').parent('div').parent('div').find('.editable-item').css('border-color', $('.element-border-color').val());

        $('.element-border-color').on('change', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');

            $el.css('border-color', $val);
        });


        //* border thickness
        $('.element-border-thickness').closest('div').parent('div').parent('div').find('.editable-item').css('border-width', $('.element-border-thickness').val() +'px');

        $('.element-border-thickness').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            if ($val.length <= 0) {
                $val = 0;
            }

            $el.css('border-width', $val +'px');
        });


        //* padding
        $('.element-padding').closest('div').parent('div').parent('div').find('.editable-item').css('padding', $('.element-padding').val() +'px');

        $('.element-padding').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            if ($val.length <= 0) {
                $val = 0;
            }

            $el.css('padding', $val +'px');
        });


        //* default text
        $('.element-default-text').closest('div').parent('div').parent('div').find('.editable-item').attr('placeholder', $('.element-default-text').val());

        $('.element-default-text').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            $el.attr('placeholder', $val);
        });


        //* text size
        $('.element-text-size').closest('div').parent('div').parent('div').find('.editable-item').css('font-size', $('.element-text-size').val() +'px');

        $('.element-text-size').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            if ($val.length <= 0) {
                $val = 12;
            }

            $el.css('font-size', $val +'px');
        });


        //* text color
        $('.element-text-color').closest('div').parent('div').parent('div').find('.editable-item').css('color', $('.element-text-color').val());

        $('.element-text-color').on('change', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');

            $el.css('color', $val);
        });


        //* width
        $('.element-width').closest('div').parent('div').parent('div').find('.editable-item').css('width', $('.element-width').val() +'%');

        $('.element-width').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            $el.css('width', $val +'%');
        });



        //* dropdown texts
        $('.element-dropdown-text-1').closest('div').parent('div').parent('div').find('.editable-item').append('<option value="" id="dropdown-text-1">'+ $('.element-dropdown-text-1').val() +'</option>');
        $('.element-dropdown-text-2').closest('div').parent('div').parent('div').find('.editable-item').append('<option value="" id="dropdown-text-2">'+ $('.element-dropdown-text-2').val() +'</option>');
        $('.element-dropdown-text-3').closest('div').parent('div').parent('div').find('.editable-item').append('<option value="" id="dropdown-text-3">'+ $('.element-dropdown-text-3').val() +'</option>');

        $('.element-dropdown-text-1').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            $el.find('#dropdown-text-1').empty().append($val);
        });

        $('.element-dropdown-text-2').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            $el.find('#dropdown-text-2').empty().append($val);
        });

        $('.element-dropdown-text-3').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item');


            $el.find('#dropdown-text-3').empty().append($val);
        });


        //* radio
        $('.element-radio-text-1').closest('div').parent('div').parent('div').find('.editable-item').append('<label id="radio-1"><input type="radio" /> '+ $('.element-radio-text-1').val() +'</label> <br /><br />');
        $('.element-radio-text-2').closest('div').parent('div').parent('div').find('.editable-item').append('<label id="radio-2"><input type="radio" /> '+ $('.element-radio-text-2').val() +'</label> <br /><br />');
        $('.element-radio-text-3').closest('div').parent('div').parent('div').find('.editable-item').append('<label id="radio-3"><input type="radio" /> '+ $('.element-radio-text-3').val() +'</label> <br /><br/>');

        $('.element-radio-text-1').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item').find('#radio-1');


            $el.empty().append('<input type="radio" /> '+ $val);
        });

        $('.element-radio-text-2').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item').find('#radio-2');


            $el.empty().append('<input type="radio" /> '+ $val);
        });

        $('.element-radio-text-3').on('keyup', function() {
            var $this   = $(this),
                $val    = $this.val(),
                $el     = $this.closest('div').parent('div').parent('div').find('.editable-item').find('#radio-3');


            $el.empty().append('<input type="radio" /> '+ $val);
        });
    });
</script>
</body>
</html>
