@extends('layouts.app')
@section('title', __('dashboard.sidebar_roles'))
@section('page_heading', __('dashboard.sidebar_roles'))

@section('content')

<style>
.page-table tbody tr { border-bottom: 1px solid var(--border-subtle); transition: background .12s; }
.page-table tbody tr:hover { background: var(--surface-50); }
.page-th { padding: .65rem 1.1rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: start; border-bottom: 1px solid var(--border); white-space: nowrap; }
</style>

<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden">

    {{-- Head --}}
    <div style="display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-shield" style="color:var(--c-primary)"></i>
            {{ __('dashboard.Roles') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $roles->total() }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            @can('view permissions')
            <a href="{{ route('dashboard.permissions.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-key me-1"></i>{{ __('dashboard.Permissions') }}
            </a>
            @endcan
            @can('create roles')
            <a href="{{ route('dashboard.roles.create') }}" class="app-btn app-btn--primary app-btn--sm">
                <i class="fa-solid fa-plus me-1"></i>{{ __('dashboard.Add Role') }}
            </a>
            @endcan
        </div>
    </div>

    @if($roles->isEmpty())
        <div style="padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon' => 'fa-solid fa-shield', 'title' => __('dashboard.No roles found.'), 'message' => ''])
        </div>
    @else
    <div style="overflow-x:auto">
        <table class="page-table" style="width:100%;border-collapse: collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    <th class="page-th">{{ __('dashboard.Name') }}</th>
                    <th class="page-th">{{ __('dashboard.Guard Name') }}</th>
                    <th class="page-th">الحالة</th>
                    <th class="page-th">{{ __('dashboard.Created At') }}</th>
                    <th class="page-th" style="text-align:end">{{ __('dashboard.Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($roles as $role)
                @php $isProtected = \App\Support\PermissionRegistry::isProtectedRole($role->name); @endphp
                <tr>
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;align-items:center;gap:.625rem">
                            <div style="width:2rem;height:2rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8rem;background:{{ $isProtected ? '#fef2f2' : 'var(--c-primary-bg)' }};color:{{ $isProtected ? '#dc2626' : 'var(--c-primary)' }}">
                                <i class="{{ $isProtected ? 'fa-solid fa-shield-halved' : 'fa-solid fa-id-badge' }}"></i>
                            </div>
                            <div>
                                <div style="font-weight:800;color:var(--text-primary)">{{ \App\Support\PermissionRegistry::roleLabel($role->name) }}</div>
                                <div style="font-size:.68rem;color:var(--text-muted)">#{{ $role->id }}</div>
                            </div>
                        </div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;align-items:center;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--c-primary-bg);color:var(--c-primary)">{{ $role->guard_name }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @if($isProtected)
                            <span style="display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#fffbeb;color:#d97706"><i class="fa-solid fa-lock"></i> محمي</span>
                        @else
                            <span style="display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:#f0fdf4;color:#16a34a"><i class="fa-solid fa-circle-check"></i> نشط</span>
                        @endif
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.75rem;color:var(--text-muted)">{{ $role->created_at->format('Y-m-d') }}</td>
                    <td style="padding:.875rem 1.25rem;text-align:end">
                        @canany(['edit roles','delete roles'])
                        <div class="custom-dropdown">
                            <button class="custom-dropdown__toggle">{{ __('dashboard.Actions') }}</button>
                            <div class="custom-dropdown__menu custom-dropdown__menu--end">
                                @can('edit roles')
                                <a href="{{ route('dashboard.roles.edit', $role->id) }}" class="custom-dropdown__item">
                                    <i class="fa-solid fa-pen me-2"></i>{{ __('dashboard.Edit') }}
                                </a>
                                @endcan
                                @can('delete roles')
                                <form action="{{ route('dashboard.roles.destroy', $role->id) }}" method="POST">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="custom-dropdown__item custom-dropdown__item--danger" data-confirm-delete="{{ __('dashboard.Are you sure?') }}">
                                        <i class="fa-solid fa-trash me-2"></i>{{ __('dashboard.Delete') }}
                                    </button>
                                </form>
                                @endcan
                            </div>
                        </div>
                        @endcanany
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $roles->links() }}
    </div>
    @endif
</div>
@endsection