@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' => 'Assign Exercise'])
            <!-- <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 NavBa -->

    <div class="card  mt-8 pt-1" style="width:60%; margin-left:13%;" id="basic-info" >
        <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');
            @endphp

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

                {{-- <div class="group-card">
                    <div><strong>{{ $loop->iteration }}. {{ $group->grp_name }}</strong></div>
                    <div>Class Date: {{ \Carbon\Carbon::parse($group->date)->format('d M Y') }}</div>
                    <div>👥 {{ $count }} students</div> --}}

                    <!-- Form to pass group_id -->
                    {{-- <form method="GET" action="{{ route('exerciseassign', ['id' => $group->id]) }}">

                        <input type="hidden" name="group_id" value="{{ $group->id }}">
                        <button type="submit" class="btn btn-primary">View</button>
                    </form> --}}
                {{-- </div> --}}



    <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('assignexercise', ['id' => $group->id]) }}"
                style="text-decoration: none; padding: 6px 6px; background-color:#fb6340; color: white; border-radius: 5px; font-weight: bold;">
                 View
             </a> --}}
             <!-- <form method="GET" action="{{ route('viewexerciseassign', ['id' => $group->id]) }}">

                <input type="hidden" name="group_id" value="{{ $group->id }}">
                <button type="submit" class="btn btn-primary">View</button>
            </form> -->
             @if(Gate::allows('manage-users') && Gate::allows('manage-items'))
            <form method="GET" action="{{ route('exerciseassign', ['id' => $group->id]) }}">

                <input type="hidden" name="group_id" value="{{ $group->id }}">
                <button type="submit" class="btn btn-primary">Assign</button>
            </form>
             @elseif(Gate::allows('manage-users'))
             <form method="GET" action="{{ route('exerciseassign', ['id' => $group->id]) }}">

                <input type="hidden" name="group_id" value="{{ $group->id }}">
                <button type="submit" class="btn btn-primary">Assign</button>
            </form>
                @else
                <form method="GET" action="{{ route('exercise_students', ['id' => $group->id]) }}">

                <input type="hidden" name="group_id" value="{{ $group->id }}">
                <button type="submit" class="btn btn-primary">Assign</button>
            </form>
                @endif

        </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>