@extends('layouts.app')
@section('title', 'إدارة الأدوار')

@section('content')
<div class="container py-4">
    <x-header title="إدارة الأدوار" />
    
    @can('role.create')
        <a href="{{ route('roles.create') }}" class="btn btn-success mb-4 shadow-sm rounded-2">
            <i class="fa-solid fa-plus me-1"></i> إضافة دور جديد
        </a>
    @endcan

    <x-alert />

    @if($roles->isEmpty())
        <div class="alert alert-info text-center rounded-3 py-4 border-0 shadow-sm">
            <i class="fa-solid fa-circle-info fs-3 text-info mb-2"></i>
            <h6 class="fw-bold text-dark">لا توجد أدوار مسجلة حالياً</h6>
        </div>
    @else
        {{-- 🗂️ منطقة الأكورديون الذكي للأدوار (يعمل بكفاءة على جميع الشاشات) --}}
        <div class="accordion custom-roles-accordion d-flex flex-column gap-3 mb-4" id="rolesAccordion">
            @foreach($roles as $role)
                @php 
                    $roleIdStr = "roleCollapse_" . $role->id; 
                    $groupedPermissions = $role->permissions->groupBy('group_name');
                @endphp
                
                <div class="accordion-item border-0 shadow-sm rounded-3 overflow-hidden">
                    
                    {{-- هيدر الأكورديون (اسم الدور + الإجراءات) --}}
                    <h2 class="accordion-header" id="heading_{{ $role->id }}">
                        <div class="accordion-button collapsed bg-white p-3 d-flex flex-wrap justify-content-between align-items-center gap-2" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#{{ $roleIdStr }}" 
                                aria-expanded="false" 
                                aria-controls="{{ $roleIdStr }}">
                            
                            {{-- الجانب الأيمن: الترقيم واسم الدور --}}
                            <div class="d-flex align-items-center gap-2.5 flex-grow-1">
                                <span class="badge bg-dark rounded-pill fw-bold">
                                    {{ $loop->iteration + ($roles->currentPage() - 1) * $roles->perPage() }}
                                </span>
                                <span class="fw-bold text-dark fs-5 card-role-title">
                                    {{ $role->name }}
                                </span>
                                <span class="badge bg-light text-secondary border rounded-pill font-xs px-2.5 py-1 fw-normal d-none d-sm-inline-block">
                                    {{ $groupedPermissions->count() }} مجموعات صلاحيات
                                </span>
                            </div>

                            {{-- الجانب الأيسر: أزرار التعديل والحذف (تم إيقاف تفعيل الـ Collapse عند الضغط عليها بذكاء) --}}
                            @canany(['role.edit', 'role.delete'])
                                <div class="d-flex gap-1 me-3 action-buttons-wrapper" onclick="event.stopPropagation();">
                                    @can('role.edit')
                                        <a href="{{ route('roles.edit', $role->id) }}" class="btn btn-sm btn-outline-warning rounded-2" title="تعديل">
                                            <i class="fa-regular fa-pen-to-square"></i>
                                        </a>
                                    @endcan
                                    @can('role.delete')
                                        <button type="button" class="btn btn-sm btn-outline-danger rounded-2" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $role->id }}" title="حذف">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>
                                        <x-delete-modal :id="$role->id" model="roles" :title="$role->name" />
                                    @endcan
                                </div>
                            @endcanany

                        </div>
                    </h2>

                    {{-- محتوى الأكورديون المنسدل (شبكة عرض المجموعات والـ Badges) --}}
                    <div id="{{ $roleIdStr }}" class="accordion-collapse collapse" aria-labelledby="heading_{{ $role->id }}" data-bs-parent="#rolesAccordion">
                        <div class="accordion-body bg-neutral-light border-top p-4">
                            
                            @if($groupedPermissions->isEmpty())
                                <div class="text-muted text-center py-2 italic font-sm">
                                    <i class="fa-solid fa-circle-info me-1"></i> لا توجد صلاحيات مرتبطة بهذا الدور حالياً.
                                </div>
                            @else
                                {{-- عرض منسق ومرن متوافق مع كافة مقاسات الشاشات --}}
                                <div class="row g-3">
                                    @foreach($groupedPermissions as $groupName => $permissions)
                                        <div class="col-xl-4 col-lg-6 col-md-12">
                                            <div class="p-3 rounded-3 bg-white border border-light-subtle shadow-xs h-100 group-inner-card">
                                                
                                                {{-- عنوان المجموعة داخل الدور --}}
                                                <div class="fw-bold text-dark border-bottom pb-2 mb-2.5 d-flex align-items-center justify-content-between">
                                                    <span class="font-sm"><i class="fa-regular fa-folder-open text-primary me-1"></i> {{ $groupName ?? 'عام' }}</span>
                                                    <span class="badge bg-secondary-subtle text-secondary rounded-pill font-xs fw-normal">{{ $permissions->count() }}</span>
                                                </div>

                                                {{-- الـ Badges الملونة للصلاحيات فرعياً --}}
                                                <div class="d-flex flex-wrap gap-1.5">
                                                    @foreach($permissions as $permission)
                                                        @php
                                                            $bgClass = 'bg-body-secondary text-dark border-secondary-subtle';
                                                            $icon = 'fa-circle';
                                                            if (str_contains($permission->name, 'view')) { $bgClass = 'bg-info-subtle text-info-emphasis border-info-subtle'; $icon = 'fa-eye'; }
                                                            elseif (str_contains($permission->name, 'create')) { $bgClass = 'bg-success-subtle text-success-emphasis border-success-subtle'; $icon = 'fa-plus'; }
                                                            elseif (str_contains($permission->name, 'edit')) { $bgClass = 'bg-warning-subtle text-warning-emphasis border-warning-subtle'; $icon = 'fa-pen'; }
                                                            elseif (str_contains($permission->name, 'delete')) { $bgClass = 'bg-danger-subtle text-danger-emphasis border-danger-subtle'; $icon = 'fa-trash-can'; }
                                                        @endphp
                                                        <span class="badge d-inline-flex align-items-center gap-1 border px-2 py-1.5 rounded-2 {{ $bgClass }}" style="font-size: 0.8rem; font-weight: 500;">
                                                            <i class="fa-solid {{ $icon }}" style="font-size: 0.7rem;"></i>
                                                            {{ $permission->name_ar ?? $permission->name }}
                                                        </span>
                                                    @endforeach
                                                </div>

                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif

                        </div>
                    </div>

                </div>
            @endforeach
        </div>
    @endif

    {{-- الترقيم السفلّي للصفحات --}}
    <x-pagination :data="$roles" />
</div>

{{-- التنسيقات البصرية والجمالية المخصصة --}}
<style>
    /* إلغاء الـ تظليل الافتراضي والتحكم بشكل السهم الخاص بالبوتستراب */
    .accordion-button:not(.collapsed) {
        background-color: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
    .accordion-button::after {
        margin-right: auto; /* يدعم اتجاه الصفحات الـ RTL العربية */
        margin-left: 0;
    }
    .accordion-button:focus {
        box-shadow: none !important;
        border-color: rgba(0, 0, 0, 0.125);
    }
    .bg-neutral-light {
        background-color: #fcfcfd !important;
    }
    .shadow-xs {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }
    .gap-2\.5 { gap: 0.625rem !important; }
    .mb-2\.5 { margin-bottom: 0.625rem !important; }
    .font-sm { font-size: 0.9rem !important; }
    .font-xs { font-size: 0.775rem !important; }

    /* تأثير الهوفير الخفيف على الكروت المنسدلة */
    .group-inner-card {
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .group-inner-card:hover {
        border-color: #cbd5e1 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    }

    /* الألوان المتناسقة للـ Badges */
    .bg-info-subtle { background-color: #e0f7fa !important; }
    .bg-success-subtle { background-color: #e8f5e9 !important; }
    .bg-warning-subtle { background-color: #fff3e0 !important; }
    .bg-danger-subtle { background-color: #ffebee !important; }
    
    /* مواءمة الهيدر والأزرار في الشاشات الصغيرة جداً */
    @media (max-width: 425px) {
        .accordion-button {
            padding: 1rem 0.75rem !important;
        }
        .action-buttons-wrapper {
            margin-right: 0 !important;
            width: 100%;
            justify-content: flex-end;
            margin-top: 0.5rem;
        }
        .card-role-title {
            font-size: 1rem !important;
        }
    }
</style>
@endsection