@extends('layouts.admin')

@section('css')
@parent

@stop

@section('content')

<div class="block-header">
	<h2><i class="material-icons">insert_drive_file</i> Gestion avancée du menu</h2>
</div>

<div class="row clearfix">
    <div class="col-xs-12">
      <div class="card">                
        <div class="header">
          @if(sizeof($menus) > 0)<button type="submit" class="btn btn-sm bg-teal waves-effect m-l-15 pull-right" onclick="sendOrder()">Enregistrer les modifications</button>@endif
          <h2>
            <p>Menu du site</p>
            <small>Gérer le menu du site</small>
          </h2>
        </div>        
        @if(sizeof($menus) > 0)
        <div class="body">
          <div class="table">
              <div class="thead">
                      <div class="tableCol">Titre du menu</div>
                      <div class="tableCol">Type du menu</div>
                      <div class="tableCol text-right tableLastCol">Actions</div>
              </div>
              <ol class="sortable">
              @foreach ($menus as $menu)
                  <li id="menuItem_{{ $menu->id }}">
                      <div class="active">
                        <div class="tableCol">{{ $menu->titre }}</div>
                        <div class="tableCol">{{ getMenuType($menu->type) }}</div>
                        <div class="tableCol text-right tableLastCol">
                            <div class="actions">
                                <a href="{{ action('MenuController@delete_menu', array('id' => $menu->id)) }}" title="Supprimer la catégorie" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément ?');" class="col-red"><i class="material-icons">delete_forever</i></a>
                                <a href="{{ action('MenuController@edit_menu', array('id' => $menu->id)) }}" title="Editer la catégorie"><i class="material-icons">edit</i></a>
                            </div>
                        </div>
                      </div>
                      @if(count($menu['children']))
                          <ol>
                              @foreach ($menu['children'] as $firstChild)
                                  <li id="menuItem_{{ $firstChild->id }}">
                                      <div class="tableCol firstchild"><i class="material-icons font-20">subdirectory_arrow_right</i> {{ $firstChild->titre }}</div>
                                      <div class="tableCol">{{ getMenuType($firstChild->type) }}</div>
                                      <div class="tableCol text-right tableLastCol">
                                          <div class="actions">
                                              <a href="{{ action('MenuController@delete_menu', array('id' => $firstChild->id)) }}" title="Supprimer la catégorie" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément ?');" class="col-red"><i class="material-icons">delete_forever</i></a>
                                              <a href="{{ action('MenuController@edit_menu', array('id' => $firstChild->id)) }}" title="Editer la catégorie"><i class="material-icons">edit</i></a>
                                          </div>
                                      </div>
                                      @if(count($firstChild['children']))
                                          <ol>
                                              @foreach ($firstChild['children'] as $secondChild)
                                                  <li id="menuItem_{{ $secondChild->id }}">
                                                      <div class="tableCol secondchild"><i class="material-icons font-20">subdirectory_arrow_right</i> {{ $secondChild->titre }}</div>
                                                      <div class="tableCol">{{ getMenuType($secondChild->type) }}</div>
                                                      <div class="tableCol text-right tableLastCol">
                                                          <div class="actions">
                                                              <a href="{{ action('MenuController@delete_menu', array('id' => $secondChild->id)) }}" title="Supprimer la catégorie" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément ?');" class="col-red"><i class="material-icons">delete_forever</i></a>
                                                              <a href="{{ action('MenuController@edit_menu', array('id' => $secondChild->id)) }}" title="Editer la catégorie"><i class="material-icons">edit</i></a>
                                                          </div>
                                                      </div>
                                                      @if(count($secondChild['children']))
                                                          <ol>
                                                              @foreach ($secondChild['children'] as $thirdChild)
                                                                  <li id="menuItem_{{ $thirdChild->id }}">
                                                                      <div class="tableCol thirdchild"><i class="material-icons font-20">subdirectory_arrow_right</i> {{ $thirdChild->titre }}</div>
                                                                      <div class="tableCol">{{ getMenuType($thirdChild->type) }}</div>
                                                                      <div class="tableCol text-right tableLastCol">
                                                                          <div class="actions">
                                                                              <a href="{{ action('MenuController@delete_menu', array('id' => $thirdChild->id)) }}" title="Supprimer la catégorie" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément ?');" class="col-red"><i class="material-icons">delete_forever</i></a>
                                                                              <a href="{{ action('MenuController@edit_menu', array('id' => $thirdChild->id)) }}" title="Editer la catégorie"><i class="material-icons">edit</i></a>
                                                                          </div>
                                                                      </div>
                                                                  @if(count($thirdChild['children']))
                                                                      <ol>
                                                                  @foreach ($thirdChild['children'] as $lastChild)
                                                                      <li id="menuItem_{{ $lastChild->id }}">
                                                                          <div class="tableCol lastchild"><i class="material-icons font-20">subdirectory_arrow_right</i> {{ $lastChild->titre }}</div>
                                                                          <div class="tableCol">{{ getMenuType($lastChild->type) }}</div>
                                                                          <div class="tableCol text-right tableLastCol">
                                                                              <div class="actions">
                                                                                  <a href="{{ action('MenuController@delete_menu', array('id' => $lastChild->id)) }}" title="Supprimer la catégorie" onclick="return confirm('Etes-vous sûr de vouloir supprimer cet élément ?');" class="col-red"><i class="material-icons">delete_forever</i></a>
                                                                                  <a href="{{ action('MenuController@edit_menu', array('id' => $lastChild->id)) }}" title="Editer la catégorie"><i class="material-icons">edit</i></a>
                                                                              </div>
                                                                          </div>
                                                                      </li>
                                                                  @endforeach
                                                                      </ol>
                                                                  @endif
                                                                  </li>
                                                              @endforeach
                                                          </ol>
                                                      @endif
                                                  </li>
                                              @endforeach
                                          </ol>
                                      @endif
                                  </li>
                              @endforeach
                          </ol>
                      @endif
                  </li>
              @endforeach
              </ol>
              @if(sizeof($menus) > 0)<button type="submit" class="btn btn-sm bg-teal waves-effect m-l-15 pull-right" onclick="sendOrder()">Enregistrer les modifications</button>@endif
            <a href="{{ action('MenuController@edit_menu') }}" data-toggle="tooltip" data-placement="bottom" title="Ajouter une entrée dans le menu" data-original-title="Ajouter une entrée dans le menu" class="btn bg-teal btn-circle-lg waves-effect waves-circle waves-float">
              <i class="material-icons">add</i>
            </a>
          </div>
        </div>
        @else
        <div class="body">
          <a href="{{ action('MenuController@edit_menu') }}" data-toggle="tooltip" data-placement="bottom" title="Ajouter votre première entrée de menu" data-original-title="Ajouter votre première entrée de menu" class="btn bg-teal btn-circle-lg waves-effect waves-circle waves-float">
            <i class="material-icons">add</i>
          </a>
        </div>
        @endif
      </div>
    </div>
</div>
@stop

@section('js')
    @parent
    {!! Html::script("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js") !!}
    
    {!! Html::script("js/jquery.mjs.nestedSortable.js") !!}
    
    <script type="text/javascript">
        $(function() {
        
            $('.sortable').nestedSortable({
        			handle: 'div',
        			items: 'li',
                    maxLevels: 5,
                    toleranceElement: '> div'
        		});

        });

        function sendOrder(){
            hiered = $('ol.sortable').nestedSortable('serialize');

            $.post('{{ action('MenuController@save_order') }}', {order: hiered}, function(data){
                window.location.reload();
            });

        }
        
    </script>
@stop