@extends('layouts.app')

@section('content')
<title>Contact | Page</title>

<div class="contact-header">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-10 text-center">
          <img src="{{url('pikat/img/about/about-header.png')}}" alt=""  class="d-none d-md-block d-md-inline-flex"/>
          <h2>Contact Us</h2>
        </div>
      </div>
    </div>
  </div>

  <div class="maps">
    <div class="container">
      <div class="row mt-5">
        <div class="col-12">
          <!--Google map-->
          <div
            id="map-container-google-1"
            class="z-depth-1-half map-container"
            style="
              overflow: hidden;
              padding-bottom: 40.25%;
              position: relative;
              height: 0;
            "
          >
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.2984396140764!2d106.839608114572!3d-6.224324195494332!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f38cd5f00001%3A0x5cb013567aa7df01!2skota%20Kasablanca%20office%2088!5e0!3m2!1sen!2sus!4v1650442877392!5m2!1sen!2sus"
              width="100%"
              height="400"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>

          <!--Google Maps-->
        </div>
      </div>

      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 mt-3">
          <h2>Contact Info</h2>
          <p>
            igthyEight@Kasablanka Office Tower Lt.10 Unit E JL. Casablanca
            Kav 88 12870 Kel. Menteng Dalam Kec. Tebet, Jakarta Selatan
          </p>
          <ul class="list-unstyled mt-3">
            <li>
              <a href="mailto:info.pikat@gmail.com" style="color: black"
                ><i class="fa-regular fa-envelope mr-2"></i
                >info.pikat@gmail.com</a
              >
            </li>
            <li class="mt-2">
              <a href="https://api.whatsapp.com/send?phone=6281297876707&text=Halo%20CS%20Pikat!!" style="color: black"
                ><i class="fa-solid fa-phone mr-2"></i>+62 812 9787 6707
                (Roland)</a
              >
            </li>
          </ul>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 mt-3">
          <div class="card card-form">
            <div class="card-body">
              <p>Please fill out the forms bellow to discuss your needs</p>
              <span>* Required</span>

              <form action="/contact/post" method="post" enctype="multipart/form-data">
                @csrf
                <div class="form-group mt-4">
                    <label for="">Name <span>*</span></label>
                    <input
                      type="text"
                      name="name"
                      id="name"
                      class="form-control"
                      placeholder="Your Name"
                      aria-describedby="helpId"
                      required
                    />
                  </div>

                  <div class="form-group mt-4">
                    <label for="">Email <span>*</span></label>
                    <input
                      type="text"
                      required
                      name="gmail"
                      id="gmail"
                      class="form-control"
                      placeholder="Your Email"
                      aria-describedby="helpId"
                    />
                  </div>
                  <div class="form-group mt-4">
                    <label for="">Phone Number <span>*</span></label>
                    <input
                      type="text"
                      name="phone"
                      id="phone"
                      class="form-control"
                      placeholder="Phone Number"
                      aria-describedby="helpId"
                      required
                    />
                  </div>
                  <div class="form-group mt-4">
                    <label for="how">How can we help ? <span>*</span></label>
                    <input
                      type="text"
                      name="how"
                      id="how"
                      class="form-control"
                      placeholder="Your Message"
                      required
                      aria-describedby="helpId"
                    />
                  </div>

                  <button type="submit" class="btn btn-danger">Submit Form</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection