@extends('layouts.app')


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

    <div class="bgc-white p-20 bd">
        <h3>Agregar Registro - Comodato Recibido</h3>

        <b-form id="formulario" @submit="onSubmit">
            @component('components.form-group', ['nombre' => 'n_carpeta_jur', 'titulo' => 'N° CARPETA JUR.'])
                <input v-model="n_carpeta_jur" class="form-control" type="number" name="n_carpeta_jur">

                <div v-if="errors && errors.n_carpeta_jur" class="text-danger">
                    @{{ errors.n_carpeta_jur[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'nombre_organizacion', 'titulo' => 'NOMBRE ORGANIZACIÓN'])
                <input v-model="nombre_organizacion" class="form-control" type="text" name="nombre_organizacion">

                <div v-if="errors && errors.nombre_organizacion" class="text-danger">
                    @{{ errors.nombre_organizacion[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'id_ingreso', 'titulo' => 'ID INGRESO'])
                <input v-model="id_ingreso" class="form-control" type="number" name="id_ingreso">

                <div v-if="errors && errors.id_ingreso" class="text-danger">
                    @{{ errors.id_ingreso[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'fecha_ingreso', 'titulo' => 'FECHA DE INGRESO'])
                <input v-model="fecha_ingreso" class="form-control" type="date" name="fecha_ingreso">

                <div v-if="errors && errors.fecha_ingreso" class="text-danger">
                    @{{ errors.fecha_ingreso[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'ubicacion', 'titulo' => 'UBICACIÓN'])
                <input v-model="ubicacion" class="form-control" type="text" name="ubicacion">

                <div v-if="errors && errors.ubicacion" class="text-danger">
                    @{{ errors.ubicacion[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'contacto', 'titulo' => 'CONTACTO'])
                <input v-model="contacto" class="form-control" type="text" name="contacto">

                <div v-if="errors && errors.contacto" class="text-danger">
                    @{{ errors.contacto[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'destino', 'titulo' => 'DESTINO'])
                <input v-model="destino" class="form-control" type="text" name="destino">

                <div v-if="errors && errors.destino" class="text-danger">
                    @{{ errors.destino[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'rol_avaluo', 'titulo' => 'ROL AVALÚO'])
                <input v-model="rol_avaluo" class="form-control" type="text" name="rol_avaluo">

                <div v-if="errors && errors.rol_avaluo" class="text-danger">
                    @{{ errors.rol_avaluo[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'superficie', 'titulo' => 'SUPERFICIE'])
                <input v-model="superficie" class="form-control" type="text" name="superficie">

                <div v-if="errors && errors.superficie" class="text-danger">
                    @{{ errors.superficie[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'tipo_inscripcion_id', 'titulo' => 'TIPO INSCRIPCIÓN'])
                <select v-model="tipo_inscripcion_id" name="tipo_inscripcion_id" id="tipo_inscripcion_id"
                        class="form-control">
                    <option value="">Seleccione</option>
                    @foreach($tiposInscripcion as $tipoInscripcion)
                        <option value="{{ $tipoInscripcion->id }}">{{ $tipoInscripcion->nombre }}</option>
                    @endforeach
                </select>

                <div v-if="errors && errors.tipo_inscripcion_id" class="text-danger">
                    @{{ errors.tipo_inscripcion_id[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'inscripcion_cons_b_raices', 'titulo' => 'INSCRIPCIÓN CONS. B. RAICES'])
                <input v-model="inscripcion_cons_b_raices" class="form-control" type="text"
                       name="inscripcion_cons_b_raices">

                <div v-if="errors && errors.inscripcion_cons_b_raices" class="text-danger">
                    @{{ errors.inscripcion_cons_b_raices[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'fecha_informe_juridico', 'titulo' => 'Fecha Informe Jurídico'])
                <input v-model="fecha_informe_juridico" class="form-control" type="date"
                       name="fecha_informe_juridico">

                <div v-if="errors && errors.fecha_informe_juridico" class="text-danger">
                    @{{ errors.fecha_informe_juridico[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'n_memo', 'titulo' => 'N° Memo'])
                <input v-model="n_memo" class="form-control" type="number" name="n_memo">

                <div v-if="errors && errors.n_memo" class="text-danger">
                    @{{ errors.n_memo[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'factible_secpla', 'titulo' => 'Técnicamente factible (SECPLA)'])
                <select v-model="factible_secpla" name="factible_secpla" id="factible_secpla" class="form-control">
                    <option value="">Seleccione</option>
                    <option value="Si">Si</option>
                    <option value="No">No</option>
                    <option value="No Aplica">No Aplica</option>
                </select>

                <div v-if="errors && errors.factible_secpla" class="text-danger">
                    @{{ errors.factible_secpla[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'aprueba_concejo', 'titulo' => 'Aprueba Concejo'])
                <select v-model="aprueba_concejo" name="aprueba_concejo" id="aprueba_concejo" class="form-control">
                    <option value="">Seleccione</option>
                    <option value="Si">Si</option>
                    <option value="No">No</option>
                </select>

                <div v-if="errors && errors.aprueba_concejo" class="text-danger">
                    @{{ errors.aprueba_concejo[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'sesion_concejo_m', 'titulo' => 'Sesión Concejo M.'])
                <input v-model="sesion_concejo_m" class="form-control" type="number" id="sesion_concejo_m"
                       name="sesion_concejo_m">

                <div v-if="errors && errors.sesion_concejo_m" class="text-danger">
                    @{{ errors.sesion_concejo_m[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'fecha_sesion', 'titulo' => 'Fecha Sesión'])
                <input v-model="fecha_sesion" class="form-control" type="date" id="fecha_sesion" name="fecha_sesion">

                <div v-if="errors && errors.fecha_sesion" class="text-danger">
                    @{{ errors.fecha_sesion[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'n_decreto', 'titulo' => 'N° DECRETO'])
                <input v-model="n_decreto" class="form-control" type="number" id="n_decreto" name="n_decreto">

                <div v-if="errors && errors.n_decreto" class="text-danger">
                    @{{ errors.n_decreto[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'fecha', 'titulo' => 'FECHA'])
                <input v-model="fecha" class="form-control" type="date" id="fecha" name="fecha">

                <div v-if="errors && errors.fecha" class="text-danger">
                    @{{ errors.fecha[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'id_decreto', 'titulo' => 'ID DECRETO'])
                <input v-model="id_decreto" class="form-control" type="number" id="id_decreto" name="id_decreto">

                <div v-if="errors && errors.id_decreto" class="text-danger">
                    @{{ errors.id_decreto[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'plazo_agnos', 'titulo' => 'PLAZO EN AÑOS'])
                <input v-model="plazo_agnos" class="form-control" type="number" id="plazo_agnos" name="plazo_agnos">

                <div v-if="errors && errors.plazo_agnos" class="text-danger">
                    @{{ errors.plazo_agnos[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'vencimiento', 'titulo' => 'VENCIMIENTO'])
                <input v-model="vencimiento" class="form-control" type="text" id="vencimiento" name="vencimiento">

                <div v-if="errors && errors.vencimiento" class="text-danger">
                    @{{ errors.vencimiento[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'da_modificacion', 'titulo' => 'D.A MODIFICACIÓN'])
                <input v-model="da_modificacion" class="form-control" type="number" id="da_modificacion"
                       name="da_modificacion">

                <div v-if="errors && errors.da_modificacion" class="text-danger">
                    @{{ errors.da_modificacion[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'fecha2', 'titulo' => 'FECHA2'])
                <input v-model="fecha2" class="form-control" type="date" id="fecha2" name="fecha2">

                <div v-if="errors && errors.fecha2" class="text-danger">
                    @{{ errors.fecha2[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'estado_id', 'titulo' => 'ESTADO'])
                <select v-model="estado_id" name="estado_id" id="estado_id"
                        class="form-control">
                    <option value="">Seleccione</option>
                    @foreach($estados as $estado)
                        <option value="{{ $estado->id }}">{{ $estado->nombre }}</option>
                    @endforeach
                </select>

                <div v-if="errors && errors.estado_id" class="text-danger">
                    @{{ errors.estado_id[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['nombre' => 'observaciones', 'titulo' => 'OBSERVACIONES'])
                <textarea v-model="observaciones" name="observaciones" id="observaciones" cols="30" rows="10"
                          class="form-control"></textarea>

                <div v-if="errors && errors.observaciones" class="text-danger">
                    @{{ errors.observaciones[0] }}
                </div>
            @endcomponent

            @component('components.form-group', ['vertical' => true,'nombre' => 'referencia', 'titulo' => 'REFERENCIA'])
                <div class="mb-3">
                    <button type="button" class="btn btn-primary" @click="agregarReferencia">Agregar Referencia</button>
                </div>

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

                <div v-if="errors && errors.referencia" class="text-danger">
                    @{{ errors.referencia[0] }}
                </div>
            @endcomponent

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

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                n_carpeta_adm: '',
                n_carpeta_jur: '',
                nombre_organizacion: '',
                id_ingreso: '',
                fecha_ingreso: '',
                ubicacion: '',
                contacto: '',
                destino: '',
                rol_avaluo: '',
                superficie: '',
                tipo_inscripcion_id: '',
                inscripcion_cons_b_raices: '',
                fecha_informe_juridico: '',
                n_memo: '',
                factible_secpla: '',
                aprueba_concejo: '',
                sesion_concejo_m: '',
                fecha_sesion: '',
                n_decreto: '',
                fecha: '',
                id_decreto: '',
                plazo_agnos: '',
                vencimiento: '',
                da_modificacion: '',
                fecha2: '',
                estado_id: '',
                observaciones: '',

                referencia_id: 0,
                referencias: [],

                loading: false,

                errors: {},
                status: null
            }),

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

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

                        const formData = new FormData(document.querySelector('#formulario'))

                        for (let referencia of this.referencias) {
                            formData.append('referencia[]', referencia.archivo)
                        }

                        // Display the key/value pairs
                        for (let pair of formData.entries()) {
                            console.log(pair[0] + ', ' + pair[1]);
                        }

                        this.$http.post("{{ route('comodatos.recibidos.store') }}", formData)
                            .then(res => {
                                window.location = '{{ route('comodatos.recibidos.index') }}'
                                this.loading = false
                            })
                            .catch(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.referencias.push({
                        archivo: null,
                    })
                }
            }
        })
    </script>
@endpush