@extends('frontend.layouts.app-cafe-alegria')
@section('title')
Grupo Alegria | Cafe Alegria
@endsection

@section('seo')
<meta property="og:locale"          content="en_US" />
<meta property="og:type"            content="website" />
<meta property="og:title"           content="Grupo Alegria | Cafe Alegria" />
<meta property="og:url"             content="{{ url('cafe-alegria') }}" />
<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('cafe-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-dosis-semibold font-heading-color">ABOUT OUR BRANCH</h4>
      <div class="mt-3">
        <p class="text-center text-black lh-lg font-dosis">
          At Café Alegria, we believe that breakfast is the most important meal of the day, and we strive to make it extraordinary. Our menu showcases a fusion of Latin American flavors with a contemporary twist. From traditional favorites to innovative creations, every dish is carefully crafted using the finest ingredients to deliver a breakfast experience that is both satisfying and invigorating.
        </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-dosis-semibold font-heading-color">CONTACT INFORMATION</h4>
      <div class="mt-3">
        <p class="text-center text-black lh-lg font-dosis">
          Mobile: +63 917 800 3059<br>
          {{-- Email: Charles@alegriamnl.com<br> --}}
          Location: 4F C3 Annex, Uniqlo Bldg., 7th Ave. Corner 30th St. Fort Bonifacio, Taguig City
        </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-dosis-semibold font-heading-color">OPERATING HOURS</h4> 
      <div class="mt-3">
        <p class="text-center text-black lh-lg font-dosis">
          Monday - Thursday: 4PM - 12MN<br>
          Friday: 4PM - 3AM<br>
          Saturday: 11AM - 3AM<br>
          Sunday: 11AM - 12MN<br>
        </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-dosis-semibold font-heading-color">OUR SOCIAL MEDIA</h4>
      <div class="d-flex justify-content-center">
        <div class="mt-5 hstack gap-5 social-icons-color">
          <a href="https://www.facebook.com/cafealegriamnl" target="_blank" style="color: inherit"><i class="fa-brands fa-facebook-f"></i></a>
          <a href="https://www.instagram.com/cafealegriamnl/" 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!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>
  {{-- 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-dosis-semibold 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($cafe->chunk(8) as $chunked_cafe)
          <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
            <div class="row g-1">
              @foreach($chunked_cafe as $cafes)
              <div class="col-6 col-md-3 col-xl-3">
                <a href="{{ asset('uploads/cafe/' . $cafes->images) }}" data-fancybox="gallery">
                  <img src="{{ asset('uploads/cafe/' . $cafes->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($cafe->chunk(4) as $chunked_cafe)
          <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
            <div class="row g-1">
              @foreach($chunked_cafe as $cafes)
              <div class="col-6 col-md-3 col-xl-3">
                <a href="{{ asset('uploads/cafe/' . $cafes->images) }}" data-fancybox="gallery">
                  <img src="{{ asset('uploads/cafe/' . $cafes->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-dosis-semibold 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-dosis-semibold fw-bold fs-4">
                <li class="mb-4">
                  <a class="side-link text-decoration-none" href="#mainmenu">Main Menu</a>
                </li>
                <li class="mb-4">
                  <a class="side-link text-decoration-none" href="#drinkmenu">Drink Menu</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/Cafe Alegria/m1_main-menu.jpg') }}" data-fancybox="menu" data-caption="Main Menu">
              <img src="{{ asset('resources/Menu/Cafe Alegria/m1_main-menu.jpg') }}" alt="" id="mainmenu" class="img-fluid">
            </a>
            <a href="{{ asset('resources/Menu/Cafe Alegria/m2_drink-menu.jpg') }}" data-fancybox="menu" data-caption="Drink Menu">
              <img src="{{ asset('resources/Menu/Cafe Alegria/m2_drink-menu.jpg') }}" alt="" id="drinkmenu" 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/cafe-alegria.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: 472.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