@extends('layouts.admin')
@section('title', 'Create role')
@section('content')
<x-admin.page
    title="Create role"
    subtitle="Define a named role, then tick the permissions that staff with this role should have."
>
    <x-slot:actions>
        <a href="{{ route('admin.roles.index') }}" class="admin-btn">Back to roles</a>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <form method="post" action="{{ route('admin.roles.store') }}" class="space-y-5">
        @csrf
        <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
            <h3 class="text-sm font-semibold">Role details</h3>
            <div class="mt-4 grid gap-4 md:grid-cols-2">
                <label class="block text-sm md:col-span-2">
                    <span class="admin-label">Name</span>
                    <input class="admin-input" name="name" value="{{ old('name') }}" required placeholder="Warehouse associate">
                </label>
                <label class="block text-sm">
                    <span class="admin-label">Slug</span>
                    <input class="admin-input font-mono text-xs" name="slug" value="{{ old('slug') }}" placeholder="warehouse-associate" pattern="[A-Za-z0-9_-]+">
                    <span class="mt-1 block text-xs text-[#6d7175]">Lowercase identifier. Leave blank to auto-generate from the name.</span>
                </label>
                <label class="block text-sm md:col-span-2">
                    <span class="admin-label">Description</span>
                    <textarea class="admin-input min-h-[4rem]" name="description" placeholder="What this role is for">{{ old('description') }}</textarea>
                </label>
            </div>
        </section>

        @include('admin.roles._permissions', [
            'permissions' => $permissions,
            'presets' => $presets,
            'selectedIds' => old('permission_ids', []),
        ])

        <div class="flex flex-wrap gap-2">
            <button class="admin-btn admin-btn-primary" type="submit">Create role</button>
            <a href="{{ route('admin.roles.index') }}" class="admin-btn">Cancel</a>
        </div>
    </form>
</x-admin.page>
@endsection