import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import dayjs from "dayjs";
import {useAppDispatch, useAppSelector} from "../../stores/hooks";
import {useRouter} from "next/router";
import { fetch } from '../../stores/schools/schoolsSlice'
import {saveFile} from "../../helpers/fileSaver";
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from "../../components/ImageField";
import LayoutAuthenticated from "../../layouts/Authenticated";
import {getPageTitle} from "../../config";
import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
import SectionMain from "../../components/SectionMain";
import CardBox from "../../components/CardBox";
import BaseButton from "../../components/BaseButton";
import BaseDivider from "../../components/BaseDivider";
import {mdiChartTimelineVariant} from "@mdi/js";
import {SwitchField} from "../../components/SwitchField";
import FormField from "../../components/FormField";

import {hasPermission} from "../../helpers/userPermissions";


const SchoolsView = () => {
    const router = useRouter()
    const dispatch = useAppDispatch()
    const { schools } = useAppSelector((state) => state.schools)
    
    const { currentUser } = useAppSelector((state) => state.auth);
    

    const { id } = router.query;
    
    function removeLastCharacter(str) {
      console.log(str,`str`)
      return str.slice(0, -1);
    }

    useEffect(() => {
        dispatch(fetch({ id }));
    }, [dispatch, id]);


    return (
      <>
          <Head>
              <title>{getPageTitle('View schools')}</title>
          </Head>
          <SectionMain>
            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View schools')} main>
                <BaseButton
                  color='info'
                  label='Edit'
                  href={`/schools/schools-edit/?id=${id}`}
                />
            </SectionTitleLineWithButton>
            <CardBox>
            

              
                <div className={'mb-4'}>
                    <p className={'block font-bold mb-2'}>Name</p>
                    <p>{schools?.name}</p>
                </div>
              

              

              

              

              

              

              

              

              

              

              

              

              
              

                
                <>
                    <p className={'block font-bold mb-2'}>Users Schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>First Name</th>
                                
                                
                                
                                <th>Last Name</th>
                                
                                
                                
                                <th>Phone Number</th>
                                
                                
                                
                                <th>E-Mail</th>
                                
                                
                                
                                <th>Disabled</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.users_schools && Array.isArray(schools.users_schools) &&
                              schools.users_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/users/users-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="firstName">
                                        { item.firstName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="lastName">
                                        { item.lastName }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phoneNumber">
                                        { item.phoneNumber }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="disabled">
                                        { dataFormatter.booleanFormatter(item.disabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.users_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                
                
                
                <>
                    <p className={'block font-bold mb-2'}>Grade_levels School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>GradeName</th>
                                
                                
                                
                                <th>GradeOrder</th>
                                
                                
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.grade_levels_school && Array.isArray(schools.grade_levels_school) &&
                              schools.grade_levels_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/grade_levels/grade_levels-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="grade_name">
                                        { item.grade_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="grade_order">
                                        { item.grade_order }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.grade_levels_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Subjects School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>SubjectName</th>
                                
                                
                                
                                <th>SubjectCode</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.subjects_school && Array.isArray(schools.subjects_school) &&
                              schools.subjects_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/subjects/subjects-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="subject_name">
                                        { item.subject_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="subject_code">
                                        { item.subject_code }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.subjects_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Classrooms School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>ClassroomName</th>
                                
                                
                                
                                <th>SectionName</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>InviteCode</th>
                                
                                
                                
                                <th>InviteCodeExpiresAt</th>
                                
                                
                                
                                <th>InviteCodeEnabled</th>
                                
                                
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.classrooms_school && Array.isArray(schools.classrooms_school) &&
                              schools.classrooms_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/classrooms/classrooms-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="classroom_name">
                                        { item.classroom_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="section_name">
                                        { item.section_name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="invite_code">
                                        { item.invite_code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="invite_code_expires_at">
                                        { dataFormatter.dateTimeFormatter(item.invite_code_expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="invite_code_enabled">
                                        { dataFormatter.booleanFormatter(item.invite_code_enabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.classrooms_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Classroom_memberships schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>JoinedAt</th>
                                
                                
                                
                                <th>MembershipStatus</th>
                                
                                
                                
                                <th>JoinMethod</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.classroom_memberships_schools && Array.isArray(schools.classroom_memberships_schools) &&
                              schools.classroom_memberships_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/classroom_memberships/classroom_memberships-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="joined_at">
                                        { dataFormatter.dateTimeFormatter(item.joined_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="membership_status">
                                        { item.membership_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="join_method">
                                        { item.join_method }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.classroom_memberships_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Teaching_assignments schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>AssignmentRole</th>
                                
                                
                                
                                <th>AssignedAt</th>
                                
                                
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.teaching_assignments_schools && Array.isArray(schools.teaching_assignments_schools) &&
                              schools.teaching_assignments_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/teaching_assignments/teaching_assignments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="assignment_role">
                                        { item.assignment_role }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="assigned_at">
                                        { dataFormatter.dateTimeFormatter(item.assigned_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.teaching_assignments_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Homeworks schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>HomeworkTitle</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>AssignedAt</th>
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>LateUntilAt</th>
                                
                                
                                
                                <th>HomeworkStatus</th>
                                
                                
                                
                                <th>MaxScore</th>
                                
                                
                                
                                <th>AllowLate</th>
                                
                                
                                
                                
                                
                                <th>RequiresFaceVerification</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.homeworks_schools && Array.isArray(schools.homeworks_schools) &&
                              schools.homeworks_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/homeworks/homeworks-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="homework_title">
                                        { item.homework_title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="assigned_at">
                                        { dataFormatter.dateTimeFormatter(item.assigned_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="late_until_at">
                                        { dataFormatter.dateTimeFormatter(item.late_until_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="homework_status">
                                        { item.homework_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_score">
                                        { item.max_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allow_late">
                                        { dataFormatter.booleanFormatter(item.allow_late) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="requires_face_verification">
                                        { dataFormatter.booleanFormatter(item.requires_face_verification) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.homeworks_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Homework_rubrics schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>CriterionTitle</th>
                                
                                
                                
                                
                                
                                <th>CriterionMaxScore</th>
                                
                                
                                
                                <th>SortOrder</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.homework_rubrics_schools && Array.isArray(schools.homework_rubrics_schools) &&
                              schools.homework_rubrics_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/homework_rubrics/homework_rubrics-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="criterion_title">
                                        { item.criterion_title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="criterion_max_score">
                                        { item.criterion_max_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sort_order">
                                        { item.sort_order }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.homework_rubrics_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Homework_extensions schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>ExtensionScope</th>
                                
                                
                                
                                
                                
                                <th>ExtendedDueAt</th>
                                
                                
                                
                                <th>ExtendedLateUntilAt</th>
                                
                                
                                
                                <th>Reason</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.homework_extensions_schools && Array.isArray(schools.homework_extensions_schools) &&
                              schools.homework_extensions_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/homework_extensions/homework_extensions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="extension_scope">
                                        { item.extension_scope }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="extended_due_at">
                                        { dataFormatter.dateTimeFormatter(item.extended_due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="extended_late_until_at">
                                        { dataFormatter.dateTimeFormatter(item.extended_late_until_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reason">
                                        { item.reason }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.homework_extensions_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Homework_submissions schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>SubmittedAt</th>
                                
                                
                                
                                <th>SubmissionStatus</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>FaceVerifiedForSubmission</th>
                                
                                
                                
                                <th>FaceVerifiedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.homework_submissions_schools && Array.isArray(schools.homework_submissions_schools) &&
                              schools.homework_submissions_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/homework_submissions/homework_submissions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="submission_status">
                                        { item.submission_status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="face_verified_for_submission">
                                        { dataFormatter.booleanFormatter(item.face_verified_for_submission) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="face_verified_at">
                                        { dataFormatter.dateTimeFormatter(item.face_verified_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.homework_submissions_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Submission_grades schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>GradedAt</th>
                                
                                
                                
                                <th>TotalScore</th>
                                
                                
                                
                                <th>MaxScoreSnapshot</th>
                                
                                
                                
                                <th>GradeStatus</th>
                                
                                
                                
                                
                                
                                <th>ReturnedToStudent</th>
                                
                                
                                
                                <th>ReturnedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.submission_grades_schools && Array.isArray(schools.submission_grades_schools) &&
                              schools.submission_grades_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/submission_grades/submission_grades-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="graded_at">
                                        { dataFormatter.dateTimeFormatter(item.graded_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="total_score">
                                        { item.total_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_score_snapshot">
                                        { item.max_score_snapshot }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="grade_status">
                                        { item.grade_status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="returned_to_student">
                                        { dataFormatter.booleanFormatter(item.returned_to_student) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="returned_at">
                                        { dataFormatter.dateTimeFormatter(item.returned_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.submission_grades_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Rubric_scores schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Score</th>
                                
                                
                                
                                <th>Comment</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.rubric_scores_schools && Array.isArray(schools.rubric_scores_schools) &&
                              schools.rubric_scores_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/rubric_scores/rubric_scores-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="score">
                                        { item.score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="comment">
                                        { item.comment }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.rubric_scores_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Gradebooks School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>GradebookName</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>Term</th>
                                
                                
                                
                                <th>StartAt</th>
                                
                                
                                
                                <th>EndAt</th>
                                
                                
                                
                                <th>IsPublished</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.gradebooks_school && Array.isArray(schools.gradebooks_school) &&
                              schools.gradebooks_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/gradebooks/gradebooks-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="gradebook_name">
                                        { item.gradebook_name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="term">
                                        { item.term }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_at">
                                        { dataFormatter.dateTimeFormatter(item.start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_at">
                                        { dataFormatter.dateTimeFormatter(item.end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_published">
                                        { dataFormatter.booleanFormatter(item.is_published) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.gradebooks_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Gradebook_columns schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>ColumnName</th>
                                
                                
                                
                                <th>ColumnType</th>
                                
                                
                                
                                <th>MaxScore</th>
                                
                                
                                
                                <th>Weight</th>
                                
                                
                                
                                <th>SortOrder</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.gradebook_columns_schools && Array.isArray(schools.gradebook_columns_schools) &&
                              schools.gradebook_columns_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/gradebook_columns/gradebook_columns-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="column_name">
                                        { item.column_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="column_type">
                                        { item.column_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_score">
                                        { item.max_score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="weight">
                                        { item.weight }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sort_order">
                                        { item.sort_order }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.gradebook_columns_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Gradebook_entries schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Score</th>
                                
                                
                                
                                <th>EntryStatus</th>
                                
                                
                                
                                <th>RecordedAt</th>
                                
                                
                                
                                
                                
                                <th>Remarks</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.gradebook_entries_schools && Array.isArray(schools.gradebook_entries_schools) &&
                              schools.gradebook_entries_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/gradebook_entries/gradebook_entries-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="score">
                                        { item.score }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="entry_status">
                                        { item.entry_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="recorded_at">
                                        { dataFormatter.dateTimeFormatter(item.recorded_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="remarks">
                                        { item.remarks }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.gradebook_entries_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Adviser_reports schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>SubmittedAt</th>
                                
                                
                                
                                <th>ReportStatus</th>
                                
                                
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.adviser_reports_schools && Array.isArray(schools.adviser_reports_schools) &&
                              schools.adviser_reports_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/adviser_reports/adviser_reports-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="report_status">
                                        { item.report_status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.adviser_reports_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Announcements School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>AnnouncementTitle</th>
                                
                                
                                
                                
                                
                                <th>AudienceType</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>TargetRole</th>
                                
                                
                                
                                
                                
                                <th>PostedAt</th>
                                
                                
                                
                                <th>ExpiresAt</th>
                                
                                
                                
                                <th>Pinned</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.announcements_school && Array.isArray(schools.announcements_school) &&
                              schools.announcements_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/announcements/announcements-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="announcement_title">
                                        { item.announcement_title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="audience_type">
                                        { item.audience_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="target_role">
                                        { item.target_role }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="posted_at">
                                        { dataFormatter.dateTimeFormatter(item.posted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expires_at">
                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="pinned">
                                        { dataFormatter.booleanFormatter(item.pinned) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.announcements_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notifications schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>NotificationType</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Message</th>
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>IsRead</th>
                                
                                
                                
                                <th>ReadAt</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>Priority</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.notifications_schools && Array.isArray(schools.notifications_schools) &&
                              schools.notifications_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notifications/notifications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="notification_type">
                                        { item.notification_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="message">
                                        { item.message }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_read">
                                        { dataFormatter.booleanFormatter(item.is_read) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="read_at">
                                        { dataFormatter.dateTimeFormatter(item.read_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="priority">
                                        { item.priority }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.notifications_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Account_applications School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>RequestedRole</th>
                                
                                
                                
                                <th>ApplicationStatus</th>
                                
                                
                                
                                <th>ApplicationNotes</th>
                                
                                
                                
                                
                                
                                <th>ReviewedAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.account_applications_school && Array.isArray(schools.account_applications_school) &&
                              schools.account_applications_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/account_applications/account_applications-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="requested_role">
                                        { item.requested_role }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="application_status">
                                        { item.application_status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="application_notes">
                                        { item.application_notes }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="reviewed_at">
                                        { dataFormatter.dateTimeFormatter(item.reviewed_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.account_applications_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Guardians School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>GuardianName</th>
                                
                                
                                
                                <th>Relationship</th>
                                
                                
                                
                                <th>PhoneNumber</th>
                                
                                
                                
                                <th>Email</th>
                                
                                
                                
                                <th>Address</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.guardians_school && Array.isArray(schools.guardians_school) &&
                              schools.guardians_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/guardians/guardians-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="guardian_name">
                                        { item.guardian_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="relationship">
                                        { item.relationship }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="phone_number">
                                        { item.phone_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="email">
                                        { item.email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address">
                                        { item.address }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.guardians_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Security_events School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>EventType</th>
                                
                                
                                
                                <th>EventAt</th>
                                
                                
                                
                                <th>IPAddress</th>
                                
                                
                                
                                <th>UserAgent</th>
                                
                                
                                
                                <th>RiskLevel</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.security_events_school && Array.isArray(schools.security_events_school) &&
                              schools.security_events_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/security_events/security_events-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="event_at">
                                        { dataFormatter.dateTimeFormatter(item.event_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="ip_address">
                                        { item.ip_address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="user_agent">
                                        { item.user_agent }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="risk_level">
                                        { item.risk_level }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.security_events_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Support_settings schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>SupportEmail</th>
                                
                                
                                
                                <th>SupportPhone</th>
                                
                                
                                
                                <th>SupportHours</th>
                                
                                
                                
                                <th>PrivacyPolicyURL</th>
                                
                                
                                
                                <th>TermsURL</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.support_settings_schools && Array.isArray(schools.support_settings_schools) &&
                              schools.support_settings_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/support_settings/support_settings-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="support_email">
                                        { item.support_email }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="support_phone">
                                        { item.support_phone }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="support_hours">
                                        { item.support_hours }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="privacy_policy_url">
                                        { item.privacy_policy_url }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="terms_url">
                                        { item.terms_url }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.support_settings_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Feedback_items School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Rating</th>
                                
                                
                                
                                <th>FeedbackType</th>
                                
                                
                                
                                <th>FeedbackTitle</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>SubmittedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.feedback_items_school && Array.isArray(schools.feedback_items_school) &&
                              schools.feedback_items_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/feedback_items/feedback_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="rating">
                                        { item.rating }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="feedback_type">
                                        { item.feedback_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="feedback_title">
                                        { item.feedback_title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.feedback_items_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Events School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>EventName</th>
                                
                                
                                
                                
                                
                                <th>EventType</th>
                                
                                
                                
                                <th>Price</th>
                                
                                
                                
                                <th>StartAt</th>
                                
                                
                                
                                <th>EndAt</th>
                                
                                
                                
                                <th>Visibility</th>
                                
                                
                                
                                
                                
                                <th>IsActive</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.events_school && Array.isArray(schools.events_school) &&
                              schools.events_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/events/events-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="event_name">
                                        { item.event_name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="event_type">
                                        { item.event_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="price">
                                        { item.price }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_at">
                                        { dataFormatter.dateTimeFormatter(item.start_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_at">
                                        { dataFormatter.dateTimeFormatter(item.end_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="visibility">
                                        { item.visibility }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_active">
                                        { dataFormatter.booleanFormatter(item.is_active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.events_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Ai_monitoring_rules schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                <th>RuleName</th>
                                
                                
                                
                                <th>RuleType</th>
                                
                                
                                
                                <th>Severity</th>
                                
                                
                                
                                <th>Enabled</th>
                                
                                
                                
                                
                                
                                <th>ThresholdValue</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.ai_monitoring_rules_schools && Array.isArray(schools.ai_monitoring_rules_schools) &&
                              schools.ai_monitoring_rules_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/ai_monitoring_rules/ai_monitoring_rules-view/?id=${item.id}`)}>
                                    
                                    
                                    <td data-label="rule_name">
                                        { item.rule_name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="rule_type">
                                        { item.rule_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="severity">
                                        { item.severity }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="enabled">
                                        { dataFormatter.booleanFormatter(item.enabled) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="threshold_value">
                                        { item.threshold_value }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.ai_monitoring_rules_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                

                <BaseDivider />

                <BaseButton
                    color='info'
                    label='Back'
                    onClick={() => router.push('/schools/schools-list')}
                />
              </CardBox>
          </SectionMain>
      </>
    );
};

SchoolsView.getLayout = function getLayout(page: ReactElement) {
    return (
      <LayoutAuthenticated
        
        permission={'READ_SCHOOLS'}
        
      >
          {page}
      </LayoutAuthenticated>
    )
}

export default SchoolsView;