<template>
    <b-modal size="lg" id="modalEditarLibro"  hide-footer title="Editar Libro">
        
        <b-container fluid v-if="!loading">
            <b-row class="mb-2">
                <b-col >
                    <h2  style="text-align:left;"> {{libro.titulo}}</h2>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                <b-col>
                    <b-form-checkbox v-model="isActiveIsbn" name="check-button" switch><b>ISBN:</b></b-form-checkbox>
                </b-col>
                <b-col>
                    <label class="mr-sm-2">{{libro.isbn}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="isbn"
                    ></b-form-input>
                </b-col>
            </b-row>
             <b-row class="mb-2">
                 <b-col>
                    <b-form-checkbox v-model="isActiveTitulo" name="check-button" switch><b>Titulo:</b></b-form-checkbox>
                 </b-col>
                 <b-col>
                    <label class="mr-sm-2">{{libro.titulo}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="titulo"
                    ></b-form-input>
                </b-col>
               
            </b-row>
             <b-row class="mb-2">
                <b-col>
                    <b-form-checkbox v-model="isActiveCategoria" name="check-button" switch><b>Categoria:</b></b-form-checkbox>
                </b-col>
                <b-col>
                    <label class="mr-sm-2">{{libro.categoria}}</label>
                </b-col>
                <b-col cols="6">
                     <b-dropdown v-model="categoria" v-bind:text="categoria" block split split-variant="outline-primary" variant="primary" class="m-2">
                        <b-dropdown-item @click="categoria='Ciencias Socioeconómicas'" >Ciencias Socioeconómicas</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Diseño y Edificación'" >Diseño y Edificación</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Enseñanza de Idiomas'" >Enseñanza de Idiomas</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Estudios de Posgrado'" >Estudios de Posgrado</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Humanidades'" >Humanidades</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Matemáticas e Ingenieria'" >Matemáticas e Ingenieria</b-dropdown-item>
                        <b-dropdown-item @click="categoria='Universidad Abierta y Educación a Distancia'" >Universidad Abierta y Educación a Distancia</b-dropdown-item>
                    </b-dropdown>
                   
                </b-col>
            </b-row>
             <b-row class="mb-2">
                <b-col>
                    <b-form-checkbox v-model="isActiveAutor" name="check-button" switch><b>Autor:</b></b-form-checkbox>
                </b-col>
                <b-col>
                    <label class="mr-sm-2">{{libro.autor}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="autor"
                    ></b-form-input>
                </b-col>
               
            </b-row>
             <b-row class="mb-2">
                <b-col>
                    <b-form-checkbox v-model="isActivePaginas" name="check-button" switch><b>Numero de paginas:</b></b-form-checkbox>
                </b-col>
                <b-col>
                    <label class="mr-sm-2">{{libro.paginas}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="paginas"
                        type="number"
                    ></b-form-input>
                </b-col>
            </b-row>
             <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActivePrecio" name="check-button" switch><b>Precio:</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                    <label class="mr-sm-2">{{libro.precio}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="precio"
                    ></b-form-input>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActiveEdicion" name="check-button" switch><b>Edición:</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                    <label class="mr-sm-2">{{libro.impresion}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="edicion"
                    ></b-form-input>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActiveVersion" name="check-button" switch><b>Versión:</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                    <label class="mr-sm-2">{{libro.version}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="version"
                    ></b-form-input>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActiveYear" name="check-button" switch><b>Año de publicación:</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                    <label class="mr-sm-2">{{libro.year}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-input
                        id="inline-form-input-name"
                        class="mb-2 mr-sm-2 mb-sm-0"
                        placeholder="Editar"
                        v-model="year"
                        type="number"
                    ></b-form-input>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActiveDescripcion" name="check-button" switch><b>Descrpción:</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                    <label class="mr-sm-2" style="font-size: 12px">{{libro.descripcion}}</label>
                </b-col>
                <b-col cols="6">
                    <b-form-textarea
                        id="textarea"
                        v-model="descripcion"
                        placeholder="Editar"
                        rows="3"
                        max-rows="6"
                    ></b-form-textarea>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActiveImagen" name="check-button" switch><b>Imagen</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                </b-col>
                <b-col cols="6">
                    <b-form-file
                        placeholder="Seleccione la imagen o arrastre..."
                        accept=".png, .jpg"
                        id="imagen"
                    ></b-form-file>
                </b-col>
            </b-row>
            <b-row class="mb-2">
                    <b-col>
                        <b-form-checkbox v-model="isActivePdf" name="check-button" switch><b>PDF Visualización</b></b-form-checkbox>
                    </b-col>
                    <b-col>
                </b-col>
                <b-col cols="6">
                    <b-form-file
                        placeholder="Seleccione el PDF o arrastre..."
                        id="pdf"
                        accept=".pdf"
                    ></b-form-file>
                </b-col>
            </b-row>

            <b-row class="mb-2">
                <b-col>
                        <div style="margin-top: 2rem;">
                            <b-button variant="outline-success" class="float-right" @click="actualizarLibro(libro.idLibro)" style="width: 30%; ">Actualizar</b-button>
                            <b-button @click="$bvModal.hide('modalEditarLibro')"  variant="outline-danger"  class="btn  float-left"  style="width: 30%; ">Cancelar</b-button>
                        </div>
                </b-col>
            </b-row>
        </b-container>
        <b-container v-else>
            <div class="text-center">
                <b-spinner style="width: 10rem; height: 10rem; margin: 3rem;" variant="primary" label="Text Centered"></b-spinner><br />
                <strong><h1 style="margin: 3rem;">Guardando...</h1></strong>
            </div>
        </b-container>
    </b-modal>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
import Swal from 'sweetalert2'
export default {
    props: {
        libro: Object,
    },
    data() {
    return {
        isbn: "",
        titulo: "",
        categoria:"Categoria",
        autor:"",
        paginas:"",
        impresion:"",
        precio:"",
        version:"",
        descripcion:"",
        year:"",
        edicion:"",
        isActiveIsbn: false,
        isActiveTitulo: false,
        isActiveCategoria: false,
        isActiveAutor: false,
        isActivePaginas: false,
        isActivePrecio: false,
        isActiveVersion: false,
        isActiveYear: false,
        isActiveDescripcion: false,
        isActiveImagen: false,
        isActivePdf: false,
        isActiveEdicion:false,
        loading: false
    };

  },
  methods:{
      async actualizarLibro(idLibro){
          try{
                var formData = new FormData();
                if(this.isActiveIsbn) formData.append("isbn",  this.isbn);
                if(this.isActiveTitulo) formData.append("titulo", this.titulo);
                if(this.isActiveCategoria) formData.append("categoria", this.categoria);
                if(this.isActiveAutor) formData.append("autor", this.autor);
                if(this.isActivePaginas) formData.append("paginas", this.paginas);
                if(this.isActiveEdicion) formData.append("edicion", this.impresion);
                if(this.isActivePrecio) formData.append("precio", this.precio);
                if(this.isActiveVersion) formData.append("version", this.version);
                if(this.isActiveDescripcion) formData.append("descripcion", this.descripcion);
                if(this.isActiveYear) formData.append("year", this.year);
                if(this.isActiveImagen){
                    var imagen = document.querySelector('#imagen');
                     if(imagen.files[0].size > 1200000){
                        Swal.fire(
                        `EL tamaño de la Imagen es muy grande`,
                        'Por favor suba imagenes menores a 1MG',
                        'warning'
                        )
                        return;
                    }   
                    formData.append("imagen", imagen.files[0]);
                }
                if(this.isActivePdf){
                    var pdf = document.querySelector('#pdf');
                    if(pdf.files[0].size > 1200000){
                        Swal.fire(
                            `EL tamaño del PDF es muy grande`,
                            'Por favor suba PDFs menores a 1MG',
                            'warning'
                        )
                        return;
                    }
                    formData.append("pdf", pdf.files[0]);
                }
                if( formData.entries().next().done){
                     Swal.fire(
                        '¿Aún no has ningún campo a editar?',
                        '',
                        'question'
                    );
                    return;
                }
                formData.append("idLibro", idLibro);
                formData.append("type", 'editarLibro');
                this.loading = true;
                await axios.post( `${config.api}/actualizarLibro`,  formData  ,{ headers: { 'Content-Type': 'multipart/form-data' } });
                this.loading = false;
                await Swal.fire(
                'Libro actualizado con éxito',
                    '',
                    'success'
                );
                location.reload();
            }
            catch(error){
                console.log(error);
                Swal.fire({
                    icon: 'error',
                    title: 'El libro no pudo ser actualizado',
                    text: `Algo salio mal, ${error}`,
                });
            }

      }
  }
}
</script>