@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
    $currency = \App\Models\Setting::currencyLabel($locale);

    $dayLabels = [
        'sunday' => $isRtl ? 'الأحد' : 'Sunday',
        'monday' => $isRtl ? 'الاثنين' : 'Monday',
        'tuesday' => $isRtl ? 'الثلاثاء' : 'Tuesday',
        'wednesday' => $isRtl ? 'الأربعاء' : 'Wednesday',
        'thursday' => $isRtl ? 'الخميس' : 'Thursday',
        'friday' => $isRtl ? 'الجمعة' : 'Friday',
        'saturday' => $isRtl ? 'السبت' : 'Saturday',
    ];
@endphp

@section('title', ($isRtl ? 'تفاصيل الحصة' : 'Class Details') . ' - ' . ($isRtl && $gymClass->name_ar ? $gymClass->name_ar : $gymClass->name))

@section('content')
<div class="space-y-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div class="flex items-center gap-3">
            <a href="{{ route('classes.index') }}" class="p-2 hover:bg-slate-100 rounded-xl transition-colors">
                <i data-lucide="arrow-{{ $isRtl ? 'right' : 'left' }}" class="w-5 h-5 text-slate-600"></i>
            </a>
            <div>
                <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'تفاصيل الحصة' : 'Class Details' }}</h1>
                <p class="text-slate-500 mt-1">{{ $isRtl && $gymClass->name_ar ? $gymClass->name_ar : $gymClass->name }}</p>
            </div>
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('classes.schedule') }}" class="inline-flex items-center gap-2 px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="calendar" class="w-5 h-5"></i>
                {{ $isRtl ? 'الجدول' : 'Schedule' }}
            </a>
            <a href="{{ route('classes.bookings') }}" class="inline-flex items-center gap-2 px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                <i data-lucide="ticket" class="w-5 h-5"></i>
                {{ $isRtl ? 'الحجوزات' : 'Bookings' }}
            </a>
            <a href="{{ route('classes.edit', $gymClass) }}" class="inline-flex items-center gap-2 px-5 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold shadow-lg shadow-blue-500/20 transition-all">
                <i data-lucide="pencil" class="w-5 h-5"></i>
                {{ $isRtl ? 'تعديل' : 'Edit' }}
            </a>
            <form action="{{ route('classes.destroy', $gymClass) }}" method="POST" onsubmit="return confirm('{{ $isRtl ? 'حذف الحصة؟' : 'Delete this class?' }}')">
                @csrf
                @method('DELETE')
                <button type="submit" class="inline-flex items-center gap-2 px-5 py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-xl font-semibold shadow-lg shadow-rose-500/20 transition-all">
                    <i data-lucide="trash-2" class="w-5 h-5"></i>
                    {{ $isRtl ? 'حذف' : 'Delete' }}
                </button>
            </form>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-6">
            <div class="flex items-start gap-5">
                <div class="w-16 h-16 rounded-3xl flex items-center justify-center" style="background-color: {{ $gymClass->color ?? '#10b981' }}20;">
                    <i data-lucide="dumbbell" class="w-8 h-8" style="color: {{ $gymClass->color ?? '#10b981' }}"></i>
                </div>
                <div class="flex-1">
                    <div class="flex flex-wrap items-center gap-3">
                        <span class="px-3 py-1.5 rounded-full text-xs font-bold {{ $gymClass->is_active ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-700' }}">
                            {{ $gymClass->is_active ? ($isRtl ? 'نشطة' : 'Active') : ($isRtl ? 'غير نشطة' : 'Inactive') }}
                        </span>
                        <span class="px-3 py-1.5 rounded-full bg-slate-100 text-slate-700 text-xs font-bold">
                            {{ $isRtl ? 'مدرب:' : 'Trainer:' }} {{ $gymClass->trainer?->full_name ?? ($isRtl ? 'بدون' : 'None') }}
                        </span>
                    </div>
                    @if($gymClass->description)
                        <p class="text-slate-700 mt-4 leading-relaxed">{{ $gymClass->description }}</p>
                    @endif
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'السعر' : 'Price' }}</p>
                    <p class="text-2xl font-black text-slate-800">{{ number_format((float)$gymClass->price, 2) }} <span class="text-xs text-slate-500">{{ $currency }}</span></p>
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'المدة' : 'Duration' }}</p>
                    <p class="text-2xl font-black text-slate-800">{{ $gymClass->duration_minutes }} <span class="text-xs text-slate-500">{{ $isRtl ? 'دقيقة' : 'min' }}</span></p>
                </div>
                <div class="p-4 bg-slate-50 rounded-2xl border border-slate-200">
                    <p class="text-xs text-slate-500 mb-1">{{ $isRtl ? 'السعة' : 'Capacity' }}</p>
                    <p class="text-2xl font-black text-slate-800">{{ $gymClass->capacity }} <span class="text-xs text-slate-500">{{ $isRtl ? 'عضو' : 'members' }}</span></p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-3xl border-2 border-slate-200 p-8 space-y-6">
            <h2 class="text-lg font-black text-slate-800">{{ $isRtl ? 'إضافة موعد' : 'Add Schedule' }}</h2>
            <form action="{{ route('classes.add-schedule', $gymClass) }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'اليوم' : 'Day' }} *</label>
                    <select name="day_of_week" required
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        @foreach(array_keys($dayLabels) as $d)
                            <option value="{{ $d }}">{{ $dayLabels[$d] }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'من' : 'Start' }} *</label>
                        <input type="time" name="start_time" required
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'إلى' : 'End' }} *</label>
                        <input type="time" name="end_time" required
                               class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'القاعة' : 'Room' }}</label>
                    <input type="text" name="room" value="{{ old('room') }}"
                           class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                </div>
                <div>
                    <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'مدرب الموعد (اختياري)' : 'Schedule Trainer (optional)' }}</label>
                    <select name="trainer_id"
                            class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 outline-none transition-all">
                        <option value="">{{ $isRtl ? 'افتراضي (مدرب الحصة)' : 'Default (class trainer)' }}</option>
                        @foreach($trainers as $t)
                            <option value="{{ $t->id }}" {{ $gymClass->trainer_id == $t->id ? 'selected' : '' }}>
                                {{ $t->full_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold shadow-lg shadow-emerald-500/20 transition-all">
                    <i data-lucide="plus" class="w-5 h-5"></i>
                    {{ $isRtl ? 'إضافة' : 'Add' }}
                </button>
            </form>
        </div>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <div class="p-6 border-b-2 border-slate-200 flex items-center justify-between">
            <div>
                <h2 class="text-xl font-black text-slate-800">{{ $isRtl ? 'المواعيد' : 'Schedules' }}</h2>
                <p class="text-slate-500 text-sm mt-1">{{ $isRtl ? 'مواعيد الحصة خلال الأسبوع' : 'Weekly schedule' }}</p>
            </div>
            <span class="text-sm text-slate-500">{{ $gymClass->schedules->count() }} {{ $isRtl ? 'موعد' : 'schedules' }}</span>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-100 text-slate-700 text-sm">
                    <tr>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'اليوم' : 'Day' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الوقت' : 'Time' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'القاعة' : 'Room' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'المدرب' : 'Trainer' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'إجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($gymClass->schedules as $schedule)
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4 font-bold text-slate-800">{{ $dayLabels[$schedule->day_of_week] ?? $schedule->day_of_week }}</td>
                            <td class="px-6 py-4 text-sm text-slate-700 font-mono">
                                {{ $schedule->start_time ? \Carbon\Carbon::parse($schedule->start_time)->format('H:i') : '—' }}
                                -
                                {{ $schedule->end_time ? \Carbon\Carbon::parse($schedule->end_time)->format('H:i') : '—' }}
                            </td>
                            <td class="px-6 py-4 text-sm text-slate-700">{{ $schedule->room ?? '—' }}</td>
                            <td class="px-6 py-4 text-sm text-slate-700">{{ $schedule->trainer?->full_name ?? ($gymClass->trainer?->full_name ?? '—') }}</td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    <form action="{{ route('classes.remove-schedule', $schedule) }}" method="POST" onsubmit="return confirm('{{ $isRtl ? 'حذف الموعد؟' : 'Remove this schedule?' }}')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 bg-rose-100 hover:bg-rose-200 rounded-xl transition-colors">
                                            <i data-lucide="trash-2" class="w-4 h-4 text-rose-700"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-16 text-center text-slate-500">
                                {{ $isRtl ? 'لا توجد مواعيد' : 'No schedules yet' }}
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection