@extends('admin.layout.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Role Details: {{ $role->name }}</h3>
                    <div class="card-tools">
                        <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                        <a href="{{ route('admin.roles.edit', $role) }}" class="btn btn-warning btn-sm">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Role Information</h5>
                            <table class="table table-borderless">
                                <tr>
                                    <th>Name:</th>
                                    <td>{{ $role->name }}</td>
                                </tr>
                                <tr>
                                    <th>Slug:</th>
                                    <td>{{ $role->slug }}</td>
                                </tr>
                                <tr>
                                    <th>Description:</th>
                                    <td>{{ $role->description ?: 'No description' }}</td>
                                </tr>
                                <tr>
                                    <th>Created At:</th>
                                    <td>{{ $role->created_at->format('d M Y, H:i') }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5>Permissions ({{ $role->permissions->count() }})</h5>
                            @if($role->permissions->count() > 0)
                                <div class="mb-3">
                                    @foreach($role->permissions as $permission)
                                        <span class="badge badge-primary mr-1 mb-1">{{ $permission->name }}</span>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-muted">No permissions assigned.</p>
                            @endif
                        </div>
                    </div>

                    <hr>

                    <h5>Assigned Admins ({{ $role->admins->count() }})</h5>
                    @if($role->admins->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Email</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($role->admins as $admin)
                                        <tr>
                                            <td>{{ $admin->id }}</td>
                                            <td>{{ $admin->name }}</td>
                                            <td>{{ $admin->email }}</td>
                                            <td>
                                                <form action="{{ route('admin.roles.remove-admin', [$role, $admin]) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Remove this admin from the role?')">
                                                        <i class="fas fa-user-minus"></i> Remove
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <p class="text-muted">No admins assigned to this role.</p>
                    @endif

                    <hr>

                    <h5>Assign Admin to Role</h5>
                    <form action="{{ route('admin.roles.assign-admin', $role) }}" method="POST">
                        @csrf
                        <div class="form-row">
                            <div class="col-md-8">
                                <select name="admin_id" class="form-control" required>
                                    <option value="">Select Admin</option>
                                    @foreach(\App\Models\Admin::whereDoesntHave('roles', function($query) use ($role) {
                                        $query->where('role_id', $role->id);
                                    })->get() as $admin)
                                        <option value="{{ $admin->id }}">{{ $admin->name }} ({{ $admin->email }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-user-plus"></i> Assign Admin
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection