@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-share-alt text-info"></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="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>مكتمل</option>
                                <option value="expired" {{ request('status') == 'expired' ? '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-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">
                                {{ $referrals->total() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-share-alt 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">
                                {{ $referrals->where('status', 'completed')->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-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">
                                {{ $referrals->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-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">
                                {{ $referrals->where('status', 'expired')->count() }}
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-exclamation-triangle 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($referrals->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($referrals as $index => $referral)
                                <tr>
                                    <td>{{ $referrals->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: 35px; height: 35px;">
                                                    <span class="text-white font-weight-bold">{{ substr($referral->referrer->name, 0, 1) }}</span>
                                                </div>
                                            </div>
                                            <div>
                                                <div class="font-weight-bold">{{ $referral->referrer->name }}</div>
                                                <small class="text-muted">{{ $referral->referrer->email }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @if($referral->referred)
                                            <div class="d-flex align-items-center">
                                                <div class="mr-2">
                                                    <div class="bg-success rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px;">
                                                        <span class="text-white font-weight-bold">{{ substr($referral->referred->name, 0, 1) }}</span>
                                                    </div>
                                                </div>
                                                <div>
                                                    <div class="font-weight-bold">{{ $referral->referred->name }}</div>
                                                    <small class="text-muted">{{ $referral->referred->email }}</small>
                                                </div>
                                            </div>
                                        @else
                                            <span class="text-muted">لم يتم التسجيل بعد</span>
                                        @endif
                                    </td>
                                    <td>
                                        <code class="bg-light p-1 rounded">{{ $referral->referral_code }}</code>
                                    </td>
                                    <td>
                                        <span class="badge badge-success badge-lg">{{ number_format($referral->points_earned) }}</span>
                                    </td>
                                    <td>
                                        @switch($referral->status)
                                            @case('pending')
                                                <span class="badge badge-warning">معلق</span>
                                                @break
                                            @case('completed')
                                                <span class="badge badge-success">مكتمل</span>
                                                @break
                                            @case('expired')
                                                <span class="badge badge-danger">منتهي الصلاحية</span>
                                                @break
                                            @default
                                                <span class="badge badge-secondary">{{ $referral->status }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <small class="text-muted">{{ $referral->created_at->format('Y-m-d H:i') }}</small>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ $referral->expires_at ? $referral->expires_at->format('Y-m-d H:i') : 'غير محدد' }}
                                        </small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-info" onclick="viewReferralDetails({{ $referral->id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            @if($referral->status === 'pending')
                                                <button class="btn btn-outline-success" onclick="completeReferral({{ $referral->id }})">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            @endif
                                            <button class="btn btn-outline-danger" onclick="deleteReferral({{ $referral->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $referrals->links() }}
                </div>
            @else
                <div class="text-center py-5">
                    <i class="fas fa-share-alt fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">لا توجد إحالات</h5>
                </div>
            @endif
        </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="referralDetails">
                <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 viewReferralDetails(referralId) {
    fetch(`/admin/points/referrals/${referralId}`)
        .then(response => response.text())
        .then(html => {
            document.getElementById('referralDetails').innerHTML = html;
            new bootstrap.Modal(document.getElementById('detailsModal')).show();
        })
        .catch(error => {
            document.getElementById('referralDetails').innerHTML = '<div class="alert alert-danger">خطأ في تحميل التفاصيل</div>';
            new bootstrap.Modal(document.getElementById('detailsModal')).show();
        });
}

function completeReferral(referralId) {
    if (confirm('هل أنت متأكد من إكمال هذه الإحالة؟')) {
        fetch(`/admin/points/referrals/${referralId}/complete`, {
            method: 'POST',
            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('خطأ في إكمال الإحالة: ' + data.message);
            }
        })
        .catch(error => {
            alert('خطأ في إكمال الإحالة');
        });
    }
}

function deleteReferral(referralId) {
    if (confirm('هل أنت متأكد من حذف هذه الإحالة؟ هذا الإجراء لا يمكن التراجع عنه.')) {
        fetch(`/admin/points/referrals/${referralId}`, {
            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('خطأ في حذف الإحالة');
        });
    }
}
</script>
@endpush