@extends('layouts.admin')

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

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Edit Permission</h1>
        <a href="{{ route('admin.permissions.index') }}" class="btn btn-secondary btn-sm shadow-sm">
            <i class="fas fa-arrow-left fa-sm me-2"></i> Back to List
        </a>
    </div>

    <!-- Error Display -->
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-exclamation-triangle me-2"></i>Please fix the following errors:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Edit Form Card -->
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
            <h6 class="m-0 font-weight-bold text-primary">Editing: {{ $permission->name }}</h6>
            <span class="badge bg-primary">ID: {{ $permission->id }}</span>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.permissions.update', $permission->id) }}" method="POST" id="editPermissionForm">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-12">
                        <!-- Permission Name -->
                        <div class="mb-3">
                            <label for="name" class="form-label">
                                Permission Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name', $permission->name) }}" 
                                   placeholder="e.g., view-users, create-posts, edit-settings"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                Use kebab-case format (e.g., view-users, manage-roles)
                            </small>
                        </div>

                        <!-- Guard Name -->
                        <div class="mb-3">
                            <label for="guard_name" class="form-label">Guard Name</label>
                            <select class="form-control @error('guard_name') is-invalid @enderror" 
                                    id="guard_name" 
                                    name="guard_name">
                                <option value="web" {{ old('guard_name', $permission->guard_name) == 'web' ? 'selected' : '' }}>Web</option>
                                <option value="api" {{ old('guard_name', $permission->guard_name) == 'api' ? 'selected' : '' }}>API</option>
                            </select>
                            @error('guard_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Display Name (Optional) -->
                        <div class="mb-3">
                            <label for="display_name" class="form-label">Display Name (Optional)</label>
                            <input type="text" 
                                   class="form-control @error('display_name') is-invalid @enderror" 
                                   id="display_name" 
                                   name="display_name" 
                                   value="{{ old('display_name', $permission->display_name ?? '') }}" 
                                   placeholder="e.g., View Users">
                            @error('display_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description (Optional) -->
                        <div class="mb-3">
                            <label for="description" class="form-label">Description (Optional)</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3" 
                                      placeholder="Describe what this permission allows...">{{ old('description', $permission->description ?? '') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Associated Roles -->
                        @if(isset($permission->roles) && $permission->roles->count() > 0)
                            <div class="mb-3">
                                <label class="form-label">Associated Roles</label>
                                <div class="p-3 border rounded bg-light">
                                    @foreach($permission->roles as $role)
                                        <span class="badge bg-info me-2 mb-2 p-2">
                                            {{ $role->name }}
                                        </span>
                                    @endforeach
                                </div>
                                <small class="text-muted">
                                    This permission is assigned to the roles above. Editing the permission name will affect all these roles.
                                </small>
                            </div>
                        @endif

                        <!-- Metadata -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <small class="text-muted">
                                    <strong>Created:</strong> {{ $permission->created_at ? $permission->created_at->format('F j, Y g:i A') : 'N/A' }}
                                </small>
                            </div>
                            <div class="col-md-6 text-md-end">
                                <small class="text-muted">
                                    <strong>Last Updated:</strong> {{ $permission->updated_at ? $permission->updated_at->format('F j, Y g:i A') : 'N/A' }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="d-flex justify-content-end gap-2 mt-4">
                    <a href="{{ route('admin.permissions.index') }}" class="btn btn-secondary me-2">
                        <i class="fas fa-times me-2"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-2"></i>Update Permission
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .gap-2 {
        gap: 0.5rem;
    }
    .badge.bg-info {
        font-size: 0.9rem;
    }
</style>
@endpush

@push('scripts')
<script>
    $(document).ready(function() {
        // Optional: Confirm before updating if name has changed
        let originalName = $('#name').val();
        
        $('#editPermissionForm').submit(function(e) {
            let newName = $('#name').val().trim();
            
            if (newName === '') {
                e.preventDefault();
                alert('Permission name is required');
                $('#name').focus();
                return;
            }
            
            // Confirm if changing permission name
            if (newName !== originalName) {
                if (!confirm('Changing the permission name may affect existing role assignments. Are you sure you want to continue?')) {
                    e.preventDefault();
                }
            }
        });
    });
</script>
@endpush