@extends('frontend.layout.applayout')
@section('title','Versova')
@section('main-content')
@include('frontend.sections.banneritem')
@include('frontend.sections.content')
@include('frontend.sections.category')
@include('frontend.sections.products-show')
@include('frontend.sections.showbrands')
@include('frontend.sections.whatsnew')
  
    

@push('scripts')
<script>
  $(document).ready(function() {
      $('.owl-carousel.owl-brands').owlCarousel({
          loop: true,
          margin: 0,
          nav: true,
          dots: false,
          autoplay: true,
          autoplayTimeout: 2000,
          autoplayHoverPause: true,
          navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
          responsive: {
              0: {
                  items: 3
              },
              600: {
                  items: 3
              },
              700: {
                  items: 5
              },
              1000: {
                  items: 6
              },
              1600: {
                  items: 7
              },
              1700: {
                  items: 8
              }
          }
      });

      $('#Prd_cat').owlCarousel({
          loop: false,
          margin: 20,
          nav: true,
          dots: false,
          autoplay: false,
          autoplayTimeout: 2000,
          autoplayHoverPause: true,
          navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
          responsive: {
              0: {
                  items: 2
              },
              600: {
                  items: 2
              },
              700: {
                  items: 2
              },
              1000: {
                  items: 4
              },
              1600: {
                  items: 5
              },
              1700: {
                  items: 6
              }
          }
      });
      $('.owl-carousel.owl-two').owlCarousel({
          loop: true,
          margin: 0,
          nav: true,
          dots: false,
          navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
          responsive: {
              0: {
                  items: 2
              },
              600: {
                  items: 3
              },
              700: {
                  items: 4
              },
              1000: {
                  items: 5
              },
              1280: {
                  items: 6
              },
              1600: {
                  items: 7
              },
              1700: {
                  items: 8
              }
          }
      });

      $('.owl-carousel.owl-three').owlCarousel({
          loop: true,
          margin: 15,
          nav: true,
          dots: false,
          navText: ["<i class='bx bx-left-arrow-alt'></i>", "<i class='bx bx-right-arrow-alt'></i>"],
          responsive: {
              0: {
                  items: 1
              },
              600: {
                  items: 2
              },
              1000: {
                  items: 5
              },
              1600: {
                  items: 6
              },
              1700: {
                  items: 7
              }
          }
      })

      $('#banner').owlCarousel({
          loop: true,
          margin: 0,
          nav: true,
          dots: true,
          smartSpeed: 700,
          slideTransition: 'linear',
          navText: ["<i class='bx bx-chevron-left'></i>", "<i class='bx bx-chevron-right'></i>"],
          responsive: {
              0: {
                  items: 1
              },
              600: {
                  items: 1
              },
              1000: {
                  items: 1
              },
              1600: {
                  items: 1
              },
              1700: {
                  items: 1
              }
          }
      })

      $('.input-group').on('click', '.button-plus', function(e) {
          incrementValue(e);
      });

      $('.input-group').on('click', '.button-minus', function(e) {
          decrementValue(e);
      });
  });

  function incrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);

      if (!isNaN(currentVal)) {
          parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
      } else {
          parent.find('input[name=' + fieldName + ']').val(0);
      }
  }


  function decrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);

      if (!isNaN(currentVal) && currentVal > 0) {
          parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
      } else {
          parent.find('input[name=' + fieldName + ']').val(0);
      }
  }
</script>
@endpush
@endsection