{"id":3989,"date":"2026-05-14T10:47:22","date_gmt":"2026-05-14T10:47:22","guid":{"rendered":"https:\/\/abdulazizalsari.online\/?page_id=3989"},"modified":"2026-05-14T13:45:45","modified_gmt":"2026-05-14T13:45:45","slug":"crm","status":"publish","type":"page","link":"https:\/\/abdulazizalsari.online\/en\/crm\/","title":{"rendered":"crm"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t```html\r\n\r\n\r\n\r\n \r\n \r\n CRM Pro | \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/title>\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fontsource\/cairo@5.0.15\/index.css\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/boxicons@2.1.4\/css\/boxicons.min.css\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/xlsx@0.18.5\/dist\/xlsx.full.min.js\"><\/script>\r\n <style>\r\n :root {\r\n --p-color: #ff5a19;\r\n --p-hover: #e84e10;\r\n --s-color: #003e46;\r\n --s-light: #005a66;\r\n --bg: #f0f2f5;\r\n --text: #2c3e50;\r\n --white: #ffffff;\r\n --border: #dde1e6;\r\n --shadow: 0 2px 12px rgba(0,0,0,0.08);\r\n --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);\r\n --radius: 12px;\r\n --green: #27ae60;\r\n --red: #e74c3c;\r\n --yellow: #f39c12;\r\n --blue: #3498db;\r\n --gray: #95a5a6;\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }\r\n body { font-family: 'Cairo', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; }\r\n\r\n #crm-app { display: flex; min-height: 100vh; }\r\n\r\n \/* Sidebar *\/\r\n .sidebar {\r\n width: 240px; background: linear-gradient(180deg, var(--s-color) 0%, #002a30 100%);\r\n color: white; display: flex; flex-direction: column; position: fixed; top: 0; right: 0; height: 100vh; z-index: 100;\r\n transition: transform 0.3s ease;\r\n }\r\n .sidebar-brand { padding: 25px 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }\r\n .sidebar-brand h1 { font-size: 24px; font-weight: 900; color: var(--p-color); letter-spacing: 1px; }\r\n .sidebar-brand small { color: rgba(255,255,255,0.6); font-size: 11px; display: block; margin-top: 4px; }\r\n .nav-section { padding: 15px 0; flex: 1; }\r\n .nav-label { padding: 8px 20px; font-size: 10px; text-transform: uppercase; color: rgba(255,255,255,0.35); font-weight: 700; letter-spacing: 1px; }\r\n .nav-btn {\r\n padding: 12px 20px; border: none; background: none; color: rgba(255,255,255,0.75); text-align: right; cursor: pointer;\r\n font-family: 'Cairo'; font-size: 13px; display: flex; align-items: center; gap: 12px; transition: all 0.2s; width: 100%;\r\n }\r\n .nav-btn:hover { background: rgba(255,255,255,0.08); color: white; transform: translateX(-4px); }\r\n .nav-btn.active { background: var(--p-color); color: white; font-weight: 700; }\r\n .nav-btn i { font-size: 18px; width: 24px; text-align: center; }\r\n .sidebar-footer { padding: 15px 20px; font-size: 10px; color: rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.1); }\r\n\r\n \/* Main Content *\/\r\n .main-content { flex: 1; margin-right: 240px; padding: 25px; min-height: 100vh; transition: margin-right 0.3s; }\r\n \r\n \/* Top Bar *\/\r\n .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }\r\n .topbar h2 { font-size: 22px; font-weight: 800; color: var(--s-color); display: flex; align-items: center; gap: 10px; }\r\n .topbar-actions { display: flex; gap: 10px; flex-wrap: wrap; }\r\n \r\n \/* Buttons *\/\r\n .btn { padding: 9px 16px; border: none; border-radius: 8px; cursor: pointer; font-family: 'Cairo'; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }\r\n .btn-primary { background: var(--p-color); color: white; }\r\n .btn-primary:hover { background: var(--p-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,90,25,0.3); }\r\n .btn-secondary { background: var(--s-color); color: white; }\r\n .btn-secondary:hover { background: var(--s-light); }\r\n .btn-outline { background: transparent; color: var(--s-color); border: 1.5px solid var(--border); }\r\n .btn-outline:hover { border-color: var(--p-color); color: var(--p-color); background: #fff8f5; }\r\n .btn-danger { background: var(--red); color: white; }\r\n .btn-danger:hover { background: #c0392b; }\r\n .btn-sm { padding: 5px 10px; font-size: 12px; }\r\n .btn-icon { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: none; cursor: pointer; transition: all 0.2s; font-size: 18px; }\r\n .btn-icon.edit { background: #eaf2fb; color: var(--blue); }\r\n .btn-icon.edit:hover { background: var(--blue); color: white; }\r\n .btn-icon.delete { background: #fde8e8; color: var(--red); }\r\n .btn-icon.delete:hover { background: var(--red); color: white; }\r\n .btn-icon.share { background: #dcfce7; color: var(--green); }\r\n .btn-icon.share:hover { background: var(--green); color: white; }\r\n\r\n \/* Stats Cards *\/\r\n .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 25px; }\r\n .stat-card { background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); border-top: 4px solid transparent; transition: transform 0.2s; }\r\n .stat-card:hover { transform: translateY(-3px); }\r\n .stat-card.c { border-top-color: var(--blue); }\r\n .stat-card.r { border-top-color: var(--p-color); }\r\n .stat-card.h { border-top-color: var(--red); }\r\n .stat-card.a { border-top-color: var(--green); }\r\n .stat-card .label { font-size: 12px; color: var(--gray); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }\r\n .stat-card .value { font-size: 26px; font-weight: 900; color: var(--s-color); }\r\n\r\n \/* Filter Bar *\/\r\n .filter-bar { background: var(--white); border-radius: var(--radius); padding: 15px; margin-bottom: 15px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }\r\n .search-box { flex: 1; min-width: 220px; position: relative; }\r\n .search-box i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gray); font-size: 18px; }\r\n .search-box input { padding: 9px 40px 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-family: 'Cairo'; font-size: 13px; width: 100%; background: #fafbfc; }\r\n .search-box input:focus { border-color: var(--p-color); background: white; box-shadow: 0 0 0 3px rgba(255,90,25,0.1); }\r\n .filter-select { padding: 0 12px; border: 1.5px solid var(--border); border-radius: 8px; height: 40px; font-family: 'Cairo'; font-size: 13px; background: #fafbfc; cursor: pointer; min-width: 130px; }\r\n .filter-select:focus { outline: none; border-color: var(--p-color); background: white; }\r\n\r\n \/* Table *\/\r\n .table-wrapper { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }\r\n .table-scroll { overflow-x: auto; max-height: 70vh; }\r\n table { width: 100%; border-collapse: collapse; min-width: 1000px; }\r\n thead th { background: #f8f9fa; padding: 14px; font-size: 12px; font-weight: 700; text-align: right; color: var(--s-color); border-bottom: 2px solid var(--border); white-space: nowrap; position: sticky; top: 0; cursor: pointer; user-select: none; }\r\n thead th:hover { background: #eef0f2; }\r\n tbody tr { transition: background 0.15s; border-bottom: 1px solid #f0f0f0; }\r\n tbody tr:hover { background: #fafafa; }\r\n tbody td { padding: 12px 14px; font-size: 13px; vertical-align: middle; }\r\n tbody td.small { color: var(--gray); font-size: 12px; }\r\n \r\n .tag { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; color: white; display: inline-block; white-space: nowrap; }\r\n .tag-green { background: var(--green); }\r\n .tag-red { background: var(--red); }\r\n .tag-yellow { background: var(--yellow); color: #333; }\r\n .tag-blue { background: var(--blue); }\r\n .tag-gray { background: var(--gray); }\r\n\r\n .empty-state { text-align: center; padding: 60px 20px; color: var(--gray); }\r\n .empty-state i { font-size: 64px; margin-bottom: 15px; opacity: 0.2; color: var(--s-color); }\r\n .empty-state p { font-size: 16px; margin-bottom: 20px; }\r\n\r\n \/* Modals *\/\r\n .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); }\r\n .modal-overlay.active { display: flex; animation: fadeIn 0.2s ease; }\r\n .modal-box { background: var(--white); border-radius: 16px; width: 100%; max-width: 750px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: slideUp 0.3s ease; }\r\n .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--white); border-radius: 16px 16px 0 0; z-index: 2; }\r\n .modal-header h3 { font-size: 18px; font-weight: 800; color: var(--s-color); display: flex; align-items: center; gap: 8px; }\r\n .modal-close { width: 32px; height: 32px; border: none; background: #f5f5f5; border-radius: 50%; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; color: var(--gray); transition: all 0.2s; }\r\n .modal-close:hover { background: var(--red); color: white; }\r\n .modal-body { padding: 24px; }\r\n .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-start; background: #fafbfc; border-radius: 0 0 16px 16px; }\r\n\r\n \/* Forms *\/\r\n .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }\r\n .form-group { margin-bottom: 10px; }\r\n .form-group label { display: block; font-size: 12px; margin-bottom: 5px; font-weight: 700; color: var(--s-color); }\r\n .form-control { width: 100%; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-family: 'Cairo'; font-size: 13px; transition: all 0.2s; background: #fafbfc; }\r\n .form-control:focus { border-color: var(--p-color); box-shadow: 0 0 0 3px rgba(255,90,25,0.1); background: white; }\r\n textarea.form-control { resize: vertical; min-height: 70px; }\r\n \r\n .section-divider { margin: 20px 0 15px; padding-top: 15px; border-top: 2px dashed var(--border); }\r\n .section-divider h4 { font-size: 15px; font-weight: 800; color: var(--p-color); display: flex; align-items: center; gap: 6px; }\r\n .total-box { background: linear-gradient(135deg, #f8f9fa, #eef0f2); padding: 15px; border-radius: 10px; margin-top: 15px; text-align: center; border: 1.5px solid var(--border); }\r\n .total-box .label { font-size: 12px; color: var(--gray); font-weight: 600; }\r\n .total-box .value { font-size: 28px; font-weight: 900; color: var(--s-color); margin-top: 5px; }\r\n\r\n \/* Import Area *\/\r\n .import-area { border: 2px dashed var(--border); border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fafbfc; }\r\n .import-area:hover { border-color: var(--p-color); background: #fff8f5; transform: scale(0.99); }\r\n .import-area i { font-size: 44px; color: var(--p-color); margin-bottom: 10px; }\r\n .import-area p { font-size: 13px; color: var(--gray); }\r\n .import-area input { display: none; }\r\n\r\n \/* Toast *\/\r\n .toast-container { position: fixed; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }\r\n .toast { background: var(--white); padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: slideLeft 0.3s; min-width: 280px; border-right: 4px solid var(--green); }\r\n .toast.error { border-right-color: var(--red); }\r\n .toast.info { border-right-color: var(--blue); }\r\n \r\n \/* Confirm *\/\r\n .confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1001; align-items: center; justify-content: center; }\r\n .confirm-overlay.active { display: flex; }\r\n .confirm-box { background: var(--white); border-radius: 16px; padding: 25px; max-width: 400px; width: 90%; text-align: center; box-shadow: var(--shadow-lg); animation: slideUp 0.3s; }\r\n .confirm-box i { font-size: 52px; color: var(--red); margin-bottom: 10px; }\r\n .confirm-box h4 { margin-bottom: 8px; font-size: 18px; }\r\n .confirm-box p { font-size: 14px; color: var(--gray); margin-bottom: 25px; line-height: 1.5; }\r\n .confirm-actions { display: flex; gap: 10px; justify-content: center; }\r\n\r\n \/* Animations *\/\r\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\r\n @keyframes slideLeft { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\r\n\r\n \/* Scrollbar *\/\r\n ::-webkit-scrollbar { width: 6px; height: 6px; }\r\n ::-webkit-scrollbar-track { background: #f1f1f1; }\r\n ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }\r\n ::-webkit-scrollbar-thumb:hover { background: #aaa; }\r\n\r\n \/* Mobile Toggle *\/\r\n .mobile-toggle { display: none; position: fixed; bottom: 20px; left: 20px; z-index: 101; width: 50px; height: 50px; background: var(--p-color); color: white; border: none; border-radius: 50%; box-shadow: var(--shadow-lg); cursor: pointer; font-size: 24px; }\r\n \r\n @media (max-width: 1024px) {\r\n .sidebar { transform: translateX(100%); width: 260px; }\r\n .sidebar.open { transform: translateX(0); }\r\n .main-content { margin-right: 0; }\r\n .mobile-toggle { display: flex; align-items: center; justify-content: center; }\r\n }\r\n @media (max-width: 640px) {\r\n .stats-grid { grid-template-columns: 1fr; }\r\n .filter-bar { flex-direction: column; align-items: stretch; }\r\n .search-box, .filter-select { min-width: 100%; width: 100%; }\r\n .form-grid { grid-template-columns: 1fr; }\r\n .topbar { flex-direction: column; align-items: flex-start; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div id=\"crm-app\">\r\n <aside class=\"sidebar\" id=\"sidebar\">\r\n <div class=\"sidebar-brand\">\r\n <h1>CRM PRO<\/h1>\r\n <small>\u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/small>\r\n <\/div>\r\n <div class=\"nav-section\">\r\n <div class=\"nav-label\">\u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/div>\r\n <button class=\"nav-btn active\" onclick=\"resetView()\"><i class='bx bx-grid-alt'><\/i> <span>\u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645<\/span><\/button>\r\n <button class=\"nav-btn\" onclick=\"openClientModal('add'); switchTabNav(this)\"><i class='bx bx-user-plus'><\/i> <span>\u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u064a\u0644<\/span><\/button>\r\n <button class=\"nav-btn\" onclick=\"openImportModal(); switchTabNav(this)\"><i class='bx bx-import'><\/i> <span>\u0627\u0633\u062a\u064a\u0631\u0627\u062f Excel<\/span><\/button>\r\n <\/div>\r\n <div class=\"nav-section\">\r\n <div class=\"nav-label\">\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/div>\r\n <button class=\"nav-btn\" onclick=\"exportToExcel()\"><i class='bx bx-export'><\/i> <span>\u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/span><\/button>\r\n <button class=\"nav-btn\" onclick=\"confirmClearAll()\"><i class='bx bx-trash'><\/i> <span>\u0645\u0633\u062d \u0627\u0644\u0643\u0644<\/span><\/button>\r\n <\/div>\r\n <div class=\"sidebar-footer\">\r\n <i class='bx bx-data'><\/i> CRM Pro v2.1<br>\u062c\u0645\u064a\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u062d\u0641\u0648\u0638\u0629 \u0645\u062d\u0644\u064a\u0627\u064b\r\n <\/div>\r\n <\/aside>\r\n\r\n <main class=\"main-content\">\r\n <div class=\"topbar\">\r\n <h2><i class='bx bx-grid-alt'><\/i> \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645<\/h2>\r\n <div class=\"topbar-actions\">\r\n <button class=\"btn btn-primary\" onclick=\"openClientModal('add')\"><i class='bx bx-plus'><\/i> \u0639\u0645\u064a\u0644 \u062c\u062f\u064a\u062f<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"exportToExcel()\"><i class='bx bx-download'><\/i> \u062a\u0635\u062f\u064a\u0631<\/button>\r\n <button class=\"btn btn-outline\" onclick=\"openImportModal()\"><i class='bx bx-upload'><\/i> \u0627\u0633\u062a\u064a\u0631\u0627\u062f<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card c\">\r\n <div class=\"label\"><i class='bx bx-user'><\/i> \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/div>\r\n <div class=\"value\" id=\"stat-clients\">0<\/div>\r\n <\/div>\r\n <div class=\"stat-card r\">\r\n <div class=\"label\"><i class='bx bx-dollar-circle'><\/i> \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u064a\u0631\u0627\u062f\u0627\u062a<\/div>\r\n <div class=\"value\" id=\"stat-revenue\">0$<\/div>\r\n <\/div>\r\n <div class=\"stat-card h\">\r\n <div class=\"label\"><i class='bx bx-bullseye'><\/i> \u0639\u0645\u0644\u0627\u0621 \u0645\u0647\u062a\u0645\u064a\u0646 \u062c\u062f\u0627\u064b<\/div>\r\n <div class=\"value\" id=\"stat-hot\">0<\/div>\r\n <\/div>\r\n <div class=\"stat-card a\">\r\n <div class=\"label\"><i class='bx bx-bar-chart-alt-2'><\/i> \u0645\u062a\u0648\u0633\u0637 \u0642\u064a\u0645\u0629 \u0627\u0644\u0639\u0645\u064a\u0644<\/div>\r\n <div class=\"value\" id=\"stat-avg\">0$<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"filter-bar\">\r\n <div class=\"search-box\">\r\n <i class='bx bx-search'><\/i>\r\n <input type=\"text\" id=\"search-input\" placeholder=\"\u0627\u0628\u062d\u062b \u0628\u0627\u0644\u0627\u0633\u0645\u060c \u0627\u0644\u0647\u0627\u062a\u0641\u060c \u0627\u0644\u0625\u064a\u0645\u064a\u0644\u060c \u0627\u0644\u062f\u0648\u0644\u0629\u060c \u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a...\" oninput=\"renderTable()\">\r\n <\/div>\r\n <select class=\"filter-select\" id=\"filter-desire\" onchange=\"renderTable()\">\r\n <option value=\"\">\u0643\u0644 \u0627\u0644\u0631\u063a\u0628\u0627\u062a<\/option>\r\n <option value=\"\u0645\u0647\u062a\u0645 \u062c\u062f\u0627\">\u0645\u0647\u062a\u0645 \u062c\u062f\u0627\u064b<\/option>\r\n <option value=\"\u062c\u0627\u062f\">\u062c\u0627\u062f<\/option>\r\n <option value=\"\u0645\u062a\u0631\u062f\u062f\">\u0645\u062a\u0631\u062f\u062f<\/option>\r\n <\/select>\r\n <select class=\"filter-select\" id=\"filter-mindset\" onchange=\"renderTable()\">\r\n <option value=\"\">\u0643\u0644 \u0627\u0644\u0639\u0642\u0644\u064a\u0627\u062a<\/option>\r\n <option value=\"\u0645\u062d\u062a\u0631\u0641\">\u0645\u062d\u062a\u0631\u0641<\/option>\r\n <option value=\"\u062c\u064a\u062f\">\u062c\u064a\u062f<\/option>\r\n <option value=\"\u0645\u062a\u0648\u0633\u0637\">\u0645\u062a\u0648\u0633\u0637<\/option>\r\n <\/select>\r\n <select class=\"filter-select\" id=\"filter-type\" onchange=\"renderTable()\">\r\n <option value=\"\">\u0643\u0644 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a<\/option>\r\n <option value=\"\u062e\u062f\u0645\u0629\">\u062e\u062f\u0645\u0629<\/option>\r\n <option value=\"\u0645\u0644\u0645\u0648\u0633\">\u0645\u0646\u062a\u062c \u0645\u0644\u0645\u0648\u0633<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"table-wrapper\">\r\n <div class=\"table-scroll\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th onclick=\"sortTable('name')\"><i class='bx bx-user'><\/i> \u0627\u0644\u0639\u0645\u064a\u0644<\/th>\r\n <th onclick=\"sortTable('phone')\"><i class='bx bx-phone'><\/i> \u0627\u0644\u0647\u0627\u062a\u0641<\/th>\r\n <th>\u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644<\/th>\r\n <th>\u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0636\u0627\u062a<\/th>\r\n <th onclick=\"sortTable('mindset')\">\u0627\u0644\u0639\u0642\u0644\u064a\u0629<\/th>\r\n <th onclick=\"sortTable('desire')\">\u0627\u0644\u0631\u063a\u0628\u0629<\/th>\r\n <th onclick=\"sortTable('pType')\">\u0627\u0644\u0645\u0646\u062a\u062c<\/th>\r\n <th onclick=\"sortTable('total')\"><i class='bx bx-dollar'><\/i> \u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a<\/th>\r\n <th onclick=\"sortTable('date')\"><i class='bx bx-calendar'><\/i> \u0627\u0644\u062a\u0627\u0631\u064a\u062e<\/th>\r\n <th>\u0627\u0644\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"clients-tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <div id=\"empty-state\" class=\"empty-state\" style=\"display:none;\">\r\n <i class='bx bx-user-x'><\/i>\r\n <p>\u0644\u0627 \u064a\u0648\u062c\u062f \u0639\u0645\u0644\u0627\u0621 \u062d\u0627\u0644\u064a\u0627\u064b<\/p>\r\n <button class=\"btn btn-primary\" onclick=\"openClientModal('add')\"><i class='bx bx-plus'><\/i> \u0623\u0636\u0641 \u0623\u0648\u0644 \u0639\u0645\u064a\u0644<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n\r\n <button class=\"mobile-toggle\" onclick=\"toggleSidebar()\"><i class='bx bx-menu'><\/i><\/button>\r\n\r\n <!-- Client Modal -->\r\n <div class=\"modal-overlay\" id=\"client-modal\">\r\n <div class=\"modal-box\">\r\n <div class=\"modal-header\">\r\n <h3 id=\"modal-title\"><i class='bx bx-user-plus'><\/i> \u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u064a\u0644 \u062c\u062f\u064a\u062f<\/h3>\r\n <button class=\"modal-close\" onclick=\"closeClientModal()\"><i class='bx bx-x'><\/i><\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <form id=\"client-form\" onsubmit=\"return false;\">\r\n <input type=\"hidden\" id=\"c-edit-id\">\r\n \r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0627\u0633\u0645 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 <span style=\"color:var(--red)\">*<\/span><\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"c-name\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0623\u062d\u0645\u062f \u0645\u062d\u0645\u062f\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0631\u0642\u0645 \u0627\u0644\u0647\u0627\u062a\u0641<\/label>\r\n <input type=\"tel\" class=\"form-control\" id=\"c-phone\" placeholder=\"+963 xxx xxx xxx\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062f\u0648\u0644\u0629<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"c-country\" placeholder=\"\u0645\u062b\u0627\u0644: \u0633\u0648\u0631\u064a\u0627\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0625\u064a\u0645\u064a\u0644<\/label>\r\n <input type=\"email\" class=\"form-control\" id=\"c-email\" placeholder=\"example@email.com\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0639\u0642\u0644\u064a\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629<\/label>\r\n <select class=\"form-control\" id=\"c-mindset\">\r\n <option value=\"\u0645\u062a\u0648\u0633\u0637\">\u0645\u062a\u0648\u0633\u0637<\/option>\r\n <option value=\"\u062c\u064a\u062f\">\u062c\u064a\u062f<\/option>\r\n <option value=\"\u0645\u062d\u062a\u0631\u0641\">\u0645\u062d\u062a\u0631\u0641<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0631\u063a\u0628\u0629<\/label>\r\n <select class=\"form-control\" id=\"c-desire\">\r\n <option value=\"\u0645\u062a\u0631\u062f\u062f\">\u0645\u062a\u0631\u062f\u062f<\/option>\r\n <option value=\"\u062c\u0627\u062f\">\u062c\u0627\u062f<\/option>\r\n <option value=\"\u0645\u0647\u062a\u0645 \u062c\u062f\u0627\">\u0645\u0647\u062a\u0645 \u062c\u062f\u0627\u064b<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-divider\">\r\n <h4><i class='bx bx-conversation'><\/i> \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u062a\u0648\u0627\u0635\u0644<\/h4>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0623\u064a\u0646 \u0648\u0635\u0644\u0646\u0627 \u0628\u0627\u0644\u062a\u0648\u0627\u0635\u0644\u061f<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"c-status\" placeholder=\"\u0645\u062b\u0627\u0644: \u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0639\u0631\u0636 \u0627\u0644\u0645\u0627\u0644\u064a\u060c \u0641\u064a \u0627\u0646\u062a\u0638\u0627\u0631 \u0627\u0644\u0631\u062f\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0636\u0627\u062a \u0648\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a<\/label>\r\n <textarea class=\"form-control\" id=\"c-objection\" placeholder=\"\u0623\u064a \u0627\u0639\u062a\u0631\u0627\u0636\u0627\u062a \u0623\u0648 \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0647\u0627\u0645\u0629 \u062d\u0648\u0644 \u0627\u0644\u0639\u0645\u064a\u0644 \u0623\u0648 \u0627\u0644\u0645\u0646\u062a\u062c...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"section-divider\">\r\n <h4><i class='bx bx-receipt'><\/i> \u062a\u0641\u0627\u0635\u064a\u0644 \u0627\u0644\u0641\u0627\u062a\u0648\u0631\u0629 \/ \u0627\u0644\u0645\u0646\u062a\u062c<\/h4>\r\n <\/div>\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>\u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u062a\u062c<\/label>\r\n <select class=\"form-control\" id=\"p-type\">\r\n <option value=\"\u062e\u062f\u0645\u0629\">\u062e\u062f\u0645\u0629 (Service)<\/option>\r\n <option value=\"\u0645\u0644\u0645\u0648\u0633\">\u0645\u0646\u062a\u062c \u0645\u0644\u0645\u0648\u0633 (Product)<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"p-name\" placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0633\u0648\u064a\u0642\u064a\u0629\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0646\u062a\u062c<\/label>\r\n <input type=\"text\" class=\"form-control\" id=\"p-img\" placeholder=\"URL \u0627\u0644\u0635\u0648\u0631\u0629 (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0633\u0639\u0631 ($)<\/label>\r\n <input type=\"number\" class=\"form-control\" id=\"p-price\" oninput=\"calcTotal()\" value=\"0\" min=\"0\" step=\"0.01\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u0643\u0645\u064a\u0629<\/label>\r\n <input type=\"number\" class=\"form-control\" id=\"p-qty\" oninput=\"calcTotal()\" value=\"1\" min=\"1\" step=\"1\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>\u0627\u0644\u062e\u0635\u0645 ($)<\/label>\r\n <input type=\"number\" class=\"form-control\" id=\"p-discount\" oninput=\"calcTotal()\" value=\"0\" min=\"0\" step=\"0.01\">\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"total-box\">\r\n <div class=\"label\">\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/div>\r\n <div class=\"value\"><span id=\"p-total-display\">0.00<\/span> $<\/div>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button class=\"btn btn-primary\" style=\"flex:2\" onclick=\"saveClient()\"><i class='bx bx-check'><\/i> <span id=\"save-btn-text\">\u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/span><\/button>\r\n <button class=\"btn btn-outline\" onclick=\"closeClientModal()\">\u0625\u0644\u063a\u0627\u0621<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Import Modal -->\r\n <div class=\"modal-overlay\" id=\"import-modal\">\r\n <div class=\"modal-box\" style=\"max-width:520px;\">\r\n <div class=\"modal-header\">\r\n <h3><i class='bx bx-import' style=\"color:var(--p-color)\"><\/i> \u0627\u0633\u062a\u064a\u0631\u0627\u062f \u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0646 Excel<\/h3>\r\n <button class=\"modal-close\" onclick=\"closeImportModal()\"><i class='bx bx-x'><\/i><\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <div class=\"import-area\" id=\"import-drop-zone\" onclick=\"document.getElementById('import-file').click()\">\r\n <i class='bx bx-file-blank'><\/i>\r\n <p>\u0627\u0636\u063a\u0637 \u0647\u0646\u0627 \u0623\u0648 \u0627\u0633\u062d\u0628 \u0645\u0644\u0641 Excel (.xlsx, .csv)<\/p>\r\n <input type=\"file\" id=\"import-file\" accept=\".xlsx,.xls,.csv\" onchange=\"handleImport(event)\">\r\n <\/div>\r\n <div style=\"background:#f9f9f9; padding:12px; border-radius:8px; font-size:11px; color:var(--gray); margin-top:15px;\">\r\n <strong>\u0627\u0644\u0623\u0639\u0645\u062f\u0629 \u0627\u0644\u0645\u062a\u0648\u0642\u0639\u0629:<\/strong><br>\r\n \u0627\u0644\u0627\u0633\u0645\u060c \u0627\u0644\u0647\u0627\u062a\u0641\u060c \u0627\u0644\u062f\u0648\u0644\u0629\u060c \u0627\u0644\u0625\u064a\u0645\u064a\u0644\u060c \u0627\u0644\u0639\u0642\u0644\u064a\u0629\u060c \u0627\u0644\u0631\u063a\u0628\u0629\u060c \u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644\u060c \u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0636\u0627\u062a\u060c \u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u062a\u062c\u060c \u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c\u060c \u0627\u0644\u0633\u0639\u0631\u060c \u0627\u0644\u0643\u0645\u064a\u0629\u060c \u0627\u0644\u062e\u0635\u0645\u060c \u0627\u0644\u062a\u0627\u0631\u064a\u062e\r\n <\/div>\r\n <div id=\"import-status\" style=\"margin-top:15px;\"><\/div>\r\n <\/div>\r\n <div class=\"modal-footer\">\r\n <button class=\"btn btn-outline\" onclick=\"closeImportModal()\">\u0625\u063a\u0644\u0627\u0642<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Confirm Dialog -->\r\n <div class=\"confirm-overlay\" id=\"confirm-dialog\">\r\n <div class=\"confirm-box\">\r\n <i class='bx bx-error-circle'><\/i>\r\n <h4 id=\"confirm-title\">\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u0630\u0641<\/h4>\r\n <p id=\"confirm-message\">\u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f \u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621\u061f<\/p>\r\n <div class=\"confirm-actions\">\r\n <button class=\"btn btn-danger\" id=\"confirm-yes\">\u0646\u0639\u0645\u060c \u0645\u062a\u0623\u0643\u062f<\/button>\r\n <button class=\"btn btn-outline\" onclick=\"closeConfirm()\">\u0625\u0644\u063a\u0627\u0621<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"toast-container\" id=\"toast-container\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n let clientsData = [];\r\n let sortField = 'date';\r\n let sortAsc = false;\r\n let confirmCallback = null;\r\n\r\n function init() {\r\n const stored = localStorage.getItem('crm_pro_clients_v2');\r\n if (stored) { try { clientsData = JSON.parse(stored); } catch(e) { clientsData = []; } }\r\n renderTable();\r\n updateStats();\r\n }\r\n\r\n function saveData() { localStorage.setItem('crm_pro_clients_v2', JSON.stringify(clientsData)); }\r\n\r\n function showToast(message, type = 'success') {\r\n const container = document.getElementById('toast-container');\r\n const toast = document.createElement('div');\r\n toast.className = `toast ${type}`;\r\n const icons = { success: 'bx-check-circle', error: 'bx-x-circle', info: 'bx-info-circle' };\r\n toast.innerHTML = `<i class='bx ${icons[type] || icons.success}' style=\"font-size:18px;\"><\/i> ${message}`;\r\n container.appendChild(toast);\r\n setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s'; setTimeout(() => toast.remove(), 300); }, 3500);\r\n }\r\n\r\n function showConfirm(title, message, callback) {\r\n document.getElementById('confirm-title').textContent = title;\r\n document.getElementById('confirm-message').textContent = message;\r\n document.getElementById('confirm-dialog').classList.add('active');\r\n confirmCallback = callback;\r\n document.getElementById('confirm-yes').onclick = () => { closeConfirm(); if (confirmCallback) confirmCallback(); };\r\n }\r\n\r\n function closeConfirm() { document.getElementById('confirm-dialog').classList.remove('active'); confirmCallback = null; }\r\n\r\n function switchTabNav(btn) {\r\n document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));\r\n if (btn) btn.classList.add('active');\r\n if (window.innerWidth < 1024) toggleSidebar();\r\n }\r\n\r\n function resetView() {\r\n switchTabNav(document.querySelector('.nav-btn'));\r\n document.getElementById('page-title')?.remove(); \/\/ Just in case\r\n }\r\n\r\n function toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); }\r\n\r\n function openClientModal(mode, id = null) {\r\n const modal = document.getElementById('client-modal');\r\n modal.classList.add('active');\r\n document.getElementById('client-form').reset();\r\n document.getElementById('c-edit-id').value = '';\r\n document.getElementById('p-total-display').textContent = '0.00';\r\n document.getElementById('p-price').value = 0;\r\n document.getElementById('p-qty').value = 1;\r\n document.getElementById('p-discount').value = 0;\r\n\r\n if (mode === 'edit' && id) {\r\n document.getElementById('modal-title').innerHTML = '<i class=\"bx bx-edit\"><\/i> \u062a\u0639\u062f\u064a\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u064a\u0644';\r\n document.getElementById('save-btn-text').textContent = '\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a';\r\n const client = clientsData.find(c => c.id === id);\r\n if (client) {\r\n document.getElementById('c-edit-id').value = client.id;\r\n document.getElementById('c-name').value = client.name || '';\r\n document.getElementById('c-phone').value = client.phone || '';\r\n document.getElementById('c-country').value = client.country || '';\r\n document.getElementById('c-email').value = client.email || '';\r\n document.getElementById('c-mindset').value = client.mindset || '\u0645\u062a\u0648\u0633\u0637';\r\n document.getElementById('c-desire').value = client.desire || '\u0645\u062a\u0631\u062f\u062f';\r\n document.getElementById('c-status').value = client.status || '';\r\n document.getElementById('c-objection').value = client.objection || '';\r\n document.getElementById('p-type').value = client.pType || '\u062e\u062f\u0645\u0629';\r\n document.getElementById('p-name').value = client.pName || '';\r\n document.getElementById('p-img').value = client.pImg || '';\r\n document.getElementById('p-price').value = client.price || 0;\r\n document.getElementById('p-qty').value = client.qty || 1;\r\n document.getElementById('p-discount').value = client.discount || 0;\r\n calcTotal();\r\n }\r\n } else {\r\n document.getElementById('modal-title').innerHTML = '<i class=\"bx bx-user-plus\"><\/i> \u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u064a\u0644 \u062c\u062f\u064a\u062f';\r\n document.getElementById('save-btn-text').textContent = '\u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a';\r\n }\r\n }\r\n\r\n function closeClientModal() { document.getElementById('client-modal').classList.remove('active'); }\r\n\r\n function openImportModal() {\r\n document.getElementById('import-modal').classList.add('active');\r\n document.getElementById('import-status').innerHTML = '';\r\n document.getElementById('import-file').value = '';\r\n }\r\n function closeImportModal() { document.getElementById('import-modal').classList.remove('active'); }\r\n\r\n function calcTotal() {\r\n const price = parseFloat(document.getElementById('p-price').value) || 0;\r\n const qty = parseFloat(document.getElementById('p-qty').value) || 0;\r\n const discount = parseFloat(document.getElementById('p-discount').value) || 0;\r\n const total = Math.max(0, (price * qty) - discount);\r\n document.getElementById('p-total-display').textContent = total.toFixed(2);\r\n return total;\r\n }\r\n\r\n function saveClient() {\r\n const name = document.getElementById('c-name').value.trim();\r\n if (!name) { showToast('\u064a\u0631\u062c\u0649 \u0625\u062f\u062e\u0627\u0644 \u0627\u0633\u0645 \u0627\u0644\u0639\u0645\u064a\u0644', 'error'); document.getElementById('c-name').focus(); return; }\r\n\r\n const total = calcTotal();\r\n const editId = document.getElementById('c-edit-id').value;\r\n const clientObj = {\r\n name, phone: document.getElementById('c-phone').value.trim(),\r\n country: document.getElementById('c-country').value.trim(),\r\n email: document.getElementById('c-email').value.trim(),\r\n mindset: document.getElementById('c-mindset').value,\r\n desire: document.getElementById('c-desire').value,\r\n status: document.getElementById('c-status').value.trim(),\r\n objection: document.getElementById('c-objection').value.trim(),\r\n pType: document.getElementById('p-type').value,\r\n pName: document.getElementById('p-name').value.trim(),\r\n pImg: document.getElementById('p-img').value.trim(),\r\n price: parseFloat(document.getElementById('p-price').value) || 0,\r\n qty: parseInt(document.getElementById('p-qty').value) || 1,\r\n discount: parseFloat(document.getElementById('p-discount').value) || 0,\r\n total\r\n };\r\n\r\n if (editId) {\r\n const idx = clientsData.findIndex(c => c.id == editId);\r\n if (idx !== -1) { clientsData[idx] = { ...clientsData[idx], ...clientObj }; showToast('\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0639\u0645\u064a\u0644 \u0628\u0646\u062c\u0627\u062d'); }\r\n } else {\r\n clientObj.id = Date.now();\r\n clientObj.date = new Date().toISOString();\r\n clientsData.push(clientObj);\r\n showToast('\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u0639\u0645\u064a\u0644 \u0628\u0646\u062c\u0627\u062d');\r\n }\r\n\r\n saveData(); renderTable(); updateStats(); closeClientModal();\r\n }\r\n\r\n function deleteClient(id) {\r\n const client = clientsData.find(c => c.id === id);\r\n showConfirm('\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u062d\u0630\u0641', `\u0647\u0644 \u062a\u0631\u064a\u062f \u062d\u0630\u0641 \u0627\u0644\u0639\u0645\u064a\u0644 \"${client ? client.name : ''}\"\u061f \u0644\u0627 \u064a\u0645\u0643\u0646 \u0627\u0644\u062a\u0631\u0627\u062c\u0639 \u0639\u0646 \u0647\u0630\u0627 \u0627\u0644\u0625\u062c\u0631\u0627\u0621.`, () => {\r\n clientsData = clientsData.filter(c => c.id !== id);\r\n saveData(); renderTable(); updateStats(); showToast('\u062a\u0645 \u062d\u0630\u0641 \u0627\u0644\u0639\u0645\u064a\u0644', 'info');\r\n });\r\n }\r\n\r\n function confirmClearAll() {\r\n if (clientsData.length === 0) { showToast('\u0644\u0627 \u062a\u0648\u062c\u062f \u0628\u064a\u0627\u0646\u0627\u062a \u0644\u0645\u0633\u062d\u0647\u0627', 'info'); return; }\r\n showConfirm('\u0645\u0633\u062d \u062c\u0645\u064a\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a', `\u0633\u064a\u062a\u0645 \u062d\u0630\u0641 ${clientsData.length} \u0639\u0645\u064a\u0644 \u0646\u0647\u0627\u0626\u064a\u0627\u064b. \u0647\u0644 \u0623\u0646\u062a \u0645\u062a\u0623\u0643\u062f\u061f`, () => {\r\n clientsData = []; saveData(); renderTable(); updateStats(); showToast('\u062a\u0645 \u0645\u0633\u062d \u062c\u0645\u064a\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a', 'info');\r\n });\r\n }\r\n\r\n function getFilteredData() {\r\n const search = document.getElementById('search-input').value.trim().toLowerCase();\r\n const fDesire = document.getElementById('filter-desire').value;\r\n const fMindset = document.getElementById('filter-mindset').value;\r\n const fType = document.getElementById('filter-type').value;\r\n\r\n return clientsData.filter(c => {\r\n const matchS = !search || \r\n (c.name && c.name.toLowerCase().includes(search)) ||\r\n (c.phone && c.phone.includes(search)) ||\r\n (c.email && c.email.toLowerCase().includes(search)) ||\r\n (c.country && c.country.toLowerCase().includes(search)) ||\r\n (c.status && c.status.toLowerCase().includes(search)) ||\r\n (c.objection && c.objection.toLowerCase().includes(search));\r\n return matchS && (!fDesire || c.desire === fDesire) && (!fMindset || c.mindset === fMindset) && (!fType || c.pType === fType);\r\n });\r\n }\r\n\r\n function sortTable(field) {\r\n if (sortField === field) { sortAsc = !sortAsc; } else { sortField = field; sortAsc = false; }\r\n renderTable();\r\n }\r\n\r\n function renderTable() {\r\n const tbody = document.getElementById('clients-tbody');\r\n const emptyState = document.getElementById('empty-state');\r\n let data = getFilteredData();\r\n\r\n data.sort((a, b) => {\r\n let valA = a[sortField] || '', valB = b[sortField] || '';\r\n if (sortField === 'total' || sortField === 'price') { valA = Number(valA); valB = Number(valB); }\r\n else { valA = String(valA).toLowerCase(); valB = String(valB).toLowerCase(); }\r\n if (valA < valB) return sortAsc ? -1 : 1;\r\n if (valA > valB) return sortAsc ? 1 : -1;\r\n return 0;\r\n });\r\n\r\n if (data.length === 0) {\r\n tbody.innerHTML = '';\r\n emptyState.style.display = 'block';\r\n return;\r\n }\r\n emptyState.style.display = 'none';\r\n\r\n tbody.innerHTML = data.map(c => {\r\n const desireTag = c.desire === '\u0645\u0647\u062a\u0645 \u062c\u062f\u0627' ? 'tag-red' : c.desire === '\u062c\u0627\u062f' ? 'tag-yellow' : 'tag-gray';\r\n const mindsetTag = c.mindset === '\u0645\u062d\u062a\u0631\u0641' ? 'tag-green' : c.mindset === '\u062c\u064a\u062f' ? 'tag-blue' : 'tag-gray';\r\n const dateStr = c.date ? new Date(c.date).toLocaleDateString('ar-EG', { year:'numeric', month:'short', day:'numeric' }) : '---';\r\n const dispName = c.pName || c.pType;\r\n const obsText = c.objection ? (c.objection.length > 25 ? c.objection.substring(0,25) + '...' : c.objection) : '<span style=\"color:var(--gray)\">-<\/span>';\r\n const statusText = c.status ? (c.status.length > 30 ? c.status.substring(0,30) + '...' : c.status) : '<span style=\"color:var(--gray)\">-<\/span>';\r\n\r\n return `<tr>\r\n <td><strong>${c.name}<\/strong>${c.country ? '<br><small class=\"small\"><i class=\"bx bx-world\"><\/i> ' + c.country + '<\/small>' : ''}<\/td>\r\n <td class=\"small\">${c.phone || '-'}<\/td>\r\n <td><small>${statusText}<\/small><\/td>\r\n <td class=\"small\" title=\"${c.objection || ''}\">${obsText}<\/td>\r\n <td><span class=\"tag ${mindsetTag}\">${c.mindset}<\/span><\/td>\r\n <td><span class=\"tag ${desireTag}\">${c.desire}<\/span><\/td>\r\n <td>${dispName}<\/td>\r\n <td style=\"font-weight:bold; color:var(--s-color)\">${c.total.toFixed(2)}$<\/td>\r\n <td class=\"small\">${dateStr}<\/td>\r\n <td style=\"white-space:nowrap;\">\r\n <button class=\"btn-icon edit\" title=\"\u062a\u0639\u062f\u064a\u0644\" onclick=\"openClientModal('edit', ${c.id})\"><i class='bx bx-edit'><\/i><\/button>\r\n <button class=\"btn-icon delete\" title=\"\u062d\u0630\u0641\" onclick=\"deleteClient(${c.id})\"><i class='bx bx-trash'><\/i><\/button>\r\n <\/td>\r\n <\/tr>`;\r\n }).join('');\r\n }\r\n\r\n function updateStats() {\r\n const total = clientsData.length;\r\n const revenue = clientsData.reduce((sum, c) => sum + (c.total || 0), 0);\r\n const hot = clientsData.filter(c => c.desire === '\u0645\u0647\u062a\u0645 \u062c\u062f\u0627').length;\r\n const avg = total > 0 ? revenue \/ total : 0;\r\n\r\n document.getElementById('stat-clients').textContent = total;\r\n document.getElementById('stat-revenue').textContent = revenue.toFixed(2) + '$';\r\n document.getElementById('stat-hot').textContent = hot;\r\n document.getElementById('stat-avg').textContent = avg.toFixed(2) + '$';\r\n }\r\n\r\n function exportToExcel() {\r\n if (clientsData.length === 0) { showToast('\u0644\u0627 \u062a\u0648\u062c\u062f \u0628\u064a\u0627\u0646\u0627\u062a \u0644\u0644\u062a\u0635\u062f\u064a\u0631', 'error'); return; }\r\n const data = clientsData.map(c => ({\r\n '\u0627\u0644\u0627\u0633\u0645': c.name, '\u0627\u0644\u0647\u0627\u062a\u0641': c.phone || '', '\u0627\u0644\u062f\u0648\u0644\u0629': c.country || '', '\u0627\u0644\u0625\u064a\u0645\u064a\u0644': c.email || '',\r\n '\u0627\u0644\u0639\u0642\u0644\u064a\u0629': c.mindset, '\u0627\u0644\u0631\u063a\u0628\u0629': c.desire, '\u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644': c.status || '', '\u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0636\u0627\u062a': c.objection || '',\r\n '\u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u062a\u062c': c.pType, '\u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c': c.pName || '', '\u0627\u0644\u0633\u0639\u0631 ($)': c.price || 0, '\u0627\u0644\u0643\u0645\u064a\u0629': c.qty || 1,\r\n '\u0627\u0644\u062e\u0635\u0645 ($)': c.discount || 0, '\u0627\u0644\u0625\u062c\u0645\u0627\u0644\u064a ($)': c.total || 0, '\u0627\u0644\u062a\u0627\u0631\u064a\u062e': c.date ? new Date(c.date).toLocaleDateString('ar-EG') : ''\r\n }));\r\n const ws = XLSX.utils.json_to_sheet(data);\r\n ws['!cols'] = [{wch:20},{wch:18},{wch:12},{wch:25},{wch:10},{wch:12},{wch:35},{wch:35},{wch:10},{wch:20},{wch:8},{wch:6},{wch:8},{wch:10},{wch:12}];\r\n const wb = XLSX.utils.book_new();\r\n XLSX.utils.book_append_sheet(wb, ws, '\u0627\u0644\u0639\u0645\u0644\u0627\u0621');\r\n \r\n \/\/ Summary Sheet\r\n const summary = [\r\n {'\u0627\u0644\u0628\u064a\u0627\u0646': '\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0639\u0645\u0644\u0627\u0621', '\u0627\u0644\u0642\u064a\u0645\u0629': clientsData.length},\r\n {'\u0627\u0644\u0628\u064a\u0627\u0646': '\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0625\u064a\u0631\u0627\u062f\u0627\u062a ($)', '\u0627\u0644\u0642\u064a\u0645\u0629': clientsData.reduce((s,c) => s + (c.total||0), 0).toFixed(2)},\r\n {'\u0627\u0644\u0628\u064a\u0627\u0646': '\u0645\u062a\u0648\u0633\u0637 \u0642\u064a\u0645\u0629 \u0627\u0644\u0639\u0645\u064a\u0644 ($)', '\u0627\u0644\u0642\u064a\u0645\u0629': (clientsData.length ? (clientsData.reduce((s,c) => s + (c.total||0), 0) \/ clientsData.length).toFixed(2) : 0)},\r\n {'\u0627\u0644\u0628\u064a\u0627\u0646': '\u0639\u0645\u0644\u0627\u0621 \u0645\u0647\u062a\u0645\u064a\u0646 \u062c\u062f\u0627\u064b', '\u0627\u0644\u0642\u064a\u0645\u0629': clientsData.filter(c => c.desire === '\u0645\u0647\u062a\u0645 \u062c\u062f\u0627').length},\r\n {'\u0627\u0644\u0628\u064a\u0627\u0646': '\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u0635\u062f\u064a\u0631', '\u0627\u0644\u0642\u064a\u0645\u0629': new Date().toLocaleString('ar-EG')}\r\n ];\r\n const ws2 = XLSX.utils.json_to_sheet(summary);\r\n ws2['!cols'] = [{wch:30},{wch:20}];\r\n XLSX.utils.book_append_sheet(wb, ws2, '\u0627\u0644\u0645\u0644\u062e\u0635');\r\n\r\n XLSX.writeFile(wb, `CRM_Export_${new Date().toISOString().slice(0,10)}.xlsx`);\r\n showToast(`\u062a\u0645 \u062a\u0635\u062f\u064a\u0631 ${clientsData.length} \u0639\u0645\u064a\u0644 \u0628\u0646\u062c\u0627\u062d`);\r\n }\r\n\r\n function handleImport(event) {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n try {\r\n const data = new Uint8Array(e.target.result);\r\n const workbook = XLSX.read(data, { type: 'array' });\r\n const jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);\r\n if (!jsonData.length) { document.getElementById('import-status').innerHTML = '<p style=\"color:var(--red);font-size:13px;\"><i class=\"bx bx-error\"><\/i> \u0627\u0644\u0645\u0644\u0641 \u0641\u0627\u0631\u063a<\/p>'; return; }\r\n \r\n let imp = 0, skip = 0;\r\n jsonData.forEach(row => {\r\n const name = row['\u0627\u0644\u0627\u0633\u0645'] || row['Name'] || row['name'] || '';\r\n if (!name) { skip++; return; }\r\n const price = parseFloat(row['\u0627\u0644\u0633\u0639\u0631 ($)'] || row['\u0627\u0644\u0633\u0639\u0631'] || 0) || 0;\r\n const qty = parseInt(row['\u0627\u0644\u0643\u0645\u064a\u0629'] || row['Qty'] || 1) || 1;\r\n const disc = parseFloat(row['\u0627\u0644\u062e\u0635\u0645 ($)'] || row['\u0627\u0644\u062e\u0635\u0645'] || 0) || 0;\r\n const total = Math.max(0, (price * qty) - disc);\r\n\r\n clientsData.push({\r\n id: Date.now() + Math.random(), name: name.trim(),\r\n phone: String(row['\u0627\u0644\u0647\u0627\u062a\u0641'] || row['Phone'] || ''),\r\n country: String(row['\u0627\u0644\u062f\u0648\u0644\u0629'] || row['Country'] || ''),\r\n email: String(row['\u0627\u0644\u0625\u064a\u0645\u064a\u0644'] || row['\u0627\u0644\u0628\u0631\u064a\u062f'] || row['Email'] || ''),\r\n mindset: row['\u0627\u0644\u0639\u0642\u0644\u064a\u0629'] || '\u0645\u062a\u0648\u0633\u0637',\r\n desire: row['\u0627\u0644\u0631\u063a\u0628\u0629'] || '\u0645\u062a\u0631\u062f\u062f',\r\n status: String(row['\u062d\u0627\u0644\u0629 \u0627\u0644\u062a\u0648\u0627\u0635\u0644'] || row['\u0627\u0644\u062a\u0648\u0627\u0635\u0644'] || ''),\r\n objection: String(row['\u0627\u0644\u0627\u0639\u062a\u0631\u0627\u0636\u0627\u062a'] || row['\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a'] || ''),\r\n pType: row['\u0646\u0648\u0639 \u0627\u0644\u0645\u0646\u062a\u062c'] || '\u062e\u062f\u0645\u0629',\r\n pName: String(row['\u0627\u0633\u0645 \u0627\u0644\u0645\u0646\u062a\u062c'] || ''),\r\n pImg: String(row['\u0631\u0627\u0628\u0637 \u0635\u0648\u0631\u0629 \u0627\u0644\u0645\u0646\u062a\u062c'] || ''),\r\n price, qty, discount: disc, total,\r\n date: row['\u0627\u0644\u062a\u0627\u0631\u064a\u062e'] ? new Date(row['\u0627\u0644\u062a\u0627\u0631\u064a\u062e']).toISOString() : new Date().toISOString()\r\n });\r\n imp++;\r\n });\r\n saveData(); renderTable(); updateStats();\r\n document.getElementById('import-status').innerHTML = `<p style=\"font-size:14px;font-weight:bold;color:var(--green);\"><i class=\"bx bx-check-circle\"><\/i> \u062a\u0645 \u0627\u0633\u062a\u064a\u0631\u0627\u062f ${imp} \u0639\u0645\u064a\u0644 \u0628\u0646\u062c\u0627\u062d<\/p>${skip ? `<p style=\"font-size:12px;color:var(--yellow);margin-top:5px;\">\u062a\u0645 \u062a\u062e\u0637\u064a ${skip} \u0635\u0641<\/p>` : ''}`;\r\n showToast(`\u062a\u0645 \u0627\u0633\u062a\u064a\u0631\u0627\u062f ${imp} \u0639\u0645\u064a\u0644 \u0645\u0646 Excel`);\r\n } catch(err) {\r\n document.getElementById('import-status').innerHTML = '<p style=\"color:var(--red);font-size:13px;\"><i class=\"bx bx-error\"><\/i> \u062e\u0637\u0623 \u0641\u064a \u0627\u0644\u0645\u0644\u0641: ' + err.message + '<\/p>';\r\n }\r\n };\r\n reader.readAsArrayBuffer(file);\r\n }\r\n\r\n \/\/ Drag & Drop\r\n const dropZone = document.getElementById('import-drop-zone');\r\n if (dropZone) {\r\n ['dragenter','dragover'].forEach(e => dropZone.addEventListener(e, ev => { ev.preventDefault(); dropZone.style.borderColor = 'var(--p-color)'; dropZone.style.background = '#fff8f5'; }));\r\n ['dragleave','drop'].forEach(e => dropZone.addEventListener(e, ev => { ev.preventDefault(); dropZone.style.borderColor = ''; dropZone.style.background = ''; }));\r\n dropZone.addEventListener('drop', e => {\r\n if (e.dataTransfer.files.length > 0) {\r\n document.getElementById('import-file').files = e.dataTransfer.files;\r\n handleImport({ target: { files: e.dataTransfer.files } });\r\n }\r\n });\r\n }\r\n\r\n document.addEventListener('click', e => {\r\n if (e.target.classList.contains('modal-overlay')) e.target.classList.remove('active');\r\n if (e.target.id === 'confirm-dialog') closeConfirm();\r\n });\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'Escape') {\r\n document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active'));\r\n closeConfirm();\r\n }\r\n });\r\n\r\n init();\r\n<\/script>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n```\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>“`html CRM Pro | \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 CRM PRO \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0648\u062d\u0629 \u0627\u0644\u062a\u062d\u0643\u0645 \u0625\u0636\u0627\u0641\u0629 \u0639\u0645\u064a\u0644 \u0627\u0633\u062a\u064a\u0631\u0627\u062f […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-3989","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/pages\/3989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/comments?post=3989"}],"version-history":[{"count":31,"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/pages\/3989\/revisions"}],"predecessor-version":[{"id":4023,"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/pages\/3989\/revisions\/4023"}],"wp:attachment":[{"href":"https:\/\/abdulazizalsari.online\/en\/wp-json\/wp\/v2\/media?parent=3989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}