@extends('app')

@section('content')
  <style>
    .fc-RCS {
      line-height : 1.5em;
      min-height  : 40px;
      color       : #337ab7;
    }

    .fc-day-grid-event .fc-content {
      white-space    : normal;
      padding        : 5px !important;
      vertical-align : middle;
      cursor         : pointer;
    }

    span.fc-title {
      text-overflow : ellipsis;
      white-space   : pre-line;
    }

    .list-group-item-text {
      line-height : 1;
    }

    .list-group-item {
      padding : 8px 15px;
    }

    li h4, li h3 {
      margin-top    : 0;
      margin-bottom : 0;
    }

    ul.list-group {
      margin-bottom : 5px;
    }
  </style>

  <div class="row">
    <div class="col-md-12 h2">
      <a href="{{route('funcionarios.show', $func->id)}}" class="btn btn-default">
        <i class="fa fa-arrow-left fa-2x" aria-hidden="true"></i>
      </a>
      Controle de Pontos do Funcionário:
      <small>{{ $func->nome }}</small>
      <div class="btn-group pull-right">
        <a id="btn_add" class="btn btn-success">
          <i class="fa fa-plus"></i> Adicionar Ponto
        </a>
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li role="presentation">
            <a role="menuitem" id="btn_add_lote" tabindex="-1">
              <i class="fa fa-calendar-plus-o"></i> Adicionar Período de Pontos
            </a>
          </li>
          <li role="presentation">
            <a role="menuitem" id="btn_relatório" tabindex="-1" data-toggle="modal" href="#modal-relatorio-de-pontos">
              <i class="fa fa-file-excel-o"></i>
              Relatório de Pontos
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <br>
  @include('flash::message')

  <div class="row">

    <div class="col-md-9 col-xs-12" style="  margin-top: 22px;margin-bottom: 11px;">
      <div id='calendar'></div>
      <br>
    </div>

    <div class="col-md-3 col-xs-12">
      <div class="row">
        <div class="col-md-12">
          <h2>
            Saldo de Horas:
          </h2>
        </div>
      </div>
      <div class="row" style="margin-top: 6px;">
        <div class="col-md-12">
          <ul class="list-group">
            <li class="list-group-item active">
              De
              <strong id="strong_data_inicio">__/__/____</strong>
              até
              <strong id="strong_data_fim">__/__/____</strong>
            </li>
            <li class="list-group-item" id="LI_atrasos">
              <p class="list-group-item-text">
                <strong>Atraso:</strong>
                <span id="atrasos">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_faltas">
              <p class="list-group-item-text">
                <strong>Faltas:</strong>
                <span id="faltas">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_faltasDescontada">
              <p class="list-group-item-text">
                <strong>Faltas Descontadas:</strong>
                <span id="faltasDescontada">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_faltasAtestado">
              <p class="list-group-item-text">
                <strong>Faltas Com Atestado:</strong>
                <span id="faltasAtestado">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_folgas">
              <p class="list-group-item-text">
                <strong>Folgas:</strong>
                <span id="folgas">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_folgasabonada">
              <p class="list-group-item-text">
                <strong>Folgas Abonadas:</strong>
                <span id="folgasabonada">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_hrextras">
              <p class="list-group-item-text">
                <strong>Horas Extras:</strong>
                <span id="hrextras">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_hrextrasremunerada">
              <p class="list-group-item-text">
                <strong>Horas Extras Remuneradas:</strong>
                <span id="hrextrasremunerada">0</span> hrs
              </p>
            </li>
            <li class="list-group-item" id="LI_ferias">
              <p class="list-group-item-text">
                <strong>Gozo de férias:</strong>
                <span id="ferias">0</span> hrs
              </p>
            </li>
          </ul>

          <ul class="list-group">
            <li class="list-group-item" id="LI_vrvt">
              <p class="list-group-item-text">
                <strong>VR/VT Descontado:</strong>
                <span id="vrvt">0</span> dias
              </p>
            </li>
            <li class="list-group-item" id="LI_salarioDescontado">
              <p class="list-group-item-text">
                <strong>Salário Descontado:</strong>
                <span id="salarioDescontado">0</span> dias
              </p>
            </li>
            <li class="list-group-item" id="LI_saldo">
              <h4>
                <strong>Saldo de Horas:</strong>
                <span id="saldo">0</span> hrs
              </h4>
            </li>
          </ul>

          <ul class="list-group">
            <li class="list-group-item" id="LI_acumulado">
              <h3 class="list-group-item-heading">
                <strong>Saldo de Horas Acumulado:</strong>
                <br>
                <span id="acumulado">0</span> hrs
              </h3>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <br><br>
  </div>

  <div class="modal fade" id="modal_form">
    <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" id="modal_title">modal_title</h4>
        </div>
        <div class="modal-body">
          {{ Form::hidden('form_id', '', ['id'=>'form_id']) }}
          <div class="row">
            <div class="col-md-12 form-group">
              {{ Form::label('tipo', 'Tipo de Evento:', ['class' => 'control-label']) }}
              {{ Form::select('tipo', \App\Models\Cadastros\ControleDePontos::enum_tipos(), null, ['id'=>'form_tipo', 'placeholder' => '-- Selecione um Tipo de Evento --','class' => 'form-control', 'required'=>'']) }}
            </div>
          </div>

          <div class="row" id="modal_row_unico">
            <div class="col-md-6 form-group">
              {{ Form::label('data', 'Data do Evento:', ['class' => 'control-label']) }}
              {{ Form::date('data', null, ['id'=>'form_data', 'class' => 'form-control', 'required'=>'']) }}
            </div>
            <div class="col-md-6 form-group">
              {{ Form::label('horas', 'Total de horas do Evento:', ['class' => 'control-label']) }}
              {{ Form::time('horas', null, ['id'=>'form_horas', 'class' => 'form-control clockpicker', 'required'=>'']) }}
            </div>
          </div>

          <div class="row" id="modal_row_lote">
            <div class="col-md-4 form-group">
              {{ Form::label('data_inicio', 'Data Inicial:', ['class' => 'control-label']) }}
              {{ Form::date('data_inicio', null, ['id'=>'form_data_inicio', 'class' => 'form-control', 'required'=>'']) }}
            </div>
            <div class="col-md-4 form-group">
              {{ Form::label('data_fim', 'Data Final:', ['class' => 'control-label']) }}
              {{ Form::date('data_fim', null, ['id'=>'form_data_fim', 'class' => 'form-control', 'required'=>'']) }}
            </div>
            <div class="col-md-4 form-group">
              {{ Form::label('', 'Hora Diaria:', ['class' => 'control-label']) }}
              {{ Form::text('', '08:00', ['class' => 'form-control', 'readonly'=>'', 'disabled'=>'' ]) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-12 grupo">
              <p class="chave">Funcionário</p>
              <p class="valorReadOnly">{{ $func->nome }}</p>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12 form-group">
              {{ Form::label('aprovador_id', 'Aprovador:', ['class' => 'control-label']) }}
              {{ Form::select('aprovador_id', \App\Models\Cadastros\Funcionarios::possiveis_aprovadores(), null, ['id'=>'form_aprovador_id', 'placeholder' => '-- Selecione um Aprovador --','class' => 'form-control', 'required'=>'']) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-12 form-group">
              {{ Form::label('obs', 'Observações:', ['class' => 'control-label']) }}
              {{ Form::textarea('obs', null, ['id'=>'form_obs','class' => 'form-control','size' => '30x3', 'style'=>'resize: vertical', 'placeholder' => 'Digite observações caso necessário']) }}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger pull-left" id="modal_delete">
            <i class="fa fa-trash"></i> Deletar Evento
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <i class="fa fa-ban"></i> Cancelar
          </button>
          <button type="button" class="btn btn-success" id="modal_salvar">
            modal_salvar
          </button>
        </div>
      </div>
    </div>
  </div>

  {!! Form::open(['route' => ['controledeponto.relatorio_individual', $func->id], 'method' => 'get', 'target'=>'_blank']) !!}
  <div class="modal fade" id="modal-relatorio-de-pontos">
    <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">Relatório de pontos deste Funcionário</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 grupo">
              <p class="chave">Funcionário</p>
              <p class="valorReadOnly">{{ $func->nome }}</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6 form-group">
              {!! Form::label('dt_inicio', 'Data Inicial', ['class' => 'control-label']) !!}
              {!! Form::date('dt_inicio', Carbon\Carbon::now()->subMonth(1)->day(20)->toDateString(), ['class'=>'form-control']) !!}
            </div>
            <div class="col-md-6 form-group">
              {!! Form::label('dt_fim', 'Data Final', ['class' => 'control-label']) !!}
              {!! Form::date('dt_fim', Carbon\Carbon::now()->day(19)->toDateString(), ['class'=>'form-control']) !!}
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            Fechar
          </button>
          <button type="submit" class="btn btn-primary">
            <i class="fa fa-file-excel-o" aria-hidden="true"></i>
            Gerar Relatório
          </button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  {!! Form::close() !!}


@endsection
@section('scripts')
  @include('Cadastros.ControleDePontos.index_scripts')
@endsection