@extends('admin.layouts.app')

@section('content')
<div class="bg-gray-100 min-h-full p-4 flex justify-center">
    <div class="bg-white p-6 shadow-sm border border-gray-200 w-full max-w-lg mt-10">
        
        <div class="bg-[#ff9800] text-white px-3 py-2 font-bold text-sm shadow-sm mb-6 flex items-center">
            <i class="fa-solid fa-briefcase mr-2"></i> Add Designation
        </div>

        <form action="{{ route('designations.store') }}" method="POST">
            @csrf
            <div class="mb-6">
                <label class="block text-xs font-bold text-gray-800 mb-1">Designation Name <span class="text-red-500">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" required class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-[#ff9800]">
                @error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>
            <div class="mb-6">
                <label class="block text-xs font-bold text-gray-800 mb-1">Description</label>
                <textarea name="description" rows="3" class="w-full border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:border-[#ff9800]">{{ old('description') }}</textarea>
                @error('description') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
            </div>
            <div class="text-center space-x-2">
                <button type="submit" class="bg-[#4caf50] hover:bg-[#43a047] text-white px-6 py-2 rounded shadow text-sm font-semibold transition">Save</button>
                <a href="{{ route('designations.index') }}" class="bg-[#f44336] hover:bg-[#e53935] text-white px-6 py-2 rounded shadow text-sm font-semibold inline-block transition">Cancel</a>
            </div>
        </form>

    </div>
</div>
@endsection
