import { CrudApp } from "@components/Crud/CrudApp";
import { IconApp } from "@components/IconApp";
import LinkToStudenFormApp from "@components/LinkToStudenFormApp";
import ModalApp from "@components/ModalApp";
import {
    OptionsGraduationOptionsRequestsStatus,
    OptionsGraduationRequestsPaymentStatus,
} from "@components/Options/OptionsGraduationsRequest";
import { SelectSearchApp } from "@components/SelectSearchApp";
import { confirmActionModal } from "@helpers/ActionValidate";
import { formatDateString, formatDateStringShort } from "@helpers/FormatString";
import { useHasPermission } from "@hooks/useHasPermission";
import { useForm } from "@hooks/useForm";
import { useWindowSize } from "@hooks/useWindowSize";
import {
    setActive,
    setOpenApproveRejectMultipleForm,
    setOpenForm,
    startAssignSubstituteTeacherToGraduationOptionRequest,
} from "@redux/slices/operators/GraduationOptionsRequests";
import { startShow as startListTeachers } from "@redux/slices/teachers/teacherSlice";
import { AddService } from "@views/students/AcademicServices/AddService";
import { Modal as ModalAntd } from "antd";
import React, { useEffect, useState } from "react";
import { Alert, Button, Col, Dropdown, Modal, Row } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import PaymentDataTable from "../PaymentDataTable";
import GraduationRequestApproveRejectMultiple from "../GraduationRequestApproveRejectMultiple";
import ThesisLiberationCaptureModal from "../ThesisLiberationCaptureModal";
import { TooltipAntdApp } from "@components/TooltipAntdApp";

const substituteTeacherAssignedOptions = [
    { value: "cannot_sign", label: "No puede firmar" },
    { value: "assigned", label: "Con suplente asignado" },
    { value: "unassigned", label: "Sin suplente asignado" },
];

export default function TesisTable({
    values,
    setInputValue = () => {},
    handleInputChange = () => {},
    getBackgroundColorByStatus = () => {},
    getBackgroundColorByPayment = () => {},
    handleSearch = () => {},
    thesisLiberationEligibilityOptions = [],
    thesisLiberationCaptureOptions = [],
    thesisLiberationOperatorStatusOptions = [],
    teacherAssignmentStatusOptions = [],
    teacherOptions = [],
}) {
    const dispatch = useDispatch();

    const { pagination, openApproveRejectMultipleForm } = useSelector(
        (state) => state.graduationOptionsRequests,
    );
    const { pagination: teachersPagination } = useSelector(
        (state) => state.teacher,
    );

    const [selectedLiberationCapture, setSelectedLiberationCapture] =
        useState(null);
    const [selectedPaymentData, setSelectedPaymentData] = useState(null);
    const [selectedSubstituteRequest, setSelectedSubstituteRequest] =
        useState(null);
    const {
        values: teacherFilters,
        handleInputChange: handleTeacherFiltersChange,
        setInputValue: setTeacherFiltersInputValue,
        setFormValues: setTeacherFiltersValues,
    } = useForm({
        page: 1,
        query: "",
        number_rows: 10,
        refresh: false,
        errors: {},
    });

    const { hasPermission } = useHasPermission();
    const windowSize = useWindowSize();

    const {
        status,
        payment_status,
        teacher_assignment_status,
        teacher_id,
        director_tesis_suplente,
        thesis_liberation_eligible,
        thesis_liberation_capture,
        thesis_liberation_operator_status,
        errors,
    } = values;

    const getThesisLiberationOperatorStatusLabel = (operatorStatus) => {
        switch (operatorStatus) {
            case "APPROVED":
                return "Aprobada";
            case "REJECTED":
                return "Rechazada";
            case "PENDING":
                return "Pendiente";
            default:
                return "--";
        }
    };

    const getThesisLiberationOperatorStatusColor = (operatorStatus) => {
        switch (operatorStatus) {
            case "APPROVED":
                return "#056e1f";
            case "REJECTED":
                return "#D11616";
            case "PENDING":
                return "gray";
            default:
                return "";
        }
    };

    const openSubstituteTeacherModal = (graduationOptionRequest) => {
        setSelectedSubstituteRequest(graduationOptionRequest);
    };

    const closeSubstituteTeacherModal = () => {
        setSelectedSubstituteRequest(null);
        setTeacherFiltersValues({
            page: 1,
            query: "",
            number_rows: 10,
            refresh: false,
            errors: {},
        });
    };

    const handleSelectSubstituteTeacher = async (teacher) => {
        const teacherName = teacher?.full_name || teacher?.username || "";

        await confirmActionModal(
            async () => {
                await dispatch(
                    startAssignSubstituteTeacherToGraduationOptionRequest(
                        selectedSubstituteRequest?.id,
                        { teacher_id: teacher?.id },
                        () => {},
                        (updatedRequest) => {
                            if (
                                selectedLiberationCapture?.id ===
                                updatedRequest?.id
                            ) {
                                setSelectedLiberationCapture({
                                    ...selectedLiberationCapture,
                                    ...updatedRequest,
                                    thesis_liberation:
                                        selectedLiberationCapture?.thesis_liberation,
                                });
                            }

                            closeSubstituteTeacherModal();
                            handleSearch();
                        },
                    ),
                );
            },
            {
                title: "Confirmar asignación",
                text: `¿Desea asignar a ${teacherName} como director suplente?`,
                icon: "warning",
                confirmText: "Sí, asignar",
                confirmButtonColor: "#d39e00",
                allowOutsideClick: false,
                allowEnterKey: false,
            },
        );
    };

    useEffect(() => {
        if (!selectedSubstituteRequest) {
            return;
        }

        dispatch(
            startListTeachers({
                ...teacherFilters,
                ead: "1",
            }),
        );
    }, [selectedSubstituteRequest, teacherFilters, dispatch]);

    // const handleDelete = (graduation_option_request_id) => {
    //     dispatch(
    //         startDeleteGraduationOptionRequest(
    //             graduation_option_request_id,
    //             handleSearch
    //         )
    //     );
    // };

    return (
        <>
            <Row className="mx-1" style={{ marginTop: "35px" }}>
                <div className="filter-checkbox-wrapper content-label-black">
                    <div className="filter-checkbox-group no-gap">
                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={2}>
                            <SelectSearchApp
                                title="Aprobación del formulario"
                                placeholder="Filtrar por aprobación del formulario"
                                name="status"
                                value={status}
                                multiple
                                onChange={handleInputChange}
                                options={OptionsGraduationOptionsRequestsStatus}
                                aboveFooter
                                errorText={errors.status && errors.status[0]}
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={2}>
                            <SelectSearchApp
                                title="Aprobación de liberación"
                                placeholder="Filtrar por aprobación de liberación"
                                name="thesis_liberation_operator_status"
                                value={thesis_liberation_operator_status}
                                onChange={handleInputChange}
                                options={thesisLiberationOperatorStatusOptions}
                                aboveFooter
                                errorText={
                                    errors.thesis_liberation_operator_status &&
                                    errors.thesis_liberation_operator_status[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={2}>
                            <SelectSearchApp
                                title="Director de tesis asignado"
                                placeholder="Filtrar por docente asignado"
                                name="teacher_assignment_status"
                                value={teacher_assignment_status}
                                onChange={handleInputChange}
                                options={teacherAssignmentStatusOptions}
                                aboveFooter
                                errorText={
                                    errors.teacher_assignment_status &&
                                    errors.teacher_assignment_status[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Nombre del director de tesis"
                                placeholder="Filtrar por director de tesis asignado"
                                name="teacher_id"
                                value={teacher_id}
                                onChange={handleInputChange}
                                options={teacherOptions}
                                aboveFooter
                                errorText={
                                    errors.teacher_id && errors.teacher_id[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={2}>
                            <SelectSearchApp
                                title="¿Se puede liberar?"
                                placeholder="Filtrar por alumnos liberables"
                                name="thesis_liberation_eligible"
                                value={thesis_liberation_eligible}
                                onChange={handleInputChange}
                                options={thesisLiberationEligibilityOptions}
                                aboveFooter
                                errorText={
                                    errors.thesis_liberation_eligible &&
                                    errors.thesis_liberation_eligible[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={2}>
                            <SelectSearchApp
                                title="Captura de liberación"
                                placeholder="Filtrar por captura de liberación"
                                name="thesis_liberation_capture"
                                value={thesis_liberation_capture}
                                onChange={handleInputChange}
                                options={thesisLiberationCaptureOptions}
                                aboveFooter
                                errorText={
                                    errors.thesis_liberation_capture &&
                                    errors.thesis_liberation_capture[0]
                                }
                            />
                        </Col>

                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Estatus de pago"
                                placeholder="Filtrar por estatus de pago"
                                multiple
                                name="payment_status"
                                value={payment_status}
                                onChange={handleInputChange}
                                options={OptionsGraduationRequestsPaymentStatus}
                                aboveFooter
                                errorText={
                                    errors.payment_status &&
                                    errors.payment_status[0]
                                }
                            />
                        </Col>
                        <Col xs={12} sm={6} md={6} lg={6} xl={6} xxl={4}>
                            <SelectSearchApp
                                title="Firma del director / suplente"
                                placeholder="Filtrar por firma o suplente"
                                name="director_tesis_suplente"
                                value={director_tesis_suplente}
                                onChange={handleInputChange}
                                options={substituteTeacherAssignedOptions}
                                aboveFooter
                                errorText={
                                    errors.director_tesis_suplente &&
                                    errors.director_tesis_suplente[0]
                                }
                            />
                        </Col>

                        <Row
                            className={`d-flex justify-content-end w-100 text-end ${
                                windowSize.width < 1095 ? "mt-3" : "mt-2"
                            }`}
                        >
                            <Col md={"auto"}>
                                <Dropdown>
                                    <Dropdown.Toggle
                                        className="btn-app-secondary"
                                        style={{ fontSize: "12px" }}
                                        id="dropdown-kardex-ead"
                                    >
                                        <IconApp iconClassName="fa fa-ballot-check mt-1 me-1" />
                                        <span className="fw-bold">
                                            Aprobar/Rechazar múltiples
                                            solicitudes
                                        </span>
                                    </Dropdown.Toggle>

                                    <Dropdown.Menu
                                        className="dropdown-menu-outline-danger text-center"
                                        style={{
                                            width: "100%",
                                            minWidth: "100%",
                                        }}
                                    >
                                        <Dropdown.Item
                                            className="dropdown-item-dark-green"
                                            style={{
                                                borderBottom: "1px solid white",
                                            }}
                                            onClick={() =>
                                                dispatch(
                                                    setOpenApproveRejectMultipleForm(
                                                        "approve",
                                                    ),
                                                )
                                            }
                                        >
                                            <IconApp iconClassName="fa fa-check mt-1 me-2" />
                                            <span className="fw-bold">
                                                Aprobar
                                            </span>
                                        </Dropdown.Item>

                                        <Dropdown.Item
                                            className="dropdown-item-dark-danger"
                                            onClick={() =>
                                                dispatch(
                                                    setOpenApproveRejectMultipleForm(
                                                        "reject",
                                                    ),
                                                )
                                            }
                                        >
                                            <IconApp iconClassName="fa fa-xmark mt-1 me-2" />
                                            <span className="fw-bold">
                                                Rechazar
                                            </span>
                                        </Dropdown.Item>
                                    </Dropdown.Menu>
                                </Dropdown>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Row>

            <CrudApp
                crudName="graduation-options-requests-diplomados"
                values={values}
                setInputValue={setInputValue}
                handleInputChange={handleInputChange}
                pagination={pagination}
                tableHeaders={[
                    "Matrícula",
                    "Nombre",
                    "Director de tesis",
                    // "Suplente",
                    "Grado escolar",
                    "Oferta educativa",
                    // "Nivel educativo",
                    "Fecha de registro",
                    <>
                        Estatus del
                        <br />
                        formulario
                    </>,
                    <>
                        ¿Se puede
                        <br />
                        liberar?
                    </>,
                    "Captura de liberación",
                    <>
                        Estatus de
                        <br />
                        liberación
                    </>,
                    "Estatus de pago",
                ]}
                hasActions
            >
                {pagination?.data?.map((data, index) => {
                    const canReleaseThesisLiberation =
                        data?.can_release_thesis_liberation === true;
                    const hasThesisLiberationCapture =
                        data?.has_thesis_liberation_capture === true;
                    const substituteTeacherName =
                        data?.substitute_teacher?.full_name ||
                        data?.substitute_teacher?.username ||
                        "";

                    return (
                        <tr
                            key={index}
                            data-graduation_options_request_id={data?.id}
                        >
                            <td
                                data-th="Matrícula"
                                className="align-middle text-center"
                            >
                                {data?.academic_record?.student_number ? (
                                    <LinkToStudenFormApp
                                        student_number={
                                            data.academic_record.student_number
                                        }
                                        // showTooltipInfo
                                        // status={data?.status}
                                        // degree={data?.degree_word}
                                        // academic_group={
                                        //     data?.main_group?.name
                                        // }
                                        // coordination={
                                        //     data?.curriculum_coordination
                                        // }
                                    />
                                ) : (
                                    <span>--</span>
                                )}
                            </td>

                            <td
                                data-th="Nombre"
                                data-center
                                className="align-middle"
                            >
                                {data?.academic_record?.full_name || "--"}
                            </td>

                            <td
                                data-th="Director de tesis"
                                className="align-middle"
                            >
                                {data?.teacher?.username || "--"}
                            </td>

                            {/* <td data-th="Suplente" className="align-middle">
                                {data?.substitute_teacher?.username || "--"}
                            </td> */}

                            <td
                                data-th="Grado escolar"
                                data-center
                                className="align-middle text-center"
                            >
                                {data?.academic_record_degree || "--"}
                            </td>
                            {console.log(" Curriculum ", data?.curriculum)}

                            <td
                                data-th="Oferta educativa"
                                data-center
                                className="align-middle"
                            >
                                {data?.curriculum?.full_name || "--"}
                            </td>

                            {/* <td
                                data-th="Nivel educativo"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold"
                            >
                                {data?.curriculum?.level || "--"}
                            </td> */}

                            <td
                                data-th="Fecha de registro"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold no-wrap"
                            >
                                {data?.registration_date ? (
                                    <span>
                                        {formatDateStringShort(
                                            data?.registration_date,
                                        )}
                                    </span>
                                ) : (
                                    "--"
                                )}
                            </td>

                            <td
                                data-th="Aprobación del formulario"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold"
                                style={{
                                    backgroundColor: getBackgroundColorByStatus(
                                        data?.status,
                                    ),
                                    color: "white",
                                }}
                            >
                                <span>{data?.status || ""}</span>
                            </td>

                            <td
                                data-th="Captura lista"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold"
                                style={{
                                    backgroundColor: canReleaseThesisLiberation
                                        ? "#056e1f"
                                        : "#D11616",
                                    color: "white",
                                }}
                            >
                                <span>
                                    {canReleaseThesisLiberation ? "Sí" : "No"}
                                </span>
                            </td>

                            <td
                                data-th="Captura de liberación"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold"
                                style={{
                                    backgroundColor: hasThesisLiberationCapture
                                        ? "#056e1f"
                                        : "gray",
                                    color: "white",
                                }}
                            >
                                <span>
                                    {hasThesisLiberationCapture
                                        ? "Capturada"
                                        : "Sin capturar"}
                                </span>
                                {data?.thesis_liberation
                                    ?.autograph_minutes_confirmation ===
                                    false && (
                                    <TooltipAntdApp
                                        headerContent={
                                            !substituteTeacherName
                                                ? "Asignar suplente"
                                                : "Director suplente asignado"
                                        }
                                        bodyContent={
                                            <div className="text-start">
                                                {!substituteTeacherName ? (
                                                    <div className="d-flex flex-column gap-2">
                                                        <div className="d-flex align-items-center gap-2">
                                                            <IconApp
                                                                iconClassName="fa-solid fa-triangle-exclamation text-warning"
                                                                fontSize="16px"
                                                            />
                                                            <span>
                                                                El director NO
                                                                puede firmar.
                                                            </span>
                                                        </div>
                                                        <Button
                                                            size="sm"
                                                            variant="warning"
                                                            className="align-self-start"
                                                            onClick={() =>
                                                                openSubstituteTeacherModal(
                                                                    data,
                                                                )
                                                            }
                                                        >
                                                            <IconApp
                                                                iconClassName="fa-solid fa-user-plus me-2"
                                                                fontSize="12px"
                                                            />
                                                            Asignar director
                                                            suplente
                                                        </Button>
                                                    </div>
                                                ) : (
                                                    <div className="d-flex align-items-center gap-2 px-2 py-1 rounded border bg-light">
                                                        <IconApp
                                                            iconClassName="fa-solid fa-user-check text-success"
                                                            fontSize="16px"
                                                        />
                                                        <div className="d-flex flex-column lh-sm">
                                                            {/* <span className="fw-bold">
                                                                Director
                                                                suplente
                                                                asignado
                                                            </span> */}
                                                            <span>
                                                                {
                                                                    substituteTeacherName
                                                                }
                                                            </span>
                                                        </div>
                                                    </div>
                                                )}
                                            </div>
                                        }
                                        placement="right"
                                    >
                                        <div
                                            className={`fa-solid fa-circle-info ms-2 text-size-16 text-white`}
                                        />
                                    </TooltipAntdApp>
                                )}
                            </td>

                            <td
                                data-th="Liberación aprobada"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold"
                                style={{
                                    backgroundColor:
                                        getThesisLiberationOperatorStatusColor(
                                            data?.thesis_liberation
                                                ?.operator_status,
                                        ),
                                    color: data?.thesis_liberation
                                        ?.operator_status
                                        ? "white"
                                        : "",
                                }}
                            >
                                {data?.thesis_liberation
                                    ? getThesisLiberationOperatorStatusLabel(
                                          data?.thesis_liberation
                                              ?.operator_status,
                                      )
                                    : "--"}
                                {data?.thesis_liberation?.operator_status ===
                                    "REJECTED" && (
                                    <TooltipAntdApp
                                        headerContent={"Solicitud rechazada"}
                                        bodyContent={
                                            <div className="text-start">
                                                <div className="d-flex flex-column gap-2">
                                                    <Alert
                                                        variant="danger"
                                                        className="text-size-13"
                                                    >
                                                        <div className="d-flex align-items-center gap-2">
                                                            <IconApp
                                                                iconClassName="fa-solid fa-circle-xmark"
                                                                isClickable={
                                                                    false
                                                                }
                                                            />
                                                            <span className="">
                                                                <strong>
                                                                    Motivo de
                                                                    rechazo:
                                                                </strong>
                                                            </span>
                                                        </div>
                                                        <div className="d-flex align-items-center gap-2">
                                                            <span className="">
                                                                {data
                                                                    ?.thesis_liberation
                                                                    ?.operator_rejection_reason ||
                                                                    "No se registró un motivo de rechazo."}
                                                            </span>
                                                        </div>
                                                    </Alert>
                                                </div>
                                            </div>
                                        }
                                        placement="right"
                                    >
                                        <div
                                            className={`fa-solid fa-circle-info ms-2 text-size-16 text-white`}
                                        />
                                    </TooltipAntdApp>
                                )}
                            </td>

                            <td
                                data-th="Estatus de pago"
                                data-center
                                className="align-middle text-center text-size-11 fw-bold"
                                style={{
                                    backgroundColor:
                                        getBackgroundColorByPayment(
                                            data?.payment_status,
                                        ),
                                    color:
                                        data?.payment_status === "N/A"
                                            ? ""
                                            : "white",
                                }}
                            >
                                {data?.payment_status &&
                                data.payment_status !== "N/A" ? (
                                    <div>
                                        <span className="no-wrap">
                                            {data?.payment_status || ""}
                                        </span>

                                        <br />

                                        <IconApp
                                            iconClassName="fa fa-circle-info text-white ms-2"
                                            fontSize={"18px"}
                                            description="Ver desglose de pago"
                                            isClickable
                                            onClick={() =>
                                                setSelectedPaymentData(data)
                                            }
                                        />
                                    </div>
                                ) : data?.payment_status === "N/A" ? (
                                    <span>Servicio no cargado</span>
                                ) : (
                                    <span>-</span>
                                )}
                            </td>

                            <td
                                data-th="Acciones"
                                data-center
                                className="align-middle text-center no-wrap"
                            >
                                <IconApp
                                    iconClassName="fa fa-list-check text-info"
                                    fontSize={"18px"}
                                    description="Ver solicitud"
                                    isClickable
                                    onClick={async () => {
                                        await dispatch(setActive(data));
                                        await dispatch(
                                            setOpenForm("main_screen"),
                                        );
                                    }}
                                />

                                {hasThesisLiberationCapture ? (
                                    <IconApp
                                        iconClassName="fa fa-clipboard-list text-primary ms-3"
                                        fontSize={"18px"}
                                        description="Ver captura de liberación"
                                        isClickable
                                        onClick={() =>
                                            setSelectedLiberationCapture(data)
                                        }
                                    />
                                ) : (
                                    <IconApp
                                        iconClassName="fa fa-clipboard-list text-primary ms-3"
                                        customStyle={{ opacity: 0.18 }}
                                        fontSize={"18px"}
                                        description="No hay captura de liberación"
                                    />
                                )}

                                {hasPermission(
                                    "GRADUATIONS_EAD_REQUESTS_ADD_SERVICES",
                                ) ? (
                                    <>
                                        {data?.status === "Aprobada" &&
                                        data?.payment_status !== "PAGADO" ? (
                                            <ModalApp
                                                titleModal={
                                                    "Registrar servicio para pago de tesis"
                                                }
                                                size="lg"
                                                backdrop="static"
                                                keyboard={false}
                                                disabled={
                                                    data?.payment_status ===
                                                    "PAGADO"
                                                }
                                                Action={() => (
                                                    <IconApp
                                                        iconClassName="fa fa-cart-shopping text-green ms-3"
                                                        fontSize={"18px"}
                                                        description="Vincular a un servicio escolar para pago"
                                                        isClickable
                                                    />
                                                )}
                                            >
                                                <AddService
                                                    academic_record={
                                                        data?.academic_record
                                                    }
                                                    showOnlyTesisServices
                                                    graduationOptionRequestIdParam={
                                                        data?.id
                                                    }
                                                    callback={handleSearch}
                                                />
                                            </ModalApp>
                                        ) : (
                                            <IconApp
                                                iconClassName="fa fa-cart-shopping text-green ms-3"
                                                fontSize={"18px"}
                                                customStyle={{ opacity: 0.18 }}
                                                description={
                                                    data?.status !== "Aprobada"
                                                        ? "La solicitud debe estar aprobada"
                                                        : data?.payment_status ===
                                                            "PAGADO"
                                                          ? "La solicitud ya se encuentra pagada"
                                                          : ""
                                                }
                                            />
                                        )}
                                    </>
                                ) : null}

                                {/* <IconApp
                                    iconClassName="fa fa-trash text-danger ms-3"
                                    fontSize={"17px"}
                                    description="Eliminar"
                                    isClickable
                                    onClick={() => handleDelete(data?.id)}
                                /> */}
                            </td>
                        </tr>
                    );
                })}
            </CrudApp>

            {selectedLiberationCapture && (
                <ThesisLiberationCaptureModal
                    selectedRequest={selectedLiberationCapture}
                    onOpenSubstituteTeacherModal={openSubstituteTeacherModal}
                    onRefresh={handleSearch}
                    onCloseModal={() => setSelectedLiberationCapture(null)}
                />
            )}

            {selectedSubstituteRequest && (
                <ModalApp
                    titleModal="Cambiar director de tesis"
                    size="lg"
                    backdrop="static"
                    keyboard={false}
                    openModal={!!selectedSubstituteRequest}
                    Action={() => null}
                    onCloseModal={closeSubstituteTeacherModal}
                >
                    <Modal.Body>
                        <CrudApp
                            crudName="crud-assign-teachers"
                            values={teacherFilters}
                            setInputValue={setTeacherFiltersInputValue}
                            handleInputChange={handleTeacherFiltersChange}
                            pagination={teachersPagination}
                            tableHeaders={["N°", "Nombre", "Correo"]}
                            emptyMessage="No se encontraron directores de tesis disponibles"
                            numberRowsMode="dropdown"
                        >
                            {teachersPagination?.data?.map((teacher) => (
                                <tr key={teacher.id}>
                                    <td className="text-center align-middle">
                                        {teacher.no_employe || teacher.id}
                                    </td>
                                    <td className="align-middle">
                                        {teacher.full_name || teacher.username}
                                    </td>
                                    <td className="align-middle">
                                        {teacher.email || "Sin correo"}
                                    </td>
                                    <td className="text-center align-middle">
                                        <Button
                                            variant="outline-primary"
                                            size="sm"
                                            onClick={() =>
                                                handleSelectSubstituteTeacher(
                                                    teacher,
                                                )
                                            }
                                        >
                                            Asignar
                                        </Button>
                                    </td>
                                </tr>
                            ))}
                        </CrudApp>
                    </Modal.Body>

                    <Modal.Footer>
                        <Button
                            variant="secondary"
                            onClick={closeSubstituteTeacherModal}
                        >
                            Cerrar
                        </Button>
                    </Modal.Footer>
                </ModalApp>
            )}

            {selectedPaymentData && (
                <ModalAntd
                    open={selectedPaymentData}
                    onCancel={() => setSelectedPaymentData(null)}
                    title={
                        <div className="text-center">
                            <span>{`Estatus de pago - ${selectedPaymentData?.graduation_option}`}</span>
                        </div>
                    }
                    footer={null}
                    width={"80%"}
                    zIndex={2000}
                >
                    <PaymentDataTable
                        payment_status={selectedPaymentData?.payment_status}
                        payment_data={selectedPaymentData?.payment_data}
                        studentNumber={
                            selectedPaymentData?.academic_record?.student_number
                        }
                        studentName={
                            selectedPaymentData?.academic_record?.full_name
                        }
                        registerDate={
                            formatDateString(
                                selectedPaymentData?.created_at,
                                false,
                                false,
                            ) || "--"
                        }
                        getBackgroundColorByPayment={
                            getBackgroundColorByPayment
                        }
                    />
                </ModalAntd>
            )}

            {openApproveRejectMultipleForm && (
                <GraduationRequestApproveRejectMultiple
                    mode={openApproveRejectMultipleForm}
                    callback={handleSearch}
                />
            )}
        </>
    );
}