@extends('layouts.app')

@section('title')Suzuki Eeco Cargo - Register Your Interest | Suzuki UAE @endsection

@section('headlinks')

<meta name="description" content="Best Commercial Cargo Van in the UAE. A reliable partner in your business, equipped with a new 1.2L Advanced K-Series Dual Jet Dual VVT Engine.">

<style>
        .site-wrapper {
            width: 100%;
            max-width: 1200px;
            padding: 0 20px;
            margin: 0 auto;
        }
        img {
            height: auto;
            max-width: 100%;
        }
        .landing-page {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .bg-img {
            /* object-fit: cover; */
            width: 100%;
            /* height: 100%; */
            /* position: absolute; */
            /* object-position: top; */
        }
        .hero-section {
            width: 100%;
            position: relative;
            padding: 100px 0;
        }
        .hero-info {
            width: 100%;
            position: relative;
            padding: 26% 0 0;
        }
        .info-wrapper {
            width: 100%;
            position: relative;
            border-bottom: 2px solid #EC1B2E;
            padding: 100px 0;
        }
        .disclaimer {
            width: 100%;
            position: relative;
            margin-bottom: 30px;
        }
        .disclaimer img {
            object-fit: cover;
            width: auto;
            height: 120px;
        }
        .info-row {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }
        .info {
            flex: 1 0 70%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 50px 0 0;
        }
        .info-logo {
            flex: 1 0 30%;
        }
        .info-content {
            padding: 0 10px;
            border-right: 2px solid #EC1B2E;
        }
        .info-content:nth-child(1) {
            padding-left: 0;
        }
        .info-content:nth-child(4) {
            padding-right: 0;
            border-right: unset;
        }
        .hero-form {
            width: 100%;
            position: relative;
            padding: 100px 0;
        }
        .form-head {
            width: 100%;
        }
        .form-head h2 {
            /* color: #fff; */
            text-transform: uppercase;
            font-size: 40px;
        }
       /* .form-head h4 {
            color: #fff;
            font-size: 43px;
            text-transform: uppercase;
            font-weight: normal;
        }*/
        form.form {
            width: 100%;
            padding: 50px 0 0;
        }
        .form-row {
            width: 100%;
            grid-template-columns: repeat(1,1fr);
            grid-template-rows: auto;
            display: grid;
        }
        .form-col {
            margin: 0 0 40px;
        }
        .form-col .form-input {
            border: 2px solid darkgray;
            width: 100%;
            background: transparent;
            padding: 10px;
            /* color: #fff; */
        }
        .form-col .form-input::placeholder {
            color: #fff;
            text-transform: uppercase;
            font-size: 18px;
        }
        .form-row-full {
            grid-template-columns: repeat(1,1fr);
        }
        .consent {
            text-align: center;
        }   
        .consent label {
            /* color: #fff; */
            padding: 0 0 0 15px;
            display: inline-block;
            font-size: 18px;
        }
        .form-btn {
            background-color: #E20A17;
            border: 1px solid #E20A17;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            padding: 20px 100px;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            margin: auto;
        }
        .form-btn:hover {
            color: #E20A17;
            border: 1px solid #E20A17;
            background-color: transparent;
            cursor: pointer;
        }
        .form-col select.form-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            -ms-appearance: none;
            background-position: calc(100% - 18px) center !important;
            background: url('https://icon-ad.com/assets/arrow.svg') no-repeat;
            text-transform: uppercase;
        }
        .form-col select.form-input option {
            color: black;
        }
        @media only screen and (max-width: 767px) {
            .form-col {
                margin: 0 0 20px;
            }
 
            .landing-page {
              /* background-color: #0e0e10; */
            }
            .hero-section {
                padding: 40px 0 0;
            }
            .hero-form {
              width: 90%;
              margin: auto;
              padding-bottom: 70px!important;
            }
            .form-btn {
                margin: 10px 0 0;
            }
            .bg-img {
                object-fit: contain;
            }
            .hero-info {
                padding: 25% 0 0;
            }
            .disclaimer img {
              height: 50px;
          }
            .form-head h2 {
                font-size: 33px;
            }
            .form-head h4 {
                font-size: 29px;
            }
            .form-row {
                grid-template-columns: repeat(1,1fr);
                grid-row-gap: 20px;
                margin: 0 0 20px;
            }
            .form-col .form-input {
                margin: 0;
            }
            .consent label {
                font-size: 12px;
            }
            .hero-form {
                padding: 40px 0 20px;
            }
            .info, .info-logo {
                flex: 1 0 100%;
            }
            .info {
                flex-wrap: wrap;
                padding: 0;
                text-align: center;
            }
            .info-content {
                border: unset;
                padding: 0;
                flex: 1 0 50%;
            }
            .info-content img {
                height: auto;
                object-fit: cover;
                margin: 20px auto;
            }
            .info-logo {
                padding: 40px 0 0;
            }
            .info-logo img {
                width: 80%;
                margin: auto;
            }
            .info-wrapper {
                padding: 40px 0;
            }
            form.form {
                padding: 25px 0 0;
            }
        }
        @media only screen and (max-width: 424px) {

            .info-content img {
                width: 50%;
                }

            }
        @media only screen and (max-width: 424px) {

            .info-content img {
              width: 80%;
            }

            .form-head h2 {
                font-size: 24px;
            }
            .form-head h4 {
                font-size: 21px;
            }
        }
        .input-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
    </style>
@endsection
@section('content')

<section class="landing-page">
  <img class="bg-img" src="https://res.cloudinary.com/dizi8svi8/image/upload/v1707315889/Clients/Suzuki/Landing%20Pages/ECCO%20Cargo%20Desktop%202024.jpg" alt="eeco" />
  {{-- <div class="hero-section">
      <div class="site-wrapper">
          <img src="./images/ecco-cargo/title.png" class="w-3/4 lg:w-full mx-auto" alt="title">
      </div>
  </div> --}}


  @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

  <div class="hero-form">
      <div class="site-wrapper">
          <div class="form-head mb-10">
              <h2 class="font-bold text-xl">Register your interest</h2>
          </div>
          <form action="/ecco-cargo" method="post" class="form">
          @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="form-row">
                  <div class="form-col">
                    <label for="" class="input-label">
                        <span>FULL NAME (Required)</span>
                        <span class="font-cairo"> (إلزامي) الاسم الكامل</span>
                    </label>
                    <input required type="text" placeholder="full name" name="name" class="form-input" id="full-name" />
                    @if($errors->has('name'))
                    <div class="text-red-300" style="margin-top: 3px;"> {{ $errors->first('name') }}</div>
                    @endif
                  </div>

                  <div class="form-col">
                    <label for="" class="input-label">
                        <span>EMAIL (Required)</span>
                        <span class="font-cairo"> (إلزامي) البريد الإلكتروني</span>
                    </label>
                    <input required type="email" placeholder="Email" name="email" class="form-input" id="email" />
                    @if($errors->has('name'))
                    <div class="text-red-300" style="margin-top: 3px;"> {{ $errors->first('email') }}</div>
                    @endif
                  </div>
                  
                  <div class="form-col">
                    <label for="" class="input-label">
                        <span>SELECT A VEHICLE (Required)</span>
                        <span class="font-cairo"> (إلزامي) اختر مركبة </span>
                    </label>
                    <select required name="vehicle" id="vehicle" class="form-input">
                        <option selected value="EECO Cargo">EECO Cargo</option>
                        <option value="Carry Pickup">Carry Pickup</option>
                    </select>
                    @if($errors->has('vehicle'))
                    <div class="text-red-300" style="margin-top: 3px;"> {{ $errors->first('vehicle') }}</div>
                    @endif
                  </div>
              </div>
              <div class="form-row">
                  <div class="form-col">
                    <label for="" class="input-label">
                        <span>PHONE NUMBER (Required)</span>
                        <span class="font-cairo"> (إلزامي) رقم الهاتف </span>
                    </label>
                    <input required type="tel" placeholder="phone number" name="phone" class="form-input" id="phone" />
                    @if($errors->has('phone'))
                    <div class="text-red-300" style="margin-top: 3px;"> {{ $errors->first('phone') }}</div>
                    @endif
                  </div>
                  <div class="form-col">
                    <label for="" class="input-label">
                        <span>EMIRATE (Required)</span>
                        <span class="font-cairo"> (إلزامي) الإمارة </span>
                    </label>
                    <select required name="branch" id="branch" class="form-input">
                        <option disabled selected>Branch</option>
                        <option value="abu dhabi">Abu Dhabi</option>
                        <option value="al ain">Al Ain</option>
                        <option value="deira">Deira</option>
                        <option value="ras al khaima">Ras Al Khaima</option>
                        <option value="sharjah">Sharjah</option>
                        <option value="Fujairah">Fujairah</option>
                        <option value="sheikh zayed road">Sheikh Zayed Road</option>
                    </select>
                  </div>
              </div>
              <div class="form-row form-row-full">
                  <div class="form-col form-col-12 consent">
                      <input type="checkbox" name="consent" id="consent"><label for="consent">Please confirm you have read and agree to our Terms and Conditions*</label>
                  </div>
              </div>
              <div class="form-row form-row-full text-center">
                  <div class="form-col form-col-12">
                      <input type="submit" value="submit" class="form-btn">
                  </div>
              </div>
          </form>
      </div>
  </div>
  </section>

@endsection


@section('scripts')

    <script>
        ttq.identify({
            "email": "<hashed_email_address>", // string. The email of the customer if available. It must be hashed with SHA-256 on the client side.
            "phone_number": "<hashed_phone_number>", // string. The phone number of the customer if available. It must be hashed with SHA-256 on the client side.
            "external_id": "<hashed_extenal_id>" // string. A unique ID from the advertiser such as user or external cookie IDs. It must be hashed with SHA256 on the client side.
            })
            ttq.track('ViewContent', {
            "value": "<content_value>", // number. Value of the order or items sold. Example: 100.
            "currency": "<content_currency>", // string. The 4217 currency code. Example: "USD".
            "contents": [
            {
                "content_id": "<content_identifier>", // string. ID of the product. Example: "1077218".
                "content_type": "<content_type>", // string. Either product or product_group.
                "content_name": "<content_name>", // string. The name of the page or product. Example: "shirt".
                "content_category": "<content_category>", // string. The category of the page or product. Example: "apparel".
                "brand": "<brand>" // string. The brand name of the page or product. Example: "Nike"
            }
            ],
            "status": "<content_status>" // string. The status of an order, item, or service. Example: "submitted".
            })
            ttq.track('ClickButton', {
            "value": "<content_value>", // number. Value of the order or items sold. Example: 100.
            "currency": "<content_currency>", // string. The 4217 currency code. Example: "USD".
            "contents": [
            {
                "content_id": "<content_identifier>", // string. ID of the product. Example: "1077218".
                "content_type": "<content_type>", // string. Either product or product_group.
                "content_name": "<content_name>", // string. The name of the page or product. Example: "shirt".
                "content_category": "<content_category>", // string. The category of the page or product. Example: "apparel".
                "brand": "<brand>" // string. The brand name of the page or product. Example: "Nike"
            }
            ]
            })
            ttq.track('SubmitForm', {
            "value": "<content_value>", // number. Value of the order or items sold. Example: 100.
            "currency": "<content_currency>", // string. The 4217 currency code. Example: "USD".
            "contents": [
            {
                "content_id": "<content_identifier>", // string. ID of the product. Example: "1077218".
                "content_type": "<content_type>", // string. Either product or product_group.
                "content_name": "<content_name>", // string. The name of the page or product. Example: "shirt".
                "content_category": "<content_category>", // string. The category of the page or product. Example: "apparel".
                "brand": "<brand>" // string. The brand name of the page or product. Example: "Nike"
            }
            ]
        })
    </script>

@endsection