@extends('layouts.app')
@section('content')
<div class="content px-3 mt-4">
    <div class="row align-items-center mb-4">
        <div class="col-sm-6">
            <h4 class="font-weight-bold mb-0"><i class="fa fa-user-shield text-primary mr-2"></i> إدارة الأدوار والصلاحيات</h4>
        </div>
        <div class="col-sm-6 text-right">
            @if(request()->has('trashed') && request()->get('trashed') == '1')
                <a href="{{ route('roles.index') }}" class="btn btn-light shadow-sm border" style="border-radius: 8px;">
                    <i class="fa fa-list"></i> عرض الأدوار النشطة
                </a>
            @else
                <a href="{{ route('roles.index', ['trashed' => 1]) }}" class="btn btn-outline-danger shadow-sm mr-2" style="border-radius: 8px;">
                    <i class="fa fa-trash"></i> الأدوار المحذوفة
                </a>
                @if (auth()->user()->can('roles.create'))
                <a href="{{ route('roles.create') }}" class="btn btn-primary shadow-sm" style="border-radius: 8px;">
                    <i class="fa fa-plus"></i> إضافة دور
                </a>
                @endif
            @endif
        </div>
    </div>
    @include('flash::message')
    <!-- KPI Summary Cards -->
    @if(isset($kpis))
    <div class="row mb-4">
        <!-- Total Roles -->
        <div class="col-md-4 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #007bff;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 14px;">إجمالي الأدوار</p>
                            <h3 class="font-weight-bold text-primary mb-0">{{ $kpis['total_roles'] }}</h3>
                        </div>
                        <div class="kpi-icon badge-soft-primary"><i class="fa fa-users-cog"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Total Permissions -->
        <div class="col-md-4 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #17a2b8;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 14px;">صلاحيات النظام</p>
                            <h3 class="font-weight-bold text-info mb-0">{{ $kpis['total_permissions'] }}</h3>
                        </div>
                        <div class="kpi-icon badge-soft-info"><i class="fa fa-key"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Assigned Users -->
        <div class="col-md-4 mb-3">
            <div class="card kpi-card h-100" style="border-bottom: 4px solid #28a745;">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 font-weight-bold" style="font-size: 14px;">تعيينات المستخدمين</p>
                            <h3 class="font-weight-bold text-success mb-0">{{ $kpis['assigned_roles'] }}</h3>
                        </div>
                        <div class="kpi-icon badge-soft-success"><i class="fa fa-user-check"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    <!-- Data Table Card -->
    <div class="card border-0 shadow-sm mb-4" style="border-radius: 12px;">
        <div class="card-body p-4">
            @include('roles.table')
        </div>
    </div>
</div>
@endsection