@php
    $schedule = json_decode($section->getSetting('schedule_data', '[]'), true) ?? [];
    $days = ['السبت', 'الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة'];
@endphp

<div class="site-section site-section--alt">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'مواعيد التدريب' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        @if(count($schedule))
            <div class="overflow-x-auto reveal bg-white rounded-xl shadow-sm border border-gray-200">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-200 bg-gray-50">
                            <th class="py-3 px-4 text-start text-gray-600 font-medium">اليوم</th>
                            <th class="py-3 px-4 text-start text-gray-600 font-medium">النشاط</th>
                            <th class="py-3 px-4 text-start text-gray-600 font-medium">الوقت</th>
                            <th class="py-3 px-4 text-start text-gray-600 font-medium">الفرع</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($schedule as $row)
                            <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                <td class="py-3 px-4 text-gray-900 font-medium">{{ $row['day'] ?? '' }}</td>
                                <td class="py-3 px-4 text-gray-600">{{ $row['activity'] ?? '' }}</td>
                                <td class="py-3 px-4 text-gray-600" dir="ltr">{{ $row['time'] ?? '' }}</td>
                                <td class="py-3 px-4 text-gray-600">{{ $row['branch'] ?? '' }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @else
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="p-4 space-y-3">
                    @for($i = 0; $i < 4; $i++)
                        <div class="flex items-center gap-4">
                            <div class="skeleton-block h-4 w-16"></div>
                            <div class="skeleton-block h-4 w-24"></div>
                            <div class="skeleton-block h-4 w-20"></div>
                            <div class="skeleton-block h-4 w-16"></div>
                        </div>
                    @endfor
                </div>
            </div>
            <div class="empty-state mt-4">
                <p class="text-sm">لم تُضف مواعيد بعد</p>
            </div>
        @endif
    </div>
</div>
