@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-slate-50 border-b border-slate-200 text-slate-800 px-6 py-4 font-bold flex items-center shadow-sm rounded-t-xl  mb-6">
            <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-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">
                @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-cyan-500 focus:bg-white focus:ring-2 focus:ring-cyan-500/20">{{ 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-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white px-6 py-2 rounded shadow text-sm font-semibold transition">Save</button>
                <a href="{{ route('designations.index') }}" class="bg-gradient-to-r from-rose-500 to-rose-600 hover:from-rose-600 hover:to-rose-700 text-white px-6 py-2 rounded shadow text-sm font-semibold inline-block transition">Cancel</a>
            </div>
        </form>

    </div>
</div>
@endsection