@extends('layouts.sidebar')

@section('page-title', $template->name . ' - ' . __('app.future_classes'))
@section('page-description', __('app.manage') . ' ' . __('app.future_classes') . ' ' . __('app.for') . ' ' . $template->name)

@section('title', $template->name . ' - ' . __('app.admin'))

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
<style>
    #template-classes-root .select2-container--default .select2-selection--multiple {
        min-height: 2.85rem;
        border-radius: 0.65rem;
        border: 1px solid var(--border, #E7DED1);
        background: var(--background, #fff);
        padding: 0.2rem 0.35rem;
    }
    #template-classes-root .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: color-mix(in srgb, var(--primary, #b8935e) 55%, var(--border, #E7DED1));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #b8935e) 18%, transparent);
    }
    #template-classes-root .select2-container--default .select2-selection--multiple .select2-selection__choice {
        border-radius: 999px;
        border: 1px solid color-mix(in srgb, var(--primary, #b8935e) 35%, var(--border, #E7DED1));
        background: color-mix(in srgb, var(--primary, #b8935e) 12%, #fff);
        color: var(--foreground, #2f2a24);
        padding-left: 0.5rem;
    }
    #template-classes-root .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: color-mix(in srgb, var(--primary, #b8935e) 88%, #2f2a24);
    }
    #template-classes-root .tc-pill-radio {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        border: 1px solid var(--border, #E7DED1);
        background: color-mix(in srgb, var(--muted, #f5f2ed) 40%, white);
        font-size: 0.875rem;
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }
    #template-classes-root .tc-pill-radio:has(input:checked) {
        border-color: color-mix(in srgb, var(--primary, #b8935e) 55%, var(--border, #E7DED1));
        background: color-mix(in srgb, var(--primary, #b8935e) 10%, #fff);
        font-weight: 600;
    }
    #template-classes-root .tc-pill-radio input {
        accent-color: var(--primary, #b8935e);
    }
    #template-classes-root .tc-icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.65rem;
        border: 1px solid var(--border, #E7DED1);
        color: var(--foreground, #2f2a24);
        background: var(--card, #fff);
        transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    #template-classes-root .tc-icon-btn:hover {
        background: color-mix(in srgb, var(--primary, #b8935e) 10%, #fff);
        border-color: color-mix(in srgb, var(--primary, #b8935e) 40%, var(--border, #E7DED1));
        color: var(--primary, #b8935e);
    }
    #template-classes-root .tc-bulk-panel {
        min-width: 0;
        overflow: visible;
    }
    #template-classes-root .tc-scroll-list {
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #template-classes-root .tc-bulk-footer {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    @media (min-width: 640px) {
        #template-classes-root .tc-bulk-footer {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
        }
    }
    #template-classes-root .tc-bulk-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
        word-break: break-word;
        padding: 0.65rem 1rem;
    }
    @media (min-width: 640px) {
        #template-classes-root .tc-bulk-submit {
            width: auto;
            max-width: min(100%, 30rem);
            justify-content: center;
        }
    }
    #template-classes-root .tc-bulk-toggle {
        border-width: 1px;
        border-style: solid;
    }
</style>
@endpush

@section('content')
<section class="py-8 sm:py-10 md:py-12">
<div id="template-classes-root" class="max-w-7xl mx-auto w-full min-w-0 space-y-6 px-1 sm:px-0">
    <a href="{{ route('admin.classes') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-primary mb-4 no-underline">
        <i class="fas fa-chevron-left text-[10px]" aria-hidden="true"></i>{{ __('app.back_to_templates') }}
    </a>

    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-2">
        <div class="min-w-0">
            <h1 class="text-2xl sm:text-3xl font-bold text-foreground tracking-tight flex items-start sm:items-center gap-3">
                <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary mt-0.5 sm:mt-0">
                    <i class="fas fa-calendar-alt text-base" aria-hidden="true"></i>
                </span>
                <span class="break-words leading-tight">{{ $template->name }}</span>
            </h1>
            <p class="text-sm text-muted-foreground mt-2 max-w-xl">
                {{ __('app.future_classes') }} — {{ __('app.add_user') }}, {{ __('app.bulk_actions') }}, {{ __('app.participants') }}.
            </p>
        </div>
        <div class="flex flex-wrap gap-2 shrink-0 sm:pt-1">
            <a href="{{ route('admin.classes.edit', $template) }}"
               class="inline-flex h-9 items-center justify-center gap-2 px-4 rounded-lg text-xs font-semibold border border-border bg-background text-foreground hover:bg-muted/50 transition-colors no-underline">
                <i class="fas fa-edit text-xs text-primary" aria-hidden="true"></i>{{ __('app.edit_template') }}
            </a>
            <a href="{{ route('admin.classes.generate', $template) }}?period=next"
               class="inline-flex h-9 items-center justify-center gap-2 px-4 rounded-lg text-xs font-semibold no-underline bg-primary text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm">
                <i class="fas fa-calendar-plus text-xs" aria-hidden="true"></i>{{ __('app.generate_next_month') }}
            </a>
        </div>
    </div>

    <!-- Bulk Actions Section -->
    @if($classes->count() > 0)
    <div class="tc-bulk-panel rounded-xl border border-border bg-card text-card-foreground shadow-sm p-5 sm:p-6 min-w-0" x-data="{ showBulkAdd: false, showBulkRemove: false, addMode: 'all', removeMode: 'all' }">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-5 min-w-0">
            <div class="min-w-0">
                <h2 class="text-base font-semibold text-foreground">{{ __('app.bulk_actions') }}</h2>
                <p class="text-xs text-muted-foreground mt-1">{{ __('app.select_multiple_users') }}</p>
            </div>
            <div class="flex flex-wrap gap-2 shrink-0">
                <button type="button" @click="showBulkAdd = !showBulkAdd; showBulkRemove = false"
                        :class="showBulkAdd ? 'ring-2 ring-primary/40 bg-primary/10 border-primary/45' : 'border-border'"
                        class="tc-bulk-toggle inline-flex h-9 items-center justify-center gap-2 rounded-lg border bg-background px-4 text-xs font-semibold text-foreground hover:bg-muted/50 transition-all">
                    <i class="fas fa-user-plus text-primary shrink-0 text-[11px]" aria-hidden="true"></i><span class="text-left leading-snug">{{ __('app.add_users') }}</span>
                </button>
                <button type="button" @click="showBulkRemove = !showBulkRemove; showBulkAdd = false"
                        :class="showBulkRemove ? 'ring-2 ring-destructive/30 bg-destructive/10 border-destructive/45 text-destructive' : 'border-border text-foreground'"
                        class="tc-bulk-toggle inline-flex h-9 items-center justify-center gap-2 rounded-lg border bg-background px-4 text-xs font-semibold hover:bg-muted/50 transition-all">
                    <i class="fas fa-user-minus shrink-0 text-[11px]" aria-hidden="true"></i><span class="text-left leading-snug">{{ __('app.remove_users') }}</span>
                </button>
            </div>
        </div>

        <!-- Bulk Add Section -->
        <div x-show="showBulkAdd" x-transition x-cloak class="border-t border-border pt-6 space-y-5">
            <div class="flex flex-wrap gap-3">
                <label class="tc-pill-radio">
                    <input type="radio" name="add_mode" value="all" x-model="addMode" class="shrink-0">
                    <span>{{ __('app.add_to_all_classes') }}</span>
                </label>
                <label class="tc-pill-radio">
                    <input type="radio" name="add_mode" value="selected" x-model="addMode" class="shrink-0">
                    <span>{{ __('app.add_to_selected_classes') }}</span>
                </label>
            </div>

            <form x-show="addMode === 'all'" action="{{ route('admin.classes.bulk-add-users', $template) }}" method="POST" class="space-y-4 min-w-0">
                @csrf
                <input type="hidden" name="mode" value="all">
                <div>
                    <label for="bulk_users" class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_users') }}</label>
                    <select name="selected_users[]" id="bulk_users" class="w-full rounded-xl border border-border bg-background" multiple>
                        @foreach($users as $user)
                            @php
                                $activePayment = $user->getCurrentPilatesPayment();
                                $canAdd = false;
                                $reason = '';
                                if (!$activePayment) {
                                    $reason = __('app.no_active_payment');
                                } else {
                                    $canAdd = true;
                                }
                            @endphp
                            <option value="{{ $user->id }}" {{ !$canAdd ? 'disabled' : '' }}>
                                {{ $user->name }}
                                @if($activePayment)
                                    - {{ $activePayment->getPaymentTypeLabel() }}
                                @endif
                                @if(!$canAdd && $reason)
                                    ({{ $reason }})
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-2 text-sm text-muted-foreground">{{ __('app.select_multiple_users') }}</p>
                </div>
                <div class="tc-bulk-footer mt-6 pt-4 border-t border-border border-dashed">
                    <button type="submit" class="tc-bulk-submit rounded-xl bg-primary text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm">
                        <i class="fas fa-plus shrink-0" aria-hidden="true"></i><span>{{ __('app.add_to_all_classes') }}</span>
                    </button>
                </div>
            </form>

            <form x-show="addMode === 'selected'" action="{{ route('admin.classes.bulk-add-users', $template) }}" method="POST" class="space-y-4 min-w-0">
                @csrf
                <input type="hidden" name="mode" value="selected">
                <div>
                    <label for="selective_users" class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_users') }}</label>
                    <select name="selected_users[]" id="selective_users" class="w-full rounded-xl border border-border bg-background mb-4" multiple>
                        @foreach($users as $user)
                            @php
                                $activePayment = $user->getCurrentPilatesPayment();
                                $canAdd = false;
                                $reason = '';
                                if (!$activePayment) {
                                    $reason = __('app.no_active_payment');
                                } else {
                                    if ($activePayment->payment_type !== \App\Models\Payment::TYPE_SINGLE_CLASS) {
                                        $monthlyLimit = $activePayment->payment_type === \App\Models\Payment::TYPE_PACKAGE_2X_WEEKLY ? 9 : 14;
                                        $futureClasses = \App\Models\PilatesClass::where('template_id', $template->id)
                                            ->where('date', '>=', now()->toDateString())
                                            ->get();
                                        $monthsToCheck = $futureClasses->map(function($class) {
                                            return \Carbon\Carbon::parse($class->date)->format('Y-m');
                                        })->unique();
                                        foreach ($monthsToCheck as $monthStr) {
                                            $monthDate = \Carbon\Carbon::createFromFormat('Y-m', $monthStr);
                                            $monthStart = $monthDate->copy()->startOfMonth();
                                            $monthEnd = $monthDate->copy()->endOfMonth();
                                            $monthBookings = \App\Models\PilatesBooking::where('user_id', $user->id)
                                                ->whereHas('pilatesClass', function($q) use ($template, $monthStart, $monthEnd) {
                                                    $q->where('template_id', $template->id)
                                                      ->whereBetween('date', [$monthStart, $monthEnd]);
                                                })
                                                ->where('status', '!=', 'cancelled')
                                                ->count();
                                            if ($monthBookings >= $monthlyLimit) {
                                                $reason = __('app.user_monthly_limit_reached', ['name' => $user->name, 'limit' => $monthlyLimit]);
                                                break;
                                            }
                                        }
                                        if (empty($reason)) {
                                            $canAdd = true;
                                        }
                                    } else {
                                        $canAdd = true;
                                    }
                                }
                            @endphp
                            <option value="{{ $user->id }}" {{ !$canAdd ? 'disabled' : '' }}>
                                {{ $user->name }}
                                @if($activePayment)
                                    - {{ $activePayment->getPaymentTypeLabel() }}
                                @endif
                                @if(!$canAdd && $reason)
                                    ({{ $reason }})
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <p class="mb-4 text-sm text-muted-foreground">{{ __('app.select_multiple_users') }}</p>

                    <label class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_classes') }}</label>
                    <div class="tc-scroll-list border border-border rounded-xl p-3 max-h-64 bg-muted/20 space-y-1">
                        @foreach($classes as $class)
                            <label class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-muted/40 cursor-pointer transition-colors">
                                <input type="checkbox" name="selected_classes[]" value="{{ $class->id }}" class="rounded border-border text-primary focus:ring-primary/30">
                                <div class="min-w-0">
                                    <div class="font-medium text-foreground">{{ $class->date->format('d.m.Y') }} <span class="text-muted-foreground font-normal">({{ $class->date->translatedFormat('l') }})</span></div>
                                    <div class="text-sm text-muted-foreground">
                                        {{ \Carbon\Carbon::parse($class->start_time)->format('H:i') }} – {{ \Carbon\Carbon::parse($class->end_time)->format('H:i') }}
                                        · {{ $class->current_participants }}/{{ $class->max_participants }}
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="tc-bulk-footer mt-6 pt-4 border-t border-border border-dashed">
                    <button type="submit" class="tc-bulk-submit rounded-xl bg-primary text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm">
                        <i class="fas fa-plus shrink-0" aria-hidden="true"></i><span>{{ __('app.add_to_selected_classes') }}</span>
                    </button>
                </div>
            </form>
        </div>

        <!-- Bulk Remove Section -->
        <div x-show="showBulkRemove" x-transition x-cloak class="border-t border-border pt-6 space-y-5">
            <div class="flex flex-wrap gap-3">
                <label class="tc-pill-radio">
                    <input type="radio" name="remove_mode" value="all" x-model="removeMode" class="shrink-0">
                    <span>{{ __('app.remove_from_all_classes') }}</span>
                </label>
                <label class="tc-pill-radio">
                    <input type="radio" name="remove_mode" value="selected" x-model="removeMode" class="shrink-0">
                    <span>{{ __('app.remove_from_selected_classes') }}</span>
                </label>
            </div>

            <form x-show="removeMode === 'all'" action="{{ route('admin.classes.bulk-remove-users', $template) }}" method="POST" class="space-y-4 min-w-0" onsubmit="return confirm('{{ __('app.confirm_remove_users_from_all_classes') }}')">
                @csrf
                @method('DELETE')
                <input type="hidden" name="mode" value="all">
                <div>
                    <label for="bulk_remove_users" class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_users_to_remove') }}</label>
                    <select name="selected_users[]" id="bulk_remove_users" class="w-full rounded-xl border border-border bg-background" multiple>
                        @php
                            $allUsersInClasses = collect();
                            foreach ($classes as $class) {
                                foreach ($class->bookings->where('status', '!=', 'cancelled') as $booking) {
                                    if (!$allUsersInClasses->contains('id', $booking->user->id)) {
                                        $allUsersInClasses->push($booking->user);
                                    }
                                }
                            }
                        @endphp
                        @foreach($allUsersInClasses as $user)
                            <option value="{{ $user->id }}">
                                {{ $user->name }}
                                @php $activePayment = $user->getCurrentPilatesPayment(); @endphp
                                @if($activePayment)
                                    - {{ $activePayment->getPaymentTypeLabel() }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-2 text-sm text-muted-foreground">{{ __('app.select_multiple_users') }}</p>
                </div>
                <div class="tc-bulk-footer mt-6 pt-4 border-t border-border border-dashed">
                    <button type="submit" class="tc-bulk-submit rounded-xl bg-destructive text-xs font-semibold text-destructive-foreground hover:bg-destructive/90 transition-colors shadow-sm">
                        <i class="fas fa-user-minus shrink-0" aria-hidden="true"></i><span>{{ __('app.remove_from_all_classes') }}</span>
                    </button>
                </div>
            </form>

            <form x-show="removeMode === 'selected'" action="{{ route('admin.classes.bulk-remove-users', $template) }}" method="POST" class="space-y-4 min-w-0" onsubmit="return confirm('{{ __('app.confirm_remove_users_from_selected_classes') }}')">
                @csrf
                @method('DELETE')
                <input type="hidden" name="mode" value="selected">
                <div>
                    <label for="selective_remove_users" class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_users_to_remove') }}</label>
                    <select name="selected_users[]" id="selective_remove_users" class="w-full rounded-xl border border-border bg-background mb-4" multiple>
                        @php
                            $allUsersInClasses = collect();
                            foreach ($classes as $class) {
                                foreach ($class->bookings->where('status', '!=', 'cancelled') as $booking) {
                                    if (!$allUsersInClasses->contains('id', $booking->user->id)) {
                                        $allUsersInClasses->push($booking->user);
                                    }
                                }
                            }
                        @endphp
                        @foreach($allUsersInClasses as $user)
                            <option value="{{ $user->id }}">
                                {{ $user->name }}
                                @php $activePayment = $user->getCurrentPilatesPayment(); @endphp
                                @if($activePayment)
                                    - {{ $activePayment->getPaymentTypeLabel() }}
                                @endif
                            </option>
                        @endforeach
                    </select>
                    <p class="mb-4 text-sm text-muted-foreground">{{ __('app.select_multiple_users') }}</p>

                    <label class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_classes') }}</label>
                    <div class="tc-scroll-list border border-border rounded-xl p-3 max-h-64 bg-muted/20 space-y-1">
                        @foreach($classes as $class)
                            <label class="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-muted/40 cursor-pointer transition-colors">
                                <input type="checkbox" name="selected_classes[]" value="{{ $class->id }}" class="rounded border-border text-primary focus:ring-primary/30">
                                <div class="min-w-0">
                                    <div class="font-medium text-foreground">{{ $class->date->format('d.m.Y') }} <span class="text-muted-foreground font-normal">({{ $class->date->translatedFormat('l') }})</span></div>
                                    <div class="text-sm text-muted-foreground">
                                        {{ \Carbon\Carbon::parse($class->start_time)->format('H:i') }} – {{ \Carbon\Carbon::parse($class->end_time)->format('H:i') }}
                                        · {{ $class->current_participants }}/{{ $class->max_participants }}
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="tc-bulk-footer mt-6 pt-4 border-t border-border border-dashed">
                    <button type="submit" class="tc-bulk-submit rounded-xl bg-destructive text-xs font-semibold text-destructive-foreground hover:bg-destructive/90 transition-colors shadow-sm">
                        <i class="fas fa-user-minus shrink-0" aria-hidden="true"></i><span>{{ __('app.remove_from_selected_classes') }}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
    @endif

    @if($classes->count() > 0)
        <div class="space-y-5">
            @foreach($classes as $class)
                <div class="rounded-2xl border border-border bg-card text-card-foreground shadow-sm overflow-hidden" x-data="{ showAddUser: false }">
                    <div class="px-5 sm:px-6 py-4 border-b border-border bg-muted/25">
                        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                            <div class="min-w-0 space-y-1">
                                <div class="text-lg font-bold text-foreground">
                                    {{ $class->date->format('d.m.Y') }}
                                    <span class="font-semibold text-muted-foreground">· {{ $class->date->translatedFormat('l') }}</span>
                                </div>
                                <div class="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
                                    <span><i class="far fa-clock mr-1.5 text-primary/80" aria-hidden="true"></i>{{ \Carbon\Carbon::parse($class->start_time)->format('H:i') }} – {{ \Carbon\Carbon::parse($class->end_time)->format('H:i') }}</span>
                                    @if($class->instructor)
                                        <span><i class="far fa-user mr-1.5 text-primary/80" aria-hidden="true"></i>{{ $class->instructor->name }}</span>
                                    @endif
                                </div>
                            </div>
                            <div class="flex flex-col sm:flex-row sm:items-center gap-4 shrink-0">
                                <div class="rounded-xl border border-border bg-background px-4 py-2 text-center sm:text-left">
                                    <div class="text-xs font-medium text-muted-foreground uppercase tracking-wide">{{ __('app.participants') }}</div>
                                    <div class="text-xl font-bold text-primary tabular-nums">{{ $class->current_participants }}/{{ $class->max_participants }}</div>
                                </div>
                                <div class="flex flex-wrap items-center gap-2">
                                    <a href="{{ route('admin.classes.view', $class) }}"
                                       class="tc-icon-btn no-underline"
                                       title="{{ __('app.view_details') }}">
                                        <i class="fas fa-eye" aria-hidden="true"></i>
                                    </a>
                                    @if($class->current_participants > 0)
                                        <a href="{{ route('admin.classes.attendance', $class) }}"
                                           class="tc-icon-btn no-underline text-accent hover:text-accent"
                                           title="{{ __('app.attendance') }}">
                                            <i class="fas fa-calendar-check" aria-hidden="true"></i>
                                        </a>
                                    @endif
                                    @if(auth()->user()->canEditClass($class))
                                        <a href="{{ route('admin.classes.edit', $class) }}"
                                           class="tc-icon-btn no-underline"
                                           title="{{ __('app.edit') }}">
                                            <i class="fas fa-edit" aria-hidden="true"></i>
                                        </a>
                                    @endif
                                    <button type="button" @click="showAddUser = !showAddUser"
                                            class="inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm">
                                        <i class="fas fa-plus text-[11px]" aria-hidden="true"></i>{{ __('app.add_user') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div x-show="showAddUser" x-transition x-cloak class="px-5 sm:px-6 py-5 border-b border-border bg-muted/15">
                        <form action="{{ route('admin.classes.add-users', $class) }}" method="POST" class="space-y-4">
                            @csrf
                            <div>
                                <label for="user_{{ $class->id }}" class="block text-sm font-semibold text-foreground mb-2">{{ __('app.select_user') }}</label>
                                <select name="selected_users[]" id="user_{{ $class->id }}" class="w-full rounded-xl border border-border bg-background" multiple>
                                    @foreach($users as $user)
                                        @php
                                            $activePayment = $user->getCurrentPilatesPayment();
                                            $canAdd = false;
                                            $reason = '';
                                            if (!$activePayment) {
                                                $reason = __('app.no_active_payment');
                                            } elseif ($activePayment->payment_type === \App\Models\Payment::TYPE_SINGLE_CLASS) {
                                                $existingBookings = \App\Models\PilatesBooking::where('user_id', $user->id)
                                                    ->whereHas('pilatesClass', function($q) use ($template) {
                                                        $q->where('template_id', $template->id)
                                                          ->where('date', '>=', now()->toDateString());
                                                    })
                                                    ->where('status', '!=', 'cancelled')
                                                    ->count();
                                                if ($existingBookings > 0) {
                                                    $reason = __('app.already_has_booking');
                                                } else {
                                                    $canAdd = true;
                                                }
                                            } else {
                                                $monthStart = \Carbon\Carbon::parse($class->date)->startOfMonth();
                                                $monthEnd = \Carbon\Carbon::parse($class->date)->endOfMonth();
                                                $monthlyLimit = $activePayment->payment_type === \App\Models\Payment::TYPE_PACKAGE_2X_WEEKLY ? 9 : 14;
                                                $monthBookings = \App\Models\PilatesBooking::where('user_id', $user->id)
                                                    ->whereHas('pilatesClass', function($q) use ($template, $monthStart, $monthEnd) {
                                                        $q->where('template_id', $template->id)
                                                          ->whereBetween('date', [$monthStart, $monthEnd]);
                                                    })
                                                    ->where('status', '!=', 'cancelled')
                                                    ->count();
                                                if ($monthBookings >= $monthlyLimit) {
                                                    $reason = __('app.user_monthly_limit_reached', ['name' => $user->name, 'limit' => $monthlyLimit]);
                                                } else {
                                                    $weeklyLimit = $activePayment->payment_type === \App\Models\Payment::TYPE_PACKAGE_2X_WEEKLY ? 2 : 3;
                                                    $weekStart = \Carbon\Carbon::parse($class->date)->startOfWeek();
                                                    $weekEnd = \Carbon\Carbon::parse($class->date)->endOfWeek();
                                                    $weekBookings = \App\Models\PilatesBooking::where('user_id', $user->id)
                                                        ->whereHas('pilatesClass', function($q) use ($template, $weekStart, $weekEnd) {
                                                            $q->where('template_id', $template->id)
                                                              ->whereBetween('date', [$weekStart, $weekEnd])
                                                              ->where('date', '>=', now()->toDateString());
                                                        })
                                                        ->where('status', '!=', 'cancelled')
                                                        ->count();
                                                    if ($weekBookings >= $weeklyLimit) {
                                                        $reason = __('app.weekly_limit_reached', ['limit' => $weeklyLimit]);
                                                    } else {
                                                        $existingBooking = \App\Models\PilatesBooking::where('user_id', $user->id)
                                                            ->where('pilates_class_id', $class->id)
                                                            ->where('status', '!=', 'cancelled')
                                                            ->exists();
                                                        if ($existingBooking) {
                                                            $reason = __('app.already_booked');
                                                        } else {
                                                            $canAdd = true;
                                                        }
                                                    }
                                                }
                                            }
                                        @endphp
                                        <option value="{{ $user->id }}" {{ !$canAdd ? 'disabled' : '' }}>
                                            {{ $user->name }}
                                            @if($activePayment)
                                                - {{ $activePayment->getPaymentTypeLabel() }}
                                            @endif
                                            @if(!$canAdd && $reason)
                                                ({{ $reason }})
                                            @endif
                                        </option>
                                    @endforeach
                                </select>
                                <p class="mt-2 text-sm text-muted-foreground">{{ __('app.select_multiple_users') }}</p>
                            </div>
                            <div class="flex justify-end">
                                <button type="submit" class="inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors shadow-sm">
                                    <i class="fas fa-plus" aria-hidden="true"></i>{{ __('app.add_users') }}
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="px-5 sm:px-6 py-5">
                        @if($class->bookings->where('status', '!=', 'cancelled')->count() > 0)
                            <h4 class="text-sm font-bold text-foreground mb-3">{{ __('app.participants') }}</h4>
                            <ul class="space-y-2">
                                @foreach($class->bookings->where('status', '!=', 'cancelled') as $booking)
                                    <li class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 p-3 rounded-xl border border-border bg-muted/10 hover:bg-muted/25 transition-colors">
                                        <div class="flex items-center gap-3 min-w-0">
                                            <div class="w-10 h-10 shrink-0 rounded-full bg-primary/90 flex items-center justify-center text-primary-foreground font-bold text-sm">
                                                {{ substr($booking->user->name, 0, 1) }}
                                            </div>
                                            <div class="min-w-0">
                                                <div class="font-semibold text-foreground truncate">{{ $booking->user->name }}</div>
                                                <div class="text-sm text-muted-foreground truncate">{{ $booking->user->email }}</div>
                                            </div>
                                        </div>
                                        <form action="{{ route('admin.classes.remove-user', ['class' => $class, 'user' => $booking->user]) }}"
                                              method="POST"
                                              class="shrink-0"
                                              onsubmit="return confirm('{{ __('app.confirm_remove_user') }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="w-full sm:w-auto inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-destructive/30 px-3 text-xs font-semibold text-destructive hover:bg-destructive/10 transition-colors">
                                                <i class="fas fa-times" aria-hidden="true"></i>{{ __('app.remove') }}
                                            </button>
                                        </form>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <div class="text-center py-10 text-muted-foreground rounded-xl border border-dashed border-border bg-muted/10">
                                <i class="fas fa-users text-3xl mb-3 opacity-40" aria-hidden="true"></i>
                                <p class="text-sm font-medium">{{ __('app.no_participants_yet') }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="rounded-2xl border border-border bg-card text-card-foreground shadow-sm p-10 sm:p-14 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-muted/50 text-muted-foreground mb-5">
                <i class="fas fa-calendar-times text-2xl" aria-hidden="true"></i>
            </div>
            <h3 class="text-xl sm:text-2xl font-bold text-foreground mb-2">{{ __('app.no_future_classes') }}</h3>
            <p class="text-muted-foreground mb-8 max-w-md mx-auto">{{ __('app.generate_schedule_first') }}</p>
            <a href="{{ route('admin.classes.generate', $template) }}"
               class="inline-flex h-9 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors no-underline shadow-sm">
                <i class="fas fa-calendar-plus" aria-hidden="true"></i>{{ __('app.generate_schedule') }}
            </a>
        </div>
    @endif
</div>
</section>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    function initSelect2() {
        document.querySelectorAll('#template-classes-root select[name="selected_users[]"]').forEach(function(select) {
            if (jQuery(select).hasClass('select2-hidden-accessible')) {
                jQuery(select).select2('destroy');
            }
            jQuery(select).select2({
                placeholder: @json(__('app.select_users')),
                allowClear: true,
                width: '100%',
                dropdownParent: jQuery('#template-classes-root'),
            });
        });
    }
    initSelect2();
});
</script>
@endpush
@endsection