@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>
  </ol>
</nav>
@stop

@section('content') 
<div class="bgc-white p-20 bd">
    <div class="align-items-center d-flex justify-content-between">
            <h2 class="">Sujetos de Fiscalización</h2>
            <b-button-toolbar aria-label="Submenú toolbar" class="">
                <b-button-group class="mx-1">
                  
                  <a href="{{route('inspeccion.sujetos.create')}}"  class="btn btn-primary">Nuevo Sujeto de Fiscalización</a>
                </b-button-group>
              </b-button-toolbar>
    </div>
    <div class="clearfix"></div>
        <div class="card">
    
            <div class="card-body">
            <div class="col">
          <b-form-group
              label="Búsqueda"
              label-for="filtrobusqueda"
            >
            <b-input-group>
              <b-form-input v-model="termino" v-on:keyup.enter="buscarTermino"></b-form-input>
              <b-input-group-append>

                <b-button @click="buscarTermino" variant="info">Buscar</b-button>
              </b-input-group-append>
            </b-input-group>
            </b-form-group>  
          </div>
          </div>

                <b-table
class="col-12"
    ref="tablaDatos"  hover outlined bordered
    :fields="tablaDatos.fields" 
    :items="tablaDatos.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(opciones)="data">
   
    <b-button size="sm" :href="this.route('inspeccion.sujetos.show',{sujeto:data.item.id})" variant="primary"><i class="fa fa-eye fa-sm"></i></b-button>&nbsp;
    <b-button size="sm" :href="this.route('inspeccion.sujetos.edit',{sujeto:data.item.id})" variant="primary"><i class="fa fa-edit fa-sm"></i></b-button>&nbsp;
    <b-button size="sm" :href="this.route('inspeccion.fiscalizaciones.create')+'?sujeto='+data.item.id" variant="primary">+ Fiscalización</b-button>

</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:'',
           tablaDatos:{
            fields: [
                 //{ key: 'id', label: 'ID', sortable: true },
                 { key: 'tipo_sujeto', label: 'Tipo', sortable: true,visible:true },
                 { key: 'n_identificacion', label: 'RUT/ROL/Patente', sortable: true},
                 { key: 'nombre', label: 'Nombre/Razón Social/Tipo Vehículo', sortable: true,visible:true },
                 { key: 'direccion', label: 'Dirección', sortable: true,visible:true },
                 { key: 'contacto', label: 'Contacto', sortable: true,visible:true },
                //  { key: 'tipo_requerimiento', label: 'Tipo', sortable: true,visible:true },
                //  { key: 'sujetoFiscalizacion.nombre', label: 'Sujeto Fiscalizado', sortable: true,visible:true },
                //  { key: 'inspectores', label: 'Inspectores', 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:@json($datos),
            currentPage: 1,
            perPage: 20,
            totalRows:0,
            filtro:"",
            sortBy: '{{ app('request')->input('sortBy','id') }}',
            sortDesc: {{ app('request')->input('desc','true') }},
            sortDirection: 'asc',
            
           }
        }
    },
    computed: {},
    mounted() {
        this.tablaDatos.totalRows = this.tablaDatos.datos.length;
        this.tablaDatos.currentPage = 1;
    },
    methods:{
        buscarTermino(){
            console.log("fn buscarTermino")
            this.tablaDatos.filtro = this.termino;
        },
        onFiltered(filteredItems) {
            this.tablaDatos.totalRows = filteredItems.length;
            this.tablaDatos.currentPage = 1;
        },



    }
});
</script>


@endpush