@extends('backend.layout.app')

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="mb-0">Roles Management</h4>
            <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createRoleModal">
                <i class="bx bx-plus"></i> Create New Role
            </button>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 50px;">#</th>
                                <th>Role Name</th>
                                <th>Permissions Count</th>
                                <th style="width: 150px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($roles as $index => $role)
                                <tr id="partenTr_{{ $role->id }}">
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        {{ ucwords(str_replace('_', ' ', $role->name)) }}
                                        @if($role->name === 'super_admin')
                                            <span class="badge bg-danger ms-1">System Protected</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ $role->name === 'super_admin' ? 'All' : $role->permissions->count() }}</span>
                                    </td>
                                    <td class="text-center">
                                        <div class="action-btn-group">
                                            @if($role->name !== 'super_admin')
                                                <button type="button" class="action-btn action-btn-edit"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#editRoleModal{{ $role->id }}"
                                                        title="Edit Role">
                                                    <i class="bi bi-pencil-square"></i>
                                                </button>
                                                
                                                <a href="{{ route('admin.role.permission.assign', $role->id) }}" class="action-btn action-btn-info" title="Manage Permissions">
                                                    <i class="bi bi-shield-lock"></i>
                                                </a>

                                                <a href="javascript:void(0)" class="action-btn action-btn-danger deleteButton"
                                                    data-url="{{ route('admin.role.delete', $role->id) }}"
                                                    data-parentid="partenTr_{{ $role->id }}"
                                                    title="Delete Role">
                                                    <i class="bi bi-trash3-fill"></i>
                                                </a>
                                            @else
                                                <span class="text-muted small">Cannot Modify</span>
                                            @endif
                                        </div>
                                    </td>
                                </tr>

                                {{-- Edit Role Modal --}}
                                @if($role->name !== 'super_admin')
                                <div class="modal fade" id="editRoleModal{{ $role->id }}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <form action="{{ route('admin.role.update', $role->id) }}" method="POST">
                                                @csrf
                                                @method('PUT')
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Edit Role</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label class="form-label">Role Name <span class="text-danger">*</span></label>
                                                        <input type="text" name="name" class="form-control" value="{{ $role->name }}" required>
                                                        <small class="text-muted">Use lowercase and underscores instead of spaces (e.g. content_manager)</small>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                    <button type="submit" class="btn btn-primary">Update Role</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Create Role Modal --}}
<div class="modal fade" id="createRoleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="{{ route('admin.role.store') }}" method="POST">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Create New Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Role Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" placeholder="e.g. content_manager" required>
                        <small class="text-muted">Use lowercase and underscores instead of spaces (e.g. content_manager)</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Create Role</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection