@extends('layouts.app')

@section('title') The Grand Legend Is Back - Suzuki UAE @endsection
@section('meta')
<meta name="title" content="The Grand Legend Returns | Suzuki UAE"/>
<meta name="description" content="Discover the return of the iconic Grand Legend in the UAE. Experience unmatched performance, design, and comfort in this legendary Suzuki model. Contact us today."/>
@endsection

@section('content')

<div class="relative bg-black pb-32">
  <div class="relative inset-0 w-full text-white">



  @if($errors->has('success'))
    <div class="fixed left-0 top-16 text-center w-full">
    <div class="pt-10 md:max-w-screen-xl mx-auto">
      <h4 class="mt-5 bg-green-200 px-5 py-3 text-green-600 text-lg">{{$errors->first()}}</h4>
    </div>
  </div>    
  @endif


    <img src="https://suzuki.ae/storage/453/FOIHZnz1UzEqVjQE.jpg" alt="image" class="hidden w-full lg:block" />
    <img src="https://suzuki.ae/storage/453/FOIHZnz1UzEqVjQE.jpg" alt="image" class="block w-full lg:hidden" />


    <div class="absolute left-0 bottom-0 w-full">
      <ul class="mx-auto px-10 py-10 text-sm text-white sm:text-xl md:max-w-screen-xl md:text-2xl">
        <li>Answer all questions correctly.</li>
        <li>Register and submit your answers.</li>
        <li>Get the chance to Avail a Gift voucher worth <b>AED 1,000.</b> </li>
        <hr class="border-px mt-10 border-gray-500" />
      </ul>
    </div>
    <div class="absolute left-0 -bottom-10 h-20 w-full bg-gradient-to-b from-transparent via-black to-transparent"></div>
  </div>
  <!-- cover -->

  <div class="form-wrapper relative z-10 mx-auto px-10 text-white md:max-w-screen-xl">
    <h1 class="text-4xl font-bold">LET'S START</h1>



    @if($errors->has('error'))
    <h4 class="mt-5 bg-red-200 px-5 py-3 text-red-600 text-lg">{{$errors->first()}}</h4>
    @endif

    <form action="/the-grand-legend-is-back" method="post" class="mt-24 space-y-10">

      @csrf

      <input type="hidden" name="ask_for_email_verification" value="{{$form->ask_for_email_verification}}">
      <input type="hidden" name="builder_id" value="{{$form->id}}">

      <div class="space-y-20">
        @if($fields['question_1'])
        <div class="form-element relative border border-gray-400 p-10 pb-3">
          <label for="#q1" class="absolute -top-8 flex h-auto w-4/5 items-center rounded-r-full bg-[#005AA9] py-4 px-4 md:h-16 md:py-0">
            <span class="flex items-start space-x-2 text-sm md:text-lg">
              <span>Q1) </span>
              <span class="block"> I have 4 main features- Mild Hybrid System, ALLGRIP SELECT, 360-view camera & Head-up display. Who am I? </span>
            </span>
          </label>
          <!-- label -->

          <input type="text" required name="{{$fields['question_1']['value']}}" id="q1" class="xs:mt-5 mt-10 h-16 w-full bg-transparent px-5 focus:outline-none active:outline-none sm:mt-0" placeholder="Answer..." value="{{ old('question_1') }}" />
          @if($errors->has('question_1'))
              <div class="text-red-400">{{ $errors->first('question_1') }}</div>
          @endif
        </div>
        <!-- form element -->

        @endif()

        @if($fields['question_2'])
        <div class="form-element relative border border-gray-400 p-10 pb-3">
          <label for="#q1" class="absolute -top-8 flex h-16 w-4/5 items-center rounded-r-full bg-[#005AA9] px-4">
            <span class="flex items-start space-x-2 text-sm md:text-lg">
              <span>Q2) </span>
              <span class="block"> Which of the following features describes a Mild Hybrid System? </span>
            </span>
          </label>
          <!-- label -->

          <div class="radio flex items-center space-x-2 px-3 py-5">
            <input type="radio" required name="{{$fields['question_2']['value']}}" class="h-4 w-4" id="q2-1" value="Performs as a generator as well as an electric motor" />
            <label for="q2-1 ">Performs as a generator as well as an electric motor</label>
          </div>
          <!-- option -->

          <div class="radio flex items-center space-x-2 p-3">
            <input type="radio" required name="{{$fields['question_2']['value']}}" class="h-4 w-4" id="q2-2" value="Has a Lithium-ion battery" />
            <label for="q2-2">Has a Lithium-ion battery</label>
          </div>
          <!-- option -->

          <div class="radio flex items-center space-x-2 p-3">
            <input type="radio" required name="{{$fields['question_2']['value']}}" class="h-4 w-4" id="q2-3" value="Suppresses fuel consumption by assisting the electric motor using electricity generated through regenerative braking" />
            <label for="q2-3">Suppresses fuel consumption by assisting the electric motor using electricity generated through regenerative braking</label>
          </div>
          <!-- option -->

          <div class="radio flex items-center space-x-2 p-3">
            <input type="radio" required name="{{$fields['question_2']['value']}}" class="h-4 w-4" id="q2-4" value="All of the above" />
            <label for="q2-4">All of the above</label>
          </div>
          <!-- option -->

          @if($errors->has('question_2'))
              <div class="text-red-400">{{ $errors->first('question_2') }}</div>
          @endif

        </div>
        <!-- form element -->
        @endif()
        
        <div class="flex flex-wrap space-y-20 space-x-0 md:flex-nowrap md:space-y-0 md:space-x-10">
          <div class="w-full md:w-1/2">
          @if($fields['question_3'])            
            <div class="form-element relative border border-gray-400 p-10 pb-3">
              <label for="#q1" class="absolute -top-8 flex h-16 w-4/5 items-center rounded-r-full bg-[#005AA9] px-4">
                <span class="flex items-start space-x-2 text-sm md:text-lg">
                  <span>Q3) </span>
                  <span class="block"> What is ALLGRIP SELECT? </span>
                </span>
              </label>
              <!-- label -->

              <div class="radio flex items-center space-x-2 px-3 py-5">
                <input type="radio"  name="{{$fields['question_3']['value']}}" class="h-4 w-4" id="q3-1" value="A/C System" />
                <label for="q3-1 ">A/C System</label>
              </div>
              <!-- option -->

              <div class="radio flex items-center space-x-2 p-3">
                <input type="radio" required name="{{$fields['question_3']['value']}}" class="h-4 w-4" id="q3-2" value="Engine Type" />
                <label for="q3-2">Engine Type</label>
              </div>
              <!-- option -->

              <div class="radio flex items-center space-x-2 p-3">
                <input type="radio" required name="{{$fields['question_3']['value']}}" class="h-4 w-4" id="q3-3" value="Tire Pattern" />
                <label for="q3-3">Tire Pattern</label>
              </div>
              <!-- option -->

              <div class="radio flex items-center space-x-2 p-3">
                <input type="radio" required name="{{$fields['question_3']['value']}}" class="h-4 w-4" id="q3-4" value="4W Drive System" />
                <label for="q3-4">4W Drive System</label>
              </div>
              <!-- option -->

              @if($errors->has('question_3'))
              <div class="text-red-400">{{ $errors->first('question_3') }}</div>
              @endif

            </div>
            <!-- form element -->
            @endif()
          </div>
          <!-- column -->

          <div class="w-full md:w-1/2">
            @if($fields['question_4'])
            <div class="form-element relative border border-gray-400 p-10 pb-3">
              <label for="#q1" class="absolute -top-8 flex h-16 w-4/5 items-center rounded-r-full bg-[#005AA9] px-4">
                <span class="flex items-start space-x-2 text-sm md:text-lg">
                  <span>Q4) </span>
                  <span class="block"> What is the Suzuki brand’s first car? </span>
                </span>
              </label>
              <!-- label -->

              <div class="radio flex items-center space-x-2 px-3 py-5">
                <input type="radio" required name="{{$fields['question_4']['value']}}" class="h-4 w-4" id="q4-1" value="FRONTE" />
                <label for="q4-1 ">FRONTE</label>
              </div>
              <!-- option -->

              <div class="radio flex items-center space-x-2 p-3">
                <input type="radio" required name="{{$fields['question_4']['value']}}" class="h-4 w-4" id="q4-2" value="SUZULIGHT" />
                <label for="q4-2">SUZULIGHT</label>
              </div>
              <!-- option -->

              <div class="radio flex items-center space-x-2 p-3">
                <input type="radio" required name="{{$fields['question_4']['value']}}" class="h-4 w-4" id="q4-3" value="CERVO" />
                <label for="q4-3">CERVO</label>
              </div>
              <!-- option -->

              <div class="radio flex items-center space-x-2 p-3">
                <input type="radio" required name="{{$fields['question_4']['value']}}" class="h-4 w-4" id="q4-4" value="SUZUKI X-90" />
                <label for="q4-4">SUZUKI X-90</label>
              </div>
              <!-- option -->
              @if($errors->has('question_4'))
                  <div class="text-red-400">{{ $errors->first('question_4') }}</div>
              @endif
            </div>
            <!-- form element -->
            @endif()
          </div>
          <!-- column -->
        </div>
        <!-- row -->

        @if($fields['question_5'])
        <div class="form-element relative border border-gray-400 p-10 pb-3">
          <label for="#q1" class="absolute -top-8 flex h-16 w-4/5 items-center rounded-r-full bg-[#005AA9] px-4">
            <span class="flex items-start space-x-2 text-sm md:text-lg">
              <span>Q5) </span>
              <span class="block"> Who is the official distributor of Suzuki Cars in the UAE? </span>
            </span>
          </label>
          <!-- label -->

          <input type="text" value="{{ old('question_5') }}" id="q5" required name="{{$fields['question_5']['value']}}" class="h-16 w-full bg-transparent px-5 focus:outline-none active:outline-none" placeholder="Answer..." />
          @if($errors->has('question_5'))
              <div class="text-red-400">{{ $errors->first('question_5') }}</div>
          @endif
        </div>
        <!-- form element -->
        @endif()
      </div>

      <div class="text-2xl font-bold uppercase md:text-4xl">Registration form</div>

      <div class="space-y-10">
        <div class="flex space-x-10">
          <div class="w-full">
            <input type="text" required value="{{ old('first_name') }}" name="{{$fields['first_name']['value']}}" class="w-full border border-gray-400 bg-transparent p-5 focus:bg-slate-   focus:outline-none active:outline-none" placeholder="FULL NAME" />
            @if($errors->has('first_name'))
              <div class="text-red-400">{{ $errors->first('first_name') }}</div>
          @endif
          </div>
          <div class="w-full">
            <input type="email" required value="{{ old('email') }}" name="{{$fields['email']['value']}}" class="w-full border border-gray-400 bg-transparent p-5 focus:bg-slate-900 focus:outline-none active:outline-none" placeholder="EMAIL" />
            @if($errors->has('email'))
              <div class="text-red-400">{{ $errors->first('email') }}</div>
            @endif
          </div>
        </div>
        <div class="flex space-x-10">
          <div class="w-full">
            <input type="text" required value="{{ old('tel') }}"name="{{$fields['tel']['value']}}" class="w-full border border-gray-400 bg-transparent p-5 focus:bg-slate-900 focus:outline-none active:outline-none" placeholder="PHONE NUMBER" />
            @if($errors->has('tel'))
                <div class="text-red-400">{{ $errors->first('tel') }}</div>
            @endif
          </div>
          <div class="w-full">
            <select name="{{$fields['emirate']['value']}}" required class="w-full border border-gray-400 bg-transparent p-5 focus:bg-slate-900 focus:outline-none active:outline-none">
              <option disabled>EMIRATES</option>
              <option value="Dubai">Dubai</option>
              <option value="Abu Dhabi">Abu Dhabi</option>
              <option value="Sharjah">Sharjah</option>
              <option value="Fujairah">Fujairah</option>
              <option value="Ajman">Ajman</option>
              <option value="Ras Al Khaimah">Ras Al Khaimah</option>
              <option value="Umm Al Qaiwain">Umm Al Qaiwain</option>
            </select>
            @if($errors->has('emirate'))
              <div class="text-red-400">{{ $errors->first('emirate') }}</div>
            @endif
          </div>
        </div>
      </div>

      <p>Final step: After Clicking Submit you will receive an email with a confirmation link to complete your submission. </p>

      <div>
        <input type="submit" value="SUBMIT YOUR ANSWERS" class="cursor-pointer bg-[#005AA9] px-10 py-4 text-lg font-bold tracking-wide hover:bg-[#026fce]" />
      </div>
    </form>
  </div>
</div>



@endsection