@extends('layouts.superadmin')
@section('title', 'تفاصيل ' . $honorReward->type_text . ' - ' . $honorReward->title)

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    <!-- Page Header -->
    <div class="mb-6">
        <!-- Breadcrumb -->
        <nav class="flex mb-4" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3 space-x-reverse">
                <li class="inline-flex items-center">
                    <a href="{{ route('superadmin.honors-rewards.index') }}" 
                       class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                        إدارة التكريمات والمكافآت
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-6 h-6 text-gray-400 rotate-180" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="mr-1 text-sm font-medium text-gray-500 md:mr-2 dark:text-gray-400">تفاصيل {{ $honorReward->type_text }}</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                    {{ $honorReward->type_text }} #{{ $honorReward->id }}
                </h1>
                <p class="text-gray-600 dark:text-gray-400">
                    عرض تفصيلي لـ{{ $honorReward->type_text }}: {{ $honorReward->title }}
                </p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2">
              
           
            

             

                <a href="{{ route('superadmin.honors-rewards.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    العودة للقائمة
                </a>
            </div>
        </div>
    </div>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column - Main Details -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Honor/Reward Details Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                            تفاصيل {{ $honorReward->type_text }}
                        </h2>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                            @if($honorReward->status === 'active') bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200
                            @elseif($honorReward->status === 'completed') bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200
                            @else bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200 @endif">
                            {{ $honorReward->status_text }}
                        </span>
                    </div>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <!-- Title -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">العنوان</label>
                            <p class="text-lg font-medium text-gray-900 dark:text-white">{{ $honorReward->title }}</p>
                        </div>

                        <!-- Reason -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">سبب {{ $honorReward->type_text }}</label>
                            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border-r-4 border-blue-500">
                                <p class="text-gray-900 dark:text-gray-100 leading-relaxed">{{ $honorReward->reason }}</p>
                            </div>
                        </div>

                        <!-- Additional Notes -->
                        @if($honorReward->additional_notes)
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ملاحظات إضافية</label>
                                <div class="bg-yellow-50 dark:bg-yellow-900/20 rounded-lg p-4 border-r-4 border-yellow-500">
                                    <p class="text-gray-900 dark:text-gray-100 leading-relaxed">{{ $honorReward->additional_notes }}</p>
                                </div>
                            </div>
                        @endif

                        <!-- Rewards Information -->
                        @if($honorReward->points_amount || $honorReward->rank_id)
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">المكافآت المرفقة</label>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    @if($honorReward->points_amount)
                                        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-800">
                                            <div class="flex items-center">
                                                <div class="p-2 bg-green-100 dark:bg-green-800 rounded-lg ml-3">
                                                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <p class="text-lg font-bold text-green-800 dark:text-green-200">{{ $honorReward->points_amount }}</p>
                                                    <p class="text-sm text-green-600 dark:text-green-400">نقطة</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    @if($honorReward->rank)
                                        <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
                                            <div class="flex items-center">
                                                <div class="p-2 bg-purple-100 dark:bg-purple-800 rounded-lg ml-3">
                                                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                                    </svg>
                                                </div>
                                                <div>
                                                    <p class="text-lg font-bold text-purple-800 dark:text-purple-200">{{ $honorReward->rank->name }}</p>
                                                    <p class="text-sm text-purple-600 dark:text-purple-400">رتبة جديدة</p>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Recipients List -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
                        المستلمون ({{ $honorReward->recipients->count() }})
                    </h2>
                </div>
                <div class="p-6">
                    @if($recipients->isNotEmpty())
                        <div class="space-y-4">
                            @foreach($recipients as $recipient)
                                @php
                                    $recipientRecord = $honorReward->recipients->where('user_id', $recipient->id)->first();
                                @endphp
                                <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                                    <div class="flex items-center space-x-4 space-x-reverse">
                                        <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
                                            <span class="text-lg font-medium text-blue-600 dark:text-blue-400">
                                                {{ substr($recipient->name, 0, 1) }}
                                            </span>
                                        </div>
                                        <div>
                                            <h3 class="text-lg font-medium text-gray-900 dark:text-white">{{ $recipient->name }}</h3>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $recipient->email }}</p>
                                            @if($recipientRecord && $recipientRecord->awarded_at)
                                                <p class="text-xs text-green-600 dark:text-green-400 mt-1">
                                                    تم المنح: {{ $recipientRecord->awarded_at->format('Y/m/d H:i') }}
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2 space-x-reverse">
                                        @if($honorReward->points_amount)
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                                {{ $recipientRecord && $recipientRecord->points_awarded ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }}">
                                                <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                                </svg>
                                                نقاط
                                            </span>
                                        @endif
                                        @if($honorReward->rank_id)
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium 
                                                {{ $recipientRecord && $recipientRecord->rank_awarded ? 'bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-200' : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300' }}">
                                                <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M9.661 2.237a1 1 0 01.678 0l7.5 2.5A1 1 0 0118 5.5v9a1 1 0 01-.839.986l-7.5 1.25a1 1 0 01-.322 0l-7.5-1.25A1 1 0 012 14.5v-9a1 1 0 01.161-.514l7.5-2.5z" clip-rule="evenodd"></path>
                                                </svg>
                                                رتبة
                                            </span>
                                        @endif
                                        @if($recipientRecord && $recipientRecord->isFullyAwarded())
                                            <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200">
                                                <svg class="w-3 h-3 ml-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                                                </svg>
                                                مكتمل
                                            </span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">لا يوجد مستلمون</h3>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">لم يتم تحديد أي مستلمين لهذا {{ $honorReward->type_text }}</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Column - Summary & Actions -->
        <div class="space-y-6">
            <!-- Execution Statistics -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">إحصائيات التنفيذ</h2>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-600 dark:text-gray-400">إجمالي المستلمين</span>
                            <span class="text-lg font-bold text-gray-900 dark:text-white">{{ $executionStats['total_recipients'] }}</span>
                        </div>
                        
                        @if($honorReward->points_amount)
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">النقاط الممنوحة</span>
                                <span class="text-lg font-bold text-green-600 dark:text-green-400">{{ $executionStats['points_awarded'] }}</span>
                            </div>
                        @endif
                        
                        @if($honorReward->rank_id)
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-600 dark:text-gray-400">الرتب الممنوحة</span>
                                <span class="text-lg font-bold text-purple-600 dark:text-purple-400">{{ $executionStats['ranks_awarded'] }}</span>
                            </div>
                        @endif
                        
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-600 dark:text-gray-400">مكتمل التنفيذ</span>
                            <span class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ $executionStats['fully_completed'] }}</span>
                        </div>
                        
                        <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                            <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                                @php
                                    $completionPercentage = $executionStats['total_recipients'] > 0 ? 
                                        ($executionStats['fully_completed'] / $executionStats['total_recipients']) * 100 : 0;
                                @endphp
                                <div class="bg-green-600 h-2 rounded-full transition-all duration-300" style="width: {{ $completionPercentage }}%"></div>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
                                نسبة الإكمال: {{ number_format($completionPercentage, 1) }}%
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Metadata Card -->
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">معلومات إضافية</h2>
                </div>
                <div class="p-6">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">النوع</label>
                            <span class="inline-flex items-center px-2 py-1 rounded-full text-sm font-medium {{ $honorReward->type === 'honor' ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200' }}">
                                {{ $honorReward->type_text }}
                            </span>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">منشئ {{ $honorReward->type_text }}</label>
                            <p class="text-sm text-gray-900 dark:text-white">{{ $honorReward->creator->name }}</p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">تاريخ الإنشاء</label>
                            <p class="text-sm text-gray-900 dark:text-white">{{ $honorReward->created_at->format('Y/m/d H:i') }}</p>
                        </div>

                        @if($honorReward->executed_at)
                            <div>
                                <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">تاريخ التنفيذ</label>
                                <p class="text-sm text-gray-900 dark:text-white">{{ $honorReward->executed_at->format('Y/m/d H:i') }}</p>
                            </div>
                        @endif

                        <div>
                            <label class="block text-sm font-medium text-gray-600 dark:text-gray-400 mb-1">آخر تحديث</label>
                            <p class="text-sm text-gray-900 dark:text-white">{{ $honorReward->updated_at->format('Y/m/d H:i') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Status Actions -->
            @if($honorReward->status === 'active')
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">إجراءات الحالة</h2>
                    </div>
                    <div class="p-6">
                        <div class="space-y-3">
                            <button onclick="updateStatus('completed')" 
                                    class="w-full inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                تحديد كمكتمل
                            </button>
                            
                            <button onclick="updateStatus('cancelled')" 
                                    class="w-full inline-flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition duration-200">
                                <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                إلغاء {{ $honorReward->type_text }}
                            </button>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Delete Action -->
            
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-red-200 dark:border-red-800">
                    <div class="px-6 py-4 border-b border-red-200 dark:border-red-800">
                        <h2 class="text-lg font-semibold text-red-600 dark:text-red-400">منطقة الخطر</h2>
                    </div>
                    <div class="p-6">
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            حذف هذا {{ $honorReward->type_text }} سيؤدي إلى إزالة جميع البيانات المرتبطة به نهائياً. هذا الإجراء لا يمكن التراجع عنه.
                        </p>
                        <button onclick="confirmDelete({{ $honorReward->id }}, '{{ $honorReward->title }}')" 
                                class="w-full inline-flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition duration-200">
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            حذف {{ $honorReward->type_text }}
                        </button>
                    </div>
                </div>
           
        </div>
    </div>
</div>

<!-- Edit Modal (reusing the same modal from index page) -->
<div id="honorRewardModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeModal()"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-6">
            <div class="mb-4">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modalTitle">
                    تعديل {{ $honorReward->type_text }}
                </h3>
            </div>

            <form id="honorRewardForm" class="space-y-6">
                @csrf
                @method('PUT')
                <input type="hidden" id="honorRewardId" name="honor_reward_id" value="{{ $honorReward->id }}">

                <!-- Similar form fields as in index.blade.php but pre-populated with current data -->
                <!-- Type Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">نوع العملية <span class="text-red-500">*</span></label>
                    <div class="grid grid-cols-2 gap-4">
                        <button type="button" onclick="selectType('honor')" 
                                class="type-btn flex items-center justify-center p-4 border-2 {{ $honorReward->type === 'honor' ? 'border-green-500 bg-green-50 dark:bg-green-900/20' : 'border-gray-200 dark:border-gray-600' }} rounded-lg hover:border-green-500 hover:bg-green-50 dark:hover:bg-green-900/20 transition duration-200"
                                data-type="honor">
                            <div class="text-center">
                                <svg class="w-8 h-8 text-green-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="text-sm font-medium">تكريم</span>
                                <p class="text-xs text-gray-500 mt-1">تكريم الأعضاء المتميزين</p>
                            </div>
                        </button>
                        
                        <button type="button" onclick="selectType('reward')" 
                                class="type-btn flex items-center justify-center p-4 border-2 {{ $honorReward->type === 'reward' ? 'border-yellow-500 bg-yellow-50 dark:bg-yellow-900/20' : 'border-gray-200 dark:border-gray-600' }} rounded-lg hover:border-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 transition duration-200"
                                data-type="reward">
                            <div class="text-center">
                                <svg class="w-8 h-8 text-yellow-600 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                                </svg>
                                <span class="text-sm font-medium">مكافأة</span>
                                <p class="text-xs text-gray-500 mt-1">منح مكافآت للأعضاء</p>
                            </div>
                        </button>
                    </div>
                    <input type="hidden" id="selectedType" name="type" value="{{ $honorReward->type }}">
                </div>

                <!-- Title -->
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        العنوان <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="title" 
                           name="title" 
                           value="{{ $honorReward->title }}"
                           required
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="أدخل عنوان التكريم أو المكافأة...">
                </div>

                <!-- Reason -->
                <div>
                    <label for="reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        سبب التكريم/المكافأة <span class="text-red-500">*</span>
                    </label>
                    <textarea id="reason" 
                              name="reason" 
                              rows="4"
                              required
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب سبب التكريم أو المكافأة...">{{ $honorReward->reason }}</textarea>
                </div>

                <!-- Points -->
                <div>
                    <label for="points_amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        عدد النقاط (اختياري)
                    </label>
                    <input type="number" 
                           id="points_amount" 
                           name="points_amount" 
                           value="{{ $honorReward->points_amount }}"
                           min="1" 
                           max="1000"
                           class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="عدد النقاط...">
                </div>

                <!-- Rank -->
                <div>
                    <label for="rank_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        الرتبة (اختياري)
                    </label>
                    <select id="rank_id" 
                            name="rank_id" 
                            class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        <option value="">اختر رتبة (اختياري)</option>
                        @foreach($ranks ?? [] as $rank)
                            <option value="{{ $rank->id }}" {{ $honorReward->rank_id == $rank->id ? 'selected' : '' }}>
                                {{ $rank->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Additional Notes -->
                <div>
                    <label for="additional_notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        ملاحظات إضافية (اختياري)
                    </label>
                    <textarea id="additional_notes" 
                              name="additional_notes" 
                              rows="3"
                              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                              placeholder="اكتب أي اقتراحات أو ملاحظات إضافية...">{{ $honorReward->additional_notes }}</textarea>
                </div>

                <!-- Form Actions -->
                <div class="flex flex-col sm:flex-row justify-end items-center gap-3 pt-6 border-t border-gray-200 dark:border-gray-700">
                    <button type="submit" 
                            id="submit-btn"
                            class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span id="submit-text">تحديث {{ $honorReward->type_text }}</span>
                    </button>
                    
                    <button type="button" onclick="closeModal()" 
                            class="inline-flex items-center px-6 py-3 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium rounded-lg transition duration-200">
                        إلغاء
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeDeleteModal()"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-4">
                <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
            </div>
            <div class="text-center">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-2">تأكيد الحذف</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4" id="deleteMessage"></p>
                
                <div class="flex flex-col sm:flex-row-reverse gap-3">
                    <button onclick="executeDelete()" 
                            class="inline-flex justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition duration-200">
                        نعم، احذف
                    </button>
                    <button onclick="closeDeleteModal()" 
                            class="inline-flex justify-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                        إلغاء
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div id="statusModal" class="fixed inset-0 z-50 overflow-y-auto hidden">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeStatusModal()"></div>
        
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
        
        <div class="relative inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg px-4 pt-5 pb-4 text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6">
            <div class="text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full mb-4" id="statusIcon">
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white mb-2" id="statusTitle"></h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4" id="statusMessage"></p>
                
                <form id="statusForm">
                    <input type="hidden" id="newStatus" name="status">
                    <div class="mb-4">
                        <label for="statusNotes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ملاحظات (اختياري)</label>
                        <textarea id="statusNotes" 
                                  name="notes" 
                                  rows="3"
                                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                                  placeholder="أضف أي ملاحظات حول تغيير الحالة..."></textarea>
                    </div>
                </form>
                
                <div class="flex flex-col sm:flex-row-reverse gap-3">
                    <button onclick="executeStatusUpdate()" 
                            id="confirmStatusBtn"
                            class="inline-flex justify-center px-4 py-2 font-medium rounded-lg transition duration-200">
                        تأكيد
                    </button>
                    <button onclick="closeStatusModal()" 
                            class="inline-flex justify-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                        إلغاء
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success/Error Alerts -->
<div id="alert-container" class="fixed top-4 right-4 z-[60] space-y-2"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let deleteItemId = null;
    let statusToUpdate = null;

    // Modal functions
    window.openEditModal = function(id) {
        document.getElementById('honorRewardModal').classList.remove('hidden');
    };

    window.closeModal = function() {
        document.getElementById('honorRewardModal').classList.add('hidden');
    };

    // Delete functions
    window.confirmDelete = function(id, title) {
        deleteItemId = id;
        document.getElementById('deleteMessage').textContent = 
            `هل أنت متأكد من حذف "${title}"؟ لا يمكن التراجع عن هذا الإجراء.`;
        document.getElementById('deleteModal').classList.remove('hidden');
    };

    window.closeDeleteModal = function() {
        document.getElementById('deleteModal').classList.add('hidden');
        deleteItemId = null;
    };

    window.executeDelete = function() {
        if (!deleteItemId) return;

        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        
        fetch(`/superadmin/honors-rewards/${deleteItemId}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeDeleteModal();
                setTimeout(() => {
                    window.location.href = '{{ route("superadmin.honors-rewards.index") }}';
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('حدث خطأ أثناء الحذف', 'error');
        });
    };

    // Status update functions
    window.updateStatus = function(status) {
        statusToUpdate = status;
        
        const statusIcon = document.getElementById('statusIcon');
        const statusTitle = document.getElementById('statusTitle');
        const statusMessage = document.getElementById('statusMessage');
        const confirmBtn = document.getElementById('confirmStatusBtn');
        const newStatusInput = document.getElementById('newStatus');

        newStatusInput.value = status;

        if (status === 'completed') {
            statusIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20 mb-4';
            statusIcon.innerHTML = '<svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>';
            statusTitle.textContent = 'تحديد كمكتمل';
            statusMessage.textContent = 'سيتم تحديد حالة هذا {{ $honorReward->type_text }} كمكتمل. هل تريد المتابعة؟';
            confirmBtn.className = 'inline-flex justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200';
        } else if (status === 'cancelled') {
            statusIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/20 mb-4';
            statusIcon.innerHTML = '<svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>';
            statusTitle.textContent = 'إلغاء {{ $honorReward->type_text }}';
            statusMessage.textContent = 'سيتم إلغاء هذا {{ $honorReward->type_text }}. هل تريد المتابعة؟';
            confirmBtn.className = 'inline-flex justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition duration-200';
        }

        document.getElementById('statusModal').classList.remove('hidden');
    };

    window.closeStatusModal = function() {
        document.getElementById('statusModal').classList.add('hidden');
        statusToUpdate = null;
        document.getElementById('statusNotes').value = '';
    };

    window.executeStatusUpdate = function() {
        if (!statusToUpdate) return;

        const formData = new FormData();
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        
        formData.append('_token', csrfToken);
        formData.append('status', statusToUpdate);
        formData.append('notes', document.getElementById('statusNotes').value);

        fetch(`/superadmin/honors-rewards/{{ $honorReward->id }}/update-status`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeStatusModal();
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('حدث خطأ أثناء تحديث الحالة', 'error');
        });
    };

    // Type selection for edit modal
    window.selectType = function(type) {
        document.querySelectorAll('.type-btn').forEach(btn => {
            btn.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20', 
                                'border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            btn.classList.add('border-gray-200', 'dark:border-gray-600');
        });

        const selectedBtn = document.querySelector(`[data-type="${type}"]`);
        if (selectedBtn) {
            selectedBtn.classList.remove('border-gray-200', 'dark:border-gray-600');
            if (type === 'honor') {
                selectedBtn.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
            } else {
                selectedBtn.classList.add('border-yellow-500', 'bg-yellow-50', 'dark:bg-yellow-900/20');
            }
        }

        document.getElementById('selectedType').value = type;
    };

    // Form submission for edit
    const form = document.getElementById('honorRewardForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            submitForm();
        });
    }

    function submitForm() {
        const formData = new FormData(form);
        
        setLoading(true);

        fetch(`/superadmin/honors-rewards/{{ $honorReward->id }}`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message, 'success');
                closeModal();
                setTimeout(() => {
                    window.location.reload();
                }, 1500);
            } else {
                showAlert(data.message, 'error');
            }
        })
        .catch(error => {
            showAlert('حدث خطأ أثناء التحديث', 'error');
        })
        .finally(() => {
            setLoading(false);
        });
    }

    function setLoading(loading) {
        const submitBtn = document.getElementById('submit-btn');
        const submitText = document.getElementById('submit-text');
        
        if (loading) {
            submitBtn.disabled = true;
            submitText.textContent = 'جارِ المعالجة...';
        } else {
            submitBtn.disabled = false;
            submitText.textContent = 'تحديث {{ $honorReward->type_text }}';
        }
    }

    function showAlert(message, type = 'info') {
        const alertContainer = document.getElementById('alert-container');
        const alertDiv = document.createElement('div');
        
        const bgColor = type === 'success' ? 'bg-green-100 border-green-200 text-green-800' :
                       type === 'error' ? 'bg-red-100 border-red-200 text-red-800' :
                       'bg-blue-100 border-blue-200 text-blue-800';
        
        alertDiv.className = `${bgColor} border rounded-lg p-4 shadow-lg max-w-md transition-all duration-300`;
        alertDiv.innerHTML = `
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 20 20">
                        ${type === 'success' ? 
                            '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>' :
                            '<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>'
                        }
                    </svg>
                    <span class="text-sm font-medium">${message}</span>
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="mr-2 text-gray-500 hover:text-gray-700">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        `;
        
        alertContainer.appendChild(alertDiv);
        
        // Auto remove after 5 seconds
        setTimeout(() => {
            if (alertDiv.parentNode) {
                alertDiv.style.transform = 'translateX(100%)';
                alertDiv.style.opacity = '0';
                setTimeout(() => {
                    alertDiv.remove();
                }, 300);
            }
        }, 5000);
    }

    // ESC key to close modals
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeModal();
            closeDeleteModal();
            closeStatusModal();
        }
    });

    // Print styles
    const printStyles = `
        <style type="text/css" media="print">
            @page {
                margin: 2cm;
                size: A4;
            }
            
            body {
                font-family: 'Arial', sans-serif;
                font-size: 12pt;
                line-height: 1.4;
                color: #000 !important;
                background: #fff !important;
            }
            
            .no-print,
            .fixed,
            button,
            .hover\\:bg-blue-700,
            .hover\\:bg-purple-700,
            .hover\\:bg-gray-700 {
                display: none !important;
            }
            
            .container {
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .bg-white,
            .dark\\:bg-gray-800 {
                background: #fff !important;
                border: 1px solid #ddd !important;
            }
            
            .text-gray-900,
            .dark\\:text-white {
                color: #000 !important;
            }
            
            .text-gray-600,
            .dark\\:text-gray-400 {
                color: #555 !important;
            }
            
            .shadow-sm {
                box-shadow: none !important;
            }
            
            .rounded-lg {
                border-radius: 4px !important;
            }
            
            .grid {
                display: block !important;
            }
            
            .lg\\:col-span-2 {
                width: 100% !important;
            }
            
            .space-y-6 > * + * {
                margin-top: 1.5rem !important;
            }
            
            .space-y-4 > * + * {
                margin-top: 1rem !important;
            }
            
            .p-6 {
                padding: 1rem !important;
            }
            
            .mb-6 {
                margin-bottom: 1.5rem !important;
            }
            
            .page-break {
                page-break-before: always;
            }
            
            h1 {
                font-size: 24pt !important;
                font-weight: bold !important;
                margin-bottom: 0.5rem !important;
            }
            
            h2 {
                font-size: 18pt !important;
                font-weight: bold !important;
                margin-bottom: 0.5rem !important;
            }
            
            h3 {
                font-size: 14pt !important;
                font-weight: bold !important;
                margin-bottom: 0.5rem !important;
            }
            
            .honor-header {
                border-bottom: 1px solid #ddd !important;
                padding-bottom: 0.5rem !important;
                margin-bottom: 1rem !important;
            }
            
            .recipients-list {
                display: block !important;
            }
            
            .recipient-item {
                border: 1px solid #ddd !important;
                padding: 0.5rem !important;
                margin-bottom: 0.5rem !important;
                background: #f9f9f9 !important;
            }
        </style>
    `;
    
    // Add print styles to head when printing
    window.addEventListener('beforeprint', function() {
        const head = document.getElementsByTagName('head')[0];
        const printStyleElement = document.createElement('div');
        printStyleElement.innerHTML = printStyles;
        printStyleElement.id = 'print-styles';
        head.appendChild(printStyleElement);
    });
    
    window.addEventListener('afterprint', function() {
        const printStyleElement = document.getElementById('print-styles');
        if (printStyleElement) {
            printStyleElement.remove();
        }
    });
});
</script>

<!-- Print Header (only visible when printing) -->
<div class="hidden print:block text-center mb-6">
    <h1 class="text-2xl font-bold">تفاصيل {{ $honorReward->type_text }}</h1>
    <p class="text-sm text-gray-600">{{ $honorReward->title }}</p>
    <p class="text-xs text-gray-500">تاريخ الطباعة: {{ now()->format('Y/m/d H:i') }}</p>
</div>

<!-- CSRF Token for AJAX requests -->
<meta name="csrf-token" content="{{ csrf_token() }}">

@push('styles')
<style>
    @media print {
        @page {
            margin: 2cm;
            size: A4;
        }
        
        .no-print {
            display: none !important;
        }
        
        body {
            font-size: 12pt;
            line-height: 1.4;
        }
        
        .container {
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        
        .grid {
            display: block !important;
        }
        
        .lg\:col-span-2 {
            width: 100% !important;
        }
        
        .hidden {
            display: none !important;
        }
        
        .print\:block {
            display: block !important;
        }
    }
</style>
@endpush

@endsection