@extends('layouts.app')
@section('content')


      <div class="container main">
        <div class="row">
          <div class="col-lg-8">
            <div class="contact-page">
              <h1 class="underscore mb-5">Please <span class="blue-frame">let us know</span> if you have any questions</h1>
              <div class="line"></div>
              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum sunt optio consequuntur ducimus odit. Deleniti optio saepe unde omnis. Sapiente aliquam repellendus error id veniam totam dolores recusandae non dolorum?</p>
              <div class="line"></div>

              <form id="contactForm" method="POST" action="{{ route('contactForm') }}">
@csrf
                <!-- Name input -->
                <div class="mb-3">
                  <input class="form-control" name="name" id="name" type="text" placeholder="Name *" data-sb-validations="required" />
                  <div class="invalid-feedback" data-sb-feedback="name:required">Name is required.</div>
                </div>

                <!-- Email address input -->
                <div class="mb-3">
                  <input class="form-control" id="phone" name="phone" type="email*" placeholder="Phone Number *" data-sb-validations="required, number" />
                  <div class="invalid-feedback" data-sb-feedback="phone:required">Phone  is required.</div>
                  <div class="invalid-feedback" data-sb-feedback="phone:number">Phone Email is not valid.</div>
                </div>
                   <!-- Email address input -->
                   <div class="mb-3">
                    <input class="form-control" id="emailAddress" name="email" type="email*" placeholder="Email Address *" data-sb-validations="required, email" />
                    <div class="invalid-feedback" data-sb-feedback="emailAddress:required">Email Address is required.</div>
                    <div class="invalid-feedback" data-sb-feedback="emailAddress:email">Email Address Email is not valid.</div>
                  </div>
   <!-- Subject input -->
   <div class="mb-3">
    <input class="form-control" name="subject" id="subject" type="text" placeholder="Subject *" data-sb-validations="required" />
    <div class="invalid-feedback" data-sb-feedback="name:required">Subject is required.</div>
  </div>

                <!-- Form submissions success message -->
                <div class="d-none" id="submitSuccessMessage">
                  <div class="text-center mb-3">Form submission successful!</div>
                </div>

                <!-- Form submissions error message -->
                <div class="d-none" id="submitErrorMessage">
                  <div class="text-center text-danger mb-3">Error sending message!</div>
                </div>

                <!-- Message input -->
                <div class="mb-3">

                  <textarea class="form-control" name="text" id="contact" type="text" placeholder="Leave a Message" style="height: 10rem;" data-sb-validations="required"></textarea>
                  <div class="invalid-feedback" data-sb-feedback="text:required">Message is required.</div>
                </div>

                <!-- Form submit button -->
                <div class="d-grid">
                  <button class="main-btn mt-0 disabled" id="submitButton" type="submit">Send message</button>
                </div>
              </form>
            </div>
          </div>
          <div class="sidebar col-lg-4">


          </div>
        </div>
      </div>
      @endsection