@extends('admin.layouts.admin')

@section('title', 'تعديل الحل')

@section('content')
<div class="bg-white p-8 rounded-xl shadow-lg" dir="rtl">
    <h2 class="text-2xl font-bold mb-6 border-b pb-4 text-right">تعديل الحل: {{ $solution->title }}</h2>
    
    <form action="{{ route('admin.solutions.update', $solution->id) }}" method="POST">
        @csrf @method('PUT')
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div class="text-right">
                <label class="block font-bold mb-1">الميزة (Tag)</label>
                <input type="text" name="feature_tag" value="{{ $solution->feature_tag }}" class="border p-3 rounded-lg w-full">
            </div>
            
            <div class="text-right">
                <label class="block font-bold mb-1 text-right">الأيقونة الرئيسية</label>
                <div class="flex items-center gap-3">
                    <input type="hidden" name="main_icon" id="main_icon" value="{{ $solution->main_icon }}">
                    <div id="icon_preview" class="w-12 h-12 flex items-center justify-center border-2 border-blue-500 rounded text-blue-600 text-xl">
                        <i class="{{ $solution->main_icon }}"></i>
                    </div>
                    <button type="button" onclick="openIconPicker('main_icon', 'icon_preview')" class="bg-blue-600 text-white px-4 py-2 rounded">تغيير</button>
                </div>
            </div>

            <div class="text-right">
                <label class="block font-bold mb-1">العنوان</label>
                <input type="text" name="title" value="{{ $solution->title }}" class="border p-3 rounded-lg w-full" required>
            </div>

            <div class="text-right">
                <label class="block font-bold mb-1">عنوان الزرار</label>
                <input type="text" name="btn_text" value="{{ $solution->btn_text }}" class="border p-3 rounded-lg w-full">
            </div>

            <div class="text-right md:col-span-2">
                <label class="block font-bold mb-1">الوصف</label>
                <textarea name="description" class="border p-3 rounded-lg w-full" rows="3" required>{{ $solution->description }}</textarea>
            </div>
        </div>

        <!-- خيارات الخطط -->
        <div class="flex gap-8 mb-6 bg-gray-50 p-4 rounded-lg">
            <label class="flex items-center gap-2 cursor-pointer font-bold">
                <input type="checkbox" name="is_featured" class="w-5 h-5" {{ $solution->is_featured ? 'checked' : '' }}> ميزة مميزة (Featured)
            </label>
            <label class="flex items-center gap-2 cursor-pointer font-bold">
                <input type="checkbox" name="is_business_plan" id="is_business" onchange="togglePlan()" class="w-5 h-5" {{ $solution->is_business_plan ? 'checked' : '' }}> خطة أعمال (Business Plan)
            </label>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6" id="plan_details">
            <div id="price_div" class="{{ $solution->is_business_plan ? 'hidden' : '' }}">
                <label class="block mb-1 font-bold text-right">السعر</label>
                <input type="number" name="price" value="{{ $solution->price }}" step="0.01" class="border p-3 rounded-lg w-full">
            </div>
            <div>
                <label class="block mb-1 font-bold text-right">مدة الاشتراك</label>
                <input type="text" name="duration" value="{{ $solution->duration }}" placeholder="مثلاً: شهرياً" class="border p-3 rounded-lg w-full">
            </div>
            <div id="contact_div" class="{{ $solution->is_business_plan ? '' : 'hidden' }} md:col-span-2">
                <label class="block mb-1 font-bold text-red-600 text-right">لينك التواصل (خطة الأعمال)</label>
                <input type="text" name="contact_link" value="{{ $solution->contact_link }}" placeholder="https://wa.me/..." class="border p-3 rounded-lg w-full border-red-300">
            </div>
        </div>

        <!-- المميزات الفرعية -->
        <div class="border-t pt-6 text-right">
            <h3 class="font-bold text-lg mb-4">المميزات التفصيلية</h3>
            <div id="features_container" class="space-y-4">
                @if($solution->sub_features)
                    @foreach($solution->sub_features as $index => $sub)
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 bg-blue-50 p-4 rounded-lg relative" id="row_{{ $index }}">
                        <button type="button" onclick="removeRow({{ $index }})" class="absolute -top-2 -left-2 bg-red-500 text-white rounded-full w-6 h-6">×</button>
                        <div class="flex items-center gap-2">
                            <input type="hidden" name="sub_features[{{ $index }}][icon]" id="f_icon_{{ $index }}" value="{{ $sub['icon'] ?? 'fas fa-star' }}">
                            <div id="f_preview_{{ $index }}" class="w-10 h-10 flex items-center justify-center border bg-white rounded text-blue-600"><i class="{{ $sub['icon'] ?? 'fas fa-star' }}"></i></div>
                            <button type="button" onclick="openIconPicker('f_icon_{{ $index }}', 'f_preview_{{ $index }}')" class="text-xs bg-blue-100 p-1 rounded">تغيير</button>
                        </div>
                        <input type="text" name="sub_features[{{ $index }}][title]" value="{{ $sub['title'] ?? '' }}" placeholder="عنوان الميزة" class="border p-2 rounded">
                        <input type="text" name="sub_features[{{ $index }}][desc]" value="{{ $sub['desc'] ?? '' }}" placeholder="وصف الميزة" class="border p-2 rounded md:col-span-2">
                    </div>
                    @endforeach
                @endif
            </div>
            <button type="button" onclick="addFeatureRow()" class="mt-4 bg-gray-800 text-white px-6 py-2 rounded-lg">+ إضافة ميزة فرعية</button>
        </div>

        <button type="submit" class="w-full mt-10 bg-green-600 text-white font-bold py-4 rounded-xl shadow-lg hover:bg-green-700 transition">تحديث الحل بالكامل</button>
    </form>
</div>

<!-- Modal الأيقونات -->
@include('admin.partials.icon_picker_modal')

<script>
    let featureCount = {{ $solution->sub_features ? count($solution->sub_features) : 0 }};
    
    function togglePlan() {
        const isBusiness = document.getElementById('is_business').checked;
        document.getElementById('price_div').classList.toggle('hidden', isBusiness);
        document.getElementById('contact_div').classList.toggle('hidden', !isBusiness);
    }

    function addFeatureRow() {
        const id = featureCount++;
        const html = `
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 bg-blue-50 p-4 rounded-lg relative" id="row_${id}">
                <button type="button" onclick="removeRow(${id})" class="absolute -top-2 -left-2 bg-red-500 text-white rounded-full w-6 h-6">×</button>
                <div class="flex items-center gap-2 text-right">
                    <input type="hidden" name="sub_features[${id}][icon]" id="f_icon_${id}" value="fa-solid fa-check">
                    <div id="f_preview_${id}" class="w-10 h-10 flex items-center justify-center border bg-white rounded text-blue-600"><i class="fa-solid fa-check"></i></div>
                    <button type="button" onclick="openIconPicker('f_icon_${id}', 'f_preview_${id}')" class="text-xs bg-blue-100 p-1 rounded">أيقونة</button>
                </div>
                <input type="text" name="sub_features[${id}][title]" placeholder="عنوان الميزة" class="border p-2 rounded">
                <input type="text" name="sub_features[${id}][desc]" placeholder="وصف الميزة" class="border p-2 rounded md:col-span-2">
            </div>`;
        document.getElementById('features_container').insertAdjacentHTML('beforeend', html);
    }

    function removeRow(id) { document.getElementById('row_' + id).remove(); }
</script>
@endsection