<?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: "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;
            }


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

                cursor: move;
                z-index: 1000;
            }

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

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


                padding: 20px;
                border: 2px dashed #ccc;
                border-radius: 5px;
                text-align: center;
                position: relative;
            }

            .dropzone .dropped {
                margin-bottom: 10px;
                padding: 10px;
                border-radius: 5px;

                font-weight: bold;
            }

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

            .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: '';*/
            }


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

                padding: 20px;
                border: 2px dashed #ccc;
                border-radius: 5px;
                text-align: left;
                position: relative;
            }

            .preview input[type="text"],
            .preview textarea,
            .preview select,
            .preview button {
                width: 100%;
            }


            .item-controls input[type="color"] {
                margin-left: 5px;
            }

            .editable-item {
                width: 100%;
            }
        </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 cells6">
                        <div class="cell">
                            <div class="accordion">
                                <h3 class="draggable" contenteditable="false">Textbox</h3>
                                <div>
                                    <input type="text" placeholder="Enter text here" style="width:100%;" class="editable-item" />

<!--                                    <div class="row cell item-controls" style="margin-top:10px;">-->
<!--                                        Border Color: <input type="color" class="border-color" value="#ddd" />-->
<!--                                        <br />-->
<!---->
<!--                                        Padding: <input type="text" class="padding" value="10px" />-->
<!--                                    </div>-->

                                    <div class="row cell item-controls" style="margin-top:10px;"></div>
                                </div>

                                <h3 class="draggable" contenteditable="false">Textarea</h3>
                                <div>
                                    <textarea rows="5" placeholder="Enter your text here" style="width:100%;"></textarea>
                                </div>

                                <h3 class="draggable" contenteditable="false">Select</h3>
                                <div>
                                    <select style="width:100%;">
                                        <option value="">Option 1</option>
                                        <option value="">Option 2</option>
                                        <option value="">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">Button</h3>
                                <div>
                                    <button>Click Me</button>
                                </div>
                            </div>
                        </div>



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


                        <div class="cell colspan3">
                            <div class="preview"></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($) {
                $('.accordion').accordion({
                    collapsible : true,
                    active      : false,
                    heightStyle : 'content'
                });


                $('.draggable').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: ".accordion > h3",
                    drop: function(event, ui) {
                        var droppedHeader = ui.helper.find("h3").clone();
                        var droppedContent = ui.helper.find("div").clone();

                        //* clone the dropped with the item-controls
                        droppedContent.find('.item-controls').remove();


                        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) {
                                $(this).find('.accordion').accordion('refresh');
                                updatePreview();
                            }
                        });


                        //* update preview
                        updatePreview();
                    },
                    over: function (event, ui) {
                        $(this).addClass("ui-state-highlight");
                    },
                    out: function (event, ui) {
                        $(this).removeClass("ui-state-highlight");
                    }
                });


                function updatePreview() {
                    var preview = $('.preview');
                    preview.empty(); //* clear previous preview

                    $('.dropzone .accordion').each(function() {
                        var accordion = $(this);
                        accordion.find('h3').each(function() {
                            var header = $(this).text().trim();
                            var content = $(this).next().clone().children().unwrap(); //* remove the <div> wrapper

                            //* remove item-controls from preview
                            content.find('.item-controls').remove();

                            content.find('.editable-item').each(function() {
                                $(this).css('border-color', $(this).data('border-color') || '#ddd');
                            });

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



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

                    // $this.closest('div').find('.editable-item').css('border-color', color);
                    $item.css('border-color', color);
                    $item.data('border-color', color);
                    updatePreview();
                });

                $('.padding').on('keyup', function() {
                    var $this   = $(this),
                        padding = $this.val();

                    $this.closest('div').parent('div').find('.editable-item').css('padding-top', padding)
                        .css('padding-right', padding)
                        .css('padding-bottom', padding)
                        .css('padding-left', padding);


                });
            });
        </script>
    </body>
</html>
