@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 Entregado</h3>

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

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

            @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" => "tipo_solicitud", "titulo" => "TIPO SOLICITUD"])
                <select v-model="tipo_solicitud" name="tipo_solicitud" id="tipo_solicitud" class="form-control">
                    <option value="">Seleccione</option>
                    <option value="Comodato">Comodato</option>
                    <option value="Modificación">Modificación</option>
                </select>

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

            @component("components.form-group", ["nombre" => "solicita", "titulo" => "SOLICITA"])
                <select v-model="solicita" name="solicita" id="solicita" class="form-control">
                    <option value="">Seleccione</option>
                    <option value="Inmueble">Inmueble</option>
                    <option value="Terreno">Terreno</option>
                </select>

                <div v-if="errors && errors.solicita" class="text-danger">
                    @{{ errors.solicita[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" => "aprueba_gabinete", "titulo" => "Aprueba Gabinete"])
                <select v-model="aprueba_gabinete" name="aprueba_gabinete" id="aprueba_gabinete" class="form-control">
                    <option value="">Seleccione</option>
                    <option value="Si">Si</option>
                    <option value="No">No</option>
                    <option value="Con Observaciones">Con Observaciones</option>
                </select>

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

            @component("components.form-group", ["nombre" => "fecha_gabinete", "titulo" => "Fecha Gabinete"])
                <input v-model="fecha_gabinete" class="form-control" type="date"
                       name="fecha_gabinete">

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

            @component("components.form-group", ["nombre" => "legalmente_factible", "titulo" => "Legalmente Factible"])
                <select v-model="legalmente_factible" name="legalmente_factible" id="legalmente_factible"
                        class="form-control">
                    <option value="">Seleccione</option>
                    <option value="Si">Si</option>
                    <option value="No">No</option>
                    <option value="Con Observaciones">Con Observaciones</option>
                </select>

                <div v-if="errors && errors.legalmente_factible" class="text-danger">
                    @{{ errors.legalmente_factible[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>
                    <option value="Con Observaciones">Con Observaciones</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" => "accion_id", "titulo" => "ACCIÓN"])
                <select v-model="accion_id" name="accion_id" id="accion_id"
                        class="form-control">
                    <option value="">Seleccione</option>
                    @foreach($acciones as $accion)
                        <option value="{{ $accion->id }}">{{ $accion->nombre }}</option>
                    @endforeach
                </select>

                <div v-if="errors && errors.accion_id" class="text-danger">
                    @{{ errors.accion_id[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" ></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': '',
                'tipo_solicitud': '',
                'solicita': '',
                'ubicacion': '',
                'destino': '',
                'contacto': '',
                'rol_avaluo': '',
                'superficie': '',
                'tipo_inscripcion_id': '',
                'inscripcion_cons_b_raices': '',
                'aprueba_gabinete': '',
                'fecha_gabinete': '',
                'legalmente_factible': '',
                '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': '',
                'accion_id': '',
                'estado_id': '',
                'observaciones': '',

                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.entregados.store') }}", formData)
                            .then(res => {
                                window.location = '{{ route('comodatos.entregados.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