@php

use App\Models\School;
use App\Models\StudentBiodata;
use App\Models\SchoolHealthPhysician;
use App\Models\NutritionistHistoryEvaluationSection;
use App\Models\PsychologistHistoryAssessmentSection;
use App\Models\MedicalHistoryEmail;
use App\Models\User;

@endphp
@extends('admin.main')
@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
    @media (min-width: 992px) {

        .mdk-drawer-layout .container,
        .mdk-drawer-layout .container-fluid,
        .mdk-drawer-layout .container-lg,
        .mdk-drawer-layout .container-md,
        .mdk-drawer-layout .container-sm,
        .mdk-drawer-layout .container-xl {
            max-width: 1440px;
        }
    }

    .custom_card_btn {
        width: 100%;
        text-align: center;
    }


    .custom_card_btn .btn {
        background: #ffffff;
        color: #000;
        width: 100%;
        border-radius: 20px;
        padding: 20px 20px;
        font-size: 24px;
        margin: 0;
        font-weight: 700;
        gap: 0px;
        transition: 0.3s ease;
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(0, 0, 0, .15);
    }

    .custom_card_btn .btn:hover {
        background: #d86744 !important;
    }

    .custom_card_btn .btn b {
        font-size: 36px;
        margin-top: -10px;
        padding: 0;
        color: #000;
    }

    .custom_card_btn .btn svg {
        color: #d86744;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .custom_card_btn .btn:hover svg {
        color: #fff;
    }

    .custom_card_btn .btn:hover b {
        color: #fff;
    }

    .graph {
        padding: 20px;
    }

    .h1 {
        text-align: center;
    }

    .chartDivRow {
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
        gap: 10px;
    }

    .chartDivOuter {
        height: 350px;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, .15);
        width: calc(50% - 10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .chartDivOuter h4 {
        margin: 20px 0;
    }

    .chartdiv {
        width: 100%;
        height: 100%;
    }

    .daterange {
        width: 200px;
        margin-left: auto !important;
        margin-bottom: 10px !important;
        margin-right: 10px !important;
    }
</style>


<div class="pt-32pt">
    <div class="container page__container page-section">
        <div class="flex d-flex flex-column flex-sm-row align-items-center mb-24pt mb-md-0">
            <div class="mb-24pt mb-sm-0 mr-sm-24pt">
                <h2 class="mb-0">Dashboard</h2>
                <ol class="breadcrumb p-0 m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">Home</a></li>
                    <li class="breadcrumb-item active">
                        Dashboard
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="container page__container page-section d-none">

    <div class="row">
        <div class="col-md-3">
            <div class="custom_card_btn">
                <a href="{{ route('admin.form_entry.index') }}" class="btn">
                    <i class="fas fa-school"></i>
                    Total Entries <b> 123 </b>
                </a>
            </div>
        </div>
        <div class="col-md-3">
            <div class="custom_card_btn">
                <a href="{{ route('admin.user.index') }}" class="btn">
                    <i class="fas fa-users"></i>
                    Users <b> 123 </b>
                </a>
            </div>
        </div>
    </div>



</div>
<section class="chartSec mb-5">
    <div class="container-fluid">
        <div class="chartDivRow">












            <div class="chartDivOuter chartdiv1">
                <h4>School</h4>
                <div id="chartdiv1" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>


            <div class="chartDivOuter chartdiv2">
                <h4>School Follow Up</h4>
                <div id="chartdiv2" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>

            <div class="chartDivOuter chartdiv3">
                <h4>Schools Medical History</h4>
                <div id="chartdiv3" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>
            <div class="chartDivOuter chartdiv4">
                <h4>Medical History Details</h4>
                <div id="chartdiv4" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>


            <div class="chartDivOuter chartdiv5">
                <h4>Medical History Follow Up</h4>
                <div id="chartdiv5" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>

            <div class="chartDivOuter chartdiv6">
                <h4>Medical History UnFollow</h4>
                <div id="chartdiv6" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>

            <div class="chartDivOuter chartdiv7">
                <h4>School Health Physician Follow</h4>
                <div id="chartdiv7" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>


            <div class="chartDivOuter chartdiv8">
                <h4>Psychologist Follow Up</h4>
                <div id="chartdiv8" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>

            <div class="chartDivOuter chartdiv9">
                <h4>Nutritionist Follow Up</h4>
                <div id="chartdiv9" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>

            <div class="chartDivOuter chartdiv10">
                <h4>Refferals</h4>
                <div id="chartdiv10" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>


            <div class="chartDivOuter chartdiv11">
                <h4>School Emails Sent</h4>
                <div id="chartdiv11" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>

            <div class="chartDivOuter chartdiv12">
                <h4>Medical History Findings</h4>
                <div id="chartdiv12" class="chartdiv"></div>
                <input type="text" class="form-control daterange" />
            </div>
        </div>
    </div>
</section>