@extends('layouts.app')

@section('content')
    <div class="bgc-white p-20 bd">
        <h4>Solicitar de Certificados Online</h4>

        <b-form @submit="onSubmit" class="vld-parent">
            <loading-overlay :active.sync="loading"
                             :is-full-page="false"></loading-overlay>

            <div class="card mb-3">
                <div class="card-body">
                    <h4>Datos del Funcionario</h4>

                    <b-form-group horizontal label="Nombre">
                        <b-input v-model="nombre"></b-input>
                        <input-error :errors="errors" nombre="nombre"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="RUN">
                        <b-input v-model="run"></b-input>
                        <input-error :errors="errors" nombre="run"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Escalafón">
                        <b-input v-model="escalafon"></b-input>
                        <input-error :errors="errors" nombre="escalafon"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Grado">
                        <b-input v-model="grado"></b-input>
                        <input-error :errors="errors" nombre="grado"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Dirección / Unidad">
                        <b-input v-model="direccion"></b-input>
                        <input-error :errors="errors" nombre="direccion"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Modalidad Contrato">
                        <b-input v-model="modalidad_contrato"></b-input>
                        <input-error :errors="errors" nombre="modalidad_contrato"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Cargo">
                        <b-input v-model="cargo"></b-input>
                        <input-error :errors="errors" nombre="cargo"></input-error>
                    </b-form-group>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <b-form-group horizontal label="Tipo de Certificado">
                        <select v-model="tipo_certificado" class="form-control mb-3" required>
                            <option value="">Seleccione</option>
                            @foreach($tiposCertificado as $tipo)
                                <option value="{{ $tipo }}">{{ $tipo }}</option>
                            @endforeach
                            <option value="Otro">Otro</option>
                        </select>

                        <b-input v-if="tipo_certificado === 'Otro'" v-model="otro_certificado" required></b-input>

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

                    <b-form-group horizontal label="Observaciones">
                        <textarea v-model="observaciones" cols="30" rows="10" class="form-control"></textarea>
                        <input-error :errors="errors" nombre="observaciones"></input-error>
                    </b-form-group>

                    <p class="font-weight-bold">Si Ud. realiza una solicitud de Certificado antes de las 12:00 hrs.
                        Estará disponible para descarga online en un plazo máximo de 24 horas. Se le notificara a través
                        de intranet.</p>

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

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                'nombre': '{{ currentUser()->full_name }}',
                'run': '{{ currentUser()->rut }}',
                'escalafon': '{{ currentUser()->escalafon }}',
                'grado': '{{ currentUser()->grado }}',
                'direccion': '{{ currentUser()->direccion->nombre }}',
                'modalidad_contrato': '{{ currentUser()->tipo_contrato }}',
                'cargo': '',

                'tipo_certificado': '',
                otro_certificado: '',
                'observaciones': '',

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

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

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

                        const data = {
                            nombre: this.nombre,
                            run: this.run,
                            escalafon: this.escalafon,
                            grado: this.grado,
                            direccion: this.direccion,
                            modalidad_contrato: this.modalidad_contrato,
                            cargo: this.cargo,
                            tipo_certificado: this.tipo_certificado,
                            observaciones: this.observaciones
                        }

                        if (this.tipo_certificado === 'Otro') {
                            data.tipo_certificado = this.otro_certificado
                        }

                        this.$http.post('{{ route('certificados-online.solicitudes.store') }}', data)
                            .then(res => {
                                window.location = '{{ route('certificados-online.solicitudes.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
                            })
                    }
                }
            }
        })
    </script>
@endpush