<!--
/**
 * @author      Magetop Developer (Kien)
 * @package     Magento Multi Vendor Marketplace
 * @copyright   Copyright (c) Magetop (https://www.magetop.com)
 * @terms       https://www.magetop.com/terms
 * @license     https://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 **/
 -->
<script>
	require(['jquery','mage/mage'],function($){
		$('.become_seller').addClass('current');
	})
</script>
<?php if (count($block->becomeSeller())){ ?>
    <p>Please wait for approval from admin</p>
<?php }else{ ?>
    <form class="form-create-seller" action="<?php echo $this->getUrl().'marketplace/seller/become'?>" method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off">
        <fieldset class="fieldset create info">
            <legend class="legend"><span><?php /* @escapeNotVerified */ echo __('Seller Information') ?></span></legend><br/>
            
            <div id="shop-name" class="field field-shop-name required">
                <label for="storetitle" class="label">
                    <span><?php echo __('Shop Name') ?></span>
                </label>
                <div class="control">
                    <input type="text" data-validate="{required:true}" class="input-text required-entry" title="<?php echo __('Shop Name') ?>" value="" name="storetitle" id="storetitle" autocomplete="off" aria-required="true">
                </div>
            </div>
            <div id="contact-number" class="field field-contact-number required">
                <label for="contactnumber" class="label">
                    <span><?php echo __('Contact Number') ?></span>
                </label>
                <div class="control">
                    <input type="text" data-validate="{required:true}" class="input-text required-entry" title="<?php echo __('Contact Number') ?>" value="" name="contactnumber" id="contactnumber" autocomplete="off" aria-required="true">
                </div>
            </div>
            <div id="shopurl" class="shopurl field field-shopurl required">
                <label class="label">
                    <span><?php echo __('Shop URL For Your Marketplace Shop') ?></span>
                </label>
                <div class="control">
    				<div id="mb-ajaxloading" style="display: none;">
                        <img width="20px" height="20px" src="<?php echo $block->getViewFileUrl('images/loader-1.gif') ?>">
                    </div>			
                    <input type="text" data-validate="{required:true}" class="input-text required-entry shopurl" title="<?php echo __('Shop URL For Your Marketplace Shop') ?>" value="" name="shopurl" id="shopurl" autocomplete="off" aria-required="true">
                    <span name="shopurl" type="text" class="required-entry"> 
    					 <?php echo __('(This will be used to display your public profile. Example: fashion-store )') ?>
                    </span>
                </div>
                <div class="messages">
                    <div class="message-notice notice message shopurl_false" data-ui-id="message-notice" style="display: none;">
                        <div><?php echo __('This URL is not available.') ?></div>
                    </div>
                    <div class="message-success success message shopurl_true" data-ui-id="message-success" style="display: none;">
                        <div><?php echo __('This URL is available.') ?></div>
                    </div>
                </div>
            </div>	
        </fieldset>
        <div class="actions-toolbar">
            <div class="primary">
                <button title="<?php echo __('Become a Seller') ?>" class="action submit primary" type="submit"><span><?php echo __('Become a Seller') ?></span></button>
            </div>
        </div>
    </form>
    <script>
        require([
            'jquery',
        	'mage/template',
            'mage/mage'
        ], function($,mageTemplate,alert){
            var dataForm = $('#form-validate');
            dataForm.mage('validation', {
                
            }).find('input:text').attr('autocomplete', 'off');	
        
        	$('.shopurl').keyup(function(){
        		$(this).val($(this).val().replace(/[^a-z^A-Z^0-9\.\-]/g,''));
        	});
                    
        	$('#form-validate').delegate('.shopurl input','change', function(){
        		$('.shopurl_false,.shopurl_true').hide();
                $('#form-validate').find('button.submit').addClass('disabled');   
        		var shopurl=$('.shopurl input').val();
        		if(shopurl!=''){			
        			$.ajax({
        				url:'<?php echo $block->getUrl('marketplace/seller/verifyUrl') ?>',
        				type:'POST',
        				data:{shopurl:shopurl},
        				dataType:'text',
        				beforeSend:function(){
        					$('#mb-ajaxloading').show();
        				},
        				success:function(data){	
        					data=JSON.parse(data);
        					$('#mb-ajaxloading').hide();
        					if(data.status){
        				        $('#form-validate').find('button.submit').removeClass('disabled');    
        						$('.shopurl_true').show();
        					}else{
        						$('.shopurl input').val('');
        						$('.shopurl_false').show();
        					}
        				}
        			});
        		}
        	});	
        });
    </script>
<?php } ?>