@extends('menu/menu')
<style>
.mostrar {
  display: none;

}
@media (max-width: 768px) {
    .mostrar {
    display: block;
    
  }
}
</style>
{{-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script> --}}
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>

 

@section('content') 

@if ( session('mensaje') )

  
    <div class="alert alert-success">{{ session('mensaje') }}</div>
    
 

@endif

<div class="container" style="margin-top:30px">

    <h2>Agregar gasto</h2>

<div class="mostrar" style="text-align: right">
  <a  href="javascript: history.go(-1)"><img src="img/volver.png" ></a>
</div>
    {{-- {{route('crear.usuario')}} --}}
    <form action="{{route('create.gastos')}}" method="POST"><div id="form-container" class="container-fluid">
      {{-- <form action="" method="POST"> --}}
        @csrf
    
    <div class="container-fluid">    
      <div class="container-fluid">
        <!-- Control the column width, and how they should appear on different devices -->
        <hr>
        {{-- <h4>Datos Personales</h4> --}}


        <div class="row">

          <div class="col-sm-3 form-group">
            <label for="" class="" >Código SC</label>
            <input type="text" class="form-control" name="codigo_sc" id="codigo_sc" placeholder="SC" value="{{@old('codigo_sc')}}"   >

            @error('codigo_sc')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
          </div>
            <div class="col-sm-3 form-group">
                <label for="" class="" >Cliente</label>
                
                <select class="form-control" name="cliente_sucursal" id="cliente_sucursal">
                  <option value="">Seleccionar</option>
                  @foreach($clientes as $cliente)
                  <option value="{{$cliente->id}}" {{(old('cliente_sucursal')==$cliente->id)? 'selected':''}}>{{$cliente->razon_social}}</option>
                  @endforeach
              </select>
                @error('cliente')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
              </div>

              
          <div class="col-sm-3 form-group">
            <label for="" class="" >Sucursal</label>
          <select class="form-control" name="sucursal" id="sucursal_cl">
             
              <option value="">Seleccionar</option>
              @foreach($sucursal as $sucursales)
              <option value="{{$sucursales->id}}" {{(old('sucursal')==$sucursales->id)? 'selected':''}}>{{$sucursales->nombre}}</option>
              @endforeach 
           </select>
           {{old('sucursal')}}
           
            @error('sucursal')
            <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-sm-3 form-group" >
            <label for="fecha_gasto" class="" >Fecha gasto</label>
            <input type="date" class="form-control" name="fecha_gasto" id="fecha_gasto" value="{{@old('fecha_gasto')}}"   >
            @error('fecha_gasto')
              <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        {{-- <div class="col-sm-3 form-group" >
            <label for="total_gasto" class="" >Total gasto</label>
            <input type="number" class="form-control" name="total_gasto" id="total_gasto" placeholder="1.000" value="{{@old('total_gasto')}}"   >
            @error('total_gasto')
              <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div> --}}

        </div>

        <div class="row">
   
            <div class="col-sm-2 form-group" >
                <label for="viaje_diario"  class="" >Viaje diario</label>
                <input type="number" class="form-control" onKeyPress="return soloNumeros(event)" min="1" pattern="^[0-9]+" name="viaje_diario" id="viaje_diario" placeholder="1.000" value="{{@old('viaje_diario')}}"   >
                @error('viaje_diario')
                  <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>
            <div class="col-sm-2 form-group" >
              <label for="viaje_atenciones" class="" >Viaje atenciones</label>
              <input type="number" class="form-control" min="1" pattern="^[0-9]+" onKeyPress="return soloNumeros(event)" name="viaje_atenciones" id="viaje_atenciones" placeholder="1.000" value="{{@old('viaje_atenciones')}}"   >
              @error('viaje_atenciones')
                <div class="alert alert-danger">{{ $message }}</div>
              @enderror
          </div>
          <div class="col-sm-2 form-group" >
            <label for="combustible" class="" >Combustible</label>
            <input type="number" class="form-control"min="1" pattern="^[0-9]+" onKeyPress="return soloNumeros(event)" name="combustible" id="combustible" placeholder="1.000" value="{{@old('combustible')}}"   >
            @error('combustible')
              <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-sm-2 form-group" >
          <label for="colacion" class="" >Colación</label>
          <input type="number" class="form-control" name="colacion" min="1" onKeyPress="return soloNumeros(event)" pattern="^[0-9]+" id="colacion" placeholder="1.000" value="{{@old('colacion')}}"   >
          @error('colacion')
            <div class="alert alert-danger">{{ $message }}</div>
          @enderror
      </div>   
      <div class="col-sm-2 form-group" >
        <label for="otro_gasto" class="" >Otro</label>
        <input type="number" class="form-control" name="otro_gasto" id="otro_gasto" onKeyPress="return soloNumeros(event)" min="1" pattern="^[0-9]+" placeholder="1.000" value="{{@old('otro_gasto')}}"   >
        @error('otro_gasto')
          <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>               
      <div class="col-sm-2 form-group" >
        <label for="total_gasto" class="" >Total gasto</label>
        <input type="number" class="form-control" readonly="readonly"  onKeyPress="return soloNumeros(event)" style="pointer-events: none" min="1" pattern="^[0-9]+" name="total_gasto" id="total_gasto" placeholder="1.000" value="{{@old('total_gasto')}}"   >
        @error('total_gasto')
          <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>

      </div>
        
        <div class="row">
          <div class="col-sm-6 form-group">
              <label for="" class="" >Título</label>
              <input type="text" name="titulo" class="form-control"  value="{{@old('titulo')}}"    placeholder="Título">
              @error('titulo')
              <div class="alert alert-danger">{{ $message }}</div>
              @enderror
          </div>                    
        </div>
        <div class="row">
            <div class="col-sm-12 form-group">
                <label for="" class="" >Descripción gasto</label>
                <textarea rows="5" name="descripcion_gasto"  class="form-control"  placeholder="Describa en que gastó el dinero.">
                  {{@old('descripcion_gasto')}}
                </textarea>
                @error('descripcion_gasto')
                <div class="alert alert-danger">{{ $message }}</div>
                @enderror
            </div>                    
          </div>        
        <hr>
        {{-- <textarea class="form-control" rows="5" id="comment"></textarea> --}}

  
        {{-- fin del div.container.fluid --}}
      </div>


     
    <div class="row">
      <div class="card-body" style="text-align: right" >
          <button type="submit" class="btn btn-primary btn-lg ">Guardar</button>  
      </div>
    
    
    </div>
    
    </form>
    
    </div>
    
@endsection

<script>



  $(document).ready(function(){


    $('#viaje_diario').change('input', function() {
      sumar_total();
     });
     $('#viaje_atenciones').change('input', function() {
      sumar_total(); 
     });
     $('#combustible').change('input', function() {
      sumar_total(); 
     });
     $('#colacion').change('input', function() {
      sumar_total(); 
     });
     $('#otro_gasto').change('input', function() {
      sumar_total(); 
     });
    $('#cliente_sucursal').change(function() {    
        //  buscar_comuna($("#cliente_sucursal option:selected").val(),"#comuna_usuarios");  
        // alert();

        urls = "buscar_sucu_cliente";


        $.ajax({

        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },

        type: 'POST',

        url: urls,

        data: { 'id_cliente': $("#cliente_sucursal option:selected").val() },

        success: function(data) {
        
            console.log(data);
        
            $(sucursal_cl).empty();
        
            $.each(data, function(id, comuna_nombre_array) {
            
            
            
                $(sucursal_cl).append('<option value=' + comuna_nombre_array.id + '>' + comuna_nombre_array.nombre + '</option>');
            
           
            
            });
          
        },

        error: function(xhr, status) {
        
            alert('Disculpe, ha ocurrido un problema, intente mas tarde');
        
        }

});
     })


function sumar_total(){
     
       var viaje_atencion = $('#viaje_atenciones').val();
      var viaje_diario = $('#viaje_diario').val();
      var combustible = $('#combustible').val();
      var colacion = $('#colacion').val();
      var otro_gasto = $('#otro_gasto').val();
      
      

      if(viaje_atencion == "" || viaje_atencion == null ){
        viaje_atencion = 0;
      }
      if(viaje_diario == "" || viaje_diario == null ){
        viaje_diario = 0;
      }
      if(combustible == "" || combustible == null ){
        combustible = 0;
      }
      if(colacion == "" || colacion == null ){
        colacion = 0;
      }
      if(otro_gasto == "" || otro_gasto == null ){
        otro_gasto = 0;
      }
        var total =  parseFloat(viaje_atencion) + parseFloat(viaje_diario)+ parseFloat(combustible) +parseFloat(colacion)+parseFloat(otro_gasto);
      
      
      
    
      $("#total_gasto").val(total)
      console.log(total);

}

    
// ************************RUT*****************************************
    //validar rut  
    $("#rut").change(function(){
      checkRut( $("#rut").val());
    });
    //agregar digito al rut
    $('#rut').on('input', function() {
      var valor = $("#rut").val().replace('.','');
     valor = valor.replace('-','');
     cuerpo = valor.slice(0,-1);
     dv = valor.slice(-1).toUpperCase();
     rut= cuerpo + '-'+ dv;
     $("#rut").val(rut);
     });

     
     $('#correo').change(function() {
    
      validarEmail($("#correo").val());
     });
  
  });

  function validarEmail(valor) {
  if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(valor)){
  //  alert("La dirección de email " + valor + " es correcta.");
  console.log("listo");
  } else {
  //  alert("La dirección de email es incorrecta." + valor);
  //  $("#correo").val("");
  }
}



  function checkRut(rut) {
    // Despejar Puntos
    var valor = rut.replace('.','');
    // Despejar Guión
    valor = valor.replace('-','');
    
    // Aislar Cuerpo y Dígito Verificador
    cuerpo = valor.slice(0,-1);
    dv = valor.slice(-1).toUpperCase();
    
    // Formatear RUN
    rut.value = cuerpo + '-'+ dv
    
    // Si no cumple con el mínimo ej. (n.nnn.nnn)
    if(cuerpo.length < 7) { 
        alert("Rut Incorrecto");
        $("#rut").val('');
      }else{
    
    // Calcular Dígito Verificador
    suma = 0;
    multiplo = 2;
    
    // Para cada dígito del Cuerpo
    for(i=1;i<=cuerpo.length;i++) {
    
        // Obtener su Producto con el Múltiplo Correspondiente
        index = multiplo * valor.charAt(cuerpo.length - i);
        
        // Sumar al Contador General
        suma = suma + index;
        
        // Consolidar Múltiplo dentro del rango [2,7]
        if(multiplo < 7) { multiplo = multiplo + 1; } else { multiplo = 2; }
  
    }
    
    // Calcular Dígito Verificador en base al Módulo 11
    dvEsperado = 11 - (suma % 11);
    
    // Casos Especiales (0 y K)
    dv = (dv == 'K')?10:dv;
    dv = (dv == 0)?11:dv;
    
    // Validar que el Cuerpo coincide con su Dígito Verificador
    if(dvEsperado != dv) {
      alert("Rut incorrecto");
      $("#rut").val('');
    }
  }
  
}
function soloNumeros(e){

	var key = window.Event ? e.which : e.keyCode
	return (key >= 48 && key <= 57)
}
  </script>