@extends('layouts.admin')

@section('title', 'Roles & Permissions')
@section('page-title', 'Role Management')

@section('content')
<div class="grid grid-cols-2 gap-6">
    <!-- Roles List -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-gray-800">Roles</h2>
            <button onclick="document.getElementById('new-role-modal').classList.remove('hidden')" 
                    class="bg-blue-600 text-white px-3 py-1 rounded text-sm">+ New Role</button>
        </div>

        <div class="space-y-3">
            @forelse($roles as $role)
            <div class="border rounded-lg p-4 {{ $role->name === 'admin' ? 'bg-red-50 border-red-200' : '' }}">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <h3 class="font-medium">{{ ucfirst($role->name) }}</h3>
                        <p class="text-sm text-gray-500">{{ $role->users_count }} users</p>
                    </div>
                    
                    @if(!in_array($role->name, ['admin', 'vendor', 'customer']))
                    <form action="{{ route('admin.roles.delete', $role) }}" method="POST" 
                          onsubmit="return confirm('Delete this role?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="text-red-600 text-xs hover:underline">Delete</button>
                    </form>
                    @endif
                </div>

                @if($role->permissions->isNotEmpty())
                    <div class="flex flex-wrap gap-1 mt-2">
                        @foreach($role->permissions->take(5) as $permission)
                            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{{ $permission->name }}</span>
                        @endforeach
                        @if($role->permissions->count() > 5)
                            <span class="text-xs text-gray-500">+{{ $role->permissions->count() - 5 }} more</span>
                        @endif
                    </div>
                @endif

                <!-- Edit Permissions Form -->
                @if($permissions->isNotEmpty())
                <form action="{{ route('admin.roles.update', $role) }}" method="POST" class="mt-3 pt-3 border-t">
                    @csrf
                    @method('PUT')
                    
                    <details class="text-sm">
                        <summary class="cursor-pointer text-blue-600">Edit Permissions</summary>
                        
                        <div class="mt-2 max-h-60 overflow-y-auto border rounded-lg p-2 bg-gray-50">
                            @foreach($permissions as $group => $groupPermissions)
                                <div class="mb-2">
                                    <p class="font-medium text-gray-700 text-xs uppercase tracking-wide bg-gray-200 px-2 py-1 rounded">{{ ucfirst($group) }}</p>
                                    <div class="ml-2 mt-1">
                                        @foreach($groupPermissions as $permission)
                                            <label class="flex items-center gap-2 text-xs py-1 hover:bg-white px-1 rounded cursor-pointer">
                                                <input type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                                    {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}
                                                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                                <span class="text-gray-700">{{ $permission->name }}</span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <button type="submit" class="mt-2 bg-gray-800 text-white px-3 py-1 rounded text-xs">Update Permissions</button>
                    </details>
                </form>
                @else
                    <p class="text-xs text-gray-500 mt-2">No permissions available. <a href="{{ route('admin.roles.index') }}?seed_permissions=1" class="text-blue-600 hover:underline">Seed default permissions</a></p>
                @endif
            </div>
            @empty
            <p class="text-gray-500 text-center py-4">No roles found.</p>
            @endforelse
        </div>
    </div>

    <!-- Quick Info -->
    <div class="space-y-6">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-bold text-gray-800 mb-4">System Roles</h3>
            
            <div class="space-y-3">
                <div class="p-3 bg-red-50 rounded-lg">
                    <p class="font-medium text-red-800">Admin</p>
                    <p class="text-sm text-red-600">Full access to all features</p>
                </div>
                
                <div class="p-3 bg-blue-50 rounded-lg">
                    <p class="font-medium text-blue-800">Vendor</p>
                    <p class="text-sm text-blue-600">Can manage products and orders</p>
                </div>
                
                <div class="p-3 bg-gray-50 rounded-lg">
                    <p class="font-medium text-gray-800">Customer</p>
                    <p class="text-sm text-gray-600">Can browse and purchase</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-bold text-gray-800 mb-4">Manage User Roles</h3>
            <p class="text-sm text-gray-500 mb-3">Go to the user management page to assign roles to users.</p>
            
            <a href="{{ route('admin.roles.users') }}" class="inline-block bg-gray-800 text-white px-4 py-2 rounded-lg text-sm">
                Manage User Roles →
            </a>
        </div>
    </div>
</div>

<!-- New Role Modal -->
<div id="new-role-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-md">
        <h3 class="font-bold text-lg mb-4">Create New Role</h3>
        
        <form action="{{ route('admin.roles.create') }}" method="POST">
            @csrf
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Role Name</label>
                <input type="text" name="name" required 
                    class="w-full border border-gray-300 rounded-lg px-3 py-2"
                    placeholder="e.g., manager, moderator">
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Permissions</label>
                @if($permissions->isNotEmpty())
                <div class="max-h-60 overflow-y-auto border rounded-lg p-2 bg-gray-50">
                    @foreach($permissions as $group => $groupPermissions)
                        <div class="mb-2">
                            <p class="font-medium text-gray-700 text-xs uppercase tracking-wide bg-gray-200 px-2 py-1 rounded">{{ ucfirst($group) }}</p>
                            <div class="ml-2 mt-1">
                                @foreach($groupPermissions as $permission)
                                    <label class="flex items-center gap-2 text-sm py-1 hover:bg-white px-1 rounded cursor-pointer">
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                            class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                                        <span class="text-gray-700">{{ $permission->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
                @else
                <p class="text-sm text-gray-500">No permissions available. <a href="{{ route('admin.roles.index') }}?seed_permissions=1" class="text-blue-600 hover:underline">Seed default permissions</a> first.</p>
                @endif
            </div>

            <div class="flex gap-3">
                <button type="submit" class="flex-1 bg-blue-600 text-white py-2 rounded-lg">Create</button>
                <button type="button" onclick="document.getElementById('new-role-modal').classList.add('hidden')"
                        class="flex-1 bg-gray-200 text-gray-700 py-2 rounded-lg">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection