@extends('layouts.user')

@section('title', __('designations.add_designation'))
@section('page_title', __('designations.add_designation'))
@section('breadcrumb', __('designations.hr_payroll'))

@section('content')
<div class="max-w-3xl mx-auto px-4 py-5">
    <form action="{{ route('user.hr.designations.store') }}" method="POST"
          class="border border-slate-200 bg-white p-4 shadow-sm">
        @csrf

        <div class="mb-4">
            <h2 class="text-sm font-bold text-slate-800">{{ __('designations.add_designation') }}</h2>
            <p class="mt-1 text-xs text-slate-500">{{ __('designations.create_new_designation') }}</p>
        </div>

        <div class="space-y-4">
            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('designations.name') }}</label>
                <input type="text" name="name" value="{{ old('name') }}"
                       class="w-full border border-slate-200 px-3 py-2 text-xs">
                @error('name')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('designations.status') }}</label>
                <select name="status" class="w-full border border-slate-200 px-3 py-2 text-xs">
                    <option value="active" @selected(old('status') === 'active')>{{ __('designations.active') }}</option>
                    <option value="inactive" @selected(old('status') === 'inactive')>{{ __('designations.inactive') }}</option>
                </select>
                @error('status')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="mb-1 block text-xs font-semibold text-slate-700">{{ __('designations.note') }}</label>
                <textarea name="note" rows="4"
                          class="w-full border border-slate-200 px-3 py-2 text-xs">{{ old('note') }}</textarea>
                @error('note')
                    <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mt-4 flex gap-2">
            <button type="submit"
                    class="bg-slate-900 px-4 py-2 text-xs font-semibold text-white">
                {{ __('designations.save_designation') }}
            </button>
            <a href="{{ route('user.hr.designations.index') }}"
               class="border border-slate-200 px-4 py-2 text-xs font-semibold text-slate-700">
                {{ __('designations.cancel') }}
            </a>
        </div>
    </form>
</div>
@endsection