@extends('layouts.app')

@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item active"><a href="{{ route('inspeccion.index') }}">Módulo Inspección</a></li>
    <li class="breadcrumb-item active"><a href="{{ route('inspeccion.sujetos.index') }}">Sujetos de Fiscalización</a></li>
    <li class="breadcrumb-item active">@{{titulo_pagina}}</li>
  </ol>
</nav>
@stop

@section('content') 

<b-card :header="titulo_pagina">
    <div class="row">
          <div class="col-12 row">
          <div class="form-group col-sm-7  col-12">
            <label for="tipo_pago" class="font-weight-bold">Tipo de Sujeto</label>
            <b-form-radio-group :disabled="!edicion" inline  v-model="sujeto.tipo_sujeto">
                <template v-for="(item,index) in tipos_sujetos">
                    <b-form-radio :value="item">@{{item}}</b-form-radio>
                </template>
            </b-form-radio-group>
          </div>

        </div>
        <div class="form-group col-sm-9  col-12">
          <label for="nombre" class="font-weight-bold">Nombre/razón Social/Vehículo</label>
          <b-form-input :disabled="!edicion" v-model="sujeto.nombre" type="text" name="nombre" id="nombre"></b-form-input>
        </div>

          <div class="form-group col-sm-3  col-12">
            <label for="n_identificacion" class="font-weight-bold">RUT/Placa Patente</label>
            <b-input-group>
              <b-form-input :disabled="!edicion || bloqueoid"  v-model="sujeto.n_identificacion" type="text" name="n_identificacion" ></b-form-input>
              <b-input-group-append >
                <b-button variant="info" :disabled="!edicion" @click="editarIdent(sujeto.n_identificacion)"><i class="fa fa-edit"></i></b-button>
              </b-input-group-append>
            </b-input-group>
            
          </div>
          <div class="row col-sm-6 col-12 align-content-start">
          <div class="form-group  col-12">
            <label for="direccion" class="font-weight-bold">Dirección</label>
            <b-form-input :disabled="!edicion"  v-model="sujeto.direccion" type="text" name="direccion" ></b-form-input>
          </div>

          <div class="form-group  col-12">
            <label for="contacto" class="font-weight-bold">Contacto</label>
            <b-form-input :disabled="!edicion"  v-model="sujeto.contacto" type="text" name="contacto" ></b-form-input>
          </div>

          <div class="form-group  col-6">
            <label for="latitud" class="font-weight-bold">latitud</label>
            <b-form-input disabled  v-model="sujeto.latitud" type="text" name="latitud" ></b-form-input>
          </div>

          
          <div class="form-group  col-6">
            <label for="longitud" class="font-weight-bold">Longitud</label>
            <b-form-input disabled  v-model="sujeto.longitud" type="text" name="longitud" ></b-form-input>
          </div>
        </div>

        <div class="row col-sm-6 col-12">
         <map-geosearch v-model="mapax" @input="leerGeo" :zoom="14" ref="mapa"></map-geosearch>

        </div>
          <div class="form-group col-sm-12">
            <label for="observaciones" class="font-weight-bold">Observaciones</label>
            <b-form-textarea :disabled="!edicion" rows="3" max-rows="6" v-model="sujeto.observaciones" type="text" name="observaciones" ></b-form-textarea>
          </div>

         

          <div class="col d-flex justify-content-end">
            <b-button href="{{route('inspeccion.sujetos.index')}}" variant="secondary">Volver</b-button>&nbsp;
            <b-button @click="guardarDatos" variant="primary" v-if="edicion">Guardar</b-button>&nbsp;
            <b-button href="{{route('inspeccion.fiscalizaciones.create')}}+'?sujeto='+sujeto.id" variant="primary" v-if="sujeto.id!=undefined">Nueva Fiscalización</b-button>
            
          </div>
          
    </div>

</b-card>   
<b-card v-if="sujeto.id!=null" header="Fiscalizaciones">

<b-table
class="col block"
    ref="tablaDatos"  hover outlined bordered
    :fields="tablaDatos.fields" 
    :items="tablaDatos.datos"  
    
    :sort-by.sync="tablaDatos.sortBy"
    :sort-desc.sync="tablaDatos.sortDesc"
    :sort-direction="tablaDatos.sortDirection"
    :filter="tablaDatos.filtro"
    :no-provider-paging="true"
    :no-provider-filtering="true"
    :no-provider-sorting="true"
    :current-page="tablaDatos.currentPage" 
    :per-page="tablaDatos.perPage"
    show-empty
    head-variant="light"
  
    :busy="tablaDatos.busy"
    filter-debounce="500"

>

<template v-slot:cell(inspectores)="data">
    @{{data.item.inspector_principal.nombre}} / @{{data.item.inspector_apoyo.nombre}}
</template>

<template v-slot:cell(requiere_visita)="data">
    <span v-if="data.item.requiere_visita==true">Si</span>
    <span v-if="data.item.requiere_visita==false">No</span>
</template>

<template v-slot:cell(visitado)="data">
    <span v-if="data.item.visita!=null">Si ,
        <a :href="this.route('inspeccion.fiscalizaciones.show',{fiscalizacione:data.item.visita.id})" target="_blank">Boleta N°@{{data.item.visita.n_boleta}}</a>
     </span>
    <span v-if="data.item.visita==null">No</span>
</template>

<template v-slot:cell(opciones)="data">
    <b-dropdown right size="sm" variant="primary" text="Acciones">
        <b-dropdown-item :href="this.route('inspeccion.fiscalizaciones.show',{fiscalizacione:data.item.id})">Ver</b-dropdown-item>
        <b-dropdown-item :href="this.route('inspeccion.fiscalizaciones.edit',{fiscalizacione:data.item.id})">Editar</b-dropdown-item>
        <b-dropdown-item  v-if="data.item.requiere_visita==true && data.item.visita==undefined" :href="this.route('inspeccion.fiscalizaciones.create')+'?referencia='+data.item.id">Registrar Visita</b-dropdown-item>
    </b-dropdown>
</template>
</b-table>
<b-pagination
    v-model="tablaDatos.currentPage"
    :total-rows="tablaDatos.totalRows"
    :per-page="tablaDatos.perPage"
    align="right"
    size="sm"
    class="col-6"
    >
</b-pagination>
</b-card>






@endsection

@push('pre-scripts')
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@2.6.0/assets/css/leaflet.css">
<script>
  
window.pageMix.push({
    data() {
        return {
            tipo:"{{$tipo ?? 'administrativo'}}",
            titulo_pagina:"Nuevo sujeto de fiscalización",
            tipos_sujetos:["Persona","Empresa","Inmueble","Vehículo"],
            edicion:{{$edicion ?? "false"}},
            bloqueoid:false,
            mapa:null,
            mapax:{location:null},
            sujeto:{
                tipo_identificacion:null,
            },


            tablaDatos:{
              fields: [
                  //{ key: 'id', label: 'ID', sortable: true },
                  { key: 'n_boleta', label: 'N° Boleta', sortable: true,visible:true },
                  { key: 'tipo_doc_emitido', label: 'Procedimiento', sortable: true},
                  { key: 'fecha_requerimiento', label: 'Fecha', sortable: true,visible:true },
                  
                  { key: 'tipo_fiscalizacion', label: 'Tipo', sortable: true,visible:true },
                  { key: 'inspectores', label: 'Inspectores', sortable: true,visible:true },
                  { key: 'requiere_visita', label: 'Requiere Visita', sortable: true,visible:true },
                  { key: 'visitado', label: 'Visitado', sortable: true,visible:true },
                  //  { key: 'fecha_fin_servicio', label: 'Fecha Fin', sortable: true,visible:true },
                  //  { key: 'estado.nombreestado', label: 'Estado', sortable: true,visible:true },
                  //  { key: 'archivos', label: 'Archivos', sortable: true,visible:true },
                  //  { key: 'responsables', label: 'Responsables', sortable: true,visible:false },
                  { key: 'opciones', label: 'Opciones', sortable: true,visible:true }, 
              ],
              datos:[],
              currentPage: 1,
              perPage: 20,
              totalRows:0,
              filtro:"",
              sortBy: '{{ app('request')->input('sortBy','id') }}',
              sortDesc: {{ app('request')->input('desc','true') }},
              sortDirection: 'asc',
          }
        }
    },
    
    computed: {},
    mounted() {
      @isset($sujeto)
      this.sujeto = @json($sujeto);
      this.bloqueoid=true;
      if(this.edicion)
        this.titulo_pagina = "Edición de Sujeto :"+this.sujeto.n_identificacion;
      else
        this.titulo_pagina = "Vista de Sujeto :"+this.sujeto.n_identificacion;
      axios
        .get(route('inspeccion.getFiscalizaciones',{id:this.sujeto.id})).then(response => {this.tablaDatos.datos = response.data })
        .catch(function (error) { this.$swal.fire("error en la carga de las fiscalizaciones")});

      if(this.sujeto.latitud!=null){
        this.$refs.mapa.onAddPosition({address:this.sujeto.direccion,position:{lat:this.sujeto.latitud,lng:this.sujeto.longitud}});
      }
      @endisset
    },
    methods:{
      initMap(e){
        console.log(e);
      },
      editarIdent(id){
        this.$swal({
          title: 'Editar N° Identificación',
         // content: "input",
          input:"text",
          inputValue:id,
          showCancelButton: true,
          confirmButtonText: 'Consultar',
          cancelButtonText: 'Cerrar',
          reverseButtons: true
        }).then((result) => {
          if (result.isConfirmed) {
          console.log(result);
          let inputValue = result.value;
          console.log(inputValue);
          if (inputValue === null || inputValue === "" || inputValue==id) return false;
          
          //consultar
          let sujeto = null;
          axios.get(route('inspeccion.sujetos.consultarnident')+'?n_identificacion='+inputValue).then((response) => { 
            sujeto = response.data 
            if(sujeto.id){
              this.$swal.fire({
                title: 'Existe un N° Identificacion Asociado a '+inputValue+", ¿desea editar ese elemento?",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: 'Guardar',
                denyButtonText: 'No guardar',
                }).then((result) => {
                  if (!result.isConfirmed) {
                    //this.$swal.fire({title: 'Guardando datos',showConfirmButton: false,allowOutsideClick:false});
                    axios.post(route('inspeccion.sujetos.actualizarnident',{id:this.sujeto.id}),{n_identificacion:inputValue}).then((response) => {
                      if(response.data.estado==="OK"){
                        this.$swal.fire({
                            icon: 'success',
                            title: 'Datos actualizados',
                            allowOutsideClick:false,
                            showCancelButton: true,
                            confirmButtonText: 'Seguir',
                          });
                          this.sujeto.n_identificacion = inputValue;
                      }else{
                        this.$swal.fire("Error al intentar guardar los datos, inténtelo nuevamente");
                      }
                    
                });
              }else{
                window.location.href = route("inspeccion.sujetos.edit",{'sujeto':sujeto.id});
              }
            });
          
          }else{
            //guardar dato
            axios.post(route('inspeccion.sujetos.actualizarnident',{id:this.sujeto.id}),{n_identificacion:inputValue}).then((response) => {
              if(response.data.estado==="OK"){
                this.$swal.fire({
                    icon: 'success',
                    icon: 'success',
                    title: 'Datos actualizados',
                    allowOutsideClick:false,
                    showCancelButton: true,
                    confirmButtonText: 'Seguir',
                  });
                  this.sujeto.n_identificacion = inputValue;
              }else{
                this.$swal.fire("Error al intentar guardar los datos, inténtelo nuevamente");
              }
          });

          }
        });
        }
      });
      },

      leerGeo(value){
        this.sujeto.direccion = value.address;
        this.sujeto.latitud=value.position.lat;
        this.sujeto.longitud=value.position.lng;
      },
      guardarDatos(){
        this.$swal.fire({
          title: 'Desea guardar los datos de '+this.sujeto.nombre,
          showDenyButton: true,
          showCancelButton: true,
          confirmButtonText: 'Guardar',
          denyButtonText: 'No guardar',
          }).then((result) => {
            if (result.isConfirmed) {
              this.$swal.fire({title: 'Guardando datos',showConfirmButton: false,allowOutsideClick:false});
              axios.post(route('inspeccion.sujetos.guardar'),this.sujeto).then((response) => {
                if(response.data.estado==="OK"){
                  this.$swal.fire({
                    icon: 'success',
                      title: 'Datos guardados',
                      text: '¿seguir editando?',
                      allowOutsideClick:false,
                      showCancelButton: true,
                      confirmButtonText: 'Seguir',
                      cancelButtonText: 'Salir',
                    }).then((result) => {
                      if (result.isConfirmed) {
                       this.sujeto.id=response.data.id; 
                       this.bloqueoid=true;
                      } else if (result.dismiss=="cancel") {
                        window.location.href = route("inspeccion.sujetos.index");
                      }
                    })
                }else{
                  this.$swal.fire("Error al intentar guardar los datos, inténtelo nuevamente");
                }
              }
              ).catch(function (error) {
                  if(error.response.status==422){
                    let arr = error.response.data.errors;
                    let str = "";
                    Object.keys(arr).forEach(key => {
                      str = str + "- " +arr[key][0]+"<br/>";
                    });
                    this.$swal.fire("Datos incompletos ",str);

                  }else{
                    this.$swal.fire("Error en la respuesta del servidor",error.response.status);
                  }
                }
              );
            } else if (result.isDenied) {
              //this.$swal.fire('Changes are not saved', '', 'info')
            }
          })
        
      }

    }
});
</script>


@endpush