From 439f69419fb32a4711dfc91c86d7bc8959274673 Mon Sep 17 00:00:00 2001
From: mouazkh <mouazalkhatib2013@gmail.com>
Date: Tue, 26 May 2026 04:16:53 +0300
Subject: [PATCH] fixed the details

---
 app/owner/properties/add/page.js | 146 ++++++++++++++++---------------
 1 file changed, 74 insertions(+), 72 deletions(-)

diff --git a/app/owner/properties/add/page.js b/app/owner/properties/add/page.js
index 44ccfcb..30050de 100644
--- a/app/owner/properties/add/page.js
+++ b/app/owner/properties/add/page.js
@@ -1025,81 +1025,83 @@ const handleMapClick = async (coords) => {
                 </div>
               </div>
 
-              <div>
-                <h3 className="text-lg font-bold text-gray-900 mb-4">شروط استخدام العقار</h3>
-                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                  {termsList.map((term) => {
-                    const Icon = term.icon;
-                    return (
-                      <label
-                        key={term.id}
-                        className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-all ${
-                          formData.terms[term.id]
-                            ? 'border-amber-500 bg-amber-50'
-                            : 'border-gray-200 hover:border-amber-200 hover:bg-amber-50/50'
-                        }`}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={formData.terms[term.id]}
-                          onChange={() => toggleTerm(term.id)}
-                          className="hidden"
-                        />
-                        <Icon className={`w-5 h-5 ${
-                          formData.terms[term.id] ? 'text-amber-600' : 'text-gray-400'
-                        }`} />
-                        <span className={`text-sm ${
-                          formData.terms[term.id] ? 'text-amber-700' : 'text-gray-600'
-                        }`}>
-                          {term.label}
-                        </span>
-                      </label>
-                    );
-                  })}
-                </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"
+              {purpose === 'rent' && (
+                <div>
+                  <h3 className="text-lg font-bold text-gray-900 mb-4">شروط استخدام العقار</h3>
+                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                    {termsList.map((term) => {
+                      const Icon = term.icon;
+                      return (
+                        <label
+                          key={term.id}
+                          className={`flex items-center gap-2 p-3 border rounded-xl cursor-pointer transition-all ${
+                            formData.terms[term.id]
+                              ? 'border-amber-500 bg-amber-50'
+                              : 'border-gray-200 hover:border-amber-200 hover:bg-amber-50/50'
+                          }`}
                         >
-                          {term}
-                          <button
-                            type="button"
-                            onClick={() => removeCustomTerm(term)}
-                            className="hover:text-red-600 transition-colors"
-                          >
-                            <X className="w-3.5 h-3.5" />
-                          </button>
-                        </span>
-                      ))}
+                          <input
+                            type="checkbox"
+                            checked={formData.terms[term.id]}
+                            onChange={() => toggleTerm(term.id)}
+                            className="hidden"
+                          />
+                          <Icon className={`w-5 h-5 ${
+                            formData.terms[term.id] ? 'text-amber-600' : 'text-gray-400'
+                          }`} />
+                          <span className={`text-sm ${
+                            formData.terms[term.id] ? 'text-amber-700' : 'text-gray-600'
+                          }`}>
+                            {term.label}
+                          </span>
+                        </label>
+                      );
+                    })}
+                  </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>
-              </div>
+              )}
             </motion.div>
           )}