@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">Recursos Humanos</li> 
    <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('compensacion-horas.permisos-aprobados.index')}}">Permisos Aprobados</a></li>
  </ol>
</nav>
@stop

@section('content')
    <div class="bgc-white p-20 bd">
        <h3>Permisos Aprobados</h3>
        <b-overlay :show="loading" rounded="sm">
            <div class="card mb-3">
                <div class="card-body row">

                <b-tabs pills card class="col-12">
                    <b-tab title="Búsqueda" active>

                        <b-input-group class="mt-3">
                            <b-form-input v-model="nombre" placeholder="ID, nombre, apellido, rut o email funcionario " name="buscar" ></b-form-input>
                            <b-input-group-append>
                            <b-button variant="primary" @click="buscarTermino" type="button">Buscar</b-button>
                            <b-button variant="secondary" @click="Exportar" type="button">Exportar</b-button>

                            </b-input-group-append>
                        </b-input-group>
                        <b-form-checkbox
                        switches
                            v-model="anulados"
                            name="anulados"
                            value="1"
                            unchecked-value="0"
                            class="mt-2"
                            size="sm"
                            >
                        Incluir Anulados
                        </b-form-checkbox>
                    </b-tab>

    
                    <b-tab title="Avanzada" >
                        <div >
                        <div class="col-12 row">
                        <b-form-group  class="col-sm-12" horizontal label="Nombre" label-for="nombre">
                            <input v-model="nombre" id="nombre" name="nombre" type="text" class="form-control">
                            <b-form-checkbox
                            switches
                            v-model="anulados"
                            name="anulados"
                            value="1"
                            unchecked-value="0"
                            class="mt-2 col-sm-6"
                            size="sm"
                            >
                        Incluir Anulados
                        </b-form-checkbox>
                        </b-form-group>

                        <b-form-group class="col-sm-6" label="Fecha Inicio" label-for="fecha_inicio">
                            <input v-model="fecha_inicio" id="fecha_inicio" name="fecha_inicio" type="date"
                                class="form-control">
                        </b-form-group>

                        <b-form-group  class="col-sm-6"  label="Fecha Fin" label-for="fecha_fin">
                            <input v-model="fecha_fin" id="fecha_fin" name="fecha_fin" type="date" class="form-control">
                        </b-form-group>

                        <b-form-group horizontal  class="col-sm-6"  label="Tipo Contrato" label-for="tipo_contrato">
                            <select :v-model="tipo_contrato" :value="tipocontrato" @change="onChange($event)"
                                    name="tipo_contrato" id="tipo_contrato" class="form-control">
                                <option :value="tcontrato.tipo" v-for="tcontrato in tipo_contratos">
                                    @{{ tcontrato.texto }}
                                </option>
                            </select>
                        </b-form-group>

                        <b-form-group  class="col-sm-6"  horizontal label="Tipo Permiso" label-for="tipo_contrato">
                            <select :v-model="tipo_permiso" @change="ChangeExportar($event)" name="tipo_permiso"
                                    id="tipo_permiso" :value="tipopermiso" class="form-control">
                                <option :value="permiso.tipo" v-for="permiso in tipo_permiso">
                                    @{{ permiso.texto }}
                                </option>
                            </select>
                        </b-form-group>
                        <div class="d-flex justify-content-end mb-2" style="display: flex; align-items: baseline;">
                       

                        <button class="btn btn-primary" @click="buscarTermino">Filtrar</button>
                        <b-button variant="secondary" @click="Exportar" type="button">Exportar</b-button>
                    </div>
</div>
                    </div>
                    </b-tab>
                    </b-tabs>
                </div>
            </div>
           
<b-card>
    

<div class="mb-2 d-flex justify-content-between"><span class=""> @{{ datos.from }} al @{{ datos.to }} del total de @{{ datos.totalRows }} elementos</span>
                
    <b-pagination
        v-model="datos.currentPage"
        :total-rows="datos.totalRows"
        :per-page="datos.perPage"
        align="right"
        size="sm"
        @input="changePage"
    >
    </b-pagination>

</div>
    <b-table 
    ref="tabladatos"
    hover
    :items="myProvider"
    :fields="columnas"
    :per-page="datos.perPage"
    :current-page="datos.currentPage"
    :filter="filtro"
    head-variant="light"
    @row-selected="onRowSelected"
    :tbody-tr-class="rowClass"
    >
        

    <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(id)="data">
        <a :href="this.route('compensacion-horas.permisos-aprobados.show',{id:data.item.id})">@{{ data.item.id }}</a>
    </template>

    <template v-slot:cell(usuario)="data">
    @{{data.item.user.full_name  }}
    </template>

    <template v-slot:cell(solicita)="data">
            <span v-if="data.item.tipo_permiso=='TIEMPO_COMPENSATORIO'">
            <b>@{{data.item.horas }} Horas</b><br><sub>@{{ fechaFormato(data.item.fecha_desde, 'dt') }} al @{{ fechaFormato(data.item.fecha_hasta, 'dt') }}</sub> 
            </span>
            <span v-else>
            <b>@{{data.item.dias }} días</b><br/><sub>@{{ fechaFormato(data.item.fecha_desde, 'd') }} @{{data.item.fecha_desde_periodo}} al @{{ fechaFormato(data.item.fecha_hasta, 'd') }} @{{data.item.fecha_hasta_periodo}} </sub>
            </span>
    </template>

    <template v-slot:cell(aprobacion)="data">
    @{{ fechaFormato(data.item.aprobado_el, 'd/m/Y')  }}
    </template>

    <template v-slot:cell(opciones)="data">
        <div class="d-flex justify-content-center">
        <a title="PDF" class="btn btn-secondary btn-sm" target="_blank" :href="this.route('solicitud-permiso.solicitudes.pdf', {id:data.item.id})"><i class="fa fa-file"></i></a>
        @if(auth()->user()->tieneRoles('USUARIO_PERSONAL'))   
        <a title="Editar" v-if="data.item.estado!='ANULADO'" class="btn btn-info btn-sm" :href="this.route('compensacion-horas.permisos-aprobados.edit', {id:data.item.id})"><i class="fa fa-edit"></i></a>
        <a title="Anular" v-if="data.item.estado!='ANULADO'" class="btn btn-danger btn-sm" :href="this.route('compensacion-horas.permisos-aprobados.editanular', {id:data.item.id})"><i class="fa fa-trash"></i></a>
        @endif
        </div>   
    </template>

    </b-table>

    <b-pagination
    v-model="datos.currentPage"
    :total-rows="datos.totalRows"
    :per-page="datos.perPage"
    align="right"
    size="sm"
    class="col"
    @input="changePage"
    >
</b-pagination>
</b-card>
        </b-overlay>
{{--

        <div class="card">
            <div class="card-body">
                <div class="mb-2">Mostrando {{ $permisos->firstItem() }} a {{ $permisos->lastItem() }}
                    del total de {{ $permisos->total() }} elementos
                </div>

                {{ $permisos->links() }}
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>N°</th>
                            <th>Nombre</th>
                            <th>Tipo Contrato</th>
                            <th>Solicita</th>
                            <th>Fecha Aprobación</th>
                            <th>Tipo</th>
                            <th>Acciones</th>
                        </tr>
                        </thead>
                        <tbody>
                        @isset($permisos)
                            @foreach($perm as $permiso)
                                <tr>
                                    <td>{{ $permiso->id }}</td>
                                    <td>{{ $permiso->nombre }}</td>
                                    <td>{{ $permiso->user->tipo_contrato }}</td>
                                    @if( $permiso->tipo_permiso =='TIEMPO_COMPENSATORIO')
                                        <td>{{$permiso->horas}} Horas (In: {{fechaFormato($permiso->fecha_desde,'d/m/Y')}})</td>
                                    @else
                                        <td>{{$permiso->dias}} Días (In: {{fechaFormato($permiso->fecha_desde,'d/m/Y')}})</td>
                                    @endif
                                    <td>{{ fechaFormato($permiso->aprobado_el, 'd/m/Y') }}</td>

                                    <td>
                                        @switch($permiso->tipo_permiso)
                                            @case('FERIADO_LEGAL')
                                            Feriado Legal
                                            @break
                                            @case('PERMISO_REMUNERADO')
                                            Permiso con goce.
                                            @break
                                            @case('PERMISO_NO_REMUNERADO')
                                            Permiso sin goce.
                                            @break
                                            @case('MATRIMONIO')
                                            Permiso por Matrimonio
                                            @break
                                            @case('FALLECIMIENTO')
                                            Permiso por Fallecimiento
                                            @break
                                            @case('NACIMIENTO')
                                            Permiso por Nacimiento
                                            @break
                                            @case('TIEMPO_COMPENSATORIO')
                                            Tiempo Compensatorio
                                            @break
                                        @endswitch
                                    </td>
                                    <td>
                                  
                                    <a  title="Ver" class="btn btn-light btn-sm" href="{{ route('compensacion-horas.permisos-aprobados.show', ['id' => $permiso->id]) }}"><i class="fa fa-search"></i></a>
                                    @if(auth()->user()->tieneRoles('USUARIO_PERSONAL'))   
                                    <a title="Editar" class="btn btn-info btn-sm" href="{{ route('compensacion-horas.permisos-aprobados.edit', ['id' => $permiso->id]) }}"><i class="fa fa-edit"></i></a>
                                    @endif   
                                    <a title="PDF" class="btn btn-danger btn-sm" target="_blank" href="{{ route('solicitud-permiso.solicitudes.pdf', ['id' => $permiso->id]) }}"><i class="fa fa-file"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                        @endisset
                        </tbody>
                    </table>
                </div>
                @if(app('request')->input('buscar')!==null)
                {{ $permisos->appends(["buscar"=>app('request')->input('buscar')])->links() }}
            @else
                {{ $permisos->links() }}
            @endif
            </div>
        </div>

--}}
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                permisos: "",
                loading: false,
                disabled: true,
                tipo_contrato: '',
                tipocontrato: parseInt("{{ app('request')->input('tipo_contrato') ?? 0 }}"),
                nombre: "{{ app('request')->input('nombre') ?? '' }}",
                fecha_inicio: "{{ app('request')->input('fecha_inicio') ?? '' }}",
                fecha_fin: "{{ app('request')->input('fecha_fin') ?? '' }}",
                btn_exportar: true,
                tipopermiso: parseInt("{{ app('request')->input('tipo_permiso') ?? 0 }}"),
                tipo_permiso: [
                    {
                        tipo: 0,
                        texto: "TODOS"
                    },
                    {
                        tipo: 1,
                        texto: "FERIADOS LEGALES"
                    },
                    {
                        tipo: 2,
                        texto: "PERMISO CON GOCE DE REMUNERACIONES"
                    },
                    {
                        tipo: 3,
                        texto: "DEVOLUCIÓN DE TIEMPO COMPENSATIRIO"
                    },
                    {
                        tipo: 4,
                        texto: "PERMISO SIN GOCE DE REMUNERACIONES"
                    },
                    {
                        tipo: 5,
                        texto: "PERMISO POR FALLECIMIENTO"
                    },
                    {
                        tipo: 6,
                        texto: "PERMISO POR NACIMIENTO"
                    },
                    {
                        tipo: 7,
                        texto: "PERMISO POR MATRIMONIO"
                    }
                ],
                tipo_contratos: [
                    {
                        tipo: 0,
                        texto: "TODOS"
                    },
                    {
                        tipo: 1,
                        texto: "HONORARIOS"
                    },
                    {
                        tipo: 2,
                        texto: "HONORARIOS A SUMA ALZADA"
                    },
                    {
                        tipo: 3,
                        texto: "CONTRATA"
                    },
                    {
                        tipo: 4,
                        texto: "PLANTA"
                    },
                    {
                        tipo: 5,
                        texto: "CODIGO DEL TRABAJO"
                    }
                ],
                nombre_permisos:@json(config('compensacion-horas.tipo_permisos')),
                datos: [],
                columnas: [
                    { key: 'id', label: 'N°', sortable: false},
                    { key: 'usuario', label: 'Nombre', sortable: false},
                    { key: 'user.tipo_contrato', label: 'Tipo Contrato', sortable: false,visible:true },
                    { key: 'solicita', label: 'Solicita', sortable: false,visible:true },
                    { key: 'aprobacion', label: 'Fecha de Aprobación', sortable: false,visible:true },
                    { key: 'tipo_permiso', label: 'Tipo', sortable: false,visible:true },
                    { key: 'opciones', label: 'Opciones', sortable: false,visible:true },
                ],
                anulados:0,
                currentPage: 1,
                perPage: 10,
                totalRows:0,
                termino:"",
                filtro:"{{ app('request')->input('nombre') ?? '' }}",
                sortBy: '{{ app('request')->input('sortBy','id') }}',
                sortDesc: {{ app('request')->input('desc','true') }},
                sortDirection: 'asc',
            }),

            created() {

                //axios.get(route('compensacion-horas.permisos-aprobados.index')).then(response => this.datos = response.data.data);

                if (this.tipopermiso != 1 && this.tipopermiso != 2 && this.tipopermiso != 3) {
                    this.disabled = true;
                } else {
                    this.disabled = false;
                }
            },

            methods: {
                myProvider (ctx, callback) {
                    let param={
                        page:ctx.currentPage,
                        perPage:ctx.perPage,
                        sortBy:ctx.sortBy,
                        sortDesc:ctx.sortDesc,
                        filter:ctx.filter,
                        anulados:this.anulados,
                        //desde hasta
                        fecha_inicio:this.fecha_inicio,
                        fecha_fin:this.fecha_fin,

                        tipo_contrato:this.tipo_contrato,
                        tipo_permiso:this.tipopermiso,


                    };
                    console.info(param);
                    let url = route('compensacion-horas.permisos-aprobados.index');
                    let promise = axios.get(url,{params:param})
                    return promise.then((data) => {
                        console.log(data);
                        this.datos.perPage = data.data.per_page;
                        this.datos.currentPage = data.data.current_page;
                        this.datos.totalRows = data.data.total;
                        this.datos.from = data.data.from;
                        this.datos.to = data.data.to;
                        return(data.data.data)
                    }).catch(error => {
                        return []
                    })
                },
                rowClass(item, type) {
                    if (!item || type !== 'row') return
                    if (item.estado == 'ANULADO') return 'text-muted c-grey-400'
                },
                onRowSelected(items) {
                    let selected = [];
                    let datatabla = this.$refs["tabla-datos"].$data.localItems;
                    let self = this
                    items.forEach((element, index) => {
                        if (element.etapa.id!=self.selectEtapa) {
                            let idx = datatabla.findIndex(item => {
                                return item.id==element.id;
                            });
                            //console.log(idx);
                            // console.log(self.selectEtapa);
                            self.$refs["tabla-datos"].unselectRow(idx);
                        } else {
                            //console.log(element);
                            selected.push(element);
                        }
                    });
                    //console.log(selected)
                    this.seleccionados = selected;
                },
                changePage(page){
                    console.log("changePage "+page);
                    this.currentPage = page;
                },
                buscarTermino(){
                    console.log("busqueda");
                    this.filtro = this.nombre;
                    this.$refs.tabladatos.refresh()

                },
                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'});
                },
                Largo(dato) {
                    if (dato.length == 0) {
                        return false
                    } else {
                        return true;
                    }
                },

                onChange(event) {
                    this.tipocontrato = event.target.value;
                },

                Exportar() {
                    this.loading = true;
                    const formData = new FormData;
                    formData.append(
                        'nombre',
                        this.nombre
                    );

                    formData.append(
                        'fecha_inicio',
                        this.fecha_inicio
                    );

                    formData.append(
                        'fecha_fin',
                        this.fecha_fin
                    );

                    formData.append(
                        'tipo_contrato',
                        this.tipocontrato
                    );

                    formData.append(
                        'tipo_permiso',
                        this.tipopermiso
                    );

                    this.$http({
                        url: '{{ route('compensacion-horas.permisos-aprobados.exportar') }}',
                        method: 'POST',
                        data: formData,
                        responseType: 'blob'
                    }).then(
                        response => {
                            const url = window.URL.createObjectURL(
                                new Blob([response.data])
                            );
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute(
                                'download',
                                "detalle_permisos_" + moment().format('DD-MM-YYYY_h:m') + ".xlsx"
                            );
                            document.body.appendChild(link);
                            link.click();
                            this.loading = false
                        }
                    ).catch(
                        err => {
                            this.loading = false
                        }
                    );
                },

                ChangeExportar(event) {
                    if (event.target.value != 1 && event.target.value != 2 && event.target.value != 3) {
                        this.disabled = true;
                    } else {
                        this.disabled = false;
                    }
                    this.tipopermiso = event.target.value;
                }
            }
        })
    </script>
@endpush