@extends('layouts.app')
@section('title', 'Create Role')
@section('content')
<div class="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h2 class="page-title">Create Role</h2>
        <p class="page-subtitle">Define a new role and assign permissions</p>
    </div>
    <a href="{{ route('roles.index') }}" class="btn-ghost">
        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Back to Roles
    </a>
</div>

<form method="POST" action="{{ route('roles.store') }}" class="space-y-6">
    @csrf

    <div class="bg-white rounded-2xl border border-gray-100 p-6 lg:p-8 card-elevated">
        <h3 class="section-title">Role Details</h3>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <x-form-group label="Role Name" name="name" :value="old('name')" required placeholder="e.g. Manager" />
            <x-form-group label="Slug" name="slug" :value="old('slug')" required placeholder="e.g. manager" />
            <div class="lg:col-span-2">
                <x-form-group label="Description" name="description" type="textarea" :value="old('description')" placeholder="Describe the role and its responsibilities" rows="3" />
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 p-6 lg:p-8 card-elevated">
        <h3 class="section-title">Permissions</h3>
        <p class="text-sm text-gray-500 mb-4">Select the permissions to assign to this role.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            @forelse($permissions as $groupName => $perms)
            <div class="border border-gray-100 rounded-xl overflow-hidden">
                <div class="px-4 py-3 bg-gray-50 border-b border-gray-100">
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" class="group-checkbox rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                        <span class="text-sm font-semibold text-gray-900 capitalize">{{ $groupName }}</span>
                    </label>
                </div>
                <div class="p-4 space-y-2">
                    @foreach($perms as $perm)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="permissions[]" value="{{ $perm->id }}" {{ in_array($perm->id, old('permissions', [])) ? 'checked' : '' }} class="rounded border-gray-300 text-primary-600 focus:ring-primary-500">
                        <span class="text-sm text-gray-700">{{ $perm->name }}</span>
                    </label>
                    @endforeach
                </div>
            </div>
            @empty
            <div class="md:col-span-2 text-center py-8 text-gray-500">
                <p>No permissions available.</p>
            </div>
            @endforelse
        </div>
    </div>

    <div class="flex items-center justify-end gap-3">
        <a href="{{ route('roles.index') }}" class="btn-secondary">Cancel</a>
        <x-button type="submit">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            Create Role
        </x-button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.querySelectorAll('.group-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const groupDiv = this.closest('.border');
        const checkboxes = groupDiv.querySelectorAll('input[type="checkbox"][name="permissions[]"]');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });
});
</script>
@endpush