@extends('layouts.app')

@section('title') Welcome to Suzuki UAE - Contact us  @endsection
@section('meta')
<meta name="title" content="Contact Us | Suzuki"/>
<meta name="description" content="Get in touch with Suzuki UAE for inquiries, test drive bookings, showroom details, or after sales support. Connect with our team today for quick assistance."/>

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

@endsection

@section('content')

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

        <div class="cover">
            <img src="{{asset('assets/images/suzuki-bg.jpg')}}" alt="Customer Support - Suzuki" class="w-full">
        </div>

        <div class="md:max-w-screen-xl mx-auto px-5 xxl:px-0 text-gray-800 mt-16 lg:mt-24">
            <h1 class="text-2xl lg:text-4xl suzuki-black p-2 lg:p-5 text-center">Contact Us</h1>
            <!-- <contact-us></contact-us> -->

            <div data-v-94aee33a="" class="grid grid-cols-1 md:grid-cols-3 gap-10 mb-16">
                <div data-v-94aee33a="" class="text-lg">
                    <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">
                            Customer Support &amp; <br data-v-94aee33a="" />
                            Roadside Assistance
                        </div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="tel:+800789854" class="theme-link hover:border-none">800789854</a></div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div>

                    <!-- <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">Manager</div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="tel:+97142955907" class="theme-link hover:border-none">+97142955907</a></div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div> -->

                    <!-- <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">Sales</div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="tel:+800789854" class="theme-link hover:border-none">800789854</a></div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div> -->
                </div>

                <div data-v-94aee33a="" class="text-lg">
                    <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">Book a Test Drive</div>
                        <div data-v-94aee33a="" class="text-base">Visit our <a data-v-94aee33a="" href="/test-drive" class="theme-link text-theme-red-500">Book a test drive</a> page to book your appointment online.</div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div>
                    <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">Get a Quote</div>
                        <div data-v-94aee33a="" class="text-base">Visit our <a data-v-94aee33a="" href="/get-a-quote" class="theme-link text-theme-red-500">get a quote</a> page to book your appointment online.</div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div>
                </div>

                <div data-v-94aee33a="" class="text-lg">
                    <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">Book a Service</div>
                        <div data-v-94aee33a="" class="text-base">Visit our <a data-v-94aee33a="" href="/book-a-service" class="theme-link text-theme-red-500">Book a service</a> page to book your appointment online.</div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div>
                    <div data-v-94aee33a="" class="mb-5">
                        <div data-v-94aee33a="" class="text-xl suzuki-bold mb-2">
                            Get a Quote <br data-v-94aee33a="" />
                            For Accessories
                        </div>
                        <div data-v-94aee33a="" class="text-base">Visit our <a data-v-94aee33a="" href="/get-a-quote" class="theme-link text-theme-red-500">get a quote</a> page to book your appointment online.</div>
                        <div data-v-94aee33a=""><a data-v-94aee33a="" href="mailto:artc-suzuki@alrostamanigroup.ae" class="theme-link hover:border-none">Artc-suzuki@alrostamanigroup.ae</a></div>
                    </div>
                </div>
            </div>


            <!-- 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='webform6605568000000527902' action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads6605568000000527902 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory6605568000000527902()' accept-charset='UTF-8'>
                    <input type='text' style='display:none;' name='xnQsjsdp' value='afa4d8346823be2530418292a70d0ba1a8e586fa902648fbf1de61c951f028e3'>
                    </input>
                    <input type='hidden' name='zc_gad' id='zc_gad' value=''>
                    </input>
                    <input type='text' style='display:none;' name='xmIwtLD' value='7af0b5032708a8634343250c0a78654d166b421a7a04ab0b2709dd93c299a8b70ff16c28315820d8272a3964af1bb1f4'>
                    </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">Submit a Question or Comment</div>

                    <div class='zcwf_row form-inner'>

                        <div class="input-field col_3">
                            <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='addAriaSelected6605568000000527902()' aria-required='true' aria-label='Salutation' name='Salutation'>
                                        <option value='Title'>
                                            Title *
                                        </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 col_3">
                            <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 col_3">
                            <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 col_3">
                            <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 col_3">
                            <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 full-width">
                            <label class="label hide" for='LEADCF5'>Branch Name <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='addAriaSelected6605568000000527902()' 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 full-width">
                            <label class="label" for='LEADCF9'>Submit a Question <span style='color:red;'> * </span> </label>
                            <textarea aria-multiline='true' id='LEADCF9' aria-required='true' aria-label='LEADCF9' name='LEADCF9' placeholder="Message"></textarea>
                            <div class='zcwf_col_help'> </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='addAriaSelected6605568000000527902()' aria-required='false' aria-label='LEADCF1' name='LEADCF1'>
                                        <option value='-None-'>
                                            -None-
                                        </option>
                                        <option 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 selected 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='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='addAriaChecked6605568000000527902()'>
                                    </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>

    </section>

@endsection


@section('scripts')
<script>
	function addAriaChecked6605568000000527902(){
		var checkboxElem=event.target;
		if( checkboxElem != undefined && checkboxElem.checked ){
			checkboxElem.ariaChecked='true';
		}
		else if( checkboxElem != undefined && !checkboxElem.checked ){
			checkboxElem.ariaChecked='false';
		}
	}
	function addAriaSelected6605568000000527902(){
		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 validateEmail6605568000000527902(){
		var form=document.forms[ 'WebToLeads6605568000000527902' ];
		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 checkMandatory6605568000000527902(){
		var mndFileds=new Array( 'First Name', 'Last Name', 'Mobile', 'Salutation', 'LEADCF5', 'LEADCF9' );
		var fldLangVal=new Array( 'First\x20Name', 'Last\x20Name', 'Mobile', 'Salutation', 'Branch\x20Name', 'Submit\x20a\x20Question' );
		for( i=0; i < mndFileds.length; i++ ){
			var fieldObj=document.forms[ 'WebToLeads6605568000000527902' ][ 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( !validateEmail6605568000000527902()){
			return false;
		}
		var urlparams=new URLSearchParams( window.location.search );
		if( urlparams.has( 'service' ) && ( urlparams.get( 'service' ) === 'smarturl' )){
			var webform=document.getElementById( 'webform6605568000000527902' );
			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 tooltipShow6605568000000527902( 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=2e0e6b977ea129dd81c4739f6d9a46866988cf464294cea7ec26310c373598d86b86aed29ec0697cc10587246872611fgida1727075867f51ff30a8e8922fb63ccc969cb0809a20ecd98f91a4df7c1dca80gid51455c1af3ffae766f085351f9ceb5a8ccc8265623020a0c2956b30acb3c5ee4gid3a60b36989e3f055f6b44a07e743cf6812f5bf1ff338029ce7764997bd664975&tw=0cd6c2373e10afb5941321007e68ca12820a82a271e77a59400ebdfdb157d674'></script>
<!-- Do not remove this --- Analytics Tracking code ends. -->
@endsection