@extends('admin.layouts.app')

@section('title', 'New Role')
@section('page-title', 'Create New Role')

@section('content')
<form method="POST" action="{{ route('admin.roles.store') }}" class="mx-auto max-w-5xl">
    @csrf

    <!-- Role Name Input -->
    <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft dark:border-slate-800 dark:bg-slate-900">
        <div class="max-w-md">
            <label for="name" class="block text-sm font-semibold text-slate-900 dark:text-white mb-2">Role Name</label>
            <input type="text" name="name" id="name" value="{{ old('name') }}" placeholder="e.g. Content Editor" required
                   class="w-full px-4 py-2.5 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-transparent">
            @error('name')
                <p class="mt-2 text-xs text-rose-600">{{ $message }}</p>
            @enderror
        </div>
    </div>

    <!-- Permissions Checklist -->
    <div class="mb-4">
        <h2 class="text-base font-bold text-slate-900 dark:text-white">Assign Permissions</h2>
        <p class="text-xs text-slate-500 mt-1">Select the granular permissions to grant to this role.</p>
    </div>

    @foreach($groupedPermissions as $groupName => $perms)
        <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-6 shadow-soft dark:border-slate-800 dark:bg-slate-900">
            <h3 class="mb-4 text-sm font-bold text-slate-900 dark:text-white border-b border-slate-100 pb-2 dark:border-slate-800">{{ $groupName }} Management</h3>
            <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
                @foreach($perms as $perm)
                    <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-100 p-3 hover:border-emerald-300 dark:border-slate-800/60 dark:hover:border-emerald-500/50">
                        <input type="checkbox" name="permissions[]" value="{{ $perm->name }}" class="mt-1 h-4 w-4 rounded text-emerald-600 focus:ring-emerald-500">
                        <span class="text-xs font-semibold text-slate-700 dark:text-slate-300">{{ str($perm->name)->replace($perm->name, $perm->name)->title() }}</span>
                    </label>
                @endforeach
            </div>
        </div>
    @endforeach

    <!-- Form Footer -->
    <div class="mt-6 md:mt-8 flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-3 sm:gap-4 pt-4 md:pt-6 border-t border-gray-200 dark:border-gray-800">
        <a href="{{ route('admin.roles.index') }}" class="btn-danger">
            <i class="fas fa-times mr-2"></i>Cancel
        </a>
        <button type="submit" class="btn-primary">
            <i class="fas fa-plus"></i> Save Role
        </button>
    </div>
</form>
@endsection