@extends('layouts.app')

@section('content')
   <nav class="navbar navbar-main navbar-expand-lg  px-0 mx-4 shadow-none border-radius-xl z-index-sticky " id="navbarBlur"
        data-scroll="false">
        <div class="container-fluid py-1 px-3">
            @include('layouts.navbars.auth.topnav', ['title' => 'Classes Overview'])
            <!-- <div class="sidenav-toggler sidenav-toggler-inner d-xl-block d-none ">
                <a href="javascript:;" class="nav-link p-0">
                    <div class="sidenav-toggler-inner">
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                        <i class="sidenav-toggler-line bg-white"></i>
                    </div>
                </a>
            </div> -->
            <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
                <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                   
                </div>
                <ul class="navbar-nav  justify-content-end">
                    <li class="nav-item d-flex align-items-center">
                        @include('auth.logout')
                    </li>
                    <li class="nav-item d-xl-none ps-3 d-flex align-items-center">
                        <a href="javascript:;" class="nav-link text-white p-0" id="iconNavbarSidenav">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                                <i class="sidenav-toggler-line bg-white"></i>
                            </div>
                        </a>
                    </li>
            
                    <li class="nav-item">
                        <a class="nav-link {{ Route::currentRouteName() == 'user-profile' ? 'active' : '' }}" href="{{ route('user-profile') }}">
                            <span class="sidenav-mini-icon"> <i class="fa fa-cog" style="color:white;"></i> </span>
                            <span class="sidenav-normal text-bold" style="color:black;"> </span>
                        </a>
                    </li>


                </ul>
            </div>
        </div>
    </nav>
    
    <!-- End Navbar -->
   <!-- Center the whole wrapper -->
<div class="d-flex justify-content-center align-items-center" style="min-height: 70vh;">
    <div class="content-wrapper"
         style="width: 70%; padding: 20px;
                background-image: url('../../assets/img/b2.jpg');
                background-size: cover;
                background-color: rgb(248, 245, 245);
                border-radius: 8px;">

        <!-- ✅ Classes Heading at the Top -->
          <div class="text-left mt-3">
                        <a href="/default_home" class="btn btn-secondary">← Back to Dashboard</a>
                    </div>
       <div class="text-center mb-4">
    <h4 class="fw-bold text-uppercase fs-3 text-dark">Classes</h4>
    <hr class="opacity-50">
</div>
@foreach($groups as $group)
    <div class="mb-2 text-center">
        <button class="btn btn-primary" onclick="loadGroupSessions('{{ $group->grp_name }}')">
            View Sessions for {{ $group->grp_name }}
        </button>
    </div>
@endforeach

<!-- Placeholder for sessions -->
<div id="sessionsContainer" class="mt-4"></div>

    </div>
</div>

                      
                              


<!-- Modal -->
<div class="modal fade" id="groupDetailsModal" tabindex="-1" aria-labelledby="groupDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content text-white" style="background:rgb(242, 243, 245);">
          
            <div class="modal-body">
                <div class="modal-content-center">
                      <div class="modal-header">
                <h5 class="modal-title" id="groupDetailsModalLabel"><i class="fas fa-info-circle me-2"></i> Group Details</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
                    <div style="color:rgb(2, 32, 91);">
                        <table>
                            <tr>
                            <td><strong>Group:</strong></td>
                            <td><span id="modalGroupName"></span></td>
                            </tr>
                            <tr>
                            <td><strong>Dates:</strong></td>
                            <td><span id="modalDate"></span></td>
                            </tr>
                            <tr>
                            <td><strong>Start Time:</strong></td>
                            <td><span id="modalStartTime"></span></td>
                            </tr>
                            <tr>
                            <td><strong>End Time:</strong></td>
                            <td><span id="modalEndTime"></span></td>
                            </tr>
                            <tr>
                            <td><strong>Status:</strong></td>
                            <td><span id="modalStatus"></span></td>
                            </tr>
                        </table>
                    </div>

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

    <!-- @include('layouts.footers.auth.footer') -->
    
@endsection
<style>


.modal-content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight:20px;
  height: 100%; /* if parent has defined height */
}
</style>
@push('js')
    <script src="../../assets/js/plugins/chartjs.min.js"></script>
    <script>
        
        const groupDetails = {
        grp_names: @json($grp_names),
        starting_times: @json($starting_times),
        end_times: @json($end_times),
        dates: @json($dates)
    };

    document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.group-item').forEach(item => {
        item.addEventListener('click', () => {
            const index = item.dataset.index;

            const groupName = groupDetails.grp_names[index] ?? 'Not Available';
            const groupDate = groupDetails.dates[index] ?? '';
            const startTime = groupDetails.starting_times[index] ?? 'Not Available';
            const endTime = groupDetails.end_times[index] ?? 'Not Available';

            const today = new Date().toISOString().split('T')[0];
            const isToday = groupDate === today;
            const status = isToday ? 'Not Completed' : 'Completed';

            // Set text
            document.getElementById('modalGroupName').textContent = groupName;
            document.getElementById('modalDate').textContent = groupDate || 'Not Available';
            document.getElementById('modalStartTime').textContent = startTime;
            document.getElementById('modalEndTime').textContent = endTime;

            // Set status with color
            const statusElem = document.getElementById('modalStatus');
            statusElem.textContent = status;
            statusElem.classList.remove('text-success', 'text-danger'); // remove old
            statusElem.classList.add(isToday ? 'text-danger' : 'text-success'); // add new
        });
    });
});


        var ctx1 = document.getElementById("chart-line").getContext("2d");

        var gradientStroke1 = ctx1.createLinearGradient(0, 230, 0, 50);

        gradientStroke1.addColorStop(1, 'rgba(251, 99, 64, 0.2)');
        gradientStroke1.addColorStop(0.2, 'rgba(251, 99, 64, 0.0)');
        gradientStroke1.addColorStop(0, 'rgba(251, 99, 64, 0)');
        new Chart(ctx1, {
            type: "line",
            data: {
                labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [{
                    label: "New Students",
                    tension: 0.4,
                    borderWidth: 0,
                    pointRadius: 0,
                    borderColor: "#fb6340",
                    backgroundColor: gradientStroke1,
                    borderWidth: 3,
                    fill: true,
                    data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
                    maxBarThickness: 6

                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false,
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                scales: {
                    y: {
                        grid: {
                            drawBorder: false,
                            display: true,
                            drawOnChartArea: true,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            padding: 10,
                            color: '#fbfbfb',
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                    x: {
                        grid: {
                            drawBorder: false,
                            display: false,
                            drawOnChartArea: false,
                            drawTicks: false,
                            borderDash: [5, 5]
                        },
                        ticks: {
                            display: true,
                            color: '#ccc',
                            padding: 20,
                            font: {
                                size: 11,
                                family: "Open Sans",
                                style: 'normal',
                                lineHeight: 2
                            },
                        }
                    },
                },
            },
        });
    </script>
<script>
  
    function loadGroupSessions(grp_name) {
        fetch(`/group-sessions/${encodeURIComponent(grp_name)}`)
            .then(response => response.json())
            .then(data => {
                let html = `
                <div class="card shadow p-4 mt-4 bg-white rounded">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3 class="fw-bold text-center w-100 m-0 text-uppercase">${grp_name ?? 'N/A'}</h3>
                        <button class="btn-close" aria-label="Close" style="position: absolute; right: 20px;" onclick="document.getElementById('sessionsContainer').innerHTML = '';"></button>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered text-dark">
                            <thead>
                                <tr class="text-uppercase">
                                    
                                    <th>Week</th>
                                    <th>Date</th>
                                    <th>Start Time</th>
                                    <!--<th>End Time</th>
                                    <th>Teacher</th>
                                    <th>Student</th>-->
                                </tr>
                            </thead>
                            <tbody>`;

                if (data.length === 0) {
                    html += `
                        <tr>
                            <td colspan="7" class="text-center">No sessions found for this group</td>
                        </tr>`;
                } 
                // else {
                //     data.forEach((session, index) => {
                //         html += `
                //             <tr>
                //                 <!--<td>${index + 1}</td>-->
                //                 <td>${session.groups ?? 'N/A'}</td>
                //                 <td>${new Date(session.date).toLocaleDateString()}</td>
                //                 <td>${session.starting_time}</td>
                //                <!-- <td>${session.end_time}</td>
                //                 <td>${session.teacher_name}</td>
                //                 <td>${session.student_name}</td>-->
                //             </tr>`;
                //     });
                // }
                
if (data.length === 0) {
    html += `
        <tr>
            <td colspan="7" class="text-center">No sessions found for this group</td>
        </tr>`;
} else {
    const today = new Date();
    const startOfWeek = new Date();
    startOfWeek.setDate(today.getDate() - today.getDay()); // Sunday start
    const endOfWeek = new Date(startOfWeek);
    endOfWeek.setDate(startOfWeek.getDate() + 6); // Saturday end

    data.forEach((session, index) => {
        const sessionDate = new Date(session.date);
        let dateClass = '';
        let groupClass = '';

        if (sessionDate < today) {
            // Past week
            dateClass = 'text-muted opacity-50';
            groupClass = 'text-muted opacity-50';
        } else if (sessionDate >= today && sessionDate <= endOfWeek) {
            // Near week (this week)
            dateClass = 'text-danger fw-bold';
            groupClass = 'text-danger fw-bold';
        } else {
            // Future week
            dateClass = 'text-success fw-bold';
            groupClass = 'text-success fw-bold';
        }

        html += `
            <tr>
                <td class="${groupClass}">${session.groups ?? 'N/A'}</td>
                <td class="${dateClass}">${sessionDate.toLocaleDateString()}</td>
                <td class="${dateClass}">${session.starting_time}</td>
            </tr>`;
    });
}
                html += `
                            </tbody>
                        </table>
                    </div>

                   
                </div>`;

                document.getElementById('sessionsContainer').innerHTML = html;
            });
    }
</script>




@endpush