@extends('layouts.app')

@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Crear Informe de Capacitación</h2>

        <b-form @submit="onSubmit" class="vld-parent">
            <loading-overlay :active.sync="loading"
                             :is-full-page="false"></loading-overlay>
            <div class="bdc-grey-100 mb-3">
                <h4>Datos del Funcionario</h4>

                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300">Nombre</td>
                        <td colspan="5">{{ $solicitud->nombre }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">RUN</td>
                        <td>{{ $solicitud->run }}</td>
                        <td class="bgc-grey-300">Escalafón</td>
                        <td>{{ $solicitud->escalafon }}</td>
                        <td class="bgc-grey-300">Grado</td>
                        <td>{{ $solicitud->grado }}</td>
                    </tr>

                    <tr>
                        <td class="bgc-grey-300">Dirección / Unidad</td>
                        <td>{{ $solicitud->direccion }}</td>
                        <td class="bgc-grey-300">Modalidad Contrato</td>
                        <td>{{ $solicitud->modalidad_contrato }}</td>
                        <td class="bgc-grey-300">Cargo</td>
                        <td>{{ $solicitud->cargo }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="bdc-grey-100">
                <h4>Datos del Curso</h4>

                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300" style="width: 200px">
                            <label for="n_fecha_alcaldicio">Número y fecha decreto alcaldicio que aprueba
                                cometido</label>
                        </td>
                        <td colspan="5">
                            <input v-model="n_fecha_alcaldicio" id="n_fecha_alcaldicio" type="text"
                                   class="form-control">
                            <input-error :errors="errors" nombre="n_fecha_alcaldicio"></input-error>
                        </td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">
                            <label for="tipo_capacitacion">Tipo de capacitación</label>
                        </td>
                        <td colspan="5">
                            <select v-model="tipo_capacitacion" name="tipo_capacitacion" id="tipo_capacitacion"
                                    class="form-control">
                                <option value="">Seleccione</option>
                                @foreach($capacitacionTipos as $value)
                                    <option value="{{ $value }}">{{ $value }}</option>
                                @endforeach
                            </select>
                            <input-error :errors="errors" nombre="tipo_capacitacion"></input-error>
                        </td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">
                            <label for="nombre_relator">Nombre del Relator</label>
                        </td>
                        <td colspan="5">
                            <input v-model="nombre_relator" id="nombre_relator" type="text" class="form-control">
                            <input-error :errors="errors" nombre="nombre_relator"></input-error>
                        </td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">
                            <label for="nota_empresa">Nota empresa que entrego la capacitación</label>
                        </td>
                        <td colspan="2">
                            <input v-model="nota_empresa" id="nota_empresa" type="text" class="form-control">
                            <input-error :errors="errors" nombre="nota_empresa"></input-error>
                        </td>
                        <td class="bgc-grey-300">
                            <label for="nota_relator">Nota relator que entrego la capacitación</label>
                        </td>
                        <td colspan="2">
                            <input v-model="nota_relator" id="nota_relator" type="text" class="form-control">
                            <input-error :errors="errors" nombre="nota_relator"></input-error>
                        </td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">
                            <label for="nota_funcionario">Nota funcionario por participación en capacitación</label>
                        </td>
                        <td colspan="2">
                            <input v-model="nota_funcionario" id="nota_funcionario" type="text" class="form-control">
                            <input-error :errors="errors" nombre="nota_funcionario"></input-error>
                        </td>
                        <td colspan="3">
                            (esta nota es cuando corresponda)
                        </td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">
                            <label for="es_replica">Replica o difusión del curso</label>
                        </td>
                        <td>
                            <select v-model="es_replica" name="es_replica" id="es_replica" class="form-control">
                                <option :value="true">Si</option>
                                <option :value="false">No</option>
                            </select>
                            <input-error :errors="errors" nombre="es_replica"></input-error>
                        </td>
                        <td class="bgc-grey-300">
                            <label for="fecha_replica">Fecha</label>
                        </td>
                        <td>
                            <input v-model="fecha_replica" id="fecha_replica" type="date" class="form-control"
                                   :disabled="!es_replica">
                            <input-error :errors="errors" nombre="fecha_replica"></input-error>
                        </td>
                        <td class="bgc-grey-300">
                            <label for="lugar">Lugar</label>
                        </td>
                        <td>
                            <input v-model="lugar" id="lugar" type="text" class="form-control" :disabled="!es_replica">
                            <input-error :errors="errors" nombre="lugar"></input-error>
                        </td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">
                            <label for="n_participantes">N° de Participantes</label>
                        </td>
                        <td colspan="2">
                            <input v-model="n_participantes" id="n_participantes" type="text" class="form-control"
                                   :disabled="!es_replica">
                            <input-error :errors="errors" nombre="n_participantes"></input-error>
                        </td>
                        <td colspan="3">(Adjuntar nomina con firma de cada participante)</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="bdc-grey-300">
                <div>
                    <h4>Adjuntos</h4>

                    <table class="table table-bordered">
                        <tbody>
                        <tr>
                            <td class="bgc-grey-300">Certificado de Capacitación</td>
                            <td>
                                <b-file v-model="certificado" accept=".jpeg, .png, .doc, .docx, .pdf, .zip"></b-file>
                                <span>Formatos: jpeg, png, doc, docx, pdf, zip</span>
                                <input-error :errors="errors" nombre="certificado"></input-error>
                            </td>
                        </tr>
                        <tr>
                            <td class="bgc-grey-300">Nomina Participantes en difusión del curso</td>
                            <td>
                                <b-file v-model="nomina" accept=".jpeg, .png, .doc, .docx, .pdf, .zip" :disabled="!es_replica"></b-file>
                                <span>Formatos: jpeg, png, doc, docx, pdf, zip</span>
                                <input-error :errors="errors" nombre="nomina"></input-error>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="bdc-grey-100">
                <h4>INFORME:</h4>

                <div class="mb-3">
                    <textarea v-model="informe" cols="30" rows="10" class="form-control"></textarea>
                    <input-error :errors="errors" nombre="informe"></input-error>
                </div>

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

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                'n_fecha_alcaldicio': '',
                'tipo_capacitacion': '',
                'nombre_relator': '',
                'nota_empresa': '',
                'nota_relator': '',
                'nota_funcionario': '',
                'es_replica': false,
                'fecha_replica': '',
                'lugar': '',
                'n_participantes': 0,
                'informe': '',
                'certificado': null,
                'nomina': null,

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

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

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

                        const formData = new FormData;
                        formData.append('n_fecha_alcaldicio', this.n_fecha_alcaldicio)
                        formData.append('tipo_capacitacion', this.tipo_capacitacion)
                        formData.append('nombre_relator', this.nombre_relator)
                        formData.append('nota_empresa', this.nota_empresa)
                        formData.append('nota_relator', this.nota_relator)
                        formData.append('nota_funcionario', this.nota_funcionario)

                        formData.append('informe', this.informe)
                        formData.set('certificado', this.certificado)

                        formData.append('es_replica', this.es_replica ? '1' : '0')
                        if (this.es_replica) {
                            formData.append('fecha_replica', this.fecha_replica)
                            formData.append('lugar', this.lugar)
                            formData.append('n_participantes', this.n_participantes)
                            formData.set('nomina', this.nomina)
                        }

                        this.$http.post('{{ route('capacitacion.informes.store', $solicitud) }}', formData)
                            .then(res => {
                                window.location = '{{ route('capacitacion.solicitudes.index') }}'
                                this.loading = false
                            })
                            .catch(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
                            })
                    }
                }
            }
        })
    </script>
@endpush