@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.advantages.index') }}" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-gray-500 hover:text-indigo-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">تعديل: {{ $advantage->title }}</p>
        </div>
    </div>

    <form action="{{ route('admin.advantages.update', $advantage->id) }}" method="POST">
        @csrf
        @method('PUT')

        <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="advantage-icon-preview" 
                         class="w-20 h-20 rounded-2xl bg-indigo-50 flex items-center justify-center text-indigo-600 text-4xl border border-indigo-100 shadow-inner">
                        <i class="{{ $advantage->icon }}"></i>
                    </div>
                    <div class="flex-1">
                        <button type="button" 
                                onclick="openIconPicker('icon', 'advantage-icon-preview')"
                                class="w-full py-4 border-2 border-dashed border-indigo-200 rounded-xl text-indigo-600 font-bold hover:bg-indigo-50 transition flex items-center justify-center gap-2">
                            <i class="fa-solid fa-grid-2"></i>
                            تغيير الأيقونة
                        </button>
                    </div>
                    <input type="hidden" name="icon" id="icon" value="{{ old('icon', $advantage->icon) }}">
                </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', $advantage->title) }}" 
                       class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-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" 
                          class="w-full px-5 py-4 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition @error('description') border-red-400 @enderror"
                          required>{{ old('description', $advantage->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-indigo-600 hover:bg-indigo-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.advantages.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