@extends('layouts.app')


@section('content')
    <div class="bgc-white p-20 bd">
        <h2>Crear Decreto</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">
                    <b-form-group label="Vistos">
                        <quill-editor v-model="vistos" :options="editorOption"></quill-editor>
                    </b-form-group>

                    <b-form-group label="Considerando">
                        <quill-editor v-model="considerando" :options="editorOption"></quill-editor>
                    </b-form-group>

                    <b-form-group label="Decreto">
                        <quill-editor v-model="decreto" :options="editorOption"></quill-editor>
                    </b-form-group>

                    <b-form-group label="Secretario Firmante">
                        <select v-model="secretario_id" class="form-control" required>
                            <option value="">Seleccione</option>
                            <option v-for="(firmante, index) in secretarios" :key="index" :value="firmante.id">
                                @{{ firmante.label }}
                            </option>
                        </select>
                    </b-form-group>

                    <b-form-group label="Alcalde o Administrador">
                        <select v-model="alcalde_id" class="form-control" required>
                            <option value="">Seleccione</option>
                            <option v-for="(firmante, index) in alcaldes" :value="firmante.id">
                                @{{ firmante.label }}
                            </option>
                        </select>
                    </b-form-group>

                    <b-form-group label="Otras notas">
                        <quill-editor v-model="notas" :options="editorOption"></quill-editor>
                    </b-form-group>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4>Margenes Pagina</h4>

                    @component('components.form-group', ['nombre' => 'margin_top', 'titulo' => 'Margen Superior'])
                        <input v-model="marginTop" type="number" class="form-control" name="margin_top">
                    @endcomponent

                    @component('components.form-group', ['nombre' => 'margin_bottom', 'titulo' => 'Margen Inferior'])
                        <input v-model="marginBottom" type="number" class="form-control" name="margin_bottom">
                    @endcomponent

                    @component('components.form-group', ['nombre' => 'margin_left', 'titulo' => 'Margen Izquierdo'])
                        <input v-model="marginLeft" type="number" class="form-control" name="margin_left">
                    @endcomponent

                    @component('components.form-group', ['nombre' => 'margin_right', 'titulo' => 'Margen Derecho'])
                        <input v-model="marginRight" type="number" class="form-control" name="margin_right">
                    @endcomponent
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button class="btn btn-primary" :disabled="loading">Guardar</button>
                <button type="button" @click="vistaPrevia" :disabled="loading" class="btn btn-info">
                    @{{ loading ? 'Cargando Vista Previa...' : 'Vista Previa'}}
                </button>
            </div>
        </b-form>

        <div v-if="pdfData">
            <div class="card mb-3">
                <div class="card-body">
                    <h4>Vista Previa</h4>

                    <div class="bg-dark">
                        <div v-for="i in numPages" :key="i" class="p-35">
                            <vue-pdf :src="pdfData" :page="i"></vue-pdf>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            data: () => ({
                vistos: '{!! $decreto->vistos !!}',
                considerando: '{!! $decreto->considerando !!}',
                decreto: '{!! $decreto->decreto !!}',
                notas: '{!! $decreto->notas !!}',

                alcaldes: @json($alcaldes),
                secretarios: @json($secretarios),

                alcalde_id: {{ $decreto->alcalde_id }},
                secretario_id: {{ $decreto->secretario_id }},

                loading: false,

                errors: {},
                status: null,

                marginTop: 25,
                marginBottom: 25,
                marginLeft: 30,
                marginRight: 30,

                editorOption: {
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block'],
                            [{'header': 1}, {'header': 2}],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            [{'script': 'sub'}, {'script': 'super'}],
                            [{'indent': '-1'}, {'indent': '+1'}],
                            [{'direction': 'rtl'}],
                            [{'size': ['small', false, 'large', 'huge']}],
                            [{'header': [1, 2, 3, 4, 5, 6, false]}],
                            [{'font': []}],
                            [{'color': []}, {'background': []}],
                            [{'align': []}],
                            ['clean'],
                        ]
                    }
                },

                pdfData: null,
                numPages: 0,
            }),

            created() {

            },

            methods: {
                async vistaPrevia() {
                    this.loading = true
                    this.numPages = 0
                    this.pdfData = null

                    try {
                        const res = await this.$http.post('{{ route('capacitacion.decretos.preview', ['id' => $decreto->solicitud->id]) }}', {
                            vistos: this.vistos,
                            considerando: this.considerando,
                            decreto: this.decreto,
                            notas: this.notas,
                            secretario_id: this.secretario_id,
                            alcalde_id: this.alcalde_id,

                            margin_top: this.marginTop,
                            margin_bottom: this.marginBottom,
                            margin_left: this.marginLeft,
                            margin_right: this.marginRight,
                        }, {
                            responseType: 'blob'
                        })

                        const pdfData = window.URL.createObjectURL(new Blob([res.data]))

                        this.pdfData = this.$pdf.createLoadingTask(pdfData)
                        this.pdfData.then(pdf => {
                            this.numPages = pdf.numPages
                        })
                    } catch (err) {
                        console.log(err)
                    }

                    this.loading = false
                },

                onSubmit(ev) {
                    ev.preventDefault()

                    if (!this.loading) {
                        const data = {
                            vistos: this.vistos,
                            considerando: this.considerando,
                            decreto: this.decreto,
                            notas: this.notas,
                            secretario_id: this.secretario_id,
                            alcalde_id: this.alcalde_id,

                            margin_top: this.marginTop,
                            margin_bottom: this.marginBottom,
                            margin_left: this.marginLeft,
                            margin_right: this.marginRight,
                        }

                        this.loading = true
                        this.$http.put('{{ route('capacitacion.decretos.update', $decreto) }}', data)
                            .then(res => {
                                window.location = '{{ route('capacitacion.decretos.show', $decreto) }}'
                                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
                            })
                    }
                },
            },

            computed: {},
        })
    </script>
@endpush