<?php
    $Dhhelper        = $this->Dhhelper();
    $DHConfigureUrl  = "/default/designhuddle/index/createconfigurationhd";
    $DHProjectUrl    = "/default/designhuddle/index/createprojecthd";
    $domain          = $this->getDomainUrl();

    $objectManager  = \Magento\Framework\App\ObjectManager::getInstance();
    $product        = $objectManager->get('Magento\Framework\Registry')->registry('current_product');

    if ($product->getHuddleTemplate() !== '1') {
        return false;
    }
?>

<script type="text/javascript" src="https://cdn.designhuddle.com/jssdk/v1/lib.min.js"></script>
<script type="text/javascript" src="https://cdn.designhuddle.com/editor/v1/lib.js"></script>

<div class="dh" <?php /* style="height: 0;opacity: 0;" */?>>
    <input type="hidden" name="dh_project_id" id="input_dh_project_id" />
    <input type="hidden" name="dh_project_approve" id="input_dh_approve_id" />

    <input type="hidden" name="prodcode" id="prodcode" value="<?= $product->getSku(); ?>" />
    <input type="hidden" id="dh_configure_url" value="<?= $DHConfigureUrl; ?>"/>
    <input type="hidden" id="dh_domain" value="<?= $domain; ?>"/>
    <input type="hidden" id="dh_project_url" value="<?= $DHProjectUrl; ?>"/>

    <div class="dh_option"></div>

    <a id="dh-project-btn" class="dh-project-btn" style="pointer-events: none;"><?php echo __('Design Online') ?></a>
</div>

<script>
    require(['jquery', 'domReady!' ,'DHmagnificPopup' ,'DHmagnify','DHdesignscrpt', 'Magento_Ui/js/modal/modal'], function(jQuery) {});
</script>

<style>
    iframe{ opacity : 1 !important; }
    a#dh-project-btn {
        padding: 14px 18px;
        border: 1px solid;
        background: #CAD400;
        color: #fff;
        cursor: pointer;
        display: flex;
        width: fit-content;
        font-size: 16px;
    }
    .mfp-iframe-holder .mfp-content {
        max-width: 1100px !important;
    }
    .dh_controll {
        position: absolute;
        top: -33px;
        z-index: 99999;
        right: 0;
        display: flex;
        width: 100%;
    }
    .dh_controll button {
        border-radius: 0 !important;
        background: #CAD400 !important;
        color: #fff;
        border-width: 0 !important;
        width: 100%;
    }
    button.mfp-close {
        display: none !important;
    }
    button#dh_back {
        float: left;
        width: auto;
    }
    button#dh_approve {
        float: right;
        width: auto;
        right: 0;
        position: absolute;
    }
    .dh_option {
        display: flex;
        margin: 22px 0;
    }
    .dh_option input {
        height: 50px;
        width: auto;
        margin-right: 16px;
    }
</style>
