@extends('admin.layouts.admin')
@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">إضافة حل متكامل جديد</h2>
    <form action="{{ route('admin.solutions.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <input type="text" name="feature_tag" placeholder="الميزة (Tag)" class="border p-3 rounded-lg w-full">
            <div class="flex items-center gap-3">
                <input type="hidden" name="main_icon" id="main_icon" value="fa-solid fa-star">
                <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="fa-solid fa-star"></i></div>
                <button type="button" onclick="openIconPicker('main_icon', 'icon_preview')" class="bg-blue-600 text-white px-4 py-2 rounded">أيقونة رئيسية</button>
            </div>
            <input type="text" name="title" placeholder="العنوان" class="border p-3 rounded-lg w-full" required>
            <input type="text" name="btn_text" placeholder="عنوان الزرار" class="border p-3 rounded-lg w-full">
            <textarea name="description" placeholder="الوصف" class="border p-3 rounded-lg w-full md:col-span-2" rows="3" required></textarea>
        </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"> ميزة مميزة (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"> خطة أعمال (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">
                <label class="block mb-1 font-bold">السعر</label>
                <input type="number" name="price" step="0.01" class="border p-3 rounded-lg w-full">
            </div>
            <div>
                <label class="block mb-1 font-bold">مدة الاشتراك</label>
                <input type="text" name="duration" placeholder="مثلاً: شهرياً" class="border p-3 rounded-lg w-full">
            </div>
            <div id="contact_div" class="hidden md:col-span-2">
                <label class="block mb-1 font-bold text-red-600">لينك التواصل (خطة الأعمال)</label>
                <input type="text" name="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">
            <h3 class="font-bold text-lg mb-4">المميزات التفصيلية</h3>
            <div id="features_container" class="space-y-4"></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">حفظ الحل بالكامل</button>
    </form>
</div>

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

<script>
    let featureCount = 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">
                    <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