{{-- resources/views/roles/edit.blade.php --}}
@extends('layouts.app')

@section('title', 'Edit Role')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold">Edit Role</h2>
                    <small class="text-muted">Update role: {{ $role->display_name }}</small>
                </div>
                <div class="d-flex gap-2">
                    @can('roles.edit')
                        <a href="{{ route('roles.assign-permissions', $role->id) }}" class="btn btn-primary">
                            <i class="fas fa-key me-1"></i> Manage Permissions
                        </a>
                    @endcan
                    <a href="{{ route('roles.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back to Roles
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-warning text-dark">
            <h5 class="mb-0"><i class="fas fa-edit me-2"></i> Edit Role</h5>
        </div>
        <div class="card-body">
            @can('roles.edit')<form method="POST" action="{{ route('roles.update', $role->id) }}">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Role Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name', $role->name) }}" required>
                        <small class="text-muted">Lowercase, use underscores instead of spaces</small>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label">Display Name <span class="text-danger">*</span></label>
                        <input type="text" name="display_name" class="form-control @error('display_name') is-invalid @enderror"
                               value="{{ old('display_name', $role->display_name) }}" required>
                        @error('display_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">Description</label>
                        <textarea name="description" class="form-control @error('description') is-invalid @enderror"
                                  rows="2">{{ old('description', $role->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <hr>

                {{-- Permissions are managed on their own screen, not here --}}
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 p-3 mb-1 rounded"
                     style="background:#f7f9fc; border:1px solid #e6e9ef;">
                    <div>
                        <h6 class="fw-bold mb-1"><i class="fas fa-key me-2 text-primary"></i> Permissions</h6>
                        <small class="text-muted">
                            Permissions for <strong>{{ $role->display_name }}</strong> are managed on a dedicated screen,
                            grouped by Prisons, Probation and Independent modules.
                        </small>
                    </div>
                    <a href="{{ route('roles.assign-permissions', $role->id) }}" class="btn btn-outline-primary">
                        <i class="fas fa-sliders me-1"></i> Manage Permissions
                    </a>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save"></i> Update Role
                    </button>
                    <a href="{{ route('roles.index') }}" class="btn btn-secondary">
                        <i class="fas fa-times"></i> Cancel
                    </a>
                </div>
            </form>@endcan
        </div>
    </div>
</div>
@endsection