fixed the details

app/owner/properties/add/page.js

@@ -166,6 +166,8 @@ export default function AddPropertyPage() {
   
   const [imagePreviews, setImagePreviews] = useState([]);
   const [uploadedImagePaths, setUploadedImagePaths] = useState([]);
+  const [customTerms, setCustomTerms] = useState([]);
+  const [customTermInput, setCustomTermInput] = useState('');
   
   const [selectedLocation, setSelectedLocation] = useState(null);
   const [mapCenter, setMapCenter] = useState([33.5138, 36.2765]); 
@@ -459,6 +461,18 @@ const handleMapClick = async (coords) => {
     });
   };
 
+  const addCustomTerm = () => {
+    const val = customTermInput.trim();
+    if (!val) return;
+    if (customTerms.includes(val)) return;
+    setCustomTerms(prev => [...prev, val]);
+    setCustomTermInput('');
+  };
+
+  const removeCustomTerm = (term) => {
+    setCustomTerms(prev => prev.filter(t => t !== term));
+  };
+
   const incrementBedrooms = () => {
     setFormData({
       ...formData,
@@ -588,11 +602,13 @@ const handleMapClick = async (coords) => {
       .filter(([, v]) => v)
       .map(([k]) => k);
 
+    const allTerms = [...new Set([...selectedTerms, ...customTerms])];
+
     const details = {
       description: formData.description || '',
       services: selectedServices,
       serviceDetails: selectedServices.reduce((acc, s) => ({ ...acc, [s]: formData.serviceDetails[s] || 'in general' }), {}),
-      terms: selectedTerms.reduce((acc, k) => ({ ...acc, [k]: true }), {}),
+      terms: allTerms.reduce((acc, k) => ({ ...acc, [k]: true }), {}),
       displayType: formData.offerType === 'both' ? 'Both' : formData.offerType === 'daily' ? 'Daily' : 'Monthly',
       propertyCondition: formData.furnished ? 'WithFurniture' : 'WithoutFurniture',
       floorNumber: parseInt(formData.floorNumber) || 0,
@@ -1036,6 +1052,48 @@ const handleMapClick = async (coords) => {
                     );
                   })}
                 </div>
+
+                {/* Custom Terms */}
+                <div className="mt-4 p-4 border border-dashed border-gray-300 rounded-xl">
+                  <p className="text-sm font-medium text-gray-700 mb-2">إضافة شرط مخصص</p>
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      value={customTermInput}
+                      onChange={(e) => setCustomTermInput(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addCustomTerm(); } }}
+                      placeholder="اكتب شرطاً مخصصاً..."
+                      className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-amber-500 focus:border-transparent outline-none"
+                    />
+                    <button
+                      type="button"
+                      onClick={addCustomTerm}
+                      disabled={!customTermInput.trim()}
+                      className="px-4 py-2 bg-amber-500 text-white rounded-lg text-sm font-medium hover:bg-amber-600 disabled:bg-gray-300 disabled:cursor-not-allowed transition-colors"
+                    >
+                      إضافة
+                    </button>
+                  </div>
+                  {customTerms.length > 0 && (
+                    <div className="flex flex-wrap gap-2 mt-3">
+                      {customTerms.map((term) => (
+                        <span
+                          key={term}
+                          className="inline-flex items-center gap-1 px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm"
+                        >
+                          {term}
+                          <button
+                            type="button"
+                            onClick={() => removeCustomTerm(term)}
+                            className="hover:text-red-600 transition-colors"
+                          >
+                            <X className="w-3.5 h-3.5" />
+                          </button>
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
               </div>
             </motion.div>
           )}