@extends('layouts.app')

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

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

                <b-form-group horizontal label="Nombre">
                    {{ $solicitud->nombre }}
                </b-form-group>

                <b-form-group horizontal label="RUN">
                    {{ $solicitud->run }}
                </b-form-group>

                <b-form-group horizontal label="Escalafón">
                    {{ $solicitud->escalafon }}
                </b-form-group>

                <b-form-group horizontal label="Grado">
                    {{ $solicitud->grado }}
                </b-form-group>

                <b-form-group horizontal label="Dirección / Unidad">
                    {{ $solicitud->direccion }}
                </b-form-group>

                <b-form-group horizontal label="Modalidad Contrato">
                    {{ $solicitud->modalidad_contrato }}
                </b-form-group>

                <b-form-group horizontal label="Cargo">
                    {{ $solicitud->cargo }}
                </b-form-group>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <b-form-group horizontal label="Tipo de Certificado">
                    {{ $solicitud->tipo_certificado }}
                </b-form-group>

                <b-form-group horizontal label="Observaciones">
                    <p>{{ $solicitud->observaciones }}</p>
                </b-form-group>
            </div>
        </div>

        @if($solicitud->estado === 'PENDIENTE')
            <div class="card">
                <div class="card-body">
                    <b-form @submit="onSubmit" class="vld-parent">
                        <loading-overlay :active.sync="loading"
                                         :is-full-page="false"></loading-overlay>

                        <b-form-group horizontal label="Estado">
                            <select v-model="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="observaciones"></input-error>
                        </b-form-group>

                        <b-form-group horizontal label="Certificado">
                            @if($solicitud->certificado)
                                <a href="{{ $solicitud->certificado->getUrl()  }}">Certificado Actual</a>
                            @endif
                            <b-file v-model="certificado"></b-file>

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

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

                        <div class="d-flex justify-content-end">
                            <button class="btn btn-primary">Guardar</button>
                        </div>
                    </b-form>
                </div>
            </div>
        @else
            <div class="card">
                <div class="card-body">
                    <b-form-group horizontal label="Certificado">
                        <a href="{{ $solicitud->certificado->getUrl()  }}">Descargar Certificado</a>
                    </b-form-group>

                    @if($solicitud->observaciones_personal)
                        <b-form-group horizontal label="Observaciones Personal">
                            <p>{{ $solicitud->observaciones_personal }}</p>
                        </b-form-group>
                    @endif
                </div>
            </div>
        @endif
    </div>
@endsection

@if($solicitud->estado === 'PENDIENTE')
    @push('pre-scripts')
        <script>
            window.pageMix.push({
                data: () => ({
                    certificado: null,
                    observaciones: '{{ $solicitud->observaciones_personal }}',
                    estado: '{{ $solicitud->estado }}',
                    loading: false,
                    errors: {},
                    status: null
                }),

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

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

                            const formData = new FormData
                            formData.append('_method', 'PUT')
                            formData.append('estado', this.estado)
                            formData.set('certificado', this.certificado)
                            formData.append('observaciones', this.observaciones)

                            this.$http.post('{{ route('certificados-online.solicitudes-personal.update', $solicitud) }}', formData)
                                .then(res => {
                                    window.location = '{{ route('certificados-online.solicitudes-personal.show', $solicitud) }}'
                                })
                                .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
@endif