<style>
    .serialDiv{
        text-align: center;
        //color: white;
        font-weight: bold;
        border: 1px solid #019660;
        border-radius: 15px/10% !important;
        padding: 10px 12px 10px;
        background-color: #7FBDA7;
    }
</style>
<div class="row">
    <div class="container">

        <ol class="breadcrumb">
            <li><a href="#">ترخيص جهاز</a></li>
            <li><a href="generateserial.php">ترخيص جهاز</a></li>
            <li class="active">اضافة ترخيص جهاز</li>
        </ol>


        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">اضافة ترخيص جهاز</h3>
            </div>
            <div class="panel-body">

                <form class="nameToBeChecked form-horizontal" action="generateserial.php" method="post" >

                    <div class="serialDiv">
                        {if $flag != "0"}
                        <p style="color: black"><u>{$flag}</u></p>
                        <p style="color: white" id="myDiv">{$serial}</p>
                        {else}
                        <p style="color: black">السيربال الخاص بهذا العميل هو:</p>
                        <p style="color: white" id="myDiv">{$serial}</p>
                        {/if}

                    </div>

                    <!-- =================================================   -->
                    <br/>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-lg-4">
                            <button type="submit"  class="btn btn-default pull-left">رجوع</button>
                        </div>
                        <div class="col-lg-4">
                            <button type="button" class="btn btn-success" onclick="copyDivToClipboard()">نسخ</button>
                        </div>

                    </div>


                </form>
            </div>
        </div>




    </div>
</div>


<script>
function copyDivToClipboard() {
    const text = document.getElementById("myDiv").innerText;

    if (navigator.clipboard && window.isSecureContext) {
        // Modern browser, HTTPS
        navigator.clipboard.writeText(text).then(() => {
            alert("تم النسخ ");
        }).catch(err => {
            console.error("Failed to copy: ", err);
        });
    } else {
        // Fallback for older browsers or non-HTTPS
        const textarea = document.createElement("textarea");
        textarea.value = text;
        // Prevent scrolling on mobile
        textarea.style.position = "fixed";
        textarea.style.top = "0";
        textarea.style.left = "0";
        textarea.style.opacity = "0";
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();

        try {
            const successful = document.execCommand('copy');
            if (successful) {
                alert("Copied to clipboard!");
            } else {
                alert("Failed to copy.");
            }
        } catch (err) {
            console.error("Fallback: Oops, unable to copy", err);
        }

        document.body.removeChild(textarea);
    }
}
</script>




