<?php
/* index.php — Leen Holding Tasks: preserves original design and binds to your existing PHP + MySQL backend.
 * Frontend only; uses AJAX to call users.php, tasks.php, updates.php, and login.php (or users.php?action=login).
 * If your API files live in /api, keep API_BASE = '/api'. If they are in the same folder as this file, set API_BASE = ''.
 */
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نظام إدارة المهام - مجموعة لين القابضة</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    :root {
      --primary: #4361ee;
      --primary-light: #4895ef;
      --secondary: #3f37c9;
      --success: #4cc9f0;
      --danger: #f72585;
      --warning: #f8961e;
      --info: #4895ef;
      --dark: #212529;
      --light: #f8f9fa;
      --gray: #6c757d;
      --border: #dee2e6;
    }
    
    

    body {
      background-color: #f5f7fa;
      color: #333;
      line-height: 1.6;
    }
    
    .container {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* Header Styles */
    header {
      background: linear-gradient(120deg, var(--primary), var(--secondary));
      color: white;
      padding: 1rem 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .logo i {
      font-size: 28px;
    }
    
    .logo h1 {
      font-size: 24px;
      font-weight: 700;
    }
    
    .logo span {
      font-size: 14px;
      opacity: 0.9;
    }
    
    .user-actions {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .language-selector {
      display: flex;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50px;
      padding: 5px;
    }
    
    .language-selector button {
      background: none;
      border: none;
      color: white;
      padding: 6px 12px;
      border-radius: 50px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }
    
    .language-selector button.active {
      background: rgba(255, 255, 255, 0.25);
    }
    
    .user-profile {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    
    /* Main Layout */
    .main-layout {
      display: flex;
      margin-top: 20px;
      gap: 20px;
    }
    
    /* Sidebar */
    .sidebar {
      width: 260px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      padding: 20px 0;
      height: fit-content;
    }
    
    .sidebar-menu {
      list-style: none;
    }
    
    .sidebar-menu li {
      padding: 12px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .sidebar-menu li:hover {
      background: #f5f7fa;
    }
    
    .sidebar-menu li.active {
      background: var(--primary-light);
      color: white;
      border-right: 4px solid var(--primary);
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
    }
    
    /* Stats Cards */
    .stats-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 25px;
    }
    
    .stat-card {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    
    .stat-icon.blue {
      background: #e7f0ff;
      color: var(--primary);
    }
    
    .stat-icon.green {
      background: #e6f4ea;
      color: #0f9d58;
    }
    
    .stat-icon.orange {
      background: #fff0e0;
      color: #ff9800;
    }
    
    .stat-icon.red {
      background: #ffebee;
      color: #f44336;
    }
    
    .stat-info h3 {
      font-size: 24px;
      margin-bottom: 5px;
    }
    
    .stat-info p {
      color: var(--gray);
      font-size: 14px;
    }
    
    /* Filters */
    .filters {
      background: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      margin-bottom: 25px;
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      align-items: center;
    }
    
    .search-box {
      position: relative;
      flex: 1;
    }
    
    .search-box input {
      width: 100%;
      padding: 12px 15px 12px 40px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
    }
    
    .search-box i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray);
    }
    
    .filter-select {
      padding: 12px 15px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 14px;
      background: white;
      color: var(--dark);
      min-width: 150px;
    }
    
    .btn {
      padding: 12px 20px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .btn-primary {
      background: var(--primary);
      color: white;
    }
    
    .btn-primary:hover {
      background: var(--secondary);
    }
    
    /* Kanban Board */
    .kanban-board {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 20px;
    }
    
    .kanban-column {
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }
    
    .column-header {
      padding: 15px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--border);
    }
    
    .column-title {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 600;
    }
    
    .column-badge {
      background: #f0f5ff;
      color: var(--primary);
      padding: 3px 10px;
      border-radius: 50px;
      font-size: 12px;
    }
    
    .column-actions {
      display: flex;
      gap: 10px;
    }
    
    .column-actions button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--gray);
      font-size: 14px;
    }
    
    .tasks-list {
      padding: 15px;
      min-height: 400px;
      max-height: 600px;
      overflow-y: auto;
    }
    
    .task-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: all 0.3s;
    }
    
    .task-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    
    .task-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 10px;
    }
    
    .task-title {
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .task-priority {
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 4px;
    }
    
    .priority-high {
      background: #ffebee;
      color: #f44336;
    }
    
    .priority-medium {
      background: #fff8e1;
      color: #ff9800;
    }
    
    .priority-low {
      background: #e8f5e9;
      color: #4caf50;
    }
    
    .task-description {
      color: var(--gray);
      font-size: 14px;
      margin-bottom: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .task-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      font-size: 13px;
      color: var(--gray);
    }
    
    .task-assignee {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .assignee-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
    }
    
    .task-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .task-tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }
    
    .tag {
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      background: #f0f5ff;
      color: var(--primary);
    }
    
    .task-actions {
      display: flex;
      gap: 10px;
    }
    
    .task-actions button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--gray);
      font-size: 14px;
    }

    /* Modal/dialog */
    .modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:16px;z-index:999}
    .modal{width:100%;max-width:720px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.15);overflow:hidden}
    .modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);font-weight:600}
    .modal-body{padding:18px}
    .modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--border)}
    .input,.select,.textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px}
    .textarea{min-height:96px;resize:vertical}
    .btn-secondary{background:#fff;border:1px solid var(--border);}
    .hidden{display:none !important;}

    /* Responsive */
    @media (max-width: 992px) {
      .main-layout { flex-direction: column; }
      .sidebar { width: 100%; }
      .kanban-board { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .stats-cards { grid-template-columns: 1fr; }
      .filters { flex-direction: column; align-items: stretch; }
      .search-box, .filter-select { width: 100%; }
    }
  
/* ===== Kanban Board Layout ===== */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .kanban-board {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Status Strip Colors ===== */
.task-card {
  position: relative;
  border-left: 6px solid transparent;
  background: #fff;
}
.task-open {
  border-left-color: #3498db; /* Blue */
}
.task-inprogress {
  border-left-color: #f1c40f; /* Yellow */
}
.task-blocked {
  border-left-color: #e67e22; /* Orange */
}
.task-done {
  border-left-color: #2ecc71; /* Green */
}


/* ===== Kanban Board Layout (4 cols desktop, 1 col mobile) ===== */
.kanban-board{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
@media (max-width: 768px){
  .kanban-board{ grid-template-columns: 1fr !important; }
  .stats-cards{ grid-template-columns: 1fr !important; }
  .filters{ flex-direction: column; align-items: stretch; }
  .sidebar{ display:none; }
  .sidebar.open{
    display:block; position:fixed; inset:0 40% 0 0; background:#fff; z-index:1000;
    box-shadow: 2px 0 10px rgba(0,0,0,.15); overflow:auto;
  }
}

/* ===== Task status color strip ===== */
.task-card{ position:relative; border-left:6px solid transparent; border-right:6px solid transparent; }
.task-open{    border-right-color:#3498db; border-left-color:#3498db; }
.task-inprogress{ border-right-color:#f1c40f; border-left-color:#f1c40f; }
.task-blocked{ border-right-color:#e67e22; border-left-color:#e67e22; }
.task-done{    border-right-color:#2ecc71; border-left-color:#2ecc71; }

</style>
</head>
<body>
  <header>
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <i class="fas fa-tasks"></i>
          <div>
            <h1>نظام إدارة المهام</h1>
            <span>مجموعة لين القابضة</span>
          </div>
        </div>
        
        <div class="user-actions">
          <div class="language-selector">
            <button class="active" id="lang-ar">العربية</button>
            <button id="lang-en">English</button>
          </div>
          
          <div class="user-profile" id="user-profile">
            <div class="avatar" id="user-avatar">م</div>
            <div>
              <div id="user-name">—</div>
              <div style="font-size: 12px; opacity: 0.8;" id="user-role">—</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  
  <div class="container">
    <div class="main-layout">
      <aside class="sidebar">
        <ul class="sidebar-menu">
          <li class="active">
            <i class="fas fa-home"></i>
            <span>لوحة التحكم</span>
          </li>
          <li>
            <i class="fas fa-tasks"></i>
            <span>المهام</span>
          </li>
          <li>
            <i class="fas fa-users"></i>
            <span>الفريق</span>
          </li>
          <li>
            <i class="fas fa-chart-bar"></i>
            <span>التقارير</span>
          </li>
          <li>
            <i class="fas fa-cog"></i>
            <span>الإعدادات</span>
          </li>
          <li id="btn-logout">
            <i class="fas fa-sign-out-alt"></i>
            <span>تسجيل الخروج</span>
          </li>
        </ul>
      </aside>
      
      <main class="main-content">
        <div class="stats-cards">
          <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-tasks"></i></div>
            <div class="stat-info">
              <h3 id="stat-total">0</h3>
              <p>إجمالي المهام</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-check-circle"></i></div>
            <div class="stat-info">
              <h3 id="stat-done">0</h3>
              <p>مكتملة</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon orange"><i class="fas fa-spinner"></i></div>
            <div class="stat-info">
              <h3 id="stat-inprogress">0</h3>
              <p>قيد التنفيذ</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon red"><i class="fas fa-exclamation-triangle"></i></div>
            <div class="stat-info">
              <h3 id="stat-overdue">0</h3>
              <p>متأخرة</p>
            </div>
          </div>
        </div>
        
        <div class="filters">
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="ابحث في المهام..." id="q">
          </div>
          
          <select class="filter-select" id="f-status">
            <option value="all">جميع الحالات</option>
            <option value="open">مفتوحة</option>
            <option value="in_progress">قيد التنفيذ</option>
            <option value="blocked">متوقفة</option>
            <option value="done">منجزة</option>
          </select>
          
          <select class="filter-select" id="f-priority">
            <option value="all">جميع الأولويات</option>
            <option value="low">منخفضة</option>
            <option value="medium">متوسطة</option>
            <option value="high">مرتفعة</option>
          </select>
          
          <select class="filter-select" id="f-assignee">
            <option value="all">جميع الأعضاء</option>
          </select>
          
          <button class="btn btn-primary" id="btn-new">
            <i class="fas fa-plus"></i>
            مهمة جديدة
          </button>
        </div>
        
        <div class="kanban-board">
          <!-- Open -->
          <div class="kanban-column" data-status="open">
            <div class="column-header">
              <div class="column-title">
                <i class="fas fa-folder-open" style="color: #6f42c1;"></i>
                <span>مفتوحة</span>
                <span class="column-badge" id="count-open">0</span>
              </div>
              <div class="column-actions"></div>
            </div>
            <div class="tasks-list" id="list-open"></div>
          </div>
          
          <!-- In Progress -->
          <div class="kanban-column" data-status="in_progress">
            <div class="column-header">
              <div class="column-title">
                <i class="fas fa-spinner" style="color: #0dcaf0;"></i>
                <span>قيد التنفيذ</span>
                <span class="column-badge" id="count-in_progress">0</span>
              </div>
              <div class="column-actions"></div>
            </div>
            <div class="tasks-list" id="list-in_progress"></div>
          </div>
          
          <!-- Blocked -->
          <div class="kanban-column" data-status="blocked">
            <div class="column-header">
              <div class="column-title">
                <i class="fas fa-exclamation-triangle" style="color: #fd7e14;"></i>
                <span>متوقفة</span>
                <span class="column-badge" id="count-blocked">0</span>
              </div>
              <div class="column-actions"></div>
            </div>
            <div class="tasks-list" id="list-blocked"></div>
          </div>
          
          <!-- Done -->
          <div class="kanban-column" data-status="done">
            <div class="column-header">
              <div class="column-title">
                <i class="fas fa-check-circle" style="color: #198754;"></i>
                <span>منجزة</span>
                <span class="column-badge" id="count-done">0</span>
              </div>
              <div class="column-actions"></div>
            </div>
            <div class="tasks-list" id="list-done"></div>
          </div>
        </div>
      
        <!-- Users Management Section -->
        <div id="users-section" class="hidden">
          <div style="background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 12px rgba(0,0,0,.05)">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px">
              <h2>إدارة الفريق</h2>
              <button class="btn btn-primary" id="btn-add-user"><i class="fas fa-user-plus"></i> إضافة مستخدم</button>
            </div>
            <table style="width:100%;border-collapse:collapse">
              <thead>
                <tr style="background:#f0f2f5">
                  <th style="padding:8px;border:1px solid #ddd">ID</th>
                  <th style="padding:8px;border:1px solid #ddd">الاسم</th>
                  <th style="padding:8px;border:1px solid #ddd">الجوال</th>
                  <th style="padding:8px;border:1px solid #ddd">الدور</th>
                  <th style="padding:8px;border:1px solid #ddd">إجراءات</th>
                </tr>
              </thead>
              <tbody id="users-table"></tbody>
            </table>
          </div>
        </div>

        <!-- User Form Modal -->
        <div class="modal-backdrop" id="modal-user">
          <div class="modal" style="max-width:520px">
            <div class="modal-header">
              <div id="user-form-title">إضافة مستخدم</div>
              <button class="btn btn-secondary" onclick="closeUserForm()">إغلاق</button>
            </div>
            <form id="user-form">
              <div class="modal-body">
                <input type="hidden" id="uf-id">
                <div style="display:grid;gap:10px">
                  <div>
                    <label class="label">الاسم</label>
                    <input class="input" id="uf-username" required>
                  </div>
                  <div>
                    <label class="label">كلمة المرور</label>
                    <input type="password" class="input" id="uf-password" required>
                  </div>
                  <div>
                    <label class="label">الجوال</label>
                    <input class="input" id="uf-phone" required>
                  </div>
                  <div>
                    <label class="label">الدور</label>
                    <select class="select" id="uf-role">
                      <option value="member">عضو</option>
                      <option value="admin">مشرف</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeUserForm()">إلغاء</button>
                <button class="btn btn-primary" type="submit">حفظ</button>
              </div>
            </form>
          </div>
        </div>

</main>
    </div>
  </div>

  <!-- Task Form Modal -->
  <div class="modal-backdrop" id="modal-task">
    <div class="modal">
      <div class="modal-header">
        <div id="task-form-title">مهمة جديدة</div>
        <button class="btn btn-secondary" onclick="closeTaskForm()">إغلاق</button>
      </div>
      <form id="task-form">
        <div class="modal-body">
          <input type="hidden" name="id" id="tf-id">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
            <div>
              <label class="label">العنوان</label>
              <input class="input" name="title" id="tf-title" required>
            </div>
            <div>
              <label class="label">المسؤول</label>
              <select class="select" name="assignee" id="tf-assignee"></select>
            </div>
          </div>
          <div style="margin-top:12px">
            <label class="label">الوصف</label>
            <textarea class="textarea" name="description" id="tf-description"></textarea>
          </div>
          <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px">
            <div>
              <label class="label">البداية</label>
              <input type="date" class="input" name="start" id="tf-start">
            </div>
            <div>
              <label class="label">النهاية</label>
              <input type="date" class="input" name="end" id="tf-end">
            </div>
            <div>
              <label class="label">الحالة</label>
              <select class="select" name="status" id="tf-status">
                <option value="open">مفتوحة</option>
                <option value="in_progress">قيد التنفيذ</option>
                <option value="blocked">متوقفة</option>
                <option value="done">منجزة</option>
              </select>
            </div>
            <div>
              <label class="label">الأولوية</label>
              <select class="select" name="priority" id="tf-priority">
                <option value="low">منخفضة</option>
                <option value="medium">متوسطة</option>
                <option value="high">مرتفعة</option>
              </select>
            </div>
          </div>
          <div style="margin-top:12px">
            <label class="label">الموضوع / Subject</label>
            <input class="input" name="tags" id="tf-tags" placeholder="مثال: ERP, BI, WhatsApp">
          </div>
          <div style="margin-top:12px">
            <label class="label">ملاحظات</label>
            <textarea class="textarea" name="notes" id="tf-notes"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="closeTaskForm()">إلغاء</button>
          <button class="btn btn-primary" type="submit">حفظ</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Task Details + Updates Modal -->
  <div class="modal-backdrop" id="modal-details">
    <div class="modal" style="max-width:860px">
      <div class="modal-header">
        <div id="details-title">تفاصيل المهمة</div>
        <button class="btn btn-secondary" onclick="closeDetails()">إغلاق</button>
      </div>
      <div class="modal-body" id="details-body">
        <!-- filled dynamically -->
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeDetails()">تم</button>
      </div>
    </div>
  </div>

  <!-- Login modal (if needed) -->
  <div class="modal-backdrop" id="modal-login">
    <div class="modal" style="max-width:480px">
      <div class="modal-header">
        <div>تسجيل الدخول</div>
      </div>
      <form id="login-form">
        <div class="modal-body">
          <div style="display:grid;gap:10px">
            <div>
              <label class="label">اسم المستخدم</label>
              <input class="input" id="lf-username" required>
            </div>
            <div>
              <label class="label">كلمة المرور</label>
              <input type="password" class="input" id="lf-password" required>
            </div>
            <small>تلميح: admin / @Admin1020</small>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">دخول</button>
        </div>
      </form>
    </div>
  </div>

  <script>
    // ======== Config ========
    // If your API PHP files are in /api, keep '/api'. If same folder, set ''.
    const API_BASE = '/api'; // <-- change to '' if tasks.php, users.php, updates.php are in same directory as this file

    // ======== State ========
    let currentUser = null;
    let users = [];
    let tasks = [];
    let updates = []; // all updates (we map by task_id)

    // Filters
    const filters = { q:'', status:'all', priority:'all', assignee:'all' };

    // ======== Helpers ========
    const $ = sel => document.querySelector(sel);
    const $$ = sel => Array.from(document.querySelectorAll(sel));

    function avatarLetter(name){ return (name||'').trim().charAt(0) || 'م'; }
    function fmtDateAr(d){
      if(!d) return '';
      const dt = new Date(d);
      if(Number.isNaN(dt.getTime())) return '';
      const months = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
      return dt.getDate()+' '+months[dt.getMonth()];
    }
    function isOverdue(t){
      if(!t.end || t.status==='done') return false;
      const today = new Date(); today.setHours(0,0,0,0);
      const end = new Date(t.end); end.setHours(0,0,0,0);
      return end < today;
    }
    function parseTags(s){ return (s||'').split(',').map(x=>x.trim()).filter(Boolean); }

    async function api(url, opts){
      const r = await fetch(url, opts);
      if(!r.ok){
        const txt = await r.text();
        throw new Error('HTTP '+r.status+': '+txt);
      }
      return r.json();
    }

    function setLoggedUser(u){
      currentUser = u;
      try{ localStorage.setItem('mtm_current_user', JSON.stringify(u)); }catch{}
      $('#user-name').textContent = u?.username || '—';
      $('#user-role').textContent = (u?.role==='admin'?'مشرف':'عضو');
      $('#user-avatar').textContent = avatarLetter(u?.username);
    }

    function requireLogin(){
      // Try localStorage first
      try { const raw = localStorage.getItem('mtm_current_user'); if(raw){ const u=JSON.parse(raw); if(u?.username) { setLoggedUser(u); return true; } } } catch{}
      // Show modal login
      $('#modal-login').style.display='flex';
      return false;
    }

    // ======== Fetch data ========
    async function loadAll(){
      const [u, t, up] = await Promise.all([
        api(`${API_BASE}/users.php`),
        api(`${API_BASE}/tasks.php`),
        api(`${API_BASE}/updates.php`)
      ]);
      users = Array.isArray(u)?u:[];
      tasks = Array.isArray(t)?t:[];
      updates = Array.isArray(up)?up:[];
      renderFilters();
      renderAll();
    }

    // ======== Render ========
    function renderFilters(){
      // Assignees
      const fa = $('#f-assignee');
      fa.innerHTML = '<option value="all">جميع الأعضاء</option>' + users.map(u=>`<option value="${u.username}">${u.username}</option>`).join('');
      // Form assignee
      const tf = $('#tf-assignee');
      tf.innerHTML = users.map(u=>`<option value="${u.username}">${u.username}</option>`).join('');
    }

    function applyFilters(list){
      return list.filter(t=>{
        if(filters.status!=='all' && t.status!==filters.status) return false;
        if(filters.priority!=='all' && (t.priority||'low')!==filters.priority) return false;
        if(filters.assignee!=='all' && t.assignee!==filters.assignee) return false;
        const q = (filters.q||'').trim().toLowerCase();
        if(q){
          const blob = [t.title, t.description, t.notes, t.tags||''].join(' ').toLowerCase();
          if(!blob.includes(q)) return false;
        }
        return true;
      });
    }

    function renderAll(){
      // Stats
      const list = applyFilters(tasks);
      const total = list.length;
      const done = list.filter(x=>x.status==='done').length;
      const inprog = list.filter(x=>x.status==='in_progress').length;
      const overdue = list.filter(isOverdue).length;
      $('#stat-total').textContent = String(total);
      $('#stat-done').textContent = String(done);
      $('#stat-inprogress').textContent = String(inprog);
      $('#stat-overdue').textContent = String(overdue);

      // Columns
      const statuses = ['open','in_progress','blocked','done'];
      statuses.forEach(s=>{
        const col = $(`#list-${s}`);
        const items = applyFilters(tasks.filter(x=>x.status===s));
        col.innerHTML = items.map(renderTaskCard).join('');
        $(`#count-${s}`).textContent = String(items.length);
      });

      // Bind events for action buttons after render
      $$('.task-card .btn-edit').forEach(btn=>btn.addEventListener('click', onEditTask));
      $$('.task-card .btn-delete').forEach(btn=>btn.addEventListener('click', onDeleteTask));
      $$('.task-card').forEach(card=>card.addEventListener('click', onOpenDetails));
      // Stop card clicks when hitting action icons
      $$('.task-card .task-actions button').forEach(b=>b.addEventListener('click', e=>e.stopPropagation()));
    }

    function renderTaskCard(t){
      const dateText = fmtDateAr(t.end || t.start);
      const prClass = t.priority==='high'?'priority-high':(t.priority==='medium'?'priority-medium':'priority-low');
      const tags = parseTags(t.tags).slice(0,4).map(tag=>`<span class="tag">${tag}</span>`).join('');
      const upCount = updates.filter(u=>u.task_id==t.id).length;
      return `
        <div class="task-card" data-id="${t.id}">
          <div class="task-header">
            <div>
              <div class="task-title">${escapeHtml(t.title||'بدون عنوان')}</div>
              <span class="task-priority ${prClass}">${priorityLabel(t.priority||'low')}</span>
            </div>
            <div class="task-date">${dateText||''}</div>
          </div>
          <div class="task-description">${escapeHtml((t.description||'').slice(0,250))}</div>
          <div class="task-meta">
            <div class="task-assignee">
              <div class="assignee-avatar">${avatarLetter(t.assignee||'?')}</div>
              <span>${t.assignee||'-'}</span>
            </div>
            <div class="task-comments"><i class="far fa-comment"></i> ${upCount}</div>
          </div>
          <div class="task-footer">
            <div class="task-tags">${tags}</div>
            <div class="task-actions">
              <button class="btn-edit" title="تعديل"><i class="far fa-edit"></i></button>
              <button class="btn-delete" title="حذف"><i class="far fa-trash-alt"></i></button>
            </div>
          </div>
        </div>
      `;
    }

    function priorityLabel(p){
      if(p==='high') return 'عالية';
      if(p==='medium') return 'متوسطة';
      return 'منخفضة';
    }

    function escapeHtml(s){
      return String(s||'').replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]));
    }

    // ======== Events ========
    // Filters
    $('#q').addEventListener('input', e=>{ filters.q = e.target.value; renderAll(); });
    $('#f-status').addEventListener('change', e=>{ filters.status = e.target.value; renderAll(); });
    $('#f-priority').addEventListener('change', e=>{ filters.priority = e.target.value; renderAll(); });
    $('#f-assignee').addEventListener('change', e=>{ filters.assignee = e.target.value; renderAll(); });

    // New task
    $('#btn-new').addEventListener('click', ()=> openTaskForm());

    // Logout
    $('#btn-logout').addEventListener('click', ()=>{ localStorage.removeItem('mtm_current_user'); location.reload(); });

    // ======== Task Form ========
    function openTaskForm(task=null){
      $('#modal-task').style.display='flex';
      $('#task-form-title').textContent = task ? 'تعديل المهمة' : 'مهمة جديدة';
      $('#tf-id').value = task?.id || '';
      $('#tf-title').value = task?.title || '';
      $('#tf-assignee').value = task?.assignee || (currentUser?.username||'');
      $('#tf-description').value = task?.description || '';
      $('#tf-start').value = task?.start || '';
      $('#tf-end').value = task?.end || '';
      $('#tf-status').value = task?.status || 'open';
      $('#tf-priority').value = task?.priority || 'low';
      $('#tf-tags').value = task?.tags || '';
      $('#tf-notes').value = task?.notes || '';
    }
    function closeTaskForm(){ $('#modal-task').style.display='none'; }

    $('#task-form').addEventListener('submit', async (e)=>{
      e.preventDefault();
      const id = $('#tf-id').value.trim();
      const payload = {
        title: $('#tf-title').value.trim(),
        assignee: $('#tf-assignee').value.trim(),
        description: $('#tf-description').value.trim(),
        start: $('#tf-start').value || null,
        end: $('#tf-end').value || null,
        status: $('#tf-status').value,
        priority: $('#tf-priority').value,
        tags: $('#tf-tags').value,
        notes: $('#tf-notes').value
      };
      try{
        if(id){
          await api(`${API_BASE}/tasks.php?id=${encodeURIComponent(id)}`, {
            method:'PUT',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify(payload)
          });
        }else{
          await api(`${API_BASE}/tasks.php`, {
            method:'POST',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify(payload)
          });
        }
        closeTaskForm();
        await loadAll();
      }catch(err){
        alert('تعذر حفظ المهمة: '+err.message);
      }
    });

    function onEditTask(e){
      const card = e.currentTarget.closest('.task-card');
      const id = card?.dataset?.id;
      const t = tasks.find(x=>String(x.id)===String(id));
      if(!t) return;
      if(!(currentUser?.role==='admin' || t.assignee===currentUser?.username)){
        return alert('يمكنك تعديل مهامك فقط.');
      }
      openTaskForm(t);
    }

    async function onDeleteTask(e){
      const card = e.currentTarget.closest('.task-card');
      const id = card?.dataset?.id;
      const t = tasks.find(x=>String(x.id)===String(id));
      if(!t) return;
      if(!(currentUser?.role==='admin' || t.assignee===currentUser?.username)){
        return alert('يمكنك حذف مهامك فقط.');
      }
      if(!confirm('هل تريد حذف هذه المهمة؟')) return;
      try{
        await api(`${API_BASE}/tasks.php?id=${encodeURIComponent(id)}`, { method:'DELETE' });
        await loadAll();
      }catch(err){
        alert('تعذر الحذف: '+err.message);
      }
    }

    // ======== Details + Updates ========
    function onOpenDetails(e){
      const card = e.currentTarget.closest('.task-card') || e.currentTarget;
      const id = card?.dataset?.id;
      const t = tasks.find(x=>String(x.id)===String(id));
      if(!t) return;
      const ups = updates.filter(u=>u.task_id==t.id);
      // build details
      const editable = (currentUser?.role==='admin' || t.assignee===currentUser?.username);
      const html = `
        <div style="display:grid;grid-template-columns:1.1fr .9fr;gap:18px">
          <div>
            <div style="font-weight:600;margin-bottom:6px">${escapeHtml(t.title||'')}</div>
            <div style="color:#666;margin-bottom:8px;white-space:pre-wrap">${escapeHtml(t.description||'')}</div>
            <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px">
              <div><b>المسؤول:</b> ${escapeHtml(t.assignee||'-')}</div>
              <div><b>الأولوية:</b> ${priorityLabel(t.priority||'low')}</div>
              <div><b>البداية:</b> ${escapeHtml(t.start||'-')}</div>
              <div><b>النهاية:</b> ${escapeHtml(t.end||'-')}</div>
              <div><b>الحالة:</b> ${statusLabel(t.status||'open')}</div>
              <div><b>الموضوع:</b> ${escapeHtml(t.tags||'-')}</div>
            </div>
            ${t.notes?`<div style="margin-top:10px;background:#f8fafc;border:1px solid var(--border);border-radius:8px;padding:10px"><b>ملاحظات:</b><br>${escapeHtml(t.notes)}</div>`:''}
          </div>
          <div>
            <div style="font-weight:600;margin-bottom:6px">التحديثات</div>
            <div id="updates-list" style="display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:8px;padding:8px;background:#fafafa">
              ${ups.length? ups.map(u=>`
                <div style="background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px">
                  <div style="font-size:12px;color:#888">${escapeHtml(u.by_user||'-')} • ${new Date(u.created_at).toLocaleString('ar')}</div>
                  <div style="margin-top:4px;white-space:pre-wrap">${escapeHtml(u.text||'')}</div>
                </div>
              `).join('') : '<div style="text-align:center;color:#999">لا توجد تحديثات</div>'}
            </div>
            ${editable?`
            <div style="display:flex;gap:8px;margin-top:8px">
              <textarea id="upd-text" class="textarea" placeholder="اكتب تحديثًا..." style="min-height:60px;resize:vertical"></textarea>
<div id="char-count" style="font-size:12px;color:#666;margin-top:4px">0</div>
              <button class="btn btn-primary" id="btn-add-update">إضافة</button>
            </div>`:''}
          </div>
        </div>
        <div style="margin-top:12px;display:flex;gap:8px;justify-content:flex-end">
          <button class="btn btn-secondary" id="btn-edit-task">تعديل</button>
          <button class="btn btn-secondary" id="btn-change-status">تغيير الحالة</button>
        </div>
      `;
      $('#details-title').textContent = 'تفاصيل المهمة';
      $('#details-body').innerHTML = html;
      $('#modal-details').style.display='flex';

      // Bind buttons
      $('#btn-edit-task')?.addEventListener('click', ()=>{ closeDetails(); openTaskForm(t); });
      $('#btn-change-status')?.addEventListener('click', async ()=>{
        const newS = prompt('ادخل الحالة: open / in_progress / blocked / done', t.status);
        if(!newS) return;
        try{
          await api(`${API_BASE}/tasks.php?id=${encodeURIComponent(t.id)}`, {
            method:'PUT',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify({...t, status:newS})
          });
          await loadAll();
          closeDetails();
        }catch(err){ alert('تعذر تغيير الحالة: '+err.message); }
      });
      $('#btn-add-update')?.addEventListener('click', async ()=>{
        const txt = $('#upd-text').value.trim();
        if(!txt) return;
        try{
          await api(`${API_BASE}/updates.php`, {
            method:'POST',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify({ task_id: t.id, by_user: currentUser?.username, text: txt })
          });
          $('#upd-text').value = '';
          await loadAll();
          onOpenDetails({currentTarget:$(`.task-card[data-id="${t.id}"]`)}); // reopen refreshed
        }catch(err){ alert('تعذر إضافة التحديث: '+err.message); }
      });
    }

    function closeDetails(){ $('#modal-details').style.display='none'; }
    function statusLabel(s){
      if(s==='done') return 'منجزة';
      if(s==='in_progress') return 'قيد التنفيذ';
      if(s==='blocked') return 'متوقفة';
      return 'مفتوحة';
    }

    // ======== Login flow ========
    $('#login-form').addEventListener('submit', async (e)=>{
      e.preventDefault();
      const username = $('#lf-username').value.trim();
      const password = $('#lf-password').value.trim();
      try{
        // Prefer users.php?action=login as per your old app. Fallback to login.php
        let res;
        try {
          res = await api(`${API_BASE}/users.php?action=login`, {
            method:'POST', headers:{'Content-Type':'application/json'},
            body: JSON.stringify({username, password})
          });
        } catch(err){
          // fallback
          res = await api(`${API_BASE}/login.php`, {
            method:'POST', headers:{'Content-Type':'application/json'},
            body: JSON.stringify({username, password})
          });
        }
        if(res?.success){
          setLoggedUser(res.user);
          $('#modal-login').style.display='none';
          await loadAll();
        }else{
          alert(res?.error || 'بيانات الدخول غير صحيحة');
        }
      }catch(err){
        alert('خطأ في تسجيل الدخول: '+err.message);
      }
    });

    // ======== Boot ========
    (async function init(){
      if(!requireLogin()) return; // wait user to login
      try{
        await loadAll();
      }catch(err){
        console.error(err);
        alert('حدث خطأ أثناء تحميل البيانات. تأكد من API_BASE ومسارات PHP.');
      }
    })();
  
    // ======== Users Management ========
    function showSection(section){
      // hide all
      document.querySelector('.kanban-board').style.display='none';
      document.querySelector('.filters').style.display='none';
      document.querySelector('.stats-cards').style.display='none';
      $('#users-section').classList.add('hidden');
      if(section==='tasks'){
        document.querySelector('.kanban-board').style.display='grid';
        document.querySelector('.filters').style.display='flex';
        document.querySelector('.stats-cards').style.display='grid';
      }else if(section==='users'){
        $('#users-section').classList.remove('hidden');
        loadUsers();
      }else{
        alert('قريباً');
      }
    }

    // Sidebar menu clicks
    $$('.sidebar-menu li').forEach(li=>{
      li.addEventListener('click', ()=>{
        $$('.sidebar-menu li').forEach(x=>x.classList.remove('active'));
        li.classList.add('active');
        if(li.textContent.includes('المهام') || li.textContent.includes('لوحة التحكم')) showSection('tasks');
        else if(li.textContent.includes('الفريق')) showSection('users');
        else if(li.textContent.includes('التقارير')) showSection('reports');
        else if(li.textContent.includes('الإعدادات')) showSection('settings');
        else if(li.textContent.includes('تسجيل الخروج')) { localStorage.removeItem('mtm_current_user'); location.reload(); }
      });
    });

    async function loadUsers(){
      try{
        const res = await api(`${API_BASE}/users.php`);
        const ut = $('#users-table');
        ut.innerHTML = res.map(u=>`
          <tr>
            <td style="padding:6px;border:1px solid #ddd">${u.id}</td>
            <td style="padding:6px;border:1px solid #ddd">${u.username}</td>
            <td style="padding:6px;border:1px solid #ddd">${u.phone||'-'}</td>
            <td style="padding:6px;border:1px solid #ddd">${u.role}</td>
            <td style="padding:6px;border:1px solid #ddd">
              <button onclick="editUser(${u.id})"><i class="far fa-edit"></i></button>
              <button onclick="deleteUser(${u.id})"><i class="far fa-trash-alt"></i></button>
            </td>
          </tr>
        `).join('');
      }catch(err){ alert('خطأ في تحميل المستخدمين: '+err.message); }
    }

    function openUserForm(u=null){
      $('#modal-user').style.display='flex';
      $('#user-form-title').textContent = u?'تعديل مستخدم':'إضافة مستخدم';
      $('#uf-id').value = u?.id||'';
      $('#uf-username').value = u?.username||'';
      $('#uf-password').value = '';
      $('#uf-phone').value = u?.phone||'';
      $('#uf-role').value = u?.role||'member';
    }
    function closeUserForm(){ $('#modal-user').style.display='none'; }

    $('#btn-add-user').addEventListener('click', ()=> openUserForm());

    $('#user-form').addEventListener('submit', async (e)=>{
      e.preventDefault();
      const id = $('#uf-id').value;
      const payload = {
        username: $('#uf-username').value.trim(),
        password: $('#uf-password').value.trim(),
        phone: $('#uf-phone').value.trim(),
        role: $('#uf-role').value
      };
      try{
        if(id){
          await api(`${API_BASE}/users.php?id=${id}`, {method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
        }else{
          await api(`${API_BASE}/users.php`, {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
        }
        closeUserForm();
        loadUsers();
      }catch(err){ alert('خطأ في حفظ المستخدم: '+err.message); }
    });

    async function editUser(id){
      try{
        const res = await api(`${API_BASE}/users.php?id=${id}`);
        if(res) openUserForm(res);
      }catch(err){ alert('خطأ في جلب بيانات المستخدم'); }
    }

    async function deleteUser(id){
      if(!confirm('هل تريد حذف المستخدم؟')) return;
      try{
        await api(`${API_BASE}/users.php?id=${id}`, {method:'DELETE'});
        loadUsers();
      }catch(err){ alert('خطأ في حذف المستخدم'); }
    }


    // Character counter for update textarea
    document.addEventListener('input', function(e){
      if(e.target && e.target.id==='upd-text'){
        const len = e.target.value.length;
        const cc = document.getElementById('char-count');
        if(cc) cc.textContent = len;
      }
    });


    // ===== Assign status class to task cards =====
    function getStatusClass(status){
      if(status==='open'||status==='مفتوحة') return 'task-open';
      if(status==='in_progress'||status==='قيد التنفيذ') return 'task-inprogress';
      if(status==='blocked'||status==='متوقفة') return 'task-blocked';
      if(status==='done'||status==='منجزة') return 'task-done';
      return '';
    }


    // ===== Role-Based Access Control =====
    // ===== Role-Based Access Control =====
(function(){
  let cu=null; 
  try{
    const raw=localStorage.getItem('mtm_current_user'); 
    if(raw) cu=JSON.parse(raw);
  }catch(e){}
  if(!cu||!cu.username) return;

  const role=(cu.role||'').toLowerCase();
  if(role!=='member') return;

  document.addEventListener('DOMContentLoaded',()=>{

    // اخفاء الفريق + الاعدادات من القائمة
    document.querySelectorAll('.sidebar-menu li').forEach(li=>{
      const txt=(li.textContent||'').trim();
      if(txt.includes('الفريق')||txt.includes('الإعدادات')){
        li.style.display='none';
      }
    });

    // اخفاء قسم إدارة المستخدمين بالكامل
    const usersSection=document.getElementById('users-section');
    if(usersSection){ usersSection.remove(); }

    // اخفاء زر إضافة المستخدم لو موجود
    const addUserBtn=document.getElementById('btn-add-user');
    if(addUserBtn){ addUserBtn.remove(); }

    // قفل فلتر assignee
    const fa=document.getElementById('f-assignee');
    if(fa){ fa.value=cu.username; fa.style.display='none'; }

    // قفل assignee في نموذج المهمة
    const btnNew=document.getElementById('btn-new');
    if(btnNew){
      btnNew.addEventListener('click',()=>{
        setTimeout(()=>{
          const tf=document.getElementById('tf-assignee');
          if(tf){ tf.value=cu.username; tf.setAttribute('disabled','true'); }
        },50);
      });
    }

    // إظهار مهامي فقط
    function onlyMine(name){
      document.querySelectorAll('.task-card').forEach(card=>{
        const owner=(card.querySelector('.task-assignee span')?.textContent||'').trim();
        const mine=owner===name;
        card.style.display=mine?'':'none';
        if(!mine){
          card.querySelectorAll('.btn-edit,.btn-delete').forEach(b=>b.style.display='none');
        }
      });
    }
    const kb=document.querySelector('.kanban-board');
    if(kb){
      onlyMine(cu.username);
      const mo=new MutationObserver(()=>onlyMine(cu.username));
      mo.observe(kb,{childList:true,subtree:true});
    }

  });
})();
