@extends('../layouts.app')

<link rel="stylesheet" href="{{ asset('argon') }}/vendor/select2/dist/css/select2.min.css">
<style type="text/css">
    .select2-container .select2-selection--single {
        height: unset !important;
    }

    .blog .carousel-indicators {
        left: 0;
        top: auto;
        bottom: -40px;
    }

    /* The colour of the indicators */
    .blog .carousel-indicators li {
        background: #a3a3a3;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

    .blog .carousel-indicators .active {
        background: #707070;
    }
</style>
@section('content')
@include('../layouts.headers.cards_prod')

@include('../layouts.footers.auth')

@can('visualizar-contas-a-receber')
  <div class="container-fluid mt--7">
    <div class="row">
      <div class="col-xl-12 order-xl-1">
        <div class="card bg-secondary shadow">
          <div class="card-header bg-white border-0">
            <div class="row align-items-center">
              <div class="col-8">
                <h3 class="mb-0">{{ __('Contas à receber') }}</h3>
              </div>
              <div class="col-4 text-right">
                <a href="{{route('contas_receber')}}" class="btn btn-sm btn-primary">{{ __('Voltar a Lista') }}</a>
              </div>
            </div>
          </div>
          <div class="card-body">
            <form method="post" enctype="multipart/form-data" action="{{route('contas_receber.salvar')}}" id="formulario_cadastrar">
              <!-- Passando o Token -->
              {{csrf_field()}}
              <h6 class="heading-small text-muted mb-4">Informações</h6>
              <div class="form-row">
                <div class="col-md-3 col-lg-3 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Situação</label>
                    <select class="form-control form-control-alternative" id="situacao_receber" name="situacao_receber" placeholder="situação">
                      <option value="ABERTA" selected readonly>EM ABERTO</option>
                    </select>
                  </div>
                </div>
                <div class="col-md-9 col-lg-9 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Descrição</label>
                    <input type="text" class="form-control form-control-alternative mb-2" id="descricao_receber" name="descricao_receber" placeholder="Descrição">
                    <small class="text-danger campo-obrigatorio font-weight-bold">* Preenchimento obrigatório</small>
                  </div>
                </div>                
              </div>
              <div class="form-row">
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Emitido</label>
                    <input type="date" class="form-control form-control-alternative mb-2" id="emitido_receber" name="emitido_receber" min="{{$date}}" value="{{$date}}" placeholder="" readonly>
                  </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Vencimento</label>
                    <input type="date" class="form-control form-control-alternative mb-2" id="vencimento_receber" name="vencimento_receber" min="{{$date}}" placeholder="">
                    <small class="text-danger campo-obrigatorio font-weight-bold">* Preenchimento obrigatório</small>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="col-md-3 col-lg-3 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="forma_pagamento">Forma de pagamento</label>
                    <select class="form-control form-control-alternative" id="forma_pagamento" name="forma_pagamento" placeholder="Tipo de Conta">
                      <!-- <option value="1">Dinheiro</option> -->
                      <!-- <option value="11">Boleto</option> -->
                      <!-- <option value="2">Cheque á vista</option>
                           <option value="3">Cheque pré datado</option> -->
                      <option value="5">Cartão de crédito</option>
                      <!-- <option value="6">Cartão de débito</option> -->
                      <!-- <option Value="4">Transferência</option> -->
                    </select>
                  </div>
                </div>
                <div class="col-md-3 col-lg-3 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Formas de parcelamento</label>
                    <select class="form-control form-control-alternative" id="forma_parcelamento" name="forma_parcelamento">
                      <option value="1" selected="on">À vista</option>
                      <option value="2">2X</option>
                      <option value="3">3X</option>
                      <option value="4">4X</option>
                      <option value="5">5X</option>
                      <option value="6">6X</option>
                      <option value="7">7X</option>
                      <option value="8">8X</option>
                      <option value="9">9X</option>
                      <option value="10">10X</option>
                      <option value="11">11X</option>
                      <option value="12">12X</option>
                    </select>
                  </div>                 
                </div>
                <div class="col-md-3 col-lg-3 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Especificação do pagamento</label>
                    <select class="form-control form-control-alternative" id="tag_receber" name="tag_receber" placeholder="Tipo de Conta">
                      <option value="Venda">Vendas</option>
                      <option value="Serviço">Serviços</option>                      
                    </select>
                  </div>                 
                </div>
                <div class="col-md-3 col-lg-3 col-sm-12">
                  <div class="form-group">
                    <label class="form-control-label" for="input-name">Valor</label>
                    <input type="number" step=".01" class="form-control form-control-alternative mb-2" id="valor_receber" name="valor_receber" min="0.00" placeholder="">
                    <small class="text-danger campo-obrigatorio font-weight-bold">* Preenchimento obrigatório</small>
                  </div>                  
                </div>
              </div>              
              <div class="form-row">
                <select data-toggle="select" class="w-100 id_cliente_fk form-control" id="id_cliente_fk" name='id_cliente_fk'>
                  <option disabled="on" selected="on">Pesquise o nome de um cliente</option>
                  @foreach($clientes as $cliente)
                  <option value="{{$cliente->id}}">{{$cliente->razao_cliente}}</option>
                  @endforeach
                </select>
                <small id="campo_cliente" class="text-danger campo-obrigatorio font-weight-bold">* Preenchimento obrigatório</small>
              </div>
          </div>
          <div class="text-center">
          <div class="alert alert-danger comparar-datas text-white font-weight-bold mt-1 mb-1">
            <i class="fas fa-bullhorn mr-3"></i>Data do vencimento menor do que a data emitida.
          </div>          
            @can('adicionar-contas-a-receber')
              <button type="submit" class="btn btn-success mt-4">
                  <font style="vertical-align: inherit;">Salvar</font>
                </font>
              </button>
            @endcan
          </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- <div class="modal fade" id="modal_cadastro_clientes" tabindex="-1" role="dialog" aria-labelledby="modal_cadastro_clientes" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="mx-auto text-info text-uppercase">Cadastro incompleto</h2>
        </div>
        <div class="modal-body">
          <div class="texto-alerta">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default text-white font-weight-bold" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div> -->
@else
  <p class="text-center display-3 mt-3">- <u>Atenção, você não tem acesso a esse conteúdo</u> -</p><br>
@endcan
@endsection

@push('js')
<script src="{{ asset('argon') }}/vendor/select2/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#id_cliente_fk').select2();
    });
</script>
<!--Arquivo de JS criado por nós para editar as partes lógicas do sistema  -->
<script type="text/javascript" src="{{ asset('js/clientes_cadastrar.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/contas_receber.js') }}"></script>

@endpush