@extends('frontend.layouts.app3')

@section('seo')
<title>FAQs | Muhlach Bakery</title>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="FAQs | Muhlach Bakery" />
<meta property="og:description" content="" />
<meta property="og:url" content="{{ url('/faqs') }}" />
<meta property="og:site_name" content="FAQS | 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')
{{-- FAQ SECTION --}}
<section>
  <div class="container-fluid bg-dirty-white">
    <div class="container px-4">
      <div class="row gx-5 row-faq">
        <div class="col-md faq-col-left">
          <div class="div">
            <h1 class="red faq-title">Frequently Asked Questions</h1>
          </div>
        </div>
        <div class="col-md content-faq">

          <div class="white-border p-4">
            <h3 class="faq-header red">Are the ensaymadas baked daily?</h3>
            <div class="yellow-border"></div>
            <p class="red faq-text">Yes, our products are baked fresh everyday right in our home in Quezon City!</p>
          </div>
          <br>
          <div class="white-border p-4">
            <h3 class="faq-header red">How long do the ensaymadas stay fresh?</h3>
            <div class="yellow-border"></div>
            <p class="red faq-text">Our ensaymadas stay fresh for 3 days but you can make them last longer by storing them in the refrigerator for up to 7 days and in the freezer for up to 6 months.</p>
          </div>
          <br>
          <div class="white-border p-4">
            <h3 class="faq-header red">Are there other ways to enjoy the ensaymadas?</h3>
            <div class="yellow-border"></div>
            <p class="red faq-text">We recommend heating the ensaymadas in your microwave for 15-30 seconds so you can enjoy.</p>
          </div>
          <br>
          <div class="white-border p-4">
            <h3 class="faq-header red">What other products do you offer and where can I buy them?</h3>
            <div class="yellow-border"></div>
            <p class="red faq-text">We offer other breads such as pandesal, spanish bread, coffee buns as well as Muhlach brand spanish sardines
              in our flagship store located in N. Domingo st. Quezon City.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content p-5 red">
      <h1 class="modal-title text-center mb-4" id="exampleModalLongTitle">How to Purchase?</h1>
      <p class="text-center mb-4">
        We offer two convenient ways to get your hands on our delicious ensaymadas: pickup or delivery. Choose the option that best suits you!
      </p>

      <div class="mb-4">
        <h6 class="font-weight-bold red">Pickup:</h6>
        <ol class="list-decimal list-inside ml-4 red">
          <li>Select your Muhlach favorites and click "Add to Basket."</li>
          <li>Click the basket icon to review your items.</li>
          <li>Click "Proceed to Checkout."</li>
          <li>Select "Pickup" and enter your details.</li>
          <li>Confirm by clicking "Place Order." Your ensaymadas will be ready for pickup!</li>
        </ol>
      </div>

      <div class="mb-4">
        <h6 class="red font-weight-bold">Delivery:</h6>
        <ol class="list-decimal list-inside ml-4 red">
          <li>Select your Muhlach favorites and click "Add to Basket."</li>
          <li>Click the basket icon to review your items.</li>
          <li>Click "Proceed to Checkout."</li>
          <li>Select "Delivery" and enter your address.</li>
          <li>Confirm by clicking "Place Order." We'll deliver your ensaymadas to your doorstep!</li>
        </ol>
      </div>

      <p class="text-center my-4">That's it! We'll keep you updated on your order status throughout the process.</p>

      <div class="d-flex justify-content-center ">
        <button type="button" class="btn-cart text-white" data-dismiss="modal">OKAY, GOT IT!</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function() {
    $('.bd-example-modal-lg').modal('show');

    // Add event listener to the button
    $('.btn-cart').on('click', function() {
      $('.bd-example-modal-lg').modal('hide');
    });
  });
</script>

@endsection