@extends('layout.mainlayout')
@section('estilos')
  <link rel="stylesheet" href="{{asset('css/financiamiento.css')}}">
@endsection
@section('navbar')
  @include('layout.partials.nav')
@endsection

@section('slider')
@include('layout.partials.slider')
@endsection

@section('content')

{{-- Formulario de Financiamiento --}}
<div class="px-0">

    <!--Section: Content-->
    <section class="container">
  
      <!-- Section heading -->
      <h3 class="text-center font-extra-bold text-gray-dark mt-5 mb-3 pb-5"> SOLICITUD DE <span class="font-black text-main-orange">FINANCIAMIENTO</span>  </h3>
      <!-- Section description -->
      {{-- <h4 class="text-center font-weight-normal text-dark mx-auto mb-4 pb-2">We love to hear from you!</h4> --}}
  
      <form class="mb-5 mx-md-5" id="form-financiamiento" method="POST" action="{{route('crearFinanciamiento')}}">
        @csrf
        {!! Honeypot::generate('myHoneypot', 'my_time') !!}
        <div class="row">

          <!-- Nombre -->
          <div class="col-md-4 mb-4">
            <input type="text" id="nombre" name="nombre" class="form-control" placeholder="Nombre y Apellido" value="{{old('nombre')}}">
            @error('nombre')
            <div class="alerta" id="nombre01">
              <p class="alert01"><i class="fa fa-info-circle color01"></i>
                {{$message}}</p>
            </div>
            @enderror
          </div>
          

          <!-- RUT -->
          <div class="col-md-4 mb-4">
            <input type="text" id="rut" name="rut" class="form-control" placeholder="RUT" value="{{old('rut')}}">
            @error('rut')
            <div class="alerta" id="rut01">
              <p class="alert01"><i class="fa fa-info-circle color01"></i>
                {{$message}}</p>
            </div>
            @enderror
          </div>
          

          <!-- Phone -->
          <div class="col-md-4 mb-4">
            <input type="number" id="telefono" name="telefono" class="form-control" placeholder="Teléfono" value="{{old('telefono')}}">
            @error('telefono')
            <div class="alerta" id="telefono01">
              <p class="alert01"><i class="fa fa-info-circle color01"></i>
                {{$message}}</p>
            </div>
            @enderror
          </div>
         

          <!-- Email -->
          <div class="col-md-4 mb-4">
            <input type="email" id="email" name="email" class="form-control" placeholder="Correo Electrónico" value="{{old('email')}}">
            @error('email')
            <div class="alerta" id="email01">
              <p class="alert01"><i class="fa fa-info-circle color01"></i>
                {{$message}}</p>
            </div>
            @enderror
          </div>
          

          <!-- Monto del Crédito -->
          <div class="col-md-4 mb-4">
            <input type="number" id="credito" name="credito" class="form-control" placeholder="Monto del Crédito" value="{{old('credito')}}">
            @error('credito')
            <div class="alerta" id="credito01">
              <p class="alert01"><i class="fa fa-info-circle color01"></i>
                {{$message}}</p>
            </div>
            @enderror
          </div>
          
          <!-- Cantidad de Cuotas -->
          <div class="col-md-4 mb-4">
            <select class="form-select" type="number" name="cuotas" id="cuotas">
              <option value="">cantidad de cuotas</option>
              <option value="6">6</option>
              <option value="12">12</option>
              <option value="18">18</option>
              <option value="24">24</option>
              <option value="36">36</option>
              <option value="48">48</option>
            </select>
            @error('cuotas')
            <div class="alerta" id="cuotas01">
              <p class="alert01"><i class="fa fa-info-circle color01"></i>
                {{$message}}</p>
            </div>
            @enderror
          </div>
        </div>

        <div class="container-form p-4 mt-3 mb-5">
          <h2 class="text-white text-center py-3">
            ¿Desea entregar vehículo como parte de pago?
          </h2>
          <div class="row py-3">
            <div class="col-md-4 mb-4">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Marca del Vehículo" id="marca" name="marca" value="{{old('marca')}}">
                    @error('marca')
                    <div class="alerta" id="marca01">
                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                    </div>
                    @enderror
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Modelo del Vehículo" id="modelo" name="modelo" value="{{old('modelo')}}">
                    @error('modelo')
                    <div class="alerta" id="modelo01">
                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                    </div>
                    @enderror
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="form-group">
                    <input type="number" min="0" class="form-control" placeholder="Año del Vehículo" id="anio" name="anio" value="{{old('anio')}}">
                    @error('anio')
                    <div class="alerta" id="anio01">
                        <p class="alert01"><i class="fa fa-info-circle color01"></i>{{$message}}</p>
                    </div>
                    @enderror
                </div>
            </div>
          </div>
        </div>
  
        <div class="row">
          <div class="col-md-12">
  
            <div class="form-group mb-4">
              <textarea class="form-control rounded" id="mensaje" name="mensaje" rows="3" placeholder="¿Deseas agregar un mensaje?">{{old('mensaje')}}</textarea>
            </div>
  
            <div class="text-center">
              <button id="enviar" type="submit" class="btn-send " style="font-size: 1rem"> <span id="spinner" style="display:none;margin-right:5px" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span><strong> Enviar </strong> </button>
            </div>
  
          </div>
        </div>
  
      </form>
  
    </section>
    <!--Section: Content-->
  
  
</div>

@endsection
@section('scripts')
<script>
  /*Valida que el campo tipo number del año no acepte numeros negativos*/
  var number = document.getElementById('anio');
  number.onkeydown = function(e) {
      if(!((e.keyCode > 95 && e.keyCode < 106)
        || (e.keyCode > 47 && e.keyCode < 58) 
        || e.keyCode == 8)) {
          return false;
      }
  }

  $('#collapseExample').on('hidden.bs.collapse', function () {
    $('#autopago').val('');
  })

  $('#collapseExample').on('show.bs.collapse', function () {
    $('#autopago').val('true');
  })
  
  $('#form-financiamiento').submit(function(event){
    event.preventDefault();
    $('#enviar').prop('disabled',true);
    $('#enviar > strong').html('ENVIANDO...');
    $('#spinner').css('display','inline-block');
    $(this).off('submit').submit();
  }) 
  
  
</script>
@endsection
@section('footer')
  @include('layout.partials.footer')
@endsection