@extends('layouts.app')
@section('content')

    @include('layouts.toolbar')

    <style>
        .summer-content-area .card-body p .avaiability-open {
            font-weight: 500;
            font-size: 14px;
            line-height: 18px;
            color: #21A33C !important;
            border: 1px solid #21A33C;
            border-radius: 4px;
        }
        
        /* Ensure modal displays properly */
        .modal_assign_teacher {
            z-index: 1055;
        }
        
        #kt_modal_assign_teacher {
            z-index: 1056;
        }
        
        /* Icon styling */
        .icon {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            flex-wrap: nowrap;
        }
        
        .icon a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: white;
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border: 1px solid rgba(0,0,0,0.05);
            flex-shrink: 0;
        }
        
        .icon a:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .icon a i {
            font-size: 14px;
            line-height: 1;
        }
        
        /* Ensure all icons are perfectly aligned */
        .icon a.edit-color,
        .icon a.edit-icon,
        .icon a.assign-teacher,
        .icon a.delete-class-schedule {
            vertical-align: middle;
        }
        
        /* Card header improvements */
        .card-header {
            padding: 12px 16px;
        }
        
        .card-header .edit {
            text-decoration: none;
            color: inherit;
        }
        
        .card-header .edit:hover {
            text-decoration: none;
            color: inherit;
        }
        
        /* Add New Class Button Styling */
        .add-new-class {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 25px;
            padding: 8px 20px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
        }
        
        .add-new-class:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
        
        .add-new-class i {
            font-size: 12px;
        }
        
        /* Activity Header Styling */
        .class-items h3 {
            color: #2c3e50;
            font-size: 1.5rem;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
    </style>

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="card card-page" style="background: #F1F5F2">
                <div class="card-body p-0">
                    <section class="summer-camp-area pt-5 mt-4">
                        <div class="container">
                            <div class="heading mb-5">
                                <h2 class="fw-bolder text-center">Yang Fan Academy {{ session('enrollment_year').'-'.(session('enrollment_year')+1) }} Afterschool Classes</h2>
                            </div>
                        </div>
                        <div class="container-fluid p-0 d-none">
                            <div class="tabs-line">
                                <hr />
                            </div>
                        </div>
                        <div class="container">
                            <div class="summer-tabs-area">
                                <div class="tab-content" id="weekstavContent">
                                    <div class="tab-pane fade show active" id="weektab1" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                                        <div class="summer-specialty-area">
                                            @if(!empty($activities))
                                                @foreach($activities as $activity => $classes)
                                                    <div class="class-items">
                                                        <div class="d-flex justify-content-between align-items-center mb-3">
                                                            <h3 class="fw-bold text-uppercase mb-0">{{ strtoupper($activity) }}</h3>
                                                            <button type="button" class="btn btn-primary btn-sm add-new-class" data-activity="{{ $activity }}" title="Add New Class">
                                                                <i class="fa-solid fa-plus me-2"></i>Add New Class
                                                            </button>
                                                        </div>
                                                        <div class="summer-sp-item mb-5">
                                                            <div class="summer-content-area">
                                                                <div class="row">
                                                                    @if(!empty($classes))
                                                                        @foreach($classes as $class)