@extends('layouts.app')

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

        <div v-if="status">
            <div :class="['alert', `alert-${status.type}`]">
                @{{ status.message }}
            </div>
        </div>

        <b-form @submit="onSubmit">
            <div class="card">
                <div class="card-body">
                    <b-form-group label-cols-md="4" label="Fecha Notificación">
                        <datetime-picker v-model="fecha_notificacion" id="fecha_notificacion"
                                         :first-day-of-week="1" :clearable="false"
                                         format="YYYY-MM-DD HH:mm"
                                         type="datetime" lang="es" required>
                        </datetime-picker>

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

                    <b-form-group label-cols-md="4" label="Fecha Emisión">
                        <datetime-picker v-model="fecha_documento" id="fecha_documento"
                                         :first-day-of-week="1" :clearable="false"
                                         format="YYYY-MM-DD HH:mm"
                                         type="datetime" lang="es" required>
                        </datetime-picker>

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

                    <b-form-group label-cols-md="4" label="Factura Electronica N°">
                        <b-input v-model="n_documento" type="number" required></b-input>
                        <input-error :errors="errors" nombre="n_documento"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Rut Envio">
                        <b-input v-model="rut" required></b-input>
                        <input-error :errors="errors" nombre="rut"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Emisor">
                        <b-input v-model="proveedor" required></b-input>
                        <input-error :errors="errors" nombre="proveedor"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Monto Total">
                        <b-input v-model="monto" type="number" required></b-input>
                        <input-error :errors="errors" nombre="monto"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Identificador de envío">
                        <b-input v-model="id_envio" type="number" required></b-input>
                        <input-error :errors="errors" nombre="id_envio"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Fecha de Recepción">
                        <datetime-picker v-model="fecha_cesion" id="fecha_cesion"
                                         :first-day-of-week="1" :clearable="false"
                                         format="YYYY-MM-DD HH:mm:ss"
                                         type="datetime" lang="es" required>
                        </datetime-picker>

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

                    <b-form-group label-cols-md="4" label="Cedido por">
                        <b-input v-model="empresa_factoring" required></b-input>
                        <input-error :errors="errors" nombre="empresa_factoring"></input-error>
                    </b-form-group>
                </div>
            </div>

            <div class="card my-3">
                <div class="card-body">
                    <h4>Adjuntos</h4>

                    <div class="mb-2">
                        <b-btn variant="primary" @click="agregarReferencia()">Agregar Adjunto</b-btn>
                    </div>

                    <div>
                        <div v-for="(referencia, index) in adjuntos" :key="index">
                            <div class="row">
                                <div class="col-10">
                                    <b-file v-model="referencia.archivo" placeholder="Elija archivo"
                                            accept=".jpg, .png, .pdf, .zip, .txt"></b-file>
                                </div>
                                <div class="col-2">
                                    <b-btn variant="danger" @click="adjuntos.splice(index, 1)">Quitar</b-btn>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input-error :errors="errors" nombre="adjuntos"></input-error>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <b-form-group label-cols-md="4" label="Observaciones">
                        <textarea v-model="observaciones" class="form-control" name="observaciones" id="observaciones"
                                  cols="30"
                                  rows="10"></textarea>
                        <input-error :errors="errors" nombre="observaciones"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Area">
                        <select v-model="area_id" name="area" id="area" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($areas as $area)
                                <option value="{{ $area->id }}">{{ $area->nombre }}</option>
                            @endforeach
                        </select>
                        <input-error :errors="errors" nombre="area"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Estado">
                        <select v-model="estado" name="estado" id="estado" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($estados as $estado)
                                <option value="{{ $estado }}">{{ $estado }}</option>
                            @endforeach
                        </select>
                        <input-error :errors="errors" nombre="estado"></input-error>
                    </b-form-group>

                    <b-form-group label-cols-md="4" label="Informados">
                        <ul>
                            <li v-for="(informado, index) in informados" :key="index">
                                "@{{ informado.user.full_name }}" <@{{ informado.user.email }}>
                            </li>
                        </ul>
                    </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: () => ({
                fecha_notificacion: '',
                fecha_documento: '',
                n_documento: '',
                rut: '',
                proveedor: '',
                monto: '',
                id_envio: '',
                fecha_cesion: '',
                empresa_factoring: '',
                adjuntos: [],
                observaciones: '',
                area_id: '',
                estado: '',

                correos: @json($correos),

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

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

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

                        const formData = new FormData()
                        formData.append('fecha_notificacion', moment(this.fecha_notificacion).format('YYYY-MM-DD HH:mm:ss'))
                        formData.append('fecha_documento', moment(this.fecha_documento).format('YYYY-MM-DD HH:mm:ss'))
                        formData.append('n_documento', this.n_documento)
                        formData.append('rut', this.rut)
                        formData.append('proveedor', this.proveedor)
                        formData.append('monto', this.monto)
                        formData.append('estado', this.estado)
                        formData.append('id_envio', this.id_envio)
                        formData.append('fecha_cesion', moment(this.fecha_cesion).format('YYYY-MM-DD HH:mm:ss'))
                        formData.append('empresa_factoring', this.empresa_factoring)

                        for (let adjunto of this.adjuntos) {
                            formData.set('adjuntos[]', adjunto.archivo)
                        }

                        formData.append('observaciones', this.observaciones)
                        formData.append('area_id', this.area_id)

                        try {
                            const res = await this.$http.post('{{ route('facturas-factorizadas.facturas.store') }}', formData)
                            window.location = route('facturas-factorizadas.facturas.index')
                        } catch (err) {
                            console.log(err)

                            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
                    }
                },

                agregarReferencia() {
                    this.adjuntos.push({
                        archivo: null,
                    })
                }
            },

            computed: {
                informados() {
                    if (this.area_id == '') {
                        return []
                    }

                    return this.correos.filter(e => {
                        const areas = e.areas.map(x => x.id)

                        return _.includes(areas, parseInt(this.area_id))
                    })
                }
            }
        })
    </script>
@endpush