<!DOCTYPE html>
<html lang="{$SelCurrLanguage}" dir="{$languageDirection}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{if $commonMetaTitle}{$commonMetaTitle}{else}{$language.lblBroucher}{/if}</title>
	<meta name="Description" content="{$commonMetaDescription}" />
    <meta name="viewport" content="width=device-width"> 
    <link href="{$view_styles}/cms.css" rel="stylesheet" type="text/css" media="screen" />
    {include file='CommonJavaScript.tpl'} 
    {include file='CommonStyles.tpl'} 
    {form->rootpath_script} 
    {form->basepath_script}

</head>

<body class="{$languageDirection}">

    <!-- Begin : Outer Pane -->
    <div id="main">
        <!-- Begin : Header Pane-->
        {include file='CommonTop.tpl'}
        <!-- End : Header -->
        <!-- Begin : Content Pane --> 
        <div id="content-wrapper"  >
            <nav class="breadcrumb-block" aria-label="breadcrumb">
                <div class="container">
                    <ol class="breadcrumb font-weight-bold font-small mb-0 px-0 py-3">
                        <li class="breadcrumb-item">{html->anchor href="/" caption="{$language.lblHome}"}</li>
                        <li class="breadcrumb-item active font-weight-bold">{$language.lblBroucher}</li>
                    </ol>
                </div>
            </nav>
            <div class="test-drive-form pt-4 pb-5 text-left">
                <div class="container mb-lg-5">
                    <div class="drive_form bg-white p-4">
                        {form->start name="formBroucher" action="" method="post"}
                        <div class="p-2">
                            <h1 class="h3 text-uppercase font-weight-bold mb-1">{$language.lblBroucher}</h1>
                            <p class="text-muted mb-4">{$language.lblPleaseFillTheDetails}</p>
                            <div id="common_message"></div>
                            <div class="form-group">
                                <label class="font-normal font-weight-bold mb-1">{$language.lblSeries}<sup class="font-xsmall">*</sup></label>
                           		{form->select  tabindex="1" class="form-control" name="productCategoryID"  caption="->{$language.lblSelect}" options=$resProductCategories validate="required" error=$language.errSeries}
					
							</div>
							
							   <div class="form-group">
                                <label class="font-normal font-weight-bold mb-1">{$language.lblModel}<sup class="font-xsmall">*</sup></label>
                                {form->select  name="bodyStyle" tabindex="2" class="form-control" caption="->{$language.lblSelect}"   validate="required" error="{$language.errModel}"}
                            </div>
                           
							<div class="form-group">
                  
                <label class="font-normal font-weight-bold mb-1">{$language.lblFirstName}<sup class="font-xsmall">*</sup></label>
                <div class="row">
                  <div class="col-4 col-lg-3 pr-0">
                      {form->select 
                          id="subtitleid"
                          name="subtitleid"
						  tabindex="3"
                          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="4"  class="form-control " validate="required" error=$language.errFirstName}
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="font-normal font-weight-bold mb-1">{$language.lblLastName} <sup class="font-xsmall">*</sup></label>
                {form->textbox class="form-control " maxlength="50" tabindex="5" name="userLastName" validate="required" error=$language.errLastName}
              </div>
				<div class="form-group">
                                <label class="font-normal font-weight-bold mb-1">{$language.lblPhoneNumber}<sup class="font-xsmall">*</sup></label>
                                <div class="row"><div class="col-4 col-lg-3 pr-0">
                                {form->select 
                                    id="countrycode"
                                    name="countrycode"
									tabindex="6"
                                    class="form-control  primary text-secondary" 
                                    options=$resCountry
                                }
                                </div>
                            <div class="col-8 col-lg-9">
                                {form->textbox autocomplete="off" name="phone" class="form-control" tabindex="7" maxlength='10' validate="required~*isNumber" error=$language.errPhone|cat:"~*"|cat:$language.errValidPhone}
                                </div>
								<span class="col-12 font-small mt-2">{$language.lblPhoneSubText}</span>
								</div>
                            </div>
                            <div class="form-group">
                                <label class="font-normal font-weight-bold mb-1">{$language.lblEmailAddress}<sup class="font-xsmall">*</sup></label>
                                {form->textbox autocomplete="off" name="emailID" class="form-control" tabindex="8"  validate="required~*email" error=$language.errEmail|cat:"~*"|cat:$language.errEnterValidEmailID}
                            </div>			
							
                         
                        
                            <div class="form-group">
                                {form->checkbox id="agree" name="agree"  value="1"}
                                <label for="agree" class="font-weight-normal">{$language.lblDataProtectionText}</label>
                                 {form->validate name="validateAgree" validate="agree->required"  error=$language.errAgreement}
                            </div>
                            <div class="text-right">
                                {form->submit name="submitFormBroucher" class="btn btn-primary font-small font-weight-bold px-5" value={$language.lblSubmit}} 
                                {form->submit name="submitFormBroucherLoader" class="btn btn-primary font-small font-weight-bold px-5 disabled hide" value={$language.lblSubmit}} 
                            </div>
                        </div>
                        {form->close} 
                    </div>
                </div>
            </div>
        </div>
        <!-- End : Content Pane --> 
        <!-- Begin : Footer	Pane -->
        {include file='CommonBottom.tpl'}
        <!-- End : Footer Pane -->
    </div>
    <!-- End : Outer Pane -->  
    {include file='CommonJavaScriptBottom.tpl'} 
    {html->messages_script id="common_message"} 
   
    {html->script src="{$common_js}/validate.plugin.js"}    
     {html->script src="{$common_frontend_js}/broucherform.js"} 
    {form->validate_script form='formBroucher'}
  
	<script type="text/javascript">
$(document).ready(function(){

var seriesval=$('#productCategoryID').val();
if(seriesval != ''){
				$.ajax({
					type: "POST",
					url: GLOBAL_BASE_PATH + "/brochure/ajaxGetBodytype/",
					data: 'category='+$(this).val(),
					success: function (data) 
					{          		
						  $( "#bodyStyle" ).html(data);
					}
				});
			}
			
});
$( function() {	   
		 $('#productCategoryID').change(function(){ 
			if($(this).val() != ''){
				$.ajax({
					type: "POST",
					url: GLOBAL_BASE_PATH + "/brochure/ajaxGetBodytype/",
					data: 'category='+$(this).val(),
					success: function (data) 
					{          		
						  $( "#bodyStyle" ).html(data);
					}
				});
			}
		});
		
  });
</script>
</body>
</html>

