@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.fiscalizaciones.index') }}">Fiscalizaciones</a></li>

  </ol>
</nav>
@stop

@section('content') 
<div class="bgc-white p-20 bd">
    <div class="align-items-center d-flex justify-content-between">
            <h2 class="">Fiscalizaciones</h2>
            <b-button-toolbar aria-label="Submenú toolbar" class="">
                <b-button-group class="mx-1">
                  
                  <a href="{{route('inspeccion.sujetos.index')}}"  class="btn btn-primary">Sujetos de Fiscalización</a> 
                  <a href="{{route('inspeccion.fiscalizaciones.create')}}"  class="btn btn-primary">nueva Fiscalización</a> 
                </b-button-group>
              </b-button-toolbar>
    </div>
    <div class="clearfix"></div>
        <div class="card">
    
            <div class="card-body">
            <div class="d-flex">
          

            
            <div class="col">
                <b-form-group label="Procedimiento" label-for="filtroprocedimiento">
                    <b-form-select v-model="filtros.tipo_doc_emitido" :options="opciones.procedimiento">
                    <template #first><b-form-select-option :value="null">-- Seleccione Opción --</b-form-select-option></template>
                    </b-form-select>
                </b-form-group>  
            </div>

            <div class="col">
                <b-form-group label="Tipo" label-for="filtrotipo">
                    <b-form-select v-model="filtros.tipo_fiscalizacion" :options="opciones.tipo">
                    <template #first><b-form-select-option :value="null">-- Seleccione Opción --</b-form-select-option></template>
                    </b-form-select>
                </b-form-group>  
            </div>

            <div class="col">
                <b-form-group label="Requiere Visita" label-for="requiere_visita">
                    <b-form-select v-model="filtros.requiere_visita" :options="opciones.visita">
                    <template #first><b-form-select-option :value="null">-- Seleccione Opción --</b-form-select-option></template>
                    </b-form-select>
                </b-form-group>  
            </div>
          </div>


            <b-table
class="col block"
    ref="tablaDatos"  hover outlined bordered
    :fields="tablaDatos.fields" 
    :items="datos()"  
    responsive="sm" 
    :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"
    @filtered="onFiltered"
    :busy="tablaDatos.busy"
    filter-debounce="500"

>
<template v-slot:cell(funcionario)="data">
    <a :href="this.route('contratos.verfuncionario',{id:data.item.funcionario.id})" >@{{data.item.funcionario.nombres  }} @{{data.item.funcionario.apellidos  }}</a>
</template>

<template v-slot:cell(n_boleta)="data">
    <a :href="this.route('inspeccion.fiscalizaciones.show',{fiscalizacione:data.item.id})" >@{{data.item.n_boleta  }}</a>
</template>
<template v-slot:cell(inspectores)="data">
    <span v-if="data.item.inspector_apoyo!=null">
        @{{data.item.inspector_principal.nombre}} / @{{data.item.inspector_apoyo.nombre }}
    </span>
    <span v-else>
        @{{data.item.inspector_principal.nombre}}
    </span>
</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>

<template #table-busy>
    <div class="text-center text-danger my-2">
        <b-spinner class="align-middle"></b-spinner>
        <strong>Cargando Datos...</strong>
    </div>
</template>

</b-table>
<div class="d-flex mb-2">
<div class="col-6">Total datos: @{{tablaDatos.totalRows}}</div>
<b-pagination
    v-model="tablaDatos.currentPage"
    :total-rows="tablaDatos.totalRows"
    :per-page="tablaDatos.perPage"
    align="right"
    size="sm"
    class="col-6"
    >
</b-pagination>
<div>


            </div>
        </div>
        </div>




@endsection

@push('pre-scripts')
<script>
  
window.pageMix.push({
    data() {
        return {
            termino: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: 'sujeto.nombre', label: 'Sujeto Fiscalizado', 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_original:@json($fiscalizaciones),
            datos:this.datos(),
            currentPage: 1,
            perPage: 20,
            totalRows:0,
            filtro:"",
            sortBy: '{{ app('request')->input('sortBy','id') }}',
            sortDesc: {{ app('request')->input('desc','true') }},
            sortDirection: 'asc',
           },
          opciones:{
            tipo_doc_emitido:null,
            tipo:null,
            visita:null,
          },
          filtros:{
            tipo_doc_emitido:null,
            tipo_fiscalizacion:null,
             visita:null,
          }
        }
    },
    computed: {},
    mounted() {
        this.agregarSelectFiltros();
    },
    methods:{
        datos(){
           let items=@json($fiscalizaciones);
         
           if (typeof this.filtrarDatosTabla === "function") { 
                items = this.filtrarDatosTabla(items);
            }
           return items;
        },
        buscarTermino(){
            console.log("fn buscarTermino")
            this.tablaDatos.filtro = this.termino;
        },
        agregarSelectFiltros(){
            let items=@json($fiscalizaciones);
            this.opciones.procedimiento = items.map(item => item.tipo_doc_emitido).filter((value, index, self) => self.indexOf(value) === index);
            this.opciones.tipo = items.map(item => item.tipo_fiscalizacion).filter((value, index, self) => self.indexOf(value) === index);
            this.opciones.visita = items.map(item => item.requiere_visita).filter((value, index, self) => self.indexOf(value) === index);         

      },
      filtrarDatosTabla(items){
        if(this.filtros!=undefined){
            let filters =  Object.keys(this.filtros).filter(i => { return this.filtros[i]!=null; } );
            let filteredData = items.filter(i =>
                Object.entries(filters).every(([k, v]) =>{return i[v] === this.filtros[v]})
            )
            this.tablaDatos.totalRows = filteredData.length;
            this.tablaDatos.currentPage = 1;

            return filteredData;
        }
        return items;
      },
      onFiltered(filteredItems) {
        this.tablaDatos.totalRows = filteredItems.length;
        this.tablaDatos.currentPage = 1;
    },

    }
});
</script>


@endpush