@extends('menu/menu')
{{-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js%22%3E</script> --}}
<script src="{{ asset('js/jquery-3.4.1.min.js') }}" ></script>
{{-- <link  href="{{ asset('css/a&a_style.css') }}" href="a&a_style.css" rel="stylesheet" type="text/css"> --}}



@section('content')
<form action="{{route('show.api_instalacion')}}" method="GET">
  <div class="container col-sm-6 form-group" style="  text-align: center;"><br><br><br><br><br><br>
  <!--SELECCIONAR PROVEEDOR-->
  <label for="clientes"><h2>Seleccionar Proveedor </h2></label><br>
    <select  class="custom-select mb-3 opcionesSele" id="proveedor" name="proveedor" required>
      <option  selected  disabled>Seleccionar</option>
      @if (!empty($carga_selectProveedor))
        @foreach ($carga_selectProveedor as $dato)      
        @if ($dato->proveedor_instalacion != null)        
        <option  value="{{ $dato->proveedor_instalacion }}">{{ucfirst(strtolower($dato->proveedor_instalacion ))}}
        @endif
      </option> 
      @endforeach
      @endif
    </select>
    <!--SELECCIONAR CLIENTE-->
    <label for="clientes"><h2>Seleccionar Cliente </h2></label><br>
    <select  class="custom-select mb-3" id="detalle" name="clientes" required>
      <option  selected  disabled>Seleccionar</option>
    </select>
    <input type="submit" class="btn btn-danger" value="Siguiente">
  </div>
</form>
@endsection
<script>
  $(document).ready(function() {
    $(".opcionesSele").change(function(e) { 
      var idClientes = $(this).val();
      var _token = $('input[name="_token"]').val();
      $.ajax({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        url:"{{ route('obtenerClientesAsociados') }}",
        type: "post",
        data: {'idClientes': idClientes},
        success: function(response) {
          console.log(response);
          $("#detalle").empty();
          $("#detalle").append("<option value='0'>" + "Seleccionar"+ "</option>");
          $("#detalle").append(response);
          //$.each(response, function( index, value ) {             
          //  $("#detalle").append("<option value="+value.sCliente+">" + value.sCliente+ "</option>");
          //});
        },
        error: function(xhr, status) {
          alert('Disculpe, ha ocurrido un problema, intente mas tarde');
        }
      })
    })    
  })   
</script>