<!-- SaaS Modals -->

<!-- Categories Management Modal -->
<div class="modal fade" id="categoriesModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
    <div class="modal-content card-saas">
      <div class="modal-header border-0" style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);">
        <h5 class="modal-title fw-bold text-white"><i class="fa-solid fa-layer-group me-2"></i> إدارة التصنيفات المالية</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
           <!-- Inline Delete Confirmation Bar (hidden by default) -->
           <div id="catDeleteConfirm" class="alert alert-danger d-none py-2 px-3 d-flex align-items-center justify-content-between mb-3" style="border-radius: 10px;">
               <span class="fw-semibold small"><i class="fa-solid fa-triangle-exclamation me-2"></i>مسح التصنيف؟ لا يمكن التراجع!</span>
               <div class="d-flex gap-2">
                   <button class="btn btn-sm btn-danger fw-bold" id="catDeleteConfirmBtn">نعم، امسح</button>
                   <button class="btn btn-sm btn-light" onclick="cancelDeleteCategory()">إلغاء</button>
               </div>
           </div>
           <!-- Error alert -->
           <div id="catErrorAlert" class="alert alert-danger d-none py-2 small"></div>

           <h6 class="fw-bold text-secondary mb-3"><i class="fa-solid fa-plus-circle me-1"></i> إضافة تصنيف جديد</h6>
           <form id="ajaxCategoryForm" class="mb-4" onsubmit="submitCategory(event)">
               <input type="hidden" id="catCsrf" value="<?= generate_csrf_token() ?>">
               <div class="row g-2 align-items-end">
                   <div class="col-6 col-md-3">
                       <label class="form-label small text-muted mb-1">النوع</label>
                       <select id="catType" class="form-select" onchange="toggleFundSelector()">
                           <option value="income">دخل 💰</option>
                           <option value="expense">مصروف 💸</option>
                       </select>
                   </div>
                   <div class="col-6 col-md-4">
                       <label class="form-label small text-muted mb-1">اسم التصنيف *</label>
                       <input type="text" id="catName" class="form-control" placeholder="مثال: راتب، فواتير..." required>
                   </div>
                   <div class="col-6 col-md-2" id="catFundWrapper" style="display:none;">
                       <label class="form-label small text-muted mb-1">الصندوق</label>
                       <select id="catFund" class="form-select">
                           <option value="personal">شخصي 50%</option>
                           <option value="business">عمل 20%</option>
                           <option value="savings">ادخار 20%</option>
                           <option value="charity">صدقات 10%</option>
                       </select>
                   </div>
                   <div class="col-3 col-md-1">
                       <label class="form-label small text-muted mb-1">اللون</label>
                       <input type="color" id="catColor" value="#6366f1" class="form-control form-control-color w-100" title="اختر لون التصنيف" style="height: 38px; cursor: pointer;">
                   </div>
                   <div class="col-3 col-md-2">
                       <button type="submit" class="btn btn-primary w-100 fw-bold" id="catSubmitBtn"><i class="fa-solid fa-plus me-1"></i> إضافة</button>
                   </div>
               </div>
           </form>

           <div class="row">
               <div class="col-md-6">
                   <h6 class="fw-bold border-bottom pb-2" style="color: #10b981;"><i class="fa-solid fa-arrow-up me-1"></i> تصنيفات الدخل</h6>
                   <ul class="list-group list-group-flush" id="listIncomeCats">
                       <?php foreach($incomeCategories as $c):
                           $c_color = $c->color ?? '#6366f1';
                       ?>
                       <li class="list-group-item d-flex justify-content-between align-items-center px-2 py-2 bg-transparent border-0">
                           <div class="d-flex align-items-center gap-2">
                               <span class="rounded-circle d-inline-block flex-shrink-0" style="width:12px;height:12px;background:<?= htmlspecialchars($c_color) ?>;"></span>
                               <span class="fw-semibold small" style="color: #1e293b;"><?= htmlspecialchars($c->name) ?></span>
                           </div>
                           <a href="javascript:void(0)" class="btn btn-sm btn-light text-danger border-0 opacity-75 hover-opacity-100" onclick="deleteCategory(<?= $c->id ?>)" title="حذف"><i class="fa-solid fa-times"></i></a>
                       </li>
                       <?php endforeach; ?>
                   </ul>
               </div>
               <div class="col-md-6">
                   <h6 class="fw-bold border-bottom pb-2" style="color: #ef4444;"><i class="fa-solid fa-arrow-down me-1"></i> تصنيفات المصروفات</h6>
                   <ul class="list-group list-group-flush" id="listExpenseCats">
                       <?php foreach($expenseCategories as $c):
                           $c_color = $c->color ?? '#6366f1';
                           $fundLabels = ['personal'=>'شخصي','business'=>'عمل','savings'=>'ادخار','charity'=>'صدقات'];
                           $fundLabel = $fundLabels[$c->linked_fund ?? 'personal'] ?? 'شخصي';
                       ?>
                       <li class="list-group-item d-flex justify-content-between align-items-center px-2 py-2 bg-transparent border-0">
                           <div class="d-flex align-items-center gap-2">
                               <span class="rounded-circle d-inline-block flex-shrink-0" style="width:12px;height:12px;background:<?= htmlspecialchars($c_color) ?>;"></span>
                               <span class="fw-semibold small" style="color: #1e293b;"><?= htmlspecialchars($c->name) ?></span>
                               <span class="badge rounded-pill small" style="background: <?= htmlspecialchars($c_color) ?>22; color: <?= htmlspecialchars($c_color) ?>; font-size: 0.65rem;"><?= $fundLabel ?></span>
                           </div>
                           <a href="javascript:void(0)" class="btn btn-sm btn-light text-danger border-0 opacity-75" onclick="deleteCategory(<?= $c->id ?>)" title="حذف"><i class="fa-solid fa-times"></i></a>
                       </li>
                       <?php endforeach; ?>
                   </ul>
               </div>
            </div>
       </div>
     </div>
   </div>
</div>

<!-- New Installment Modal -->
<div class="modal fade" id="newInstallmentModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-saas">
      <div class="modal-header border-0 bg-light">
        <h5 class="modal-title fw-bold"><i class="fa-solid fa-cart-plus text-primary me-2"></i> منتج تقسيط جديد</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form action="<?= BASE_URL ?>/finance/storeInstallment" method="POST" class="loader-form">
      <div class="modal-body p-4">
          <?= csrf_field() ?>
          <div class="mb-3">
              <label class="form-label text-muted">اسم السلعة / المنتج</label>
              <input type="text" name="name" class="form-control form-control-lg" required>
          </div>
          <div class="mb-3">
              <label class="form-label text-muted">أيقونة (اختياري)</label>
              <select name="icon" class="form-select">
                  <option value="fa-box">صندوق / سلعة (افتراضي)</option>
                  <option value="fa-car">سيارة</option>
                  <option value="fa-mobile-screen">إلكترونيات / هاتف</option>
                  <option value="fa-house">عقار / شقة</option>
                  <option value="fa-couch">أثاث منزلي</option>
                  <option value="fa-credit-card">فيزا / بنك</option>
              </select>
          </div>
          <div class="row">
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">إجمالي عدد الأشهر</label>
                  <input type="number" name="total_months" class="form-control" required min="1">
              </div>
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">القسط الشهري</label>
                  <input type="number" step="0.01" name="monthly_amount" class="form-control" required>
              </div>
          </div>
          <div class="mb-3">
              <label class="form-label text-muted">تاريخ سداد القسط الأول</label>
              <input type="date" name="start_date" class="form-control" required>
          </div>
      </div>
      <div class="modal-footer border-0">
        <button type="submit" class="btn btn-primary w-100 fw-bold pb-2 pt-2">إنشاء نظام التقسيط</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Other remaining exact same forms strictly designed -> Savings / Debt / Investment -->
<!-- Goal Modal -->
<div class="modal fade" id="savingsModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-saas">
      <div class="modal-header border-0 bg-info">
        <h5 class="modal-title fw-bold text-white"><i class="fa-solid fa-flag text-white me-2"></i> إطلاق تحدي ادخار</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="<?= BASE_URL ?>/finance/storeSavingGoal" method="POST" class="loader-form">
      <div class="modal-body p-4">
          <?= csrf_field() ?>
          <div class="mb-3">
              <label class="form-label text-muted fw-bold">ما هو هدفك؟</label>
              <input type="text" name="title" class="form-control form-control-lg" placeholder="شراء سيارة، حفل زفاف..." required>
          </div>
          <div class="row">
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">المبلغ المستهدف القاطع</label>
                  <input type="number" step="0.01" name="target_amount" class="form-control" required>
              </div>
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">تاريخ الحسم (Expected)</label>
                  <input type="date" name="expected_date" class="form-control" required>
              </div>
          </div>
      </div>
      <div class="modal-footer border-0">
        <button type="submit" class="btn btn-info text-white w-100 fw-bold pb-2 pt-2">شغّل التحدي!</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Investment Modal -->
<div class="modal fade" id="investmentModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-saas">
      <div class="modal-header border-0 bg-dark">
        <h5 class="modal-title fw-bold text-white"><i class="fa-solid fa-arrow-trend-up text-success me-2"></i> شراء أصل استثماري جديد</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="<?= BASE_URL ?>/finance/storeInvestment" method="POST" class="loader-form">
      <div class="modal-body p-4">
          <?= csrf_field() ?>
          <div class="row">
              <div class="col-6 mb-3">
                  <label class="form-label text-muted fw-bold">السوق / النوع</label>
                  <select name="asset_type" class="form-select">
                      <option value="أسهم (Stocks)">أسهم محلية عالمية</option>
                      <option value="عملات رقمية (Crypto)">كريبتو</option>
                      <option value="ذهب / معادن">ذهب / فضة</option>
                      <option value="عقارات">عقارات / أراضي</option>
                      <option value="صناديق">صناديق استثمار الملاذ</option>
                  </select>
              </div>
              <div class="col-6 mb-3">
                  <label class="form-label text-muted fw-bold">اسم الأصل بدقة</label>
                  <input type="text" name="asset_name" class="form-control" placeholder="مثال: BTC, AAPL..." required>
              </div>
          </div>
          <div class="row mt-2">
              <div class="col-6 mb-3">
                  <label class="form-label text-muted fw-bold text-danger">سعر الشراء للوحدة (Buy Price)</label>
                  <input type="number" step="0.00000001" name="buy_price" class="form-control" required>
              </div>
              <div class="col-6 mb-3">
                  <label class="form-label text-muted fw-bold text-success">الكمية (Quantity / Shares)</label>
                  <input type="number" step="0.00000001" name="quantity" class="form-control" required>
              </div>
          </div>
          <div class="alert alert-light border mt-2 shadow-sm text-muted lh-sm font-monospace text-center">
              القيمة الإجمالية = (سعر الشراء × الكمية). سيتم حساب الأرباح تلقائياً عند تغيير السعر مستقبلياً.
          </div>
      </div>
      <div class="modal-footer border-0">
        <button type="submit" class="btn btn-dark w-100 fw-bold pb-2 pt-2 text-success">إدراج في المحفظة الاستثمارية</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Debt Modal Template exactly retained as is with SaaS classes -->
<div class="modal fade" id="debtModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-saas">
      <div class="modal-header border-0 bg-danger text-white">
        <h5 class="modal-title fw-bold"><i class="fa-solid fa-handshake"></i> تسجيل دين / سلفة</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="<?= BASE_URL ?>/finance/storeDebt" method="POST" class="loader-form">
      <div class="modal-body p-4">
          <?= csrf_field() ?>
          <div class="mb-3">
              <label class="form-label text-muted">اسم صاحب الدين</label>
              <input type="text" name="person_name" class="form-control" required>
          </div>
          <div class="mb-3">
              <label class="form-label text-muted">المبلغ المحوري</label>
              <input type="number" step="0.01" name="amount" class="form-control" required>
          </div>
          <div class="row">
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">النوع</label>
                  <select name="type" class="form-select">
                      <option value="owed">عليّ أنا ملزم بتسديده</option>
                      <option value="receive">لي وسأسترده</option>
                  </select>
              </div>
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">تاريخ السداد</label>
                  <input type="date" name="due_date" class="form-control">
              </div>
          </div>
      </div>
      <div class="modal-footer border-0">
        <button type="submit" class="btn btn-danger w-100 fw-bold">حفظ السجل المالي المعلق</button>
      </div>
      </form>
    </div>
  </div>
</div>

<!-- Debt Partial Payment Modal -->
<div class="modal fade" id="debtPaymentModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content card-saas">
      <div class="modal-header border-0 bg-primary text-white">
        <h5 class="modal-title fw-bold"><i class="fa-solid fa-money-bill-transfer"></i> سداد جزء من الدين</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form action="<?= BASE_URL ?>/finance/storeDebtPayment" method="POST" class="loader-form">
      <div class="modal-body p-4">
          <?= csrf_field() ?>
          <input type="hidden" name="debt_id" id="pay_debt_id">
          
          <div class="alert alert-light border small text-muted text-center" id="pay_debt_reminder">
             المتبقي للسداد: <span id="pay_debt_remaining" class="fw-bold text-dark"></span> ج.م
          </div>
          
          <div class="mb-3">
              <label class="form-label text-muted">مبلغ السداد</label>
              <input type="number" step="0.01" name="amount" id="pay_debt_amount" class="form-control form-control-lg text-center fw-bold" required>
          </div>
          <div class="row">
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">تاريخ السداد</label>
                  <input type="date" name="payment_date" class="form-control" value="<?= date('Y-m-d') ?>" required>
              </div>
              <div class="col-6 mb-3">
                  <label class="form-label text-muted">ملاحظات (اختياري)</label>
                  <input type="text" name="notes" class="form-control" placeholder="...">
              </div>
          </div>
      </div>
      <div class="modal-footer border-0">
        <button type="submit" class="btn btn-primary w-100 fw-bold">تأكيد السداد</button>
      </div>
      </form>
    </div>
  </div>
</div>


