@extends('menu/menu')
@section('content')
@if ( session('mensaje') )
<div class="alert alert-danger">{{ session('mensaje') }}</div>
@endif

<div class="container mt-5">
  <div class="title-vista mt-4">PREFACTURACIÓN</div>
</div>

<div class="container mt-4">
  <div class="seccion-filtro">Seleccione</div>
  <hr class="separador">

  <div class="row">
    <div class="col-sm-6 form-group mx-auto">
      <label for="clientes">Tipo Prefactura</label>
      <select class="custom-select mayuscula opcionesSele2" id="tipo" name="tipo" required>
        <option selected disabled value="">Seleccionar</option>
        <option value="instalacion">Instalacion</option>
        <option value="servicio">Servicio</option>
      </select>
    </div>
  </div>
  <div id="sectionServicio" style="display:none">
    <form action="{{route('go.allchecklistServicio')}}" method="GET">
      <!--<div class="row">
        <div class="col-sm-6 form-group mx-auto">
          <label for="clientes">Seleccionar Cliente</label>
          <select class="custom-select mayuscula opcionesSele3" id="clientes" name="clientes" required>
            <option selected disabled>Seleccionar</option>
            @if (!empty($carga_selectClientesServicio))
            @foreach ($carga_selectClientesServicio as $clientes)
            <option value="{{ $clientes->sCliente }}">{{ucfirst(strtolower($clientes->sCliente ))}} </option>
            @endforeach
            @endif
          </select>
        </div>
      </div>-->
      <div class="text-center mt-5">
        <input type="submit" class="btn btn-prim w-25" value="Siguiente">
      </div>
    </form>
  </div>
  <div id="sectionInstalacion" style="display:none">
    <div class="row">
      <div class="col-sm-6 form-group mx-auto">
        <label for="clientes">Seleccionar Cliente</label>
        <select class="custom-select mayuscula opcionesSele" id="clientes" name="clientes" required>
          <option selected disabled>Seleccionar</option>
          @if (!empty($carga_selectClientes))
          @foreach ($carga_selectClientes as $clientes)
          @if( $clientes->id != 4)
          <option value="{{ $clientes->id }}">{{ucfirst(strtolower($clientes->razon_social ))}}
            @endif
          </option>
          @endforeach
          @endif
        </select>
      </div>
    </div>
    <form action="{{route('go.allchecklist')}}" method="GET">
      <div class="row">
        <div class="col-sm-6 form-group mx-auto">
          <label for="proyectosSeleccionado">Proyectos Asociados</label>
          <select class="custom-select mayuscula" id="detalle" name="proyectosSeleccionado" required>
            <option selected disabled>Seleccionar</option>
          </select>
        </div>
      </div>

      <div class="text-center mt-5">
        <input type="submit" class="btn btn-prim w-25" value="Siguiente">
      </div>
    </form>
  </div>
</div>
@endsection
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
  $(document).ready(function() {
    $(".opcionesSele2").change(function(e) {
      var tipo = $(this).val();
      if (tipo == "servicio") {
        $("#sectionServicio").css("display", "");
        $("#sectionInstalacion").css("display", "none");
      } else if (tipo == "instalacion") {
        $("#sectionServicio").css("display", "none");
        $("#sectionInstalacion").css("display", "");
      }
    });
    $(".opcionesSele3").change(function(e) {
      var nombreCliente = $(this).val();
      console.log(nombreCliente);
    })
    $(".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('obtenerProyectosAsociados') }}",
        type: "post",
        data: {
          'idClientes': idClientes
        },
        success: function(response) {
          $("#detalle").empty();
          $("#detalle").append("<option value='0'>" + "Seleccionar" + "</option>");
          $.each(response, function(index, value) {
            $("#detalle").append("<option value=" + value.id + ">" + value.nombre + "</option>");
          });
        },
        error: function(xhr, status) {
          alert('Disculpe, ha ocurrido un problema, intente mas tarde');
        }
      })
    })
  })
</script>