@extends('frontend.layouts.app', ['page' => 'contact-us'])

@section('title')
Contact Us | Grupo Alegria
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Contact Us | Grupo Alegria" />
<meta property="og:url"             content="{{ url('/') }}" />
<meta property="og:site_name"       content="Grupo Alegria" />
<meta property="og:image"           content="{{ asset('resources/web_thumbnail.jpg') }}" />
<meta property="og:thumbnail"       content="{{ asset('resources/web_thumbnail.jpg') }}" />
@endsection

@section('meta')
  <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('script')
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js" integrity="sha512-zlWWyZq71UMApAjih4WkaRpikgY9Bz1oXIW5G0fED4vk14JjGlQ1UmkGM392jEULP8jbNMiwLWdM8Z87Hu88Fw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $(document).ready(function() {
      $.ajaxSetup({
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
      });

      $('#inquiry').submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        var data = form.serialize();

        $.ajax({
          url: url,
          type: 'POST',
          data: data,

          success: function(response) {
            // Handle successful response
            console.log(response.success);
            $.toast().reset('all');
            $.toast({
              heading: 'Success',
              text: response.success,
              showHideTransition: 'slide',
              icon: 'success',
              hideAfter: 5000,
              position: 'top-right',
              loader: false
            });
            $('form input').val('');
            $('form textarea').val('');
          },

          error: function(xhr, status, error) {
            // Handle successful response
            console.log(xhr.responseText);
            var errors = JSON.parse(xhr.responseText);
            $.toast().reset('all');
            $.each(errors, function(key, value) {
              if (key == 'errors') {
                $.each(value, function(key, value2) {
                  $.toast({
                    heading: 'Error',
                    text: value2,
                    showHideTransition: 'slide',
                    icon: 'error',
                    hideAfter: 5000,
                    position: 'top-right',
                    loader: false
                  });
                });
              }
            });
          }

        });

      });
    });
  </script>
@endsection

@section('style')
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css" integrity="sha512-wJgJNTBBkLit7ymC6vvzM1EcSWeM9mmOu+1USHaRBbHkm6W9EgM0HY27+UtUaprntaYQJF75rc8gjxllKs5OIQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endsection

@section('content')
  <div class="content-container">
    <!-- Page Title -->
    <section class="page-title">
      <div class="d-flex justify-content-between align-items-center mb-5">
        <div></div>
        <div class="d-flex align-items-center">
          <div class="dash"></div>
          <h3>CONTACT US</h3>
        </div>
      </div>
    </section>
    <!-- End Page Title -->

    <!-- Location -->
    <div class="location-container row">
      {{-- <div class="col-lg-4 col-md-12">
        <h1 class="locations-title text-white mb-4">Our Locations</h1>
        <div class="list-group list-group-flush" id="list-tab" role="tablist">
          <div class="d-flex justify-content-between list-group-item active bg-transparent" id="list-1-list" data-bs-toggle="list" href="#list-1" role="tab" aria-controls="list-1">
            <a href="" class="list-text bg-transparent text-white" onclick="return false;">Alegria</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
          <div class="d-flex justify-content-between list-group-item bg-transparent" id="list-2-list" data-bs-toggle="list" href="#list-2" role="tab" aria-controls="list-2">
            <a href="#" class="list-text bg-transparent text-white" onclick="return false;">Alegria
              Singapore</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
          <div class="d-flex justify-content-between list-group-item bg-transparent" id="list-3-list" data-bs-toggle="list" href="#list-3" role="tab" aria-controls="list-3">
            <a href="#" class="list-text bg-transparent text-white" onclick="return false;">Buena Vida</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
          <div class="d-flex justify-content-between list-group-item bg-transparent" id="list-4-list" data-bs-toggle="list" href="#list-4" role="tab" aria-controls="list-4">
            <a href="#" class="list-text bg-transparent text-white" onclick="return false;">Cafe
              Alegria</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
          <div class="d-flex justify-content-between list-group-item bg-transparent" id="list-5-list" data-bs-toggle="list" href="#list-5" role="tab" aria-controls="list-5">
            <a href="#" class="list-text bg-transparent text-white" onclick="return false;">Alegria
              Cantina</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
          <div class="d-flex justify-content-between list-group-item bg-transparent" id="list-6-list" data-bs-toggle="list" href="#list-6" role="tab" aria-controls="list-6">
            <a href="#" class="list-text bg-transparent text-white" onclick="return false;">Hola Chula</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
          <div class="d-flex justify-content-between list-group-item bg-transparent" id="list-7-list" data-bs-toggle="list" href="#list-7" role="tab" aria-controls="list-6">
            <a href="#" class="list-text bg-transparent text-white" onclick="return false;">Alegrita x Mang Jose</a>
            <i class="fa-sharp fa-solid fa-caret-right fa-xl text-white align-self-center"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-8 col-md-12">
        <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade show active" id="list-1" role="tabpanel" aria-labelledby="list-1-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.7697759442867!2d121.04713861537324!3d14.555153932089661!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c964bf2c62b7%3A0xa57ae81ea355a06!2sAlegria%20Manila!5e0!3m2!1sen!2sph!4v1678946368541!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Alegria Manila</h1>
                <div class="line"></div>
                <div class="phone-number d-flex flex-wrap align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p class="me-2">Mobile: (0956) 834 8677</p>
                  <p>Landline: (02) 8562 7657</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:reservations.alegriamnl@gmail.com" class="text-white">reservations.alegriamnl@gmail.com</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>Ground Floor, Uptown Parade, Bonifacio Global City, Taguig</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="list-2" role="tabpanel" aria-labelledby="list-2-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.821986441907!2d103.83968391744385!3d1.280479300000014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da19dff4e9ec89%3A0xd240c0a5e382472d!2sAlegria%20Singapore!5e0!3m2!1sen!2sph!4v1679012028044!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Alegria Singapore</h1>
                <div class="line"></div>
                <div class="phone-number d-flex align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p>62231553</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:Reservations@Alegriasgp.com" class="text-white">Reservations@Alegriasgp.com</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>18 Teck Lim Road, Singapore, 088390</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="list-3" role="tabpanel" aria-labelledby="list-3-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.827994968183!2d121.04740851744387!3d14.5518268!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c8f173f11e1d%3A0xd331f2d2c0612e6a!2sBuena%20Vida%20by%20Alegria!5e0!3m2!1sen!2sph!4v1679012729643!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Buena Vida</h1>
                <div class="line"></div>
                <div class="phone-number d-flex flex-wrap align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p class="me-2">Mobile: 09770077454</p>
                  <p>Landline: (02) 8658 9842</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:buenavidabyalegria@gmail.com" class="text-white">buenavidabyalegria@gmail.com</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>4th Floor, Uniqlo Bldg, Bonifacio Global City, Taguig</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="list-4" role="tabpanel" aria-labelledby="list-4-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3861.839883814759!2d121.04173097599742!3d14.551147278283715!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c8fa9782cd93%3A0xb4fe4bc8b8e84e16!2sForbestown%20Rd%2C%20Taguig%2C%20Metro%20Manila!5e0!3m2!1sen!2sph!4v1684715385414!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Cafe Alegria</h1>
                <div class="line"></div>
                <div class="phone-number d-flex flex-wrap align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p class="me-2">Mobile: 09958216799</p>
                  <p>Landline: (02) 522-9706</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:cafe.alegriamnl@gmail.com" class="text-white">cafe.alegriamnl@gmail.com</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>Forbestown Rd, Taguig, Metro Manila</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="list-5" role="tabpanel" aria-labelledby="list-5-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3864.0461258753726!2d121.02261493488767!3d14.424504600000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397d13123c69c73%3A0x274bfd5676b8fb21!2sAlegria%20Cantina!5e0!3m2!1sen!2sph!4v1679013005007!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Alegria Cantina</h1>
                <div class="line"></div>
                <div class="phone-number d-flex flex-wrap align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p class="me-2">Mobile: 09771061152</p>
                  <p>Landline: N/A</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:cantina.alegriamnl@gmail.com" class="text-white">cantina.alegriamnl@gmail.com</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>Molito Lifestyle Center, Madrigal Ave, Ayala Alabang, Muntinlupa, Metro Manila</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="list-6" role="tabpanel" aria-labelledby="list-6-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3903.2052344735703!2d121.92230072597279!3d11.960287786241208!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33a53c2210040847%3A0x27aa6fffda7727f!2sStation%202!5e0!3m2!1sen!2sph!4v1684715289260!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Hola Chula</h1>
                <div class="line"></div>
                <div class="phone-number d-flex flex-wrap align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p class="me-2">Mobile: 09152172944 / (0981) 241 0125</p>
                  <p>Landline:</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:" class="text-white">N/A</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>Station 2, Malay Aklan, Boracay, Philippines</p>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="list-7" role="tabpanel" aria-labelledby="list-7-list">
            <div class="map-container">
              <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3822.331249853482!2d120.31949477602248!3d16.66029932334196!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33918d95d31758e7%3A0xebe58c830aaae79e!2sMonaliza%20Surf%20Resort!5e0!3m2!1sen!2sph!4v1684715651200!5m2!1sen!2sph" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              <div class="info-container text-white">
                <h1>Alegrita x Mang Jose</h1>
                <div class="line"></div>
                <div class="phone-number d-flex flex-wrap align-items-center">
                  <i class="fa-solid fa-phone"></i>
                  <p class="me-2">Mobile: +63 929 232 7501 / +63 992 763 7554</p>
                  <p>landline: N/A</p>
                </div>
                <div class="email d-flex align-items-center">
                  <i class="fa-solid fa-envelope"></i>
                  <p><a href="mailto:alegritaxjose@gmail.com" class="text-white">alegritaxjose@gmail.com</a></p>
                </div>
                <div class="address d-flex align-items-center">
                  <i class="fa-solid fa-earth-asia"></i>
                  <p>Monaliza Surf Resort, San Juan, La Union</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> --}}
      <!-- End Location -->

      <!-- Send Message -->
      <div class="send-message-container row">
        <h1 class="text-white">Send Us a Message</h1>
        <p class="text-white">Please complete the form below</p>
        <div class="col-12">
          <form id="inquiry" method="POST" action="{{ url('contact/inquiry') }}">
            <div class="row">
              <div class="col-12">
                <select class="input form-select my-3 rounded-0" aria-label="Default select example" name="preferred_branch">
                  <option selected>Preferred Branch *</option>
                  <option value="Alegria">Alegria</option>
                  <option value="Alegria Singapore">Alegria Singapore</option>
                  <option value="Buena Vida">Buena Vida</option>
                  <option value="Cafe Alegria">Cafe Alegria</option>
                  <option value="Alegria Cantina">Alegria Cantina</option>
                  <option value="Hola Chula">Hola Chula</option>
                  <option value="Alegrita x Mang Jose">Alegrita x Mang Jose</option>
                </select>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-6 col-md-12">
                <input type="text" class="input form-control my-3 rounded-0" placeholder="First Name *" name="firstname">
              </div>
              <div class="col-lg-6 col-md-12">
                <input type="text" class="input form-control my-3 rounded-0" placeholder="Last Name *" name="lastname">
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <input type="text" class="input form-control my-3 rounded-0" placeholder="Email Address *" name="email_address">
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <input type="text" class="input form-control my-3 rounded-0" placeholder="Subject *" name="subject">
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <textarea type="text" class="input input-message form-control my-3 rounded-0" placeholder="Your Message *" name="message"></textarea>
              </div>
            </div>
            <div class="row">
              <div class="col-lg-3 col-md-12">
                {{-- <input type="submit" class="btn btn-primary submit form-control my-3 rounded-0" value="Submit"> --}}
                <button class="btn btn-primary submit form-control my-3 rounded-0">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
      <!-- End Send Message -->
    </div>
  @endsection