@extends('layout.base')

@section('page_content')
  <div id="proyectos">
    <div class="ui container">
      <div class="ui header titulo">
        PRODUCTOS
      </div>
      <div class="ui top attached tabular menu">
        <a class="active item" data-tab="todo">
          Todo
        </a>
        @foreach ($segmentos as $segmento)
          <a class="item" data-tab="{{mb_strtolower($segmento->titulo)}}">
            {{$segmento->titulo}}
          </a>
        @endforeach
      </div>
      <div class="ui active tab bottom attached" data-tab="todo">
        <div class="ui four column stackable grid"></div>
      </div>
      @foreach ($segmentos as $segmento)
        <div class="ui tab bottom attached" data-tab="{{mb_strtolower($segmento->titulo)}}">
          <div class="ui four column stackable grid"></div>
        </div>
      @endforeach
    </div>
  </div>
@endsection

@push('styles')
  <link rel="stylesheet" type="text/css" href="{{$urls->styles}}/proyectos.css" />
@endpush

@push('scripts')
  <script type="text/javascript">
    var loaded = {
      todo: false,
      @foreach ($segmentos as $segmento)
        '{{mb_strtolower($segmento->titulo)}}': false,
      @endforeach
    }
    function loadSegmento(segmento) {
      if (loaded[segmento]) {
        return
      }
      var name = segmento
      if (name.indexOf(' ') > -1) {
        name = name.replaceAll(' ', '_')
      }
      var url = '{{$urls->base}}/proyectos/segmento/' + name
      $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
      loaded[segmento] = true
      $.getJSON(url, (data) => {
        $(".tab[data-tab='" + segmento + "']").find('.grid').append(
          $('<div></div>').attr('class', 'ui active centered inline loader')
        )
        $.each(data.proyectos, (i, el) => {
          getProyecto(segmento, el)
        })
      })
    }
    function getProyecto(segmento, id_proyecto) {
      var url = '{{$urls->base}}/proyecto/' + id_proyecto + '/ficha'
      $.ajax({
        url: url,
        success: (data) => {
          if ($(".tab[data-tab='" + segmento + "']").find('.grid').find('.loader').length > 0) {
            $(".tab[data-tab='" + segmento + "']").find('.grid').html('')
          }
          $(".tab[data-tab='" + segmento + "']").find('.grid').append(
            $('<div></div>').attr('class', 'column').append(data)
          )
        }
      })
    }
    $(document).ready(() => {
      loadSegmento('todo')
      $('#proyectos').find('.tabular.menu .item').tab({
        onFirstLoad: (tabPath, parameterArray, historyEvent) => {
          if (tabPath == 'todo') {
            return
          }
          loadSegmento(tabPath)
        }
      })
      if (window.location.hash) {
        var start = (window.location.hash).replace('#', '').replace('%20', ' ')
        $('#proyectos').find('.tabular.menu .item').tab('change tab', start)
      }
    })
  </script>
@endpush