@extends('app')

@section('content')

  <div id="top" class="row">

    <div class="col-md-4">
      <div class="h1">Plano De Contas</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">
        <div class="h1">
          <div class="dropdown">
            <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
              Inserir Plano de Custos
              <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" data-toggle="modal" href="#modal_create_grupo">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                  Criar novo Grupo
                </a>
              </li>
              <li role="presentation">
                <a role="menuitem" tabindex="-1" data-toggle="modal" href="#modal_create_item">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                  Criar novo Item
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div> <!-- /#top -->

  @include('flash::message')

  <hr />

  <div class="row">
    <div class="col-md-9">
      <div id="treePlanoDeContas"></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.planodecontas.store', 'method' => 'post']) !!}
  <div class="modal fade" id="modal_create_grupo">
    <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 Grupo de Plano de Contas</h4>
        </div>
        <div class="modal-body">
          {!! Form::hidden('tipo', 'GRUPO') !!}
          <div class="row">
            <div class="col-md-6 form-group">
              {!! Form::label('conta', 'Código da Conta:', ['class' => 'control-label']) !!}
              <div class="input-group">
                <span class="input-group-addon">3.1.2.</span>
                {!! Form::text('conta', null, ['class' => 'form-control somenteNumeros']) !!}
                <span class="input-group-addon">.0000</span>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 form-group">
              {!! Form::label('descricao', 'Descrição:', ['class' => 'control-label']) !!}
              {!! Form::text('descricao', null, ['class' => 'form-control']) !!}
            </div>
          </div>
        </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 Grupo
          </button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  {!! Form::close() !!}


  {!! Form::open(['route' => 'cadastros.planodecontas.store', 'method' => 'post']) !!}
  <div class="modal fade" id="modal_create_item">
    <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 Item de Plano de Contas</h4>
        </div>
        <div class="modal-body">
          {!! Form::hidden('tipo', 'ITEM') !!}
          <div class="row">
            <div class="col-md-12 form-group">
              {!! Form::label('pai_id', 'Grupo da Conta:', ['class' => 'control-label']) !!}
              {!! Form::select('pai_id', \App\Models\Cadastros\PlanoDeContas::enum_grupos() , null , ['class' => 'form-control']) !!}
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 form-group">
              {!! Form::label('conta', 'Código do Item da Conta:', ['class' => 'control-label']) !!}
              <div class="input-group">
                <span class="input-group-addon">3.1.2.XX.</span>
                {!! Form::text('conta', null, ['class' => 'form-control somenteNumeros']) !!}
              </div>
            </div>
            <div class="col-md-6 form-group">
              {!! Form::label('conta_reduzida', 'Código Reduzido da Conta:', ['class' => 'control-label']) !!}
              {!! Form::text('conta_reduzida', null, ['class' => 'form-control somenteNumeros']) !!}
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 form-group">
              {!! Form::label('descricao', 'Descrição:', ['class' => 'control-label']) !!}
              {!! Form::text('descricao', null, ['class' => 'form-control']) !!}
            </div>
          </div>
        </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 Item
          </button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  {!! Form::close() !!}

  @include('_fragments.modal', ['titulo'=>'Plano de Conta'])

@endsection

@section('scripts')
  <script type="text/javascript">
    $( function () {
      var treePlanoDeContas = $( '#treePlanoDeContas' ).treeview( {
        data: '{!! $planoDeContasJSON !!}',
        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 = treePlanoDeContas.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 ) {
        treePlanoDeContas.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();
        treePlanoDeContas.treeview( 'expandAll', {
          levels: levels,
          silent: false /*$( '#chk-expand-silent' ).is( ':checked' )*/
        } );
      } );

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

    } );
  </script>
@endsection