@extends('frontend.layouts.app3')

@section('seo')
<title>Contact Us | Muhlach Bakery</title>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Contact Us | Muhlach Bakery" />
<meta property="og:description" content="" />
<meta property="og:url" content="{{ url('/contact-us') }}" />
<meta property="og:site_name" content="Contact Us | Muhlach Bakery" />

<meta property="og:image" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('img/meta-thumbnail.jpg') }}" />
<meta property="og:image:alt" content="{{ asset('img/meta-thumbnail.jpg') }}">
@endsection

@section('content')
<div class="container-fluid bg-yellow pb-5">
  <div class="container mb-5 d-flex align-items-center justify-content-center pb-5">
    <div class="d-lg-block d-none d-sm-none">
      <div class="row row-contact gx-0 mt-5 gy-3 p-5 pb-5">
        <div class="col-md-5 left-col-contact">
          <div class="mapouter">
            <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=650&amp;height=2048&amp;hl=en&amp;q=Muhlach Bakery El Nino Apartment, 140 N Domingo St, Quezon City, 1111 Metro Manila&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://embed-googlemap.com">embed google maps</a></div>
            <style>
              .mapouter {
                position: relative;
                text-align: right;
                width: 100%;
                height: 2048px;
              }

              .gmap_canvas {
                overflow: hidden;
                background: none !important;
                width: 100%;
                height: 2048px;
              }

              .gmap_iframe {
                height: 2048px !important;
              }
            </style>
          </div>
        </div>
        <div class="col-md right-contact-col">
          <div class="p-5 right-contact">
            <h1 class="yellow">Contact Us</h1>
            <br>
            <div class="contact-spacer">
              <span class="bold white">CORPORATE OFFICE</span><br>
              <div class="mt-1">
              </div>
              <span class="bold white">MEGAMELT BAKESHOP</span><br>
              <span class="white">El Nino Apartment, 140 N Domingo St,</span><br>
              <span class="white">Quezon City, 1111 Metro Manila</span><br>
              <a href="mailto:wecare@muhlach.com.ph" class="link-email">wecare@muhlach.com.ph</a><br>
              <a href="tel:09175182906" class="text-decoration-none"><span class="white">09175182906</span></a>
            </div>

            <form id="myForm" action="{{ url('/contact') }}" method="POST" enctype="multipart/form-data">@csrf
              <div class="mt-5 mb-3">
                <input class="form-control rounded-0" type="text" name="name" placeholder="Name" aria-label="default input example">
              </div>
              <div class="row gy-3 mb-3">
                <div class="col-md">
                  <input class="form-control rounded-0" name="email" type="text" placeholder="Email" aria-label="default input example">
                </div>
                <div class="col-md">
                  <input class="form-control rounded-0" name="number" type="text" placeholder="Phone" aria-label="default input example">
                </div>
              </div>
              <textarea class="form-control rounded-0" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
              <div class="mt-3">
                <a href=""><button type="submit" class="yellow-btn w-100">Submit</button></a>
              </div>
            </form>

            <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                  <div class="modal-header d-flex justify-content-end border-bottom-0">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="text-center">
                    <i class="fas fa-check-circle fa-3x animate__animated animate__bounceIn text-success"></i>
                    <h5 class="mt-3 animate__animated animate__fadeInUp">Your message has been sent successfully.</h5>
                  </div>
                  <div class="modal-footer border-top-0">
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="row row-contact gx-0 mt-5 gy-3 p-5 d-lg-none d-block d-sm-block">
      <div class="col-md right-contact-col">
        <div class="p-5 right-contact">
          <h1 class="yellow">Contact Us</h1>
          <br>
          <div class="contact-spacer">
            <span class="bold white">CORPORATE OFFICE</span><br>
            <div class="mt-1">
            </div>
            <span class="bold white">MEGAMELT BAKESHOP</span><br>
            <span class="white">El Nino Apartment, 140 N Domingo St,</span><br>
            <span class="white">Quezon City, 1111 Metro Manila</span><br>
            <a href="mailto:wecare@muhlach.com.ph" class="link-email">wecare@muhlach.com.ph</a><br>
            <a href="tel:09175182906" class="text-decoration-none"><span class="white fw-bold">09175182906</span></a>
          </div>

          <form id="myForm1" action="{{ url('/contact') }}" method="POST" enctype="multipart/form-data">@csrf
            <div class="mt-5 mb-3">
              <input class="form-control rounded-0" type="text" name="name" placeholder="Name" aria-label="default input example">
            </div>
            <div class="row gy-3 mb-3">
              <div class="col-md">
                <input class="form-control rounded-0" name="email" type="text" placeholder="Email" aria-label="default input example">
              </div>
              <div class="col-md">
                <input class="form-control rounded-0" name="number" type="text" placeholder="Phone" aria-label="default input example">
              </div>
            </div>
            <textarea class="form-control rounded-0" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Message"></textarea>
            <div class="mt-3">
              <a href=""><button type="submit" class="yellow-btn w-100">Submit</button></a>
            </div>
          </form>

          <div class="modal fade" id="successModal1" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-header d-flex justify-content-end border-bottom-0">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="text-center">
                  <i class="fas fa-check-circle fa-3x animate__animated animate__bounceIn text-success"></i>
                  <h5 class="mt-3 animate__animated animate__fadeInUp">Your message has been sent successfully.</h5>
                </div>
                <div class="modal-footer border-top-0">
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="col-md left-col-contact">
        <div class="mapouter">
          <div class="gmap_canvas"><iframe class="gmap_iframe" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&amp;height=642.3&amp;hl=en&amp;q=Muhlach Bakery El Nino Apartment, 140 N Domingo St, Quezon City, 1111 Metro Manila&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a href="https://embed-googlemap.com">embed google maps</a></div>
          <style>
            .mapouter {
              position: relative;
              text-align: right;
              width: 100%;
              height: 642.3px;
            }

            .gmap_canvas {
              overflow: hidden;
              background: none !important;
              width: 100%;
              height: 642.3px;
            }

            .gmap_iframe {
              height: 642.3px !important;
            }
          </style>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .navbar {
    background-color: #ffb12d;
  }

  .navbar-scrolled {
    background-color: transparent;
  }

  .footer-bg {
    background-color: #ffb12d;
  }

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


    .row-contact {
      padding: 10px !important;
      margin-bottom: 1rem;
    }

    .bg-yellow {
      height: 100%;
    }

    .right-contact-col {
      border-radius: 30px !important
    }

    .right-contact {
      padding: 10px !important
    }

    .yellow-btn {
      padding: 10px !important
    }

    .footer-mob-bg {
      display: none !important;
    }
  }
</style>
@endsection