@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')

@section('content')
    @if ((session('theme') && session('theme') == 'theme2') || $allsettings['theme'] == 'two')
        @include('front.home.themetwo')
    @else
        @if (Route::is('shop'))
            @include('front.home.shop')
        @else
            @include('front.home.themeone')
        @endif

    @endif
@endsection
@section('head-content')
  <link href="https://fonts.googleapis.com/css2?family=Allison&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swap" rel="stylesheet">

@endsection
@push('post_script')
 <script type="text/javascript">
    $(function() {
      $('#homeLength').on('keyup, blur', function() {
        var lgt = $("input:radio[name=length]:checked").val();
        $('#donate_amount').val($(this).val() + ' '+lgt);
      });
      $("input:radio[name=length]").on("click",function() {
        $('#homeLength').blur();
      });
    });
 </script>
<script type="text/javascript">
  function checkLtr()
  {
      if($('.direction-ltr').length) {
        return true
      } else {
        return false
      }
  }
  function owlSlider() {
      console.log("owlSlider");
      var bigimage = $("#big");
      var thumbs = $("#thumbs");
      //var totalslides = 10;
      var syncedSecondary = true;

      bigimage.owlCarousel({
              items: 1,
              slideSpeed: 2000,
              rtl: !checkLtr(),
              nav: true,
              autoplay: true,
              dots: false,
              loop: true,
              responsiveRefreshRate: 200,
              navText: false,
          }).on("changed.owl.carousel", syncPosition);

      thumbs.on("initialized.owl.carousel", function() {
              thumbs
                  .find(".owl-item")
                  .eq(0)
                  .addClass("current");
          }).owlCarousel({
              items: 6,
              dots: false,
              nav: true,
              rtl: !checkLtr(),
              navText: [
                checkLtr() ? '<i class="fa fa-chevron-left" aria-hidden="true"></i>' : '<i class="fa fa-chevron-right" aria-hidden="true"></i>',
                checkLtr() ?'<i class="fa fa-chevron-right" aria-hidden="true"></i>' : '<i class="fa fa-chevron-left" aria-hidden="true"></i>',
              ],
              smartSpeed: 200,
              slideSpeed: 500,
              slideBy: 1,
              responsiveRefreshRate: 100,

              responsiveClass:true,
              responsive:{
                  0:{
                      items:2,
                      nav:true
                  },
                  576:{
                      items:3,
                      nav:false
                  },
                  767:{
                      items:6,
                      nav:true,
                      loop:false
                  }
              }
          }).on("changed.owl.carousel", syncPosition2);

      function syncPosition(el) {
          //if loop is set to false, then you have to uncomment the next line
          //var current = el.item.index;

          //to disable loop, comment this block
          var count = el.item.count - 1;
          var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

          if (current < 0) {
              current = count;
          }
          if (current > count) {
              current = 0;
          }
          //to this
          thumbs.find(".owl-item").removeClass("current").eq(current).addClass("current");
          var onscreen = thumbs.find(".owl-item.active").length - 1;
          var start = thumbs.find(".owl-item.active").first().index();
          var end = thumbs.find(".owl-item.active").last().index();

          if (current > end) {
              thumbs.data("owl.carousel").to(current, 100, true);
          }
          if (current < start) {
              thumbs.data("owl.carousel").to(current - onscreen, 100, true);
          }
      }

      function syncPosition2(el) {
          if (syncedSecondary) {
              var number = el.item.index;
              bigimage.data("owl.carousel").to(number, 100, true);
          }
      }

      thumbs.on("click", ".owl-item", function(e) {
          e.preventDefault();
          var number = $(this).index();
          bigimage.data("owl.carousel").to(number, 300, true);
      });
  }
  $(document).on('click', '#gallery-modal', function(event) {
      event.preventDefault();
      $('#exampleModal').modal('show');
      let href = $(this).attr('data-attr');
      $.ajax({
          url: href,
          beforeSend: function() {
              $('#loader').show();
              $('.carousel-thumb').html('');
          },
          // return the result
          success: function(result) {
              var bodyData = '';
              var html = '';
              html = '<div id="big" class="owl-carousel owl-theme">';
              $.each(result, function(index, row) {
                  console.log(row.image);
                  html += '<div class="item">';
                  html += '<img src="';
                  html += row.image_larg;
                  html += '" alt="Question"/></div>';

              })
              html += '</div>';
              html += '<div id="thumbs" class="owl-carousel owl-theme">';
              $.each(result, function(index, row) {
                  console.log(row.image);
                  html += '<div class="item">';
                  html += '<img src="';
                  html += row.image_small;
                  html += '" alt="Question"/></div>';

              })
              html += '</div>';
              $('.carousel-thumb').append(html);
          },
          complete: function() {


              owlSlider();
          },
          error: function(jqXHR, testStatus, error) {
              console.log(error);
              alert("Page " + href + " cannot open. Error:" + error);
              $('#loader').hide();
          },
          timeout: 8000
      })
  });
</script>
@endpush