@extends('admin.layouts.app')

@section('title', 'إدارة المكافآت')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0 text-gray-800">
                    <i class="fas fa-gift text-success"></i>
                    إدارة المكافآت
                </h1>
                <div class="btn-group">
                    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#rewardModal">
                        <i class="fas fa-plus"></i> إضافة مكافأة
                    </button>
                    <a href="{{ route('admin.points.dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-right"></i> العودة للوحة التحكم
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات سريعة -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                إجمالي المكافآت
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $rewards->total() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-gift fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- جدول المكافآت -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">قائمة المكافآت</h6>
        </div>
        <div class="card-body">
            @if($rewards->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>#</th>
                                <th>المكافأة</th>
                                <th>النوع</th>
                                <th>النقاط المطلوبة</th>
                                <th>القيمة</th>
                                <th>الحالة</th>
                                <th>الحد الأقصى</th>
                                <th>صالح حتى</th>
                                <th>الإجراءات</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($rewards as $index => $reward)
                                <tr>
                                    <td>{{ $rewards->firstItem() + $index }}</td>
                                    <td>
                                        <div>
                                            <div class="font-weight-bold">{{ $reward->name_ar }}</div>
                                            <small class="text-muted">{{ $reward->name }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @switch($reward->type)
                                            @case('discount')
                                                <span class="badge badge-info">خصم</span>
                                                @break
                                            @case('cash')
                                                <span class="badge badge-success">نقدي</span>
                                                @break
                                            @case('free_service')
                                                <span class="badge badge-warning">خدمة مجانية</span>
                                                @break
                                            @case('product')
                                                <span class="badge badge-primary">منتج</span>
                                                @break
                                            @default
                                                <span class="badge badge-secondary">{{ $reward->type }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <span class="badge badge-primary badge-lg">{{ number_format($reward->points_required) }}</span>
                                    </td>
                                    <td>
                                        @if($reward->value)
                                            <span class="font-weight-bold">{{ number_format($reward->value) }} {{ $reward->currency }}</span>
                                        @else
                                            <span class="text-muted">-</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($reward->is_active)
                                            <span class="badge badge-success">نشط</span>
                                        @else
                                            <span class="badge badge-danger">غير نشط</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($reward->max_redemptions)
                                            <span class="badge badge-info">{{ number_format($reward->max_redemptions) }}</span>
                                        @else
                                            <span class="text-muted">غير محدود</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($reward->valid_until)
                                            <small class="text-muted">{{ $reward->valid_until->format('Y-m-d') }}</small>
                                        @else
                                            <span class="text-muted">غير محدود</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary" onclick="editReward({{ $reward->id }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-outline-{{ $reward->is_active ? 'warning' : 'success' }}" 
                                                    onclick="toggleReward({{ $reward->id }}, {{ $reward->is_active ? 'false' : 'true' }})">
                                                <i class="fas fa-{{ $reward->is_active ? 'pause' : 'play' }}"></i>
                                            </button>
                                            <button class="btn btn-outline-danger" onclick="deleteReward({{ $reward->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $rewards->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-gift fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">لا توجد مكافآت</h5>
                    <p class="text-muted">ابدأ بإضافة مكافأة جديدة للمستخدمين</p>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal إضافة/تعديل مكافأة -->
<div class="modal fade" id="rewardModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ route('admin.points.rewards.save') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">إضافة مكافأة جديدة</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name" class="form-label">الاسم (إنجليزي)</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name_ar" class="form-label">الاسم (عربي)</label>
                                <input type="text" class="form-control" id="name_ar" name="name_ar" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="type" class="form-label">نوع المكافأة</label>
                                <select class="form-select" id="type" name="type" required>
                                    <option value="discount">خصم</option>
                                    <option value="cash">نقدي</option>
                                    <option value="free_service">خدمة مجانية</option>
                                    <option value="product">منتج</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="points_required" class="form-label">النقاط المطلوبة</label>
                                <input type="number" class="form-control" id="points_required" name="points_required" min="1" required>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="value" class="form-label">القيمة</label>
                                <input type="number" class="form-control" id="value" name="value" min="0" step="0.01">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="currency" class="form-label">العملة</label>
                                <select class="form-select" id="currency" name="currency">
                                    <option value="IQD">دينار عراقي</option>
                                    <option value="USD">دولار أمريكي</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_redemptions" class="form-label">الحد الأقصى للاسترداد</label>
                                <input type="number" class="form-control" id="max_redemptions" name="max_redemptions" min="1">
                                <div class="form-text">اتركه فارغاً للحد غير المحدود</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="valid_until" class="form-label">صالح حتى</label>
                                <input type="date" class="form-control" id="valid_until" name="valid_until">
                                <div class="form-text">اتركه فارغاً للصلاحية غير المحدودة</div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="description" class="form-label">الوصف (إنجليزي)</label>
                                <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="description_ar" class="form-label">الوصف (عربي)</label>
                                <textarea class="form-control" id="description_ar" name="description_ar" rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                            <label class="form-check-label" for="is_active">
                                مكافأة نشطة
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-success">حفظ المكافأة</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function editReward(rewardId) {
    // جلب بيانات المكافأة وتعبئة النموذج
    fetch(`/admin/points/rewards/${rewardId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('name').value = data.name;
            document.getElementById('name_ar').value = data.name_ar;
            document.getElementById('type').value = data.type;
            document.getElementById('points_required').value = data.points_required;
            document.getElementById('value').value = data.value || '';
            document.getElementById('currency').value = data.currency;
            document.getElementById('max_redemptions').value = data.max_redemptions || '';
            document.getElementById('valid_until').value = data.valid_until || '';
            document.getElementById('description').value = data.description || '';
            document.getElementById('description_ar').value = data.description_ar || '';
            document.getElementById('is_active').checked = data.is_active;
            
            // إضافة معرف المكافأة للنموذج
            const form = document.querySelector('#rewardModal form');
            if (!form.querySelector('input[name="id"]')) {
                const idInput = document.createElement('input');
                idInput.type = 'hidden';
                idInput.name = 'id';
                idInput.value = rewardId;
                form.appendChild(idInput);
            } else {
                form.querySelector('input[name="id"]').value = rewardId;
            }
            
            document.querySelector('#rewardModal .modal-title').textContent = 'تعديل المكافأة';
            new bootstrap.Modal(document.getElementById('rewardModal')).show();
        })
        .catch(error => {
            alert('خطأ في تحميل بيانات المكافأة');
        });
}

function toggleReward(rewardId, isActive) {
    if (confirm(`هل أنت متأكد من ${isActive === 'true' ? 'تفعيل' : 'إلغاء تفعيل'} هذه المكافأة؟`)) {
        fetch(`/admin/points/rewards/${rewardId}/toggle`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ is_active: isActive === 'true' })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('خطأ في تحديث المكافأة');
            }
        })
        .catch(error => {
            alert('خطأ في تحديث المكافأة');
        });
    }
}

function deleteReward(rewardId) {
    if (confirm('هل أنت متأكد من حذف هذه المكافأة؟ هذا الإجراء لا يمكن التراجع عنه.')) {
        fetch(`/admin/points/rewards/${rewardId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('خطأ في حذف المكافأة');
            }
        })
        .catch(error => {
            alert('خطأ في حذف المكافأة');
        });
    }
}

// إعادة تعيين النموذج عند إغلاقه
document.getElementById('rewardModal').addEventListener('hidden.bs.modal', function() {
    document.querySelector('#rewardModal form').reset();
    document.querySelector('#rewardModal .modal-title').textContent = 'إضافة مكافأة جديدة';
    const idInput = document.querySelector('input[name="id"]');
    if (idInput) {
        idInput.remove();
    }
});
</script>
@endpush