@extends('layouts.app')

@section('oncss')
<style>


</style>
@endsection

@section('navBar')

@endsection


@section('title')


@endsection

@section('onbody')
<div id="catalogo-page">

  <div class="cat-header">
    <div class="back-imagen">
      <div class="background w3-grayscale-max" style="background: url('/imagenes/familias/chocolate.jpg'); background-size:cover;background-position:50% 50%;">
      </div>

      <div class="imagen animated zoomIn">
        <img src="/imagenes/familias/chocolate.jpg" />
      </div>

      <div class="texto-fijo"><span>catálogo</span></div>

      <div class="titulo-cat"><span>{{$familiaSelected or $familias[001]['nombre']}}</span></div>

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

@endsection

@section('after-header')


  <div class="cat-articulos">
    <div class="left-familias">
      <div class="menu-familias">
        <ul>
            @foreach ($familias as $key=>$familia)

            <li><a href="">{{$familia['nombre']}}</a></li>
              <ul class="subfamilia @if ($familiaSelected == $familia['nombre']) open @endif"><!-- TODO if family is selected show subfamily -->
                @foreach ($subfamilias as $subkey => $subfamilia)
                  @if($subfamilia['familia'] == $key)
                  <li><a href="#{{$subfamilia['link']}}">{{ $subfamilia['nombre'] }}</a></li>
                  @endif
                @endforeach
              </ul>
            @endforeach


        </ul>

      </div>
    </div>


    <div class="articulos">

      @foreach ($subfamilias as $keySub => $subfamilia)

        @if($subfamilia['familia'] == $familiaSelected)

          <div id="{{$subfamilia['link']}}" class="subfamilia">
            <div class="subfamilia-titulo">
              <span>{{$familiaSelected}} > {{$subfamilia['nombre']}}</span>
            </div>

            <div class="container">

              @foreach($articulos as $articulo)
                            @if($keySub == $articulo->subfamilia)

              <div class="container">

                  <div class="articulo">
                    <div class="back-imagen">
                      <div class="background w3-grayscale-max" style="background: url('{{$articulo->main_img}}'); background-size:cover;background-position:50% 50%;">
                      <div class="back-overlay" onclick="location.href='/articulos/{{ $articulo->id }}/'">
                        <span>
                          <i class="far fa-plus-square"></i>
                        </span>
                      </div>
                    </div>
                    </div>
                    <div class="name">
                      {{ $articulo->nombre }}
                    </div>
                  </div>

              </div>
              @endif
              @endforeach
            </div>


              <div class="clearing"></div>
          </div>

        @else

          <div id="{{$subfamilia['link']}}" class="subfamilia">
            <div class="subfamilia-titulo">
              <span>{{$familias[001]['nombre']}} > {{$subfamilia['nombre']}}</span>
            </div>

            @foreach($articulos as $articulo)
                        @if($keySub == $articulo->subfamilia)

            <div class="container">

                <div class="articulo">
                  <div class="back-imagen">
                    <div class="background w3-grayscale-max" style="background: url('{{$articulo->main_img}}'); background-size:cover;background-position:50% 50%;">
                    <div class="back-overlay" onclick="location.href='/articulos/{{ $articulo->id }}/'">
                      <span>
                        <i class="far fa-plus-square"></i>
                      </span>
                    </div>
                  </div>
                  </div>
                  <div class="name">
                    {{ $articulo->nombre }}
                  </div>
                </div>

            </div>
            @endif
            @endforeach


              <div class="clearing"></div>
          </div>


        @endif
      @endforeach


    </div>

    <div class="clearing"></div>
  </div>


@endsection

@section('contact')

@endsection

@section('onjs')

<script>

// JQUERY Functions

$(document).ready(function() {
  $('.open-menu').on('click', function() {
     $('.overlay').addClass('open');
  });


  $('.close-menu').on('click', function() {
    $('.overlay').removeClass('open');
  });

  $('div.left-familias ul li a').on('click', function(e) {
    e.preventDefault();

    var effect = "bounceIn";

    if($(this).hasClass("isopen")) {
      $(this).parent().next('ul').removeClass('open animated '+ effect);
      $(this).removeClass('isopen');
    } else {
      $('div.cat-articulos div.left-familias ul ul').removeClass('open animated '+ effect);
      $('div.left-familias ul li a').removeClass('isopen');

      $(this).parent().next('ul').addClass('open animated '+ effect);
      $(this).addClass('isopen');
    }
  });

  $('div.left-familias ul ul li a').on('click', function(e) {
    e.preventDefault();
    $(this).parent().parent().parent().next('li a').click();
    $([document.documentElement, document.body]).animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 600);
  });

});

// VUE COMPONENTS
//

var articulos = new Waypoint({
  element: $('.cat-articulos'),
  handler: function(direction) {
    if(direction == 'down') {
      $(".cat-header").css({ "height" : "80vh"});
      $(".cat-header div.back-imagen").css({ "min-height" : "80vh"});

      $("#header").css({ "height" : "80vh", "transition" : "0.5s"});
      $("#header").css({ "min-height" : "80vh", "transition" : "0.5s"});

      setTimeout(function() {

        $([document.documentElement, document.body]).animate({
          scrollTop: $(".cat-articulos").offset().top
        }, 1000);

        $('.cat-articulos div.left-familias div.menu-familias').css({"display" : "block"});

      },200);
    }


  },
  offset: '90%'
});

var header = new Waypoint({
  element: $('.cat-articulos'),
  handler: function(direction) {

    if(direction == 'up') {
      $('.cat-articulos div.left-familias div.menu-familias').css({"display" : "none"});
      $("#header").css({ "height" : "100vh"});
      $("#header").css({ "min-height" : "100vh"});
      $(".cat-header").css({ "height" : "100vh"});
      $(".cat-header div.back-imagen").css({ "min-height" : "100vh"});

      $([document.documentElement, document.body]).animate({
        scrollTop: $(".back-imagen").offset().top
      }, 1000);

    }

  },
  offset: '20%'
});

var footer = new Waypoint({
  element: $('#footer'),
  handler: function(direction) {

    if(direction == 'down') {

      $([document.documentElement, document.body]).animate({
        scrollTop: $("#footer").offset().top
      }, 500);
      $('.cat-articulos div.left-familias div.menu-familias').css({"display" : "none"});
    } else {
      $('.cat-articulos div.left-familias div.menu-familias').css({"display" : "block"});
    }



  },
  offset: '80%'
});

</script>
@endsection