@extends('layouts.app')

@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
@endphp

@section('title', $isRtl ? 'حجوزات الحصص' : 'Class Bookings')

@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 Bookings' }}</h1>
                <p class="text-slate-500 mt-1">{{ $isRtl ? 'إدارة الحجوزات والحضور' : 'Manage bookings and attendance' }}</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>
        </div>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 p-6">
        <form method="GET" class="flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'التاريخ' : 'Date' }}</label>
                <input type="date" name="date" value="{{ request('date', now()->format('Y-m-d')) }}"
                       class="px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
            </div>
            <div class="min-w-[240px] flex-1">
                <label class="block text-sm font-bold text-slate-700 mb-2">{{ $isRtl ? 'الحصة' : 'Class' }}</label>
                <select name="class_id" class="w-full px-4 py-3 bg-slate-50 border-2 border-slate-200 rounded-xl">
                    <option value="">{{ $isRtl ? 'الكل' : 'All' }}</option>
                    @foreach($classes as $c)
                        <option value="{{ $c->id }}" {{ (string)request('class_id') === (string)$c->id ? 'selected' : '' }}>
                            {{ $isRtl && $c->name_ar ? $c->name_ar : $c->name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex gap-3">
                <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl font-semibold transition-colors">
                    <i data-lucide="filter" class="w-5 h-5"></i>
                    {{ $isRtl ? 'فلترة' : 'Filter' }}
                </button>
                <a href="{{ route('classes.bookings') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors">
                    <i data-lucide="rotate-ccw" class="w-5 h-5"></i>
                    {{ $isRtl ? 'إعادة ضبط' : 'Reset' }}
                </a>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-3xl border-2 border-slate-200 overflow-hidden">
        <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 ? 'التاريخ' : 'Date' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'الحصة' : 'Class' }}</th>
                        <th class="text-{{ $isRtl ? 'right' : 'left' }} px-6 py-4 font-bold">{{ $isRtl ? 'العضو' : 'Member' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'الحالة' : 'Status' }}</th>
                        <th class="text-center px-6 py-4 font-bold">{{ $isRtl ? 'إجراءات' : 'Actions' }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($bookings as $booking)
                        @php
                            $statusColors = [
                                'booked' => 'bg-blue-100 text-blue-700',
                                'attended' => 'bg-emerald-100 text-emerald-700',
                                'cancelled' => 'bg-rose-100 text-rose-700',
                            ];
                            $statusLabels = [
                                'booked' => $isRtl ? 'محجوز' : 'Booked',
                                'attended' => $isRtl ? 'حضر' : 'Attended',
                                'cancelled' => $isRtl ? 'ملغي' : 'Cancelled',
                            ];
                        @endphp
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-6 py-4 text-sm text-slate-700">{{ $booking->booking_date?->format('Y-m-d') ?? '—' }}</td>
                            <td class="px-6 py-4">
                                <p class="font-bold text-slate-800">
                                    {{ $isRtl && ($booking->classSchedule->gymClass->name_ar ?? null) ? $booking->classSchedule->gymClass->name_ar : ($booking->classSchedule->gymClass->name ?? '—') }}
                                </p>
                                <p class="text-xs text-slate-400 mt-1 font-mono">
                                    {{ $booking->classSchedule->start_time ? \Carbon\Carbon::parse($booking->classSchedule->start_time)->format('H:i') : '—' }}
                                    -
                                    {{ $booking->classSchedule->end_time ? \Carbon\Carbon::parse($booking->classSchedule->end_time)->format('H:i') : '—' }}
                                </p>
                            </td>
                            <td class="px-6 py-4">
                                <p class="font-bold text-slate-800">{{ $booking->member->full_name ?? '—' }}</p>
                                <p class="text-xs text-slate-400 mt-1 font-mono">{{ $booking->member->member_id ?? '' }}</p>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-3 py-1.5 rounded-full text-xs font-bold {{ $statusColors[$booking->status] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ $statusLabels[$booking->status] ?? $booking->status }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-center gap-2">
                                    @if($booking->status === 'booked')
                                        <form action="{{ route('classes.mark-attended', $booking) }}" method="POST" onsubmit="return confirm('{{ $isRtl ? 'تسجيل حضور؟' : 'Mark attended?' }}')">
                                            @csrf
                                            <button type="submit" class="p-2 bg-emerald-100 hover:bg-emerald-200 rounded-xl transition-colors">
                                                <i data-lucide="check" class="w-4 h-4 text-emerald-700"></i>
                                            </button>
                                        </form>
                                        <form action="{{ route('classes.cancel-booking', $booking) }}" method="POST" onsubmit="return confirm('{{ $isRtl ? 'إلغاء الحجز؟' : 'Cancel booking?' }}')">
                                            @csrf
                                            <button type="submit" class="p-2 bg-rose-100 hover:bg-rose-200 rounded-xl transition-colors">
                                                <i data-lucide="x" class="w-4 h-4 text-rose-700"></i>
                                            </button>
                                        </form>
                                    @else
                                        <span class="text-slate-400 text-sm">—</span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-16 text-center text-slate-500">{{ $isRtl ? 'لا توجد حجوزات' : 'No bookings found' }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($bookings->hasPages())
            <div class="px-6 py-4 border-t-2 border-slate-200">
                {{ $bookings->withQueryString()->links() }}
            </div>
        @endif
    </div>
</div>
@endsection