@extends('layouts.app')

@section('headlinks')
<title> New ECCO Cargo </title>
<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: 30% 0 0;
        }
        .info-wrapper {
            width: 100%;
            position: relative;
            border-bottom: 2px solid #EC1B2E;
            padding: 100px 0;
        }
        .disclaimer {
            width: 100%;
            position: relative;
        }
        .disclaimer img {
            object-fit: cover;
            width: auto;
            height: 100px;
            float: right;
        }
        .clearfix {
          clear: both
        }
        .info-row {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 50px;
        }
        .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: 70px;
        }
       /* .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(2,1fr);
            grid-template-rows: auto;
            grid-column-gap: 80px;
            grid-row-gap: 80px;
            display: grid;
        }
        .form-col {
            margin: 0 0 40px;
        }
        .form-col .form-input {
            border: 2px solid #fff;
            width: 100%;
            background: transparent;
            padding: 20px;
            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 {
            display: flex;
        }
        .consent label {
            color: #fff;
            padding: 0 0 0 15px;
            display: inline-block;
            font-size: 18px;
        }
        .form-btn {
            background-color: #005AA9;
            border: 1px solid #005AA9;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            margin: 30px 0 0;
            padding: 20px 100px;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        .form-btn:hover {
            color: #005AA9;
            border: 1px solid #005AA9;
            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) {
            .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: 80px;
                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%;
            }

            .form-head h2 {
                font-size: 24px;
            }
            .form-head h4 {
                font-size: 21px;
            }
        }
    </style>
@endsection
@section('content')

<section class="landing-page">
  <img class="bg-img" src="./images/grand-vitara/bg.jpg" alt="eeco" />
  <div class="hero-section">
      <div class="site-wrapper">
          <img src="./images/grand-vitara/title.png" class="w-3/4 lg:w-2/3 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-info">
      <div class="site-wrapper">
          <div class="info-wrapper">
              <div class="disclaimer">
                  <img src="./images/grand-vitara/discalimer@4x.png" alt="discalimer" />
                  <div class="clearfix"></div>
              </div>
              <div class="info-row">
                  <div class="info">
                      <div class="info-content">
                          <img src="./images/grand-vitara/f1.png" alt="info" />
                      </div>
                      <div class="info-content">
                      <img src="./images/grand-vitara/f2.png" alt="info" />
                      </div>
                      <div class="info-content">
                      <img src="./images/grand-vitara/f3.png" alt="info" />
                      </div>
                      <div class="info-content">
                      <img src="./images/grand-vitara/f4.png" alt="info" />
                      </div>
                  </div>
                  <div class="info-logo">
                    <img src="./images/grand-vitara/vat.png" alt="info" />
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="hero-form">
      <div class="site-wrapper">
          <div class="form-head mb-10">
              <h2 class="font-bold">Register your interest</h2>
          </div>
          <form action="/grand-vitara-launch" 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">
                      <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">
                      <input required type="email" placeholder="Email" name="email" class="form-input" id="email" />
                      @if($errors->has('email'))
                        <div class="text-red-300" style="margin-top: 3px;"> {{ $errors->first('email') }}</div>
                      @endif
                  </div>
              </div>
              <div class="form-row">
                  <div class="form-col">
                      <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">
                      <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="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">
                  <div class="form-col form-col-12">
                      <input type="submit" value="submit" class="form-btn">
                  </div>
              </div>
          </form>
      </div>
  </div>
  </section>

@endsection