@extends('layouts.app')

<link rel="stylesheet" href="css/custom.css">

@section('content')

    <section class="vehicle-info section space-y-16 xxl:space-y-24">

        <div class="md:max-w-screen-xl mx-auto px-5 xxl:px-0 text-gray-800 mt-16 lg:mt-12">

            <div class="flex flex-wrap lg:flex-no-wrap">
                {{-- <div class="w-full lg:w-auto whitespace-no-wrap bg-gray-200 rounded-xl lg:flex items-center lg:py-64 overflow-x-auto lg:overflow-x-visible scrollbar-none mb-5 lg:mb-0">
                    <x-forms-side-nav />
                </div> --}}
                <div class="w-full flex items-center">
                    <div class="lg:px-12 w-full">
                        {{-- <get-broucher :selectedmodel="{{ json_encode($selectedModel) }}"></get-broucher> --}}
                        <!-- Note :
                        - You can modify the font style and form style to suit your website. 
                        - Code lines with comments Do not remove this code are required for the form to work properly, make sure that you do not remove these lines of code. 
                        - The Mandatory check script can modified as to suit your business needs. 
                        - It is important that you test the modified form before going live.-->
                        <div id='crmWebToEntityForm' class='zcwf_lblLeft crmWebToEntityForm zoho-form-style'>
                            <meta name='viewport' content='width=device-width, initial-scale=1.0'>
                            <META HTTP-EQUIV='content-type' CONTENT='text/html;charset=UTF-8'>
                            <form id='webform6605568000000527725' action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads6605568000000527725 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory6605568000000527725()' accept-charset='UTF-8'>
                                <input type='text' style='display:none;' name='xnQsjsdp' value='5616b27170b53114c5b2a3a6f9eaadadc3a1f6baf935f9f2dc3ea15daa5bfcc9'>
                                </input>
                                <input type='hidden' name='zc_gad' id='zc_gad' value=''>
                                </input>
                                <input type='text' style='display:none;' name='xmIwtLD' value='093b50da7a795c25421739e30a97ea85400eaf4777cf0998f877c0e9a5ab802f6fa435315d4899dc6a6ad2f65bf015f9'>
                                </input>
                                <input type='text' style='display:none;' name='actionType' value='TGVhZHM='>
                                </input>
                                <input type='text' style='display:none;' name='returnURL' value='{{ url("/thank-you") }}'>
                                </input>

                                <div class="text-xl md:text-3xl suzuki-bold text-gray-900 mb-5">Brochure Download</div>

                                <div class='zcwf_row form-inner'>

	                                <div class="input-field full-width">
	                                    <div class='zcwf_col_lab'>
	                                        <label class="label" for='LEADCF13'>Selected Model <span style='color:red;'>*</span></label>
	                                    </div>
	                                    <div class='zcwf_col_fld'>
	                                        <select class='zcwf_col_fld_slt' role='combobox' aria-expanded='false' aria-haspopup='listbox' id='LEADCF13' onChange='addAriaSelected6605568000000527725()' aria-required='true' aria-label='LEADCF13' name='LEADCF13' multiple >
	                                            <option value='Jimny&#x20;5-door'>
	                                                Jimny 5-door
	                                            </option>
	                                            <option value='Baleno'>
	                                                Baleno
	                                            </option>
	                                            <option value='Swift'>
	                                                Swift
	                                            </option>
	                                            <option value='Jimny'>
	                                                Jimny
	                                            </option>
	                                            <option value='Vitara'>
	                                                Vitara
	                                            </option>
	                                            <option value='Dzire'>
	                                                Dzire
	                                            </option>
	                                            <option value='Ertiga'>
	                                                Ertiga
	                                            </option>
	                                            <option value='Ciaz'>
	                                                Ciaz
	                                            </option>
	                                            <option value='Grand&#x20;Vitara'>
	                                                Grand Vitara
	                                            </option>
	                                            <option value='EECO&#x20;Van'>
	                                                EECO Van
	                                            </option>
	                                            <option value='CARRY&#x20;Pick&#x20;Up'>
	                                                CARRY Pick Up
	                                            </option>
	                                            <option value='Fronx'>
	                                                Fronx
	                                            </option>
	                                        </select>
	                                        <div class='zcwf_col_help'></div>
	                                    </div>
	                                </div>

	                                <div class="input-field">
	                                    <label class="label hide" for='Salutation'>Salutation <span style='color:red;'> * </span></label>
	                                    <div class='zcwf_col_fld'>
	                                    	<div class="selectbox">
		                                        <select class='zcwf_col_fld_slt' role='combobox' aria-expanded='false' aria-haspopup='listbox' id='Salutation' onChange='addAriaSelected6605568000000527725()' aria-required='true' aria-label='Salutation' name='Salutation'>
		                                            <option value='Select option'>
		                                                Select option
		                                            </option>
		                                            <option value='Mr.'>
		                                                Mr.
		                                            </option>
		                                            <option value='Mrs.'>
		                                                Mrs.
		                                            </option>
		                                            <option value='Ms.'>
		                                                Ms.
		                                            </option>
		                                            <option value='Dr.'>
		                                                Dr.
		                                            </option>
		                                            <option value='Prof.'>
		                                                Prof.
		                                            </option>
		                                        </select>
		                                    </div>
	                                        <div class='zcwf_col_help'> </div>
	                                    </div>
	                                </div>

	                                <div class="input-field">
                                        <label class="label hide" for='LEADCF6'>Sale Type </label>
                                        <div class='zcwf_col_fld'>
                                        	<div class="selectbox">
	                                            <select class='zcwf_col_fld_slt' role='combobox' aria-expanded='false' aria-haspopup='listbox' id='LEADCF6' onChange='addAriaSelected6605568000000527725()' aria-required='false' aria-label='LEADCF6' name='LEADCF6'>
		                                            <option value='Sale Type'>
	                                                    Sale Type *
	                                                </option>
		                                            <option value='Individual'>
		                                                Individual
		                                            </option>
		                                            <option value='Company'>
		                                                Company
		                                            </option>
		                                        </select>
		                                    </div>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>

                                    <div class="input-field">
                                        <label class="label hide" for='First_Name'> First Name <span style='color:red;'> * </span> </label>
                                        <div class='zcwf_col_fld'>
                                            <input type='text' id='First_Name' aria-required='true' aria-label='First Name' name='First Name' aria-valuemax='40' maxlength='40' placeholder="First Name *">
                                            </input>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>

                                    <div class="input-field">
                                        <label class="label hide" for='Last_Name'> Last Name <span style='color:red;'> * </span> </label>
                                        <div class='zcwf_col_fld'>
                                            <input type='text' id='Last_Name' aria-required='true' aria-label='Last Name' name='Last Name' aria-valuemax='80' maxlength='80' placeholder="Last Name *">
                                            </input>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>

                                    <div class="input-field">
                                        <label class="label hide" for='Email'> Email </label>
                                        <div class='zcwf_col_fld'>
                                            <input type='text' ftype='email' autocomplete='false' id='Email' aria-required='false' aria-label='Email' name='Email' aria-valuemax='100' crmlabel='' maxlength='100' placeholder="Email">
                                            </input>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>

                                    <div class="input-field">
                                        <label class="label hide" for='Mobile'> Mobile Number <span style='color:red;'> * </span> </label>
                                        <div class='zcwf_col_fld'>
                                            <input type='text' id='Mobile' aria-required='true' aria-label='Mobile' name='Mobile' aria-valuemax='30' maxlength='30' placeholder="Mobile Number *">
                                            </input>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>


                                    <div class="input-field">
                                        <label class="label" for='LEADCF5'>Nearest branch <span style='color:red;'> * </span> </label>
                                        <div class='zcwf_col_fld'>
                                            <div class="selectbox">
                                            	<select class='zcwf_col_fld_slt' role='combobox' aria-expanded='false' aria-haspopup='listbox' id='LEADCF5' onChange='addAriaSelected6605568000000527725()' aria-required='true' aria-label='LEADCF5' name='LEADCF5'>
		                                            <option value='Branch Name *'>
                                                        Nearest showroom you can visit *
                                                    </option>
		                                            <option value='Abu&#x20;Dhabi'>
		                                                Abu Dhabi
		                                            </option>
		                                            <option value='Al&#x20;Ain'>
		                                                Al Ain
		                                            </option>
		                                            <option value='Deira'>
		                                                Deira
		                                            </option>
		                                            <option value='Ras&#x20;Al&#x20;Khaimah'>
		                                                Ras Al Khaimah
		                                            </option>
		                                            <option value='Sharjah'>
		                                                Sharjah
		                                            </option>
		                                            <option value='Sheikh&#x20;Zayed&#x20;Road'>
		                                                Sheikh Zayed Road
		                                            </option>
		                                            <option value='Fujairah'>
		                                                Fujairah
		                                            </option>
		                                        </select>
                                            </div>
                                            <div class='zcwf_col_help'> </div>
                                        </div>
                                    </div>

                                    <div class="input-field">
                                        <label class="label" for='LEADCF2'> How did you hear about us? <span style='color:red;'> * </span> </label>
                                        <div class='zcwf_col_fld'>
                                            <div class="selectbox">
                                            	<select class='zcwf_col_fld_slt' role='combobox' aria-expanded='false' aria-haspopup='listbox' id='LEADCF2' onChange='addAriaSelected6605568000000527725()' aria-required='true' aria-label='LEADCF2' name='LEADCF2'>
		                                            <option value='Select option'>
                                                        Select option
                                                    </option>
		                                            <option value='Email'>
		                                                Email
		                                            </option>
		                                            <option value='Friends&#x20;&amp;&#x20;Relatives'>
		                                                Friends &amp; Relatives
		                                            </option>
		                                            <option value='Google'>
		                                                Google
		                                            </option>
		                                            <option value='Magazine'>
		                                                Magazine
		                                            </option>
		                                            <option value='Newspaper&#x20;-&#x20;Digital'>
		                                                Newspaper - Digital
		                                            </option>
		                                            <option value='Newspaper&#x20;-&#x20;Print'>
		                                                Newspaper - Print
		                                            </option>
		                                            <option value='Outdoor&#x20;-&#x20;Ads'>
		                                                Outdoor - Ads
		                                            </option>
		                                            <option value='Radio'>
		                                                Radio
		                                            </option>
		                                            <option value='Showrooms'>
		                                                Showrooms
		                                            </option>
		                                            <option value='SMS'>
		                                                SMS
		                                            </option>
		                                            <option value='Social&#x20;Media&#x20;&#x28;Facebook&#x20;Instagram&#x20;Tiktok&#x20;Youtube&#x29;'>
		                                                Social Media &#x28;Facebook Instagram Tiktok Youtube&#x29;
		                                            </option>
		                                            <option value='Suzuki&#x20;User'>
		                                                Suzuki User
		                                            </option>
		                                            <option value='Web&#x20;-&#x20;Internet'>
		                                                Web - Internet
		                                            </option>
		                                            <option value='Other&#x20;Social&#x20;Media'>
		                                                Other Social Media
		                                            </option>
		                                            <option value='Other'>
		                                                Other
		                                            </option>
		                                        </select>
                                            </div>
                                            <div class='zcwf_col_help'> </div>
                                        </div>
                                    </div>

                                    <div class="input-field hide">
                                        <label class="label" for='LEADCF1'> Landing Page Name </label>
                                        <div class='zcwf_col_fld'>
                                            <div class="selectbox">
                                            	<select class='zcwf_col_fld_slt' role='combobox' aria-expanded='false' aria-haspopup='listbox' id='LEADCF1' onChange='addAriaSelected6605568000000527725()' aria-required='false' aria-label='LEADCF1' name='LEADCF1'>
		                                            <option value='-None-'>
		                                                -None-
		                                            </option>
		                                            <option selected value= 'Brochure&#x20;download'>
		                                                Brochure download
		                                            </option>
		                                            <option value='Request&#x20;a&#x20;Quote'>
		                                                Request a Quote
		                                            </option>
		                                            <option value='Book&#x20;a&#x20;test&#x20;drive'>
		                                                Book a test drive
		                                            </option>
		                                            <option value='Request&#x20;a&#x20;Quote-&#x20;Genuine&#x20;parts'>
		                                                Request a Quote- Genuine parts
		                                            </option>
		                                            <option value='Contact&#x20;us'>
		                                                Contact us
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Register&#x20;as&#x20;a&#x20;suzuki&#x20;customer'>
		                                                After sales - Register as a suzuki customer
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;A&#x20;Service'>
		                                                After sales - Book A Service
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Baleno'>
		                                                After sales - Book Accessories- Baleno
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Grand&#x20;Vitara'>
		                                                After sales - Book Accessories- Grand Vitara
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Ciaz'>
		                                                After sales - Book Accessories- Ciaz
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Dzire'>
		                                                After sales - Book Accessories- Dzire
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Ertiga'>
		                                                After sales - Book Accessories- Ertiga
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Jimny'>
		                                                After sales - Book Accessories- Jimny
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Swift'>
		                                                After sales - Book Accessories- Swift
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Fronx'>
		                                                After sales - Book Accessories- Fronx
		                                            </option>
		                                            <option value='After&#x20;sales&#x20;-&#x20;Book&#x20;Accessories-&#x20;Jimny&#x20;5&#x20;Door'>
		                                                After sales - Book Accessories- Jimny 5 Door
		                                            </option>
		                                        </select>
                                            </div>
                                            <div class='zcwf_col_help'> </div>
                                        </div>
                                    </div>

                                    <div class="input-field full-width">
                                        <div class="input-check">
                                            <label class="checkbox" for='LEADCF109'>
                                                <input type='checkbox' aria-checked='false' class='zcwf_ckbox' id='LEADCF109' aria-required='true' aria-label='LEADCF109' name='LEADCF109' aria-valuemax='3' maxlength='3' onclick='addAriaChecked6605568000000527725()'>
                                        		</input>
                                                <span class="checkmark"></span>
                                                Term and Conditions <span style='color:red;'> * </span>
                                            </label>
                                        </div>
                                        <div class="input-check">
                                            <label class="checkbox" for='LEADCF102'>
                                                <input type='checkbox' aria-checked='false' class='zcwf_ckbox' id='LEADCF102' aria-required='false' aria-label='LEADCF102' name='LEADCF102' aria-valuemax='3' maxlength='3' onclick='addAriaChecked6605568000000527725()'>
                                        		</input>
                                                <span class="checkmark"></span>
                                                Latest offers, deals and updates
                                            </label>
                                        </div>
                                    </div>

                                    <div class="input-field full-width form-btnbox">
                                        <input type='reset' class='zcwf_button' role='button' name='reset' value='Reset' aria-label='Reset' title='Reset'>
                                        <input type='submit' id='formsubmit' role='button' class='formsubmit zcwf_button' value='Submit' aria-label='Submit' title='Submit'>
                                    </div>

	                            </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </section>

@endsection

@section('scripts')
<script>
	function addAriaChecked6605568000000527725(){
		var checkboxElem=event.target;
		if( checkboxElem != undefined && checkboxElem.checked ){
			checkboxElem.ariaChecked='true';
		}
		else if( checkboxElem != undefined && !checkboxElem.checked ){
			checkboxElem.ariaChecked='false';
		}
	}
	function addAriaSelected6605568000000527725(){
		var optionElem=event.target;
		var previousSelectedOption=optionElem.querySelector( '[aria-selected=true]' );
		if( previousSelectedOption ){
			previousSelectedOption.removeAttribute( 'aria-selected' );
		}
		optionElem.querySelectorAll( 'option' )[ optionElem.selectedIndex ].ariaSelected='true';
	}
	function validateEmail6605568000000527725(){
		var form=document.forms[ 'WebToLeads6605568000000527725' ];
		var emailFld=form.querySelectorAll( '[ftype=email]' );
		var i;
		for( i=0; i < emailFld.length; i++ ){
			var emailVal=emailFld[ i ].value;
			if(( emailVal.replace( /^\s+|\s+$/g,'' )).length != 0 ){
				var atpos=emailVal.indexOf( '@' );
				var dotpos=emailVal.lastIndexOf( '.' );
				if( atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal.length ){
					alert( 'Please enter a valid email address. ' );
					emailFld[ i ].focus();
					return false;
				}
			}
		}
		return true;
	}
	function checkMandatory6605568000000527725(){
		var mndFileds=new Array( 'First Name', 'Last Name', 'Mobile', 'Salutation', 'LEADCF2', 'LEADCF5', 'LEADCF109', 'LEADCF13' );
		var fldLangVal=new Array( 'First\x20Name', 'Last\x20Name', 'Mobile', 'Salutation', 'How\x20did\x20you\x20hear\x20about\x20us\x3F', 'Branch\x20Name', 'Term\x20and\x20Conditions', 'Selected\x20Model' );
		for( i=0; i < mndFileds.length; i++ ){
			var fieldObj=document.forms[ 'WebToLeads6605568000000527725' ][ mndFileds[ i ]];
			if( fieldObj ){
				if((( fieldObj.value ).replace( /^\s+|\s+$/g,'' )).length == 0 ){
					if( fieldObj.type == 'file' ){
						alert( 'Please select a file to upload.' );
						fieldObj.focus();
						return false;
					}
					alert( fldLangVal[ i ] + ' cannot be empty.' );
					fieldObj.focus();
					return false;
				}
				else if( fieldObj.nodeName == 'SELECT' ){
					if( fieldObj.options[fieldObj.selectedIndex].value == '-None-' ){
						alert( fldLangVal[ i ] + ' cannot be none.' );
						fieldObj.focus();
						return false;
					}
				}
				else if( fieldObj.type == 'checkbox' ){
					if( fieldObj.checked == false ){
						alert( 'Please accept  ' + fldLangVal[ i ]);
						fieldObj.focus();
						return false;
					}
				}
				try{
					if( fieldObj.name == 'Last Name' ){
						name=fieldObj.value;
					}
				}
				catch( e ){}
			}
		}
		if( !validateEmail6605568000000527725()){
			return false;
		}
		var urlparams=new URLSearchParams( window.location.search );
		if( urlparams.has( 'service' ) && ( urlparams.get( 'service' ) === 'smarturl' )){
			var webform=document.getElementById( 'webform6605568000000527725' );
			var service=urlparams.get( 'service' );
			var smarturlfield=document.createElement( 'input' );
			smarturlfield.setAttribute( 'type', 'hidden' );
			smarturlfield.setAttribute( 'value', service );
			smarturlfield.setAttribute( 'name', 'service' );
			webform.appendChild( smarturlfield );
		}
		document.querySelector( '.crmWebToEntityForm .formsubmit' ).setAttribute( 'disabled', true );
	}
	function tooltipShow6605568000000527725( el ){
		var tooltip=el.nextElementSibling;
		var tooltipDisplay=tooltip.style.display;
		if( tooltipDisplay == 'none' ){
			var allTooltip=document.getElementsByClassName( 'zcwf_tooltip_over' );
			for( i=0; i < allTooltip.length; i++ ){
				allTooltip[ i ].style.display='none';
			}
			tooltip.style.display='block';
		}
		else{
			tooltip.style.display='none';
		}
	}
</script>
<!-- Do not remove this --- Analytics Tracking code starts -->
<script id='wf_anal' src='https://crm.zohopublic.com/crm/WebFormAnalyticsServeServlet?rid=16348538362c12a0b0f587e2dbd9a6b3cc9a9b728b1eb046a7bd01f05ec38dd139ec00c8e9880e368b0682f70e368ab1gid6b9b3dbe983c888f8e9afdf073156272d03339682032484a474576a2f845c48cgid5c155caf8109428b5722fb774761d716cddddec1a7efb7d21c761a8ec717179bgide1f46c76d4ba7e95f9b86ff9f92ab5f82989e4364a713580f26d4852a9e57e36&tw=9f73f1ac4e1d41bbad2c267378dc931859ca8117e439dd07edf3787a54d28dc0'></script>
<!-- Do not remove this --- Analytics Tracking code ends. -->
@endsection