@extends('layouts.plains')

@section('stylesheets')
    @parent
    <style>

      #loading {
          top: 0;
      }
      main {
        display: flex;
        width: 80%;
        margin: 100px auto;
      }

      main form {
        width: 60%;
        /* margin: 0 auto; */
      }

      main .social-contact {
        margin-left: 30px;
      }

      button {
        border: 1px solid;
      }

      .abs-input {
        position: relative;
      }

      .abs-input input {
        padding-right: 20px;
      }

      .abs-input .clear-text {
        position: absolute;
        right: 10px;
        top: 20%;
        display: none;
        cursor: pointer;
        font-size: 18px;
      }



      .contact-details > div {
          padding-top: 5px;
          padding-bottom: 5px;
          font-size: 20px;

      }

      .contact-details > .phone-number, .contact-details > .email-address {
            display: flex;
            align-items: center;
      }

      .contact-details .fa  {
          flex: 1;
      }

      .contact-details span  {
          flex: 7;
      }

      .social-media li {
          padding-top: 5px;
          padding-bottom: 5px;
      }
      .social-media li a {
          font-size: 20px;
          display: flex;
          align-items: center;
      }

      .social-media li a .fa {
          flex: 1;
      }

      .social-media li a span {
          flex: 7;
      }

      @media (max-width: 767px) {
        .navbar-brand {
            padding-left: 0;
        }

        .main-wrapper {
            display: block;
            width: 100%;
        }

        main form {
          width: 100%;
          margin: 0 auto 50px;
        }

        main .social-contact {
            margin-left: 0;
        }
      }
    </style>

@endsection

@section('content')
    <main class="main-wrapper">
      <form action="/contact" class="suggest-form" method="POST">
          @csrf
        <h3 class="rating-title">{{ $title }}</h3>
        <hr />
        <div class="form-group">
            <label for="place-suggest">Name</label>
            <div class="abs-input">
                <input type="text" name="name" class="form-control" placeholder="Full Name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" name="email" id="email" class="form-control ds" placeholder="Email" required>
        </div>
        <div class="form-group">
            <label for="phone">Phone Number</label>
            <input type="text" name="phone" id="phone" class="form-control" placeholder="08010001000">
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" id="message" rows="5" class="form-control" placeholder="Tell us anything"></textarea>
        </div>

        <button class="button button-primary">Send</button>
      </form>
      <div class="social-contact">
          <h3>Contact Information</h3>
          <hr />
          <div class="contact-details">
              <div class="phone-number">
                  <a href="tel:+2348133277306"><i class="fa fa-phone"></i> <span>08133277306</span></a>
              </div>
              <div class="email-address">
                  <a href="mailto:hello@cravvings.com"><i class="fa fa-envelope"></i> <span>hello@cravvings.com</span></a>
              </div>
              <div class="social-media">
                  <ul style="list-style: none; margin: 0; padding: 0;">
                    <li><a href="https://www.instagram.com/cravvingsapp"><i class="fa fa-instagram"></i> <span>@cravvingsapp</span></a></li>
                    <li><a href="https://www.twitter.com/cravvingsapp"><i class="fa fa-twitter"></i> <span>@cravvingsapp</span></a></li>
                    <li><a href="https://www.facebook.com/cravvingsapp"><i class="fa fa-facebook"></i> <span>@cravvingsapp</span></a></li>
                  </ul>
              </div>
          </div>
      </div>
    </main>

        <!-- Main Js -->
@endsection

@section('javascript')
@parent

<script src="/js/utility.js"></script>

  <script>
      document.querySelector('.suggest-form').addEventListener('submit', function(e) {
          postForm(e)
              .then(({payload: result}) => {
                  // console.log({result})
                  if (result.status === 'success') {
                      let list = `<h6 class="text-white">${result.message}</h6>`;
                      $('.flash-message').html(list).fadeIn(300, function() {
                          setTimeout(() => {
                              window.location.href = '/';
                          }, 3000)
                      });

                      $(e.currentTarget)[0].reset();
                      if(load) {
                          load.style.display = "none";
                      }
                  }
              });
      })
  </script>
@endsection