@extends('layouts.app')

@section('title') Book a Test Drive Now - Suzuki UAE  @endsection
@section('meta')
<meta name="title" content="Suzuki UAE Test Drive Booking | Experience Sedans & SUVs | Suzuki"/>
<meta name="description" content="Schedule a Suzuki test drive in UAE and experience hatchbacks, sedans, and SUVs first-hand. Discover comfort, performance, and reliability before you buy."/>

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

@endsection

@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">
                        {{-- <test-drive></test-drive> --}}

                        <!-- 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='webform6605568000000527864' action='https://crm.zoho.com/crm/WebToLeadForm' name=WebToLeads6605568000000527864 method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatory6605568000000527864()' accept-charset='UTF-8'>
                                <input type='text' style='display:none;' name='xnQsjsdp' value='e769dfd1c0643c2c3a54933643b5cfd6a9ef461657f9f51336c7384b075c9e5f'>
                                </input>
                                <input type='hidden' name='zc_gad' id='zc_gad' value=''>
                                </input>
                                <input type='text' style='display:none;' name='xmIwtLD' value='4080865b10079d9fd7e0f10f22f7fcbc86bba1a81163d4a5d98cc14a33e92e5eebea8e7596e77ed8a11c7a84961d25eb'>
                                </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>

                                <h1 class="text-xl md:text-3xl suzuki-bold text-gray-900 mb-5">Book a Test Drive</h1>

                                <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='addAriaSelected6605568000000527864()' aria-required='true' aria-label='LEADCF13' name='LEADCF13' multiple >
                                                <option value='Fronk'>
                                                    Fronk
                                                </option>
                                                <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>
                                            </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='addAriaSelected6605568000000527864()' 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='addAriaSelected6605568000000527864()' 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 hide" for='Phone'> Phone <span style='color:red;'> * </span> </label>
                                        <div class='zcwf_col_fld'>
                                            <input type='text' id='Phone' aria-required='true' aria-label='Phone' name='Phone' aria-valuemax='30' maxlength='30' placeholder="Phone Number *">
                                            </input>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>

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

                                    <div class="input-field">
                                        <label class="label hide" for='LEADCF3'> Emirate <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='LEADCF3' onChange='addAriaSelected6605568000000527864()' aria-required='true' aria-label='LEADCF3' name='LEADCF3'>
                                                    <option value='Emirate *'>
                                                        Select Emirate *
                                                    </option>
                                                    <option value='Dubai'>
                                                        Dubai
                                                    </option>
                                                    <option value='Abu&#x20;Dhabi'>
                                                        Abu Dhabi
                                                    </option>
                                                    <option value='Sharjah'>
                                                        Sharjah
                                                    </option>
                                                    <option value='Ras&#x20;Al&#x20;Khaimah'>
                                                        Ras Al Khaimah
                                                    </option>
                                                    <option value='Ajman'>
                                                        Ajman
                                                    </option>
                                                    <option value='Fujairah'>
                                                        Fujairah
                                                    </option>
                                                    <option value='Umm&#x20;Al&#x20;Quwain'>
                                                        Umm Al Quwain
                                                    </option>
                                                </select>
                                            </div>
                                            <div class='zcwf_col_help'></div>
                                        </div>
                                    </div>

                                    <div class="input-field">
                                        <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='addAriaSelected6605568000000527864()' 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='addAriaSelected6605568000000527864()' 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='addAriaSelected6605568000000527864()' 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 selected 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='addAriaChecked6605568000000527864()'>
                                                </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='addAriaChecked6605568000000527864()'>
                                                </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 addAriaChecked6605568000000527864(){
        var checkboxElem=event.target;
        if( checkboxElem != undefined && checkboxElem.checked ){
            checkboxElem.ariaChecked='true';
        }
        else if( checkboxElem != undefined && !checkboxElem.checked ){
            checkboxElem.ariaChecked='false';
        }
    }
    function addAriaSelected6605568000000527864(){
        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 validateEmail6605568000000527864(){
        var form=document.forms[ 'WebToLeads6605568000000527864' ];
        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 validateUAEMobile(value) {
        var regex = /^(?:\+971|00971|0)?(?:50|51|52|54|55|56|58|2|3|4|6|7|9)\d{7}$/;
        return regex.test(value);
    }
    function checkMandatory6605568000000527864(){
        var mndFileds=new Array( 'First Name', 'Last Name', 'Phone', 'Mobile', 'Salutation', 'LEADCF2', 'LEADCF3', 'LEADCF5', 'LEADCF7', 'LEADCF109', 'LEADCF13' );
        var fldLangVal=new Array( 'First\x20Name', 'Last\x20Name', 'Phone', 'Mobile', 'Salutation', 'How\x20did\x20you\x20hear\x20about\x20us\x3F', 'Emirate', 'Branch\x20Name', 'Age', 'Term\x20and\x20Conditions', 'Selected\x20Model' );
        for( i=0; i < mndFileds.length; i++ ){
            var fieldObj=document.forms[ 'WebToLeads6605568000000527864' ][ 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;
                }
                if (fieldObj.name === 'Mobile') {
                    var mobileValue = fieldObj.value.trim();
                    if (mobileValue !== '' && !validateUAEMobile(mobileValue)) {
                        alert('Please enter a valid UAE mobile number.');
                        fieldObj.focus();
                        return false;
                    }
                }

                if( fieldObj.nodeName == 'SELECT' ){
                    if( fieldObj.options[fieldObj.selectedIndex].value == '-None-' ){
                        alert( fldLangVal[ i ] + ' cannot be none.' );
                        fieldObj.focus();
                        return false;
                    }
                }
                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( !validateEmail6605568000000527864()){
            return false;
        }
        var urlparams=new URLSearchParams( window.location.search );
        if( urlparams.has( 'service' ) && ( urlparams.get( 'service' ) === 'smarturl' )){
            var webform=document.getElementById( 'webform6605568000000527864' );
            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 tooltipShow6605568000000527864( 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=12908bc84ec58ce0a543fd3570881ab436a04bcadbdb2f1bd1c40a320d7afa4435f27ea0977cca9567d2ef1adae3fc27gid95fa14e402d643e27322489e63b32f72c4783b87e3bdc96eda8772f1dad9c2dfgid55002315684444c42baad8884b00feb76c2a15f7224f4a157780eb9c091bc8e1gidd42ba8fd5ce4a8c37fb5dbde84f95e4238df4ae826d9ca4e99e3adf7e34e1983&tw=366467c086d8266bcf7a50798a34786f9bae760e219a7ac88937d0aa91a6e236'></script>
<!-- Do not remove this --- Analytics Tracking code ends. -->
@endsection