import React, { useEffect, useRef, useState } from "react";
import { Badge, Button, Col, Modal, Row, Tab, Tabs } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { DatePickerRange } from "../../../components/DatePickerRange";
import { InputApp } from "../../../components/InputApp";
import { useForm } from "../../../hooks/useForm";
import {
    startCreateCycle,
    startCloseModal,
    startUpdateCycle,
    startShow as startShowCycle,
    startUnsetActive,
} from "../../../redux/actions/teachers/v2/cycles";
import {
    CheckBoxApp,
    FileInputApp,
    IconApp,
    SelectSearchApp,
} from "../../../components";
import { Empty } from "antd";
import { countries_list_with_other } from "../../../components/Options/OptionsCountries";
import { startShow as startListCurricula } from "../../../redux/actions/teachers/v2/curricula";
import { startShow as startListCycles } from "../../../redux/actions/teachers/v2/cycles";
import AddCurriculas from "./AddCurriculas";
import ModalAppV2 from "../../../components/ModalAppV2";
import Swal from "sweetalert2";
import { OptionsSubCycles } from "../../../components/Options/OptionsCycle";
import dayjs from "dayjs";
import "dayjs/locale/es";
import { capitalizeFirstLetter } from "../../../helpers/FormatString";
import BorderSeparatorApp from "../../../components/BorderSeparatorApp";
import { orderCycles } from "../../../helpers/orderCycles";
import { RichTextApp } from "@components/RichTextApp";

const paymentMonths = {
    month1: {
        from: "",
        to: "",
    },
    month2: {
        from: "",
        to: "",
    },
    month3: {
        from: "",
        to: "",
    },
    month4: {
        from: "",
        to: "",
    },
    month5: {
        from: "",
        to: "",
    },
    month6: {
        from: "",
        to: "",
    },
    month7: {
        from: "",
        to: "",
    },
    month8: {
        from: "",
        to: "",
    },
    month9: {
        from: "",
        to: "",
    },
    month10: {
        from: "",
        to: "",
    },
    month11: {
        from: "",
        to: "",
    },
    month12: {
        from: "",
        to: "",
    },
    month13: {
        from: "",
        to: "",
    },
    month14: {
        from: "",
        to: "",
    },
    month15: {
        from: "",
        to: "",
    },
    month16: {
        from: "",
        to: "",
    },
    month17: {
        from: "",
        to: "",
    },
    month18: {
        from: "",
        to: "",
    },
};

const initialValues = {
    year: "",
    sub_cycle: "",
    identificator: "",
    number_weeks: "",
    periodicity: "",
    student_cycle_view: "",
    student_cycle_view_force: 0,
    edit_group_date: "",
    date_english_exam: "",
    date_documents_limit: "",

    previous_cycle: "",
    next_cycle: "",

    cycle_dates: {
        from: "",
        to: "",
    },

    payments_dates: {
        from: "",
        to: "",
    },

    p1_dates: {
        from: "",
        to: "",
    },
    p1_end_quiz: "",
    p1_grade_periodicity: "",
    lock_p1_dates: {
        from: "",
        to: "",
    },

    p2_dates: {
        from: "",
        to: "",
    },
    p2_end_quiz: "",
    p2_grade_periodicity: "",

    p3_dates: {
        from: "",
        to: "",
    },
    p3_end_quiz: "",
    p3_grade_periodicity: "",

    ord_dates: {
        from: "",
        to: "",
    },
    ord_end_quiz: "",
    ord_grade_periodicity: "",

    ex_dates: {
        from: "",
        to: "",
    },
    ex_end_quiz: "",
    ex_grade_periodicity: "",

    ex2_dates: {
        from: "",
        to: "",
    },
    ex2_end_quiz: "",
    ex2_grade_periodicity: "",

    ex3_dates: {
        from: "",
        to: "",
    },
    ex3_end_quiz: "",
    ex3_grade_periodicity: "",

    lg_dates: {
        from: "",
        to: "",
    },
    lg_end_quiz: "",
    lg_grade_periodicity: "",

    lg_tesis_dates: {
        from: "",
        to: "",
    },
    lg_tesis_end_quiz: "",
    lg_tesis_grade_periodicity: "",

    b1_to: "",
    b1_grade_periodicity: "",

    b2_to: "",
    b2_grade_periodicity: "",

    b3_to: "",
    b3_grade_periodicity: "",

    b4_to: "",
    b4_grade_periodicity: "",

    ...paymentMonths,

    policy: "",
    policy_document: null,
    policy_document_uri: "",

    course_load_confirmation: false,

    country: countries_list_with_other,
    curriculas_ids: "",
    errors: {},
};

const months = {
    undefined: "",
    0: "Enero",
    1: "Febrero",
    2: "Marzo",
    3: "Abril",
    4: "Mayo",
    5: "Junio",
    6: "Julio",
    7: "Agosto",
    8: "Septiembre",
    9: "Octubre",
    10: "Noviembre",
    11: "Diciembre",
};

export const CycleForm = () => {
    const dispatch = useDispatch();

    dayjs.locale("es");

    const {
        openForm,
        active,
        list: cyclesList,
    } = useSelector((state) => state.cycle);
    const { tiny_name } = useSelector((state) => state.config);
    const { list: curriculaList } = useSelector((state) => state.curricula);

    const {
        values,
        handleInputChange,
        setErrors,
        setFormValues,
        setInputValue,
    } = useForm(initialValues);

    const [currentTab, setCurrentTab] = useState("Fechas cobranza");
    const [curriculasIdsSize, setCurriculasIdsSize] = useState(0);
    const [savedCurriculasIds, setSavedCurriculasIds] = useState({});
    const [optionsPreviousCycles, setOptionsPreviousCycles] = useState([]);
    const [optionsNextCycles, setOptionsNextCycles] = useState([]);

    const buttonToModal = useRef(null);

    const {
        year,
        sub_cycle,
        identificator,
        number_weeks,
        periodicity,
        cycle_dates,
        payments_dates,
        student_cycle_view,
        student_cycle_view_force,
        edit_group_date,
        date_english_exam,
        date_documents_limit,

        previous_cycle,
        next_cycle,

        p1_dates,
        p1_end_quiz,
        p1_grade_periodicity,
        lock_p1_dates,

        p2_dates,
        p2_end_quiz,
        p2_grade_periodicity,

        p3_dates,
        p3_end_quiz,
        p3_grade_periodicity,

        ord_dates,
        ord_end_quiz,
        ord_grade_periodicity,

        ex_dates,
        ex_end_quiz,
        ex_grade_periodicity,

        ex2_dates,
        ex2_end_quiz,
        ex2_grade_periodicity,

        ex3_dates,
        ex3_end_quiz,
        ex3_grade_periodicity,

        lg_dates,
        lg_end_quiz,
        lg_grade_periodicity,

        lg_tesis_dates,
        lg_tesis_end_quiz,
        lg_tesis_grade_periodicity,

        b1_to,
        b1_grade_periodicity,

        b2_to,
        b2_grade_periodicity,

        b3_to,
        b3_grade_periodicity,

        b4_to,
        b4_grade_periodicity,

        policy,
        policy_document,
        policy_document_uri,

        course_load_confirmation,

        month1,
        month2,
        month3,
        month4,
        month5,
        month6,
        month7,
        month8,
        month9,
        month10,
        month11,
        month12,
        month13,
        month14,
        month15,
        month16,
        month17,
        month18,
        country,
        curriculas_ids,
        errors,
    } = values;

    useEffect(() => {
        dispatch(startListCurricula({ asList: true }));
        dispatch(startListCycles({ asList: true }));
    }, []);

    //* Se usa para disparar cambios una vez se establezcan los valores default de active
    const [activeChange, setActiveChange] = useState(false);

    useEffect(() => {
        if (active) {
            setFormValues({
                ...initialValues,
                ...active,
                cycle_dates: {
                    from: active.general_from,
                    to: active.general_to,
                },
                payments_dates: {
                    from: active.payments_from,
                    to: active.payments_to,
                },
                p1_dates: {
                    from: active.p1_from,
                    to: active.p1_to,
                },
                lock_p1_dates: {
                    from: active.lock_p1_from,
                    to: active.lock_p1_to,
                },
                p2_dates: {
                    from: active.p2_from,
                    to: active.p2_to,
                },
                p3_dates: {
                    from: active.p3_from,
                    to: active.p3_to,
                },
                ord_dates: {
                    from: active.ord_from,
                    to: active.ord_to,
                },
                ex_dates: {
                    from: active.ex_from,
                    to: active.ex_to,
                },
                ex2_dates: {
                    from: active.ex2_from,
                    to: active.ex2_to,
                },
                ex3_dates: {
                    from: active.ex3_from,
                    to: active.ex3_to,
                },
                lg_dates: {
                    from: active.lg_from,
                    to: active.lg_to,
                },
                lg_tesis_dates: {
                    from: active.lg_tesis_from,
                    to: active.lg_tesis_to,
                },
                month1: {
                    from: !active.month1_from ? "" : active.month1_from,
                    to: !active.month1_to ? "" : active.month1_to,
                },
                month2: {
                    from: !active.month2_from ? "" : active.month2_from,
                    to: !active.month2_to ? "" : active.month2_to,
                },
                month3: {
                    from: !active.month3_from ? "" : active.month3_from,
                    to: !active.month3_to ? "" : active.month3_to,
                },
                month4: {
                    from: !active.month4_from ? "" : active.month4_from,
                    to: !active.month4_to ? "" : active.month4_to,
                },
                month5: {
                    from: !active.month5_from ? "" : active.month5_from,
                    to: !active.month5_to ? "" : active.month5_to,
                },
                month6: {
                    from: !active.month6_from ? "" : active.month6_from,
                    to: !active.month6_to ? "" : active.month6_to,
                },
                month7: {
                    from: !active.month7_from ? "" : active.month7_from,
                    to: !active.month7_to ? "" : active.month7_to,
                },
                month8: {
                    from: !active.month8_from ? "" : active.month8_from,
                    to: !active.month8_to ? "" : active.month8_to,
                },
                month9: {
                    from: !active.month9_from ? "" : active.month9_from,
                    to: !active.month9_to ? "" : active.month9_to,
                },
                month10: {
                    from: !active.month10_from ? "" : active.month10_from,
                    to: !active.month10_to ? "" : active.month10_to,
                },
                month11: {
                    from: !active.month11_from ? "" : active.month11_from,
                    to: !active.month11_to ? "" : active.month11_to,
                },
                month12: {
                    from: !active.month12_from ? "" : active.month12_from,
                    to: !active.month12_to ? "" : active.month12_to,
                },
                month13: {
                    from: !active.month13_from ? "" : active.month13_from,
                    to: !active.month13_to ? "" : active.month13_to,
                },
                month14: {
                    from: !active.month14_from ? "" : active.month14_from,
                    to: !active.month14_to ? "" : active.month14_to,
                },
                month15: {
                    from: !active.month15_from ? "" : active.month15_from,
                    to: !active.month15_to ? "" : active.month15_to,
                },
                month16: {
                    from: !active.month16_from ? "" : active.month16_from,
                    to: !active.month16_to ? "" : active.month16_to,
                },
                month17: {
                    from: !active.month17_from ? "" : active.month17_from,
                    to: !active.month17_to ? "" : active.month17_to,
                },
                month18: {
                    from: !active.month18_from ? "" : active.month18_from,
                    to: !active.month18_to ? "" : active.month18_to,
                },

                country: active?.country,
                curriculas_ids: active?.curriculas_ids || "",
                errors: {},
            });
            setActiveChange(!activeChange);
        }
    }, [active]);

    useEffect(() => {
        calcPaymentDates(payments_dates.from, payments_dates.to);
    }, [payments_dates.from, payments_dates.to]);

    useEffect(() => {
        if (!active) {
            clearDates();
        } else {
            if (periodicity && periodicity !== active.periodicity) {
                clearDates();
            }
        }
    }, [periodicity, active]);

    useEffect(() => {
        setCurriculasIdsSize(
          curriculas_ids === "" ? 0 : curriculas_ids?.split(",")?.length || 0
        );
    }, [curriculas_ids]);

    //* filtrar opciones para ciclos anteriores y siguentes
    useEffect(() => {
        if (cyclesList.length > 0) {
            const previous = cyclesList.filter((c) => {
                const aValue = `${year}${sub_cycle}`;
                const cValue = `${c.year}${c.sub_cycle}`;
                const isOlder = cValue < aValue;

                const isSamePeriodicity = c.periodicity === periodicity;

                const isSameAsActive = c.id === active?.id;

                return isOlder && isSamePeriodicity && !isSameAsActive;
            });
            setOptionsPreviousCycles(previous);

            const next = cyclesList.filter((c) => {
                const aValue = `${year}${sub_cycle}`;
                const cValue = `${c.year}${c.sub_cycle}`;
                const isNewer = cValue > aValue;

                const isSamePeriodicity = c.periodicity === periodicity;

                const isSameAsActive = c.id === active?.id;

                return isNewer && isSamePeriodicity && !isSameAsActive;
            });
            setOptionsNextCycles(next);
        }
    }, [cyclesList, periodicity, year, sub_cycle]);

    //* Validar que no se mezclen ofertas educativas de distintas periodicidades
    useEffect(() => {
        if (curriculas_ids) {
            // Obtener un elemento de la lista de curriculas completa para saber la periodicidad actual de los guardados
            const currentCurricula = curriculaList?.filter(
                (curriculaL) => curriculaL?.id == curriculas_ids.split(",")[0]
            );
            if (currentCurricula?.length > 0) {
                // La periodicidad de las ofertas educativas seleccionadas previamente
                const currentPeriodicity =
                    currentCurricula.find((c) => c?.periodicity)?.periodicity ||
                    "";

                if (currentPeriodicity !== periodicity.toUpperCase()) {
                    Swal.fire({
                        title: "Confirmar acción",
                        html: `
                            <div className="text-center">
                                <h5>Actualmente hay ${curriculasIdsSize} ofertas educativas seleccionadas del periodo <strong>${currentPeriodicity}</strong>.</h5>
                                <br />
                                <span className="mb-0">
                                    Al cambiar el periodo, deberá seleccionar nuevamente las ofertas educativas vinculadas a este ciclo
                                </span>
                            </div>
                        `,
                        icon: "warning",
                        confirmButtonColor: "#134586",
                        confirmButtonText: "Cambiar el periodo",
                        showCancelButton: true,
                        cancelButtonText: "Cancelar",
                        cancelButtonColor: "rgb(220, 55, 65)",
                        customClass: {
                            confirmButton: "confirm-button-class",
                            cancelButton: "cancel-button-class",
                        },
                        didOpen: () => {
                            const confirmButton = document.querySelector(
                                ".confirm-button-class"
                            );
                            const camcelButton = document.querySelector(
                                ".cancel-button-class"
                            );

                            if (confirmButton && camcelButton) {
                                confirmButton.style.marginLeft = "20px";
                                camcelButton.style.marginLeft = "20px";
                            }
                        },
                        reverseButtons: true,
                        width: 700,
                    }).then(async (result) => {
                        if (result.isConfirmed) {
                            // Respaldar las ofertas educativas previamente seleccionadas y eliminarlas
                            setSavedCurriculasIds({
                                curriculas_ids,
                                periodicity:
                                    currentPeriodicity.charAt(0).toUpperCase() +
                                    currentPeriodicity.slice(1).toLowerCase(),
                            });
                            setInputValue("curriculas_ids", "");
                        } else {
                            // Regresar la periodicidad a como estaba previamente
                            setInputValue(
                                "periodicity",
                                currentPeriodicity.charAt(0).toUpperCase() +
                                    currentPeriodicity.slice(1).toLowerCase()
                            );
                        }
                    });
                }
            }
        } else {
            /*
                Restablecer las ofertas educativas que se borraron al hacer el cambio de periodo,
                solamente si todavía no hay ninguna oferta educativa nueva
            */
            if (
                savedCurriculasIds?.periodicity === periodicity &&
                savedCurriculasIds?.curriculas_ids
            ) {
                setInputValue(
                    "curriculas_ids",
                    savedCurriculasIds.curriculas_ids
                );
            }
        }
    }, [periodicity]);

    // Si se selecciona "Todos", se quita el resto de países, si no, se quita "Todos"
    // useEffect(() => {
    //     if (Array.isArray(country)) {
    //         if (country.length === 0) {
    //             setCountries(countries_list_with_all);
    //         } else {
    //             const countryHasTodos = country?.find(
    //                 (c) => c.value === "Todos"
    //             );
    //             if (countryHasTodos) {
    //                 setCountries(countries.filter((c) => c.value === "Todos"));
    //             } else {
    //                 setCountries(countries.filter((c) => c.value !== "Todos"));
    //             }
    //         }
    //     } else if (typeof country === "string") {
    //         if (country === "") {
    //             setCountries(countries_list_with_all);
    //         } else {
    //             if (country.includes("Todos")) {
    //                 setCountries(countries.filter((c) => c.value === "Todos"));
    //             } else {
    //                 setCountries(countries.filter((c) => c.value !== "Todos"));
    //             }
    //         }
    //     }
    // }, [country]);

    const clearDates = () => {
        setInputValue("cycle_dates", { from: "", to: "" });
        setInputValue("payments_dates", { from: "", to: "" });
        setInputValue("month1", { from: "", to: "" });
        setInputValue("month2", { from: "", to: "" });
        setInputValue("month3", { from: "", to: "" });
        setInputValue("month4", { from: "", to: "" });
        setInputValue("month5", { from: "", to: "" });
        setInputValue("month6", { from: "", to: "" });
        setInputValue("month7", { from: "", to: "" });
        setInputValue("month8", { from: "", to: "" });
        setInputValue("month9", { from: "", to: "" });
        setInputValue("month10", { from: "", to: "" });
        setInputValue("month11", { from: "", to: "" });
        setInputValue("month12", { from: "", to: "" });
        setInputValue("month13", { from: "", to: "" });
        setInputValue("month14", { from: "", to: "" });
        setInputValue("month15", { from: "", to: "" });
        setInputValue("month16", { from: "", to: "" });
        setInputValue("month17", { from: "", to: "" });
        setInputValue("month18", { from: "", to: "" });
    };

    const handleClose = () => {
        dispatch(startUnsetActive());
        dispatch(startCloseModal());
        setFormValues(initialValues);
        setCurrentTab("Fechas cobranza");
    };

    const handleClickToModal = () => {
        buttonToModal.current.click();
    };

    const handleSave = async (e) => {
        e.preventDefault();

        if (curriculasIdsSize === 0 && !periodicity) {
            Swal.fire({
                title: "Sin periodo ni ofertas educativas",
                html: `
                <div className="text-center">
                    <h4>No se ha seleccionado ningún periodo ni oferta educativa para este ciclo.</h4>
                    <br />
                    <span className="mb-0">
                        Seleccione un periodo y después haga clic en el botón
                        <strong>
                            Seleccionar ofertas educativas +
                        </strong>
                    </span>
                </div>
            `,
                icon: "warning",
                confirmButtonText: "Entendido",
                width: 720,
            });
        } else if (periodicity !== "Anual" && curriculasIdsSize === 0) {
            Swal.fire({
                title: "Sin ofertas educativas",
                html: `
                <div className="text-center">
                    <h4>No se ha seleccionado ninguna oferta educativa para este ciclo.</h4>
                    <br />
                    <span className="mb-0">¿Desea realizar la selección en este momento?</span>
                </div>
            `,
                icon: "warning",
                confirmButtonColor: "#134586",
                confirmButtonText: "Realizar la selección",
                showDenyButton: false,
                // denyButtonText: "No realizar la selección",
                // denyButtonColor: "#134586",
                showCancelButton: true,
                cancelButtonText: "Cancelar",
                cancelButtonColor: "rgb(220, 55, 65)",
                customClass: {
                    confirmButton: "confirm-button-class",
                    cancelButton: "cancel-button-class",
                },
                didOpen: () => {
                    const confirmButton = document.querySelector(
                        ".confirm-button-class"
                    );
                    const cancelButton = document.querySelector(
                        ".cancel-button-class"
                    );

                    if (confirmButton && cancelButton) {
                        confirmButton.style.marginLeft = "20px";
                        cancelButton.style.marginLeft = "20px";
                    }
                },
                reverseButtons: true,
                width: 680,
            }).then(async (result) => {
                if (result.isConfirmed) {
                    handleClickToModal();
                }
            });
        } else {
            let joinCountry;

            if (Array.isArray(country)) {
                joinCountry = country.map((c) => c.value).join(",");
            } else if (typeof country === "string") {
                joinCountry = country;
            }

            if (!active) {
                await dispatch(
                    startCreateCycle(
                        { ...values, country: joinCountry },
                        setErrors
                    )
                );
            } else {
                await dispatch(
                    startUpdateCycle(
                        { ...values, country: joinCountry },
                        setErrors
                    )
                );
            }
            // handleClose();
            dispatch(startShowCycle(values));
        }
    };

    const handleDeletePolicyDocument = () => {
        setInputValue("policy_document_uri", "");
        setInputValue("removed_policy_document", true);
    };

    function getMonthYear(fromDate) {
        if (!fromDate) {
            return "";
        } else {
            const date = dayjs(fromDate);
            return capitalizeFirstLetter(
                `${date.format("MMMM")} ${date.format("YYYY")}`
            );
        }
    }

    const getMonthDates = (startDate, endDate) => {
        const months = [];

        let currentDate = dayjs(startDate).startOf("month"); // Empezar en el primer día del mes
        const end = dayjs(endDate).endOf("month"); // Terminar en el último día del mes

        while (currentDate <= end) {
            const monthName = currentDate.locale("es").format("MMMM"); // Nombre del mes en español
            const monthNumber = currentDate.locale("es").format("MM"); // Nombre del mes en español
            const year = currentDate.year();
            const from = currentDate.startOf("month").format("YYYY-MM-DD"); // Primer día del mes
            const to = currentDate.date(5).format("YYYY-MM-DD"); // Quinto día del mes

            // Agregar un objeto con mes y año si no está ya en el array
            if (
                !months.some(
                    (month) => month.month === monthName && month.year === year
                )
            ) {
                months.push({ month: monthName, monthNumber, year, from, to });
            }

            currentDate = currentDate.add(1, "month"); // Mover al siguiente mes
        }

        return months;
    };

    function calcPaymentDates(dateFrom, dateTo) {
        let updatedValues = { ...values, ...paymentMonths };
        const idxToMonth = {
            0: "month1",
            1: "month2",
            2: "month3",
            3: "month4",
            4: "month5",
            5: "month6",
            6: "month7",
            7: "month8",
            8: "month9",
            9: "month10",
            10: "month11",
            11: "month12",
            12: "month13",
            13: "month14",
            14: "month15",
            15: "month16",
            16: "month17",
            17: "month18",
        };
        if (!dateFrom || !dateTo) {
            return false;
        }

        const monthPeriod = getMonthDates(dateFrom, dateTo);

        monthPeriod.forEach((month, i) => {
            const monthName = idxToMonth[String(i)];
            // Convertir las fechas en dayjs
            const monthYearValid = dayjs(
                `${month.year}-${month.monthNumber}-01`
            );

            let monthValueFrom = dayjs(values[monthName]?.from || month.from);
            let monthValueTo = dayjs(values[monthName]?.to || month.to);

            if (
                monthValueFrom.format("MM/YYYY") !==
                    monthYearValid.format("MM/YYYY") ||
                monthValueTo.format("MM/YYYY") !==
                    monthYearValid.format("MM/YYYY")
            ) {
                monthValueFrom = dayjs(month.from);
                monthValueTo = dayjs(month.to);
            }

            const monthsDates = {
                [monthName]: {
                    from: monthValueFrom.format("YYYY-MM-DD"),
                    to: monthValueTo.format("YYYY-MM-DD"),
                },
            };
            updatedValues = { ...updatedValues, ...monthsDates };
        });
        setFormValues(updatedValues);
    }

    return (
        <Modal
            show={openForm}
            onHide={handleClose}
            backdrop="static"
            keyboard={false}
            size="xl"
        >
            <Modal.Header closeButton>
                <Modal.Title>
                    {!active ? "Agregar" : "Actualizar"} ciclo escolar
                </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Row className="second_area mx-3">
                    <Col md={3}>
                        <InputApp
                            title="Año del ciclo"
                            type="number"
                            name="year"
                            value={year}
                            min={`${new Date().getFullYear() - 6}`}
                            max={`${new Date().getFullYear() + 2}`}
                            onChange={handleInputChange}
                            errorText={errors.year && errors.year[0]}
                        />
                    </Col>
                    <Col md={3}>
                        <SelectSearchApp
                            title="Sub Ciclo"
                            type="number"
                            name="sub_cycle"
                            value={sub_cycle}
                            onChange={handleInputChange}
                            options={[
                                { value: "", label: "Seleccione.." },
                                ...OptionsSubCycles,
                            ]}
                            errorText={errors.sub_cycle && errors.sub_cycle[0]}
                        />
                    </Col>
                    <Col md={3}>
                        <InputApp
                            title="Identificador"
                            type="text"
                            name="identificator"
                            value={identificator}
                            onChange={handleInputChange}
                            errorText={
                                errors.identificator && errors.identificator[0]
                            }
                        />
                    </Col>
                    {/* {console.log(values)} */}
                    <Col md={3}>
                        <SelectSearchApp
                            title="Periodo"
                            type="text"
                            name="periodicity"
                            value={periodicity}
                            onChange={handleInputChange}
                            options={[
                                ...(!active
                                    ? [{ value: "", label: "Selecciona ..." }]
                                    : []),
                                {
                                    value: "Cuatrimestral",
                                    label: "Cuatrimestral",
                                },
                                ...(tiny_name !== "EAD"
                                    ? [
                                          {
                                              value: "Semestral",
                                              label: "Semestral",
                                          },
                                      ]
                                    : []),
                                ...(tiny_name !== "EAD"
                                    ? [
                                          {
                                              value: "Diplomado",
                                              label: "Diplomado",
                                          },
                                          {
                                              value: "Anual",
                                              label: "Anual",
                                          },
                                          {
                                              value: "Curso",
                                              label: "Curso",
                                          },
                                      ]
                                    : []),
                            ]}
                            errorText={
                                errors.periodicity && errors.periodicity[0]
                            }
                        />
                    </Col>

                    <Col md={4}>
                        <InputApp
                            title="Número de semanas"
                            placeholder="Ingrese el número de semanas"
                            infoText="Número de semanas de duración del ciclo"
                            type="number"
                            min="1"
                            max="200"
                            step="1"
                            name="number_weeks"
                            value={number_weeks}
                            onChange={handleInputChange}
                            errorText={
                                errors.number_weeks && errors.number_weeks[0]
                            }
                        />
                    </Col>

                    <Row className="mb-3 mt-3">
                        <Col md={12}>
                            <DatePickerRange
                                title="Periodo de clases"
                                from={cycle_dates.from}
                                to={cycle_dates.to}
                                path="cycle_dates"
                                toMaxLimit={18}
                                disableTo
                                handleInputChange={handleInputChange}
                            />
                        </Col>
                    </Row>

                    <Col md={6}>
                        <InputApp
                            title="Fecha de visualización para el estudiante"
                            type="date"
                            name="student_cycle_view"
                            value={student_cycle_view}
                            onChange={handleInputChange}
                            errorText={
                                errors.student_cycle_view &&
                                errors.student_cycle_view[0]
                            }
                            infoText="Si no se establece una fecha, será visible según sus fechas generales."
                        />
                    </Col>

                    <Row className="mb-3">
                        <hr className="mt-3" />
                        <Col md={6}>
                            <SelectSearchApp
                                title="Ciclo anterior"
                                placeholder="Seleccione el ciclo anterior"
                                name="previous_cycle"
                                value={previous_cycle}
                                onChange={handleInputChange}
                                options={orderCycles(
                                    optionsPreviousCycles,
                                    false
                                )}
                                errorText={
                                    errors.previous_cycle &&
                                    errors.previous_cycle[0]
                                }
                            />
                        </Col>
                        <Col md={6}>
                            <SelectSearchApp
                                title="Siguente ciclo"
                                placeholder="Seleccione el siguente ciclo"
                                name="next_cycle"
                                value={next_cycle}
                                onChange={handleInputChange}
                                options={orderCycles(optionsNextCycles, false)}
                                errorText={
                                    errors.next_cycle && errors.next_cycle[0]
                                }
                            />
                        </Col>
                    </Row>

                    <Tabs
                        defaultActiveKey="Fechas cobranza"
                        id="tabs-config"
                        className="mb-3 mt-4 text-size-14 nav-fill"
                        activeKey={currentTab}
                        onSelect={(tab) => setCurrentTab(tab)}
                    >
                        <Tab eventKey="Fechas cobranza" title="Fechas cobranza">
                            <Row className="mb-2 mt-3">
                                <DatePickerRange
                                    title="Fechas de cobranza"
                                    from={payments_dates.from}
                                    to={payments_dates.to}
                                    path="payments_dates"
                                    toMaxLimit={18}
                                    disableTo
                                    handleInputChange={handleInputChange}
                                    titleInputFrom="Inicio"
                                    titleInputTo="Fin"
                                />
                                <span className="d-flex justify-content-center text-size-12">
                                    {" "}
                                    * Periodo de tiempo en el que se aplicará la
                                    cobranza
                                </span>
                            </Row>
                            <hr />
                            {month1.from == "" ? (
                                <Row>
                                    <Empty description="Agregue fechas de cobranza para visualizar las mensualidades." />

                                    <h5 className="text-center"></h5>
                                </Row>
                            ) : (
                                <Row>
                                    <Col md={12}>
                                        {month1?.from !== "" && (
                                            <DatePickerRange
                                                title={`Inscripción|Reinscripción (${getMonthYear(
                                                    month1.from
                                                )})`}
                                                from={month1.from}
                                                to={month1.to}
                                                path="month1"
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                toMaxLimit={2}
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month2.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month2.from
                                                )})`}
                                                from={month2.from}
                                                to={month2.to}
                                                path="month2"
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                toMaxLimit={2}
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month3.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month3.from
                                                )})`}
                                                from={month3.from}
                                                to={month3.to}
                                                path="month3"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month4.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month4.from
                                                )})`}
                                                from={month4.from}
                                                to={month4.to}
                                                path="month4"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month5.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month5.from
                                                )})`}
                                                from={month5.from}
                                                to={month5.to}
                                                path="month5"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month6.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month6.from
                                                )})`}
                                                from={month6.from}
                                                to={month6.to}
                                                path="month6"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month7.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month7.from
                                                )})`}
                                                from={month7.from}
                                                to={month7.to}
                                                path="month7"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month8.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month8.from
                                                )})`}
                                                from={month8.from}
                                                to={month8.to}
                                                path="month8"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month9.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month9.from
                                                )})`}
                                                from={month9.from}
                                                to={month9.to}
                                                path="month9"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month10.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month10.from
                                                )})`}
                                                from={month10.from}
                                                to={month10.to}
                                                path="month10"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month11.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month11.from
                                                )})`}
                                                from={month11.from}
                                                to={month11.to}
                                                path="month11"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month12.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month12.from
                                                )})`}
                                                from={month12.from}
                                                to={month12.to}
                                                path="month12"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month13.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month13.from
                                                )})`}
                                                from={month13.from}
                                                to={month13.to}
                                                path="month13"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month14.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month14.from
                                                )})`}
                                                from={month14.from}
                                                to={month14.to}
                                                path="month14"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month15.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month15.from
                                                )})`}
                                                from={month15.from}
                                                to={month15.to}
                                                toMaxLimit={2}
                                                path="month15"
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month16.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month16.from
                                                )})`}
                                                from={month16.from}
                                                to={month16.to}
                                                path="month16"
                                                toMaxLimit={2}
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month17.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month17.from
                                                )})`}
                                                from={month17.from}
                                                to={month17.to}
                                                toMaxLimit={2}
                                                path="month17"
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                        {month18.from !== "" && (
                                            <DatePickerRange
                                                title={`Colegiatura (${getMonthYear(
                                                    month18.from
                                                )})`}
                                                from={month18.from}
                                                to={month18.to}
                                                toMaxLimit={2}
                                                path="month18"
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio de fechas de cobranza"
                                                titleInputTo="Fin de fechas de cobranza"
                                            />
                                        )}
                                    </Col>
                                </Row>
                            )}
                        </Tab>

                        <Tab
                            eventKey="Fechas escolares"
                            title="Fechas escolares"
                        >
                            <BorderSeparatorApp
                                title="Parciales"
                                showColon={false}
                                marginTop={"mt-3"}
                            />

                            {/* p1 */}
                            <Row>
                                <label
                                    htmlFor={`id-input-p1 x`}
                                    style={{
                                        fontSize: "13px",
                                        fontWeight: 500,
                                        marginTop: "0.5rem",
                                    }}
                                >
                                    <span className="fs-5">
                                        <strong>
                                            {tiny_name != "EAD"
                                                ? "Parcial 1"
                                                : "Módulo 1"}
                                            :
                                        </strong>
                                    </span>
                                </label>

                                <DatePickerRange
                                    showLabel={false}
                                    md={3}
                                    from={p1_dates.from}
                                    to={p1_dates.to}
                                    path="p1_dates"
                                    handleInputChange={handleInputChange}
                                    titleInputFrom="Inicio de clases"
                                    titleInputTo="Inicio de exámenes"
                                    infoTextInputFrom={
                                        "Inicio de toma de asistencias"
                                    }
                                    infoTextInputTo={
                                        "Inicio de carga de calificaciones"
                                    }
                                />

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="p1_end_quiz"
                                        title="Fin de exámenes"
                                        infoText="Fin de toma de asistencias"
                                        value={p1_end_quiz}
                                        onChange={handleInputChange}
                                    />
                                </Col>

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="p1_grade_periodicity"
                                        title="Corrección de calificaciones"
                                        infoText="Fin de carga de calificaciones"
                                        value={p1_grade_periodicity}
                                        onChange={handleInputChange}
                                    />
                                </Col>
                            </Row>

                            {/* p2 */}
                            <Row>
                                <label
                                    htmlFor={`id-input-p2 x`}
                                    style={{
                                        fontSize: "13px",
                                        fontWeight: 500,
                                        marginTop: "0.5rem",
                                    }}
                                >
                                    <span className="fs-5">
                                        <strong>
                                            {tiny_name != "EAD"
                                                ? "Parcial 2"
                                                : "Módulo 2"}
                                            :
                                        </strong>
                                    </span>
                                </label>

                                <DatePickerRange
                                    showLabel={false}
                                    md={3}
                                    from={p2_dates.from}
                                    to={p2_dates.to}
                                    path="p2_dates"
                                    handleInputChange={handleInputChange}
                                    titleInputFrom="Inicio de clases"
                                    titleInputTo="Inicio de exámenes"
                                    infoTextInputFrom={
                                        "Inicio de toma de asistencias"
                                    }
                                    infoTextInputTo={
                                        "Inicio de carga de calificaciones"
                                    }
                                />

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="p2_end_quiz"
                                        title="Fin de exámenes"
                                        infoText="Fin de toma de asistencias"
                                        value={p2_end_quiz}
                                        onChange={handleInputChange}
                                    />
                                </Col>

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="p2_grade_periodicity"
                                        title="Corrección de calificaciones"
                                        infoText="Fin de carga de calificaciones"
                                        value={p2_grade_periodicity}
                                        onChange={handleInputChange}
                                    />
                                </Col>
                            </Row>

                            {/* p3 */}
                            {(periodicity === "Semestral" ||
                                tiny_name === "EAD") && (
                                <Row>
                                    <label
                                        htmlFor={`id-input-p3 x`}
                                        style={{
                                            fontSize: "13px",
                                            fontWeight: 500,
                                            marginTop: "0.5rem",
                                        }}
                                    >
                                        <span className="fs-5">
                                            <strong>
                                                {tiny_name != "EAD"
                                                    ? "Parcial 3"
                                                    : "Módulo 3"}
                                                :
                                            </strong>
                                        </span>
                                    </label>

                                    <DatePickerRange
                                        showLabel={false}
                                        md={3}
                                        from={p3_dates.from}
                                        to={p3_dates.to}
                                        path="p3_dates"
                                        handleInputChange={handleInputChange}
                                        titleInputFrom="Inicio de clases"
                                        titleInputTo="Inicio de exámenes"
                                        infoTextInputFrom={
                                            "Inicio de toma de asistencias"
                                        }
                                        infoTextInputTo={
                                            "Inicio de carga de calificaciones"
                                        }
                                    />

                                    <Col md={3}>
                                        <InputApp
                                            type="date"
                                            name="p3_end_quiz"
                                            title="Fin de exámenes"
                                            infoText="Fin de toma de asistencias"
                                            value={p3_end_quiz}
                                            onChange={handleInputChange}
                                        />
                                    </Col>

                                    <Col md={3}>
                                        <InputApp
                                            type="date"
                                            name="p3_grade_periodicity"
                                            title="Corrección de calificaciones"
                                            infoText="Fin de carga de calificaciones"
                                            value={p3_grade_periodicity}
                                            onChange={handleInputChange}
                                        />
                                    </Col>
                                </Row>
                            )}

                            {/* ord */}
                            {tiny_name !== "EAD" && (
                                <Row>
                                    <label
                                        htmlFor={`id-input-ord x`}
                                        style={{
                                            fontSize: "13px",
                                            fontWeight: 500,
                                            marginTop: "0.5rem",
                                        }}
                                    >
                                        <span className="fs-5">
                                            <strong>Ordinario:</strong>
                                        </span>
                                    </label>

                                    <DatePickerRange
                                        showLabel={false}
                                        md={3}
                                        from={ord_dates.from}
                                        to={ord_dates.to}
                                        path="ord_dates"
                                        handleInputChange={handleInputChange}
                                        titleInputFrom="Inicio de clases"
                                        titleInputTo="Inicio de exámenes"
                                        infoTextInputFrom={
                                            "Inicio de toma de asistencias"
                                        }
                                        infoTextInputTo={
                                            "Inicio de carga de calificaciones"
                                        }
                                    />

                                    <Col md={3}>
                                        <InputApp
                                            type="date"
                                            name="ord_end_quiz"
                                            title="Fin de exámenes"
                                            infoText="Fin de toma de asistencias"
                                            value={ord_end_quiz}
                                            onChange={handleInputChange}
                                        />
                                    </Col>

                                    <Col md={3}>
                                        <InputApp
                                            type="date"
                                            name="ord_grade_periodicity"
                                            title="Corrección de calificaciones"
                                            infoText="Fin de carga de calificaciones"
                                            value={ord_grade_periodicity}
                                            onChange={handleInputChange}
                                        />
                                    </Col>
                                </Row>
                            )}

                            {tiny_name === "EAD" && (
                                <>
                                    <Row>
                                        <label
                                            htmlFor={`id-input-lg x`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>
                                                    Longitudinal UAI:
                                                </strong>
                                            </span>
                                        </label>

                                        <DatePickerRange
                                            showLabel={false}
                                            md={3}
                                            from={lg_dates.from}
                                            to={lg_dates.to}
                                            path="lg_dates"
                                            handleInputChange={
                                                handleInputChange
                                            }
                                            titleInputFrom="Inicio de clases"
                                            titleInputTo="Inicio de exámenes"
                                            infoTextInputFrom={
                                                "Inicio de toma de asistencias"
                                            }
                                            infoTextInputTo={
                                                "Inicio de carga de calificaciones"
                                            }
                                        />

                                        <Col md={3}>
                                            <InputApp
                                                type="date"
                                                name="lg_end_quiz"
                                                title="Fin de exámenes"
                                                infoText="Fin de toma de asistencias"
                                                value={lg_end_quiz}
                                                onChange={handleInputChange}
                                            />
                                        </Col>

                                        <Col md={3}>
                                            <InputApp
                                                type="date"
                                                name="lg_grade_periodicity"
                                                title="Corrección de calificaciones"
                                                infoText="Fin de carga de calificaciones"
                                                value={lg_grade_periodicity}
                                                onChange={handleInputChange}
                                            />
                                        </Col>
                                    </Row>

                                    <Row>
                                        <label
                                            htmlFor={`id-input-lg x`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>
                                                    Longitudinal Tesis:
                                                </strong>
                                            </span>
                                        </label>

                                        <DatePickerRange
                                            showLabel={false}
                                            md={3}
                                            from={lg_tesis_dates.from}
                                            to={lg_tesis_dates.to}
                                            path="lg_tesis_dates"
                                            handleInputChange={
                                                handleInputChange
                                            }
                                            titleInputFrom="Inicio de clases"
                                            titleInputTo="Inicio de exámenes"
                                            infoTextInputFrom={
                                                "Inicio de toma de asistencias"
                                            }
                                            infoTextInputTo={
                                                "Inicio de carga de calificaciones"
                                            }
                                        />

                                        <Col md={3}>
                                            <InputApp
                                                type="date"
                                                name="lg_tesis_end_quiz"
                                                title="Fin de exámenes"
                                                infoText="Fin de toma de asistencias"
                                                value={lg_tesis_end_quiz}
                                                onChange={handleInputChange}
                                            />
                                        </Col>

                                        <Col md={3}>
                                            <InputApp
                                                type="date"
                                                name="lg_tesis_grade_periodicity"
                                                title="Corrección de calificaciones"
                                                infoText="Fin de carga de calificaciones"
                                                value={
                                                    lg_tesis_grade_periodicity
                                                }
                                                onChange={handleInputChange}
                                            />
                                        </Col>
                                    </Row>
                                </>
                            )}

                            <BorderSeparatorApp
                                title="Extraordinarios"
                                showColon={false}
                            />

                            <Row>
                                <label
                                    htmlFor={`id-input-ex x`}
                                    style={{
                                        fontSize: "13px",
                                        fontWeight: 500,
                                        marginTop: "0.5rem",
                                    }}
                                >
                                    <span className="fs-5">
                                        <strong>Extraordinario 1:</strong>
                                    </span>
                                </label>

                                <DatePickerRange
                                    showLabel={false}
                                    md={3}
                                    from={ex_dates.from}
                                    to={ex_dates.to}
                                    path="ex_dates"
                                    handleInputChange={handleInputChange}
                                    titleInputFrom="Inicio de clases"
                                    titleInputTo="Inicio de exámenes"
                                    infoTextInputFrom={
                                        "Inicio de toma de asistencias"
                                    }
                                    infoTextInputTo={
                                        "Inicio de carga de calificaciones"
                                    }
                                />

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="ex_end_quiz"
                                        title="Fin de exámenes"
                                        infoText="Fin de toma de asistencias"
                                        value={ex_end_quiz}
                                        onChange={handleInputChange}
                                    />
                                </Col>

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="ex_grade_periodicity"
                                        title="Corrección de calificaciones"
                                        infoText="Fin de carga de calificaciones"
                                        value={ex_grade_periodicity}
                                        onChange={handleInputChange}
                                    />
                                </Col>
                            </Row>

                            <Row>
                                <label
                                    htmlFor={`id-input-ex2 x`}
                                    style={{
                                        fontSize: "13px",
                                        fontWeight: 500,
                                        marginTop: "0.5rem",
                                    }}
                                >
                                    <span className="fs-5">
                                        <strong>Extraordinario 2:</strong>
                                    </span>
                                </label>

                                <DatePickerRange
                                    showLabel={false}
                                    md={3}
                                    from={ex2_dates.from}
                                    to={ex2_dates.to}
                                    path="ex2_dates"
                                    handleInputChange={handleInputChange}
                                    titleInputFrom="Inicio de clases"
                                    titleInputTo="Inicio de exámenes"
                                    infoTextInputFrom={
                                        "Inicio de toma de asistencias"
                                    }
                                    infoTextInputTo={
                                        "Inicio de carga de calificaciones"
                                    }
                                />

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="ex2_end_quiz"
                                        title="Fin de exámenes"
                                        infoText="Fin de toma de asistencias"
                                        value={ex2_end_quiz}
                                        onChange={handleInputChange}
                                    />
                                </Col>

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="ex2_grade_periodicity"
                                        title="Corrección de calificaciones"
                                        infoText="Fin de carga de calificaciones"
                                        value={ex2_grade_periodicity}
                                        onChange={handleInputChange}
                                    />
                                </Col>
                            </Row>

                            <Row>
                                <label
                                    htmlFor={`id-input-ex3 x`}
                                    style={{
                                        fontSize: "13px",
                                        fontWeight: 500,
                                        marginTop: "0.5rem",
                                    }}
                                >
                                    <span className="fs-5">
                                        <strong>Extraordinario 3:</strong>
                                    </span>
                                </label>

                                <DatePickerRange
                                    showLabel={false}
                                    md={3}
                                    from={ex3_dates.from}
                                    to={ex3_dates.to}
                                    path="ex3_dates"
                                    handleInputChange={handleInputChange}
                                    titleInputFrom="Inicio de clases"
                                    titleInputTo="Inicio de exámenes"
                                    infoTextInputFrom={
                                        "Inicio de toma de asistencias"
                                    }
                                    infoTextInputTo={
                                        "Inicio de carga de calificaciones"
                                    }
                                />

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="ex3_end_quiz"
                                        title="Fin de exámenes"
                                        infoText="Fin de toma de asistencias"
                                        value={ex3_end_quiz}
                                        onChange={handleInputChange}
                                    />
                                </Col>

                                <Col md={3}>
                                    <InputApp
                                        type="date"
                                        name="ex3_grade_periodicity"
                                        title="Corrección de calificaciones"
                                        infoText="Fin de carga de calificaciones"
                                        value={ex3_grade_periodicity}
                                        onChange={handleInputChange}
                                    />
                                </Col>
                            </Row>

                            {["Cuatrimestral", "Semestral"].includes(
                                periodicity
                            ) && (
                                <>
                                    <BorderSeparatorApp
                                        title="Ordinario por bloques"
                                        showColon={false}
                                        tooltipTitle={
                                            <h5 className="mt-2">
                                                <IconApp
                                                    iconClassName="fa fa-circle-info"
                                                    fontSize="16px"
                                                />{" "}
                                                Evaluación de ordinario por
                                                bloques
                                            </h5>
                                        }
                                        tooltipBody={
                                            <div
                                                style={{
                                                    maxWidth: "30rem",
                                                }}
                                            >
                                                <span className="h6">
                                                    Si una materia finaliza a la
                                                    mitad del ciclo escolar, se
                                                    permite calificar la
                                                    totalidad de la materia en
                                                    un periodo ordinario
                                                    intermedio, sin necesidad de
                                                    esperar al final del ciclo.
                                                </span>
                                            </div>
                                        }
                                    />

                                    <Row>
                                        <label
                                            htmlFor={`id-input-b1_to x`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>Bloque 1:</strong>
                                            </span>
                                        </label>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b1_to"
                                                title="Inicio de calificaciones"
                                                value={b1_to}
                                                onChange={handleInputChange}
                                            />
                                        </Col>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b1_grade_periodicity"
                                                title="Fin de calificaciones"
                                                value={b1_grade_periodicity}
                                                onChange={handleInputChange}
                                            />
                                        </Col>
                                    </Row>

                                    <Row>
                                        <label
                                            htmlFor={`id-input-b2_to x`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>Bloque 2:</strong>
                                            </span>
                                        </label>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b2_to"
                                                title="Inicio de calificaciones"
                                                value={b2_to}
                                                onChange={handleInputChange}
                                            />
                                        </Col>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b2_grade_periodicity"
                                                title="Fin de calificaciones"
                                                value={b2_grade_periodicity}
                                                onChange={handleInputChange}
                                            />
                                        </Col>
                                    </Row>

                                    <Row>
                                        <label
                                            htmlFor={`id-input-b3_to x`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>Bloque 3:</strong>
                                            </span>
                                        </label>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b3_to"
                                                title="Inicio de calificaciones"
                                                value={b3_to}
                                                onChange={handleInputChange}
                                            />
                                        </Col>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b3_grade_periodicity"
                                                title="Fin de calificaciones"
                                                value={b3_grade_periodicity}
                                                onChange={handleInputChange}
                                            />
                                        </Col>
                                    </Row>

                                    <Row>
                                        <label
                                            htmlFor={`id-input-b4_to x`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>Bloque 4:</strong>
                                            </span>
                                        </label>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b4_to"
                                                title="Inicio de calificaciones"
                                                value={b4_to}
                                                onChange={handleInputChange}
                                            />
                                        </Col>

                                        <Col md={4}>
                                            <InputApp
                                                type="date"
                                                name="b4_grade_periodicity"
                                                title="Fin de calificaciones"
                                                value={b4_grade_periodicity}
                                                onChange={handleInputChange}
                                            />
                                        </Col>
                                    </Row>
                                </>
                            )}
                        </Tab>

                        <Tab
                            eventKey="Fechas adicionales"
                            title="Fechas adicionales"
                        >
                            <Row>
                                <Col md={6}>
                                    <InputApp
                                        type="date"
                                        name="edit_group_date"
                                        title="Fecha limite para modificación de grupos y horarios"
                                        value={edit_group_date}
                                        onChange={handleInputChange}
                                        infoText="Fecha limite para que los coordinadores puedan editar horarios en los grupos."
                                    />
                                </Col>

                                <Col md={6}>
                                    <InputApp
                                        type="date"
                                        name="date_english_exam"
                                        title="Fecha para el inicio del examen de inglés"
                                        value={date_english_exam}
                                        onChange={handleInputChange}
                                        infoText="Fecha en la que se habilitara el examén de ingles."
                                    />
                                </Col>
                                <Col md={6}>
                                    <InputApp
                                        type="date"
                                        name="date_documents_limit"
                                        title="Fecha limite para la entrega de documentos"
                                        value={date_documents_limit}
                                        onChange={handleInputChange}
                                        infoText="Fecha limite para entrega de documentos, despues seran bloqueados."
                                    />
                                </Col>
                            </Row>
                        </Tab>

                        <Tab eventKey="Políticas" title="Políticas">
                            <Row>
                                <div>
                                    <p className="border rounded bg-secondary-subtle py-2 px-3">
                                        <IconApp iconClassName="fas fa-circle-info text-info fa-xl me-1" />
                                        <strong className="fw-bold">
                                            Nota:
                                        </strong>{" "}
                                        En esta sección puedes ingresar el
                                        contenido de las políticas del ciclo
                                        mediante el editor de texto, y
                                        opcionalmente adjuntar un documento en
                                        PDF. Si se configura esta información,
                                        los alumnos deberán aceptarla antes de
                                        poder utilizar la plataforma. Mientras
                                        no lo hagan, tendrán el acceso
                                        restringido por lo tanto no podran
                                        efectuar pagos hasta su aceptación.
                                    </p>
                                </div>
                                <Col md={12}>
                                    <RichTextApp
                                        title={"Políticas"}
                                        name={"policy"}
                                        value={policy}
                                        onChange={handleInputChange}
                                        errorText={
                                            errors.policy && errors.policy[0]
                                        }
                                    />
                                </Col>
                                <Col md={12} className="my-2">
                                    {!!policy_document_uri ? (
                                        <div>
                                            <label className="text-size-12 m-0 mb-2 d-block">
                                                Documento:
                                            </label>
                                            <a
                                                href={policy_document_uri}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                style={{
                                                    textDecoration: "none",
                                                }}
                                            >
                                                <Badge
                                                    bg="secondary"
                                                    className="me-1 p-2"
                                                    style={{
                                                        cursor: "pointer",
                                                    }}
                                                >
                                                    <span className="h6">
                                                        <IconApp iconClassName="fas fa-file me-1" />
                                                        Políticas ciclo{" "}
                                                        {values.name}
                                                    </span>
                                                </Badge>
                                            </a>
                                            <IconApp
                                                iconClassName="fas fa-trash text-danger ms-2 fa-xl"
                                                isClickable
                                                description="Eliminar documento"
                                                onClick={
                                                    handleDeletePolicyDocument
                                                }
                                            />
                                        </div>
                                    ) : (
                                        <FileInputApp
                                            name="policy_document"
                                            title="Documento"
                                            label="En formato PDF"
                                            accept="application/pdf"
                                            onChangeFile={handleInputChange}
                                            value={policy_document}
                                        />
                                    )}
                                </Col>
                                <Col md={12} className="my-2">
                                    <label className="text-size-12 m-0">
                                        Carga horaria del ciclo:
                                    </label>
                                    <p className="mb-2 lh-1">
                                        Al marcar esta opción, se le mostrara al
                                        alumno la carga horaria del ciclo, misma
                                        que deberá ser confirmada.
                                    </p>
                                    <CheckBoxApp
                                        name="course_load_confirmation"
                                        label="Confirmación de carga horaria del ciclo"
                                        onChange={handleInputChange}
                                        checked={course_load_confirmation}
                                        labelClassName="text-size-12 text-black"
                                    />
                                </Col>
                            </Row>
                        </Tab>

                        <Tab
                            eventKey="Filtros para inscripciones"
                            title="Filtros para inscripciones"
                        >
                            <Row>
                                <Col md={12}>
                                    <Row>
                                        <Col md={8}>
                                            <DatePickerRange
                                                title={"Fechas de inscripción"}
                                                from={lock_p1_dates.from}
                                                to={lock_p1_dates.to}
                                                path="lock_p1_dates"
                                                handleInputChange={
                                                    handleInputChange
                                                }
                                                titleInputFrom="Inicio fecha de inscripción"
                                                titleInputTo="Fin fecha de inscripción"
                                                infoText="Fecha limite para que aparezca como opción en el formulario de inscripción"
                                                classNameTo="mb-5"
                                                noMaxDate
                                            />
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>

                            <Row className="mt-2 mb-3">
                                <Col md={8}>
                                    <label
                                        htmlFor={`id-input-${country}`}
                                        style={{
                                            fontSize: "13px",
                                            fontWeight: 500,
                                            marginTop: "0.5rem",
                                        }}
                                    >
                                        <span className="fs-5">
                                            <strong>Países:</strong>
                                        </span>
                                    </label>
                                    <SelectSearchApp
                                        title="Filtro de alumnos admitidos en este ciclo por país"
                                        placeholder="Seleccione un país"
                                        name="country"
                                        value={country}
                                        multiple={true}
                                        onChange={handleInputChange}
                                        options={countries_list_with_other}
                                        errorText={
                                            errors.country && errors.country[0]
                                        }
                                    />
                                </Col>
                            </Row>

                            {!periodicity && (
                                <p
                                    className="mt-3 mb-0 text-danger"
                                    style={{ fontSize: "14px" }}
                                >
                                    <IconApp
                                        iconClassName="fa-regular fa-triangle-exclamation me-1"
                                        color={"red"}
                                    />
                                    Seleccione un Periodo para poder añadir
                                    ofertas educativas
                                </p>
                            )}
                            <div
                                style={
                                    !periodicity
                                        ? {
                                              opacity: 0.5,

                                              pointerEvents: "none",
                                          }
                                        : {
                                              opacity: 1,

                                              pointerEvents: "auto",
                                          }
                                }
                            >
                                <Row>
                                    <Col md={8}>
                                        <label
                                            htmlFor={`id-input-${country}`}
                                            style={{
                                                fontSize: "13px",
                                                fontWeight: 500,
                                                marginTop: "0.5rem",
                                            }}
                                        >
                                            <span className="fs-5">
                                                <strong>
                                                    Ofertas educativas:
                                                </strong>
                                            </span>
                                        </label>
                                        <div className="mb-2"></div>
                                        <ModalAppV2
                                            titleModal={
                                                "Seleccionar ofertas educativas"
                                            }
                                            size="lg"
                                            backdrop="static"
                                            keyboard={false}
                                            Action={() => (
                                                <Button
                                                    variant="secondary"
                                                    ref={buttonToModal}
                                                >
                                                    Seleccionar ofertas
                                                    educativas
                                                    <IconApp iconClassName="fa-solid fa-plus mx-2" />
                                                </Button>
                                            )}
                                        >
                                            <AddCurriculas
                                                curriculaList={curriculaList}
                                                curriculas_ids={curriculas_ids}
                                                callback={(data) => {
                                                    setInputValue(
                                                        "curriculas_ids",
                                                        data
                                                    );
                                                }}
                                                periodicity={periodicity}
                                            />
                                        </ModalAppV2>

                                        {periodicity !== "Anual" &&
                                        curriculasIdsSize === 0 ? (
                                            <p
                                                className="my-2 text-danger"
                                                style={{ fontSize: "12px" }}
                                            >
                                                <IconApp
                                                    iconClassName="fa-regular fa-triangle-exclamation me-1"
                                                    color={"red"}
                                                />
                                                Actualmente hay 0 ofertas
                                                educativas seleccionadas
                                            </p>
                                        ) : (
                                            <p
                                                className="my-2"
                                                style={{ fontSize: "12px" }}
                                            >
                                                {`Actualmente hay ${curriculasIdsSize} ${
                                                    curriculasIdsSize === 1
                                                        ? "oferta educativa seleccionada"
                                                        : "ofertas educativas seleccionadas"
                                                }`}
                                            </p>
                                        )}
                                    </Col>
                                </Row>
                            </div>
                        </Tab>
                    </Tabs>
                </Row>
            </Modal.Body>
            <Modal.Footer>
                <div className="d-flex justify-content-between w-100">
                    <Button variant="secondary" onClick={handleClose}>
                        Cerrar
                    </Button>
                    {currentTab === "Fechas cobranza" && (
                        <Button
                            className="btn-app-primary"
                            variant="primary"
                            type="button"
                            disabled={
                                !(
                                    year &&
                                    sub_cycle &&
                                    periodicity &&
                                    cycle_dates.from &&
                                    cycle_dates.to
                                )
                            }
                            onClick={() => setCurrentTab("Fechas escolares")}
                        >
                            Siguiente
                        </Button>
                    )}
                    {currentTab === "Fechas escolares" && (
                        <Button
                            className="btn-app-primary"
                            variant="primary"
                            type="button"
                            disabled={
                                !(
                                    year &&
                                    sub_cycle &&
                                    periodicity &&
                                    cycle_dates.from &&
                                    cycle_dates.to
                                )
                            }
                            onClick={() => {
                                setCurrentTab("Fechas adicionales");
                            }}
                        >
                            Siguiente
                        </Button>
                    )}
                    {currentTab === "Fechas adicionales" && (
                        <Button
                            className="btn-app-primary"
                            variant="primary"
                            disabled={!country?.length}
                            onClick={() => {
                                setCurrentTab("Políticas");
                            }}
                        >
                            Siguiente
                        </Button>
                    )}
                    {currentTab === "Políticas" && (
                        <Button
                            className="btn-app-primary"
                            variant="primary"
                            disabled={!country?.length}
                            onClick={() => {
                                setCurrentTab("Filtros para inscripciones");
                            }}
                        >
                            Siguiente
                        </Button>
                    )}
                    {currentTab === "Filtros para inscripciones" && (
                        <Button
                            className="btn-app-primary"
                            variant="primary"
                            onClick={handleSave}
                        >
                            {!active ? "Agregar" : "Actualizar"}{" "}
                            <IconApp iconClassName="fa fa-save" />
                        </Button>
                    )}
                </div>
            </Modal.Footer>
        </Modal>
    );
};