<?php $product = $block->getCurrentProduct(); ?>
<?php if ($product->getFoundLowerPrice()): ?>

    <div class="lower-title">
            <strong class="type" style="color: #000;">Price Match</strong>
    </div>
    <div class="find-lower-price">
        <span class="low-q"><?= /*@noEscape */ __($block->getTitle()); ?></span>
        <a href="#lower-price_popup" class="low-a price_popup_click"><?= /*@noEscape */  __('Yes') ?></a>
    </div>
    <div id="lower-price_popup" data-width="760" tabindex="-1" style="display:none;">
        <div class="modal-dialog1">
            <div class="modal-content1">
                <form class="lowerprice-form" action="<?= /*@noEscape */ $block->getActionUrl(); ?>" method="post" id="lowerprice-form" data-hasrequired="<?= /*@noEscape */ __('* Required Fields') ?>" data-mage-init='{"validation":{}}'>

                    <input type="hidden" name="product_id" value="<?= /*@noEscape */ $product->getId(); ?>"/>
                    <input type="hidden" name="product_name" value="<?= /*@noEscape */ $product->getName(); ?>"/>
                    <input type="hidden" name="product_price" value="<?= /*@noEscape */ $product->getFinalPrice(); ?>"/>

                    <fieldset class="fieldset first">
                        <img src="<?= /*@noEscape */ $block->getProductImageUrl(); ?>" alt="Product Image"/>
                        <h2 class="product name product-item-name">
                            <?= /*@noEscape */ __($product->getName()); ?>
                        </h2>
                        <div class="price-box-inner">
                            <?= /*@noEscape */ __('Price: '); ?><?= /*@noEscape */ $block->getPrice(); ?>
                        </div>
                    </fieldset>

                    <fieldset class="fieldset">
                        <legend class="legend"><span><?= /*@noEscape */ __('Found a Lower Price?') ?></span></legend>
                        <br/>
                        <div class="field note no-label"><?= /*@noEscape */ __($block->getDescription()); ?></div>
                        <div class="field note no-label"><?= /*@noEscape */ __('Please complete the form below.') ?></div>

                        <p class="bold"><?= /*@noEscape */ __('Price found at another internet retailer or their store:') ?></p>
                        <div class="field price required">
                            <label class="label" for="price"><span><?= /*@noEscape */ __('Price') ?></span></label>
                            <div class="control">
                                <input type="text" name="price" id="price" class="input-text"
                                       data-validate="{required:true}"/>
                            </div>
                        </div>
                        <div class="field product_link required">
                            <label class="label" for="product_link"><span><?= /*@noEscape */ __('Product link') ?></span></label>
                            <div class="control">
                                <input type="text" name="product_link" id="product_link" class="input-text"
                                       data-validate="{required:true}"/>
                            </div>
                        </div>
                    

                        <p class="bold"><?= /*@noEscape */ __('Where may we contact you?') ?></p>
                        <div class="field required">
                            <label for="name" class="label"><span><?= /*@noEscape */ __('Your Name') ?></span></label>
                            <div class="control">
                                <input type="text" name="name" id="name" title="<?= /*@noEscape */ __('Your Name') ?>"
                                       class="input-text" data-validate="{required:true}"/>
                            </div>
                        </div>
                        <div class="field required">
                            <label for="email" class="label"><span><?= /*@noEscape */ __('Email Address') ?></span></label>
                            <div class="control">
                                <input type="email" name="email" id="email" title="<?= /*@noEscape */ __('Email') ?>"
                                       class="input-text" data-validate="{required:true}"/>
                            </div>
                        </div>
                        <div class="field">
                            <label for="phone" class="label"><span><?= /*@noEscape */ __('Phone') ?></span></label>
                            <div class="control">
                                <input type="text" name="phone" id="phone" class="input-text"/>
                            </div>
                        </div>
                        <div class="field">
                            <label for="note" class="label"><span><?= /*@noEscape */ __('Note') ?></span></label>
                            <div class="control">
                                <textarea name="note" id="note" class="input-text"></textarea>
                            </div>
                        </div>
                        <div class="actions-toolbar lowerprice-form-actions">
                            <div class="primary actions-primary">
                                <button type="submit" class="action submit primary"><span><?= /*@noEscape */ __('Submit') ?></span></button>
                            </div>
                        </div>
                    </fieldset>
                </form>
                <div id="result-data" style="display: none;"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        require([
            'jquery',
            'jquery/ui',
            'mage/mage',
            'jquery/validate',
            'Magento_Ui/js/modal/modal',
            'mage/translate'
        ], function ($, a, b, c, modal) {

            var options = {
                type: 'popup',
                modalClass: 'lower-price-popup',
                responsive: true,
                innerScroll: true,
                title: '',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'lower-price-popup-class',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#lower-price_popup'));
            $(".price_popup_click").on('click', function (e) {
                e.preventDefault();
                $("#lower-price_popup").modal("openModal");
            });

            function doAjax() {
                if ($('#lowerprice-form').valid()) {
                    $.ajax({
                        url: '<?= /*@noEscape */ $block->getActionUrl(); ?>',
                        type: "POST",
                        data: $("#lowerprice-form").serializeArray(),
                        dataType: 'json',
                        showLoader: true,
                        success: function (data) {
                            if (data.su) {
                                var msg = '<div id="result-data" class="result-su"><p>' + data.msg + '</p></div>';
                                $('#result-data').replaceWith(msg);
                                $("#lowerprice-form").hide();

                                setTimeout(function () {
                                    $('form.lowerprice-form').find("input[type=text], textarea").val("");
                                    $('form.lowerprice-form').find("input[type=checkbox], checkbox")
                                        .prop('checked', false);
                                    $("#result-data").hide();
                                    $('.lowerprice-close').click();
                                    $("#lowerprice-form").fadeIn("slow");
                                    $("#lower-price_popup").modal("closeModal");
                                }, 4000);

                            } else {
                                var msg = '<div id="result-data" class="result-err"><span class="close">X</span><p>' +
                                    data.msg + data.error + '</p></div>';
                                $('#result-data').replaceWith(msg);
                            }

                            $("#result-data .close").click(function () {
                                $(this).parent().hide();
                            });
                        }
                    });
                }
            }

            $("#lowerprice-form").submit(function (event) {
                event.preventDefault();
                doAjax();
            });

            $.validator.addMethod(
                'validate-custom-name', function (value) {
                    var website = $('#website').val();
                    var stroeName = $('#store_name').val();
                    var city = $('#city').val();
                    var state = $('#state').val();
                    var phone = $('#phone').val();
                    var zip_code = $('#zip_code').val();
                    if (website || (stroeName && city && state && phone && zip_code)) {
                        return true;
                    }
                    else {
                        return false;
                    }
                }, $.mage.__('<?= /*@noEscape */ __('Please enter either website or store name,city,state,phone and zip code.') ?>')
            );

        });
    </script>
    <?php
endif;
