@extends('layouts.admin')

@section('title', 'Admin Roles')
@section('header', 'Admin Roles')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <a href="{{ route('admin.admins.index') }}" class="text-sm text-blue-600 hover:underline">&larr; Back to Admins</a>
    <button onclick="document.getElementById('createRoleModal').classList.remove('hidden')" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
        <i class="fas fa-plus mr-2"></i>Add Role
    </button>
</div>

@if(session('success'))
<div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700">
    {{ session('success') }}
</div>
@endif

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @forelse($roles as $role)
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800">{{ $role->name }}</h3>
                <p class="text-sm text-gray-500">{{ $role->description ?? 'No description' }}</p>
            </div>
            @if($role->is_default)
            <span class="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full">Default</span>
            @endif
        </div>
        <div class="mb-4">
            <p class="text-xs text-gray-500 mb-2">Permissions ({{ count($role->permissions ?? []) }})</p>
            <div class="flex flex-wrap gap-1">
                @forelse($role->permissions ?? [] as $perm)
                <span class="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{{ $perm }}</span>
                @empty
                <span class="text-xs text-gray-400">No permissions</span>
                @endforelse
            </div>
        </div>
        <div class="flex items-center justify-between pt-4 border-t border-gray-100">
            <span class="text-sm text-gray-500">{{ $role->admins_count }} admins</span>
            <div class="flex gap-2">
                <button onclick="editRole({{ $role->id }}, '{{ $role->name }}')" class="text-blue-600 hover:text-blue-700 text-sm">Edit</button>
                <form method="POST" action="{{ route('admin.admins.roles.destroy', $role) }}">
                    @csrf
                    @method('DELETE')
                    <button type="submit" onclick="return confirm('Delete role?')" class="text-red-600 hover:text-red-700 text-sm">Delete</button>
                </form>
            </div>
        </div>
    </div>
    @empty
    <div class="col-span-full text-center py-12 text-gray-500">
        No roles defined. <button onclick="document.getElementById('createRoleModal').classList.remove('hidden')" class="text-blue-600 hover:underline">Create one</button>
    </div>
    @endforelse
</div>

<!-- Create Role Modal -->
<div id="createRoleModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl shadow-xl p-6 w-full max-w-md">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Create Role</h3>
        <form method="POST" action="{{ route('admin.admins.roles.store') }}">
            @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 placeholder="e.g., Editor"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                <input type="text" name="description" placeholder="Role description"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">Permissions</label>
                <div class="grid grid-cols-2 gap-2 max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-3">
                    @php
                    $permissions = ['dashboard.view', 'doctors.manage', 'appointments.manage', 'hospitals.manage', 'blogs.manage', 'pages.manage', 'contacts.manage', 'settings.manage', 'admins.manage', 'plugins.manage'];
                    @endphp
                    @foreach($permissions as $perm)
                    <label class="flex items-center gap-2">
                        <input type="checkbox" name="permissions[]" value="{{ $perm }}" class="rounded text-blue-600">
                        <span class="text-sm">{{ $perm }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('createRoleModal').classList.add('hidden')" class="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg">Cancel</button>
                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Create</button>
            </div>
        </form>
    </div>
</div>

<script>
function editRole(id, name) {
    alert('Edit role: ' + name);
}
</script>
@endsection