@extends('app')

@section('content')

  <div class="row">
    <div class="col-md-12 form-group">
      <div class="h1">
        <i class="fa fa-line-chart" aria-hidden="true"></i>
        Fluxo de Caixa
        <a class="btn btn-success pull-right" id="btn_abrir_modal">
          <i class="fa fa-archive" aria-hidden="true"></i>
          Acessar Período do Caixa
        </a>
      </div>
    </div>
  </div>

  @include('flash::message')


  <div class="row">
    <div class="col-md-12 form-group">
      <div id="Calendar" style="overflow-y: hidden;"></div>
    </div>
  </div>





  <div class="modal fade" id="modal_acessar_caixa">
    <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">
            <i class="fa fa-archive" aria-hidden="true"></i>
            Selecione o Período do Caixa
          </h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-6 form-group">
              {!! Form::label('inicio', 'Início:', ['class'=>'control-label']) !!}
              {!! Form::text('inicio', null, ['class'=>'form-control', 'id'=>'modal_input_inicio']) !!}
            </div>
            <div class="col-md-6 form-group">
              {!! Form::label('fim', 'Fim:', ['class'=>'control-label']) !!}
              {!! Form::text('fim', null, ['class'=>'form-control', 'id'=>'modal_input_fim']) !!}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
          <button type="button" class="btn btn-primary" id="modal_btn_acessar_caixa">Acessar Período</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

@endsection
@section('scripts')
  <script type="text/javascript">

    function openPeriodo( event ) {
      console.log( 'event', event );
      $( '#modal_input_inicio' ).datepicker( 'update', event ? event.startDate : '' );
      $( '#modal_input_fim' ).datepicker( 'update', event ? event.endDate : '' );
      $( '#modal_acessar_caixa' ).modal();
    }

    $( function () {
      $( '#btn_abrir_modal' ).on( 'click', function () {
        openPeriodo( {
          startDate: '{{\Carbon\Carbon::now()->format('d/m/Y')}}',
          endDate: '{{\Carbon\Carbon::now()->format('d/m/Y')}}'
        } );
      } );

      $( '#modal_btn_acessar_caixa' ).on( 'click', function () {
        var ini = $( '#modal_input_inicio' ).val().replace( /\//g, '-' );
        var fim = $( '#modal_input_fim' ).val().replace( /\//g, '-' );
        var url = '{{route('financeiro.caixa.show_periodo', 'AAA')}}'
          .replace( 'AAA', ini + ':' + fim );
        window.open( url, '_self' );
      } );

      $( '#modal_input_inicio' ).datepicker( {
        format: 'dd/mm/yyyy',
        language: 'pt-BR'
      } );
      $( '#modal_input_fim' ).datepicker( {
        format: 'dd/mm/yyyy',
        language: 'pt-BR'
      } );

      $( '#Calendar' ).calendar( {
        enableContextMenu: false,
        enableRangeSelection: true,
        language: 'pt',
        style: 'background',
        selectRange: function ( e ) {
          openPeriodo( { startDate: e.startDate, endDate: e.endDate } );
        },
        dataSource: []
      } );

    } );
  </script>

@endsection