<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tst</title>
        <meta charset="utf-8" />

        <style>
            .container {
                width: 100%;
                height: 100vh;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                background-color: #f0f0f0;
                padding: 20px;
                box-sizing: border-box;
            }

            .controls {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .controls label {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .accordion {
                width: 300px;
                background-color: #ffffff;
                border: 2px solid #ddd;
                border-radius: 5px;
                padding: 10px;
                margin-bottom: 10px;
            }

            .dropzone {
                width: 350px;
                min-height: 100px;
                padding: 20px;
                background-color: #f7f7f7;
                border: 2px dashed #999999;
                border-radius: 5px;
                text-align: center;
                position: relative;
            }

            .dropzone .accordion {
                margin-top: 10px;
            }

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

            .dropzone.ui-droppable-active:after {
                content: "";
            }

            .draggable {
                cursor: move;
                background-color: #4CAF50;
                color: white;
                padding: 10px;
                margin: 5px 0;
                border-radius: 5px;
                text-align: center;
                border: 2px solid #45a049;
            }

            .draggable:focus {
                outline: 2px solid #007bff;
            }

            h3 {
                margin: 0;
                user-select: none;
            }

            .accordion div {
                padding: 10px;
            }

        </style>
    </head>
    <body>

    <div class="container">
        <div class="controls">
            <label>
                <input type="checkbox" id="bold-text" />
                Bold Text
            </label>
            <label>
                Border Color:
                <input type="color" id="border-color" value="#ddd" />
            </label>
            <label>
                Background Color:
                <input type="color" id="bg-color" value="#ffffff" />
            </label>
            <label>
                Placeholder Color:
                <input type="color" id="placeholder-color" value="#999999" />
            </label>
        </div>
        <div class="accordion">
            <h3 class="draggable" contenteditable="false">Textbox</h3>
            <div>
                <input type="text" placeholder="Enter text here" />
            </div>
            <h3 class="draggable" contenteditable="false">Textarea</h3>
            <div>
                <textarea rows="4" placeholder="Enter your text here"></textarea>
            </div>
            <h3 class="draggable" contenteditable="false">Select</h3>
            <div>
                <select>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>
            </div>
            <h3 class="draggable" contenteditable="false">Radio Buttons</h3>
            <div>
                <label><input type="radio" name="radioGroup" value="1" /> Option 1</label><br>
                <label><input type="radio" name="radioGroup" value="2" /> Option 2</label><br>
                <label><input type="radio" name="radioGroup" value="3" /> Option 3</label>
            </div>
            <h3 class="draggable" contenteditable="false">Button</h3>
            <div>
                <button>Click Me</button>
            </div>
        </div>
        <div class="dropzone">
            Drop here
        </div>
    </div>



    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

    <script>
        $(function() {
            // Initialize accordion
            $(".accordion").accordion({
                collapsible: true,
                active: false,
                heightStyle: "content"
            });

            // Make the <h3> headers draggable along with their content
            $(".accordion > 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());
                }
            });

            // Make dropzone droppable and customize the drop effect
            $(".dropzone").droppable({
                accept: ".accordion > h3",
                drop: function(event, ui) {
                    var droppedHeader = ui.helper.find("h3").clone();
                    var droppedContent = ui.helper.find("div").clone();

                    var newAccordion = $('<div class="accordion"></div>');
                    newAccordion.append(droppedHeader).append(droppedContent);

                    $(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) {
                            // Reinitialize accordion after sorting
                            $(this).find(".accordion").accordion("refresh");
                        }
                    });
                },
                over: function(event, ui) {
                    $(this).addClass("ui-state-highlight");
                },
                out: function(event, ui) {
                    $(this).removeClass("ui-state-highlight");
                }
            });

            // Update accordion styles based on controls
            $("#bold-text").change(function() {
                var bold = $(this).is(":checked") ? "bold" : "normal";
                $(".accordion h3").css("font-weight", bold);
                $(".dropzone .accordion h3").css("font-weight", bold);
            });

            $("#border-color").change(function() {
                var color = $(this).val();
                $(".accordion").css("border-color", color);
                $(".dropzone .accordion").css("border-color", color);
            });

            $("#bg-color").change(function() {
                var color = $(this).val();
                $(".accordion").css("background-color", color);
                $(".dropzone .accordion").css("background-color", color);
            });

            $("#placeholder-color").change(function() {
                var color = $(this).val();
                $(".accordion input::placeholder, .accordion textarea::placeholder").css("color", color);
                $(".dropzone .accordion input::placeholder, .dropzone .accordion textarea::placeholder").css("color", color);
            });
        });

    </script>

    </body>
</html>