@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Dashboard</title>
<style>
    select {
        -webkit-appearance: listbox !important;
        padding: 10px !important; /* Adjust padding as needed */
        margin-right: 10px !important;
    }
</style>

<style>
    /* Popup container */
    .popup {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1100; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Popup content */
    .popup-content {
        background-color: #fefefe;
        margin: 5% 20%;
        padding: 20px;
        border: 1px solid #888;
        width: auto;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

    /* Close button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        margin-top: -30px; 
        margin-right: -18px; 
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>
@section('main-content')

<div id="alert" class="col-md-6">
    @if(Session::has('success'))
    <div class="alert alert-primary" role="alert">
        {{Session::get('success')}}
    </div>
    @endif

    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
</div>

<!-- The popup container -->
<div id="popup" class="popup">
    <!-- Popup content -->
    <div class="popup-content text-center">
        <span class="close" onclick="closePopup()">&times;</span>
        <h4 class="announcement_head_popup"></h4>
        <h5 class="announcement_head_date"></h5>
        <h5 class="announcement_head_time"></h5>
        <a href="{{asset("assets/img/avatars/avatar.jpg") }}" target="_blank" class="announcement_img">
            <img src="{{asset("assets/img/avatars/avatar.jpg") }}" width="250px" height="250px" class="announcement_img"/>
        </a>
        <p class="announcement_content_popup mt-2 mb-2"></p>
    </div>
</div>


<!-- container start -->
<div class="content-wrapper">
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            {{-- <div class="col-lg-12 col-md-12 order-1">
                <div class="row">
                    <div class="col-lg-2 col-md-12 col-2 mb-4">
                        <div class="card">
                            <div class="card-body">
                                <div class="card-title d-flex align-items-start justify-content-between">
                                    <div class="avatar flex-shrink-0">
                                        <img src="../assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
                                    </div>
                                </div>
                                <h3 class="card-title mb-2">
                                   {{ $batchStudentCounts }}
                                </h3>Total Batch Students
                                <a id="totalStudentsLink" class="fw-semibold d-block mb-1" href="#"><i class="bx bx-right-arrow-circle"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>
        <div class="row">
            <div class="content-wrapper">
                <div class="container-xxl flex-grow-1 container-p-y">
                    <div class="row">

                        <div class="col-md-6 col-lg-4 mb-3">
                            <a href="{{url('/notificationFromHigherAuthorities')}}">
                                <h5 class="mb-3 bg-secondary text-white rounded-pill p-2 text-center">Notifcations</h5>
                            </a>
                            <p class="text-center">( From Higher Authorities )</p>
                            
                            <ul class="list-group exam-list p-2">
                                @if(!empty($notifications) && count($notifications) > 0)
                                    @foreach($notifications as $detail)
                                    <li class="list-group-item exam-list-item bg-light mb-1 text-break">
                                        <p class="mb-1"><strong>{{$detail->subject}}</strong></p>
                                        <p class="mb-1">( {{dateformatter($detail->created_at)}} )</p>
                                        <p class="mb-1">{{$detail->message}}</p>
                                    </li>
                                    @endforeach
                                    @if (count($notifications)>4)
                                        <a href="{{url('/notificationFromHigherAuthorities')}}" class="btn btn-secondary text-white">View More...</a>
                                    @endif
                                @else
                                    <p class="alert alert-info mt-1" role="alert">No notification found.</p>
                                @endif
                            </ul>
                        </div>
            
                        <div class="col-md-6 col-lg-4 mb-3">
                            <a href="{{url('/events')}}">
                                <h5 class="mb-3 bg-secondary text-white rounded-pill p-2 text-center">Events</h5>
                            </a>
                            <p class="text-center">( Created By You )</p>

                            <ul class="list-group exam-list p-2">
                                @if(!empty($events) && count($events) > 0)
                                    @foreach($events as $detail)
                                        <li class="list-group-item exam-list-item bg-light mb-1  text-break">
                                            <p class="mb-1"><strong> {{$detail->title}}</strong> ( {{$detail->time}} )</p>
                                            <p class="mb-1"><strong> {{dateformatter($detail->date)}}</strong></p>
                                            <div class="d-flex mb-1">
                                                <a href="{{$detail->image}}" target="_blank">
                                                    <img src="{{$detail->image}}" width="75" height="100"/>
                                                </a>
                                                <p class="ms-1">
                                                    {{substr($detail->description,0,125)}}
                                                    @if (strlen($detail->description)>125)
                                                        <a href="javaScript:void(0);" class="view_class" data-title="{{ucwords($detail->title)}}" data-content="{{$detail->description}}" data-image="{{isset($detail->image)?asset('assets/event_images/'.$detail->image):""}}" data-time="{{ $detail->time }}" data-date="{{dateformatter($detail->date)}}">...</a>
                                                    @endif
                                                </p>
                                            </div>
                                        </li>
                                    @endforeach
                                    @if (count($events)>3)
                                        <a href="{{url('/events')}}" class="btn btn-secondary text-white">View More...</a>
                                    @endif
                                @else
                                    <p class="alert alert-info mt-1" role="alert">No event found.</p>
                                @endif
                            </ul> 
                        </div>
            
            
                        <div class="col-md-6 col-lg-4 mb-3">
                            <a href="{{url('/holidayslist')}}">
                                <h5 class="mb-3 bg-info text-white rounded-pill p-2 text-center">Upcoming Holidays</h5>
                            </a>
                            <p class="text-center">( From Higher Authorities )</p>

                                <ul class="list-group exam-list p-2">
                                    @if (isset($holidays) && count($holidays)>0)
                                        @foreach($holidays as $val)
                                            <li class="list-group-item exam-list-item bg-light mb-2">
                                                                                                <p class="mb-1">
                                                    @if ($val->start_date==$val->end_date)
                                                        <strong> {{$start_date}}</strong> 
                                                    @else
                                                        <strong> {{$start_date}}</strong>
                                                        to
                                                        <strong> {{$end_date}}</strong> 
                                                    @endif
                                                </p>
                                                <p class="mb-1">{{$val->name}}</p>
                                                <p class="mb-1">{{$val->description}}</p>
                                            </li>
                                        @endforeach
                                        @if (count($holidays)>=5)
                                            <a href="{{url('/')}}" class="btn btn-secondary text-white">View More...</a>
                                        @endif
                                    @else
                                        <p class="alert alert-info mt-1" role="alert">No holiday found.</p>
                                    @endif
                                </ul> 
                            </h5>    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->

    @endsection
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <script>
        function openPopup() {
            document.getElementById("popup").style.display = "block";
        }
    
        // Function to close the popup
        function closePopup() {
            document.getElementById("popup").style.display = "none";
        }

        $(document).ready(function() {
        
            $(".view_class").on("click",function(e){
                e.preventDefault();
                openPopup();
                $('.announcement_head_popup').text($(this).data('title'));
                $('.announcement_content_popup').text($(this).data('content'));
                $('.announcement_head_date').text($(this).data('date'));
                $('.announcement_head_time').text($(this).data('time'));
                if($(this).data('image')){
                    $('.announcement_img').attr('src',$(this).data('image'));
                    $('.announcement_img').attr('href',$(this).data('image'));
                }
            });

            
            // var chartLabel = 'Yearly Counts';
            // var ajaxUrl = '';
            // $('#totalStudentsLink').click(function(event) {
            //     event.preventDefault();

            //     chartLabel = 'Yearly Batch Students Count'; // Change this to your desired label
            //     ajaxUrl = '/getYearlyBatchStudentsCounts';
            //     myChart.data.datasets[0].label = chartLabel;
            //     myChart.update();
            //     $('#selectYear option:selected').prop('selected', false);

            //     // Select the last option
            //     $('#selectYear option:last').prop('selected', true);
            //     fetchDataAndUpdateChart(new Date().getFullYear().toString());
            // });

            // // Define an empty chart
            // const ctx = document.getElementById('allChart').getContext('2d');
            // const myChart = new Chart(ctx, {
            //     type: 'bar',
            //     data: {
            //         labels: [
            //             'January', 'February', 'March', 'April', 'May', 'June',
            //             'July', 'August', 'September', 'October', 'November', 'December'
            //         ],
            //         datasets: [{
            //             label: chartLabel,
            //             barThickness: 80,
            //             maxBarThickness: 100,
            //             data: [], // Empty data array, we will populate it later
            //             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)',
            //                 'rgba(75, 192, 192, 0.2)',
            //                 'rgba(255, 159, 64, 0.2)',
            //                 'rgba(153, 102, 255, 0.2)',
            //                 'rgba(54, 162, 235, 0.2)',
            //                 'rgba(255, 205, 86, 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)',
            //                 'rgb(255, 99, 132)',
            //                 'rgb(255, 159, 64)',
            //                 'rgb(255, 205, 86)',
            //                 'rgb(75, 192, 192)',
            //                 'rgb(54, 162, 235)',
            //             ],
            //             borderWidth: 1
            //         }]
            //     },
            //     options: {
            //         scales: {
            //             y: {
            //                 suggestedMin: 0,
            //                 suggestedMax: 10,
            //                 stepSize: 1,
            //             }
            //         }
            //     }
            // });

            // // Function to update the chart with data for the selected year
            // function updateChart(yearlyData) {
            //     const selectedYearData = yearlyData.map(item => item.count);
            //     // Update the chart data and labels
            //     myChart.data.datasets[0].data = selectedYearData;
            //     myChart.update();
            // }


            // // Event listener for the year dropdown change
            // $('#selectYear').change(function() {
            //     const selectedYear = $(this).val();

            //     // Fetch data for the selected year and update the chart
            //     fetchDataAndUpdateChart(selectedYear);
            // });

            // // Function to fetch data for the selected year
            // function fetchDataAndUpdateChart(selectedYear) {
            //     $.ajax({
            //         url: '/getYearlyBatchStudentsCounts',
            //         method: 'GET',
            //         data: {
            //             year: selectedYear
            //         }, // Send the selected year to the server
            //         success: function(data) {
            //             // Update the chart with the fetched data
            //             updateChart(data);
            //         },
            //         error: function() {
            //             console.error('Error fetching data.');
            //         }
            //     });
            // }

            //fetchDataAndUpdateChart('2023');
        });
    </script>