@extends('layouts.app')

@section('title', __('roles.cards.roles'))

@push('styles')
<link href="{{ asset('css/stage-academy.css') }}" rel="stylesheet">
<link href="{{ asset('css/accounts.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('roles.index') }}">{{ __('roles.title') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('roles.cards.roles') }}</li>
                </ol>
            </nav>
            <h4 class="fw-bold mb-0">{{ __('roles.cards.roles') }}</h4>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ route('roles.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-{{ app()->getLocale() == 'ar' ? 'right' : 'left' }}"></i> {{ __('common.back') }}
            </a>
            @if (auth()->user()->hasPermission('roles.create'))
                <a href="{{ route('roles.roles.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-lg me-2"></i> {{ __('roles.add_role') }}
                </a>
            @endif
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card sa-card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead>
                        <tr>
                            <th>{{ __('roles.role_name') }}</th>
                            <th>{{ __('roles.role_key') }}</th>
                            <th>{{ __('roles.permissions_count') }}</th>
                            <th class="text-end">{{ __('common.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($roles as $role)
                            <tr>
                                <td class="fw-semibold">{{ $role->name }}</td>
                                <td><span class="text-muted">{{ $role->key }}</span></td>
                                <td><span class="badge bg-secondary">{{ $role->permissions_count }}</span></td>
                                <td class="text-end">
                                    <div class="btn-group">
                                        @if (auth()->user()->hasPermission('roles.update') && $role->key !== 'super_admin')
                                            <a href="{{ route('roles.roles.edit', $role) }}" class="btn btn-sm btn-outline-primary">
                                                <i class="bi bi-pencil"></i>
                                            </a>
                                        @endif
                                        @if (auth()->user()->hasPermission('roles.view'))
                                            <a href="{{ route('roles.roles.show', $role) }}" class="btn btn-sm btn-outline-secondary">
                                                <i class="bi bi-eye"></i>
                                            </a>
                                        @endif
                                        @if (auth()->user()->hasPermission('roles.delete') && $role->key !== 'super_admin')
                                            <form
                                                method="POST"
                                                action="{{ route('roles.roles.destroy', $role) }}"
                                                class="d-inline"
                                                data-confirm="{{ __('common.confirm_delete') }}"
                                                onsubmit="return confirm(this.getAttribute('data-confirm'))"
                                            >
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-5 text-muted">
                                    <i class="bi bi-inbox fs-1 mb-3 d-block"></i>
                                    {{ __('roles.no_roles_found') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            {{ $roles->links() }}
        </div>
    </div>
</div>
@endsection