@extends('layouts.app')

@section('content')
    <div class="container">
        <h1 class="mb-4">إدارة القاعات</h1>

        {{-- كروت إحصاء --}}
        <div class="row mb-3">
            <x-stat-card title="القاعات" :value="$stats['total']" color="success" icon="fa fa-ravelry" />
            <x-stat-card title="القاعات المحذوفة" :value="$stats['deleted']" color="danger" icon="fa fa-ravelry" />
        </div>

        {{-- بحث --}}
        <form class="mb-3">
            <div class="input-group">
                <input type="text" name="search" class="form-control" value="{{ request('search') }}"
                    placeholder="ابحث عن قاعة...">
                <button class="btn btn-primary">بحث</button>
            </div>
        </form>

        {{-- زر إضافة --}}
        <button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#createModal">
            <i class="fa fa-plus"></i> إضافة قاعة
        </button>

        {{-- جدول --}}
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th><a href="?sort=id&direction={{ request('direction') === 'asc' ? 'desc' : 'asc' }}">#</a></th>
                    <th><a href="?sort=name&direction={{ request('direction') === 'asc' ? 'desc' : 'asc' }}">الاسم</a></th>
                    <th>الوصف</th>
                    <th>الإجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($classRooms as $room)
                    <tr>
                        <td>{{ $room->id }}</td>
                        <td>{{ $room->name }}</td>
                        <td>{{ $room->description }}</td>
                        <td>
                            {{-- عرض --}}
                            <button class="btn btn-info btn-sm" data-bs-toggle="modal"
                                data-bs-target="#showModal{{ $room->id }}">
                                <i class="fa fa-eye"></i>
                            </button>
                            {{-- تعديل --}}
                            <button class="btn btn-warning btn-sm" data-bs-toggle="modal"
                                data-bs-target="#editModal{{ $room->id }}">
                                <i class="fa fa-edit"></i>
                            </button>
                            {{-- حذف --}}
                            <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                data-bs-target="#deleteModal{{ $room->id }}">
                                <i class="fa fa-trash"></i>
                            </button>
                        </td>
                    </tr>

                    @include('dashboard.class_rooms.modals.show', ['room' => $room])
                    @include('dashboard.class_rooms.modals.edit', ['room' => $room])
                    @include('dashboard.class_rooms.modals.delete', ['room' => $room])
                @empty
                    <tr>
                        <td colspan="4">لا توجد قاعات.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        {{ $classRooms->links() }}
    </div>

    @include('dashboard.class_rooms.modals.create')
@endsection