import { createApp, reactive } from 'https://unpkg.com/petite-vue?module';
const filter = reactive({
    facultad: -1,
    profesor: '',
    porcentaje: 0,
    faltas: 0,
    tipoFaltas: true,
});

const app = createApp({
    filter,
    facultades: [],
    profesores: [],
    faltas: [],
    mensaje: {
        titulo: '',
        texto: '',
    },
    async refresh() {
        if (filter.facultad == -1 || (filter.porcentaje < 10 && filter.faltas < 1)) {
            console.log('Facultad: ', filter.facultad, 'Porcentaje: ', filter.porcentaje, 'Faltas: ', filter.faltas);
            return;
        }
        $('#cargando').modal('show');
        try {

            this.faltas = await fetch(`action/profesor_faltas.php?facultad=${this.filter.facultad}&${this.filter.tipoFaltas ? 'supervisor' : 'profesor'}&${this.filter.faltas > 0 ? 'faltas' : 'porcentaje'}=${this.filter.faltas > 0 ? this.filter.faltas : this.filter.porcentaje}`).then(res => res.json());
            if (this.faltas.error) {
                $('.modal#mensaje').modal('show');
                this.mensaje.titulo = 'Información';
                this.mensaje.texto = this.faltas.error;
            }
        } catch (error) {
            $('.modal#mensaje').modal('show');
            this.mensaje.titulo = 'Error';
            this.mensaje.texto = 'No se pudo cargar los datos';
        }
        finally {
            $('#cargando').modal('hide');
        }
    },

    async toExcel() {
        if (filter.facultad == -1 || filter.porcentaje < 10) {
            return;
        }
        $('#cargando').modal('show');
        try {
            const response = await fetch(`export/faltas_excel.php`, {
                method: 'POST',
                body: JSON.stringify(this.faltas.map(falta => ({
                    'profesor_clave': falta.profesor.profesor_clave,
                    'profesor_correo': falta.profesor.profesor_correo,
                    'profesor_nombre': falta.profesor.profesor_nombre,
                    'faltas': falta.faltas,
                    'porcentaje': `${falta.porcentaje}%`,
                    'total': falta.total,
                }))),
            })

            const blob = await response.blob();
            window.saveAs(blob, `faltas_${this.facultades.find(facultad => facultad.facultad_id == filter.facultad).facultad_nombre}_${new Date().toISOString().slice(0, 10)}.xlsx`);
        } catch (error) {
            $('.modal#mensaje').modal('show');
            this.mensaje.titulo = 'Error';
            this.mensaje.texto = 'No se pudo cargar los datos';
            console.log('Error: ', error);
        }
        finally {
            $('#cargando').modal('hide');
        }
    },
    async mounted() {
        try {
            this.facultades = await fetch('action/action_facultad.php').then(res => res.json());
            this.profesores = await fetch('action/action_profesor.php').then(res => res.json());
        } catch (error) {
            $('.modal#mensaje').modal('show');
            this.mensaje.titulo = 'Error';
            this.mensaje.texto = 'No se pudo cargar los datos';
            console.log('Error: ', error);
        }
    }
}).mount('#app');