Spaces:

joermd
/

mostasharak

Running

File size: 37,856 Bytes

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>المنصة القانونية الذكية - وإنشاء العقود</title>
  <!-- ربط مكتبات Tailwind وFont Awesome -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
  <!-- ربط مكتبة jsPDF لتحويل النص إلى PDF -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <!-- (اختياري) ربط مكتبة PicoCSS لتنسيق قسم OCR -->
  <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap");

    :root {
      --primary-color: #2563eb;
      --primary-hover: #1d4ed8;
      --background-light: #f8fafc;
      --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    body {
      font-family: "Tajawal", sans-serif;
      background: var(--background-light);
    }

    /* الشريط الجانبي */
    .sidebar {
      background: white;
      width: 280px;
      position: fixed;
      right: 0;
      top: 0;
      height: 100vh;
      z-index: 40;
      transition: transform 0.3s ease;
      box-shadow: var(--card-shadow);
    }
    .main-content {
      margin-right: 280px;
      transition: margin 0.3s ease;
      min-height: 100vh;
      padding: 2rem;
      background: var(--background-light);
    }
    .nav-link {
      display: flex;
      align-items: center;
      padding: 1rem 1.5rem;
      color: #374151;
      transition: all 0.3s ease;
      border-radius: 0.5rem;
      margin: 0.25rem 0.5rem;
    }
    .nav-link:hover {
      background: #f3f4f6;
      color: var(--primary-color);
    }
    .nav-link.active {
      background: var(--primary-color);
      color: white;
    }
    .feature-card {
      background: white;
      border-radius: 1rem;
      box-shadow: var(--card-shadow);
      transition: all 0.3s ease;
      overflow: hidden;
      height: 100%;
    }
    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    .action-button {
      background: var(--primary-color);
      color: white;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: none;
      font-weight: 500;
      width: 100%;
      text-align: center;
    }
    .action-button:hover {
      background: var(--primary-hover);
      transform: translateY(-1px);
    }
    .input-group {
      position: relative;
    }
    .input-group.focused input,
    .input-group.focused textarea {
      border-color: var(--primary-color);
      transform: translateY(-2px);
    }
    .loading-spinner {
      border: 3px solid #f3f3f3;
      border-radius: 50%;
      border-top: 3px solid var(--primary-color);
      width: 24px;
      height: 24px;
      animation: spin 1s linear infinite;
      margin: 0 auto;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .response-container {
      white-space: pre-wrap;
      font-family: "Tajawal", sans-serif;
      line-height: 1.6;
      max-height: 400px;
      overflow-y: auto;
    }
    /* تنسيق قسم إنشاء العقود */
    .split-screen {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin-top: 1rem;
    }
    .contract-card {
      background: white;
      border-radius: 1.5rem;
      box-shadow: var(--card-shadow);
      padding: 2rem;
      border: 1px solid #f3f4f6;
    }
    .contract-output {
      background: #fafafa;
      border-radius: 1rem;
      padding: 2rem;
      min-height: 300px;
      line-height: 1.8;
      font-size: 1.1rem;
      border: 1px solid #f3f4f6;
      white-space: pre-wrap;
    }
    .copy-btn {
      position: absolute;
      top: 1rem;
      left: 1rem;
      padding: 0.5rem 1rem;
      background: #f3f4f6;
      border-radius: 0.75rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.9rem;
      color: #4b5563;
    }
    .copy-btn:hover {
      background: #e5e7eb;
    }
    .success-message {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: #10b981;
      color: white;
      padding: 1rem 2rem;
      border-radius: 1rem;
      animation: slideIn 0.3s ease;
    }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    .section-title {
      font-size: 1.25rem;
      color: #1f2937;
      margin-bottom: 1.5rem;
      padding-bottom: 0.75rem;
      border-bottom: 2px solid #e5e7eb;
      font-weight: 600;
    }
    /* تحسين التنسيق على الأجهزة المحمولة */
    @media (max-width: 768px) {
      .sidebar { transform: translateX(100%); }
      .sidebar.open { transform: translateX(0); }
      .main-content { margin-right: 0; }
      .split-screen { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <!-- زر إظهار/إخفاء الشريط الجانبي -->
  <button id="sidebarToggle" class="fixed top-4 right-4 z-50 p-2 rounded-lg bg-white shadow-lg md:hidden">
    <i class="fas fa-bars text-xl"></i>
  </button>

  <!-- الشريط الجانبي -->
  <aside class="sidebar">
    <div class="p-6">
      <div class="flex items-center gap-4 mb-8">
        <!-- استخدام الصورة المطلوبة كشعار -->
        <img src="https://ufastpro.com/wp-content/uploads/2025/02/تصميم-بدون-عنوان.png" alt="شعار المنصة" class="w-12 h-12 rounded-full" />
        <div>
          <h1 class="text-xl font-bold text-gray-800">المنصة القانونية</h1>
          <p class="text-sm text-gray-500">خدمات قانونية ذكية</p>
        </div>
      </div>
      <nav class="space-y-1">
        <a href="#" class="nav-link active" data-section="home">
          <i class="fas fa-home ml-3"></i>
          <span>الرئيسية</span>
        </a>
        <a href="#" class="nav-link" data-section="analysis">
          <i class="fas fa-balance-scale ml-3"></i>
          <span>التحليل القانوني</span>
        </a>
        <a href="#" class="nav-link" data-section="mindMap">
          <i class="fas fa-project-diagram ml-3"></i>
          <span>خريطة التفكير</span>
        </a>
        <a href="#" class="nav-link" data-section="search">
          <i class="fas fa-search ml-3"></i>
          <span>البحث القانوني</span>
        </a>
        <a href="#" class="nav-link" data-section="documents">
          <i class="fas fa-file-alt ml-3"></i>
          <span>المستندات</span>
        </a>
        <a href="#" class="nav-link" data-section="translation">
          <i class="fas fa-language ml-3"></i>
          <span>الترجمة القانونية</span>
        </a>
        <a href="#" class="nav-link" data-section="consultation">
          <i class="fas fa-comments ml-3"></i>
          <span>استشارة قانونية</span>
        </a>
        <!-- رابط قسم إنشاء العقود -->
        <a href="#" class="nav-link" data-section="contracts">
          <i class="fas fa-file-contract ml-3"></i>
          <span>العقود</span>
        </a>
        <a href="#" class="nav-link" data-section="precedents">
          <i class="fas fa-gavel ml-3"></i>
          <span>الأحكام والسوابق</span>
        </a>
        <!-- إضافة قسم OCR -->
        <a href="#" class="nav-link" data-section="ocr">
          <i class="fas fa-image ml-3"></i>
          <span>OCR</span>
        </a>
      </nav>
    </div>
  </aside>

  <!-- المحتوى الرئيسي -->
  <main class="main-content">
    <!-- بحث عالمي -->
    <div class="search-container mb-6">
      <input type="text" class="search-input w-full p-3 rounded border" placeholder="ابحث في المنصة..." id="globalSearch" />
      <i class="fas fa-search absolute top-1/2 right-4 transform -translate-y-1/2 text-gray-400"></i>
    </div>

    <!-- قسم الرئيسية -->
    <section id="home" class="section">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">الخدمات القانونية</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- بطاقات الخدمة -->
        <div class="feature-card p-6">
          <div class="text-center">
            <i class="fas fa-balance-scale text-3xl mb-4 text-blue-600"></i>
            <h3 class="text-xl font-bold text-gray-800 mb-3">التحليل القانوني</h3>
            <p class="text-gray-600 mb-4">
              تحليل متكامل للقضايا والمستندات القانونية باستخدام الذكاء الاصطناعي
            </p>
            <button class="action-button" onclick="showSection('analysis')">ابدأ التحليل</button>
          </div>
        </div>
        <div class="feature-card p-6">
          <div class="text-center">
            <i class="fas fa-project-diagram text-3xl mb-4 text-blue-600"></i>
            <h3 class="text-xl font-bold text-gray-800 mb-3">خريطة التفكير</h3>
            <p class="text-gray-600 mb-4">
              إنشاء خرائط ذهنية للقضايا القانونية وتحليل العلاقات
            </p>
            <button class="action-button" onclick="showSection('mindMap')">إنشاء خريطة</button>
          </div>
        </div>
        <div class="feature-card p-6">
          <div class="text-center">
            <i class="fas fa-search text-3xl mb-4 text-blue-600"></i>
            <h3 class="text-xl font-bold text-gray-800 mb-3">البحث القانوني</h3>
            <p class="text-gray-600 mb-4">
              بحث متقدم في السوابق والقضايا المشابهة
            </p>
            <button class="action-button" onclick="showSection('search')">ابدأ البحث</button>
          </div>
        </div>
        <div class="feature-card p-6">
          <div class="text-center">
            <i class="fas fa-file-alt text-3xl mb-4 text-blue-600"></i>
            <h3 class="text-xl font-bold text-gray-800 mb-3">المستندات</h3>
            <p class="text-gray-600 mb-4">
              إنشاء وتحرير المستندات القانونية بمساعدة الذكاء الاصطناعي
            </p>
            <button class="action-button" onclick="showSection('documents')">إنشاء مستند</button>
          </div>
        </div>
        <div class="feature-card p-6">
          <div class="text-center">
            <i class="fas fa-language text-3xl mb-4 text-blue-600"></i>
            <h3 class="text-xl font-bold text-gray-800 mb-3">الترجمة القانونية</h3>
            <p class="text-gray-600 mb-4">
              ترجمة احترافية للوثائق القانونية بدقة عالية مع إمكانية تنزيلها كملف PDF
            </p>
            <button class="action-button" onclick="showSection('translation')">ترجم الآن</button>
          </div>
        </div>
        <div class="feature-card p-6">
          <div class="text-center">
            <i class="fas fa-comments text-3xl mb-4 text-blue-600"></i>
            <h3 class="text-xl font-bold text-gray-800 mb-3">استشارة قانونية</h3>
            <p class="text-gray-600 mb-4">
              احصل على استشارة قانونية فورية من خبرائنا
            </p>
            <button class="action-button" onclick="showSection('consultation')">استشر الآن</button>
          </div>
        </div>
      </div>
    </section>

    <!-- الأقسام الأخرى -->
    <!-- قسم التحليل القانوني -->
    <section id="analysis" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">التحليل القانوني</h2>
      <div class="input-group bg-white rounded p-6 shadow">
        <!-- حقل رفع ملف PDF (اختياري) -->
        <input type="file" id="analysisPDF" accept=".pdf" class="mb-4" />
        <textarea class="w-full p-3 border rounded" placeholder="اكتب وصف القضية أو المستند الذي تريد تحليله..."></textarea>
        <button class="action-button mt-4" onclick="handleSubmit('analysis', 'قم بتحليل هذه القضية: ')">تحليل</button>
        <div id="analysisResult" class="mt-4 response-container"></div>
      </div>
    </section>

    <!-- قسم إنشاء المستندات القانونية -->
    <section id="documents" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">إنشاء مستند قانوني</h2>
      <div class="input-group bg-white rounded p-6 shadow">
        <textarea class="w-full p-3 border rounded" placeholder="اكتب وصف المستند المطلوب إنشاؤه..."></textarea>
        <button class="action-button mt-4" onclick="handleSubmit('documents', 'قم بإنشاء مستند قانوني بناءً على الوصف التالي: ')">إنشاء المستند</button>
        <div id="documentsResult" class="mt-4 response-container"></div>
      </div>
    </section>

    <!-- قسم خريطة التفكير القانونية -->
    <section id="mindMap" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">خريطة التفكير القانونية</h2>
      <div class="input-group bg-white rounded p-6 shadow">
        <textarea class="w-full p-3 border rounded" placeholder="اكتب وصف الموضوع الذي تريد إنشاء خريطة ذهنية له..."></textarea>
        <button class="action-button mt-4" onclick="handleSubmit('mindMap', 'قم بإنشاء خريطة ذهنية قانونية للموضوع التالي: ')">إنشاء خريطة التفكير</button>
        <div id="mindMapResult" class="mt-4 response-container"></div>
      </div>
    </section>

    <!-- قسم البحث القانوني -->
    <section id="search" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">البحث القانوني</h2>
      <div class="input-group bg-white rounded p-6 shadow">
        <textarea class="w-full p-3 border rounded" placeholder="اكتب استعلام البحث القانوني..."></textarea>
        <button class="action-button mt-4" onclick="handleSubmit('search', 'ابحث عن معلومات قانونية حول: ')">بحث</button>
        <div id="searchResult" class="mt-4 response-container"></div>
      </div>
    </section>

    <!-- قسم الترجمة القانونية -->
    <section id="translation" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">الترجمة القانونية</h2>
      <div class="input-group bg-white rounded p-6 shadow">
        <textarea class="w-full p-3 border rounded" placeholder="اكتب النص المراد ترجمته..."></textarea>
        <div class="flex gap-4 my-4">
          <select class="p-3 rounded border w-full" id="fromLang">
            <option value="ar">العربية</option>
            <option value="en">الإنجليزية</option>
          </select>
          <select class="p-3 rounded border w-full" id="toLang">
            <option value="en">الإنجليزية</option>
            <option value="ar">العربية</option>
          </select>
        </div>
        <button class="action-button" onclick="handleSubmit('translation', 'قم بترجمة هذا النص القانوني: ')">ترجمة</button>
        <div id="translationResult" class="mt-4 response-container"></div>
        <button id="downloadPDFButton" class="action-button mt-4">تنزيل الترجمة كملف PDF</button>
      </div>
    </section>

    <!-- قسم الاستشارة القانونية -->
    <section id="consultation" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">استشارة قانونية</h2>
      <div class="input-group bg-white rounded p-6 shadow">
        <textarea class="w-full p-3 border rounded" placeholder="اكتب سؤالك القانوني هنا..."></textarea>
        <button class="action-button mt-4" onclick="handleSubmit('consultation', 'أحتاج استشارة قانونية في الموضوع التالي: ')">احصل على استشارة</button>
        <div id="consultationResult" class="mt-4 response-container"></div>
      </div>
    </section>

    <!-- قسم إنشاء العقود -->
    <section id="contracts" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">منشئ العقود المصري الذكي</h2>
      <div class="split-screen">
        <!-- نموذج بيانات العقد -->
        <div class="contract-card">
          <div class="space-y-6">
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">عنوان العقد:</label>
              <input type="text" id="contractTitle" placeholder="عنوان العقد" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">تاريخ تحرير العقد:</label>
              <input type="date" id="contractDate" class="w-full p-2 border rounded" />
            </div>
            <h3 class="section-title">بيانات الطرف الأول</h3>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">اسم الطرف الأول:</label>
              <input type="text" id="firstPartyName" placeholder="الاسم الكامل" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">الرقم القومي للطرف الأول:</label>
              <input type="text" id="firstPartyID" placeholder="14 رقم" maxlength="14" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">الصفة:</label>
              <input type="text" id="firstPartyTitle" placeholder="مثال: مالك، مدير شركة" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">جنسية الطرف الأول:</label>
              <input type="text" id="firstPartyNationality" placeholder="الجنسية" value="مصري" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">عنوان الطرف الأول:</label>
              <input type="text" id="firstPartyAddress" placeholder="العنوان التفصيلي" class="w-full p-2 border rounded" />
            </div>
            <h3 class="section-title">بيانات الطرف الثاني</h3>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">اسم الطرف الثاني:</label>
              <input type="text" id="secondPartyName" placeholder="الاسم الكامل" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">الرقم القومي للطرف الثاني:</label>
              <input type="text" id="secondPartyID" placeholder="14 رقم" maxlength="14" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">الصفة:</label>
              <input type="text" id="secondPartyTitle" placeholder="مثال: مستأجر، مشتري" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">جنسية الطرف الثاني:</label>
              <input type="text" id="secondPartyNationality" placeholder="الجنسية" value="مصري" class="w-full p-2 border rounded" />
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">عنوان الطرف الثاني:</label>
              <input type="text" id="secondPartyAddress" placeholder="العنوان التفصيلي" class="w-full p-2 border rounded" />
            </div>
            <h3 class="section-title">تفاصيل العقد</h3>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">البند التمهيدي:</label>
              <textarea id="contractPreamble" placeholder="اكتب مضمون العقد والغرض منه" class="w-full p-2 border rounded h-24"></textarea>
            </div>
            <div class="mb-4 input-group">
              <label class="block text-gray-700 font-bold mb-2">بنود العقد:</label>
              <textarea id="contractTerms" placeholder="اكتب بنود العقد الأساسية" class="w-full p-2 border rounded h-48"></textarea>
            </div>
          </div>
          <div class="mt-4 text-center">
            <button id="generateButton" class="action-button">إنشاء العقد</button>
          </div>
        </div>
        <!-- عرض العقد المنشأ مع إمكانية النسخ -->
        <div class="contract-card relative">
          <h3 class="text-2xl font-bold text-gray-800 mb-4">العقد المنشأ</h3>
          <button class="copy-btn" id="copyButton">
            <i class="fas fa-copy"></i> نسخ العقد
          </button>
          <div id="contractOutput" class="contract-output"></div>
        </div>
      </div>
    </section>

    <!-- قسم OCR للتعرف على النص من الصورة -->
    <section id="ocr" class="section hidden">
      <h2 class="text-3xl font-bold text-gray-800 mb-8">OCR التعرف على النص</h2>
      <div class="bg-white rounded p-6 shadow">
        <article style="text-align: center;">
          <h3>نموذج OCR</h3>
          <p>هذه الواجهة تقوم بمعالجة الصورة وإجراء التعرف على النص.</p>
        </article>
        <label for="ocrFile">اختر صورة للرفع
          <input type="file" id="ocrFile" name="file" accept="image/*">
        </label>
        <button id="ocrSubmit" class="action-button mt-4">معالجة الصورة</button>
        <h4 id="ocrSpinner" style="text-align: center;" aria-busy="true" hidden>جاري المعالجة...</h4>
        <section id="ocrParsed" hidden>
          <label for="ocrText">💬 النص المعترف عليه:
            <pre id="ocrText" style="padding: 10px;"></pre>
          </label>
        </section>
        <section id="ocrRaw" hidden>
          <label for="ocrRawResponse">💬 الاستجابة الخام:
            <pre id="ocrRawResponse" style="padding: 10px;"></pre>
          </label>
        </section>
      </div>
    </section>
  </main>

  <!-- سكربتات الموقع -->
  <script>
    // تعريف API الأساسي (نقطة /chat) ومصادر أخرى
    const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
    const UPLOAD_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/upload';
    const OCR_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/ocr';

    // دالة الحصول على البادئة (prompt prefix) لكل قسم
    function getPromptPrefix(section) {
      switch(section) { 
        case 'analysis':
          return 'قم بتحليل هذه القضية: ';
        case 'documents':
          return 'قم بإنشاء مستند قانوني بناءً على الوصف التالي: ';
        case 'mindMap':
          return 'قم بإنشاء خريطة ذهنية لحل القضية باستخدام تقنية تونى بوزان الشهيرة: ';
        case 'search':
          return 'ابحث عن معلومات قانونية حول: [منصات: منصة1، منصة2، منصة3] ';
        case 'translation':
          return 'قم بترجمة هذا النص القانوني: ';
        case 'consultation':
          return 'أحتاج استشارة قانونية في الموضوع التالي: ';
        default:
          return '';
      }
    }

    // تفعيل التنقل بين الأقسام
    document.querySelectorAll(".nav-link").forEach(link => {
      link.addEventListener("click", (e) => {
        e.preventDefault();
        const section = e.currentTarget.getAttribute("data-section");
        if(section) {
          showSection(section);
          // إخفاء الشريط الجانبي على الأجهزة المحمولة بعد النقر
          if(window.innerWidth < 768) {
            document.querySelector(".sidebar").classList.remove("open");
          }
        }
      });
    });

    function showSection(sectionId) {
      document.querySelectorAll(".section").forEach(section => {
        section.classList.add("hidden");
      });
      document.getElementById(sectionId).classList.remove("hidden");
      document.querySelectorAll(".nav-link").forEach(link => {
        link.classList.remove("active");
        if (link.getAttribute("data-section") === sectionId) {
          link.classList.add("active");
        }
      });
    }

    // زر القائمة على الهاتف
    document.getElementById("sidebarToggle").addEventListener("click", () => {
      document.querySelector(".sidebar").classList.toggle("open");
    });

    // تحسين تأثير التركيز على حقول الإدخال
    document.querySelectorAll("input, textarea").forEach(element => {
      element.addEventListener("focus", function() {
        const group = this.closest(".input-group");
        if(group) group.classList.add("focused");
        this.style.transform = 'translateY(-2px)';
      });
      
      element.addEventListener("blur", function() {
        const group = this.closest(".input-group");
        if(group) group.classList.remove("focused");
        this.style.transform = 'translateY(0)';
      });
    });

    // دالة إرسال الطلبات لكافة الأقسام؛ تأخذ معاملين: القسم و (اختياري) prompt مخصص
    async function handleSubmit(section, customPrompt) {
      const container = document.getElementById(section);
      const resultDiv = container.querySelector(".response-container");
      
      // إذا كان القسم "analysis" نتعامل مع احتمال وجود ملف PDF ونص
      if (section === 'analysis') {
        const fileInput = container.querySelector("#analysisPDF");
        const textArea = container.querySelector("textarea");
        const text = textArea.value.trim();
        resultDiv.innerHTML = '';  // مسح النتائج السابقة

        let filePromise = null, textPromise = null;
        
        // إذا تم إرفاق ملف PDF نقوم برفعه وتحليله
        if (fileInput && fileInput.files && fileInput.files.length > 0) {
          const file = fileInput.files[0];
          let formData = new FormData();
          // استخدام المفتاح "files" ليتوافق مع نقطة النهاية في FastAPI
          formData.append("files", file);
          resultDiv.innerHTML += '<div id="fileAnalysisSpinner" class="loading-spinner"></div>';
          filePromise = fetch(UPLOAD_URL, {
            method: "POST",
            body: formData
          })
          .then(response => {
            if (!response.ok) {
              throw new Error("فشل رفع الملف");
            }
            return response.json();
          })
          .then(data => data.response || "تم تحليل الملف بنجاح")
          .catch(error => {
            console.error("File analysis error:", error);
            return '<div class="text-red-500">حدث خطأ في رفع الملف. يرجى المحاولة مرة أخرى.</div>';
          });
        }
        
        // إذا وُجد نص للتحليل (سواءً مع الملف أو بدونه)
        if (text) {
          resultDiv.innerHTML += '<div id="textAnalysisSpinner" class="loading-spinner"></div>';
          const payload = {
            message: (customPrompt || getPromptPrefix(section)) + text,
            history: []
          };
          textPromise = fetch(API_URL, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
          })
          .then(response => {
            if (!response.ok) {
              throw new Error("فشل الاستجابة من الخادم");
            }
            return response.json();
          })
          .then(data => data.response || "")
          .catch(error => {
            console.error("Text analysis error:", error);
            return '<div class="text-red-500">حدث خطأ في تحليل النص. يرجى المحاولة مرة أخرى.</div>';
          });
        }
        
        // انتظار انتهاء العمليتين (إن وُجدتا)
        const fileResult = filePromise ? await filePromise : null;
        const textResult = textPromise ? await textPromise : null;
        
        // عرض النتائج النهائية
        resultDiv.innerHTML = '';
        if (fileResult) {
          resultDiv.innerHTML += `<div><strong>نتيجة تحليل الملف:</strong><br>${fileResult}</div><br>`;
        }
        if (textResult) {
          resultDiv.innerHTML += `<div><strong>نتيجة تحليل النص:</strong><br>${textResult}</div>`;
        }
        if (!fileResult && !textResult) {
          alert("الرجاء إدخال نص أو إرفاق ملف PDF");
          return;
        }
      } else {
        // للأقسام الأخرى التي لا تتطلب رفع ملفات
        const textArea = container.querySelector("textarea");
        const text = textArea.value.trim();
        if (!text) {
          alert("الرجاء إدخال نص");
          return;
        }
        const payload = {
          message: (customPrompt || getPromptPrefix(section)) + text,
          history: []
        };

        resultDiv.innerHTML = '<div class="loading-spinner"></div>';
        try {
          const response = await fetch(API_URL, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload)
          });
          if (!response.ok) {
            throw new Error("فشل الاستجابة من الخادم");
          }
          const data = await response.json();
          resultDiv.innerHTML = data.response || "";
        } catch (error) {
          console.error("Error:", error);
          resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>';
        }
      }
    }

    // وظيفة زر النسخ في قسم إنشاء العقود
    document.getElementById("copyButton").addEventListener("click", async function() {
      const contractText = document.getElementById("contractOutput").innerText;
      try {
        await navigator.clipboard.writeText(contractText);
        showSuccessMessage("تم نسخ العقد بنجاح!");
      } catch (err) {
        console.error("فشل نسخ النص:", err);
      }
    });

    // وظيفة إظهار رسالة النجاح عند النسخ
    function showSuccessMessage(message) {
      const successMessage = document.createElement("div");
      successMessage.className = "success-message";
      successMessage.textContent = message;
      document.body.appendChild(successMessage);
      setTimeout(() => {
        successMessage.style.opacity = "0";
        setTimeout(() => successMessage.remove(), 300);
      }, 2000);
    }

    // التحقق من صحة الرقم القومي للطرف الأول والثاني
    document.querySelectorAll("#firstPartyID, #secondPartyID").forEach(input => {
      input.addEventListener("input", function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        if (this.value.length > 14) {
          this.value = this.value.slice(0, 14);
        }
      });
    });

    // وظيفة تنزيل الترجمة كملف PDF باستخدام مكتبة jsPDF
    document.getElementById("downloadPDFButton").addEventListener("click", function() {
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
      const content = document.getElementById("translationResult").innerText;
      if (!content.trim()) {
        alert("لا يوجد نص للترجمة لتنزيله");
        return;
      }
      doc.setFont("Tajawal", "normal");
      doc.text(content, 40, 60, { maxWidth: 515 });
      doc.save("translation.pdf");
    });

    // وظيفة إضافة حقل جديد في قسم خريطة التفكير
    document.getElementById("addMindMapField")?.addEventListener("click", function() {
      const container = document.getElementById("mindMapFields");
      const newFieldDiv = document.createElement("div");
      newFieldDiv.className = "mb-4";
      newFieldDiv.innerHTML = `<label class="block text-gray-700 font-bold mb-2">خط جديد:</label>
         <input type="text" class="w-full p-3 border rounded" placeholder="اكتب فكرة جديدة" />`;
      container.appendChild(newFieldDiv);
    });

    // دالة إنشاء خريطة التفكير باستخدام الحقول المتعددة
    function handleMindMap() {
      const inputs = document.querySelectorAll("#mindMapFields input");
      let collectedText = "";
      inputs.forEach((input, index) => {
        const value = input.value.trim();
        if(value) {
          collectedText += `الخيط ${index + 1}: ${value}\n`;
        }
      });
      if (!collectedText.trim()) {
        alert("الرجاء إدخال بعض الأفكار لإنشاء خريطة التفكير");
        return;
      }
      const resultDiv = document.getElementById("mindMapResult");
      const prompt = getPromptPrefix("mindMap") + "\n" + collectedText +
                     "\nاستخدم منهجيات قوية مثل تحليل SWOT و5 خطوات لتحليل الأسباب الجذرية مع النظر في البدائل القانونية لتنظيم القضية بشكل احترافي.";
      resultDiv.innerHTML = '<div class="loading-spinner"></div>';
      fetch(API_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: prompt, history: [] })
      })
      .then(response => response.json())
      .then(data => {
        resultDiv.innerHTML = data.response || "";
      })
      .catch(error => {
        console.error("Error:", error);
        resultDiv.innerHTML = '<div class="text-red-500">حدث خطأ. يرجى المحاولة مرة أخرى.</div>';
      });
    }

    // دالة التعامل مع رفع ومعالجة الصورة لنظام OCR
    document.getElementById("ocrSubmit").addEventListener("click", async function() {
      const fileInput = document.getElementById("ocrFile");
      const spinner = document.getElementById("ocrSpinner");
      const ocrParsedSection = document.getElementById("ocrParsed");
      const ocrRawSection = document.getElementById("ocrRaw");
      const ocrTextPre = document.getElementById("ocrText");
      const ocrRawResponsePre = document.getElementById("ocrRawResponse");

      if (!fileInput.files || fileInput.files.length === 0) {
         alert("الرجاء اختيار صورة.");
         return;
      }
      
      const file = fileInput.files[0];
      let formData = new FormData();
      formData.append("file", file);
      
      spinner.hidden = false;
      ocrParsedSection.hidden = true;
      ocrRawSection.hidden = true;
      
      try {
         const response = await fetch(OCR_URL, {
             method: "POST",
             body: formData
         });
         const data = await response.json();
         
         // إذا كان النص طويلاً وقُسِم إلى جزئين، يتم دمجهما للعرض
         let recognizedText = "";
         if (data.text) {
           recognizedText = data.text;
         } else if (data.part1 && data.part2) {
           recognizedText = data.part1 + "\n\n" + data.part2;
         }
         
         ocrTextPre.textContent = recognizedText;
         ocrRawResponsePre.textContent = JSON.stringify(data, null, 2);
         
         ocrParsedSection.hidden = false;
         ocrRawSection.hidden = false;
      } catch (error) {
         console.error("OCR processing error:", error);
         alert("حدث خطأ أثناء معالجة الصورة.");
      } finally {
         spinner.hidden = true;
      }
    });

    // تهيئة الصفحة للقسم الافتراضي "home"
    document.addEventListener("DOMContentLoaded", () => {
      showSection("home");
    });
  </script>
</body>
</html>