@extends('layouts.app')

@section('title', 'تفاصيل الدور')

@section('content')
<div class="container-fluid">
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">لوحة التحكم</a></li>
                <li class="breadcrumb-item"><a href="{{ route('roles.index') }}">الأدوار</a></li>
                <li class="breadcrumb-item active">{{ $role->name }}</li>
            </ol>
        </nav>
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h1 class="h3 mb-0">{{ ucwords(str_replace('_', ' ', $role->name)) }}</h1>
                @if($role->name === 'super_admin')
                    <span class="badge bg-danger mt-2">مدير عام</span>
                @endif
            </div>
            @if($role->name !== 'super_admin')
                <div class="btn-group">
                    <a href="{{ route('roles.edit', $role) }}" class="btn btn-primary">
                        <i class="bi bi-pencil"></i> تعديل
                    </a>
                    @if($role->users()->count() === 0)
                        <button type="button" 
                                class="btn btn-danger" 
                                onclick="confirmDelete({{ $role->id }}, '{{ $role->name }}')">
                            <i class="bi bi-trash"></i> حذف
                        </button>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <div class="row">
        <!-- معلومات الدور -->
        <div class="col-md-4">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>معلومات الدور
                    </h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm">
                        <tr>
                            <th width="40%">الاسم التقني:</th>
                            <td><code>{{ $role->name }}</code></td>
                        </tr>
                        <tr>
                            <th>عدد الصلاحيات:</th>
                            <td><span class="badge bg-info">{{ $role->permissions->count() }}</span></td>
                        </tr>
                        <tr>
                            <th>عدد المستخدمين:</th>
                            <td><span class="badge bg-secondary">{{ $role->users->count() }}</span></td>
                        </tr>
                        <tr>
                            <th>تاريخ الإنشاء:</th>
                            <td>{{ $role->created_at->format('Y-m-d') }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!-- المستخدمون -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-people me-2"></i>المستخدمون ({{ $role->users->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    @if($role->users->count() > 0)
                        <div class="list-group list-group-flush">
                            @foreach($role->users as $user)
                                <a href="{{ route('users.show', $user) }}" class="list-group-item list-group-item-action">
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle bg-primary bg-opacity-10 text-primary me-2">
                                            {{ substr($user->name, 0, 1) }}
                                        </div>
                                        <div>
                                            <div class="fw-bold">{{ $user->name }}</div>
                                            <small class="text-muted">{{ $user->email }}</small>
                                        </div>
                                    </div>
                                </a>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted text-center mb-0">
                            <i class="bi bi-people"></i><br>
                            لا يوجد مستخدمون في هذا الدور
                        </p>
                    @endif
                </div>
            </div>
        </div>

        <!-- الصلاحيات -->
        <div class="col-md-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-key me-2"></i>الصلاحيات ({{ $role->permissions->count() }})
                    </h5>
                </div>
                <div class="card-body">
                    @php
                        $groupedPermissions = $role->permissions->groupBy(function($permission) {
                            return explode('_', $permission->name)[1] ?? 'other';
                        });

                        $permissionGroups = [
                            'organizations' => ['title' => 'الهيئات', 'icon' => 'building'],
                            'departments' => ['title' => 'الأقسام', 'icon' => 'diagram-3'],
                            'units' => ['title' => 'الشعب', 'icon' => 'grid-3x3'],
                            'items' => ['title' => 'المواد', 'icon' => 'box-seam'],
                            'barcodes' => ['title' => 'الباركودات', 'icon' => 'upc-scan'],
                            'devices' => ['title' => 'الأجهزة', 'icon' => 'laptop'],
                            'maintenance' => ['title' => 'الصيانة', 'icon' => 'tools'],
                            'reports' => ['title' => 'التقارير', 'icon' => 'file-earmark-bar-graph'],
                            'users' => ['title' => 'المستخدمين', 'icon' => 'people'],
                            'roles' => ['title' => 'الأدوار', 'icon' => 'shield-check'],
                            'permissions' => ['title' => 'الصلاحيات', 'icon' => 'key'],
                        ];

                        $permissionLabels = [
                            'view' => 'عرض',
                            'create' => 'إضافة',
                            'edit' => 'تعديل',
                            'delete' => 'حذف',
                            'generate' => 'توليد',
                            'print' => 'طباعة',
                            'export' => 'تصدير',
                            'manage' => 'إدارة',
                        ];
                    @endphp

                    @if($role->permissions->count() > 0)
                        <div class="row g-3">
                            @foreach($permissionGroups as $group => $groupInfo)
                                @if(isset($groupedPermissions[$group]) && $groupedPermissions[$group]->count() > 0)
                                    <div class="col-md-6">
                                        <div class="border rounded p-3 h-100 bg-light">
                                            <h6 class="border-bottom pb-2 mb-3">
                                                <i class="bi bi-{{ $groupInfo['icon'] }} text-primary me-2"></i>
                                                {{ $groupInfo['title'] }}
                                            </h6>
                                            <div class="d-flex flex-wrap gap-2">
                                                @foreach($groupedPermissions[$group] as $permission)
                                                    @php
                                                        $parts = explode('_', $permission->name);
                                                        $action = $parts[0];
                                                        $label = $permissionLabels[$action] ?? $action;
                                                    @endphp
                                                    <span class="badge bg-success">
                                                        <i class="bi bi-check-circle me-1"></i>{{ $label }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-key fs-1 d-block mb-3"></i>
                            لا توجد صلاحيات مرتبطة بهذا الدور
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4">
        <a href="{{ route('roles.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-right"></i> العودة للقائمة
        </a>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>هل أنت متأكد من حذف الدور <strong id="roleName"></strong>؟</p>
                <p class="text-danger mb-0">لا يمكن التراجع عن هذا الإجراء</p>
            </div>
            <div class="modal-footer">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-danger">حذف</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function confirmDelete(roleId, roleName) {
    document.getElementById('roleName').textContent = roleName;
    document.getElementById('deleteForm').action = '/roles/' + roleId;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endpush

@push('styles')
<style>
.avatar-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
</style>
@endpush