@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-8">
        <h2 class="text-3xl font-bold text-black dark:text-yellow-500">{{ __('Create Role') }}</h2>
    </div>

    <div class="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 shadow-xl rounded-2xl p-8">
        <form method="POST" action="{{ route('roles.store') }}" class="space-y-8">
            @csrf

            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ __('Role Name') }}</label>
                <input id="name" type="text" name="name" value="{{ old('name') }}" required autofocus
                    class="w-full px-4 py-3 rounded-xl bg-gray-50 dark:bg-neutral-800 border border-gray-300 dark:border-neutral-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-yellow-500 outline-none transition duration-200"
                    placeholder="e.g. Admin">
                @error('name')
                    <span class="text-red-500 text-xs mt-1">{{ $message }}</span>
                @enderror
            </div>

            <div>
                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">{{ __('Assign Permissions') }}</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                    @foreach ($permissions as $permission)
                        <label class="flex items-center space-x-3 p-3 rounded-xl border border-gray-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-800 cursor-pointer transition">
                            <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" 
                                class="w-5 h-5 text-yellow-500 border-gray-300 rounded focus:ring-yellow-500 dark:bg-neutral-800 dark:border-neutral-700">
                            <span class="text-sm text-gray-700 dark:text-gray-300">{{ $permission->name }}</span>
                        </label>
                    @endforeach
                </div>
            </div>

            <div class="flex justify-end space-x-4">
                <a href="{{ route('roles.index') }}" class="px-6 py-3 border border-gray-300 dark:border-neutral-700 text-gray-700 dark:text-gray-300 font-semibold rounded-xl hover:bg-gray-50 dark:hover:bg-neutral-800 transition duration-200">
                    {{ __('Cancel') }}
                </a>
                <button type="submit" class="px-6 py-3 bg-yellow-500 hover:bg-yellow-600 text-black font-semibold rounded-xl transition duration-200">
                    {{ __('Save Role') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection