@extends('layouts.app')

@section('title', 'Role Details - ' . $role->name)
@section('page-title', 'Role Details')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="custom-card">
                <div class="custom-card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-user-tag me-2"></i>
                            Role Details: {{ $role->name }}
                        </h5>
                        <div class="d-flex gap-2">
                            <a href="{{ route('roles.edit', $role) }}" class="btn btn-warning btn-sm">
                                <i class="fas fa-edit me-1"></i>Edit
                            </a>
                            <a href="{{ route('roles.index') }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>Back
                            </a>
                        </div>
                    </div>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Role Name</label>
                                <p class="form-control-plaintext">{{ $role->name }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Slug</label>
                                <p class="form-control-plaintext">{{ $role->slug }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Description</label>
                        <p class="form-control-plaintext">{{ $role->description ?: 'No description provided' }}</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Status</label>
                                <p class="form-control-plaintext">
                                    @if($role->is_active)
                                        <span class="badge bg-success">Active</span>
                                    @else
                                        <span class="badge bg-danger">Inactive</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Type</label>
                                <p class="form-control-plaintext">
                                    @if($role->is_system)
                                        <span class="badge bg-warning">System</span>
                                    @else
                                        <span class="badge bg-secondary">Custom</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Sort Order</label>
                                <p class="form-control-plaintext">{{ $role->sort_order }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label fw-bold">Permissions</label>
                        @if(count($role->permissions ?? []) > 0)
                            <div class="row">
                                @foreach($role->permissions as $permissionId)
                                    @php
                                        $permission = \App\Models\Permission::find($permissionId);
                                    @endphp
                                    @if($permission)
                                        <div class="col-md-4 mb-2">
                                            <span class="badge bg-primary">{{ $permission->description }}</span>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted">No permissions assigned</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="custom-card">
                <div class="custom-card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar me-2"></i>
                        Statistics
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-3">
                            <div class="bg-primary bg-opacity-10 rounded-circle p-3 mx-auto mb-2" style="width: 60px; height: 60px;">
                                <i class="fas fa-users text-primary fa-lg"></i>
                            </div>
                            <h4 class="mb-0 text-primary">{{ $stats['total_users'] }}</h4>
                            <small class="text-muted">Total Users</small>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="bg-success bg-opacity-10 rounded-circle p-3 mx-auto mb-2" style="width: 60px; height: 60px;">
                                <i class="fas fa-user-check text-success fa-lg"></i>
                            </div>
                            <h4 class="mb-0 text-success">{{ $stats['active_users'] }}</h4>
                            <small class="text-muted">Active Users</small>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="bg-info bg-opacity-10 rounded-circle p-3 mx-auto mb-2" style="width: 60px; height: 60px;">
                                <i class="fas fa-shield-alt text-info fa-lg"></i>
                            </div>
                            <h4 class="mb-0 text-info">{{ $stats['permissions_count'] }}</h4>
                            <small class="text-muted">Permissions</small>
                        </div>
                    </div>
                </div>
            </div>
            
            @if($role->users->count() > 0)
                <div class="custom-card mt-3">
                    <div class="custom-card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-users me-2"></i>
                            Assigned Users
                        </h5>
                    </div>
                    <div class="custom-card-body">
                        @foreach($role->users as $user)
                            <div class="d-flex align-items-center mb-2">
                                <div class="avatar me-2">
                                    @if($user->profile_photo)
                                        <img src="{{ Storage::url($user->profile_photo) }}" 
                                             alt="{{ $user->name }}" 
                                             class="rounded-circle" 
                                             width="30" height="30">
                                    @else
                                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white" 
                                             style="width: 30px; height: 30px;">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    @endif
                                </div>
                                <div>
                                    <h6 class="mb-0">{{ $user->name }}</h6>
                                    <small class="text-muted">{{ $user->email }}</small>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection