{{-- resources/views/general/my-honors-rewards/show.blade.php --}}
@extends($layout)

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

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        
        {{-- Page Header --}}
        <div class="mb-6">
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3 rtl:space-x-reverse">
                    <li class="inline-flex items-center">
                        <a href="{{ route('my-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="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" fill="none" viewBox="0 0 6 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
                            </svg>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">{{ $honorReward->title }}</span>
                        </div>
                    </li>
                </ol>
            </nav>
            
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ $honorReward->title }}</h1>
        </div>

        {{-- Main Content --}}
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
            <div class="p-6">
                {{-- Header Info --}}
                <div class="flex items-start gap-4 mb-6">
                    <div class="p-4 rounded-lg {{ $honorReward->type === 'honor' ? 'bg-green-50 dark:bg-green-900/20' : 'bg-yellow-50 dark:bg-yellow-900/20' }}">
                        @if($honorReward->type === 'honor')
                            <svg class="w-8 h-8 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>
                        @else
                            <svg class="w-8 h-8 text-yellow-600 dark:text-yellow-400" 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>
                        @endif
                    </div>
                    <div class="flex-1">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="inline-flex items-center px-3 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>
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200">
                                {{ $honorReward->status_text }}
                            </span>
                        </div>
                        <p class="text-gray-600 dark:text-gray-400 text-lg">{{ $honorReward->reason }}</p>
                    </div>
                </div>

                {{-- Awards Information --}}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    {{-- Points Awarded --}}
                    @if($honorReward->points_amount && $recipient->points_awarded)
                        <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4 border border-green-200 dark:border-green-700">
                            <div class="flex items-center mb-2">
                                <svg class="w-6 h-6 text-green-600 dark:text-green-400 ml-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>
                                <h3 class="text-lg font-semibold text-green-900 dark:text-green-100">نقاط مكتسبة</h3>
                            </div>
                            <p class="text-3xl font-bold text-green-600 dark:text-green-400">{{ $honorReward->points_amount }}</p>
                            <p class="text-sm text-green-700 dark:text-green-300 mt-1">تم إضافتها إلى رصيدك</p>
                        </div>
                    @endif

                    {{-- Rank Awarded --}}
                    @if($honorReward->rank && $recipient->rank_awarded)
                        <div class="{{ $honorReward->rank->icon_bg_color }} rounded-lg p-4 border border-gray-200 dark:border-gray-600">
                            <div class="flex items-center mb-2">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center ml-2 {{ $honorReward->rank->icon_bg_color }}">
                                    <svg class="w-5 h-5 {{ $honorReward->rank->icon_color }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        {!! $honorReward->rank->icon_svg !!}
                                    </svg>
                                </div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">رتبة جديدة</h3>
                            </div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $honorReward->rank->name }}</p>
                            @if($honorReward->rank->description)
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ $honorReward->rank->description }}</p>
                            @endif
                        </div>
                    @endif
                </div>

                {{-- Details Section --}}
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">معلومات إضافية</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Creator Info --}}
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">منح بواسطة</dt>
                            <dd class="flex items-center">
                                <div class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center ml-2">
                                    <span class="text-xs font-medium text-blue-600 dark:text-blue-400">{{ substr($honorReward->creator->name, 0, 1) }}</span>
                                </div>
                                <div>
                                    <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $honorReward->creator->name }}</div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">{{ $honorReward->creator->detailed_role }}</div>
                                </div>
                            </dd>
                        </div>

                        {{-- Date Info --}}
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">تاريخ المنح</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">
                                {{ $honorReward->created_at->format('l، j F Y') }}
                                <span class="text-gray-500 dark:text-gray-400">
                                    ({{ $honorReward->created_at->diffForHumans() }})
                                </span>
                            </dd>
                        </div>

                        {{-- Status Info --}}
                        @if($recipient->awarded_at)
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">تاريخ الاستلام</dt>
                                <dd class="text-sm text-gray-900 dark:text-white">
                                    {{ $recipient->awarded_at->format('l، j F Y') }}
                                </dd>
                            </div>
                        @endif

                        {{-- Total Recipients --}}
                        <div>
                            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">عدد المستلمين</dt>
                            <dd class="text-sm text-gray-900 dark:text-white">
                                {{ $honorReward->recipients_count }} {{ $honorReward->recipients_count == 1 ? 'شخص' : 'أشخاص' }}
                            </dd>
                        </div>
                    </div>
                </div>

                {{-- Additional Notes --}}
                @if($honorReward->additional_notes)
                    <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">ملاحظات إضافية</h3>
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">{{ $honorReward->additional_notes }}</p>
                        </div>
                    </div>
                @endif

                {{-- Personal Notes Section --}}
                @if($recipient->recipient_notes)
                    <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">ملاحظاتي الشخصية</h3>
                        <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-700">
                            <p class="text-blue-800 dark:text-blue-200 leading-relaxed">{{ $recipient->recipient_notes }}</p>
                        </div>
                    </div>
                @endif

                {{-- Actions --}}
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
                    <div class="flex flex-col sm:flex-row gap-3">
                        <a href="{{ route('my-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>

                        <a href="{{ route('my-honors-rewards.print', ['honor_reward_id' => $honorReward->id]) }}" 
                           target="_blank"
                           class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-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="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                            </svg>
                            طباعة
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection