{{-- Extends layout --}}
@extends('front.layouts.app')

{{-- Content --}}
@section('content')


    <div class="col-lg-12">
        @if (isset($page_title))
            <nav class="navbar navbar-expand-lg navbar-light p-0">
                <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ $page_title }}</h5>
            </nav>
        @endif

        <!-- Tab Menu -->
        @php $lastDetermination = $most_voted->get(0); @endphp
        <nav class="navbar navbar-expand-lg navbar-light p-0">
            <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ $lastDetermination->category->name??NULL }}</h5>
        </nav>

        <div class="line line-xs line-dark"></div>

        <!-- Tab Content -->

        <div class="tab-content" id="nav-tabContent">
            <!-- Tab Content 1 -->
            <div class="tab-pane fade show active" id="nav-outdoor" role="tabpanel" aria-labelledby="nav-outdoor-tab">
                <div class="row col-mb-30 mb-0">
                    <div class="col-lg-8">

                        <div class="mb-3">
                            <a class="home_categories" title="{{ __('Kuşlar') }}" href="{{ route('category.determinations', ['category_id' => 9]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/1.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Memeliler') }}" href="{{ route('category.determinations', ['category_id' => 8]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/2.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Kelebekler') }}" href="{{ route('category.determinations', ['category_id' => 6]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/3.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Sürüngenler') }}" href="{{ route('category.determinations', ['category_id' => 12]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/4.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Kurbağa ve Semenderler') }}" href="{{ route('category.determinations', ['category_id' => 7]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/5.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Yusufçuk/Kızılböcekleri') }}" href="{{ route('category.determinations', ['category_id' => 11]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/6.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Balıklar') }}" href="{{ route('category.determinations', ['category_id' => 17]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/7.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Ağaçsı') }}" href="{{ route('category.determinations', ['category_id' => 14]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/8.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Otsu') }}" href="{{ route('category.determinations', ['category_id' => 3]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/9.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Çalımsı') }}" href="{{ route('category.determinations', ['category_id' => 16]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/10.png') }}' /></a>
                            <a class="home_categories" title="{{ __('Diğer') }}" href="{{ route('category.determinations', ['category_id' => 10]) }}"><img class='pr-2'
                                    src='{{ asset('images/icons/animals/12.png') }}' /></a>
                        </div>

                        @component('front.components.determination_carousel',['most_voted'=>$most_voted])
                        @endcomponent


                    </div>
                    <div class="col-lg-4 grey-bg">
                        <nav class="navbar navbar-expand-lg navbar-light p-0">
                            <h5 class="mb-0 pr-2 pt-3 ls1  font-weight-bold">{{ __('Neler Oluyor?') }}</h5>
                        </nav>
                        <div class="line line-xs line-dark"></div>

                        @component('front.components.home_updates', ['updates' => $updates])
                        @endcomponent
                        <div id="site_updates"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- Tab End -->

    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-4">
                <nav class="navbar navbar-expand-lg navbar-light p-0 mt-2">
                    <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ __('Haberler') }}</h5>
                </nav>
                <div class="line line-xs line-dark"></div>
                @component('front.components.carousel_haberler', ['haberler' => $news, 'carousel_id' => 'news'])
                @endcomponent
            </div>
            <div class="col-lg-4">
                <nav class="navbar navbar-expand-lg navbar-light p-0 mt-2">
                    <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ __('Yarışmalar') }}</h5>
                </nav>
                <div class="line line-xs line-dark"></div>

                <div id="tabs" style="height:270px" class="overflow-auto">
                    <ul>
                      <li><a href="#tabs-1" >{{ __("Kuşlar") }}</a></li>
                      <li><a href="#tabs-2">{{ __("Kelebekler") }}</a></li>
                    </ul>
                    <div id="tabs-1">
                      @component('front.components.home_quiz_stats',['stats'=>$quiz_kuslar])
                      @endcomponent
                    </div>
                    <div id="tabs-2">
                        @component('front.components.home_quiz_stats',['stats'=>$quiz_kelebekler])
                        @endcomponent
                    </div>
                  </div>
            </div>
            <div class="col-lg-4  grey-bg">
                <nav class="navbar navbar-expand-lg navbar-light p-0 mt-2">
                    <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ __('Son Güncellenen Türler') }}</h5>
                </nav>
                <div class="line line-xs line-dark"></div>
                @component('front.components.home_latest_species', ['species' => $last_species])
                @endcomponent
            </div>
        </div>
    </div>
    <div class="clear"></div>

    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-8">
                @foreach ($categories as $category)
                    <nav class="navbar navbar-expand-lg navbar-light p-0 mt-3">
                        <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ $category->title }}</h5>
                        <a style="" href="{{route('category.determinations', ['category_id' =>$category->id]) }}"> ( {{ __('Tümünü Göster') }} ) </a>
                    </nav>
                    <div class="line line-xs line-dark"></div>
                    @php
                        $boxes = App\Classes\ChildDeterminations::get($category->id);
                    @endphp
                    @component('front.components.home_determination_boxes', ['determinations' => $boxes])
                    @endcomponent
                @endforeach
            </div>
            <div class="col-lg-4  grey-bg">
                <nav class="navbar navbar-expand-lg navbar-light p-0 mt-3">
                    <h5 class="mb-0 pr-2 ls1  font-weight-bold">{{ __('Acaba Nedir') }}</h5>
                    <a style="" href="{{ route('det.acaba_nedir') }}"> ( {{ __('Tümünü Göster') }} ) </a>

                </nav>
                <div class="line line-xs line-dark"></div>
                @component('front.components.determination_boxes_acaba_nedir', ['determinations' => $acaba_nedir,
                    'carousel_id' => 'acaba_nedir '])
                @endcomponent
            </div>
        </div>
    </div>


    <div class="col-lg-12">

    </div>
    <div class="col-lg-12">

    </div>



@endsection

@section('scripts2')
<script src="https://pagination.js.org/dist/2.1.5/pagination.min.js"></script>
<link href="https://pagination.js.org/dist/2.0.7/pagination.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>




$('#site_updates').pagination({
        dataSource: [
            1,2,3,4,5,6,7,8,9,10
        ],
        pageSize: 1,
        showPrevious: false,
        showNext: false,
        callback: function(data, pagination) {
            updates_paginator_template(data);
        }
    })



function updates_paginator_template(data){
    for(i=0;i<=9;i++)
    {
        $("#updates_"+i).hide();
    }

    $("#updates_"+(data-1)).show();
}

  $( function() {
    $( "#tabs" ).tabs(
        { active: 0 }
    );
  } );

</script>



<script>

$(document).ready(function() {
  var bigimage = $("#big");
  var thumbs = $("#thumbs");
  //var totalslides = 10;
  var syncedSecondary = true;

  bigimage
    .owlCarousel({
    items: 1,
    slideSpeed: 2000,
    autoplay: true,
    dots: false,
    loop: true,
    responsiveRefreshRate: 200
    /*nav: true,
    navText: [
      '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
      '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
    ]*/
  })
    .on("changed.owl.carousel", syncPosition);

  thumbs
    .on("initialized.owl.carousel", function() {
    thumbs
      .find(".owl-item")
      .eq(0)
      .addClass("current");
  })
    .owlCarousel({
    items: 4,
    dots: true,
    /*nav: false,
    navText: [
      '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
      '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
    ],*/
    smartSpeed: 200,
    slideSpeed: 500,
    slideBy: 4,
    responsiveRefreshRate: 100
  })
    .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);
  });
});

$( function() {
    $('.home_categories').tooltip();
  } );

</script>
@endsection