@extends('layouts.app')

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

        <b-form @submit="onSubmit">
            @csrf
            <div class="card">
                <div class="card-body">
                    <b-form-group horizontal label="Usuarios">
                        <b-input v-model="userSearch"></b-input>

                        <div style="max-height: 400px; overflow: scroll">
                            <b-form-checkbox-group v-model="selectedUsers" stacked>
                                <b-form-checkbox
                                    v-for="(user, index) in filteredUsers"
                                    :key="index"
                                    :value="user.id">@{{ user.full_name }} - @{{ user.email }}</b-form-checkbox>
                            </b-form-checkbox-group>
                        </div>

                        <input-error nombre="users" :errors="errors"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Area">
                        <b-form-checkbox-group v-model="areas">
                            @foreach($areas as $key => $area)
                                <b-form-checkbox value="{{ $area->id }}">{{ $area->nombre }}</b-form-checkbox>
                            @endforeach
                        </b-form-checkbox-group>
                        <input-error nombre="areas" :errors="errors"></input-error>
                    </b-form-group>
                </div>

                <div class="card-footer">
                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary" :disabled="loading">
                            @{{ loading ? 'Guardando...' : 'Guardar' }}
                            <span v-show="loading" class="fa fa-spinner fa-spin"></span>
                        </button>
                    </div>
                </div>
            </div>
        </b-form>
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                userSearch: '',
                users: @json($users),

                selectedUsers: [],
                areas: [],

                loading: false,
                errors: {},
                status: null
            }),

            methods: {
                onSubmit(evt) {
                    evt.preventDefault()


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

                        this.$http.post('{{ route('facturas-factorizadas.correos.store') }}', {
                            users: this.selectedUsers,
                            areas: this.areas
                        })
                            .then(res => {
                                window.location = '{{ route('facturas-factorizadas.correos.index') }}'
                                this.loading = false
                            })
                            .catch(err => {
                                console.log(err)

                                if (err.response) {
                                    if (err.response.status === 500) {
                                        this.status = err.response.data.status
                                    }

                                    if (err.response.status === 422) {
                                        this.errors = err.response.data.errors
                                    }
                                }
                                this.loading = false
                            })
                    }
                }
            },

            computed: {
                filteredUsers() {
                    return this.users.filter(user => {
                        const query = []

                        query.push(this.$_.toUpper(user.full_name).includes(this.$_.toUpper(this.userSearch)))
                        query.push(this.$_.toUpper(user.email).includes(this.$_.toUpper(this.userSearch)))

                        return this.$_.some(query)
                    })
                }
            }
        })
    </script>
@endpush