@extends('admin.layouts.admin')
@section('title', 'إضافة ميزة جديدة')

@section('content')
<div class="max-w-3xl mx-auto">

    {{-- Header --}}
    <div class="flex items-center gap-3 mb-8">
        <a href="{{ route('admin.why.index') }}" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-gray-500 hover:text-blue-600 shadow-sm border border-gray-100 transition">
            <i class="fa-solid fa-arrow-right"></i>
        </a>
        <div>
            <h2 class="text-2xl font-bold text-gray-800">إضافة ميزة جديدة</h2>
            <p class="text-gray-500 text-sm">أضف عنصراً جديداً لقسم "لماذا تختارنا"</p>
        </div>
    </div>

    <form action="{{ route('admin.why.store') }}" method="POST">
        @csrf

        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 mb-6">
            
            {{-- اختيار الأيقونة --}}
            <div class="mb-8">
                <label class="block text-sm font-bold text-gray-700 mb-4">أيقونة الميزة</label>
                <div class="flex items-center gap-6">
                    <div id="why-icon-preview" 
                         class="w-20 h-20 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-600 text-4xl border border-blue-100 shadow-inner">
                        <i class="fa-solid fa-star"></i>
                    </div>
                    <div class="flex-1">
                        <button type="button" 
                                onclick="openIconPicker('icon', 'why-icon-preview')"
                                class="w-full py-4 border-2 border-dashed border-blue-200 rounded-xl text-blue-600 font-bold hover:bg-blue-50 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-grid-2"></i>
                            اختر أيقونة من القائمة
                        </button>
                        <p class="text-xs text-gray-400 mt-2">اختر أيقونة تعبر عن الميزة (مثل: جودة، سرعة، دعم...)</p>
                    </div>
                    <input type="hidden" name="icon" id="icon" value="fa-solid fa-star">
                </div>
                @error('icon')
                    <p class="text-red-500 text-sm mt-2 font-bold">{{ $message }}</p>
                @enderror
            </div>

            <hr class="mb-8 border-gray-50">

            {{-- العنوان --}}
            <div class="mb-6">
                <label class="block text-sm font-bold text-gray-700 mb-2">عنوان الميزة <span class="text-red-500">*</span></label>
                <input type="text" 
                       name="title" 
                       value="{{ old('title') }}" 
                       placeholder="مثال: الجودة العالية"
                       class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:outline-none transition @error('title') border-red-400 @enderror"
                       required>
                @error('title')
                    <p class="text-red-500 text-sm mt-1 font-bold">{{ $message }}</p>
                @enderror
            </div>

            {{-- الوصف --}}
            <div class="mb-2">
                <label class="block text-sm font-bold text-gray-700 mb-2">وصف قصير <span class="text-red-500">*</span></label>
                <textarea name="description" 
                          rows="4" 
                          placeholder="اشرح لعملائك لماذا هذه الميزة مهمة لشركتك..."
                          class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-blue-500 focus:outline-none transition @error('description') border-red-400 @enderror"
                          required>{{ old('description') }}</textarea>
                @error('description')
                    <p class="text-red-500 text-sm mt-1 font-bold">{{ $message }}</p>
                @enderror
            </div>
        </div>

        {{-- أزرار التحكم --}}
        <div class="flex gap-4">
            <button type="submit" 
                    class="flex-[2] bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl transition shadow-md flex items-center justify-center gap-2">
                <i class="fa-solid fa-floppy-disk"></i>
                حفظ الميزة
            </button>
            <a href="{{ route('admin.why.index') }}" 
               class="flex-1 bg-white hover:bg-gray-50 text-gray-500 font-bold py-4 rounded-xl border border-gray-200 transition text-center">
                إلغاء
            </a>
        </div>
    </form>

</div>

{{-- مودال الأيقونات --}}
@include('admin.partials.icon_picker_modal')

@endsection