@extends('layouts.moderator')
@section('title', 'إدارة الرتب')

@section('content')
<div class="container mx-auto px-4 py-6 rtl">
    @if(session('success'))
        <div class="mb-4 alert alert-success text-green-800 bg-green-100 border border-green-200 rounded-lg p-4 flex items-center">
            <svg class="w-6 h-6 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"/>
            </svg>
            {{ session('success') }}
        </div>
    @endif

    @if($errors->any())
        <div class="mb-4 alert alert-error text-red-800 bg-red-100 border border-red-200 rounded-lg p-4">
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Header Section -->
    <div class="mb-6">
        <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">إدارة الرتب</h1>
                <p class="text-gray-600 dark:text-gray-400">
                    إدارة وتنظيم رتب أعضاء {{ $moderatorGender === 'male' ? 'فريق الشباب' : 'فريق الصبايا' }}
                </p>
            </div>
            <div>
                <button onclick="openCreateModal()" 
                        class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                    إضافة رتبة جديدة
                </button>
            </div>
        </div>
    </div>

    <!-- Statistics Section -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-blue-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-blue-600 dark:text-blue-400">{{ $stats['total_ranks'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">إجمالي الرتب</div>
            </div>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-green-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-green-600 dark:text-green-400">{{ $stats['total_members_ranked'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">أعضاء فريقي لديهم رتب</div>
            </div>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-yellow-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-400">{{ $stats['unranked_members'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">أعضاء فريقي بدون رتب</div>
            </div>
        </div>
        
        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-purple-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-purple-600 dark:text-purple-400">{{ $stats['my_section_total'] }}</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">إجمالي أعضاء فريقي</div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 p-4 rounded-xl shadow-sm border-t-4 border-indigo-400">
            <div class="text-center">
                <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">{{ round(($stats['total_members_ranked'] / max($stats['my_section_total'], 1)) * 100) }}%</div>
                <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">نسبة الحاصلين على رتب</div>
            </div>
        </div>
    </div>

    <!-- Notice about permissions -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
        <div class="flex items-start">
            <svg class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <div>
                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">معلومات هامة</h3>
                <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">
                    يمكنك رؤية جميع الرتب المُضافة من قبل الإدارة والمشرفين، لكن يمكنك إدارة أعضاء {{ $moderatorGender === 'male' ? 'فريق الشباب' : 'فريق الصبايا' }} فقط.
                </p>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6 p-6">
        <form method="GET" action="{{ route('moderator.ranks.index') }}" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">البحث في الرتب</label>
                <input type="text" name="search" value="{{ request('search') }}"
                       placeholder="البحث في اسم الرتبة أو الوصف..."
                       class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
            </div>
            
            <div>
                <label class="block mb-2 font-medium text-gray-700 dark:text-gray-300">عرض أعضاء فريقي في الرتبة</label>
                <select name="rank_id" class="w-full rounded-md border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    <option value="">اختر رتبة لعرض أعضاء فريقي بها</option>
                    @foreach($ranks as $rank)
                        @php
                            $myTeamCount = $rank->users()->where('gender', $moderatorGender)->count();
                        @endphp
                        <option value="{{ $rank->id }}" {{ request('rank_id') == $rank->id ? 'selected' : '' }}>
                            {{ $rank->name }} ({{ $myTeamCount }} من فريقي)
                        </option>
                    @endforeach
                </select>
            </div>
            
            <div class="flex items-end gap-2">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white rounded-md py-2 px-4 transition duration-200">
                    بحث / فلترة
                </button>
                <a href="{{ route('moderator.ranks.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white rounded-md py-2 px-4 transition duration-200">
                    إعادة تعيين
                </a>
            </div>
        </form>
    </div>

    <!-- Display Members of Selected Rank from My Team -->
    @if($selectedRank && $members)
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm mb-6 p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                <svg class="w-5 h-5 ml-2 text-blue-600" 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"/>
                </svg>
                أعضاء فريقي في رتبة "{{ $selectedRank->name }}"
            </h3>
            
            @if($members->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($members as $member)
                        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center ml-3">
                                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900 dark:text-white">{{ $member->name }}</div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">{{ $member->detailed_role }}</div>
                                </div>
                            </div>
                            <button onclick="removeMemberFromRank({{ $selectedRank->id }}, {{ $member->id }}, '{{ $member->name }}')"
                                    class="text-red-600 hover:text-red-800 dark:text-red-400 p-1 rounded transition-colors"
                                    title="إزالة من الرتبة">
                                <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"/>
                                </svg>
                            </button>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                    <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" 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"/>
                    </svg>
                    لا يوجد أعضاء من فريقك حاصلين على هذه الرتبة
                </div>
            @endif
        </div>
    @endif

    <!-- Ranks Display Section -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
            <svg class="w-5 h-5 ml-2 text-yellow-600" 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"/>
            </svg>
            جميع الرتب المتاحة
        </h3>
        
        @if($ranks->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($ranks as $rank)
                    @php
                        $myTeamCount = $rank->users()->where('gender', $moderatorGender)->count();
                        $totalCount = $rank->users_count;
                    @endphp
                    <div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-600 hover:shadow-lg transition-shadow">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center ml-3">
                                    @if($rank->icon)
                                        <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
                                            @switch($rank->icon)
                                                @case('star')
                                                    <path 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"/>
                                                    @break
                                                @case('crown')
                                                    <path d="M5 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H6a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h16a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM9 16a1 1 0 011-1h4a1 1 0 011 1v2a1 1 0 01-1 1h-4a1 1 0 01-1-1v-2z"/>
                                                    @break
                                                @case('shield')
                                                    <path 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.031 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                                                    @break
                                                @case('trophy')
                                                    <path d="M5.166 2.621v.858c-1.035.148-2.059.33-3.071.543a.75.75 0 0-.584.859 6.753 6.753 0 006.138 5.6 6.73 6.73 0 002.743 1.346A6.707 6.707 0 019.279 15H8.54c-1.036 0-1.875.84-1.875 1.875V19.5h2.81c2.836.002 5.13-2.293 5.132-5.128V9.279a6.81 6.81 0 004.144-3.118.75.75 0 00-.584-.859 47.695 47.695 0 00-4.423-.379c.35-.566.567-1.225.567-1.943V2.621A.75.75 0 0013.125 1.75H5.166z"/>
                                                    @break
                                                @case('medal')
                                                    <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.007z"/>
                                                    @break
                                                @case('fire')
                                                    <path d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"/>
                                                    <path d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z"/>
                                                    @break
                                                @case('diamond')
                                                    <path d="M6.115 5.19l.319 1.913A6.001 6.001 0 008.11 10.36L6.75 7.368a.75.75 0 01-.635-2.178zM4.5 6.91a.75.75 0 01.98-.3l5.25 3.11a.75.75 0 010 1.28l-5.25 3.11a.75.75 0 01-.98-.3l-2.25-4.5a.75.75 0 010-.6l2.25-4.5z"/>
                                                    @break
                                                @case('lightning')
                                                    <path fill-rule="evenodd" d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z" clip-rule="evenodd"/>
                                                    @break
                                                @case('gem')
                                                    <path d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-15.75C2.34 18 1.5 17.16 1.5 16.125V12.75A3.75 3.75 0 015.25 9h1.875C8.16 9 9 8.161 9 7.125V5.25a3.75 3.75 0 013.75-3.75h.375z"/>
                                                    @break
                                                @case('rocket')
                                                    <path fill-rule="evenodd" d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z" clip-rule="evenodd"/>
                                                    <path d="M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z"/>
                                                    @break
                                                @case('target')
                                                    <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zM12.75 6a.75.75 0 00-1.5 0v.816a3.836 3.836 0 00-1.72.756 3.836 3.836 0 00-.756 1.72H8.25a.75.75 0 000 1.5h.524a3.836 3.836 0 00.756 1.72 3.836 3.836 0 001.72.756V18a.75.75 0 001.5 0v-5.732a3.836 3.836 0 001.72-.756 3.836 3.836 0 00.756-1.72H15.75a.75.75 0 000-1.5h-.524a3.836 3.836 0 00-.756-1.72 3.836 3.836 0 00-1.72-.756V6z" clip-rule="evenodd"/>
                                                    @break
                                                @case('heart')
                                                    <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z"/>
                                                    @break
                                                @case('thumbs-up')
                                                    <path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558-.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z"/>
                                                    @break
                                                @case('gift')
                                                    <path d="M9.375 3a1.875 1.875 0 000 3.75h1.875v4.5H3.375A1.875 1.875 0 011.5 9.375v-.75C1.5 7.636 2.136 7 2.925 7h1.575c-.426-.623-.5-1.531.25-2.25.75-.719 1.781-.719 2.531 0 .375.312.625.781.625 1.25v.25c0 .125.375.375.75.375h.75c.375 0 .75-.25.75-.375v-.25c0-.469.25-.938.625-1.25.75-.719 1.781-.719 2.531 0 .75.719.676 1.627.25 2.25h1.575c.789 0 1.425.636 1.425 1.425v.75a1.875 1.875 0 01-1.875 1.875H13.5v-4.5h1.875a1.875 1.875 0 000-3.75H9.375zM3.375 13.5h6.75V21h-6.75a1.875 1.875 0 01-1.875-1.875v-5.625zm8.625 0H21v5.625A1.875 1.875 0 0119.125 21h-7.125v-7.5z"/>
                                                    @break
                                                @default
                                                    <path 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"/>
                                            @endswitch
                                        </svg>
                                    @else
                                        <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
                                            <path 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"/>
                                        </svg>
                                    @endif
                                </div>
                                <div>
                                    <h4 class="text-lg font-bold text-gray-900 dark:text-white">{{ $rank->name }}</h4>
                                    <div class="text-sm text-blue-600 dark:text-blue-400 font-medium">
                                        {{ $myTeamCount }} من فريقي / {{ $totalCount }} إجمالي
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex gap-2">
                                <button onclick="openEditModal({{ $rank->id }}, '{{ addslashes($rank->name) }}', '{{ addslashes($rank->description) }}', '{{ $rank->icon }}')"
                                        class="text-green-600 hover:text-green-800 dark:text-green-400 p-2 rounded transition-colors"
                                        title="تعديل الرتبة">
                                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                    </svg>
                                </button>
                                
                                <button onclick="confirmDelete({{ $rank->id }}, '{{ addslashes($rank->name) }}', {{ $myTeamCount }})"
                                        class="text-red-600 hover:text-red-800 dark:text-red-400 p-2 rounded transition-colors"
                                        title="إزالة أعضاء فريقي من الرتبة">
                                    <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="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"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        
                        @if($rank->description)
                            <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">{{ Str::limit($rank->description, 100) }}</p>
                        @endif
                        
                        <div class="flex items-center justify-between">
                            <a href="{{ route('moderator.ranks.index', ['rank_id' => $rank->id]) }}"
                               class="inline-flex items-center text-blue-600 hover:text-blue-800 dark:text-blue-400 text-sm font-medium">
                                <svg class="w-4 h-4 ml-1" 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"/>
                                </svg>
                                عرض أعضاء فريقي
                            </a>
                            
                            <button onclick="openAssignModal({{ $rank->id }}, '{{ addslashes($rank->name) }}')"
                                    class="inline-flex items-center text-green-600 hover:text-green-800 dark:text-green-400 text-sm font-medium">
                                <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                                </svg>
                                إضافة عضو من فريقي
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12 text-gray-500 dark:text-gray-400">
                <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" 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"/>
                </svg>
                <h3 class="text-lg font-medium mb-2">لا توجد رتب متاحة</h3>
                <p class="mb-4">ابدأ بإنشاء رتبة جديدة لأعضاء فريقك</p>
                <button onclick="openCreateModal()" 
                        class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                    إضافة رتبة جديدة
                </button>
            </div>
        @endif
    </div>
</div>

{{-- مودال إنشاء رتبة جديدة --}}
<div id="createModal" 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="closeCreateModal()"></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-2xl sm:w-full sm:p-6">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900/20">
                    <svg class="h-6 w-6 text-blue-600 dark:text-blue-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"/>
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">إضافة رتبة جديدة</h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500 dark:text-gray-400">أدخل بيانات الرتبة الجديدة لأعضاء {{ $moderatorGender === 'male' ? 'فريق الشباب' : 'فريق الصبايا' }}</p>
                    </div>
                </div>
            </div>

            <form id="createForm" method="POST" action="{{ route('moderator.ranks.store') }}" class="mt-6 space-y-4">
                @csrf
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">اسم الرتبة *</label>
                        <input type="text" name="name" required placeholder="مثل: نجم الشهر، الأكثر تفاعلاً..."
                               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"/>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">أيقونة الرتبة</label>
                        <select name="icon" 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="star">⭐ نجمة</option>
                            <option value="crown">👑 تاج</option>
                            <option value="shield">🛡️ درع</option>
                            <option value="trophy">🏆 كأس</option>
                            <option value="medal">🏅 ميدالية</option>
                            <option value="fire">🔥 نار</option>
                            <option value="diamond">💎 ماسة</option>
                            <option value="lightning">⚡ برق</option>
                            <option value="gem">💍 جوهرة</option>
                            <option value="rocket">🚀 صاروخ</option>
                            <option value="target">🎯 هدف</option>
                            <option value="heart">❤️ قلب</option>
                            <option value="thumbs-up">👍 إعجاب</option>
                            <option value="gift">🎁 هدية</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وصف الرتبة (اختياري)</label>
                    <textarea name="description" rows="3" placeholder="وصف مختصر عن الرتبة ومعاييرها..."
                              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"></textarea>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">إضافة أعضاء من فريقي للرتبة (اختياري)</label>
                    <select name="member_ids[]" multiple 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" style="height: 120px;">
                        @foreach($availableUsers as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->detailed_role }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">اضغط Ctrl للاختيار المتعدد • فقط أعضاء {{ $moderatorGender === 'male' ? 'فريق الشباب' : 'فريق الصبايا' }}</p>
                </div>

                <div class="flex flex-col sm:flex-row-reverse gap-3 mt-6">
                    <button type="submit" 
                            class="inline-flex justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                        </svg>
                        إنشاء الرتبة
                    </button>
                    <button type="button" onclick="closeCreateModal()" 
                            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>
            </form>
        </div>
    </div>
</div>

{{-- مودال تعديل الرتبة --}}
<div id="editModal" 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="closeEditModal()"></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-2xl sm:w-full sm:p-6">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20">
                    <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">تعديل الرتبة</h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500 dark:text-gray-400" id="editModalTitle"></p>
                    </div>
                </div>
            </div>

            <form id="editForm" method="POST" class="mt-6 space-y-4">
                @csrf
                @method('PUT')
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">اسم الرتبة *</label>
                        <input type="text" name="name" id="editName" 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"/>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">أيقونة الرتبة</label>
                        <select name="icon" id="editIcon" 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="star">⭐ نجمة</option>
                            <option value="crown">👑 تاج</option>
                            <option value="shield">🛡️ درع</option>
                            <option value="trophy">🏆 كأس</option>
                            <option value="medal">🏅 ميدالية</option>
                            <option value="fire">🔥 نار</option>
                            <option value="diamond">💎 ماسة</option>
                            <option value="lightning">⚡ برق</option>
                            <option value="gem">💍 جوهرة</option>
                            <option value="rocket">🚀 صاروخ</option>
                            <option value="target">🎯 هدف</option>
                            <option value="heart">❤️ قلب</option>
                            <option value="thumbs-up">👍 إعجاب</option>
                            <option value="gift">🎁 هدية</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وصف الرتبة (اختياري)</label>
                    <textarea name="description" id="editDescription" 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"></textarea>
                </div>

                <div class="flex flex-col sm:flex-row-reverse gap-3 mt-6">
                    <button type="submit" 
                            class="inline-flex 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-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
                        </svg>
                        حفظ التعديلات
                    </button>
                    <button type="button" onclick="closeEditModal()" 
                            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>
            </form>
        </div>
    </div>
</div>

{{-- مودال إضافة عضو للرتبة --}}
<div id="assignModal" 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="closeAssignModal()"></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>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/20">
                    <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="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">إضافة عضو من فريقي للرتبة</h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500 dark:text-gray-400" id="assignModalTitle"></p>
                    </div>
                </div>
            </div>

            <form id="assignForm" class="mt-6 space-y-4">
                @csrf
                <input type="hidden" id="assignRankId" name="rank_id">
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">اختر العضو من فريقك</label>
                    <select name="user_id" id="assignUserId" 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">
                        <option value="">اختر العضو...</option>
                        @foreach($availableUsers as $user)
                            <option value="{{ $user->id }}">{{ $user->name }} - {{ $user->detailed_role }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">فقط أعضاء {{ $moderatorGender === 'male' ? 'فريق الشباب' : 'فريق الصبايا' }}</p>
                </div>

                <div class="flex flex-col sm:flex-row-reverse gap-3 mt-6">
                    <button type="submit" 
                            class="inline-flex justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                        إضافة للرتبة
                    </button>
                    <button type="button" onclick="closeAssignModal()" 
                            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>
            </form>
        </div>
    </div>
</div>

{{-- مودال تأكيد الحذف --}}
<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>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900/20">
                    <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">إزالة أعضاء فريقي من الرتبة</h3>
                    <div class="mt-2">
                        <p class="text-sm text-gray-500 dark:text-gray-400" id="deleteMessage"></p>
                    </div>
                </div>
            </div>

            <div class="mt-5 sm:mt-6 sm:grid sm:grid-cols-2 sm:gap-3 sm:grid-flow-row-dense">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" 
                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:col-start-2 sm:text-sm">
                        إزالة أعضاء فريقي
                    </button>
                </form>
                <button type="button" onclick="closeDeleteModal()" 
                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
                    إلغاء
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Add CSRF token to page if not already present
if (!document.querySelector('meta[name="csrf-token"]')) {
    const meta = document.createElement('meta');
    meta.name = 'csrf-token';
    meta.content = '{{ csrf_token() }}';
    document.head.appendChild(meta);
}

// Functions for Create Modal
function openCreateModal() {
    document.getElementById('createModal').classList.remove('hidden');
}

function closeCreateModal() {
    document.getElementById('createModal').classList.add('hidden');
    document.getElementById('createForm').reset();
}

// Functions for Edit Modal
function openEditModal(rankId, name, description, icon) {
    document.getElementById('editForm').action = `/moderator/ranks/${rankId}`;
    document.getElementById('editModalTitle').textContent = `تعديل رتبة "${name}"`;
    document.getElementById('editName').value = name;
    document.getElementById('editDescription').value = description || '';
    document.getElementById('editIcon').value = icon || 'star';
    
    document.getElementById('editModal').classList.remove('hidden');
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
    document.getElementById('editForm').reset();
}

// Functions for Assign Modal
function openAssignModal(rankId, rankName) {
    document.getElementById('assignRankId').value = rankId;
    document.getElementById('assignModalTitle').textContent = `إضافة عضو من فريقي لرتبة "${rankName}"`;
    document.getElementById('assignModal').classList.remove('hidden');
}

function closeAssignModal() {
    document.getElementById('assignModal').classList.add('hidden');
    document.getElementById('assignForm').reset();
}

// Functions for Delete Modal
function confirmDelete(rankId, rankName, myTeamCount) {
    let message;
    if (myTeamCount > 0) {
        message = `هل تريد إزالة أعضاء فريقك (${myTeamCount} عضو) من رتبة "${rankName}"؟`;
        if (myTeamCount === 1) {
            message = `هل تريد إزالة العضو من فريقك من رتبة "${rankName}"؟`;
        }
    } else {
        message = `لا يوجد أعضاء من فريقك في رتبة "${rankName}" حالياً.`;
        return; // لا تظهر المودال إذا لم يكن هناك أعضاء
    }
    
    document.getElementById('deleteMessage').textContent = message;
    document.getElementById('deleteForm').action = `/moderator/ranks/${rankId}`;
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
}

// Function to remove member from rank
function removeMemberFromRank(rankId, userId, userName) {
    if (confirm(`هل تريد إزالة ${userName} من هذه الرتبة؟`)) {
        fetch(`/moderator/ranks/remove-member`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                rank_id: rankId,
                user_id: userId
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('حدث خطأ: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ في الشبكة');
        });
    }
}

// Handle assign member form submission
document.getElementById('assignForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(`/moderator/ranks/assign-member`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeAssignModal();
            location.reload();
        } else {
            alert('حدث خطأ: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('حدث خطأ في الشبكة');
    });
});

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeCreateModal();
        closeEditModal();
        closeAssignModal();
        closeDeleteModal();
    }
});

// Auto-close modals when clicking outside
window.onclick = function(event) {
    const modals = ['createModal', 'editModal', 'assignModal', 'deleteModal'];
    modals.forEach(modalId => {
        const modal = document.getElementById(modalId);
        if (event.target === modal) {
            modal.classList.add('hidden');
        }
    });
}

// Show success message for a few seconds
document.addEventListener('DOMContentLoaded', function() {
    const successAlert = document.querySelector('.alert-success');
    if (successAlert) {
        setTimeout(() => {
            successAlert.style.transition = 'opacity 0.5s';
            successAlert.style.opacity = '0';
            setTimeout(() => {
                successAlert.remove();
            }, 500);
        }, 5000);
    }
});
</script>

@endsection