@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('permissions.index') }}" class="btn btn-ghost btn-sm btn-square">
            <span class="icon-[tabler--arrow-left] size-5"></span>
        </a>
        <div>
            <h1 class="text-2xl font-bold tracking-tight">Add Permission</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Create a new permission</p>
        </div>
    </div>

    <div class="max-w-xl">
        <div class="card bg-base-100 border border-base-200 shadow-sm">
            <div class="card-body p-6">
                <form method="POST" action="{{ route('permissions.store') }}" class="space-y-5">
                    @csrf

                    {{-- Permission Name --}}
                    <div>
                        <label class="label mb-1">
                            <span class="label-text font-medium">Permission Name</span>
                            <span class="label-text-alt text-base-content/40">use dot notation e.g. users.create</span>
                        </label>
                        <div class="input w-full @error('name') input-error @enderror">
                            <input type="text" name="name" value="{{ old('name') }}" class="grow font-mono" />
                            <span class="icon-[tabler--key] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                        </div>
                        @error('name')
                            <p class="text-error text-xs mt-1">{{ $message }}</p>
                        @enderror
                        <p class="text-xs text-base-content/40 mt-1">
                            <span class="icon-[tabler--info-circle] size-3 inline me-0.5"></span>
                            Recommended format: <span class="font-mono">resource.action</span>
                            e.g. <span class="font-mono">users.create</span>, <span class="font-mono">attendance.view</span>
                        </p>
                    </div>

                    <button type="submit" class="btn btn-primary w-full gap-2">
                        <span class="icon-[tabler--device-floppy] size-4"></span>
                        Create Permission
                    </button>

                </form>
            </div>
        </div>
    </div>
@endsection