@extends('layouts.adminapp')
@section('content')
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js" integrity="sha256-XF29CBwU1MWLaGEnsELogU6Y6rcc5nCkhhx89nFMIDQ=" crossorigin="anonymous"></script> --}}
    <!-- <div class="container grid px-6 mx-auto mt-4">
                                                                                                                                                                            <div class="grid grid-cols-4 gap-4">
                                                                                                                                                                                <div class="items-center shadow border bg-purple-600 space-x-4 p-4">
                                                                                                                                                                                    {{-- <img width="80px" src="{{asset('storage/Icon/student.png')}}" alt="student_icon"/> --}}
                                                                                                                                                                                    <h4>Student</h4>
                                                                                                                                                                                    <a href="">View</a>
                                                                                                                                                                                </div>
                                                                                                                                                                                <div class="items-center shadow border space-x-4 p-4">
                                                                                                                                                                                    <p>Hi</p>

                                                                                                                                                                                </div>
                                                                                                                                                                                <div class="items-center shadow border space-x-4 p-4">
                                                                                                                                                                                    <p>Hi</p>

                                                                                                                                                                                </div>
                                                                                                                                                                                <div class="items-center shadow border space-x-4 p-4">
                                                                                                                                                                                    <p>Hi</p>

                                                                                                                                                                                </div>
                                                                                                                                                                            </div>
                                                                                                                                                                        </div> -->


    {{-- <div class="flex flex-row flex-wrap flex-grow mt-2">

    <div class="w-full md:w-1/2 p-3">
        <!--Graph Card-->
        <div class="bg-white dark:bg-gray-800 dark:border-gray-700 border rounded shadow">
            <div class="border-b p-3 dark:border-gray-700">
                <h5 class="font-bold uppercase text-gray-600">Graph</h5>
            </div>
            <div class="p-5">
                <canvas id="chartjs-7" class="chartjs" width="undefined" height="undefined"></canvas>
                <script>
                new Chart(document.getElementById("chartjs-7"), {
                    "type": "bar",
                    "data": {
                        "labels": ["January", "February", "March", "April"],
                        "datasets": [{
                            "label": "Page Impressions",
                            "data": [10, 20, 30, 40],
                            "borderColor": "rgb(255, 99, 132)",
                            "backgroundColor": "rgba(255, 99, 132, 0.2)"
                        }, {
                            "label": "Adsense Clicks",
                            "data": [5, 15, 10, 30],
                            "type": "line",
                            "fill": false,
                            "borderColor": "rgb(54, 162, 235)"
                        }]
                    },
                    "options": {
                        "scales": {
                            "yAxes": [{
                                "ticks": {
                                    "beginAtZero": true
                                }
                            }]
                        }
                    }
                });
                </script>
            </div>
        </div>
        <!--/Graph Card-->
    </div>

    <div class="w-full md:w-1/2 p-3">
        <!--Graph Card-->
        <div class="bg-white dark:bg-gray-800 dark:border-gray-700 border rounded shadow">
            <div class="border-b p-3 dark:border-gray-700">
                <h5 class="font-bold uppercase text-gray-600">Graph</h5>
            </div>
            <div class="p-5">
                <canvas id="chartjs-0" class="chartjs" width="undefined" height="undefined"></canvas>
                <script>
                new Chart(document.getElementById("chartjs-0"), {
                    "type": "line",
                    "data": {
                        "labels": ["January", "February", "March", "April", "May", "June", "July"],
                        "datasets": [{
                            "label": "Views",
                            "data": [65, 59, 80, 81, 56, 55, 40],
                            "fill": false,
                            "borderColor": "rgb(75, 192, 192)",
                            "lineTension": 0.1
                        }]
                    },
                    "options": {}
                });
                </script>
            </div>
        </div>
        <!--/Graph Card-->
    </div>

    <div class="w-full md:w-1/2 xl:w-1/3 p-3">
        <!--Graph Card-->
        <div class="bg-white dark:bg-gray-800 dark:border-gray-700 border rounded shadow">
            <div class="border-b p-3 dark:border-gray-700">
                <h5 class="font-bold uppercase text-gray-600">Graph</h5>
            </div>
            <div class="p-5">
                <canvas id="chartjs-1" class="chartjs" width="undefined" height="undefined"></canvas>
                <script>
                new Chart(document.getElementById("chartjs-1"), {
                    "type": "bar",
                    "data": {
                        "labels": ["January", "February", "March", "April", "May", "June", "July"],
                        "datasets": [{
                            "label": "Likes",
                            "data": [65, 59, 80, 81, 56, 55, 40],
                            "fill": false,
                            "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
                            "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
                            "borderWidth": 1
                        }]
                    },
                    "options": {
                        "scales": {
                            "yAxes": [{
                                "ticks": {
                                    "beginAtZero": true
                                }
                            }]
                        }
                    }
                });
                </script>
            </div>
        </div>
        <!--/Graph Card-->
    </div>

    <div class="w-full md:w-1/2 xl:w-1/3 p-3">
        <!--Graph Card-->
        <div class="bg-white dark:bg-gray-800 dark:border-gray-700 border rounded shadow">
            <div class="border-b p-3 dark:border-gray-700">
                <h5 class="font-bold uppercase text-gray-600">Graph</h5>
            </div>
            <div class="p-5"><canvas id="chartjs-4" class="chartjs" width="undefined" height="undefined"></canvas>
                <script>
                new Chart(document.getElementById("chartjs-4"), {
                    "type": "doughnut",
                    "data": {
                        "labels": ["P1", "P2", "P3"],
                        "datasets": [{
                            "label": "Issues",
                            "data": [300, 50, 100],
                            "backgroundColor": ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"]
                        }]
                    }
                });
                </script>
            </div>
        </div>
        <!--/Graph Card-->
    </div>
    <div class="w-full md:w-1/2 xl:w-1/3 p-3">
                    <!--Template Card-->
        <div class="bg-white dark:bg-gray-800 dark:border-gray-700 border rounded shadow">
            <div class="border-b p-3 dark:border-gray-700">
                <h5 class="font-bold uppercase text-gray-600">Template</h5>
            </div>
            <div class="p-5">

            </div>
        </div>
        <!--/Template Card-->
    </div>
</div> --}}


    <h1 class="mt-4 mb-4">Dashboard</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item active">Quick Access</li>
    </ol>
    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">Institutions</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="{{ route('Company.index') }}">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-warning text-white mb-4">
                <div class="card-body">Students</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="{{ route('Student.index') }}">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">Exams</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="{{ route('Exam.index') }}">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-danger text-white mb-4">
                <div class="card-body">Student Report</div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="{{ route('StudentReport') }}">View Details</a>
                    <div class="small text-white"><i class="fas fa-angle-right"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-6">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <i class="fas fa-chart-area me-1"></i>
                            Student Batch Exams
                        </div>
                        <div class="col-auto">
                            <select id="batchExamSelect" class="form-select" aria-label="Default select example">
                                @foreach ($batchExams as $batchExam)
                                    <option value="{{ $batchExam->id }}">{{ $batchExam->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="myAreaChart" width="100%" height="40"></canvas>
                </div>
            </div>
        </div>

        {{-- <div class="col-xl-6">
            <div class="card shadow mb-4">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <i class="fas fa-chart-bar me-1"></i>
                            Student Batch Exams
                        </div>
                        <div class="col-auto">
                            <select id="batchExamSelect" class="form-select" aria-label="Default select example">
                                @foreach ($batchExams as $batchExam)
                                    <option value="{{ $batchExam->id }}">{{ $batchExam->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <canvas id="myBarChart" width="100%" height="40"></canvas>
                </div>
            </div>
        </div> --}}
        {{-- <div class="d-flex justify-content-center"> --}}
            <div class="col-xl-5 ms-4 mt-2">
                <div class="card shadow mb-4">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col">
                                <i class="fas fa-chart-pie me-1"></i>
                                Student Attendance(IN and Out)
                            </div>
                            <div class="col-auto">
                                Thursday, June 4, 2026                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="myPieChart" width="100%" height="50"></canvas>
                    </div>
                </div>
            </div>
        {{-- </div> --}}
    </div>


    <div class="card shadow mb-4 mt-3">
        <div class="card-header text-center">
            <i class="fas fa-user-tie"></i>
            Faculties
        </div>
        <div class="card-body">
            <table id="datatablesSimple" class="table-striped">
                <thead>
                    <tr>
                        <th>Si No</th>
                        <th>Name</th>
                        {{-- <th>Nick Name</th>
                        <th>Designation</th> --}}
                        <th>Contact</th>
                        {{-- <th>Email</th> --}}
                        <th>Address</th>
                        <th>Photo</th>
                        {{-- <th>ID Proof</th>
                        <th>Narration</th> --}}
                    </tr>
                </thead>
                <tbody>
                    @php $si = 0; @endphp
                    @foreach ($Employees as $Employee)
                        <tr>
                            <td>
                                {{ ++$si }}
                            </td>
                            <td>
                                {{ $Employee->user->name }}
                            </td>
                            {{-- <td>
                                {{ $Employee->nickname }}
                            </td>
                            <td>
                                {{ $Employee->designation->title }}
                            </td> --}}
                            <td>
                                {{ $Employee->contact }}
                            </td>
                            {{-- <td>
                                {{ $Employee->user->email }}
                            </td> --}}
                            <td>
                                {{ $Employee->address }}
                            </td>
                            <td>
                                <img width="50px"
                                    src="{{ PubFun::ImageLink(PubCont::STORAGE_LOCATION_IMAGE_EmployeePhoto, $Employee->photo) }}" />
                            </td>
                            {{-- <td>
                                <img width="50px"
                                    src="{{ PubFun::ImageLink(PubCont::STORAGE_LOCATION_IMAGE_EmployeeProof, $Employee->idproof) }}" />
                            </td>
                            <td>
                                {{ $Employee->narration }}
                            </td> --}}
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection