@extends('layouts.member')

@section('title', 'تفاصيل ' . ($violation->type === 'warning' ? 'الإنذار' : 'المخالفة'))

@section('content')
<div class="container mx-auto px-4 py-6 rtl">

    <!-- زر العودة -->
    <div class="mb-4">
        <a href="{{ route('member.violations.index') }}" class="inline-flex items-center px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:text-white transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" >
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
            العودة للقائمة
        </a>
    </div>

    <!-- البطاقة الأساسية -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">

        <!-- رأس البطاقة -->
        <div class="flex justify-between items-center mb-6">
            <h2 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                @if($violation->type === 'warning')
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.29 3.86L1.82 18a1.75 1.75 0 001.46 2.68h16.44a1.75 1.75 0 001.46-2.68L13.71 3.86a1.75 1.75 0 00-3.42 0z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v4m0 4h.01" />
                    </svg>
                    تفاصيل الإنذار
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    تفاصيل المخالفة
                @endif
            </h2>

            <!-- شارة الحالة -->
            @if($violation->status === 'active')
                <span class="px-3 py-1 rounded-full text-white text-sm bg-blue-600">نشط</span>
            @elseif($violation->status === 'resolved')
                <span class="px-3 py-1 rounded-full text-white text-sm bg-green-600">مؤكد</span>
            @else
                <span class="px-3 py-1 rounded-full text-sm bg-gray-400 text-gray-900">{{ $violation->status_name }}</span>
            @endif
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

            <!-- القسم الأساسي -->
            <div class="md:col-span-2 space-y-6">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ $violation->title }}</h3>

                @if($violation->description)
                    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded">
                        <h4 class="font-medium mb-2 text-gray-700 dark:text-gray-300">الوصف:</h4>
                        <p class="text-gray-800 dark:text-gray-200 whitespace-pre-line">{{ $violation->description }}</p>
                    </div>
                @endif

                <!-- تفاصيل المخالفة -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-gray-800 dark:text-gray-200">
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8a9 9 0 100-18 9 9 0 000 18z" />
                        </svg>
                        <span>النوع:</span>
                        @if($violation->type === 'warning')
                            <span class="ml-auto px-3 py-1 rounded-full bg-yellow-200 text-yellow-800 font-semibold text-sm">إنذار</span>
                        @else
                            <span class="ml-auto px-3 py-1 rounded-full bg-red-200 text-red-800 font-semibold text-sm">مخالفة</span>
                        @endif
                    </div>

                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4" />
                        </svg>
                        <span>النقاط المخصومة:</span>
                        @if($violation->points_deducted > 0)
                            <span class="ml-auto text-red-600 font-bold">{{ $violation->points_deducted }} نقطة</span>
                        @else
                            <span class="ml-auto text-gray-500">لا يوجد خصم</span>
                        @endif
                    </div>

                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2v-7H3v7a2 2 0 002 2z" />
                        </svg>
                        <span>تاريخ الإنشاء:</span>
                        <span class="ml-auto">{{ $violation->created_at->format('Y/m/d H:i') }}</span>
                    </div>

                    <div class="flex items-center gap-2">
                        @if($violation->is_automatic)
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        @else
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 12c2.21 0 4-1.79 4-4S14.21 4 12 4 8 5.79 8 8s1.79 4 4 4z" />
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 20h12a2 2 0 012 2H4a2 2 0 012-2z" />
                        </svg>
                        @endif
                        <span>نوع الإنشاء:</span>
                        <span class="ml-auto">
                            @if($violation->is_automatic)
                                <span class="px-3 py-1 rounded-full bg-blue-200 text-blue-800 font-semibold text-sm">تلقائي</span>
                            @else
                                <span class="px-3 py-1 rounded-full bg-gray-300 text-gray-900 font-semibold text-sm">يدوي</span>
                            @endif
                        </span>
                    </div>
                </div>

                <!-- منشئ المخالفة -->
                <div class="flex items-center gap-2 mt-6 text-gray-700 dark:text-gray-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 14l6.16-3.422a12.083 12.083 0 01-6.16 11.422 12.083 12.083 0 01-6.16-11.422L12 14z" />
                    </svg>
                    <span>منشئ المخالفة: <strong>{{ $violation->creator_display_name }}</strong></span>
                </div>

                <!-- الملاحظات الإدارية -->
                @if($violation->admin_notes)
                <div class="mt-6 bg-blue-50 dark:bg-blue-800 p-4 rounded text-blue-700 dark:text-blue-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 h-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 12h.01M21 21H3a2 2 0 01-2-2v-7a2 2 0 012-2h18a2 2 0 012 2v7a2 2 0 01-2 2z" />
                    </svg>
                    <span>ملاحظات إدارية:</span>
                    <p class="mt-1">{{ $violation->admin_notes }}</p>
                </div>
                @endif

                        <!-- المرفقات -->
                @if($violation->attachment)
                <div class="mt-6">
                    <a href="{{ asset('storage/' . $violation->attachment) }}" target="_blank" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.586-6.586a4 4 0 10-5.656-5.656l-6.586 6.586a6 6 0 108.486 8.486" />
                        </svg>
                        عرض المرفق
                    </a>
                </div>
                @endif
            </div>

            <!-- القسم الجانبي -->
            <div class="space-y-6">

     

                <!-- معلومات إضافية -->
                <div class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow">
                    <h4 class="font-semibold mb-4 text-gray-900 dark:text-white">معلومات إضافية</h4>
                    <dl class="text-gray-700 dark:text-gray-300 space-y-3">
                        <div class="flex justify-between">
                            <dt>رقم المخالفة:</dt>
                            <dd class="font-semibold">#{{ $violation->id }}</dd>
                        </div>
                        <div class="flex justify-between">
                            <dt>الحالة:</dt>
                            <dd class="font-semibold">{{ $violation->status_name }}</dd>
                        </div>
                        @if($violation->type === 'violation' && $violation->points_deducted > 0)
                        <div class="flex justify-between text-red-600 font-semibold">
                            <dt>النقاط المخصومة:</dt>
                            <dd>{{ $violation->points_deducted }}</dd>
                        </div>
                        @endif
                        <div class="flex justify-between">
                            <dt>مدة المخالفة:</dt>
                            <dd class="font-semibold">{{ $violation->created_at->diffForHumans() }}</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>

 

        <!-- آخر تحديث -->
        <div class="mt-6 flex justify-between text-gray-500 dark:text-gray-400 text-sm">
            <div>آخر تحديث: {{ $violation->updated_at->format('Y/m/d H:i') }}</div>
            <div>
                <a href="{{ route('member.violations.index') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:text-white transition">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                    </svg>
                    العودة للقائمة
                </a>
                @if($memberViolation && !$memberViolation->acknowledged)
                <button onclick="acknowledgeViolation({{ $violation->id }})" type="button" class="ml-2 inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 rounded text-white transition">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                    تأكيد الاطلاع
                </button>
                @endif
            </div>
        </div>

    </div>

</div>

<!-- مودال تأكيد الاطلاع -->
<div x-data="{ open: false }" x-show="open" @keydown.escape.window="open = false" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" style="display: none;">
    <div @click.away="open = false" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md w-full p-6">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-white flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
            </svg>
            تأكيد الاطلاع
        </h3>
        <p class="mb-4 text-gray-700 dark:text-gray-300">
            يرجى تأكيد أنك اطلعت على هذه {{ $violation->type === 'warning' ? 'الإنذار' : 'المخالفة' }}. بإمكانك إضافة رد أو توضيح إضافي إذا رغبت.
        </p>
        <form id="acknowledgeForm" method="POST" action="{{ route('member.violations.acknowledge', $violation->id) }}">
            @csrf
            <textarea name="member_response" rows="4" maxlength="1000" placeholder="نص الرد أو التوضيح (اختياري)" class="w-full border border-gray-300 rounded-md p-2 mb-4 dark:bg-gray-700 dark:border-gray-600 dark:text-white"></textarea>
            <div class="flex justify-end gap-3">
                <button type="button" @click="open = false" class="px-4 py-2 rounded bg-gray-300 hover:bg-gray-400">إلغاء</button>
                <button type="submit" class="px-4 py-2 rounded bg-green-600 hover:bg-green-700 text-white">تأكيد الاطلاع</button>
            </div>
        </form>
    </div>
</div>



@endsection

@push('scripts')
<script>
    // عرض مودال تأكيد الاطلاع مع Alpine.js
    function acknowledgeViolation(id) {
        const modal = document.querySelectorAll('[x-data]')[0].__x;
        modal.$data.open = true;
    }

    // عرض مودال تعديل الرد
    function editResponse() {
        const modal = document.querySelectorAll('[x-data]')[1].__x;
        modal.$data.open = true;
    }

    // إضافة رد جديد (يستخدم مودال تأكيد الاطلاع مع تهيئة الحقل)
    function addResponse() {
        const modal = document.querySelectorAll('[x-data]')[0].__x;
        modal.$data.open = true;
        document.querySelector('[x-data] textarea[name="member_response"]').value = '';
    }
</script>
@endpush