<!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.lblBookATestDrive}{/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 ng-controller="SearchCtrl" class="{$languageDirection}">
    <!-- Begin : Outer Pane -->
    <div id="main">
        <!-- Begin : Header Pane-->
        {include file='CommonTop.tpl'}
        <!-- End : Header -->
        <!-- Begin : Content Pane --> 
        <div id="content-wrapper" ng-show="!query" >
            <nav class="breadcrumb-block" aria-label="breadcrumb">
                <div class="container py-1">
                    <ul class="breadcrumb list-unstyled m-0 py-2 px-0 text-left">
                        <li class="breadcrumb-item">{html->anchor href="/" caption="{$language.lblHome}"}</li>
                        <li class="breadcrumb-item active">{$language.lblTestDrive}</li>
                    </ul>
                </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="formTestDrive" action="" method="post"}
                        <div class="p-2">
                            <h1 class="h3 text-uppercase font-weight-bold mb-1">{$language.lblBookATestDrive}</h1>
                            <p class="text-muted mb-4">{$language.lblPleaseFillTheDetails}</p>
                            <div id="common_message"></div>
                            <div class="form-group">
                                <label class=" mb-1">{$language.lblChooseShowroom}<sup class="font-xsmall">*</sup></label>
                                {*form->select name=ChooseShowroom tabindex=1 class="form-control" value="" options="" placeholder="{$language.lblChooseShowroom}"*}
                                 {form->select  name="showroomID" tabindex="1" class="form-control" caption="->{$language.lblSelect}" options=$listShowrooms  validate="required" error="{$language.errShowroom}"}
                            </div>
                            <div class="form-group">
                                <label class=" mb-1">{$language.lblModel}<sup class="font-xsmall">*</sup></label>
                                {form->select  name="model" tabindex="2" class="form-control" caption="->{$language.lblSelect}" options=$productarray value="{$selCat}"  validate="required" error="{$language.errModel}"}
                            </div>
                            <div class="form-group">
                                <label class=" mb-1">{$language.lblName}<sup class="font-xsmall">*</sup></label>
                                {form->textbox autocomplete="off" name="name" class="form-control" tabindex="4" maxlength="50" validate="required" error=$language.errName}
                            </div>
                            <div class="form-group">
                                <label class=" 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"
                                    class="form-control text-secondary" 
                                    options=$resCountry
                                }
                                </div>
                            <div class="col-8 col-lg-9">
                                {form->textbox autocomplete="off" name="phone" class="form-control" tabindex="5" maxlength='10' validate="required~*isNumber" error=$language.errPhone|cat:"~*"|cat:$language.errValidPhone}
                                </div>
								<span class="sub-text col-12 font-weight-light text-muted mt-2">{$language.lblPhoneSubText}</span>
								</div>
                            </div>
                            <div class="form-group">
                                <label class=" mb-1">{$language.lblEmailAddress}<sup class="font-xsmall">*</sup></label>
                                {form->textbox autocomplete="off" name="emailID" class="form-control" tabindex="6"  validate="required~*email" error=$language.errEmail|cat:"~*"|cat:$language.errEnterValidEmailID}
                            </div>
                            <div class="form-group">
                                <label class=" mb-1">{$language.lblCurrentCar}<sup class="font-xsmall">*</sup></label>
                                {form->select  name="currentCar" tabindex="7" class="form-control" caption="->{$language.lblSelect}" options=$currentCar validate="required"  error=$language.errOption}
                            </div>
                            <div class="form-group">
                                <label class=" mb-1">{$language.lblWhenDoYouBuyCar}<sup class="font-xsmall">*</sup></label>
                                 {form->select  name="whenTobuy" tabindex="3" class="form-control" caption="->{$language.lblSelect}" options="Within one month->{$language.lblNextOnemonth}~*Within next three months->{$language.lblNextThreemonth}~*After three months->{$language.lblAfterThreemonth}"  validate="required" error="{$language.errOption}"}
                            </div>
							<div class="form-group">
                                {form->checkbox id="agree" name="agree"  value="1"}
                                <label for="agree" class="font-base">{$language.lblDataProtectionText}</label>
                                 {form->validate name="validateAgree" validate="agree->required"  error=$language.errAgreement}
                            </div>
                            <div class="text-right">
                                {form->submit name="submitFormtestDrive" class="btn btn-primary  px-5" value={$language.lblSubmit}} 
                                {form->submit name="submitFormtestDriveLoader" class="btn btn-primary  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_group_start name="{$compiled_js_path}/testdrive.js"}
    {html->script src="{$common_js}/validate.plugin.js"}    
     {html->script_group_end} 
    {form->validate_script form='formTestDrive'}
    <script language="javascript">
    $(document).on('submit','#formTestDrive',function() 
	{
                
		if($(".message_validation :visible").length>0)
		{
                    return false;
		}
		else
		{
			$("#submitFormtestDrive").addClass('hide');
                        $("#submitFormtestDriveLoader").removeClass('hide');
			
		}
	}
	);
    </script>
</body>
</html>

