@extends('adminlte::page')
@section('content_header')
<h1>Clientes</h1>
@stop

@section('content')


<form class="form-horizontal"  id="frmEmpresa" action="{{route("clientes.edit",$cliente[0]->cliente_id)}}" 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" value="{{$cliente[0]->cliente_nombre}}" readonly>
            </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" value="{{$cliente[0]->cliente_direccion}}" readonly>
                @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" value="{{$cliente[0]->cliente_numero_calle}}" readonly>
                @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" value="{{$cliente[0]->cliente_numero_depto_oficina}}" readonly>
                @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)" disabled>
              <option value="" selected>Seleccionar...</option>
            @foreach ($regiones as $region)
            <option value="{{$region->codigo}}" @if ($cliente[0]->cliente_region_id == $region->codigo) selected @endif>{{$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>
              @foreach ($provincias as $provincia)
            <option value="{{$provincia->codigo}}" @if ($cliente[0]->cliente_provincia_id == $provincia->codigo) selected @endif>{{$provincia->nombre}}</option>                  
            @endforeach
            </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>
            @foreach ($comunas as $comuna)
            <option value="{{$comuna->codigo}}" @if ($cliente[0]->cliente_comuna_id == $comuna->codigo) selected @endif>{{$comuna->nombre}}</option>                  
            @endforeach
          </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" @if ($cliente[0]->cliente_esFacturable == 1) checked @endif onclick="esFacturable(this.value)" disabled>
            <label for="cliente_esFacturable">
              SI
            </label>
          </div>
          <div class="icheck-primary d-inline">
            <input type="radio" id="cliente_esFacturable" name="cliente_esFacturable" value="0" @if ($cliente[0]->cliente_esFacturable == 0) checked @endif onclick="esFacturable(this.value)" disabled>
            <label for="cliente_esFacturable">
              NO
            </label>
          </div>
          
        </div>
      </div>
    </div>

    <div class="form-group row" style="@if ($cliente[0]->cliente_esFacturable == 0) display:none  @endif" 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" value="@if ($cliente[0]->cliente_esFacturable == 1) {{number_format($cliente[0]->cliente_rut,0,",",".")}}-{{$cliente[0]->cliente_dv}} @endif" readonly>
      </div>
      @error('cliente_rut')
      <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
      @enderror
  </div>

        <x-slot name="footerSlot">
            <a href="{{route('clientes.edit',$cliente[0]->cliente_id)}}" class="btn btn-success">Editar</a>
          </x-slot>

    </x-adminlte-card>

    <input type="hidden" name="cliente_lat" id="cliente_lat" value="{{$cliente[0]->cliente_lat}}">
    <input type="hidden" name="cliente_long" id="cliente_long" value="{{$cliente[0]->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 type="text/javascript">

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()
    {

    }
  })
}

</script>
@stop