@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' => 'Class Room'])
            <!-- <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 -->
   
    <div class="card  mt-8 pt-1" style="width:60%; margin-left:13%;" id="basic-info" >
        
 @if(Gate::allows('manage-users') && Gate::allows('manage-items'))
                       <div class="text-right mt-3">
                        <a href="/default" class="btn btn-secondary">← Back to Dashboard</a>
                    </div>
 @elseif(Gate::allows('manage-users'))
<div class="text-right mt-3">
                        <a href="/default1" class="btn btn-secondary">← Back to Dashboard</a>
                    </div>
                        @else
                        <div class="text-right mt-3">
                        <a href="/default_home" class="btn btn-secondary">← Back to Dashboard</a>
                    </div>
                    @endif
        <div class="card-header  mx-1 pt-1">
            <h2 class="mt-2 center  pt-1" style="margin-left:40%;">Your Class</h2>
            <!-- <input type="hidden" id="UserId" name="UserId" value="{{auth()->user()->id}}"> -->
        </div>

        
        <div class="container mt-4 pb-5" style="margin-left:0%;background-color:'#F7CFD8'"> 
            @if(isset($groups) && $groups->isNotEmpty())
    @php
        $uniqueGroups = $groups->unique('grp_name'); // Remove duplicates based on group name
    @endphp

    @foreach($uniqueGroups as $group)
        @php
            $count = $studentCounts[$group->grp_name] ?? 0;
        @endphp

        <div style="display: flex; align-items: center; justify-content: space-between; background-color:rgb(189, 210, 216); padding: 10px; border-radius: 8px; margin-bottom: 10px;">
            <div>
                <div style="font-weight: bold;color:black;">{{ $loop->iteration }}. {{ $group->grp_name }}</div>
                <div style="font-size: 14px; color:black;">Class Date: {{ \Carbon\Carbon::parse($group->date)->format('d M Y') }}</div>
            </div>
            <span style="font-size: 14px;color:black;">👥 {{ $count }} students</span>
            <div style="display: flex; align-items: center; gap: 10px;">
                <a href="{{ route('group.join', ['id' => $group->id]) }}"
                style="text-decoration: none; padding: 6px 6px; background-color:#fb6340; color: white; border-radius: 5px; font-weight: bold;">
                    Join Now
                </a>
            </div>
        </div>
    @endforeach
@else
    <p>You are not part of any group.</p>
@endif

        </div>

    </div>

@endsection
<style>
    .card{
        margin-top: 150px;
        width: 400px;
        height: auto;
        padding: 20px;
    }
    .join{
        margin-left: 30px;
    }
</style>
<style>
    .group-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #ddd;
        padding: 10px 0;
    }

    .join {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        border-radius: 5px;
    }

    .join:hover {
        background-color: #0056b3;
    }
</style>