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'}>Academic_years School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>AcademicYear</th>
                                
                                
                                
                                <th>StartDate</th>
                                
                                
                                
                                <th>EndDate</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.academic_years_school && Array.isArray(schools.academic_years_school) &&
                              schools.academic_years_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/academic_years/academic_years-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_date">
                                        { dataFormatter.dateTimeFormatter(item.start_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_date">
                                        { dataFormatter.dateTimeFormatter(item.end_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.academic_years_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Education_levels School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Level</th>
                                
                                
                                
                                <th>LevelName</th>
                                
                                
                                
                                <th>GradeStart</th>
                                
                                
                                
                                <th>GradeEnd</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.education_levels_school && Array.isArray(schools.education_levels_school) &&
                              schools.education_levels_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/education_levels/education_levels-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="level">
                                        { item.level }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="grade_start">
                                        { item.grade_start }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="grade_end">
                                        { item.grade_end }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.education_levels_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Classes School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>ClassName</th>
                                
                                
                                
                                <th>Grade</th>
                                
                                
                                
                                <th>HomeroomLabel</th>
                                
                                
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.classes_school && Array.isArray(schools.classes_school) &&
                              schools.classes_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/classes/classes-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="grade">
                                        { item.grade }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="homeroom_label">
                                        { item.homeroom_label }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.classes_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Students School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>NIS</th>
                                
                                
                                
                                <th>NISN</th>
                                
                                
                                
                                <th>BirthPlace</th>
                                
                                
                                
                                <th>BirthDate</th>
                                
                                
                                
                                <th>Gender</th>
                                
                                
                                
                                <th>Address</th>
                                
                                
                                
                                <th>EnrollmentDate</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.students_school && Array.isArray(schools.students_school) &&
                              schools.students_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/students/students-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="nis">
                                        { item.nis }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="nisn">
                                        { item.nisn }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="birth_place">
                                        { item.birth_place }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="birth_date">
                                        { dataFormatter.dateTimeFormatter(item.birth_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="gender">
                                        { item.gender }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="address">
                                        { item.address }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="enrollment_date">
                                        { dataFormatter.dateTimeFormatter(item.enrollment_date) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.students_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Parent_student_links schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Relationship</th>
                                
                                
                                
                                <th>PrimaryContact</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.parent_student_links_schools && Array.isArray(schools.parent_student_links_schools) &&
                              schools.parent_student_links_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/parent_student_links/parent_student_links-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="relationship">
                                        { item.relationship }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="is_primary">
                                        { dataFormatter.booleanFormatter(item.is_primary) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.parent_student_links_schools?.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>Active</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="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="code">
                                        { item.code }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.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'}>Class_subjects schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                
                                
                                <th>WeeklySessions</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.class_subjects_schools && Array.isArray(schools.class_subjects_schools) &&
                              schools.class_subjects_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/class_subjects/class_subjects-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="weekly_sessions">
                                        { item.weekly_sessions }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.class_subjects_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Timetable_entries schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>DayOfWeek</th>
                                
                                
                                
                                <th>PeriodNumber</th>
                                
                                
                                
                                <th>StartTime</th>
                                
                                
                                
                                <th>EndTime</th>
                                
                                
                                
                                <th>Room</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.timetable_entries_schools && Array.isArray(schools.timetable_entries_schools) &&
                              schools.timetable_entries_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/timetable_entries/timetable_entries-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="day_of_week">
                                        { item.day_of_week }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="period_number">
                                        { item.period_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="start_time">
                                        { item.start_time }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="end_time">
                                        { item.end_time }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="room">
                                        { item.room }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.timetable_entries_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Attendance_sessions schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>AttendanceDate</th>
                                
                                
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.attendance_sessions_schools && Array.isArray(schools.attendance_sessions_schools) &&
                              schools.attendance_sessions_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/attendance_sessions/attendance_sessions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="attendance_date">
                                        { dataFormatter.dateTimeFormatter(item.attendance_date) }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.attendance_sessions_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Attendance_records schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Remarks</th>
                                
                                
                                
                                <th>CheckedAt</th>
                                
                                
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.attendance_records_schools && Array.isArray(schools.attendance_records_schools) &&
                              schools.attendance_records_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/attendance_records/attendance_records-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="remarks">
                                        { item.remarks }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="checked_at">
                                        { dataFormatter.dateTimeFormatter(item.checked_at) }
                                    </td>
                                    
                                    
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.attendance_records_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>Title</th>
                                
                                
                                
                                
                                
                                <th>Audience</th>
                                
                                
                                
                                
                                
                                <th>PublishAt</th>
                                
                                
                                
                                <th>ExpireAt</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="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="audience">
                                        { item.audience }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="publish_at">
                                        { dataFormatter.dateTimeFormatter(item.publish_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="expire_at">
                                        { dataFormatter.dateTimeFormatter(item.expire_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'}>Assignments schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                
                                
                                <th>AssignedAt</th>
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>SubmissionType</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Published</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.assignments_schools && Array.isArray(schools.assignments_schools) &&
                              schools.assignments_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/assignments/assignments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.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="submission_type">
                                        { item.submission_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="published">
                                        { dataFormatter.booleanFormatter(item.published) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.assignments_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Assignment_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>Status</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Score</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>GradedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.assignment_submissions_schools && Array.isArray(schools.assignment_submissions_schools) &&
                              schools.assignment_submissions_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/assignment_submissions/assignment_submissions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="score">
                                        { item.score }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="graded_at">
                                        { dataFormatter.dateTimeFormatter(item.graded_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.assignment_submissions_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exam_categories School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>CategoryName</th>
                                
                                
                                
                                <th>Type</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.exam_categories_school && Array.isArray(schools.exam_categories_school) &&
                              schools.exam_categories_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exam_categories/exam_categories-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="type">
                                        { item.type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.exam_categories_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exams schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>ExamTitle</th>
                                
                                
                                
                                <th>Mode</th>
                                
                                
                                
                                <th>StartAt</th>
                                
                                
                                
                                <th>EndAt</th>
                                
                                
                                
                                <th>DurationMinutes</th>
                                
                                
                                
                                <th>RandomizeQuestions</th>
                                
                                
                                
                                <th>PassingScore</th>
                                
                                
                                
                                
                                
                                <th>Published</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.exams_schools && Array.isArray(schools.exams_schools) &&
                              schools.exams_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exams/exams-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="mode">
                                        { item.mode }
                                    </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="duration_minutes">
                                        { item.duration_minutes }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="randomize_questions">
                                        { dataFormatter.booleanFormatter(item.randomize_questions) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="passing_score">
                                        { item.passing_score }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="published">
                                        { dataFormatter.booleanFormatter(item.published) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.exams_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exam_questions schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>QuestionType</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Points</th>
                                
                                
                                
                                <th>OrderNumber</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.exam_questions_schools && Array.isArray(schools.exam_questions_schools) &&
                              schools.exam_questions_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exam_questions/exam_questions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="question_type">
                                        { item.question_type }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="points">
                                        { item.points }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="order_number">
                                        { item.order_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.exam_questions_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exam_question_choices schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                <th>ChoiceLabel</th>
                                
                                
                                
                                
                                
                                <th>IsCorrect</th>
                                
                                
                                
                                <th>OrderNumber</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.exam_question_choices_schools && Array.isArray(schools.exam_question_choices_schools) &&
                              schools.exam_question_choices_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exam_question_choices/exam_question_choices-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    <td data-label="choice_label">
                                        { item.choice_label }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="is_correct">
                                        { dataFormatter.booleanFormatter(item.is_correct) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="order_number">
                                        { item.order_number }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.exam_question_choices_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exam_attempts schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>StartedAt</th>
                                
                                
                                
                                <th>SubmittedAt</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>TotalScore</th>
                                
                                
                                
                                <th>Passed</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.exam_attempts_schools && Array.isArray(schools.exam_attempts_schools) &&
                              schools.exam_attempts_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exam_attempts/exam_attempts-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="started_at">
                                        { dataFormatter.dateTimeFormatter(item.started_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="submitted_at">
                                        { dataFormatter.dateTimeFormatter(item.submitted_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="score_total">
                                        { item.score_total }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="passed">
                                        { dataFormatter.booleanFormatter(item.passed) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.exam_attempts_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Exam_answers 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>GradedAt</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.exam_answers_schools && Array.isArray(schools.exam_answers_schools) &&
                              schools.exam_answers_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/exam_answers/exam_answers-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="score">
                                        { item.score }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="graded_at">
                                        { dataFormatter.dateTimeFormatter(item.graded_at) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.exam_answers_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Fee_definitions School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>FeeType</th>
                                
                                
                                
                                <th>FeeName</th>
                                
                                
                                
                                
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>AllowInstallments</th>
                                
                                
                                
                                <th>MinimumDownPayment</th>
                                
                                
                                
                                <th>MaxInstallments</th>
                                
                                
                                
                                <th>InstallmentDeadline</th>
                                
                                
                                
                                <th>Active</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.fee_definitions_school && Array.isArray(schools.fee_definitions_school) &&
                              schools.fee_definitions_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/fee_definitions/fee_definitions-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="fee_type">
                                        { item.fee_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="name">
                                        { item.name }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="allow_installments">
                                        { dataFormatter.booleanFormatter(item.allow_installments) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="minimum_down_payment">
                                        { item.minimum_down_payment }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="max_installments">
                                        { item.max_installments }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="installment_deadline">
                                        { dataFormatter.dateTimeFormatter(item.installment_deadline) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="active">
                                        { dataFormatter.booleanFormatter(item.active) }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.fee_definitions_school?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Billing_items schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>BillNumber</th>
                                
                                
                                
                                <th>PeriodType</th>
                                
                                
                                
                                <th>PeriodYear</th>
                                
                                
                                
                                <th>PeriodMonth</th>
                                
                                
                                
                                <th>IssuedAt</th>
                                
                                
                                
                                <th>DueAt</th>
                                
                                
                                
                                <th>TotalAmount</th>
                                
                                
                                
                                <th>AmountPaid</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.billing_items_schools && Array.isArray(schools.billing_items_schools) &&
                              schools.billing_items_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/billing_items/billing_items-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="bill_number">
                                        { item.bill_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="period_type">
                                        { item.period_type }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="period_year">
                                        { item.period_year }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="period_month">
                                        { item.period_month }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="issued_at">
                                        { dataFormatter.dateTimeFormatter(item.issued_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="due_at">
                                        { dataFormatter.dateTimeFormatter(item.due_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_total">
                                        { item.amount_total }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount_paid">
                                        { item.amount_paid }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.billing_items_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Payments schools</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>PaidAt</th>
                                
                                
                                
                                <th>Amount</th>
                                
                                
                                
                                <th>PaymentMethod</th>
                                
                                
                                
                                <th>ReferenceNumber</th>
                                
                                
                                
                                <th>PaymentStatus</th>
                                
                                
                                
                                
                                
                                <th>Notes</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.payments_schools && Array.isArray(schools.payments_schools) &&
                              schools.payments_schools.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/payments/payments-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="paid_at">
                                        { dataFormatter.dateTimeFormatter(item.paid_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="amount">
                                        { item.amount }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="method">
                                        { item.method }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="reference_number">
                                        { item.reference_number }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="notes">
                                        { item.notes }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.payments_schools?.length && <div className={'text-center py-4'}>No data</div>}
                    </CardBox>
                </>
                
                
                <>
                    <p className={'block font-bold mb-2'}>Notification_logs School</p>
                    <CardBox
                      className='mb-6 border border-gray-300 rounded overflow-hidden'
                      hasTable
                    >
                        <div className='overflow-x-auto'>
                            <table>
                            <thead>
                            <tr>
                                
                                
                                
                                
                                
                                
                                <th>Channel</th>
                                
                                
                                
                                <th>Category</th>
                                
                                
                                
                                <th>Title</th>
                                
                                
                                
                                <th>Message</th>
                                
                                
                                
                                <th>SentAt</th>
                                
                                
                                
                                <th>Status</th>
                                
                                
                            </tr>
                            </thead>
                            <tbody>
                            {schools.notification_logs_school && Array.isArray(schools.notification_logs_school) &&
                              schools.notification_logs_school.map((item: any) => (
                                <tr key={item.id} onClick={() => router.push(`/notification_logs/notification_logs-view/?id=${item.id}`)}>
                                    
                                    
                                    
                                    
                                    
                                    
                                    <td data-label="channel">
                                        { item.channel }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="category">
                                        { item.category }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="title">
                                        { item.title }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="message">
                                        { item.message }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="sent_at">
                                        { dataFormatter.dateTimeFormatter(item.sent_at) }
                                    </td>
                                    
                                    
                                    
                                    <td data-label="status">
                                        { item.status }
                                    </td>
                                    
                                    
                                </tr>
                              ))}
                            </tbody>
                        </table>
                        </div>
                        {!schools?.notification_logs_school?.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;