@extends('../layouts.app')
@section('title', 'Adicionar Conta Bancaria')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
    .select2-container .select2-selection--single {
        height: 46px;
        margin-top: 0px;
        border: 1px solid #dee2e6;
    }
</style>
@include('../layouts.headers.cards_prod')

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

@can('visualizar-contas-a-pagar')
  <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">{{ __('Cadastra agência.') }}</h3>
              </div>
              <div class="col-4 text-right">
                <a href="{{route('contas_bancarias.index')}}" class="btn btn-sm btn-primary">{{ __('Voltar a Lista') }}</a>
              </div>
            </div>
          </div>
          <div class="card-body border border-warning rounded shadow">
            <form method="post" action="{{route('contas_bancarias.salvar')}}" id="formulario_conta_bancaria">
              <!-- Passando o Token -->
              {{csrf_field()}}
              <!-- Input hiddens responsáveis por verificar se o cliente já possuí conta na agência escolhida -->
              @foreach($agencia_usuario as $agencias_usuario)
                <input type="hidden" name='agencia_nao_permitidas' class='agencia_nao_permitidas' value="{{$agencias_usuario->id_banco}}">
              @endforeach
              <div class="form-row">
                <div class="col-lg-4 col-md-4 col-sm-12">
                  <label>Agência Bancária</label>
                  <select id="agencia-bancaria" class="form-control" name="agencia-bancaria">
                      <option disabled="on" selected="on">Selecione uma agência bancária</option>
                    @foreach($agencias as $agencia)
                      <option value="{{$agencia->id_banco}}">{{$agencia->nome_banco}}</option>
                    @endforeach                    
                  </select>
                  <small class="font-weight-bold conta_existente text-danger text-center"></small>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label>Número da conta</label>
                  <input type="text" id="numero_conta_bancaria" class="form-control contas" name="numero_conta_bancaria" min='0' minlength="0" maxlength="30" required>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-12">
                  <label>Digito</label>
                  <input type="text" id="digito_conta_bancaria" class="form-control contas" name="digito_conta_bancaria" min='0' minlength="0" maxlength="30" required>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <label>Número da agência</label>
                  <input type="text" id="numero_agencia_bancaria" class="form-control contas"  name="numero_agencia_bancaria" min='0' minlength="0" maxlength="30" required>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-12">
                  <label>Digito</label>
                  <input type="text" id="digito_agencia_bancaria" class="form-control contas" name="digito_agencia_bancaria" min='0' minlength="0" maxlength="30" required>
                </div>
              </div>
              <div class="row mt-4">
                <a href="https://www.bb.com.br/pbb/pagina-inicial/voce/produtos-e-servicos/contas#/" target="_blank" id="consultar_agencia" class="ml-3 font-weight-bold text-uppercase text-underline" style="color: #7952b3;">Consultar minha conta <i class="far fa-question-circle text-primary"></i></a>
                <input type="submit" class="btn btn-info ml-auto mr-3 font-weight-bold" name="submeter_conta" id="submeter_conta" name="submeter_conta">
              </div>
            </form>
            @if (Session::has('mensagem-falha'))
              <div class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
                <span class="alert-icon"><i class="fas fa-exclamation-triangle fa-2x"></i></span>
                <span class="alert-text"><strong>{{ Session::get('mensagem-falha') }}</strong>
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
            @endif
          </div>
        </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="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        $('#agencia-bancaria').select2();
    });
</script>
<script type="text/javascript" src="{{asset('js/jquery.mask.js')}}"></script>
<script type="text/javascript" src="{{asset('js/digitos_numericos.js')}}"></script>
<script type="text/javascript" src="{{asset('js/adicionar_agencia.js')}}"></script>

@endpush