@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('pagohonorarios.index') }}">@{{titulo_pagina}}</a></li>
  </ol>
</nav>
@stop

@section('content')
<b-card>

<div class="align-items-center d-flex justify-content-between">
        <h2 class="">@{{titulo_pagina}}</h2>
        <b-button-toolbar aria-label="Submenú toolbar" class="">
            <b-button-group class="mx-1">
              <a href="{{route('pagohonorarios.nuevo')}}" class="btn btn-primary">Nueva Nómina</a>             
              <a href="{{route('pagohonorarios.exportarexportar')}}" class="btn btn-secondary">Exportar</a>             
            </b-button-group>
          </b-button-toolbar>
</div>

<div class="row ">

    <b-form-group class="col-2">
        <label class="form-label">Mes</label>
        <b-form-select :options="meses" v-model="mes" value-field="id" text-field="nombre" placeholder="Seleccione Mes" @change="$refs.tabla.refresh();">
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione Mes --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <b-form-group class="col-2">
        <label class="form-label">Año</label>
        <b-form-select :options="periodos" v-model="anio" value-field="anio" text-field="anio" placeholder="Seleccione Año" @change="$refs.tabla.refresh();">
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione Año --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <b-form-group class="col-2">
        <label class="form-label">Estado</label>
        <b-form-select :options="estados" v-model="estado" value-field="id" text-field="nombre" placeholder="Seleccione Estado" @change="$refs.tabla.refresh();">
            <template #first>
                <b-form-select-option :value="null" >-- Seleccione Estado --</b-form-select-option>
            </template>
        </b-form-select>
    </b-form-group>
    <div class="col-6">
    <label class="form-label">&nbsp;</label>
    <b-input-group prepend="Búsqueda" class=" ">
    
      <b-form-input v-model="busqueda" v-on:keyup.enter="filtro=busqueda"></b-form-input>
      <b-input-group-append>
        <b-button @click="filtro=busqueda" variant="primary"><i class="fa fa-search"  ></i></b-button>
      </b-input-group-append>
    </b-input-group>
    </div>
</div>
<b-overlay :show="overlay" rounded="sm">
<b-table striped hover 
  :items="myProvider" 
  :xitems="items" 
  :fields="fields"
  :per-page="nporpagina"
  :current-page="npagina"
  :filter="filtro"
  stacked='sm'
  show-empty
  ref="tabla"
  >
    <template #table-busy>
      <div class="text-center text-danger my-2">
          <b-spinner class="align-middle"></b-spinner>
          <strong>Cargando Datos...</strong>
      </div>
    </template>
    <template #empty="scope">
      <div class="text-center text-danger my-2">
      <strong>Sin Datos</strong>
      </div>
    </template>

    <template #emptyfiltered="scope">
      <div class="text-center text-danger my-2">
      <strong>No hay datos que coincidan con su criterio de búsqueda</strong>
      </div>
    </template>


  <template v-slot:cell(nombre)="data">
    <a :href="this.route('pagohonorarios.ver',{'id':data.item.id})">@{{data.item.nombre}}</a>
  </template>


  <template v-slot:cell(mes)="data">
    @{{meses[data.item.mes].nombre}}
  </template>

  <template v-slot:cell(funcionarios_count)="data">
    <a href="#" @click="getFuncionarios(data.item.id)">@{{data.item.funcionarios_count}}</a>
  </template>

  <template v-slot:cell(estado)="data">
    <span class="btn btn-link" @click="cambiar_estado(data.item.estado,data.item.id,data.item.index)">@{{estados[data.item.estado].nombre}}</span>
  </template>
  <template class="text-right" v-slot:cell(opciones)="data">
    <span v-if="data.item.estado > 1">

      <b-button class="ml-1" :variant="colorBotones(data.item.estado)" size="sm" target="_blank" :href="this.route('pagohonorarios.exportardevengado',{'id':data.item.id})" >Devengado</b-button>
      <b-button class="ml-1" :variant="colorBotones(data.item.estado)" size="sm"  target="_blank" :href="this.route('pagohonorarios.exportardecreto',{'id':data.item.id})" >Decreto</b-button>
    </span>
    @can('personal', Modules\Contratos\Entities\Contratos::class) 
      <a v-if="data.item.estado< 4" :href="this.route('pagohonorarios.editar',{'id':data.item.id})"><i class="btn btn-info fa fa-edit" title="Editar Nómina"></i></a>
    @endcan
    
  </template>

</b-table>
</b-overlay>
<b-pagination
      v-model="npagina"
      :total-rows="totalitems"
      :per-page="nporpagina"
      aria-controls="my-table"
    ></b-pagination>

</b-card>

<b-modal id="modal-funcionarios" size="xl" centered title="Funcionarios">
<h3>@{{tablafuncionarios.nombre}}</h3>
<b-table striped hover 
  :items="tablafuncionarios.items" 
  :fields="tablafuncionarios.fields"
  stacked='sm'
  show-empty
  ref="tablafuncionarios"
  ></b-table>

</b-modal>
@endsection


@push('pre-scripts')

<script>
window.pageMix.push({
    data() {
        return {
            titulo_pagina:"Pago de Honorarios",
            filtro:'',
            busqueda:'', 
            nporpagina:20,
            npagina:1,
            totalitems:0,
            overlay:false,
            fields: [
              {key: 'id',sortable: true},
              {key: 'nombre',label: 'Nombre',sortable: true},
              {key: 'mes',label: 'Mes',sortable: false},
              {key: 'anio',label: 'Año',sortable: true},
              {key: 'funcionarios_count',label: 'N° Funcionarios',sortable: false,class:"text-center"},
              {key: 'estado',label: 'Estado',sortable: true},
              {key: 'opciones',label: 'Opciones',sortable: false,class:"text-right"},
            ],
            items:[],
            estados:[{id:0,nombre:''},{id:1,nombre:'En Borrador'},{id:2,nombre:'Preparado'},{id:3,nombre:'En Proceso'},{id:4,nombre:'Finalizado'}],
            estado:null,
            meses:[],
            periodos:[],
            mes:null,
            anio:null,
            tablafuncionarios:{
              nombre:'',
              items:[],
              fields:[
                {key: 'nombre',label: 'Nombre',sortable: true},
                {key: 'programa.nombre',label: 'Programa',sortable: true},
                {key: 'contrato.imputaciones[0].itempresupuestario.codigo',label: 'Imputación',sortable: true},
                {key: 'programa.agestion',label: 'A. gestión',sortable: true},
                {key: 'programa.centrocosto',label: 'C. Costo',sortable: true},
                {key: 'montototal',label: 'Valor',sortable: true,class:'text-right',formatter:function(value){return new Intl.NumberFormat("es-CL",{ style: "currency", currency: "CLP" }).format(value);}},
                
              ],
            }
        }
    },mounted(){
      axios.get("{{ route('pagohonorarios.getPeriodos')}}").then(response => {this.periodos = response.data });
      this.titulo_pagina = this.titulo_pagina + " -  {{$tipo?? ''}}" ;  
      this.mes=moment().month()+1;
      this.anio=moment().year();
      
    },created(){
      let that = this;
      that.meses.push({id:0,nombre:'-'});
      moment.months().forEach((function(i, o) {
          that.meses.push({id:o+1,nombre:i.charAt(0).toUpperCase() + i.slice(1)});
      }),(that));


    },
    methods:{
      borrarItem(id){
          this.$swal.fire("borrando");
      },
      colorBotones(estado){
        //console.log(estado);
        switch(estado){
          case 1:
            return '';
            break;
          case 2:
            return 'success';
            break;
          case 3:
            return 'warning';
            break;
          case 4:
            return 'light';
            break;
          default:
            break;
        }
      },
      myProvider (ctx, callback) {
          //console.log(ctx);
          let param={
              page:ctx.currentPage,
              perPage:ctx.perPage,
              sortBy:ctx.sortBy,
              sortDesc:ctx.sortDesc,
              filter:ctx.filter,
              estado:this.estado,
              mes:this.mes,
              anio:this.anio,
          };
          let promise = axios.get(route('pagohonorarios.getNominas'),{params:param})
          return promise.then((data) => {
              this.nporpagina = data.data.per_page;
              this.npagina = data.data.current_page;
              this.totalitems = data.data.total;
              return(data.data.data)
          }).catch(error => {
              return []
          })
      },

      getFuncionarios(id){
        let that = this;
        this.overlay=true;
        axios({
          url: route('pagohonorarios.getfuncionarios',{'id':id}),
          method: 'GET',
          }).then((response) => {
            that.tablafuncionarios.items = response.data.funcionarios;
            that.tablafuncionarios.nombre = response.data.nombre;

            that.$bvModal.show("modal-funcionarios");
            that.overlay=false;
          }).catch(error => {
            console.log(error)
            that.$swal.fire({text:"Error en la petición al servidor"});
            that.overlay=false;
          });

      },
      currency(value) {
                return new Intl.NumberFormat("es-CL",{ style: "currency", currency: "CLP" }).format(value);
      },

      cambiar_estado(estado,id,index){
        let that = this;
        this.$swal.fire({
            title: 'Cambiar Estado de Nómina',
            html:'<label class="col text-left"><input type="radio" name="swal-input1" value="1"> En Borrador</label> \
                  <label class="col text-left"><input type="radio" name="swal-input1" value="2"> Preparado</label> \
                  <label class="col text-left"><input type="radio" name="swal-input1" value="3"> En Proceso</label>  \
                  <label class="col text-left"><input type="radio" name="swal-input1" value="4"> Finalizado</label>',
              focusConfirm: false,
              showCancelButton:true,
              onBeforeOpen: () => {
                document.querySelector('input[type=radio][name=swal-input1][value="'+estado+'"]').checked=true;
              },
              preConfirm: () => {
                return {
                    estado:(document.querySelector('input[type=radio][name=swal-input1]:checked')!=null)?document.querySelector('input[type=radio][name=swal-input1]:checked').value:null,
                }
              }
        })
        .then(function(result) {
          if(result.isConfirmed){
            if(result.value.estado!=null){
              axios({
              data:result.value,
              url: route('pagohonorarios.cambiarestado',{'id':id}),
              method: 'POST',
              }).then((response) => {
              if(response.data.estado==="OK"){
                  //falta toast de ok
                  //console.log(response.data)
                  that.$swal.fire({
                      position: 'top-end',
                      icon: 'success',
                      title: 'Cambio de estado realizado',
                      showConfirmButton: false,
                      timer: 1500
                  });
                  that.$refs.tabla.refresh();
                 // that.$root.$emit('bv::refresh::table', 'tabla')
              }else{
                  this.$swal.fire("Error al intentar cambiar el estado de la nómina")
              }
              }).catch(error => {
                console.log(error)
                  that.$swal.fire({text:"Error en la petición al servidor"});
              });

            }
          }


            // if(result.isConfirmed){
          
            // }
            //console.log("result",result);
        });
  }
    }

});
</script>
@endpush