@extends('app')

@section('content')
  
  <div id="top" class="row">
    
    <div class="col-sm-3">
      <h2>Clientes</h2>
    </div>
    
    <div class="col-sm-6">
      <form action="" method="get">
        <div class="input-group h2" style="width: 100%">
          <input name="nome" class="form-control" id="input-search" type="text" placeholder="Pesquisar por nome"
                 value="{{ \Illuminate\Support\Facades\Input::get('nome','') }}">
          <div class="input-group-btn">
            
            <div class="btn-group">
              
              <button tabindex="-1" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
              </button>
              <div id="avancado" class="dropdown-menu dropdown-menu-right" style="padding: 10px 30px; width: 350px">
                <div id="avancado_form">
                  
                  <div class="row">
                    <div class="col-xs-10">
                      <h4>Pesquisa Avançada</h4>
                    </div>
                    <div class="col-xs-2 h4 text-right">
                      <a href="#" id="btn-clear-search" class="text-danger" data-toggle="tooltip" data-placement="top"
                         title="Limpar Pesquisa">
                        <i class="fa fa-times-circle fa-lg"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <button class="btn btn-primary" {{--type="submit"--}}id="btn-search">
              &nbsp;&nbsp;&nbsp;<i class="fa fa-search" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;
            </button>
          </div>
        </div>
      </form>
    </div>
    
    @can(CRP::P_Cadastro_edit)
      <div class=" col-sm-3 h2">
        <div class="pull-right">
          <div class="btn-group" role="group">
            <a class="btn btn-success" href="{{ route('clientes.create') }}">
              <i class="fa fa-plus" aria-hidden="true"></i> Novo Cliente
            </a>
            <div class="dropdown btn-group" role="group">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="{{ route('export_contatos_clientes') }}" target="_blank">
                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>
                    Exportar Contatos dos Clientes
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    @endcan
  
  </div> <!-- /#top -->
  
  @include('flash::message')
  
  <hr />
  
  <div class="row">
    {{--<div class="col-md-1"></div>--}}
    <div class="col-md-10">
      <div id="treeClientes"></div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <button type="button" class="btn btn-success form-control" id="btn-expand-all">
          <i class="fa fa-expand" aria-hidden="true"></i> &nbsp;
          Expandir Todos
        </button>
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-danger form-control" id="btn-collapse-all">
          <i class="fa fa-compress" aria-hidden="true"></i> &nbsp;
          Comprimir Todos
        </button>
      </div>
      <div id="search-output"></div>
    </div>
  </div>
  
  @include('_fragments.modal', ['titulo'=>'Cliente'])
@endsection

@section('scripts')
  <script type="text/javascript">
    $( function () {
      var treeClientes = $( '#treeClientes' ).treeview( {
        data: {!! $clientesJSON !!},//defaultData, //alternateData,//defaultData, // dados
        levels: 1, // collapsed=1, expanded=99
        expandIcon: 'glyphicon glyphicon-chevron-right', // encolhido
        collapseIcon: 'glyphicon glyphicon-chevron-down', // expandido
        //  nodeIcon: 'glyphicon glyphicon-bookmark', // icone do item
        showTags: true,  // contagem
        showBorder: true,
        enableLinks: true, // links
        // cores
        //  color: "#636b6f",
        //  backColor: "purple",
        //  onhoverColor: "orange",
        //  borderColor: "red",
        //  highlightSelected: true,
        //  selectedColor: "yellow",
        //  selectedBackColor: "darkorange",
      } );

      var search = function ( e ) {
        var pattern = $( '#input-search' ).val();
        var options = {
          ignoreCase: true, //$( '#chk-ignore-case' ).is( ':checked' ),
          exactMatch: false, // $( '#chk-exact-match' ).is( ':checked' ),
          revealResults: true //$( '#chk-reveal-results' ).is( ':checked' )
        };
        var results = treeClientes.treeview( 'search', [ pattern, options ] );
        var output = '<p>' + results.length + ' matches found</p>';
        $.each( results, function ( index, result ) {
          output += '<p>- ' + result.text + '</p>';
        } );
        $( '#search-output' ).html( output );
      };
      
      $( '#btn-search' ).on( 'click', search );
      $( '#input-search' ).on( 'keyup', search );
      
      $( '#btn-clear-search' ).on( 'click', function ( e ) {
        treeClientes.treeview( 'clearSearch' );
        $( '#input-search' ).val( '' );
        $( '#search-output' ).html( '' );
        e.stopPropagation();
      } );
      
      // Expand/collapse all
      $( '#btn-expand-all' ).on( 'click', function ( e ) {
        var levels = 99;//$( '#select-expand-all-levels' ).val();
        treeClientes.treeview( 'expandAll', {
          levels: levels,
          silent: false /*$( '#chk-expand-silent' ).is( ':checked' )*/
        } );
      } );
      
      $( '#btn-collapse-all' ).on( 'click', function ( e ) {
        treeClientes.treeview( 'collapseAll', { silent: false /*$( '#chk-expand-silent' ).is( ':checked' )*/ } );
      } );
      
    } );
  </script>
@endsection