@extends('adminlte::page')
@section('content_header')
@section('plugins.jqueryRut', true)

<h1>Clientes</h1>
@stop

@section('content')

@if(session()->has('success'))
<div class="alert alert-success" role="alert">
  {{session()->get('success')}}
  </div>
@endif

@if(session()->has('danger'))
<div class="alert alert-danger" role="alert">
  {{session()->get('danger')}}
  </div>
@endif

<link rel="stylesheet" href="../plugins/bootstrap-toggle-switch-with-text/css/style.css">
<form class="form-horizontal"  id="frmEmpresa" action="{{route("clientes.store")}}" method="POST">
    <x-adminlte-card title="INFORMACION DEL CLIENTE" theme="lightblue" theme-mode="outline" icon="fas fa-lg fa-envelope" header-class="text-uppercase rounded-bottom border-info">

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">NOMBRE</label>
            <div class="col-sm-9">
                <input type="text" name="cliente_nombre" id="cliente_nombre" class="form-control @error('cliente_nombre') is-invalid @enderror">
            </div>
            @error('cliente_nombre')
            <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span>
            @enderror
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">DIRECCIÓN</label>
            <div class="col-sm-9">
                <input type="text" name="cliente_direccion" id="pac_input" class="form-control @error('cliente_direccion') is-invalid @enderror">
                @error('cliente_direccion')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
              @enderror
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">NÚMERO</label>
            <div class="col-sm-9">
                <input type="text" name="cliente_numero" id="cliente_numero" class="form-control @error('cliente_numero') is-invalid @enderror">
                @error('cliente_numero')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
              @enderror
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-3 col-form-label">NÚMERO DEPARTAMENTO / OFICINA</label>
            <div class="col-sm-9">
                <input type="text" name="cliente_numero_depto_oficina" id="cliente_numero_depto_oficina" class="form-control @error('cliente_numero_depto_oficina') is-invalid @enderror">
                @error('cliente_numero_depto_oficina')
              <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
              @enderror
            </div>
        </div>

        <div class="form-group row">
          <label for="inputEmail3" class="col-sm-3 col-form-label">REGION</label>
          <div class="col-sm-9">
            <select name="cliente_region_id" id="cliente_region_id" class="form-control" onchange="getProvinciasByRegion(this.value)">
              <option value="" selected>Seleccionar...</option>
            @foreach ($regiones as $region)
            <option value="{{$region->codigo}}">{{$region->nombre}}</option>                  
            @endforeach
          </select>
              @error('cliente_region_id')
            <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span>
            @enderror
          </div>
      </div>

        <div class="form-group row">
          <label for="inputEmail3" class="col-sm-3 col-form-label">PROVINCIA</label>
          <div class="col-sm-9">
            <select name="cliente_provincia_id" id="cliente_provincia_id" class="form-control" disabled onchange="getComunasByProvincia(this.value)">
              <option value="">Seleccionar...</option>
            </select>
              @error('cliente_provincia_id')
            <span class="invalid-feedback" role="alert">
              <strong>{{ $message }}</strong>
          </span>
            @enderror
          </div>
      </div>

      <div class="form-group row">
        <label for="inputEmail3" class="col-sm-3 col-form-label">COMUNA</label>
        <div class="col-sm-9">
          <select name="cliente_comuna_id" id="cliente_comuna_id" class="form-control" disabled>
            <option value="" selected>Seleccionar...</option>
          </select>
            @error('cliente_comuna_id')
          <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
          @enderror
        </div>
    </div>

    <div class="row form-group">
      <label for="inputEmail3" class="col-sm-3 col-form-label">¿REQUIERE FACTURA?</label>
      <div class="col-sm-9">
        <!-- radio -->
        <div class="form-group clearfix">

          <!--
          <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
            <div class="handle"></div>
          </button>
          !-->

          <div class="icheck-primary d-inline">
            <input type="radio" id="cliente_esFacturable" name="cliente_esFacturable" value="1" onclick="esFacturable(this.value)">
            <label for="cliente_esFacturable">
              SI
            </label>
          </div>
          <div class="icheck-primary d-inline">
            <input type="radio" id="cliente_esFacturable" name="cliente_esFacturable" value="0" onclick="esFacturable(this.value)" checked>
            <label for="cliente_esFacturable">
              NO
            </label>
          </div>
          
        </div>
      </div>
    </div>

    <div class="form-group row" style="display:none" id="row_es_facturable">
      <label for="inputEmail3" class="col-sm-3 col-form-label">RUT</label>
      <div class="col-sm-9">
          <input type="text" name="cliente_rut" id="cliente_rut" class="form-control @error('cliente_rut') is-invalid @enderror">
      </div>
      @error('cliente_rut')
      <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
      @enderror
  </div>

        <x-slot name="footerSlot">
            <x-adminlte-button label="Guardar" theme="success" icon="fas fa-key" type="submit"/>
          </x-slot>

    </x-adminlte-card>

    <input type="hidden" name="cliente_lat" id="cliente_lat">
    <input type="hidden" name="cliente_long" id="cliente_long">
    @csrf
</form>
@stop
@section('plugins.icheckBootstrap', true);
@section('js')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl3ynABIEYXM9QC8icGka6BDhSDEvd1ho&callback=initMap&libraries=places,drawing,geometry,visualization" async defer></script>
<script src="../plugins/bootstrap-toggle-switch-with-text/js/script.js"></script>
<script type="text/javascript">
$('#cliente_rut').Rut({
            on_error: function() {
                alert('Rut incorrecto');
                $("#cliente_rut").val("");
                $("#cliente_rut").focus();
            },
            format_on:'keyup'
        });
function initMap() {
        var input = document.getElementById('pac_input');
        var autocomplete = new google.maps.places.Autocomplete(
            input, {
                types: ['geocode'],
                componentRestrictions: {
                    country: 'CL',
                }
            }
        );

        // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the

        // Set the data fields to return when the user selects a place.
        // autocomplete.setFields(
        // 	['address_components', 'geometry', 'icon', 'name']);

        autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            $("#pac_input").val(place.name);
            if (!place.geometry) {
                // User entered the name of a Place that was not suggested and
                // pressed the Enter key, or the Place Details request failed.
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }
            $("#cliente_lat").val(place.geometry.location.lat());
            $("#cliente_long").val(place.geometry.location.lng());

        });
    }

function getProvinciasByRegion(codigo)
{
  let _token = $("input[name=_token]").val();
  let data = ({cliente_region_id:codigo,_token:_token});
  
  $.ajax({
    type:'POST',
    url:"{{route("provincias.getProvinciasByRegion")}}",
    data:data,
    dataType:'JSON',
    beforeSend : function()
    {

    },
    success : function(response)
    {
      let options = '<option value="">Seleccionar...</option>';
      $.each(response,function(i,v){
        options+='<option value="'+v.codigo+'">'+v.nombre+'</option>';
      });
      $("#cliente_provincia_id").html(options);
      $("#cliente_provincia_id").attr("disabled",false);
    },
    complete : function()
    {

    }
  })
}

function getComunasByProvincia(codigo)
{
  let _token = $("input[name=_token]").val();
  let data = ({cliente_provincia_id:codigo,_token:_token});
  $.ajax({
    type:'POST',
    url:"{{route("comunas.getComunasByProvincia")}}",
    data:data,
    dataType:'JSON',
    beforeSend : function()
    {

    },
    success : function(response)
    {
      let options = '<option value="">Seleccionar...</option>';
      $.each(response,function(i,v){
        options+='<option value="'+v.codigo+'">'+v.nombre+'</option>';
      });
      $("#cliente_comuna_id").html(options);
      $("#cliente_comuna_id").attr("disabled",false);
    },
    complete : function()
    {

    }
  })
}

function esFacturable(input)
{
  if(input == 1)
  {
    $("#row_es_facturable").show();
  }else{
    $("#row_es_facturable").hide();
  }
}
</script>

@stop