<!-- download product information modal -->
    <div class="modal fade" id="downloadbroucher" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header p-0 border-bottom-0">
            <div class="col-lg-12 col-12 text-right font-weight-bold pt-3"><i class="icon-close close-download-info cursor-pointer" data-dismiss="modal" aria-label="Close"></i></div>
          </div>
          <div class="modal-body px-5">
              {form->start name="formDownloadBroucher" method="post" enctype="multipart/form-data"}     
             {form->hidden name="productCategoryID" value="{$resProduct.productCategoryID}"}   
             {form->hidden name="productCategoryName" value="{$resProduct.productCategoryName}"}   
             {form->hidden name="productCategoryKey" value="{$resProduct.productCategoryKey}"}   
             {form->hidden name="bodyStyle" value="{$resProduct.bodyStyle}"}   
			<div class="row download-product-info-form-blk text-left">
              <div class="col-lg-12 col-12"><h4 class="text-secondary font-weight-bold mb-4 text-left">{$language.lblDownloadBroucher}</h4></div>
              <div class="col-lg-6 col-12 mb-3">
                  
                <label class="mb-1 text-secondary font-weight-bold">{$language.lblFirstName}<sup class="font-weight-normal font-xsmall text-danger">*</sup></label>
                <div class="row">
                  <div class="col-4 col-lg-3 pr-0">
                      {form->select 
                          id="subtitleid"
                          name="subtitleid"
                          class="form-control  primary text-secondary" 
                          options="{$language.lblMr}->{$language.lblMr}~*{$language.lblMrs}->{$language.lblMrs}~*{$language.lblMiss}->{$language.lblMiss}~*{$language.lblDr}->{$language.lblDr}"
                        }
                    
                  </div>
                  <div class="col-8 col-lg-9">
                  {form->textbox  name="userFirstName" maxlength="50"  tabindex="1"  class="form-control " validate="required" error=$language.errFirstName}
                  </div>
                </div>
              </div>
              <div class="col-lg-6 col-12 mb-3">
                <label class="mb-1 text-secondary  font-weight-bold">{$language.lblLastName} <sup class="font-weight-normal font-xsmall text-danger">*</sup></label>
                {form->textbox class="form-control " maxlength="50" tabindex="2" name="userLastName" validate="required" error=$language.errLastName}
              </div>
              <div class="col-lg-6 col-12 mb-3">
                <label class="mb-1 text-secondary  font-weight-bold">{$language.lblEmailAddress} <sup class="font-weight-normal font-xsmall text-danger">*</sup></label>
                {form->textbox name="userEmail" class="form-control" tabindex="3" validate="required~*email" error=$language.errInvalidEmail} 
              </div>
              <div class="col-lg-6 col-12 mb-3">
                <label class="mb-1 text-secondary  font-weight-bold">{$language.lblPhoneNumber} <sup class="font-weight-normal font-xsmall text-danger">*</sup></label>
				<div class="row">
                <div class="col-4 col-lg-3 pr-0">
                    {form->select 
                          id="countrycode"
                          name="countrycode"
                          class="form-control  primary text-secondary" 
                          options=$resOTPCountry
                        }
                        
                {*<select class="form-control text-secondary" id="countrycode">
                    <option value="971" selected="selected">+971</option>
                </select>*}
                </div>    
                <div class="col-8 col-lg-9">
                {form->textbox name="userPhone" class="form-control text-secondary" maxlength="10" tabindex="5" validate="required~*isNumber" error=$language.errPhone|cat:"~*"|cat:$language.errValidPhone } 
                </div>
                <span class="sub-text col-12 font-small mt-2">{$language.lblPhoneSubText}</span>
              </div>
			  </div>
              <div class="col-12 mb-3">
               {form->checkbox class="pos-abs chkbx1"  name="agree" value="1"} 
               <label for="agree" class="mb-1 text-secondary  font-weight-bold">{$language.lblDataProtectionText}</label>
               <div> {form->validate name="validateAgree" validate="agree->required"  error=$language.errAgreement} </div>
              </div>
              
              
              <div class="col-lg-6 col-12 mb-4 mt-3">
                  {form->button tabindex="6" value="{$language.lblSubmit}" name="submit" id="broucherDownloadBtn" class="btn btn-primary font-small font-weight-bold w-50" form="formDownloadProductInfo"} 
              </div>
            </div>
              {form->close} 
            <div class="row download-product-info-otp-blk hide">
              <div class="col-lg-12 col-12">
                <h4 class="font-weight-bold text-left">{$language.lblEnterOTP}</h4>
                <p class="font-family-primary mb-4 text-left">{$language.lblPleaseTypeVerificationCode} {$language.lblPhone} <span class="phoneassign"></span></p>
              </div>
              <div class="contact-information form-blk col-lg-5 col-12">
                <div class="row mb-4 otp-input-blk">
                  <div class="col">
                    {form->textbox name="userotp1" maxlength="1" class="form-control text-center otpfield"} 
                  </div>
                  <div class="col">
                    {form->textbox name="userotp2" maxlength="1" class="form-control text-center otpfield"} 
                  </div>
                  <div class="col">
                    {form->textbox name="userotp3" maxlength="1" class="form-control text-center otpfield"} 
                  </div>
                  <div class="col">
                    {form->textbox name="userotp4" maxlength="1" class="form-control text-center otpfield"} 
                  </div>
                  <div class="broucher_otp_validateion_error message_validation hide col-12 mt-2">{$language.InvalidOTP}</div>   
                </div>
                <div class="col-12 p-0 mb-3">
                  <input type="submit" class="btn btn-primary font-small font-weight-bold w-100 py-3" id="download-broucher-otp-submit" value="{$language.lblVerify}"/>
                </div>
                <div class="col-12 p-0 ">
                  <p class="text-muted resenddownloadbroucherotp text-left">{$language.lblDidntGetOTP} 
				  <a href="javascript:void(0);" onclick="resendBroucherOTPData();" class="text-secondary hover-clr-primary text-underline  ">{$language.lblResendOTP}</a>
				  </p>
				  <p class="resendingdownloadbroucherotp hide text-left">
				  <a href="javascript:void(0);" class="text-secondary hover-clr-primary text-underline ">{$language.lblResendingOTP}</a>
				  </p>
                </div>
              </div>
            </div>
            <div class="row download-product-info-thankyou-blk hide">
              <div class="col-lg-12 col-12 text-center py-5">
                <h2 class="mb-2 text-primary">{$language.lblThankYouForDownloadingBroucherInfo}</h2>
                <p class="font-family-primary  my-4 text-muted">
                    {html->anchor class="btn btn-outline-primary mx-2 px-4 py-2 mb-4" onclick="javascript:window.history.back();"  content="{$language.lblGoBack}"}
                    {html->anchor class="btn btn-primary mx-2 px-4 py-2 mb-4" href="/"  content="{$language.lblHome}"}
                    {html->anchor class="btn btn-primary mx-2 px-4 py-2 mb-4 close-download-broucher-thanks"  content="{$language.lblClose}"}
                </p>
              </div>
            </div>  
          </div>
              
        </div>
      </div>
    </div>
        {form->validate_script form="formDownloadBroucher"}
    <!-- download product information modal -->
	 {html->script src="{$common_frontend_js}/broucher.js"}  
    <script>
        $('.close-download-broucher-thanks').click(function(){
            $('.icon-close').trigger('click');
        })
    </script>