@extends('layouts.app')
@section('title', 'خصومات الطلاب')
@section('content')
<div class="container">
    <x-header title="إدارة خصومات الطلاب" />
    @canany(['discount.create'])
        <a href="{{ route('discountTypes.create') }}" class="btn btn-success mb-3">
            <i class="fa-solid fa-plus"></i> إضافة خصم
        </a>
    @endcanany

    <x-alert />

    {{-- للعرض على الشاشات الكبيرة --}}
    <div class="table-responsive d-none d-md-block">
        <table class="table table-bordered table-striped table-hover table-sm text-center align-middle">
            <thead>
                <tr class="text-center">
                    <th>#</th>
                    <th>إسم الخصم</th>
                    <th>نسبة الخصم</th>
                    <th>الوصف</th>
                    <th>الحالة</th>
                    @canany(['subject.edit', 'subject.delete'])
                    <th>إجراءات</th>
                    @endcanany
                </tr>
            </thead>
            <tbody>
                @forelse ($discountTypes as $discountType)
                <tr class="text-center">
                    <td>{{ $loop->iteration + ($discountTypes->currentPage() - 1) * $discountTypes->perPage() }}</td>
                    <td>{{ $discountType->name }}</td>
                    <td>{{ $discountType->percentage }}%</td>
                    <td>{{ $discountType->description }}</td>
                    <td>
                        <div>
                            <input type="checkbox"
                                class="btn-check btn-sm toggle-active mx-2"
                                id="discount_desktop_{{ $discountType->id }}" {{-- 🎯 تم التمييز هنا --}}
                                data-id="{{ $discountType->id }}"
                                autocomplete="off"
                                {{ $discountType->status ? 'checked' : '' }}>
                            <label class="btn btn-sm mx-2 {{ $discountType->status ? 'btn-success' : 'btn-secondary' }}" 
                                for="discount_desktop_{{ $discountType->id }}"> {{-- 🎯 تم التمييز هنا --}}
                                {{ $discountType->status ? 'مفعل' : 'غير مفعل' }}
                            </label>
                            <button class="btn-check btn-sm toggle-active mx-2 d-none" type="button" disabled>
                                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                                <span class="visually-hidden" role="status">Loading...</span>
                            </button>
                        </div>
                    </td>

                    @canany(['discount.edit', 'discount.delete'])
                    <td>
                        @canany(['discount.edit'])
                            <a href="{{ route('discountTypes.edit', $discountType->id) }}" class="btn btn-sm btn-warning btn-sm"><i class="fa-regular fa-pen-to-square"></i></a>
                        @endcan
                        @canany(['discount.delete'])
                            <!-- زر الحذف -->
                            <button type="button" class="btn btn-danger btn-sm delete-ajax-trigger" 
                                    data-id="{{ $discountType->id }}"
                                    data-name="{{ $discountType->name . ' - ' . $discountType->percentage . '%' }}"
                                    data-url="/discountTypes"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                            <!-- استدعاء الـ Component -->
                            <x-delete-modal :id="$discountType->id" model="discountTypes" />
                        @endcanany
                    </td>
                    @endcanany
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="text-center">لا يوجد بيانات</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    

    {{-- للعرض على الشاشات الصغيرة --}}
    <div class="d-block d-md-none">
        @forelse ($discountTypes as $discountType)
        <div class="card mb-3">
            <div class="card-body">
                <span class="badge text-bg-dark rounded-pill">{{ $loop->iteration + ($discountTypes->currentPage() - 1) * $discountTypes->perPage() }}</span> <br>
                <strong>إسم الخصم:</strong> {{ $discountType->name }} <br>
                <strong>نسبة الخصم:</strong>{!! $discountType->percentage !!} <br>
                <strong>الوصف:</strong>{!! $discountType->description !!} <br>
                <strong>الحالة:</strong>
                    <div class="d-inline-block align-items-center" style="position: relative; z-index: 10;"> {{-- 💡 z-index لضمان ظهورها فوق أي عنصر مخفي --}}
                        <input type="checkbox"
                            class="btn-check btn-sm toggle-active mx-2"
                            id="discount_mobile_{{ $discountType->id }}" {{-- 🎯 تم التمييز هنا --}}
                            data-id="{{ $discountType->id }}"
                            autocomplete="off"
                            {{ $discountType->status ? 'checked' : '' }}> {{-- تذكير: تأكد هل هي status أم active --}}
                        <label class="btn btn-sm mx-2 {{ $discountType->status ? 'btn-success' : 'btn-secondary' }}" 
                            for="discount_mobile_{{ $discountType->id }}"> {{-- 🎯 تم التمييز هنا --}}
                            {{ $discountType->status ? 'مفعل' : 'غير مفعل' }}
                        </label>
                        <button class="btn-check btn-sm toggle-active mx-2 d-none" type="button" disabled>
                            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                            <span class="visually-hidden" role="status">Loading...</span>
                        </button>
                    </div>
                <br>
                @canany(['discount.edit', 'discount.delete'])
                <div class="d-flex justify-content-evenly mt-3">
                    @canany(['discount.edit'])
                        <a href="{{ route('discountTypes.edit', $discountType->id) }}" class="btn btn-sm btn-warning me-2"><i class="fa-regular fa-pen-to-square"></i> تعديل
                        </a>
                    @endcan
                    @canany(['discount.delete'])
                        <button type="button" class="btn btn-danger btn-smdelete-ajax-trigger" 
                                    data-id="{{ $discountType->id }}"
                                    data-name="{{ $discountType->name . ' - ' . $discountType->percentage . '%' }}"
                                    data-url="/discountTypes"
                                    data-bs-toggle="modal"
                                    data-bs-target="#deleteModal0">
                            <i class="fa-solid fa-trash"></i> حذف
                        </button>
                    @endcanany
                </div>
                @endcanany
            </div>
        </div>
        @empty
        <div class="card mb-3">
            <div class="card-body">
                لا يوجد بيانات
            </div>
        </div>
        @endforelse
    </div>
</div>

<x-pagination :data="$discountTypes" />

@canany(['discount.delete'])
    {{-- مودال واحد يتيم لكل الصفحة --}}
    <x-delete-modal id="0" model="discountTypes" />
@endcanany

<script>
    document.querySelectorAll('.toggle-active').forEach(checkbox => {
        checkbox.addEventListener('change', function () {
            const discountId = this.dataset.id;
            
            // 🎯 التعديل السحري هنا: بنجيب الـ label اللي مع نفس الـ checkbox في نفس الـ Div بتاعه
            // بدل ما ندور بـ querySelector العام اللي بيلقط أول عنصر في الصفحة
            const label = this.parentElement.querySelector('label');
            
            if (!label) return; // حماية في حال عدم وجود الـ label

            // حفظ النص الأصلي والـ classes القديمة لاسترجاعها بدقة عند الخطأ
            const originalText = label.innerHTML;
            const originalClasses = Array.from(label.classList);

            // إظهار spinner
            label.innerHTML = `
                <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
                <span class="visually-hidden">Loading...</span>
            `;
            label.classList.remove('btn-success', 'btn-secondary');
            label.classList.add('btn-primary');

            // إرسال الطلب بالـ AJAX (Fetch)
            fetch(`/discount-types/${discountId}/toggle-active`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    // تحديث النص واللون حسب الحالة الجديدة
                    // 💡 ملحوظة: تأكد هل الـ Controller بيرجع active أم status واضبطها هنا
                    const isActive = data.active !== undefined ? data.active : data.status; 
                    
                    if (isActive) {
                        label.innerHTML = 'مفعل';
                        label.classList.remove('btn-primary', 'btn-secondary');
                        label.classList.add('btn-success');
                    } else {
                        label.innerHTML = 'غير مفعل';
                        label.classList.remove('btn-primary', 'btn-success');
                        label.classList.add('btn-secondary');
                    }
                } else {
                    // لو فيه مشكلة، رجّع الوضع الأصلي بالظبط
                    label.innerHTML = originalText;
                    label.className = originalClasses.join(' ');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                // رجّع الوضع الأصلي لو فيه خطأ
                label.innerHTML = originalText;
                label.className = originalClasses.join(' ');
                alert('حدث خطأ أثناء التحديث');
            });
        });
    });
</script>
@endsection