@extends('layouts.app')

@section('content')
    <div class="bgc-white p-20 bd">
    <h3>Feriados</h3>

    <div class="card mb-3">
        <div class="card-body">
            <b-form-group horizontal label="Año">
                <datetime-picker v-model="year_full" id="fecha" type="year" format="YYYY" lang="es" :clearable="false"></datetime-picker>
            </b-form-group>
        </div>

        <div class="card-footer">
            <div class="d-flex justify-content-end">
                <button class="btn btn-primary" type="button" @click="filtrar">Filtrar</button>
            </div>
        </div>
    </div>

    <full-calendar ref="calendario" :events="feriados" :config="config" @day-click="onDayClick"
                   @event-selected="onEventClick"
    ></full-calendar>
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                year: '{{ date('Y') }}',
                year_full: '{{ fechaFormato(now(), 'ISO8601') }}',

                cargando_dias: [],

                config: {
                    weekends: false,
                    editable: false,
                    defaultView: 'month',
                    locale: 'es',
                    header: {
                        left: 'title',
                        center: '',
                        right: 'today prev,next'
                    }
                },

                timeFormat: {
                    year: 'numeric'
                },

                feriados: []
            }),

            mounted() {
                this.obtener()
            },

            methods: {
                filtrar() {
                    this.obtener()
                },

                obtener() {
                    const year = this.$moment(this.year_full)
                    this.year = year.format('YYYY');
                    this.$refs.calendario.fireMethod('gotoDate', year)

                    this.$http.get('{{ route('compensacion-horas.feriados.index') }}', {
                        params: {year: this.year}
                    }).then(response => {
                        this.feriados = response.data
                    })

                },

                onDayClick(date, jsEvent, view) {
                    console.log('onDayClick', date)

                    const fecha = date.format('YYYY-MM-DD')

                    const dia = this.cargando_dias.filter(e => e.date === fecha)[0]

                    if (!dia) {
                        this.cargando_dias.push({date: fecha})

                        this.$http.post('{{ route('compensacion-horas.feriados.store') }}', {fecha})
                            .then(res => {
                                this.cargando_dias = this.cargando_dias.filter(e => e.date !== fecha)
                                this.obtener()
                            })
                            .catch(err => {
                                this.cargando_dias = this.cargando_dias.filter(e => e.date !== fecha)
                            })
                    }
                },

                onEventClick(event, jsEvent, view) {
                    console.log('onEventClick', event)
                    const date = event.start

                    const fecha = date.format('YYYY-MM-DD')

                    const dia = this.cargando_dias.filter(e => e.date === fecha)[0]

                    if (!dia) {
                        this.cargando_dias.push({date: fecha})

                        this.$http.post('{{ route('compensacion-horas.feriados.store') }}', {fecha})
                            .then(res => {
                                this.cargando_dias = this.cargando_dias.filter(e => e.date !== fecha)

                                this.obtener()
                            })
                            .catch(err => {
                                this.cargando_dias = this.cargando_dias.filter(e => e.date !== fecha)
                            })
                    }
                },
            }
        })
    </script>
@endpush