@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" aria-current="page"><a href="{{ route('beneficiosmunicipales.index')}}">Beneficios Municipales</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('solicitud-permiso.informehoras.create')}}" class="btn btn-primary">Nueva Solicitud</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="params.mes" value-field="id" text-field="label" 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="anios" v-model="params.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="params.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="params.busqueda" v-on:keyup.enter="$refs.tabla.refresh();"></b-form-input>
                <b-input-group-append>
                    <b-button @click="$refs.tabla.refresh();" 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"
            :fields="fields"
            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(funcionario)="data">
                <span class="text-capitalize">@{{data.item.user.full_name  }}</span>
            </template>

            <template v-slot:cell(periodo)="data">
                <span class="text-capitalize">@{{meses[(data.item.mes-1)].label}} @{{data.item.anio}}</span>
            </template>

            <template v-slot:cell(solicitado)="data">
                <span class="text-capitalize"><b>@{{ data.item.params.horas25 }} Horas</b> al 25%</span></br>
                <span class="text-capitalize"><b>@{{ data.item.params.horas50 }} Horas</b> al 50%</span>
            </template>

          

            <template v-slot:cell(estado)="data">
               @{{estados[data.item.estado] ?? '' }}
            </template>
            <template class="text-right gap-1" v-slot:cell(opciones)="data">
                <a class="btn bgc-blue-grey-500 text-light btn-sm" @click="getBitacora(data.item)"><i class="fa fa-history"></i></a>
               <a class="btn text-light bgc-teal-200 btn-sm" :href="this.route('solicitud-permiso.informehoras.view',{id:data.item.id})"><i class="fa fa-search"></i></a>
               <a class="btn btn-info btn-sm" :href="this.route('solicitud-permiso.informehoras.edit',{id:data.item.id})"><i class="fa fa-edit"></i></a>
              
            </template>

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

</b-card>


<b-modal size="xl" id="modal-bitacora" ref="modal-bitacora" :title="titulobitacora">
<b-table :items="bitacora"
:fields="[{'key':'user.full_name','label':'Usuario'},
        {'key':'created_at','label':'Fecha'},
        {'key':'nombre','label':'Estado'},
        {'key':'observaciones','label':'Observación'},
        ]"
            >


</b-table>

</b-modal>


@endsection

@push('pre-scripts')

<script>
    window.pageMix.push({

        data() {
            return {
                titulo_pagina: "Mis Solicitudes de Horas Extraordinarias",
                sortBy: "{{ app('request')->input('sortBy ','id ') }}",
                sortDesc: null,
                sortDirection: 'desc',
                currentPage: 1,
                totalRows: 0,
                perPage: 20,
                
                meses:[],
                anios:[],
                estados:[],

                overlay:false,
                bitacora:{},
                titulobitacora:'',

                
                fields: [{
                        key: 'id',
                        label: 'ID',
                        sortable: true
                    },
                    {
                        key: 'funcionario',
                        label: 'Funcionario',
                        sortable: true
                    },
                    {
                        key: 'periodo',
                        label: 'Periodo',
                        sortable: true
                    },
                  
                    {
                        key: 'solicitado',
                        label: 'Solicitado',
                        sortable: true
                    },
                    {
                        key: 'estado',
                        label: 'Estado',
                        sortable: true
                    },
                    {
                        key: 'opciones',
                        label: 'Opciones',
                        sortable: true
                    },
                ],
                params:{
                    busqueda:null,
                    mes:null,
                    anio:null,
                    estado:null,
                    npagina:1,
                    totalitems:null,
                    nporpagina:10,
                }
            }
        },
        mounted() {
            //meses y años
            let that = this
            moment.months().forEach((function(i, o) {
                that.meses.push({id:(o+1),label:i});
            }), (that))
            let fecha = new Date();
            this.anios =[fecha.getFullYear()-1,fecha.getFullYear(),fecha.getFullYear()+1];

            //estados
            axios.get("{{ route('solicitud-permiso.informehoras.cargarestados')}}").then(response => {
                for (var i = 0; i < response.data.length; i+=1) {
                    this.estados.push({ item: 'A', name: 'Option A' });
                }

                 this.estados = response.data;
            });

        },
        methods: {
            myProvider (ctx, callback) {
                let promise = axios.post(route('solicitud-permiso.informehoras.cargarsolicitudes'),this.params)
                return promise.then((data) => {
                    this.params.nporpagina = data.data.per_page;
                    this.params.npagina = data.data.current_page;
                    this.params.totalitems = data.data.total;
                    
                    console.log(data.data.data);


                    return(data.data.data)
                }).catch(error => {
                    return []
                })
            },


            format_date(value, formato) {
                if (value) {
                    return moment(String(value)).format(formato)
                }
            },
            fechaFormato(value, format) {
                let date = new Date(value)
                if (format == 'd')
                    return date.toLocaleDateString();
                else
                    return date.toLocaleDateString() + " " + date.toLocaleTimeString([], {
                        hour: '2-digit',
                        minute: '2-digit'
                    });
            },
            sortingChanged(ctx) {
                //console.log(ctx);   
            },
            getBitacora(item){
                this.bitacora =item.bitacora;
                this.titulobitacora = "Bitácora de Informe N°"+item.id;
                this.$refs['modal-bitacora'].show()
            }

        }
    });
</script>
@endpush