@extends('app')

@section('content')
  
  <div id="top" class="row">
    
    <div class="col-md-4">
      <div class="h1">Centros de Custo da Cadaris</div>
    </div>
    
    <div class="col-md-4">
      <div class="h1">
        <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>
    </div>
    
    <div class="col-md-4">
      <div class="pull-right h1">
        <a class="btn btn-success" data-toggle="modal" href="#modal_create">
          <i class="fa fa-plus" aria-hidden="true"></i>
          Adicionar Centro
        </a>
      </div>
    </div>
  
  </div> <!-- /#top -->
  
  @include('flash::message')
  
  <hr />
  
  <div class="row">
    <div class="col-md-9">
      <div id="treeCentrosDeCustosCadaris"></div>
    </div>
    <div class="col-md-3">
      <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>
  
  {!! Form::open(['route' => 'cadastros.centrosdecustocadaris.store', 'method' => 'post']) !!}
  <div class="modal fade" id="modal_create">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Criar Centros de Custo da Cadaris</h4>
        </div>
        <div class="modal-body">
          @include('Cadastros.CentrosDeCustoCadaris.form')
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <i class="fa fa-ban" aria-hidden="true"></i>
            Cancelar
          </button>
          <button type="submit" class="btn btn-success">
            <i class="fa fa-plus" aria-hidden="true"></i>
            Inserir Centro
          </button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  {!! Form::close() !!}
  
  
  @include('_fragments.modal', ['titulo'=>'Centros de Custos da Cadaris'])

@endsection

@section('scripts')
  <script type="text/javascript">
    $( function () {
      var treeCentrosDeCustosCadaris = $( '#treeCentrosDeCustosCadaris' ).treeview( {
        data: {!! $custosJSON !!},
        levels: 2,
        expandIcon: 'glyphicon glyphicon-chevron-right',
        collapseIcon: 'glyphicon glyphicon-chevron-down',
        showTags: true,
        showBorder: true,
        enableLinks: true,
        // 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 = treeCentrosDeCustosCadaris.treeview( 'search', [ pattern, options ] );
        var output  = '<p>Resultados encontrados: ' + results.length + ' </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 ) {
        treeCentrosDeCustosCadaris.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();
        treeCentrosDeCustosCadaris.treeview( 'expandAll', {
          levels: levels,
          silent: false /*$( '#chk-expand-silent' ).is( ':checked' )*/
        } );
      } );

      $( '#btn-collapse-all' ).on( 'click', function ( e ) {
        treeCentrosDeCustosCadaris.treeview( 'collapseAll', { silent: false /*$( '#chk-expand-silent' ).is( ':checked' )*/ } );
      } );

    } );
  </script>
@endsection