@extends('layouts.app')

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

    <b-form @submit="onSubmit">
        <div class="card mb-3">
            <div class="card-body">
                @component('components.form-group', ['titulo' => 'Fecha', 'nombre' => 'fecha'])
                    <datetime-picker v-model="fecha" id="fecha" type="date" lang="es" :first-day-of-week="1"
                                     required format="DD/MM/YYYY" :clearable="false">
                    </datetime-picker>
                @endcomponent

                @component('components.form-group', ['titulo' => 'Decreto', 'nombre' => 'decreto'])
                    <input v-model="decreto" name="decreto" id="decreto" class="form-control" required>
                @endcomponent
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                @component('components.form-group', ['titulo' => 'Funcionario', 'nombre' => 'funcionario'])
                    <div class="mb-3">
                        <v-select class="itemes-select" v-model="funcionarioActual" :options="funcionarios"></v-select>
                        <button type="button" class="btn btn-primary" @click="agregarFuncionario()">Agregar</button>
                        <button type="button" class="btn btn-primary" @click="agregarTodosLosFuncionarios()">Agregar Todos</button>
                    </div>
                @endcomponent

                <b-form-group horizontal label="N° Dias">
                    <b-input-group>
                        <input v-model="dias" type="number" class="form-control">
                        <button class="btn btn-primary" type="button" @click="onCargarDias">Cargar</button>
                    </b-input-group>
                </b-form-group>

                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th></th>
                            <th>Nombre</th>
                            <th>Dias</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(funcionario, index) in funcionariosActuales" :key="index">
                            <td>
                                <div class="form-check">
                                    <label class="form-check-label"></label>
                                    <input v-model="funcionario.selected" type="checkbox" class="form-check-input">
                                </div>
                            </td>
                            <td>@{{ funcionario.nombre }}</td>
                            <td>
                                <input v-model="funcionario.dias" type="number" step="0.1" class="form-control" required>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger" @click="funcionariosActuales.splice(index, 1)">Quitar</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card-footer">
                <div class="d-flex justify-content-end">
                    <button class="btn btn-primary" :disabled="loading">Guardar</button>
                </div>
            </div>
        </div>
    </b-form>
    </div>
@endsection

@push('pre-scripts')
    <script>
    const includes = (haystack, needle) => {
        return haystack.filter(e => e.id === needle.id).length !== 0
    }

    window.pageMix.push({
        data: () => ({
            loading: false,
            fecha: '{{ fechaFormato($permiso->fecha, 'Y-m-d H:i:s') }}',
            decreto: '{{ $permiso->decreto }}',
            dias: 15,

            funcionarioActual: null,
            funcionariosActuales: [],

            funcionarios: @json($funcionarios)
        }),

        created () {
            this.funcionarios = this.funcionarios.map(e => ({
                ...e,
                label: e.name + ' ' + e.last_name
            }))

            this.funcionariosActuales = @json($funcionariosActuales)
        },

        methods: {
            agregarTodosLosFuncionarios() {
                const funcionariosActuales = this.funcionariosActuales.map(funcionarioActual => funcionarioActual.id)
                const funcionarios = this.funcionarios.filter(funcionario => !_.includes(funcionariosActuales, funcionario.id))

                this.funcionariosActuales = funcionarios.map(e => ({
                    selected: false,
                    id: e.id,
                    nombre: e.label,
                    dias: this.dias,
                }))
            },

            agregarFuncionario () {
                if (this.funcionarioActual && !includes(this.funcionariosActuales, this.funcionarioActual)) {
                    this.funcionariosActuales.push({
                        selected: false,
                        id: this.funcionarioActual.id,
                        nombre: this.funcionarioActual.label,
                        dias: this.dias,
                    })
                }
            },

            onCargarDias () {
                const seleccionados = this.funcionariosActuales.filter(e => e.selected)

                if (seleccionados.length > 0) {
                    this.funcionariosActuales = this.funcionariosActuales.map(e => {
                        if (e.selected) {
                            return {
                                ...e,
                                dias: this.dias
                            }
                        }

                        return e
                    })
                } else {
                    this.funcionariosActuales = this.funcionariosActuales.map(e => ({
                        ...e,
                        dias: this.dias
                    }))
                }
            },

            onSubmit (evt) {
                evt.preventDefault()

                if (!this.loading) {
                    this.loading = true

                    const funcionarios = {}

                    for (let funcionario of this.funcionariosActuales) {
                        funcionarios[funcionario.id] = {
                            dias: funcionario.dias
                        }
                    }

                    const data = {
                        fecha: this.$moment(this.fecha).format('YYYY-MM-DD'),
                        decreto: this.decreto,
                        funcionarios: funcionarios
                    }

                    this.$http.put('{{ route('compensacion-horas.permisos-administrativos.index') }}/{{ $permiso->id }}', data)
                        .then(res => {
                            console.log(res)
                            this.loading = false

                            window.location = '{{ route('compensacion-horas.permisos-administrativos.index') }}'
                        })
                        .catch(err => {
                            console.log(err)
                            this.loading = false
                        })
                }
            }
        }
    })
    </script>
@endpush