<!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.lblRequestaservice}{/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" />
    <link href="{$view_styles}/ui.daterangepicker.css" rel="stylesheet" type="text/css" media="screen" />
    {include file='CommonJavaScript.tpl'} 
    {include file='CommonStyles.tpl'} 
    {form->rootpath_script} 
    {form->basepath_script}
    <script>
	fbq('track', 'Schedule');
	</script>
</head>
<body ng-controller="SearchCtrl" class="{$languageDirection}">
<!--
Start of Floodlight Tag: Please do not remove
Activity name of this tag: BMW - Find Your BMW - Request a Service
URL of the webpage where the tag is expected to be placed: https://www.findyourbmw.ae/en/requestaservice/
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 09/11/2019
-->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00l;u2=[language];u4=[model];u6=[section];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00l;u2=[language];u4=[model];u6=[section];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of Floodlight Tag: Please do not remove -->

<!--
Start of Floodlight Tag: Please do not remove
Activity name of this tag: BMW - Find Your BMW - Book an Appointment (x2)
URL of the webpage where the tag is expected to be placed: https://www.findyourbmw.ae/en/book-a-service.html
This tag must be placed between the <body> and </body> tags, as close as possible to the opening tag.
Creation Date: 09/11/2019
-->
<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00j;u2=[language];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://6355536.fls.doubleclick.net/activityi;src=6355536;type=websi0;cat=bmw-f00j;u2=[language];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;tfua=;npa=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>
<!-- End of Floodlight Tag: Please do not remove -->
    <!-- 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">
                    <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.lblRequestaservice}</li>
                    </ol>
                </div>
            </nav> 

         <div class="request-services">
             <div class="container">
                 <h4 class="text-secondary font-weight-bold m-0 pt-5">{$language.lblRequestaService}</h4>
                 <span class="text-muted font-semibold pb-4 d-block f-13 font-family-secondary">{$language.lblserviceNote}</span>
               {form->start name="formService" action="" method="post"}
                    <div class="form-block mb-5">
                        <div id="common_message"></div>
                        <div class="form-group row">
                              <div class="col-lg-6">
                                <label class="font-family-secondary">{$language.lblChooseService}</label>
                            {form->select  name="serviceID" tabindex="1" class="form-control" caption="->{$language.lblSelect}" options=$listServices  validate="required" error="{$language.errServiceCenter}"}
                        </div>
                        </div>
                        <div class="form-group row">

                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblFirstName}*</label>
                                <div class="row">
                                <div class="col-lg-4 col-4">
                            {form->select tabindex="2"
                          id="subtitle"
                          name="subtitle"
                          class="form-control" 
                          options="{$language.lblMr}->{$language.lblMr}~*{$language.lblMrs}->{$language.lblMrs}~*{$language.lblMiss}->{$language.lblMiss}~*{$language.lblDr}->{$language.lblDr}"
                        }
                        </div>
                        <div class="col-lg-8 col-8">{form->textbox autocomplete="off" name="name" class="form-control" tabindex="3" maxlength="100" validate="required" error=$language.errName}</div></div>
                            </div>
                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblSurname}*</label>
                          {form->textbox autocomplete="off" name="surname" class="form-control" tabindex="3" maxlength="100" validate="required" error=$language.errSurName}
                        </div>
                        </div>
                           <div class="form-group row">
                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblEmail}*</label>
                         {form->textbox autocomplete="off" name="emailID" class="form-control" tabindex="4"  validate="required~*email" error=$language.errEmail|cat:"~*"|cat:$language.errEnterValidEmailID}
                        </div>
                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblMobiltext}*</label>
                                <div class="row">
                                <div class="col-lg-4 col-4">
                           {form->select 
                                    tabindex="5"
                                    id="countrycode"
                                    name="countrycode"
                                    class="form-control  primary text-secondary" 
                                    options=$resCountry
                                }
                        </div>
                        <div class="col-lg-8 col-8"> {form->textbox autocomplete="off" name="phone" class="form-control" tabindex="6" 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>
                        <div class="form-group row">
                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblVehicleregistration}*</label>
                          {form->textbox autocomplete="off" name="vehiclereg" class="form-control" tabindex="7" maxlength="100" validate="required" error=$language.errVehicleRegistration}
                        </div>
                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblModel}*</label>
                                 {form->select  name="model" tabindex="8" class="form-control" caption="->{$language.lblSelect}" options=$productarray validate="required" error="{$language.errModel}"}
                        </div>
             

                  </div>
                  <div class="form-group row">
                    <div class="col-lg-6"><label class="font-family-secondary">{$language.lblModelyear}</label>
                        {form->textbox autocomplete="off" name="modelyear" class="form-control" tabindex="9" maxlength="100" validate="isNumber" error=$language.errValidYear}</div>
                            <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblPreferreddate}*</label>
                              {form->textbox  autocomplete="off" name="prefDate" class="form-control datepicker" tabindex="10" maxlength="15" validate="required" error=$language.errPreferDate}
                        </div>
                            
                  </div>

                 
                  <div class="form-group row">
                      <div class="col-lg-6">
                                 <label class="font-family-secondary">{$language.lblPreferredvehicledropofftime}*</label>
                                {form->select  name="dropoffTime" tabindex="11" class="form-control" caption="->{$language.lblSelect}" options=$arr validate="required" error="{$language.errModel}"}
                        </div>
                  </div>

                   <div class="service-section"><h6 class="font-weight-bold mt-5 mb-3 mb-lg-0">{$language.lblServiceSelection}</h6>

                     <ul class="row list-unstyled checboxlist mt-2">
                         <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 chkser" rel="1"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-brake-fluid float-left"></i><span class="ml-3 float-left font-weight-bold">{$language.lblBrake} <span class="d-block">{$language.lblFluidDuee}</span></span><input class="chk_Ser" type="checkbox" name="serviceitems[]" id="serviceitemsID_1" value="{$language.lblBrake} {$language.lblFluidDuee}"><label class="check-label" for="serviceitemsID_1"></label></div></li>
                          <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 chkser" rel="2"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-brake-fluid float-left"></i><span class="ml-3 float-left font-weight-bold">{$language.lblBrake} <span class="d-block">{$language.lblFluidOverdue}</span></span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_2" value="{$language.lblBrake} {$language.lblFluidOverdue}"><label class="check-label" for="serviceitemsID_2"></label></div></li>
                           <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 chkser" rel="3"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-front-brake-pad float-left"></i><span class="ml-3 float-left font-weight-bold">{$language.lblFrontBrake}  <span class="d-block">{$language.lblPadsDue}</span></span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_3" value="{$language.lblFrontBrake} {$language.lblPadsDue}"><label class="check-label" for="serviceitemsID_3"></label></div></li>
                            <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 chkser" rel="4"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-micro-filter float-left"></i><span class="ml-3 float-left font-weight-bold">{$language.lblMicrofilterDue}</span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_4" value="{$language.lblMicrofilterDue}"><label class="check-label" for="serviceitemsID_4"></label></div></li>
                             <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 mt-0 mt-lg-4 chkser" rel="5"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-oil-service float-left f-45"></i><span class="ml-3 float-left font-weight-bold">{$language.lblOilService}</span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_5" value="{$language.lblOilService}"><label class="check-label" for="serviceitemsID_5"></label></div></li>
                             <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 mt-0 mt-lg-4 chkser" rel="6"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><span class="icon-rear-brake-pad"><span class="path1"></span><span class="path2"></span><span class="path3"></span></span><span class="ml-3 float-left font-weight-bold">{$language.lblRearBrake}<span class="d-block">{$language.lblPadsDue}</span></span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_6" value="{$language.lblRearBrake} {$language.lblPadsDue}"><label class="check-label" for="serviceitemsID_6"></label></div></li>
                             <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 mt-0 mt-lg-4 chkser" rel="7"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-service-overdue float-left"></i><span class="ml-3 float-left font-weight-bold">{$language.lblServices}<span class="d-block">{$language.lblOverdue}</span></span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_7" value="{$language.lblServices} {$language.lblOverdue}"><label class="check-label" for="serviceitemsID_7"></label></div></li>
                             <li class="col-lg-3 col-6 col-md-3 mb-3 mb-lg-0 mt-0 mt-lg-4 chkser" rel="8"><div class="check-list border py-3 px-3 clearfix d-flex align-items-center justify-content-center"><i class="icon-vehicle-check float-left"></i><span class="ml-3 float-left font-weight-bold">{$language.lblVehicleCheck}</span><input class="chk_Ser"  type="checkbox" name="serviceitems[]" id="serviceitemsID_8" value="{$language.lblVehicleCheck}"><label class="check-label" for="serviceitemsID_8"></label></div></li>

                       
                     </ul>
                             

                     <div class="form-group row"> <div class="col-lg-12 mt-3"><label>{$language.lblEnterdiscription}*</label>
                             {form->textarea  name="serviceDesc" class="form-control" tabindex="11" validate="required" error=$language.errserviceDesc}
                             </div></div>
                      {form->submit name="submitFormService" class="btn btn-primary btn btn-primary font-weight-bold px-4 py-2 mt-3  mt-lg-0 " value={$language.lblSubmit}} 
                     {form->submit name="submitFormServiceLoader" class="btn btn-primary btn btn-primary font-weight-bold px-4 py-2 mt-3  mt-lg-0  disabled hide" value={$language.lblSubmit}} 
                     

                   </div>
             </div>
           {form->close} 


         </div>

        </div>
        
        <!-- End : Content Pane -->
        <!-- Begin : Footer	Pane -->
        {include file='CommonBottom.tpl'}
        <!-- End : Footer Pane -->
    </div>
    <!-- End : Outer Pane -->
    {include file='CommonJavaScriptBottom.tpl'} 
    {html->script_group_start name="{$compiled_js_path}/specialoffers.js"} 
    {html->script src="{$common_frontend_js}/offerview.page.js"}   
    {html->script_group_end} 
   {form->validate_script form="formService"} {html->messages_script id="common_message"}
    
    <script language="javascript">
    $(document).on('submit','#formService',function() 
	{
               
		if($(".message_validation :visible").length>0)
		{
                    return false;
		}
		else
		{
			$("#submitFormService").addClass('hide');
            $("#submitFormServiceLoader").removeClass('hide');
			fbq('track', 'CompleteRegistration');
		}
	});
     
    </script>
        <link href="{$view_javascript}/bootstrap-datepicker.js" rel="javascript" />
    <script type="text/javascript">
     $('.check-list ').click(function (){
      var checkbox = $(this).find('input[type=checkbox]');
       checkbox.prop("checked", !checkbox.prop("checked"));
        $(this).toggleClass("active");
       
});
       
       $('.datepicker').datepicker(
			{
			  
				minDate: new Date('{$currDate}'),
				dateFormat: 'dd/mm/yy',
				beforeShowDay: function(date) {
					var day = date.getDay();
					return [(day != 5), ''];
				}
			   
			}  
		);
    </script>
</body>

</html>
