@extends('layouts.app')

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

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

        <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>

            <blockquote class="mb-3 text-justify">
                Por medio del presente, vengo en solicitar se me autorice como postulante al curso que más adelante se
                señala, declarando conocer los requisitos y exigencias, entre ellas, la asistencia y rendimiento,
                obligándome en conformidad a las normas vigentes, señaladas especialmente en el Estatuto Administrativo
                para Funcionarios Municipales.
            </blockquote>

            <div class="card mb-3">
                <div class="card-body">
                    <h4>Datos de la Empresa</h4>

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

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

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

                    <b-form-group horizontal label="Fecha">
                        <b-input type="date" v-model="fecha"></b-input>
                        <input-error :errors="errors" nombre="fecha"></input-error>
                    </b-form-group>

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

                    <b-form-group horizontal label="Horas de duración">
                        <b-input type="number" v-model="horas_duracion"></b-input>
                        <input-error :errors="errors" nombre="horas_duracion"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Costo del curso">
                        <b-input type="number" v-model="costo_curso"></b-input>
                        <input-error :errors="errors" nombre="costo_curso"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Forma de Pago">
                        <select v-model="forma_pago" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($pagoFormas as $value)
                                <option value="{{ $value }}">{{ $value }}</option>
                            @endforeach
                        </select>
                        <input-error :errors="errors" nombre="costo_curso"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Tipo de Capacitación">
                        <select v-model="tipo_capacitacion" class="form-control" required>
                            <option value="">Seleccione</option>
                            @foreach($capacitacionTipos as $value)
                                <option value="{{ $value }}">{{ $value }}</option>
                            @endforeach
                        </select>
                        <input-error :errors="errors" nombre="tipo_capacitacion"></input-error>
                    </b-form-group>
                </div>
            </div>

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

                    <b-form-group horizontal label="Fecha y hora Salida PLC">
                        <datetime-picker v-model="fecha_salida" id="fecha_salida"
                                         :time-picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"
                                         :first-day-of-week="1" :clearable="false"
                                         format="YYYY-MM-DD HH:mm"
                                         type="datetime" lang="es">
                        </datetime-picker>
                        <input-error :errors="errors" nombre="fecha_salida"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Fecha y hora Llegada PLC">
                        <datetime-picker v-model="fecha_llegada" id="fecha_llegada"
                                         :time-picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"
                                         :first-day-of-week="1" :clearable="false"
                                         format="YYYY-MM-DD HH:mm"
                                         type="datetime" lang="es">
                        </datetime-picker>
                        <input-error :errors="errors" nombre="fecha_llegada"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Reembolso de pasaje ida y/o regreso">
                        <select v-model="tipo_reembolso_pasaje" class="form-control">
                            <option value="">Seleccione</option>
                            @foreach($pasajeReembolsos as $value)
                                <option value="{{ $value }}">{{ $value }}</option>
                            @endforeach
                        </select>
                        <span>* Optional</span>
                        <input-error :errors="errors" nombre="tipo_reembolso_pasaje"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Valor Pasaje">
                        <b-input type="number" v-model="valor_pasaje"></b-input>
                        <input-error :errors="errors" nombre="valor_pasaje"></input-error>
                    </b-form-group>

                    <h4>Autorización de reembolsos por gastos inherentes a la capacitación</h4>

                    <b-form-group horizontal label="Km. a Recorrer">
                        <b-input v-model="km_recorrer"></b-input>
                        <input-error :errors="errors" nombre="km_recorrer"></input-error>
                    </b-form-group>

                    <b-form-group horizontal label="Requerimientos de reembolso">
                        <b-form-checkbox-group v-model="reembolsosSelected">
                            @foreach($reembolsoTipos as $reembolso)
                                <b-form-checkbox value="{{ $reembolso->id }}">{{ $reembolso->nombre }}</b-form-checkbox>
                            @endforeach
                        </b-form-checkbox-group>

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

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

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

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

                    <b-form-group horizontal label="Valor Viatico">
                        <b-input v-model="valor_viatico" required></b-input>
                        <input-error :errors="errors" nombre="valor_viatico"></input-error>
                    </b-form-group>
                </div>
            </div>

            <capacitaciones-list
                :user-id="{{ $solicitud->user_id }}"
                last-date="{{ fechaFormato($solicitud->created_at, 'Y-m-d H:i:s') }}"
            ></capacitaciones-list>

            <div class="mb-3">
                <h4>Requisitos:</h4>
                <ul>
                    <li>Programa de actividad</li>
                    <li>Asistencia minima 90%</li>
                    <li>Entrega de Anexo 2 - Informe de Capacitación</li>
                </ul>
            </div>

            <div class="card mb-3">
                <div class="card-body">
                    <h4>V°B° Director Unidad</h4>

                    <b-form-group horizontal label="Dirección">
                        <select v-model="direccion_firmante" class="form-control" name="direccion_firmante" required>
                            <option :value="null">Seleccione</option>
                            <option v-for="(direccion, index) in direcciones" :key="index" :value="direccion.id">
                                @{{ direccion.nombre }}
                            </option>
                        </select>

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

                    <b-form-group horizontal label="Director">
                        <select v-model="firmante" name="director_id" id="director_id" class="form-control" required>
                            <option :value="null">Seleccione</option>
                            <option v-for="(firmante1, index) in firmantes" :key="index"
                                    :value="firmante1.id">
                                @{{ firmante1.label }}
                            </option>
                        </select>

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

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

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

                'empresa': '{{ $solicitud->empresa }}',
                'rut': '{{ $solicitud->rut }}',
                'ciudad': '{{ $solicitud->ciudad }}',
                'fecha': '{{ $solicitud->fecha }}',
                'nombre_curso': '{{ $solicitud->nombre_curso }}',
                'horas_duracion': '{{ $solicitud->horas_duracion }}',
                'costo_curso': '{{ $solicitud->costo_curso }}',
                'forma_pago': '{{ $solicitud->forma_pago }}',
                'tipo_capacitacion': '{{ $solicitud->tipo_capacitacion }}',

                'fecha_salida': '{{ $solicitud->fecha_salida }}',
                'fecha_llegada': '{{ $solicitud->fecha_llegada }}',
                'tipo_reembolso_pasaje': '{{ $solicitud->tipo_reembolso_pasaje }}',
                'valor_pasaje': '{{ $solicitud->valor_pasaje }}',
                'km_recorrer': '{{ $solicitud->km_recorrer }}',
                'marca_vehiculo': '{{ $solicitud->marca_vehiculo }}',
                'placa_patente': '{{ $solicitud->placa_patente }}',
                'rendimiento': '{{ $solicitud->rendimiento }}',
                'valor_viatico': '{{ $solicitud->valor_viatico }}',
                reembolsosSelected: @json(collect($solicitud->tiposReembolso()->pluck('cap_tipos_reembolso.id'))),

                // Unidad Solicitante
                direcciones: @json($direcciones),
                direccion_firmante: null,

                firmantes: [],
                firmante: null,

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

            created() {
                @if($solicitud->director_id)
                    @php
                        $director = App\Models\Firmante::query()->with('direccion')->findOrFail($solicitud->director_id);
                        $direccion = $director->direccion;
                    @endphp

                    this.direccion_firmante = {{ $direccion->id }};
                this.firmante = {{ $solicitud->director_id }};
                @endif
            },

            methods: {
                cambiarFirmantes(value) {
                    if (value && value != '') {
                        const direccion = this.direcciones.filter(e => e.id == value)[0];
                        this.firmantes = direccion.firmantes
                    } else {
                        this.firmantes = []
                    }
                },

                formatDate(date) {
                    if (date) {
                        return this.$moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }

                    return ''
                },

                onSubmit(evt) {
                    evt.preventDefault();

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

                        const formData = new FormData;

                        formData.append('_method', 'PUT');
                        formData.append('nombre', this.nombre);
                        formData.append('run', this.run);
                        formData.append('escalafon', this.escalafon);
                        formData.append('grado', this.grado);
                        formData.append('direccion', this.direccion);
                        formData.append('modalidad_contrato', this.modalidad_contrato);
                        formData.append('cargo', this.cargo);

                        formData.append('empresa', this.empresa);
                        formData.append('rut', this.rut);
                        formData.append('ciudad', this.ciudad);
                        formData.append('fecha', this.fecha);
                        formData.append('nombre_curso', this.nombre_curso);
                        formData.append('horas_duracion', this.horas_duracion);
                        formData.append('costo_curso', this.costo_curso);
                        formData.append('forma_pago', this.forma_pago);
                        formData.append('tipo_capacitacion', this.tipo_capacitacion);

                        formData.append('fecha_salida', this.formatDate(this.fecha_salida));
                        formData.append('fecha_llegada', this.formatDate(this.fecha_llegada));
                        formData.append('tipo_reembolso_pasaje', this.tipo_reembolso_pasaje);
                        formData.append('valor_pasaje', this.valor_pasaje);
                        formData.append('km_recorrer', this.km_recorrer);
                        formData.append('marca_vehiculo', this.marca_vehiculo);
                        formData.append('placa_patente', this.placa_patente);
                        formData.append('rendimiento', this.rendimiento);
                        formData.append('valor_viatico', this.valor_viatico);

                        for (let reembolso of this.reembolsosSelected) {
                            formData.append('reembolsos[]', reembolso);
                        }

                        formData.append('director_id', this.firmante);

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

            watch: {
                direccion_firmante(value) {
                    this.cambiarFirmantes(value)
                },
            }
        })
    </script>
@endpush