@extends('layouts.app')

@section('content')
<div class="flex justify-between items-center mb-6" style="margin-top: 15px;">
    <h2 class="text-2xl font-bold text-gold text-[#d4af37] uppercase tracking-tighter tracking-widest">إضافة مسمى وظيفي جديد</h2>
    <a href="{{ route('admin.job-titles.index') }}" class="px-6 py-2 bg-gray-800 text-white rounded-lg text-sm font-bold shadow-lg hover:bg-gray-700 transition-all">عودة</a>
</div>

@if($errors->any())
    <div class="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-xl mb-6">
        <ul class="list-disc pr-4">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="max-w-4xl mx-auto bg-black/20 border border-gray-800 rounded-3xl p-8 shadow-2xl overflow-hidden relative group">
    <form action="{{ route('admin.job-titles.store') }}" method="POST">
        @csrf
        
        <div class="space-y-6">
            <div class="space-y-2">
                <label class="block text-xs text-gray-500 uppercase tracking-widest font-black">اسم المسمى الوظيفي</label>
                <input type="text" name="name" value="{{ old('name') }}" required 
                    class="w-full bg-black border-gray-800 rounded-xl px-5 py-3 text-white focus:border-[#d4af37] outline-none transition-all placeholder:text-gray-700" 
                    placeholder="مثلاً: محاسب قانوني، مدير مبيعات">
            </div>

            <div class="space-y-2">
                <label class="block text-xs text-gray-500 uppercase tracking-widest font-black">الوصف (اختياري)</label>
                <textarea name="description" rows="3" 
                    class="w-full bg-black border-gray-800 rounded-xl px-5 py-3 text-white focus:border-[#d4af37] outline-none transition-all placeholder:text-gray-700" 
                    placeholder="وصف مختصر لمهام الوظيفة...">{{ old('description') }}</textarea>
            </div>

            <div class="flex items-center gap-3">
                <input type="checkbox" name="active" value="1" id="active" checked 
                    class="rounded border-gray-800 bg-black text-[#d4af37] focus:ring-[#d4af37] w-5 h-5">
                <label for="active" class="text-sm text-gray-400 font-bold">تفعيل المسمى الوظيفي</label>
            </div>
        </div>

        <div class="mt-10">
            <button type="submit" class="w-full py-4 bg-[#d4af37] text-black font-black uppercase tracking-widest rounded-2xl shadow-xl shadow-[#d4af37]/20 hover:scale-[1.01] active:scale-95 transition-all">
                حفظ المسمى الوظيفي
            </button>
        </div>
    </form>
</div>
@endsection