{% extends 'front/application.html'%}

{% load static %} 

{% block content %}
<!-- Bootstrap CSS -->
<style>
.slider-item {
  background-size: cover;
  background-position: center;
  min-height: 450px;
}
</style>
    <script type="application/ld+json">{"@context": "https://schema.org", "@type": "Organization", "name": "Get Your Menu - Wedding Caterers in Delhi", "url": "https://www.getyourmenu.in/", "image": "https://www.getyourmenu.in/uploads/sliders/gym-logo.png", "contactPoint":{"@type": "ContactPoint", "telephone": "+91-9319609444", "contactType": "sales"}, "sameAs": [ "https://www.facebook.com/getyourvenue/", "https://twitter.com/getyourvenue/", "https://www.instagram.com/getyourmenu_/"]}</script><script type="application/ld+json">{"@context": "https://schema.org", "@type": "LocalBusiness", "name": "Get Your Menu - Wedding Caterers in Delhi", "image": "https://www.getyourmenu.in/uploads/sliders/gym-logo.png", "url": "https://www.getyourmenu.in/", "telephone": "+91-9319609444", "address":{"@type": "PostalAddress", "streetAddress": "F-20, Dwarka Link Rd", "addressLocality": "Samalka, New Delhi", "postalCode": "110037", "addressCountry": "India", "addressRegion": "New Delhi"}, "priceRange": "Rs."}</script><script type="application/ld+json">{"@context": "https://schema.org", "@type": "SiteNavigationElement", "name": [ "Home", "About Get Your Menu", "Portfolio", "Blog", "Contact", "Clientelle"], "url": [ "https://www.getyourmenu.in/", "https://www.getyourmenu.in/aboutus", "https://www.getyourmenu.in/portfolio", "https://www.getyourmenu.in/blog", "https://www.getyourmenu.in/contactus", "https://www.getyourmenu.in/clientelle"]}</script>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="{%static 'css/plugins.css'%}">

<link rel="stylesheet" type="text/css" href="{%static 'css/style1.css'%}">

<link rel="stylesheet" type="text/css" href="{%static 'css/menu.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'css/index.css'%}">
<link rel="stylesheet" type="text/css" href="{%static 'css/homepage.css'%}">
<link href='https://fonts.googleapis.com/css?family=Josefin Slab' rel='stylesheet'>

<link rel="preload" as="image" href="{{ sliders.0.banner_image.url }}">

<!-- Slick Slider JS -->

<!-- slider -->

<!--     
  <div class="splash" id="splash">

       <img src="{% static 'images/logo.png'%}" class="top-logo" alt="Top Logo">
         <p class="tagline">
        Get Your Menu is becoming Ambria Cuisine
      </p>

       <h1>AMBRIA CUISINE</h1>

       <div class="line"></div>

     
  

      
       <img src="{% static 'images/Ambrialogo.png'%}" class="bottom-logo" alt="Bottom Logo">

  </div>
  
  -->

<img 
  src="{{ sliders.0.banner_image.url }}"
  fetchpriority="high"
  loading="eager"
  style="position:absolute; width:0; height:0; opacity:0;"
  alt=""
>
<section class="home-slider owl-carousel img">

  <!-- ✅ FIRST SLIDE (LCP - visible immediately) -->
  <div class="slider-item" style="background-image: url({{ sliders.0.banner_image.url }});">
    <div class="overlay"></div>
    <div class="container">
      <div class="row slider-text justify-content-center align-items-center">
<div class="col-md-12 text-center slider1">
          
          <h1 class="mb-2">{{ sliders.0.banner_title }}</h1>
          <p class="mb-4">{{ sliders.0.banner_subtitle }}</p>

          <form class="index-form" method="get" action="{% url 'package-detail' %}">
            
            <select name="alt_text" class="menudrop">
              <option>Function</option>
              {% for mname in mnames %}
              <option value="{{ mname.title }}">{{ mname.title }}</option>
              {% endfor %}
            </select>

            <select name="menu_pax" class="menudrop">
              <option value="">Capacity</option>
              <option>100-300</option>
              <option>300-500</option>
              <option>500-800</option>
              <option>800-Above</option>
            </select>

            <select name="veg_non_veg" class="menudrop">
              <option value="">Veg/Non-Veg</option>
              <option>Veg</option>
              <option>Non-Veg</option>
            </select>

            <select name="menu_price" class="menudrop">
              <option value="">Price Per Plate</option>
              <option value="1000">1000</option>
              <option value="1200">1200</option>
              <option value="1500">1500</option>
              <option value="2000">2000</option>
              <option value="2500">2500</option>
              <option value="3000">3000</option>
            </select>

            <input type="submit" value="Search" id="menudrop-search">
          </form>

        </div>
      </div>
    </div>
  </div>

  <!-- ✅ OTHER SLIDES (lazy importance) -->
  {% for slider in sliders|slice:"1:" %}
  <div class="slider-item" style="background-image: url({{ slider.banner_image.url }});">
    <div class="overlay"></div>
    <div class="container">
      <div class="row slider-text justify-content-center align-items-center">
        <div class="col-md-12 text-center slider1" style="margin-bottom:200px;">
          
          <h1 class="mb-2">{{ slider.banner_title }}</h1>
          <p class="mb-4">{{ slider.banner_subtitle }}</p>

        </div>
      </div>
    </div>
  </div>
  {% endfor %}

</section>



<section class="ftco-section" id="myele" >
<div class="container">
<div class="row justify-content-center">
<div class="col-md-7 heading-section ftco-animate text-center">
<h2 class="mb-4 hhh" style="font-family: 'Josefin Slab';">ELEMENTS OF MENU</h2>

</div>
</div>
  <div id="myBtnContainer">
{% for menu in menus%}
  <button class="btn-o" onclick="filterSelection('{{menu.category_of_menu}}')"> {{menu.category_of_menu}}</button>

  {% endfor %}
</div>

<div class="containerss" style="justify-content: center;align-items: center;">
    
    <div class="bxslider logosImgs">
       
    {% for ename in enames%}
    
  <div class="filterDiv1 {{ename.category_name}}">
      <a href="{% url 'element_menu' ename.slug %}"><img src="{{ename.image.url}}" loading="lazy" style="object-fit:cover;" alt=""><p class="menu-textt">{{ename.name}}</p></a></div>
  <!--<div class="filterDiv1"><img src="{%static 'images/menu/soft-drink.jpg'%}"><p class="menu-textt">hjhj</p></div>-->
  {% endfor %}
  </div>

   </div>             
     </div>       
</section>




<!--menu element phone view-->
<section class="ftco-menu hide-box mt-5" id="phone-menuu">
  <div class="container-fluid px-2">

    <div class="text-center mb-2">
      <h2 class="mobile-title">ELEMENTS OF MENU</h2>
      <p class="mobile-sub">
        Catering your special event is a privilege. We bring excellence in taste, service & style.
      </p>
    </div>

    <select id="menu-det" class="form-control mb-3">
      {% for menu in menus %}
      <option value="{{menu.category_of_menu}}">
        {{menu.category_of_menu}}
      </option>
      {% endfor %}
    </select>

    <!-- MOBILE GRID -->
    <div class="row g-2">
      {% for ename in enames %}
      <div class="col-6 mb-1 {{ename.category_name}} det det1">
        <div class="mobile-card  ">
          <a href="{% url 'element_menu' ename.slug %}">
            <img src="{{ename.image.url}}" loading="lazy" alt="">
            <p class="menu-textt">{{ename.name}}</p>
          </a>
        </div>
      </div>
      {% endfor %}
    </div>

  </div>
</section>


<!---element ---->
<script>
    $(document).ready(function(){
        $('#menu-det').change(function()
        {
            var name=$('#menu-det').val();
            $(".det").hide();
            $("."+name).show();
        })
        

    })
</script>
<!------------------->

 <section class="ftco-section ftco-services myusp">
<div class="overlay"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 heading-section ftco-animate text-center">
<h2 class="mb-3">USP</h2>
<p style="color:black;">Catering your special event is a privilege. Bringing true excellence to the table. Committed to taste, service & style</p>
</div>
</div>
 {% for usp in usps %}
<div class="row">
<div class="col-6 col-md-2 ftco-animate">
<div class="media d-block text-center services ic-food">
<div class="icon d-flex justify-content-center align-items-center ">
<span class="food1"></span>
</div>
<div class="media-body">
<p class="usp-heading">{{usp.des1}}</p>
</div>
</div>      
</div>
<div class="col-6 col-md-2 ftco-animate">
<div class="media d-block text-center services fi-food">
<div class="icon d-flex justify-content-center align-items-center">
<div class="finest-food"></div>
</div>
<div class="media-body">
<p class="usp-heading">{{usp.des2}}</p>
</div>
</div>      
</div>
<div class="col-6 col-md-2 ftco-animate">
<div class="media d-block text-center services pl-food">
<div class="icon d-flex justify-content-center align-items-center">
<span class="plate"></span>
</div>
<div class="media-body">
<p class="usp-heading">{{usp.des3}}</p>
</div>
</div>    
</div>

<div class="col-6 col-md-2 ftco-animate">
<div class="media d-block text-center services wt-food">
<div class="icon d-flex justify-content-center align-items-center">
<span class="waiter"></span>
</div>
<div class="media-body">
<p class="usp-heading">{{usp.des4}}</p>
</div>
</div>    
</div>


<div class="col-6 col-md-2 ftco-animate">
<div class="media d-block text-center services pa-food">
<div class="icon d-flex justify-content-center align-items-center ">
<span class="platter"></span></div>
<div class="media-body">
<p class="usp-heading">{{usp.des5}}</p>
</div>
</div>    
</div>

<div class="col-6 col-md-2 ftco-animate">
<div class="media d-block text-center services ga-food">
<div class="icon d-flex justify-content-center align-items-center">
<div class="glass"></div>
</div>
<div class="media-body">
<p class="usp-heading">{{usp.des6}}</p>
</div>
</div> 
{% endfor %} 
</div>          

</div>
</div>
</section>



<section class="ftco-section">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-7 heading-section ftco-animate text-center">
                <h2>MENU BY FUNCTION</h2>
            </div>
        </div>

        <div class="grid-container">
            <!-- First Row -->
            <a href="https://www.getyourmenu.in/function/wedding-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/wedding-menu.jpg'%}" loading="lazy" alt="Image WEDDING">
                <div class="caption">WEDDING</div>
            </a>
            <a href="https://www.getyourmenu.in/function/cocktail-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/coctaikl.jpg'%}" loading="lazy" alt="Image COCKTAIL">
                <div class="caption">COCKTAIL</div>
            </a>
            <a href="https://www.getyourmenu.in/function/birthday-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/birthday.jpg'%}" loading="lazy" alt="Image BIRTHDAY">
                <div class="caption">BIRTHDAY</div>
            </a>

            <!-- Second Row -->
            <a href="https://www.getyourmenu.in/function/social-event-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/social.jpg'%}" loading="lazy" alt="Image SOCIAL EVENT">
                <div class="caption">SOCIAL EVENT</div>
            </a>
            <a href="https://www.getyourmenu.in/function/corporate-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/corporate.jpg'%}" loading="lazy" alt="Image CORPORATE">
                <div class="caption">CORPORATE</div>
            </a>
            <a href="https://www.getyourmenu.in/function/ring-ceremony-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/ring.jpg'%}" loading="lazy" alt="Image RING CEREMONY">
                <div class="caption">RING CEREMONY</div>
            </a>

            <!-- Third Row -->
            <a href="https://www.getyourmenu.in/function/mehndi-ceremony-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/hemendi.jpg'%}" loading="lazy" alt="Image MEHNDI CEREMONY">
                <div class="caption">MEHNDI CEREMONY</div>
            </a>
            <a href="https://www.getyourmenu.in/function/wedding-reception-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/reception.jpg'%}" loading="lazy" alt="Image WEDDING RECEPTION">
                <div class="caption">WEDDING RECEPTION</div>
            </a>
            <a href="https://www.getyourmenu.in/function/sangeet-ceremony-caterers-delhi/" class="image-card">
                <img src="{% static 'images/Menu-by-function/sangeet.jpg'%}" loading="lazy" alt="Image SANGEET CEREMONY">
                <div class="caption">SANGEET CEREMONY</div>
            </a>
        </div>
    </div>
</section>


<!--================ COUNTER ===============================-->

<section class="ftco-counter ftco-bg-dark img" id="section-counter" style='background-image: url("{%static 'images/bg_2.jpg'%}");'data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="row">
<div class="col-md-6 col-lg-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<div class="icon"><span class="flaticon-pizza-1"></span></div>
<strong class="number" data-number="576">0</strong>
<span>Functions</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<div class="icon"><span class="flaticon-medal"></span></div>
<strong class="number" data-number="12">0</strong>
<span>Empanelments</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text">
<div class="icon"><span class="flaticon-laugh"></span></div>
<strong class="number" data-number="12">0</strong>
<span>Years Experience</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 d-flex justify-content-center counter-wrap ftco-animate">
<div class="block-18 text-center">
<div class="text inf-food">
<div class="icon"><span class="infinite"></span></div>
<strong class="number">Infinite</strong>
<span>Smiles Spread!</span>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</section>



<section class="ts-wrap">
  <h2 class="ts-heading">Client Testimonials</h2>

  <!-- BIG IMAGE -->
  <div class="ts-big">
            <button class="ts-arrow left" onclick="prevTestimonial()">&#10094;</button>

    <img id="tsBigImg"
         src="{{ testimonials.first.image.url }}"
         alt="Testimonial" loading="lazy">
         
             <button class="ts-arrow right" onclick="nextTestimonial()">&#10095;</button>

  </div>

  <!-- SMALL AUTO SLIDER -->
  <div class="ts-scroll">
    <div class="ts-row marquee">

      {% for t in testimonials %}
      <div class="ts-item {% if forloop.first %}active{% endif %}"
           data-img="{{ t.image.url }}"
           onclick="switchTestimonial(this)">
        <img src="{{ t.image.url }}"  loading="lazy" alt="testimonial">
      </div>
      {% endfor %}

      <!-- DUPLICATE FOR INFINITE LOOP -->
      {% for t in testimonials %}
      <div class="ts-item"
           data-img="{{ t.image.url }}"
           onclick="switchTestimonial(this)">
        <img src="{{ t.image.url }}"  loading="lazy" alt="testimonial">
      </div>
      {% endfor %}

    </div>
  </div>
</section>


 <script>
let currentIndex = 0;
const items = document.querySelectorAll(".ts-item");
const bigImg = document.getElementById("tsBigImg");

function showTestimonial(index) {
  if (index < 0) index = items.length - 1;
  if (index >= items.length) index = 0;

  currentIndex = index;
  bigImg.src = items[index].dataset.img;

  items.forEach(i => i.classList.remove("active"));
  items[index].classList.add("active");
}

function switchTestimonial(el) {
  items.forEach((item, index) => {
    if (item === el) {
      showTestimonial(index);
    }
  });
}

function nextTestimonial() {
  showTestimonial(currentIndex + 1);
}

function prevTestimonial() {
  showTestimonial(currentIndex - 1);
}
</script>








<section class="video-testimonial">
  <h2 class="video-title">Video Testimonials</h2>
  <p class="video-sub">Real experiences shared by our Clients</p>

  <div class="video-carousel" id="videoCarousel">
      <button class="mute-toggle" id="muteToggle" aria-label="Toggle sound">
</button>


    {% for v in video_testimonials %}
    <div class="video-card {% if forloop.first %}active{% endif %}">
      <video src="{{ v.video.url }}" muted loop autoplay playsinline preload="none" loading="lazy"></video>
      <div class="video-info">
        <!--<h4>{{ v.name }}</h4>-->
        <span>{{ v.designation }}</span>
      </div>
    </div>
    {% endfor %}

  </div>
</section>

<script>
const cards = document.querySelectorAll('.video-card');
let current = 0;

function updateCarousel(){
  cards.forEach((card,i)=>{
    card.classList.remove('active','left','right');
    if(i === current){
      card.classList.add('active');
      card.querySelector('video').play();
    }else{
      card.querySelector('video').pause();
    }
  });

  const left = (current - 1 + cards.length) % cards.length;
  const right = (current + 1) % cards.length;

  cards[left].classList.add('left');
  cards[right].classList.add('right');
}

cards.forEach((card,i)=>{
  card.addEventListener('click',()=>{
    current = i;
    updateCarousel();
  });
});

setInterval(()=>{
  current = (current + 1) % cards.length;
  updateCarousel();
},5000);

updateCarousel();
</script>

<script>
const muteBtn = document.getElementById('muteToggle');
let isMuted = true;

muteBtn.addEventListener('click', () => {
  isMuted = !isMuted;

  cards.forEach(card => {
    const video = card.querySelector('video');
    video.muted = isMuted;
  });

  muteBtn.textContent = isMuted ? '🔇' : '🔊';
});
</script>


 



<!--=============== BLOG ==============================-->

 <section class="ftco-section blog-modern">
  <div class="container">

    <div class="row justify-content-center">
      <div class="col-md-7 text-center">
        <h2 class="blog-title">Recent from Blog</h2>
        <p class="blog-subtitle">
          Writing Tasteful Creations. Get a glimpse into the latest catering trends.
        </p>
      </div>
    </div>

    <div class="row">
      {% for post in recent_posts %}
      <div class="col-lg-4 col-md-6 mb-4">
        <div class="blog-card">

          <a href="{% url 'post-details' slug=post.slug %}">
            <img src="{{ post.photo.url }}" class="blog-img" alt=""/>
          </a>

          <div class="blog-content">
            <div class="blog-meta">
              {{ post.publish|date:"d M Y" }} • {{ post.author }}
            </div>

            <h5 class="blog-heading">
              <a href="{% url 'post-details' slug=post.slug %}">
                {{ post.title }}
              </a>
            </h5>

            <p class="blog-desc">
              {{ post.content|safe|truncatewords:15 }}
            </p>

            <a href="{% url 'post-details' slug=post.slug %}" class="read-btn">
              Read More →
            </a>
          </div>

        </div>
      </div>
      {% endfor %}
    </div>

    <div class="text-center mt-4">
      <a class="btn btn-primary" href="{%url 'blog'%}">View All</a>
    </div>

  </div>
</section>




<section class="ftco-counter ftco-bg-dark img" id="section-counter" style='background-image: url("{%static 'images/bg_2.jpg'%}");' data-stellar-background-ratio="0.5">
    <div class="overlay"></div>
    <div class="container">
    <div class="heading-section ftco-animate ">
        {% for i in homecontents %}
<h1 class="mb-0"id="abbout" >{{i.title|safe}}</h1>


<div id="con">{{i.content|safe}}</div>

<div style="z-index:-1; text-align:justify; font-size:15px" id="con1">{{ i.content|safe|slice:":384" }} <div id="dots">...</div><div id="more">{{ i.content|safe|slice:"385:" }}
</div></div>
<button onclick="myFunction()" id="myBtn" class="conn">Read more</button>
{% endfor %}
</div>
    </div>
</section>

<section class="ftco-appointment">
      <div class="overlay"></div>
      <div class="container-wrap">
        <div class="row no-gutters d-md-flex align-items-center">
          <div class="col-md-5 d-flex">
          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14020.262610777032!2d77.0898238!3d28.5377463!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x669a9b835b0a9403!2sGet%20Your%20Menu%20-%20Best%20Wedding%20Caterers%20in%20Delhi!5e0!3m2!1sen!2sin!4v1573883988725!5m2!1sen!2sin" 
          width="100%" height="480" frameborder="0" id="mp2" style="border:0;" title="MyMap" allowfullscreen=""></iframe>
          
        </div>
<div class="col-md-7 appointment ftco-animate">
<h3 class="mb-3">Contact Us</h3>
<form method='POST' class="contact-form" id="subForm" onsubmit="return submitUserForm();">
  {% csrf_token %}
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="name" placeholder="Name*" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email*"required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="phone" type="tel" pattern="[0-9]{10}"  placeholder="Mobile Number*">
</div>
</div>

</div>
<div class="row">
    <div class="col-md-4">
<div class="form-group">
<input type="date" class="form-control" name="date" placeholder="Date" required>
</div>
</div>

<div class="col-md-4">
<div class="form-group">

<select class="form-control" id="cars" name="function" placeholder="Function" required>
    <option value="">Function*</option>
    <option value="Wedding Ceremony">Wedding Ceremony</option>
    <option value="Cocktail Ceremony">Cocktail Ceremony</option>
    <option value="Birthday">Birthday</option>
    <option value="Social Event">Social Event</option>
    <option value="Corporate">Corporate</option>
    <option value="Ring Ceremony">Ring Ceremony</option>
    <option value="Mehendi Ceremony">Mehendi Ceremony</option>
     <option value="Wedding Reception">Wedding Reception</option>
    <option value="Sangeet Ceremony">Sangeet Ceremony</option>
    

  </select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="budget" placeholder="Budget*">
</div>
</div>
</div>

<div class="row">
<div class="col-md-4">
<div class="form-group">
<input type="text" class="form-control" name="capacity" placeholder="Capacity" required>
</div>
</div>


<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" name="venue" placeholder="Venue" required>
</div>
</div>
</div>


<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea  cols="30" rows="4" class="form-control" name="message" placeholder="Message" required></textarea>
</div>
</div>
</div>


<div class="row">
<div class="col-md-7">
<div class="form-group">
<div id="g-recaptcha-error"></div>
<div class="g-recaptcha" data-sitekey="6Lcnwp8hAAAAACraMCCh79W_qLpURkpx2xpeziHI" data-callback="verifyCaptcha" required ></div>
</div>
</div>

<div class="col-md-5">
<div class="form-group">
    <button type="submit" class="hidden btn btn-primary"  id="btnSubmit2" style= "font-size:30px;" >Submit</button>
</div>
</div>
</div>

<!--<div id="g-recaptcha-error"></div>-->
<!--<div class="g-recaptcha" data-sitekey="6LdKyp8hAAAAAJS2VG2VmuDutUResIAA4oBclb_3" data-callback="verifyCaptcha" required ></div>-->
<!--    <button type="submit" class="hidden btn btn-primary py-3 px-5" id="btnSubmit">Submit</button>-->
 
</form>
</div>          
</div>
</div>
</section>


<!---->

<script>
var recaptcha_response = '';
function submitUserForm() {
    if(recaptcha_response.length == 0) {
        document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
        return false;
    }
    return true;
}
 
function verifyCaptcha(token) {
    recaptcha_response = token;
    document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>

<script>
$(document).ready(function () {
  $('.home-slider').owlCarousel({
    items: 1,
    loop: true,
    autoplay: true
  });
});
</script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js">
    </script> 
    <script>
           $('.brand-carousel').owlCarousel({
               loop:false,
               margin:10,
               autoplay:false,
               dots: false,
               nav:true,
               navText: ["<i class='fa fa-angle-left pr'></i>","<i class='fa fa-angle-right nx'></i>"],
               responsive:{
                   0:{
                       items:1
                   },
                   600:{
                       items:3
                   },
                   1000:{
                       items:6
                   }
               }
           })
    </script>



<script>
          $('.brand-menu').owlCarousel({
               loop:false,
               margin:10,
               autoplay:false,
               dots: false,
               nav:true,
              navText: ["<i class='fa fa-angle-left pr'></i>","<i class='fa fa-angle-right nx'></i>"],
               responsive:{
                   0:{
                       items:1
                   },
                   600:{
                       items:3
                   },
                   1000:{
                       items:5
                   }
               }
           })
    </script>

<script>
          $('.brand-blog').owlCarousel({
               loop:false,
               margin:10,
               autoplay:true,
               dots: false,
               nav:true,
              navText: ["<i class='fa fa-angle-left pr'></i>","<i class='fa fa-angle-right nx'></i>"],
               responsive:{
                   0:{
                       items:1
                   },
                   600:{
                       items:3
                   },
                   1000:{
                       items:3
                   }
               }
           })
    </script>


<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>


<!-- =============CAPTCHA JS================ -->

<script>
  $(function () {    
  $("#subForm").ebcaptcha();
});

(function ($) {
  jQuery.fn.ebcaptcha = function (options) {
    var element = this;
    var input = this.find("#ebcaptchainput");
    var label = this.find("#ebcaptchatext");
    $(element).find("button[type=submit]").attr("disabled", "disabled");

    var randomNr1 = 0;
    var randomNr2 = 0;
    var totalNr = 0;

    randomNr1 = Math.floor(Math.random() * 10);
    randomNr2 = Math.floor(Math.random() * 10);
    totalNr = randomNr1 + randomNr2;
    var texti = "Captcha = " + randomNr1 + " + " + randomNr2;
    $(label).text(texti);

    $(input).keyup(function () {
      var nr = $(this).val();
      if (nr == totalNr) {
        $(element).find("button[type=submit]").removeAttr("disabled");
      } else {
        $(element).find("button[type=submit]").attr("disabled", "disabled");
      }
    });

    $(document).keypress(function (e) {
      if (e.which == 13) {
        if (element.find("button[type=submit]").is(":disabled") == true) {
          e.preventDefault();
          return false;
        }
      }
    });
  };
})(jQuery);

</script>


<script>
       $(document).ready(function() {   

        var id = '#dialog';
    
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
    
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        
        //transition effect     
        $('#mask').fadeIn(100); 
        $('#mask').fadeTo("slow",0.9);  
    
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
              
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
    
        //transition effect
        $(id).fadeIn(100);     
    
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        
        $('#mask').hide();
        $('.window').hide();
    });     
    
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     
    
});
</script>


<!-- ============================= -->
<script>
          $(document).ready(function () {
  $(".customer-logos").slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 1500,
    arrows: true,
    dots: false,
    pauseOnHover: false,
    prevArrow: '<i class="slick-prev fa fa-angle-left"></i>',
    nextArrow: '<i class="slick-next fa fa-angle-right"></i>',
       responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 1
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 1
      }
      }
    ]
  });
});

    </script>

<script>
        function defer(method) {
  if (window.jQuery)
    method();
  else
    setTimeout(function() {
      defer(method)
    }, 50);
}
defer(function() {
  (function($) {
    
    function doneResizing() {
      var totalScroll = $('.logo-slider-frame').scrollLeft();
      var itemWidth = $('.logo-slider-item').width();
      var difference = totalScroll % itemWidth;
      if ( difference !== 0 ) {
        $('.logo-slider-frame').animate({
          scrollLeft: '-=' + difference
        }, 500, function() {
          checkArrows();
        });
      }
    }
    
    function checkArrows() {
      var totalWidth = $('#logo-slider .logo-slider-item').length * $('.logo-slider-item').width();
      var frameWidth = $('.logo-slider-frame').width();
      var itemWidth = $('.logo-slider-item').width();
      var totalScroll = $('.logo-slider-frame').scrollLeft();
      
     // if ( ((totalWidth - frameWidth) - totalScroll) < itemWidth ) {
     //   $(".next").css("visibility", "hidden");
     // }
     // else {
     //   $(".next").css("visibility", "visible");
     // }
     // if ( totalScroll < itemWidth ) {
     //   $(".prev").css("visibility", "hidden");
     // }
     // else {
     //   $(".prev").css("visibility", "visible");
     // }
    }
    
    $('.arrow').on('click', function() {
      var $this = $(this),
        width = $('.logo-slider-item').width(),
        speed = 500;
      if ($this.hasClass('prev')) {
        $('.logo-slider-frame').animate({
          scrollLeft: '-=' + width
        }, speed, function() {
          checkArrows();
        });
      } else if ($this.hasClass('next')) {
        $('.logo-slider-frame').animate({
          scrollLeft: '+=' + width
        }, speed, function() {
          checkArrows();
        });
      }
    });
    
    $(window).on("load resize", function() {
      checkArrows();
      $('#logo-slider .logo-slider-item').each(function(i) {
        var $this = $(this),
          left = $this.width() * i;
        $this.css({
          left: left
        })
      }); 
    }); 
    
    var resizeId;
    $(window).resize(function() {
        clearTimeout(resizeId);
        resizeId = setTimeout(doneResizing, 500);
    });
    
  })(jQuery);
});
    </script>


<script>
filterSelection("Beverage")
</script>

<script>
filterSelection1("Wedding")
</script>

<script>
    const splash = document.getElementById("splash");

    setTimeout(() => {
      splash.classList.add("hide");
      document.body.style.overflow = "auto";
    }, 1500);
  </script>


<script src="{%static 'js/homepage.js'%}"></script>



{% endblock %}