@extends('admin.layouts.admin')

@section('title', 'إدارة الإحصائيات')

@section('content')
<div class="bg-white p-6 rounded-lg shadow-md" dir="rtl">
    <h2 class="text-2xl font-bold mb-6 text-right border-b pb-4 text-gray-800">إدارة الإحصائيات الأربعة</h2>
    
    <form action="{{ route('admin.statistics.update_all') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            @foreach($stats as $index => $stat)
            <div class="p-6 border rounded-xl bg-gray-50 relative shadow-sm">
                <span class="absolute top-3 left-3 bg-blue-600 text-white w-8 h-8 flex items-center justify-center rounded-full font-bold">{{ $index + 1 }}</span>
                
                <div class="space-y-4 text-right">
                    <!-- حقل اختيار الأيقونة بشكل مرئي -->
                    <div>
                        <label class="block text-sm font-bold mb-2 text-gray-700">الأيقونة</label>
                        <div class="flex items-center gap-3">
                            <input type="hidden" name="stats[{{ $stat->id }}][icon]" id="icon_input_{{ $stat->id }}" value="{{ $stat->icon }}">
                            <div id="icon_preview_{{ $stat->id }}" class="w-12 h-12 flex items-center justify-center bg-white border-2 border-blue-500 rounded-lg text-2xl text-blue-600">
                                <i class="{{ $stat->icon }}"></i>
                            </div>
                            <button type="button" onclick="openIconPicker({{ $stat->id }})" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition text-sm">تغيير الأيقونة</button>
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-bold mb-2 text-gray-700">العنوان</label>
                        <input type="text" name="stats[{{ $stat->id }}][title]" value="{{ $stat->title }}" class="w-full border p-3 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none" required>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-bold mb-2 text-gray-700">القيمة</label>
                        <input type="text" name="stats[{{ $stat->id }}][count]" value="{{ $stat->count }}" class="w-full border p-3 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none" required>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <button type="submit" class="w-full mt-10 bg-green-600 hover:bg-green-700 text-white font-bold py-4 rounded-xl shadow-lg transition">حفظ جميع التغييرات</button>
    </form>
</div>

<!-- Modal اختيار الأيقونة -->
<div id="iconModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
        <div class="p-4 border-b flex justify-between items-center bg-gray-50">
            <h3 class="font-bold text-lg">اختر أيقونة</h3>
            <button onclick="closeIconPicker()" class="text-gray-500 text-2xl">&times;</button>
        </div>
        <div class="p-6 overflow-y-auto grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 gap-4 text-center">
            @foreach($icons as $class => $name)
            <div onclick="selectIcon('{{ $class }}')" class="p-3 border rounded-lg hover:bg-blue-50 hover:border-blue-500 cursor-pointer transition group">
                <i class="{{ $class }} text-2xl text-gray-700 group-hover:text-blue-600"></i>
                <span class="block text-[10px] mt-1 text-gray-400 truncate">{{ $name }}</span>
            </div>
            @endforeach
        </div>
    </div>
</div>

<script>
    let currentStatId = null;

    function openIconPicker(statId) {
        currentStatId = statId;
        document.getElementById('iconModal').classList.remove('hidden');
    }

    function closeIconPicker() {
        document.getElementById('iconModal').classList.add('hidden');
    }

    function selectIcon(iconClass) {
        if (currentStatId) {
            // تحديث قيمة الـ Hidden Input
            document.getElementById('icon_input_' + currentStatId).value = iconClass;
            // تحديث الشكل الخارجي (Preview)
            document.getElementById('icon_preview_' + currentStatId).innerHTML = '<i class="' + iconClass + '"></i>';
            closeIconPicker();
        }
    }

    // إغلاق المودال عند الضغط خارج المربع
    window.onclick = function(event) {
        let modal = document.getElementById('iconModal');
        if (event.target == modal) closeIconPicker();
    }
</script>
@endsection