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

@section('title')
Grupo Alegria | Alegria Manila
@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-manila') }}" />
<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/branches/alegria-manila.css') }}">
  {{-- CAROUSEL --}}
  <style>
    .parallax{
      background-image: url("{{ asset('resources/bg.jpg') }}");
    }
    @media only screen and (max-device-width: 1366px) {
    .parallax {
        background-attachment: scroll;
    }
}
  </style>

  <div class="container-fluid parallax" id="about">
    <header>
      {{-- TOP INFO --}}
      <div class="top-info">
        <div class="container">
          <div class="row w-100 pt-4">
            <div class="col">
              <i class="fa-solid fa-arrow-left text-white"></i>&emsp;<a href="{{ url('/') }}" class="text-white text-decoration-none">Back to home</a>
            </div>
            <div class="col-6">
              <div class="d-flex align-items-start justify-content-center">
                <a href="{{ url('alegria-manila') }}">
                  <img src="{{ asset('resources/branches/_alegria-mnl/logo2.png') }}" class="img-fluid img-mnl" alt="img">
                </a>
              </div>
              {{-- <div class="d-flex align-items-end pt-5 justify-content-center">
                <span class="text-white fw-bold">
                  Ground Floor, Uptown Parade, Bonifacio Global City, Taguig
                </span>
              </div> --}}
            </div>
            <div class="col d-flex align-items-center pb-5 justify-content-end">
              <div class="hstack gap-5">
                <button type="button" class="btn btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">
                  RESERVE A TABLE
                </button>
                {{-- <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                  <i class="fa-sharp fa-solid fa-bars fa-xl text-white"></i>
                </button> --}}
              </div>
            </div>
          </div>
        </div>
      </div>
      {{-- END TOP INFO --}}
  
      {{-- OFF CANVAS --}}
      <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close">
          </button>
        </div>
        <div class="offcanvas-body ps-5">
          <div class="text-start">
            <a href="{{ url('/') }}"><img src="{{ asset('resources/navbar-logo.png') }}" class="img-fluid img-main" alt="img-nav">
            </a>
          </div>
          <div class="mt-5">
            <div class="vstack gap-5">
              <a href="{{ url('/') }}" class="text-white text-decoration-none fw-medium">Main Home</a>
              <a href="{{ url('/about-us') }}" class="text-white text-decoration-none fw-medium">About Us</a>
              <div class="d-flex">
                <a class="text-white text-decoration-none fw-medium" href="{{ asset('branches') }}">
                  Concepts
                </a>
                <a class="text-white dropdown-toggle mobile-padding px-3" href="#" id="dropdownMenuButton" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  <i class="fas fa-caret-right" id="dropdown-arrow"></i>
                </a>
                <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item" href="{{ url('alegria-manila') }}">Alegria Manila</a>
                  <a class="dropdown-item" href="{{ url('alegria-singapore') }}">Alegria Singapore</a>
                  <a class="dropdown-item" href="{{ url('buena-vida') }}">Buena Vida</a>
                  <a class="dropdown-item" href="{{ url('cafe-alegria') }}">Cafe Alegria</a>
                  <a class="dropdown-item" href="{{ url('alegria-cantina') }}">Alegria Cantina</a>
                  <a class="dropdown-item" href="{{ url('alegria-ihola-chula') }}">Hola Chula</a>
                  <a class="dropdown-item" href="{{ url('alegrita') }}">Alegrita x Mang Jose</a>
                </div>
              </div>
              <a href="{{ url('/news-and-promotions') }}" class="text-white text-decoration-none fw-medium">News &
                Promotions</a>
              <a href="{{ url('/contact-us') }}" class="text-white text-decoration-none fw-medium">Contact
                Us</a>
              <div class="border border-white w-50"></div>
              <a href="" class="text-white text-decoration-none">Terms & Conditions</a>
              <a href="" class="text-white text-decoration-none">Privacy Policy</a>
            </div>
          </div>
        </div>
      </div>
      {{-- END OFF CANVAS --}}
  
      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content" style="background-image: url('{{ asset('resources/branches/_alegria-mnl/bg2.jpg') }}')">
            <div class="modal-header border-bottom-0 d-flex justify-content-end">
              <button type="button" class="btn bg-transparent" data-bs-dismiss="modal">
                <i class="fa-solid fa-xmark text-white"></i>
              </button>
            </div>
            <div class="modal-body px-5 py-2">
              <h4 class="text-black text-start m-0 text-white fw-semibold">RESERVE A TABLE</h4>
              <div class="mt-4">
                <p class="text-white">
                  We're thrilled that you're considering dining with us! We advise scheduling in
                  advance to ensure a wonderful experience. Our staff will confirm your reservation as
                  soon as you complete the reservation form.
                </p>
              </div>
            </div>
            <div class="modal-footer border-top-0 justify-content-start modal-reservation pb-5">
              <a href="{{ url('/alegria-manila-form') }}" type="button" class="btn btn-color">
                PROCEED TO SCHEDULE
                <i class="fa-solid fa-arrow-right-long text-white"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
      {{-- END TOP INFO --}}
  
      {{-- BIG SCREEN NAVBAR --}}
      <div class="navbar2 top-info">
        <nav class="navbar navbar-expand-lg bg-transparent pt-5 mb-4">
          <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav m-auto mb-lg-0 fs-6">
                <li class="nav-item">
                  <a class="text-decoration-none fw-medium text-white" aria-current="page" href="{{ url('alegria-manila/#about') }}">
                    ABOUT
                  </a>
                </li>
                <li class="nav-item">
                  <a class="text-decoration-none fw-medium text-white" href="{{ url('alegria-manila/#contact') }}">
                    CONTACT
                  </a>
                </li>
                <li class="nav-item">
                  <a class="text-decoration-none fw-medium text-white" href="{{ url('alegria-manila/#gallery') }}">
                    GALLERY
                  </a>
                </li>
                <li class="nav-item">
                  <a class="text-decoration-none fw-medium text-white" href="{{ url('alegria-manila/#menu') }}">
                    MENU
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
      {{-- END NAVBAR --}}
  
      {{-- SMALL SCREEN NAVBAR --}}
      <div class="navbar3 d-lg-none d-block d-md-block d-sm-block">
        <div class="pt-5">
          <i class="fa-solid fa-arrow-left text-white"></i>&emsp;<a href="{{ url('/') }}" class="text-white text-decoration-none">Back to home</a>
        </div>
        <div class="header d-flex justify-content-between align-items-center px-5">
          <!-- Logo -->
          <div class="logo-container">
            <a href="{{ url('/alegria-manila') }}">
              <img class="img-fluid" src="{{ asset('resources/branches/_alegria-mnl/logo2.png') }}" alt="img-alegria-mnl">
            </a>
          </div>
          <!-- End Logo -->
          <!-- Nav and Button Container -->
          <div>
            <!-- Reservation Button -->
            <div class="d-flex justify-content-end pb-5 ms-5 ms-md-0">
              <button type="button" class="btn btn-color btn-reserve text-nowrap" data-bs-toggle="modal" data-bs-target="#exampleModal">
                RESERVE A TABLE
              </button>
            </div>
            <!-- End Reservation Button -->
            <!-- Nav Bar Container -->
            <div>
              <nav class="navbar navbar-dark navbar-expand-lg bg-transparent justify-content-end">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  {{-- <span class="navbar-toggler-icon"></span> --}}
                  <i class="fa-solid fa-bars" style="color: white"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <li class="nav-item">
                      <a class="nav-link ms-1 text-decoration-none fw-normal" href="{{ url('alegria-manila/#about') }}">ABOUT</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link ms-1 text-decoration-none fw-normal" href="{{ url('alegria-manila/#contact') }}">CONTACT</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link ms-1 text-decoration-none fw-normal" href="{{ url('alegria-manila/#gallery') }}">GALLERY</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link ms-1 text-decoration-none fw-normal" href="{{ url('alegria-manila/#menu') }}">MENU</a>
                    </li>
                    {{-- <li class="nav-item">
                      <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                        <i class="fa-sharp fa-solid fa-bars text-white"></i>
                      </button>
                    </li> --}}
                  </ul>
                  <!-- <a href="#">
                            <i class="fa-solid fa-bars fa-xl" style="color: white; margin-left: 80px"></i>
                        </a> -->
                </div>
              </nav>
            </div>
            <!-- End Nav Bar Container -->
          </div>
          <!-- End Nav and Button Container -->
        </div>
      </div>
      {{-- END SMALL SCREEN NAVBAR --}}
  
      {{-- STICKY TOP NAVBAR --}}
      <div class="navbar1 top-info" style="background-image: url('{{ asset('resources/branches/_alegria-mnl/bg2.jpg') }}')">
        <nav class="navbar navbar-expand-lg bg-black">
          <div class="container">
            <a class="navbar-brand" href="{{ url('/alegria-manila') }}">
              <img src="{{ asset('resources/branches/_alegria-mnl/logo2.png') }}" class="img-fluid w-75 py-2" alt="img-nav">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon text-white"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav m-auto mb-2 mb-lg-0">
                <li class="nav-item"></li>
                <a class="nav-link nav-link-focus-white text-decoration-none fw-medium" href="{{ url('alegria-manila/#about') }}">
                  ABOUT
                </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link nav-link-focus-white ms-1 text-decoration-none fw-medium" href="{{ url('alegria-manila/#contact') }}">
                    CONTACT
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link nav-link-focus-white ms-1 text-decoration-none fw-medium" href="{{ url('alegria-manila/#gallery') }}">
                    GALLERY
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link nav-link-focus-white ms-1 text-decoration-none fw-medium" href="{{ url('alegria-manila/#menu') }}">
                    MENU
                  </a>
                </li>
              </ul>
              <div class="hstack gap-5">
                <button type="button" class="btn btn-color" data-bs-toggle="modal" data-bs-target="#exampleModal">RESERVE A TABLE</button>
              </div>
            </div>
          </div>
        </nav>
      </div>
      {{-- END STICKY TOP NAVBAR --}}
  
    </header>
    <div class="mb-5 pt-5 container">
      <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('mnl-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>
  
      {{-- ABOUT BRANCH --}}
      <div class="mt-5 mb-5 pt-5" id="contact">
        <div class="text-center mb-5">
          <h4 class="text-white fw-semibold">ABOUT OUR BRANCH</h4>
          <div class="mt-3">
            <p class="text-center text-white lh-lg">
              Alegria Manila is a transcultural restaurant that specializes in Filipino and Latin American cuisine. Our 16-course menu takes you on a culinary journey that blends the flavors and traditions of both cultures into a unique and unforgettable dining experience.
            </p>
            <p class="text-center text-white lh-lg">
              Our chefs use only the freshest and highest quality ingredients to create dishes that are both delicious and visually stunning. From our savory adobo and lechon to our tangy ceviche and empanadas, each dish is thoughtfully crafted to showcase the best of both Filipino and Latin American cuisine.
            </p>
          </div>
        </div>
      </div>
      {{-- END ABOUT BRANCH --}}
    </div>

    <div class="container mt-5 mb-5 pt-0 pt-lg-5" id="" style="max-width: 900px">
      <div class="row">
        <div class="col-lg-6">
          <div class="text-center text-lg-start mb-5">
            <h4 class="text-white fw-semibold">OPERATING HOURS</h4>
            <div class="mt-5 text-white">
              <p>Monday: <span style="color: red">CLOSED</span></p>
              <p>Tuesday - Sunday: 6PM - 12MN</p>
              <p>Seating is at 6:30PM and 8:30PM</p>
            </div>
          </div>
        </div>
        <div class="col-lg-6" id="contact">
          <div class="text-center text-lg-start">
            <h4 class="text-white fw-semibold">CONTACT DETAILS</h4>
            <div class="mt-5 text-white">
              <p>Mobile: +63 956 834 8677</p>
              <p>Landline: (02) 8562 7657</p>
              {{-- <p>Email: reservations.alegriamnl@gmail.com</p> --}}
              <p>Location: Ground Floor, Uptown Parade, Bonifacio Global City, Taguig</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  
    {{-- SOCIAL MEDIA --}}
    <div class="container pb-5">
      <div class="text-white text-center">
        <h4 class="fw-semibold">OUR SOCIAL MEDIA</h4>
        <div class="d-flex justify-content-center">
          <div class="mt-5 hstack gap-5 social-icons">
            <a href="https://www.facebook.com/alegriamnl" target="_blank" style="color: inherit"><i class="fa-brands fa-facebook-f"></i></a>
            <a href="https://www.instagram.com/alegriamnl/" target="_blank" style="color: inherit"><i class="fa-brands fa-instagram"></i></a>
          </div>
        </div>
      </div>
    </div>
    {{-- END SOCIAL MEDIA --}}
  </div>
  {{-- END CAROUSEL --}}

  
  <div class="container-fluid px-0 parallax">
    {{-- 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 text-center letter-spacing-10px fw-semibold">OUR RESTAURANT GALLERY</h1>
    </div>
    {{-- END IMG SECTION --}}

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

      <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($manila->chunk(8) as $chunked_manila)
            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
              <div class="row g-1">
                @foreach($chunked_manila as $manilas)
                <div class="col-6 col-md-3 col-xl-3">
                  <a href="{{ asset('uploads/manila/' . $manilas->images) }}" data-fancybox="gallery">
                    <img src="{{ asset('uploads/manila/' . $manilas->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($manila->chunk(4) as $chunked_manila)
            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
              <div class="row g-1">
                @foreach($chunked_manila as $manilas)
                <div class="col-6 col-md-3 col-xl-3">
                  <a href="{{ asset('uploads/manila/' . $manilas->images) }}" data-fancybox="gallery">
                    <img src="{{ asset('uploads/manila/' . $manilas->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 --}}

    <div class="d-flex justify-content-end">
      <button onclick="topFunction()" class="rounded-circle text-white btn-upward border-0"><i class="fa-solid fa-arrow-up-long"></i></button>
    </div>
  
    <footer>
      <div class="container d-flex flex-wrap justify-content-between">
        <div class="footer-left mobile-footer-padding text-white">
          COPYRIGHT © GRUPO ALEGRIA 2023. DESIGNED AND DEVELOPED BY <a href="https://rwebsolutions.com.ph/" target="_blank" style="text-decoration: none; color: unset">R WEB SOLUTIONS, CORP.</a>
        </div>
        <div class="footer-right">
          <div class="hstack gap-2 text-uppercase">
            <a target="_blank" href="{{ asset('terms-conditions') }}" class="text-decoration-none text-white">Terms and Conditions</a>
            <span class="text-white">|</span>
            <a target="_blank" href="{{ asset('privacy-policy') }}" class="text-decoration-none text-white">Privacy Policy</a> 
          </div>
        </div>
      </div>
    </footer>
  </div>

  {{-- OUR MENU SECTION --}}
  <div class="d-none">
    <a href="{{ asset('resources/Menu/Alegria Manila/m3_tasting-menu1.jpg') }}" data-fancybox="menu" data-caption="Tasting Menu 1">
      <img src="{{ asset('resources/Menu/Alegria Manila/m3_tasting-menu1.jpg') }}" alt="" id="tasting1" class="img-fluid">
    </a>
    <a href="{{ asset('resources/Menu/Alegria Manila/m3_tasting-menu2.jpg') }}" data-fancybox="menu" data-caption="Tasting Menu 2">
      <img src="{{ asset('resources/Menu/Alegria Manila/m3_tasting-menu2.jpg') }}" alt="" id="tasting2" class="img-fluid">
    </a>
    <a href="{{ asset('resources/Menu/Alegria Manila/m1_ala-carte.jpg') }}" data-fancybox="menu" data-caption="A La Carte">
      <img src="{{ asset('resources/Menu/Alegria Manila/m1_ala-carte.jpg') }}" alt="" id="alacarte" class="img-fluid">
    </a>
    <div id="beverages" class="d-flex flex-column gap-5">
      <a href="{{ asset('resources/Menu/Alegria Manila/m2_bar-list1.jpg') }}" data-fancybox="menu" data-caption="Bar List 1">
        <img src="{{ asset('resources/Menu/Alegria Manila/m2_bar-list1.jpg') }}" alt="" class="img-fluid">
      </a>
      <a href="{{ asset('resources/Menu/Alegria Manila/m2_bar-list2.jpg') }}" data-fancybox="menu" data-caption="Bar List 2">
        <img src="{{ asset('resources/Menu/Alegria Manila/m2_bar-list2.jpg') }}" alt="" class="img-fluid">
      </a>
      <a href="{{ asset('resources/Menu/Alegria Manila/m4_wine-list1.jpg') }}" data-fancybox="menu" data-caption="Wine List 1">
        <img src="{{ asset('resources/Menu/Alegria Manila/m4_wine-list1.jpg') }}" alt="" class="img-fluid">
      </a>
      <a href="{{ asset('resources/Menu/Alegria Manila/m4_wine-list2.jpg') }}" data-fancybox="menu" data-caption="Wine List 2">
        <img src="{{ asset('resources/Menu/Alegria Manila/m4_wine-list2.jpg') }}" alt="" class="img-fluid">
      </a>
    </div>
    <a href="{{ asset('resources/Menu/Alegria Manila/m5_new-menu-7course.jpg') }}" data-fancybox="menu" data-caption="7 Course">
      <img src="{{ asset('resources/Menu/Alegria Manila/m5_new-menu-7course.jpg') }}" alt="" id="course7" class="img-fluid">
    </a>
    <a href="{{ asset('resources/Menu/Alegria Manila/m5_new-menu-11-course.jpg') }}" data-fancybox="menu" data-caption="11 Course">
      <img src="{{ asset('resources/Menu/Alegria Manila/m5_new-menu-11-course.jpg') }}" alt="" id="course11" class="img-fluid">
    </a>
    <a href="{{ asset('resources/Menu/Alegria Manila/m5_new-menu-pescatarian.jpg') }}" data-fancybox="menu" data-caption="Pescatarian">
      <img src="{{ asset('resources/Menu/Alegria Manila/m5_new-menu-pescatarian.jpg') }}" alt="" id="pescatarian" class="img-fluid">
    </a>
  </div>
  

  {{-- <div class="container" id="menu" style="margin-top: 100px;">
    <h1 class="text-white text-center letter-spacing-10px fw-semibold" style="margin-bottom: 60px">OUR MENU</h1>
    <div class="position-relative">
      <div class="row">
        <div class="col-5 col-md-2 col-xl-2">
          <div class="position-sticky" style="top: 122px;">
            <div class="d-flex flex-column align-items-center justify-content-center" style="height: 100vh;">
              <div class="mb-4">
                <a class="side-link text-decoration-none fw-bold" href="#alacarte">Lunch Menu</a>
                <ul class="list-unstyled fw-bold fs-4">
                  <li>
                    <a class="side-link text-decoration-none" href="#alacarte">A La Carte</a>
                  </li>
                </ul>
              </div>
              <div>
                <a class="side-link text-decoration-none fw-bold" href="#course7">Tasting Menu</a>
                <ul class="list-unstyled fw-bold fs-4">
                  <li class="mb-4">
                    <a class="side-link text-decoration-none" href="#tasting1">Tasting Menu 1</a>
                  </li>
                  <li class="mb-4">
                    <a class="side-link text-decoration-none" href="#tasting2">Tasting Menu 2</a>
                  </li>
                  <li class="mb-4">
                    <a class="side-link text-decoration-none" href="#beverages">Beverages</a>
                  </li>
                  <li class="mb-2">
                    <a class="side-link text-decoration-none" href="#course7">7 Course</a>
                  </li>
                  <li class="mb-2">
                    <a class="side-link text-decoration-none" href="#course11">11 Course</a>
                  </li>
                  <li>
                    <a class="side-link text-decoration-none" href="#pescatarian">Pescatarian</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="col-7 col-md-8 col-xl-8">
          <div class="d-flex flex-column gap-5" data-bs-spy="scroll">

          </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-manila.css') }}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />

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

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

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

    @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