@extends('frontend.layouts.app-cantina')

@section('title')
Grupo Alegria | Alegria Cantina
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Grupo Alegria | Alegria Manila" />
<meta property="og:url"             content="{{ url('alegria-cantina') }}" />
<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('content')
<link rel="stylesheet" href="{{ asset('css/frontend/contact-us.css') }}">
  {{-- CAROUSEL --}}
  <div class="container mb-5 pt-5" id="about">
    <center>
      <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">

        <div class="carousel-inner">
          @foreach ($banners as $key => $items)
          <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
            <img src="{{ asset('cantina-banners/' . $items->image) }}" class="img-fluid branch-banner-sm" alt="...">
          </div>
          @endforeach
        </div>

        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </center>
  </div>
  {{-- END CAROUSEL --}}

  {{-- ABOUT BRANCH --}}
  <div class="container mt-5 mb-5 pt-5" id="contact">
    <div class="text-center mb-5">
      <h4 class="color-1 font-oswald-medium font-heading-color">ABOUT OUR BRANCH</h4>
      <div class="mt-3">
        <p class="text-center text-black lh-lg font-oswald">
          Alegria Cantina is a vibrant and authentic Latin American restaurant that offers a unique dining experience. Our menu features a wide range of traditional Latin American dishes, from savory [dish] and crispy [dish], to succulent[dish] and [dish].
        </p>
        <p class="text-center text-black lh-lg font-oswald">
          Whether you're in the mood for a casual lunch or a romantic dinner, Alegria Cantina is the perfect destination for anyone who loves Latin American cuisine. So come join us and experience the joy of Latin American food and culture!
        </p>
      </div>
    </div>
  </div>
  {{-- END ABOUT BRANCH --}}

  {{-- CONTACT BRANCH --}}
  <div class="container mt-5 mb-5 pt-5">
    <div class="text-center mb-5">
      <h4 class="color-1 font-oswald-medium font-heading-color">CONTACT INFORMATION</h4>
      <div class="mt-3">
        <p class="text-center text-black lh-lg font-oswald">
          Mobile: +63 977 106 1152<br>
          {{-- Email: cantina.alegriamnl@gmail.com<br> --}}
          Location: Molito Lifestyle Center, Madrigal Ave, Ayala Alabang, Muntinlupa, Metro Manila
        </p>
      </div>
    </div>
  </div>
  {{-- END CONTACT BRANCH --}}

  {{-- OPERATING HOURS --}}
  <div class="container mt-5 mb-5 pt-5" id="contact">
    <div class="text-center mb-5">
      <h4 class="color-1 font-oswald-medium font-heading-color">OPERATING HOURS</h4>
      <div class="mt-3">
        <p class="text-center text-danger lh-lg font-oswald">
          {{-- Monday - Tuesday: 5PM - 12MN<br>
          Wednesday - Thursday: 11AM - 12MN<br>
          Friday - Saturday: 11AM - 2AM<br>
          Sunday: 11AM - 12MN --}}
          Under Renovation
        </p>
      </div>
    </div>
  </div>
  {{-- END OPERATING HOURS --}}

  {{-- SOCIAL MEDIA --}}
  <div class="container mb-5 pb-5">
    <div class="text-black text-center">
      <h4 class="color-1 font-oswald-medium font-heading-color">OUR SOCIAL MEDIA</h4>
      <div class="d-flex justify-content-center">
        <div class="mt-5 hstack gap-5 color-1">
          <a href="https://www.facebook.com/alegriacantinamnl" target="_blank" style="color: inherit"><i class="fa-brands fa-facebook-f"></i></a>
          <a href="https://www.instagram.com/alegriacantinamnl/" target="_blank" style="color: inherit"><i class="fa-brands fa-instagram"></i></a>
        </div>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-center">
    <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>
  {{-- END SOCIAL MEDIA --}}

  {{-- IMG SECTION --}}
  {{-- <div class="container-fluid mb-5 bg-img d-flex align-items-center justify-content-center" style="background-image: url({{ asset('resources/branches/Alegria-Manila/gallery-bg.jpg') }});" id="gallery">
    <h1 class="text-white font-oswald-medium text-center letter-spacing-10px">OUR RESTAURANT GALLERY</h1>
  </div> --}}
  {{-- END IMG SECTION --}}

  {{-- GALLERY SECTION --}}
  {{-- <section class="gallery gallery-shadow">

    <div class="d-xl-block d-md-block d-none">
      <div id="carouselExampleControls3" class="carousel slide" data-bs-ride="carousel">

        <div class="carousel-inner">
          @foreach($cantina->chunk(8) as $chunked_cantina)
          <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
            <div class="row g-1">
              @foreach($chunked_cantina as $cantinas)
              <div class="col-6 col-md-3 col-xl-3">
                <a href="{{ asset('uploads/cantina/' . $cantinas->images) }}" data-fancybox="gallery">
                  <img src="{{ asset('uploads/cantina/' . $cantinas->images) }}" class="img-fluid" alt="...">
                </a>
              </div>
              @endforeach
            </div>
          </div>
          @endforeach
        </div>
  
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls3" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls3" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>

    <div class="d-xl-none d-md-none d-block">
      <div id="carouselExampleControls4" class="carousel slide" data-bs-ride="carousel">

        <div class="carousel-inner">
          @foreach($cantina->chunk(4) as $chunked_cantina)
          <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
            <div class="row g-1">
              @foreach($chunked_cantina as $cantinas)
              <div class="col-6 col-md-3 col-xl-3">
                <a href="{{ asset('uploads/cantina/' . $cantinas->images) }}" data-fancybox="gallery">
                  <img src="{{ asset('uploads/cantina/' . $cantinas->images) }}" class="img-fluid" alt="...">
                </a>
              </div>
              @endforeach
            </div>
          </div>
          @endforeach
        </div>
  
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls4" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls4" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  </section> --}}
  {{-- END GALLERY SECTION --}}

  {{-- OUR MENU SECTION --}}
  {{-- <div class="container" id="menu" style="margin-top: 100px;">
    <h1 class="text-black text-center font-oswald-medium fw-medium font-heading-color letter-spacing-10px" style="margin-bottom: 60px">OUR MENU</h1>
    <div class="position-relative">
      <div class="row">
        <div class="col-2">
          <div class="position-sticky" style="top: 122px;">
            <div class="d-flex flex-column align-items-center justify-content-center" style="height: 100vh;">
              <ul class="list-unstyled font-oswald-medium fw-bold fs-4">
                <li class="mb-4">
                  <a class="side-link text-decoration-none" href="#menu1">Menu 1</a>
                </li>
                <li class="mb-4">
                  <a class="side-link text-decoration-none" href="#menu2">Menu 2</a>
                </li>
                <li class="mb-4">
                  <a class="side-link text-decoration-none" href="#menu3">Menu 3</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-8">
          <div class="d-flex flex-column gap-5" data-bs-spy="scroll">
            <a href="{{ asset('resources/Menu/Alegria Cantina/m1_menu1.jpg') }}" data-fancybox="menu" data-caption="Menu 1">
              <img src="{{ asset('resources/Menu/Alegria Cantina/m1_menu1.jpg') }}" alt="" id="menu1" class="img-fluid">
            </a>
            <a href="{{ asset('resources/Menu/Alegria Cantina/m2_menu2.jpg') }}" data-fancybox="menu" data-caption="Menu 2">
              <img src="{{ asset('resources/Menu/Alegria Cantina/m2_menu2.jpg') }}" alt="" id="menu2" class="img-fluid">
            </a>
            <a href="{{ asset('resources/Menu/Alegria Cantina/m3_menu3.jpg') }}" data-fancybox="menu" data-caption="Menu 3">
              <img src="{{ asset('resources/Menu/Alegria Cantina/m3_menu3.jpg') }}" alt="" id="menu3" class="img-fluid">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div> --}}
  {{-- END OUR MENU SECTION --}}
@endsection

@section('style')
  <link rel="stylesheet" href="{{ asset('css/frontend/branches/style.css') }}">
  <link rel="stylesheet" href="{{ asset('css/frontend/branches/gallery.css') }}">
  <link rel="stylesheet" href="{{ asset('css/frontend/branches/alegria-cantina.css') }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />

  <style>
    .side-link{
      font-size: 16px;
    }

    .img-gallery{
      width: 100%;
      height: 335.75px
    }

    .img-banner{
      width: 100%;
      height: 376.08px;
    }

    h1{
      font-size: 24px;
    }

    @media only screen and (max-width: 600px) {
        .branch-banner-sm{
            height: 185px !important;
        }
        
      .img-gallery {
          height: 224px;
      }

      .img-banner{
        height: 113.17px;
      }
    }
  </style>
@endsection

@section('script')
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
  <script src="{{ asset('js/frontend/script.js') }}"></script>
  <script>
    Fancybox.bind("[data-fancybox]", {
      // Your custom options
    });

    var slider = tns({
      container: '.slider',
      loop: false,
      rewind: true,
      slideBy: 'page',
      items: 1,
      edgePadding: -1,
      gutter: 10,
      autoplay: true,
      autoplayTimeout: 5000,
      autoplayHoverPause: true,
      speed: 1000,
      controlsText: [
        '<i class="fa-solid fa-angle-left fa-2xl text-white"></i>',
        '<i class="fa-solid fa-angle-right fa-2xl text-white"></i>'
      ],
      responsive: {
        0: {
          items: 1,
        },
        767: {
          items: 2,
        },
        991: {
          items: 4,
        }
      }
    });
  </script>
@endsection