# 🎨 مودال‌های مدیریت ویترین

## Modal ویرایش ویترین دستی

```jsx
// ShowcaseModal Component
const ShowcaseModal = ({ showcase, onClose, onSave }) => {
  const [formData, setFormData] = useState(showcase || {
    title: '',
    subtitle: '',
    display_type: 'grid',
    products_limit: 10,
    bg_color: '#ffffff',
    title_color: '#1976D2',
    sort_order: 0,
    is_active: true,
    product_ids: []
  });
  const [products, setProducts] = useState([]);
  const [selectedProducts, setSelectedProducts] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    loadProducts();
    if (showcase) {
      loadShowcaseProducts();
    }
  }, []);

  const loadProducts = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/admin/products`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      setProducts(data.data);
    } catch (error) {
      toast.error('خطا در بارگذاری محصولات');
    }
  };

  const loadShowcaseProducts = async () => {
    try {
      const { data } = await axios.get(`${API_URL}/admin/product-showcases/${showcase.id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      const productIds = data.data.items.map(item => item.product_id);
      setSelectedProducts(productIds);
      setFormData({ ...formData, product_ids: productIds });
    } catch (error) {
      toast.error('خطا در بارگذاری محصولات ویترین');
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (selectedProducts.length === 0) {
      toast.error('حداقل یک محصول انتخاب کنید');
      return;
    }

    const dataToSend = {
      ...formData,
      product_ids: selectedProducts
    };

    try {
      if (showcase) {
        await axios.put(
          `${API_URL}/admin/product-showcases/${showcase.id}`,
          dataToSend,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        toast.success('ویترین با موفقیت ویرایش شد');
      } else {
        await axios.post(
          `${API_URL}/admin/product-showcases`,
          dataToSend,
          { headers: { Authorization: `Bearer ${token}` } }
        );
        toast.success('ویترین با موفقیت ایجاد شد');
      }
      onSave();
    } catch (error) {
      toast.error('خطا در ذخیره ویترین');
    }
  };

  const toggleProduct = (productId) => {
    if (selectedProducts.includes(productId)) {
      setSelectedProducts(selectedProducts.filter(id => id !== productId));
    } else {
      setSelectedProducts([...selectedProducts, productId]);
    }
  };

  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        {/* Header */}
        <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-6">
          <h2 className="text-2xl font-bold">
            {showcase ? 'ویرایش ویترین' : 'ایجاد ویترین جدید'}
          </h2>
        </div>

        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
          <div className="p-6 space-y-6">
            {/* Basic Info */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  عنوان ویترین *
                </label>
                <input
                  type="text"
                  value={formData.title}
                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="مثال: پرفروش‌ترین محصولات"
                  required
                />
              </div>

              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  زیرعنوان
                </label>
                <input
                  type="text"
                  value={formData.subtitle}
                  onChange={(e) => setFormData({ ...formData, subtitle: e.target.value })}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="مثال: محصولاتی که مشتریان بیشتر خریده‌اند"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  نوع نمایش
                </label>
                <select
                  value={formData.display_type}
                  onChange={(e) => setFormData({ ...formData, display_type: e.target.value })}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500"
                >
                  <option value="grid">شبکه‌ای (Grid)</option>
                  <option value="carousel">اسلایدر (Carousel)</option>
                  <option value="list">لیستی (List)</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  حداکثر تعداد محصول
                </label>
                <input
                  type="number"
                  min="1"
                  max="50"
                  value={formData.products_limit}
                  onChange={(e) => setFormData({ ...formData, products_limit: parseInt(e.target.value) })}
                  className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  رنگ پس‌زمینه
                </label>
                <div className="flex gap-2">
                  <input
                    type="color"
                    value={formData.bg_color}
                    onChange={(e) => setFormData({ ...formData, bg_color: e.target.value })}
                    className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                  />
                  <input
                    type="text"
                    value={formData.bg_color}
                    onChange={(e) => setFormData({ ...formData, bg_color: e.target.value })}
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
                  />
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  رنگ عنوان
                </label>
                <div className="flex gap-2">
                  <input
                    type="color"
                    value={formData.title_color}
                    onChange={(e) => setFormData({ ...formData, title_color: e.target.value })}
                    className="w-16 h-12 rounded-lg border border-gray-300 cursor-pointer"
                  />
                  <input
                    type="text"
                    value={formData.title_color}
                    onChange={(e) => setFormData({ ...formData, title_color: e.target.value })}
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
                  />
                </div>
              </div>

              <div className="md:col-span-2">
                <label className="flex items-center gap-3 cursor-pointer">
                  <div className="relative">
                    <input
                      type="checkbox"
                      checked={formData.is_active}
                      onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
                      className="sr-only"
                    />
                    <div className={`w-14 h-8 rounded-full transition-colors ${
                      formData.is_active ? 'bg-green-500' : 'bg-gray-300'
                    }`}>
                      <div className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full transition-transform ${
                        formData.is_active ? 'transform translate-x-6' : ''
                      }`}></div>
                    </div>
                  </div>
                  <span className="text-sm font-medium text-gray-700">
                    {formData.is_active ? 'فعال' : 'غیرفعال'}
                  </span>
                </label>
              </div>
            </div>

            {/* Product Selection */}
            <div className="border-t pt-6">
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-lg font-semibold text-gray-800">
                  انتخاب محصولات ({selectedProducts.length})
                </h3>
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="جستجوی محصول..."
                  className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 w-64"
                />
              </div>

              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-96 overflow-y-auto p-2">
                {filteredProducts.map((product) => (
                  <div
                    key={product.id}
                    onClick={() => toggleProduct(product.id)}
                    className={`relative cursor-pointer border-2 rounded-xl p-3 transition-all hover:shadow-lg ${
                      selectedProducts.includes(product.id)
                        ? 'border-blue-600 bg-blue-50'
                        : 'border-gray-200 hover:border-blue-300'
                    }`}
                  >
                    {selectedProducts.includes(product.id) && (
                      <div className="absolute top-2 right-2 bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">
                        {selectedProducts.indexOf(product.id) + 1}
                      </div>
                    )}
                    <div className="aspect-square bg-gray-200 rounded-lg mb-2">
                      {/* محصول عکس اینجا */}
                    </div>
                    <p className="text-sm font-medium text-gray-800 truncate">
                      {product.name}
                    </p>
                    <p className="text-xs text-gray-600">
                      {Number(product.discount_price || product.price).toLocaleString()} تومان
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="border-t bg-gray-50 p-6 flex gap-3">
            <button
              type="submit"
              className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all font-medium shadow-lg hover:shadow-xl"
            >
              {showcase ? 'ذخیره تغییرات' : 'ایجاد ویترین'}
            </button>
            <button
              type="button"
              onClick={onClose}
              className="px-6 py-3 bg-gray-200 text-gray-700 rounded-xl hover:bg-gray-300 transition-colors font-medium"
            >
              انصراف
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};
```

ادامه دارد...
