@extends('backend.master')

@section('title')
    {{ ___('common.Dashboard') }}
@endsection

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="ot-charts mb-24">
                    <div class="ot-card card chart-card3">
                        <div class="card-header">
                            <div class="card-title">
                                <h4>{{ ___('common.quize_test') }}</h1>
                            </div>
                            <div class="dropdown card-button">
                                <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button"
                                    id="revenueBtn1" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span>Mathmatics</span>
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                    <li>
                                        <a class="dropdown-item" href="#">Englsih</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#">CSE - Eng</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#">EEE - Eng</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="donut3"></div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="ot-charts mb-24">
                    <div class="ot-card card chart-card3">
                        <div class="card-header">
                            <div class="card-title">
                                <h4>{{ ___('common.home_work') }}</h1>
                            </div>
                            <div class="dropdown card-button">
                                <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button"
                                    id="revenueBtn1" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span>EEE - Eng</span>
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                    <li>
                                        <a class="dropdown-item" href="#">Englsih</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#">CSE - Eng</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#">EEE - Eng</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="donut4"></div>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="ot-charts mb-24">
                    <div class="ot-card card chart-card3">
                        <div class="card-header">
                            <div class="card-title">
                                <h4>{{ ___('common.assignment') }}</h1>
                            </div>
                            <div class="dropdown card-button">
                                <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button"
                                    id="revenueBtn1" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span>Englsih</span>
                                    <i class="fa fa-chevron-down"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                    <li>
                                        <a class="dropdown-item" href="#">Mathmatics</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#">CSE - Eng</a>
                                    </li>
                                    <li><a class="dropdown-item" href="#">EEE - Eng</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="donut5"></div>
                    </div>
                </div>
            </div>

            {{-- Upcomming Exam --}}
            <div class="col-xxl-3 col-xl-6 col-lg-6 col-md-6">
                <div class="ot-card mb-24 ot_heightFull">
                    <div class="component-page-heading">
                        <!-- table head  -->
                        <h1>{{ ___('common.upcomming_exam') }}</h1>
                        <div class="up-event-list">
                            <div class="event-list-row d-flex">
                                <div class="event-date-container me-2">
                                    <div
                                        class="event-date bg-lightblue d-flex justify-content-center align-items-center flex-column">
                                        <span class="date">12</span>
                                        <span class="day">WED</span>
                                        <i class="fa fa-circle color-lightblue"></i>
                                    </div>
                                </div>
                                <div class="event-details w-100">
                                    <p>Meet the Teacher</p>
                                    <div class="d-flex align-items-center justify-content-between mt-0">
                                        <span>Registration</span>
                                        <span>Timeline/day</span>
                                    </div>
                                    <div class="progress progress-lightblue">
                                        <div class="progress-bar progress-bar-lightblue" role="progressbar"
                                            style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="event-list-row d-flex">
                                <div class="event-date-container me-2">
                                    <div
                                        class="event-date bg-green d-flex justify-content-center align-items-center flex-column">
                                        <span class="date">26</span>
                                        <span class="day">MON</span>
                                        <i class="fa fa-circle color-green"></i>
                                    </div>
                                </div>
                                <div class="event-details w-100">
                                    <p>Meet the Teacher</p>
                                    <div class="d-flex align-items-center justify-content-between mt-0">
                                        <span>Registration</span>
                                        <span>Timeline/day</span>
                                    </div>
                                    <div class="progress progress-lightgreen">
                                        <div class="progress-bar progress-bar-lightgreen" role="progressbar"
                                            style="width: 75%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            {{-- Chart --}}
            <div class="col-xxl-9 col-xl-12">
                <div class="ot-card chart-card2 mb-24 ot_heightFull">

                    {{-- Tittle --}}
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h4>{{ ___('common.learner_insight') }}</h1>
                        </div>

                        {{-- Dropdown --}}
                        <div class="dropdown card-button">
                            <button class="btn btn-secondary ot-dropdown-btn dropdown-toggle" type="button" id="revenueBtn1"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                <span>{{ ___('common.september') }}</span>
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="revenueBtn1">
                                <li>
                                    <a class="dropdown-item" href="#">october</a>
                                </li>
                                <li><a class="dropdown-item" href="#">November</a>
                                </li>
                                <li><a class="dropdown-item" href="#">january</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Chart --}}
                    <div id="lineChartTwo" class=""> </div>

                </div>
            </div>

            <div class="col-xxl-3 col-xl-7 col-lg-12">
                <div class="ot-card mb-24 ot_heightFull">
                    <div class="component-page-heading mb-20">
                        <!-- table head  -->
                        <h4>{{ ___('common.notice_board') }}</h4>
                    </div>
                    <div class="row mb-16">
                        <div class="col-8 pe-0 notice-title">
                            <h6>Grand School Art Exhibition</h6>
                            <p>This is a great event for either the whole
                                school or individual grade levels</p>
                        </div>
                        <div class="col-4 d-flex justify-content-end">
                            <button type="button" class="gradient-btn">{{ ___('common.view') }}</button>
                        </div>
                    </div>
                    <div class="row mb-16">
                        <div class="col-8 pe-0 notice-title">
                            <h6>1st Semester Result Publish</h6>
                            <p>This is a great event for either the whole
                                school or individual grade levels</p>
                        </div>
                        <div class="col-4 d-flex justify-content-end">
                            <button type="button" class="gradient-btn">{{ ___('common.view') }}</button>
                        </div>
                    </div>
                    <div class="row mb-16">
                        <div class="col-8 pe-0  notice-title">
                            <h6>Music Competetion 2022</h6>
                            <p>This is a great event for either the whole
                                school or individual grade levels</p>
                        </div>
                        <div class="col-4 d-flex justify-content-end">
                            <button type="button" class="gradient-btn">{{ ___('common.view') }}</button>
                        </div>
                    </div>
                    <div class="row mb-16">
                        <div class="col-8 pe-0  notice-title">
                            <h6>Parents Meeting</h6>
                            <p>This is a great event for either the whole
                                school or individual grade levels</p>
                        </div>
                        <div class="col-4 d-flex justify-content-end">
                            <button type="button" class="gradient-btn">{{ ___('common.view') }}</button>
                        </div>
                    </div>
                    <div class="row mb-16">
                        <div class="col-8 pe-0  notice-title">
                            <h6>Parents Meeting</h6>
                            <p>This is a great event for either the whole
                                school or individual grade levels</p>
                        </div>
                        <div class="col-4 d-flex justify-content-end">
                            <button type="button" class="gradient-btn">{{ ___('common.view') }}</button>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-xxl-3 col-xl-5">
                <div class="ot-card chart-card2 mb-24 ot_heightFull">
                    <div class="card-title">
                        <h4>{{ ___('common.new_admission') }}</h4>
                    </div>

                    <div id="admission"></div>
                </div>
            </div>
            <div class="col-xxl-6 col-xl-7">
                <!-- table start  -->
                <div class="basic-table pv-36 ph-30 mb-24 ot_heightFull">
                    <div class="component-page-heading d-flex flex-column align-items-center flex-sm-row justify-content-sm-between mb-20">
                        <!-- table head  -->
                        <h1>{{ ___('common.pending_fees') }} </h1>
                        <a href="#" class="btn ot-btn-primary mb-3">
                            <span>{{ ___('common.view_all_list') }}</span>
                        </a>
                    </div>
                    <!-- table container start  -->
                    <div class="table-responsive">
                        <!-- table start  -->
                        <table class="table-color-col">
                            <thead>
                                <tr>
                                    <th>{{ ___('common.student_name') }}</th>
                                    <th>{{ ___('common.student_id') }}</th>
                                    <th>{{ ___('common.status') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Brad Simmons</td>
                                    <td>065522</td>
                                    <td>
                                        <span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Brad Simmons</td>
                                    <td>065522</td>
                                    <td>
                                        <span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Brad Simmons</td>
                                    <td>065522</td>
                                    <td>
                                        <span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Brad Simmons</td>
                                    <td>065522</td>
                                    <td>
                                        <span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- table end  -->
                    </div>
                    <!-- table container end  -->
                </div>
                <!-- table end -->
            </div>
            <div class="col-xxl-3 col-xl-5 col-lg-6 col-md-6">
                {{-- upgrade-account --}}
                <div class="ot-card upgrade-account ot_heightFull">
                    <img src="{{ asset('backend/assets/images/growth.png') }}" alt="image">
                    <h3>{{ ___('common.upgrade_account') }}</h3>
                    <p>5 integrations, 30 team members, advanced <span class="text-primary"> features </span>for teams.</p>
                </div>
            </div>
            <div class="col-lg-12">
                <!-- table start  -->
                <div class="basic-table pv-36 ph-30">
                    <div class="component-page-heading d-flex flex-column flex-sm-row justify-content-sm-between mb-20 gap_10">
                        <!-- table head  -->
                        <h4>{{ ___('common.student_list') }}</h4>
                        <a href="#" class="btn ot-btn-primary mb-3">
                            <span>{{ ___('common.view_all_list') }}</span>
                        </a>
                    </div>
                    <!-- table container start  -->
                    <div class="table-responsive">
                        <!-- table start  -->
                        <table class="table-color-col">
                            <thead>
                                <tr>
                                    <th>{{ ___('common.name') }}</th>
                                    <th>{{ ___('common.check_in') }}</th>
                                    <th>{{ ___('common.check_out') }}</th>
                                    <th>{{ ___('common.job_id') }}</th>
                                    <th>{{ ___('common.company_id') }}</th>
                                    <th>{{ ___('common.date_created') }}</th>
                                    <th>{{ ___('common.status') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="profile-photo">
                                            <img src="{{ asset('backend/assets/images/icons/user1.png') }}" alt="profile" />
                                        </div>
                                        <span class="ml-10">Brad Simmons</span>
                                    </td>
                                    <td>09.30am</td>
                                    <td>5.00pm</td>
                                    <td>02 Apr, 2022</td>
                                    <td>#XDG-2347</td>
                                    <td>02 Apr, 2022</td>
                                    <td>
                                        <span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="profile-photo">
                                            <img src="{{ asset('backend/assets/images/icons/user2.png') }}" alt="profile" />
                                        </div>
                                        <span class="ml-10">Brad Simmons</span>
                                    </td>
                                    <td>09.30am</td>
                                    <td>5.00pm</td>
                                    <td>02 Apr, 2022</td>
                                    <td>#XDG-2347</td>
                                    <td>02 Apr, 2022</td>
                                    <td>
                                        <span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="profile-photo">
                                            <img src="{{ asset('backend/assets/images/icons/user3.png') }}" alt="profile" />
                                        </div>
                                        <span class="ml-10">Brad Simmons</span>
                                    </td>
                                    <td>09.30am</td>
                                    <td>5.00pm</td>
                                    <td>02 Apr, 2022</td>
                                    <td>#XDG-2347</td>
                                    <td>02 Apr, 2022</td>
                                    <td>
                                        <span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="profile-photo">
                                            <img src="{{ asset('backend/assets/images/icons/user4.png') }}" alt="profile" />
                                        </div>
                                        <span class="ml-10">Brad Simmons</span>
                                    </td>
                                    <td>09.30am</td>
                                    <td>5.00pm</td>
                                    <td>02 Apr, 2022</td>
                                    <td>#XDG-2347</td>
                                    <td>02 Apr, 2022</td>
                                    <td>
                                        <span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="profile-photo">
                                            <img src="{{ asset('backend/assets/images/icons/user5.png') }}" alt="profile" />
                                        </div>
                                        <span class="ml-10">Brad Simmons</span>
                                    </td>
                                    <td>09.30am</td>
                                    <td>5.00pm</td>
                                    <td>02 Apr, 2022</td>
                                    <td>#XDG-2347</td>
                                    <td>02 Apr, 2022</td>
                                    <td>
                                        <span class="badge-basic-success-text">{{ ___('common.confirmed')}}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="d-flex align-items-center">
                                        <div class="profile-photo">
                                            <img src="{{ asset('backend/assets/images/icons/user6.png') }}" alt="profile" />
                                        </div>
                                        <span class="ml-10">Brad Simmons</span>
                                    </td>
                                    <td>09.30am</td>
                                    <td>5.00pm</td>
                                    <td>02 Apr, 2022</td>
                                    <td>#XDG-2347</td>
                                    <td>02 Apr, 2022</td>
                                    <td>
                                        <span class="badge-basic-danger-text">{{ ___('common.rejected') }}</span>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- table end  -->
                    </div>
                    <!-- table container end  -->
                </div>
                <!-- table end -->
            </div>

        </div>
    </div>
@endsection


@push('script')
    <script src="{{ asset('backend') }}/assets/js/apex-chart.js"></script>
@endpush