// Outside the list
(function ($) {

    wp.customize.panel('prime_home_renovation_section_pro_panel', function (panel) {

        panel.deferred.embedded.done(function () {

            var button = $(`

    <div class="prime-home-renovation-pro-wrapper">

        <!-- GO PRO BUTTON -->
        <a class="button prime-home-renovation-pro-btn"
           href="https://www.webnotick.com/products/premium-renovation-company-theme"
           target="_blank">

            Go Pro

        </a>

        <!-- DISCOUNT BOX -->
        <div id="customizer-discount-box">

            <div class="discount-box">

                <h3>Get Special Discount</h3>

                <p>Copy Code & Save 20% OFF!</p>

                <span class="coupon-code"
                      onclick="copyCouponCode(this)">

                    SAVE20NOW

                </span>

            </div>

            <!-- SECOND BOX -->
<div class="discount-box discount-box2">
    <h3>Our New Features</h3>
   <div class="feature-box">

    <h2 class="feature-title">
        2 Homepage Layouts
    </h2>

</div>

<div class="feature-box">

    <h2 class="feature-title">
        Drag & Drop Sections
    </h2>

</div>

<div class="feature-box">

    <h2 class="feature-title">
        Unlimited Color Options
    </h2>

</div>
<div class="feature-box">

    <h2 class="feature-title">
       Sections Enable / Disable Options
    </h2>

</div>






</div>
<div class="feature-button">
<a href="https://www.webnotickdemo.com/prime-home-renovation/" target="_blank"
                    class="button button-primary button-hero">
                    View Demo
                </a>
</div>


        </div>

    </div>

`);

            // Append outside panel
            panel.container.append(button);

        });

    });

})(jQuery);



function copyCouponCode(element) {

    const text = element.innerText;

    navigator.clipboard.writeText(text);

    element.innerText = "Copied!";

    setTimeout(() => {

        element.innerText = text;

    }, 1000);

}