@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-shopping-cart text-warning"></i>
                    طلبات الاسترداد
                </h1>
                <a href="{{ route('admin.points.dashboard') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-right"></i> العودة للوحة التحكم
                </a>
            </div>
        </div>
    </div>

    <!-- فلاتر -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-body">
                    <form method="GET" class="row g-3">
                        <div class="col-md-3">
                            <label for="status" class="form-label">الحالة</label>
                            <select class="form-select" id="status" name="status">
                                <option value="">جميع الحالات</option>
                                <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>معلق</option>
                                <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>موافق</option>
                                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>مرفوض</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="date_from" class="form-label">من تاريخ</label>
                            <input type="date" class="form-control" id="date_from" name="date_from" value="{{ request('date_from') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="date_to" class="form-label">إلى تاريخ</label>
                            <input type="date" class="form-control" id="date_to" name="date_to" value="{{ request('date_to') }}">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> بحث
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- إحصائيات سريعة -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-left-warning 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-warning text-uppercase mb-1">
                                المعلقة
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $redemptions->where('status', 'pending')->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clock fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <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">
                                {{ $redemptions->where('status', 'approved')->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-danger 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-danger text-uppercase mb-1">
                                المرفوضة
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $redemptions->where('status', 'rejected')->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-times fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-info 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-info text-uppercase mb-1">
                                إجمالي الطلبات
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                {{ $redemptions->total() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart 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($redemptions->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>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($redemptions as $index => $redemption)
                                <tr>
                                    <td>{{ $redemptions->firstItem() + $index }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="mr-2">
                                                <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                    <span class="text-white font-weight-bold">{{ substr($redemption->user->name, 0, 1) }}</span>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="font-weight-bold">{{ $redemption->user->name }}</div>
                                                <small class="text-muted">{{ $redemption->user->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <div class="font-weight-bold">{{ $redemption->reward->name_ar }}</div>
                                            <small class="text-muted">{{ $redemption->reward->name }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge badge-warning badge-lg">{{ number_format($redemption->points_used) }}</span>
                                    </td>
                                    <td>
                                        @switch($redemption->status)
                                            @case('pending')
                                                <span class="badge badge-warning">معلق</span>
                                                @break
                                            @case('approved')
                                                <span class="badge badge-success">موافق</span>
                                                @break
                                            @case('rejected')
                                                <span class="badge badge-danger">مرفوض</span>
                                                @break
                                            @default
                                                <span class="badge badge-secondary">{{ $redemption->status }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $redemption->created_at->format('Y-m-d H:i') }}</small>
                                    </td>
                                    <td>
                                        @if($redemption->status === 'pending')
                                            <div class="btn-group btn-group-sm">
                                                <button class="btn btn-success" onclick="processRedemption({{ $redemption->id }}, 'approve')">
                                                    <i class="fas fa-check"></i> موافقة
                                                </button>
                                                <button class="btn btn-danger" onclick="processRedemption({{ $redemption->id }}, 'reject')">
                                                    <i class="fas fa-times"></i> رفض
                                                </button>
                                            </div>
                                        @else
                                            <div class="btn-group btn-group-sm">
                                                <button class="btn btn-outline-info" onclick="viewRedemptionDetails({{ $redemption->id }})">
                                                    <i class="fas fa-eye"></i> تفاصيل
                                                </button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $redemptions->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-shopping-cart fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">لا توجد طلبات استرداد</h5>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal معالجة طلب الاسترداد -->
<div class="modal fade" id="processModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="processForm" 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">
                    <input type="hidden" id="redemption_id" name="redemption_id">
                    <input type="hidden" id="action" name="action">
                    
                    <div class="mb-3">
                        <label for="notes" class="form-label">ملاحظات (اختياري)</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="أضف ملاحظات حول معالجة الطلب..."></textarea>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>ملاحظة:</strong> في حالة الرفض، سيتم إرجاع النقاط للمستخدم تلقائياً.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">تطبيق</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal تفاصيل طلب الاسترداد -->
<div class="modal fade" id="detailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <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" id="redemptionDetails">
                <div class="text-center">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">جاري التحميل...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function processRedemption(redemptionId, action) {
    document.getElementById('redemption_id').value = redemptionId;
    document.getElementById('action').value = action;
    document.getElementById('processForm').action = '{{ route("admin.points.redemptions.process") }}';
    
    const submitBtn = document.getElementById('submitBtn');
    if (action === 'approve') {
        submitBtn.textContent = 'موافقة';
        submitBtn.className = 'btn btn-success';
    } else {
        submitBtn.textContent = 'رفض';
        submitBtn.className = 'btn btn-danger';
    }
    
    new bootstrap.Modal(document.getElementById('processModal')).show();
}

function viewRedemptionDetails(redemptionId) {
    fetch(`/admin/points/redemptions/${redemptionId}`)
        .then(response => response.text())
        .then(html => {
            document.getElementById('redemptionDetails').innerHTML = html;
            new bootstrap.Modal(document.getElementById('detailsModal')).show();
        })
        .catch(error => {
            document.getElementById('redemptionDetails').innerHTML = '<div class="alert alert-danger">خطأ في تحميل التفاصيل</div>';
            new bootstrap.Modal(document.getElementById('detailsModal')).show();
        });
}
</script>
@endpush