@extends('admin-panel::dashboard.layouts.app')

@section('title', 'Edit Role')
@section('header', 'Edit Role: ' . $role->name)

@section('content')

    <div class="flex items-center gap-2 mb-6 text-sm">
        <a href="{{ route('dashboard') }}" class="text-gray-500 dark:text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors duration-200 font-medium">
            Home
        </a>
        <i class="fa-solid fa-chevron-right text-xs text-gray-400 dark:text-gray-600"></i>
        <a href="{{ route('dynamic-roles.roles.index') }}" class="text-gray-500 dark:text-gray-400 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors duration-200 font-medium">
            Roles
        </a>
        <i class="fa-solid fa-chevron-right text-xs text-gray-400 dark:text-gray-600"></i>
        <span class="text-gray-800 dark:text-white font-semibold">Edit Role</span>
    </div>

    <div class="glass-card rounded-2xl overflow-hidden border border-gray-200 dark:border-white/5 relative fade-in max-w-5xl mx-auto">
        
        <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>

        <div class="p-6 md:p-8 border-b border-gray-200 dark:border-white/10">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center shadow-lg shadow-blue-500/10">
                    <i class="fas fa-user-pen text-xl text-blue-600 dark:text-blue-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Edit Role: <span class="text-indigo-600 dark:text-indigo-400">{{ $role->name }}</span></h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Update role details and permissions</p>
                </div>
            </div>
        </div>

        <form action="{{ route('dynamic-roles.roles.update', $role) }}" method="POST" class="p-6 md:p-8">
            @csrf
            @method('PUT')
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                
                <div class="space-y-2">
                    <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Role Name</label>
                    <input type="text" 
                           name="name" 
                           id="name" 
                           value="{{ old('name', $role->name) }}"
                           class="w-full bg-gray-50 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-xl px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-indigo-500 transition-all placeholder-gray-400 dark:placeholder-gray-600"
                           required>
                </div>

                <div class="space-y-2">
                    <label for="slug" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Slug</label>
                    <input type="text" 
                           name="slug" 
                           id="slug" 
                           value="{{ old('slug', $role->slug) }}"
                           class="w-full bg-gray-50 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-xl px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-indigo-500 transition-all placeholder-gray-400 dark:placeholder-gray-600">
                </div>

                <div class="md:col-span-2 space-y-2">
                    <label for="parent_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Parent Role (Optional)</label>
                    <div class="relative">
                        <select name="parent_id" 
                                id="parent_id"
                                class="w-full bg-gray-50 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-xl px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-indigo-500 transition-all appearance-none cursor-pointer">
                            <option value="">No Parent</option>
                            @foreach($roles as $parentRole)
                                <option value="{{ $parentRole->id }}" {{ old('parent_id', $role->parent_id) == $parentRole->id ? 'selected' : '' }}>
                                    {{ $parentRole->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none text-gray-500 dark:text-gray-400">
                            <i class="fa-solid fa-chevron-down text-xs"></i>
                        </div>
                    </div>
                </div>

                <div class="md:col-span-2 space-y-2">
                    <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
                    <textarea name="description" 
                              id="description" 
                              rows="3"
                              class="w-full bg-gray-50 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-xl px-4 py-3 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 dark:focus:ring-indigo-500/50 focus:border-indigo-500 transition-all placeholder-gray-400 dark:placeholder-gray-600 resize-none">{{ old('description', $role->description) }}</textarea>
                </div>

                <div class="md:col-span-2">
                    <input type="hidden" name="is_active" value="0">
                    <label class="flex items-center p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50/50 dark:bg-white/5 cursor-pointer hover:bg-gray-100 dark:hover:bg-white/10 transition-colors w-fit">
                        <div class="relative flex items-center">
                            <input type="checkbox" 
                                   name="is_active" 
                                   id="is_active" 
                                   value="1"
                                   {{ old('is_active', $role->is_active) ? 'checked' : '' }}
                                   class="peer h-5 w-5 cursor-pointer appearance-none rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 checked:bg-indigo-600 checked:border-transparent focus:ring-2 focus:ring-indigo-500/50 transition-all">
                            <i class="fa-solid fa-check text-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs opacity-0 peer-checked:opacity-100 pointer-events-none transition-opacity"></i>
                        </div>
                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">Active Status</span>
                    </label>
                </div>
            </div>

            <div class="border-t border-gray-200 dark:border-white/10 pt-8">
                <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
                    <i class="fa-solid fa-shield-halved text-indigo-500"></i> Assign Permissions
                </h3>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    @foreach($permissions as $group => $groupPermissions)
                    <div class="bg-gray-50 dark:bg-white/5 rounded-xl border border-gray-200 dark:border-white/10 p-5 hover:border-indigo-500/30 transition-colors">
                        <h4 class="text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2 border-b border-gray-200 dark:border-white/10 pb-2">
                            <span class="w-2 h-2 rounded-full bg-indigo-500"></span>
                            {{ $group }}
                        </h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            @foreach($groupPermissions as $permission)
                            <label class="flex items-center p-2 rounded-lg hover:bg-white dark:hover:bg-white/5 cursor-pointer transition-colors group">
                                <div class="relative flex items-center">
                                    <input type="checkbox" 
                                           name="permissions[]" 
                                           id="permission-{{ $permission->id }}" 
                                           value="{{ $permission->id }}"
                                           {{ in_array($permission->id, $rolePermissions) ? 'checked' : '' }}
                                           class="peer h-4 w-4 cursor-pointer appearance-none rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 checked:bg-indigo-600 checked:border-transparent focus:ring-2 focus:ring-indigo-500/50 transition-all">
                                    <i class="fa-solid fa-check text-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[10px] opacity-0 peer-checked:opacity-100 pointer-events-none transition-opacity"></i>
                                </div>
                                <span class="ml-2.5 text-sm text-gray-700 dark:text-gray-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
                                    {{ $permission->name }}
                                </span>
                            </label>
                            @endforeach
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-8 pt-6 border-t border-gray-200 dark:border-white/10 flex items-center justify-end gap-3 sticky bottom-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm p-4 rounded-xl">
                <a href="{{ route('dynamic-roles.roles.index') }}" 
                   class="px-5 py-2.5 rounded-xl border border-gray-300 dark:border-white/10 text-gray-700 dark:text-gray-300 bg-white dark:bg-white/5 hover:bg-gray-50 dark:hover:bg-white/10 font-medium transition-all text-sm">
                    Cancel
                </a>
                <button type="submit" 
                        class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-medium shadow-lg shadow-indigo-500/30 transition-all hover:-translate-y-0.5 text-sm flex items-center gap-2">
                    <i class="fas fa-save"></i> Update Role
                </button>
            </div>
        </form>
    </div>
@endsection