\u05de\u05e2\u05e8\u05db\u05ea \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT<\/title>\r\n<style>\r\n* { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }\r\n.container { max-width: 1400px; margin: 0 auto; }\r\n.header { background: white; padding: 25px; border-radius: 15px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\r\n.header h1 { font-size: 28px; color: #2d3748; margin-bottom: 5px; }\r\n.header p { color: #718096; font-size: 14px; }\r\n.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px; }\r\n.stat-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s; cursor: pointer; }\r\n.stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }\r\n.stat-number { font-size: 36px; font-weight: bold; margin-bottom: 8px; }\r\n.stat-label { color: #718096; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }\r\n.stat-card.open .stat-number { color: #e53e3e; }\r\n.stat-card.progress .stat-number { color: #dd6b20; }\r\n.stat-card.resolved .stat-number { color: #38a169; }\r\n.stat-card.closed .stat-number { color: #4299e1; }\r\n.main-content { display: grid; grid-template-columns: 1fr 400px; gap: 25px; }\r\n.tickets-section, .form-section { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\r\n.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e2e8f0; }\r\n.section-title { font-size: 20px; font-weight: bold; color: #2d3748; }\r\n.btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s; }\r\n.btn-primary { background: #667eea; color: white; }\r\n.btn-primary:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }\r\n.btn-success { background: #48bb78; color: white; }\r\n.btn-danger { background: #f56565; color: white; }\r\n.btn-secondary { background: #cbd5e0; color: #2d3748; }\r\n.btn-sm { padding: 6px 12px; font-size: 12px; }\r\n.form-group { margin-bottom: 18px; }\r\n.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #4a5568; font-size: 14px; }\r\n.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border 0.3s; }\r\n.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #667eea; }\r\n.form-group textarea { resize: vertical; min-height: 100px; }\r\n.ticket-card { background: #f7fafc; padding: 18px; border-radius: 10px; margin-bottom: 15px; border-right: 4px solid #cbd5e0; transition: all 0.3s; cursor: pointer; }\r\n.ticket-card:hover { transform: translateX(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }\r\n.ticket-card.priority-low { border-right-color: #48bb78; }\r\n.ticket-card.priority-medium { border-right-color: #ed8936; }\r\n.ticket-card.priority-high { border-right-color: #f56565; }\r\n.ticket-card.priority-critical { border-right-color: #9f1239; background: #fef2f2; }\r\n.ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }\r\n.ticket-id { font-weight: bold; color: #667eea; font-size: 14px; }\r\n.ticket-status { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; }\r\n.status-open { background: #fed7d7; color: #c53030; }\r\n.status-progress { background: #feebc8; color: #c05621; }\r\n.status-resolved { background: #c6f6d5; color: #22543d; }\r\n.status-closed { background: #bee3f8; color: #2c5282; }\r\n.ticket-title { font-size: 16px; font-weight: 600; color: #2d3748; margin-bottom: 8px; }\r\n.ticket-meta { display: flex; gap: 15px; font-size: 13px; color: #718096; flex-wrap: wrap; }\r\n.ticket-meta span { display: flex; align-items: center; gap: 5px; }\r\n.priority-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }\r\n.priority-low { background: #c6f6d5; color: #22543d; }\r\n.priority-medium { background: #feebc8; color: #c05621; }\r\n.priority-high { background: #fed7d7; color: #c53030; }\r\n.priority-critical { background: #fce7f3; color: #9f1239; }\r\n.filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }\r\n.filter-btn { padding: 8px 16px; border: 2px solid #e2e8f0; background: white; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.3s; }\r\n.filter-btn:hover { border-color: #667eea; color: #667eea; }\r\n.filter-btn.active { background: #667eea; color: white; border-color: #667eea; }\r\n.empty-state { text-align: center; padding: 60px 20px; color: #a0aec0; }\r\n.empty-state-icon { font-size: 64px; margin-bottom: 20px; }\r\n.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }\r\n.modal.active { display: flex; }\r\n.modal-content { background: white; border-radius: 15px; padding: 30px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }\r\n.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e2e8f0; }\r\n.modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #a0aec0; line-height: 1; }\r\n.modal-close:hover { color: #2d3748; }\r\n.ticket-details { margin-top: 20px; }\r\n.detail-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }\r\n.detail-label { font-weight: 600; color: #4a5568; }\r\n.detail-value { color: #2d3748; }\r\n.comments-section { margin-top: 25px; }\r\n.comment { background: #f7fafc; padding: 15px; border-radius: 8px; margin-bottom: 12px; }\r\n.comment-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }\r\n.comment-author { font-weight: 600; color: #667eea; }\r\n.comment-date { color: #a0aec0; }\r\n.comment-text { color: #4a5568; line-height: 1.6; }\r\n.search-box { margin-bottom: 20px; }\r\n.search-box input { width: 100%; padding: 12px 40px 12px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\r\n.notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: white; padding: 16px 24px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 2000; display: none; animation: slideDown 0.3s ease; }\r\n.notification.show { display: block; }\r\n.notification.success { border-right: 4px solid #48bb78; }\r\n.notification.error { border-right: 4px solid #f56565; }\r\n@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }\r\n@media (max-width: 1024px) { .main-content { grid-template-columns: 1fr; } .form-section { order: -1; } }\r\n@media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<div class=\"header\">\r\n<h1>\ud83c\udfab \u05de\u05e2\u05e8\u05db\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT<\/h1>\r\n<p>\u05e0\u05d9\u05d4\u05d5\u05dc \u05d5\u05d8\u05d9\u05e4\u05d5\u05dc \u05d1\u05e4\u05e0\u05d9\u05d5\u05ea \u05de\u05e9\u05ea\u05de\u05e9\u05d9\u05dd \u05d5\u05ea\u05e7\u05dc\u05d5\u05ea \u05d8\u05db\u05e0\u05d9\u05d5\u05ea<\/p>\r\n<\/div>\r\n\r\n<div class=\"stats-row\">\r\n<div class=\"stat-card open\" onclick=\"filterByStatus('open')\">\r\n<div class=\"stat-number\" id=\"statOpen\">0<\/div>\r\n<div class=\"stat-label\">\u05e4\u05ea\u05d5\u05d7\u05d5\u05ea<\/div>\r\n<\/div>\r\n<div class=\"stat-card progress\" onclick=\"filterByStatus('progress')\">\r\n<div class=\"stat-number\" id=\"statProgress\">0<\/div>\r\n<div class=\"stat-label\">\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc<\/div>\r\n<\/div>\r\n<div class=\"stat-card resolved\" onclick=\"filterByStatus('resolved')\">\r\n<div class=\"stat-number\" id=\"statResolved\">0<\/div>\r\n<div class=\"stat-label\">\u05e0\u05e4\u05ea\u05e8\u05d5<\/div>\r\n<\/div>\r\n<div class=\"stat-card closed\" onclick=\"filterByStatus('closed')\">\r\n<div class=\"stat-number\" id=\"statClosed\">0<\/div>\r\n<div class=\"stat-label\">\u05e1\u05d2\u05d5\u05e8\u05d5\u05ea<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"main-content\">\r\n<div class=\"tickets-section\">\r\n<div class=\"section-header\">\r\n<h2 class=\"section-title\">\u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea<\/h2>\r\n<button class=\"btn btn-primary\" onclick=\"showNewTicketForm()\">\u2795 \u05e7\u05e8\u05d9\u05d0\u05d4 \u05d7\u05d3\u05e9\u05d4<\/button>\r\n<\/div>\r\n\r\n<div class=\"search-box\">\r\n<input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d \u05d7\u05d9\u05e4\u05d5\u05e9 \u05dc\u05e4\u05d9 \u05de\u05e1\u05e4\u05e8, \u05db\u05d5\u05ea\u05e8\u05ea \u05d0\u05d5 \u05e4\u05d5\u05ea\u05d7...\" oninput=\"searchTickets()\">\r\n<\/div>\r\n\r\n<div class=\"filters\">\r\n<button class=\"filter-btn active\" data-filter=\"all\" onclick=\"filterTickets('all')\">\u05d4\u05db\u05dc<\/button>\r\n<button class=\"filter-btn\" data-filter=\"open\" onclick=\"filterTickets('open')\">\u05e4\u05ea\u05d5\u05d7\u05d5\u05ea<\/button>\r\n<button class=\"filter-btn\" data-filter=\"progress\" onclick=\"filterTickets('progress')\">\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc<\/button>\r\n<button class=\"filter-btn\" data-filter=\"resolved\" onclick=\"filterTickets('resolved')\">\u05e0\u05e4\u05ea\u05e8\u05d5<\/button>\r\n<button class=\"filter-btn\" data-filter=\"closed\" onclick=\"filterTickets('closed')\">\u05e1\u05d2\u05d5\u05e8\u05d5\u05ea<\/button>\r\n<\/div>\r\n\r\n<div id=\"ticketsList\"><\/div>\r\n<\/div>\r\n\r\n<div class=\"form-section\" id=\"newTicketForm\" style=\"display:none;\">\r\n<div class=\"section-header\">\r\n<h2 class=\"section-title\">\u05e7\u05e8\u05d9\u05d0\u05d4 \u05d7\u05d3\u05e9\u05d4<\/h2>\r\n<button class=\"btn btn-secondary btn-sm\" onclick=\"hideNewTicketForm()\">\u2715 \u05e1\u05d2\u05d5\u05e8<\/button>\r\n<\/div>\r\n\r\n<form onsubmit=\"createTicket(event)\">\r\n<div class=\"form-group\">\r\n<label>\u05e9\u05dd \u05d4\u05e4\u05d5\u05ea\u05d7 *<\/label>\r\n<input type=\"text\" id=\"requesterName\" required>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05d3\u05d5\u05d0\"\u05dc *<\/label>\r\n<input type=\"email\" id=\"requesterEmail\" required>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05de\u05d7\u05dc\u05e7\u05d4<\/label>\r\n<select id=\"department\">\r\n<option value=\"IT\">IT<\/option>\r\n<option value=\"\u05db\u05e1\u05e4\u05d9\u05dd\">\u05db\u05e1\u05e4\u05d9\u05dd<\/option>\r\n<option value=\"\u05de\u05e9\u05d0\u05d1\u05d9 \u05d0\u05e0\u05d5\u05e9\">\u05de\u05e9\u05d0\u05d1\u05d9 \u05d0\u05e0\u05d5\u05e9<\/option>\r\n<option value=\"\u05e9\u05d9\u05d5\u05d5\u05e7\">\u05e9\u05d9\u05d5\u05d5\u05e7<\/option>\r\n<option value=\"\u05de\u05db\u05d9\u05e8\u05d5\u05ea\">\u05de\u05db\u05d9\u05e8\u05d5\u05ea<\/option>\r\n<option value=\"\u05d0\u05d7\u05e8\">\u05d0\u05d7\u05e8<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 *<\/label>\r\n<select id=\"category\" required>\r\n<option value=\"\">-- \u05d1\u05d7\u05e8 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 --<\/option>\r\n<option value=\"\u05d7\u05d5\u05de\u05e8\u05d4\">\u05ea\u05e7\u05dc\u05ea \u05d7\u05d5\u05de\u05e8\u05d4<\/option>\r\n<option value=\"\u05ea\u05d5\u05db\u05e0\u05d4\">\u05ea\u05e7\u05dc\u05ea \u05ea\u05d5\u05db\u05e0\u05d4<\/option>\r\n<option value=\"\u05e8\u05e9\u05ea\">\u05d1\u05e2\u05d9\u05d9\u05ea \u05e8\u05e9\u05ea\/\u05d0\u05d9\u05e0\u05d8\u05e8\u05e0\u05d8<\/option>\r\n<option value=\"\u05d3\u05d5\u05d0\u05f4\u05dc\">\u05d1\u05e2\u05d9\u05d9\u05ea \u05d3\u05d5\u05d0\"\u05dc<\/option>\r\n<option value=\"\u05d4\u05e8\u05e9\u05d0\u05d5\u05ea\">\u05d1\u05e7\u05e9\u05ea \u05d4\u05e8\u05e9\u05d0\u05d5\u05ea<\/option>\r\n<option value=\"\u05e1\u05d9\u05e1\u05de\u05d4\">\u05d0\u05d9\u05e4\u05d5\u05e1 \u05e1\u05d9\u05e1\u05de\u05d4<\/option>\r\n<option value=\"\u05de\u05d3\u05e4\u05e1\u05ea\">\u05d1\u05e2\u05d9\u05d9\u05ea \u05de\u05d3\u05e4\u05e1\u05ea<\/option>\r\n<option value=\"\u05d0\u05d7\u05e8\">\u05d0\u05d7\u05e8<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05e2\u05d3\u05d9\u05e4\u05d5\u05ea *<\/label>\r\n<select id=\"priority\" required>\r\n<option value=\"low\">\u05e0\u05de\u05d5\u05db\u05d4<\/option>\r\n<option value=\"medium\" selected>\u05d1\u05d9\u05e0\u05d5\u05e0\u05d9\u05ea<\/option>\r\n<option value=\"high\">\u05d2\u05d1\u05d5\u05d4\u05d4<\/option>\r\n<option value=\"critical\">\u05e7\u05e8\u05d9\u05d8\u05d9\u05ea<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05db\u05d5\u05ea\u05e8\u05ea *<\/label>\r\n<input type=\"text\" id=\"title\" required placeholder=\"\u05ea\u05d9\u05d0\u05d5\u05e8 \u05e7\u05e6\u05e8 \u05e9\u05dc \u05d4\u05d1\u05e2\u05d9\u05d4\">\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05ea\u05d9\u05d0\u05d5\u05e8 \u05de\u05e4\u05d5\u05e8\u05d8 *<\/label>\r\n<textarea id=\"description\" required placeholder=\"\u05e4\u05e8\u05d8 \u05d0\u05ea \u05d4\u05d1\u05e2\u05d9\u05d4 \u05d1\u05e6\u05d5\u05e8\u05d4 \u05de\u05e4\u05d5\u05e8\u05d8\u05ea...\"><\/textarea>\r\n<\/div>\r\n\r\n<button type=\"submit\" class=\"btn btn-success\" style=\"width: 100%;\">\u2705 \u05e4\u05ea\u05d7 \u05e7\u05e8\u05d9\u05d0\u05d4<\/button>\r\n<\/form>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"modal\" id=\"ticketModal\">\r\n<div class=\"modal-content\">\r\n<div class=\"modal-header\">\r\n<h2 id=\"modalTitle\"><\/h2>\r\n<button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\r\n<\/div>\r\n\r\n<div class=\"ticket-details\" id=\"ticketDetails\"><\/div>\r\n\r\n<div class=\"form-group\" style=\"margin-top: 25px;\">\r\n<label>\u05e2\u05d3\u05db\u05df \u05e1\u05d8\u05d8\u05d5\u05e1<\/label>\r\n<div style=\"display: flex; gap: 10px;\">\r\n<select id=\"updateStatus\" style=\"flex: 1;\">\r\n<option value=\"open\">\u05e4\u05ea\u05d5\u05d7\u05d4<\/option>\r\n<option value=\"progress\">\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc<\/option>\r\n<option value=\"resolved\">\u05e0\u05e4\u05ea\u05e8\u05d4<\/option>\r\n<option value=\"closed\">\u05e1\u05d2\u05d5\u05e8\u05d4<\/option>\r\n<\/select>\r\n<button class=\"btn btn-primary btn-sm\" onclick=\"updateTicketStatus()\">\u05e2\u05d3\u05db\u05df<\/button>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"comments-section\">\r\n<h3 style=\"margin-bottom: 15px; color: #2d3748;\">\u05d4\u05e2\u05e8\u05d5\u05ea \u05d5\u05e2\u05d3\u05db\u05d5\u05e0\u05d9\u05dd<\/h3>\r\n<div id=\"commentsList\"><\/div>\r\n\r\n<div class=\"form-group\" style=\"margin-top: 20px;\">\r\n<textarea id=\"newComment\" placeholder=\"\u05d4\u05d5\u05e1\u05e3 \u05d4\u05e2\u05e8\u05d4 \u05d0\u05d5 \u05e2\u05d3\u05db\u05d5\u05df...\" rows=\"3\"><\/textarea>\r\n<button class=\"btn btn-primary btn-sm\" onclick=\"addComment()\" style=\"margin-top: 10px;\">\ud83d\udcac \u05d4\u05d5\u05e1\u05e3 \u05d4\u05e2\u05e8\u05d4<\/button>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"notification\" id=\"notification\"><\/div>\r\n\r\n<script>\r\nlet tickets = [];\r\nlet currentTicketId = null;\r\nlet ticketCounter = 1000;\r\n\r\nfunction loadData() {\r\nconst saved = localStorage.getItem('itTickets');\r\nif (saved) {\r\nconst data = JSON.parse(saved);\r\ntickets = data.tickets || [];\r\nticketCounter = data.counter || 1000;\r\n}\r\nrenderTickets();\r\nupdateStats();\r\n}\r\n\r\nfunction saveData() {\r\nlocalStorage.setItem('itTickets', JSON.stringify({ tickets, counter: ticketCounter }));\r\n}\r\n\r\nfunction showNotification(message, type = 'success') {\r\nconst notif = document.getElementById('notification');\r\nnotif.textContent = message;\r\nnotif.className = `notification ${type} show`;\r\nsetTimeout(() => notif.classList.remove('show'), 3000);\r\n}\r\n\r\nfunction showNewTicketForm() {\r\ndocument.getElementById('newTicketForm').style.display = 'block';\r\ndocument.getElementById('newTicketForm').scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\nfunction hideNewTicketForm() {\r\ndocument.getElementById('newTicketForm').style.display = 'none';\r\ndocument.querySelector('form').reset();\r\n}\r\n\r\nfunction createTicket(e) {\r\ne.preventDefault();\r\n\r\nconst ticket = {\r\nid: ++ticketCounter,\r\nrequesterName: document.getElementById('requesterName').value,\r\nrequesterEmail: document.getElementById('requesterEmail').value,\r\ndepartment: document.getElementById('department').value,\r\ncategory: document.getElementById('category').value,\r\npriority: document.getElementById('priority').value,\r\ntitle: document.getElementById('title').value,\r\ndescription: document.getElementById('description').value,\r\nstatus: 'open',\r\ncreatedAt: new Date().toISOString(),\r\nupdatedAt: new Date().toISOString(),\r\ncomments: []\r\n};\r\n\r\ntickets.unshift(ticket);\r\nsaveData();\r\nrenderTickets();\r\nupdateStats();\r\nhideNewTicketForm();\r\nshowNotification(`\u2705 \u05e7\u05e8\u05d9\u05d0\u05d4 #${ticket.id} \u05e0\u05e4\u05ea\u05d7\u05d4 \u05d1\u05d4\u05e6\u05dc\u05d7\u05d4`);\r\n}\r\n\r\nfunction renderTickets() {\r\nconst container = document.getElementById('ticketsList');\r\nconst filter = document.querySelector('.filter-btn.active')?.dataset.filter || 'all';\r\nconst searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n\r\nlet filtered = tickets;\r\n\r\nif (filter !== 'all') {\r\nfiltered = tickets.filter(t => t.status === filter);\r\n}\r\n\r\nif (searchTerm) {\r\nfiltered = filtered.filter(t =>\r\nt.id.toString().includes(searchTerm) ||\r\nt.title.toLowerCase().includes(searchTerm) ||\r\nt.requesterName.toLowerCase().includes(searchTerm)\r\n);\r\n}\r\n\r\nif (filtered.length === 0) {\r\ncontainer.innerHTML = `\r\n<div class=\"empty-state\">\r\n<div class=\"empty-state-icon\">\ud83d\udced<\/div>\r\n<p>\u05d0\u05d9\u05df \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea \u05dc\u05d4\u05e6\u05d2\u05d4<\/p>\r\n<\/div>\r\n`;\r\nreturn;\r\n}\r\n\r\ncontainer.innerHTML = filtered.map(ticket => `\r\n<div class=\"ticket-card priority-${ticket.priority}\" onclick=\"showTicketDetails(${ticket.id})\">\r\n<div class=\"ticket-header\">\r\n<span class=\"ticket-id\">#${ticket.id}<\/span>\r\n<span class=\"ticket-status status-${ticket.status}\">${getStatusText(ticket.status)}<\/span>\r\n<\/div>\r\n<div class=\"ticket-title\">${ticket.title}<\/div>\r\n<div class=\"ticket-meta\">\r\n<span>\ud83d\udc64 ${ticket.requesterName}<\/span>\r\n<span>\ud83d\udcc1 ${ticket.category}<\/span>\r\n<span class=\"priority-badge priority-${ticket.priority}\">${getPriorityText(ticket.priority)}<\/span>\r\n<span>\ud83d\udd50 ${formatDate(ticket.createdAt)}<\/span>\r\n<\/div>\r\n<\/div>\r\n`).join('');\r\n}\r\n\r\nfunction getStatusText(status) {\r\nconst texts = {\r\nopen: '\u05e4\u05ea\u05d5\u05d7\u05d4',\r\nprogress: '\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc',\r\nresolved: '\u05e0\u05e4\u05ea\u05e8\u05d4',\r\nclosed: '\u05e1\u05d2\u05d5\u05e8\u05d4'\r\n};\r\nreturn texts[status] || status;\r\n}\r\n\r\nfunction getPriorityText(priority) {\r\nconst texts = {\r\nlow: '\u05e0\u05de\u05d5\u05db\u05d4',\r\nmedium: '\u05d1\u05d9\u05e0\u05d5\u05e0\u05d9\u05ea',\r\nhigh: '\u05d2\u05d1\u05d5\u05d4\u05d4',\r\ncritical: '\u05e7\u05e8\u05d9\u05d8\u05d9\u05ea'\r\n};\r\nreturn texts[priority] || priority;\r\n}\r\n\r\nfunction formatDate(dateString) {\r\nconst date = new Date(dateString);\r\nconst now = new Date();\r\nconst diff = now - date;\r\nconst minutes = Math.floor(diff \/ 60000);\r\nconst hours = Math.floor(diff \/ 3600000);\r\nconst days = Math.floor(diff \/ 86400000);\r\n\r\nif (minutes < 60) return `\u05dc\u05e4\u05e0\u05d9 ${minutes} \u05d3\u05e7\u05d5\u05ea`;\r\nif (hours < 24) return `\u05dc\u05e4\u05e0\u05d9 ${hours} \u05e9\u05e2\u05d5\u05ea`;\r\nif (days < 7) return `\u05dc\u05e4\u05e0\u05d9 ${days} \u05d9\u05de\u05d9\u05dd`;\r\nreturn date.toLocaleDateString('he-IL');\r\n}\r\n\r\nfunction showTicketDetails(ticketId) {\r\nconst ticket = tickets.find(t => t.id === ticketId);\r\nif (!ticket) return;\r\n\r\ncurrentTicketId = ticketId;\r\ndocument.getElementById('modalTitle').textContent = `\u05e7\u05e8\u05d9\u05d0\u05d4 #${ticket.id} - ${ticket.title}`;\r\ndocument.getElementById('updateStatus').value = ticket.status;\r\n\r\nconst details = `\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e1\u05d8\u05d8\u05d5\u05e1:<\/div><div class=\"detail-value\"><span class=\"ticket-status status-${ticket.status}\">${getStatusText(ticket.status)}<\/span><\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e4\u05d5\u05ea\u05d7:<\/div><div class=\"detail-value\">${ticket.requesterName}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05d3\u05d5\u05d0\"\u05dc:<\/div><div class=\"detail-value\">${ticket.requesterEmail}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05de\u05d7\u05dc\u05e7\u05d4:<\/div><div class=\"detail-value\">${ticket.department}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4:<\/div><div class=\"detail-value\">${ticket.category}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e2\u05d3\u05d9\u05e4\u05d5\u05ea:<\/div><div class=\"detail-value\"><span class=\"priority-badge priority-${ticket.priority}\">${getPriorityText(ticket.priority)}<\/span><\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e0\u05e4\u05ea\u05d7:<\/div><div class=\"detail-value\">${new Date(ticket.createdAt).toLocaleString('he-IL')}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e2\u05d5\u05d3\u05db\u05df:<\/div><div class=\"detail-value\">${new Date(ticket.updatedAt).toLocaleString('he-IL')}<\/div><\/div>\r\n<div class=\"detail-row\" style=\"grid-template-columns: 1fr;\"><div class=\"detail-label\">\u05ea\u05d9\u05d0\u05d5\u05e8:<\/div><div class=\"detail-value\" style=\"white-space: pre-wrap; margin-top: 8px;\">${ticket.description}<\/div><\/div>\r\n`;\r\n\r\ndocument.getElementById('ticketDetails').innerHTML = details;\r\nrenderComments(ticket.comments);\r\ndocument.getElementById('ticketModal').classList.add('active');\r\n}\r\n\r\nfunction renderComments(comments) {\r\nconst container = document.getElementById('commentsList');\r\nif (!comments || comments.length === 0) {\r\ncontainer.innerHTML = '<p style=\"color: #a0aec0; text-align: center;\">\u05d0\u05d9\u05df \u05d4\u05e2\u05e8\u05d5\u05ea<\/p>';\r\nreturn;\r\n}\r\n\r\ncontainer.innerHTML = comments.map(c => `\r\n<div class=\"comment\">\r\n<div class=\"comment-header\">\r\n<span class=\"comment-author\">${c.author}<\/span>\r\n<span class=\"comment-date\">${new Date(c.date).toLocaleString('he-IL')}<\/span>\r\n<\/div>\r\n<div class=\"comment-text\">${c.text}<\/div>\r\n<\/div>\r\n`).join('');\r\n}\r\n\r\nfunction addComment() {\r\nconst text = document.getElementById('newComment').value.trim();\r\nif (!text) return;\r\n\r\nconst ticket = tickets.find(t => t.id === currentTicketId);\r\nif (!ticket) return;\r\n\r\nticket.comments.push({\r\nauthor: '\u05d8\u05db\u05e0\u05d0\u05d9 IT',\r\ndate: new Date().toISOString(),\r\ntext: text\r\n});\r\n\r\nticket.updatedAt = new Date().toISOString();\r\nsaveData();\r\nrenderComments(ticket.comments);\r\ndocument.getElementById('newComment').value = '';\r\nshowNotification('\ud83d\udcac \u05d4\u05e2\u05e8\u05d4 \u05e0\u05d5\u05e1\u05e4\u05d4');\r\n}\r\n\r\nfunction updateTicketStatus() {\r\nconst newStatus = document.getElementById('updateStatus').value;\r\nconst ticket = tickets.find(t => t.id === currentTicketId);\r\nif (!ticket) return;\r\n\r\nticket.status = newStatus;\r\nticket.updatedAt = new Date().toISOString();\r\nsaveData();\r\nrenderTickets();\r\nupdateStats();\r\nshowTicketDetails(currentTicketId);\r\nshowNotification(`\u2705 \u05d4\u05e1\u05d8\u05d8\u05d5\u05e1 \u05e2\u05d5\u05d3\u05db\u05df \u05dc-${getStatusText(newStatus)}`);\r\n}\r\n\r\nfunction closeModal() {\r\ndocument.getElementById('ticketModal').classList.remove('active');\r\ncurrentTicketId = null;\r\n}\r\n\r\nfunction filterTickets(filter) {\r\ndocument.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));\r\ndocument.querySelector(`.filter-btn[data-filter=\"${filter}\"]`).classList.add('active');\r\nrenderTickets();\r\n}\r\n\r\nfunction filterByStatus(status) {\r\nfilterTickets(status);\r\ndocument.getElementById('ticketsList').scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\nfunction searchTickets() {\r\nrenderTickets();\r\n}\r\n\r\nfunction updateStats() {\r\nconst stats = {\r\nopen: tickets.filter(t => t.status === 'open').length,\r\nprogress: tickets.filter(t => t.status === 'progress').length,\r\nresolved: tickets.filter(t => t.status === 'resolved').length,\r\nclosed: tickets.filter(t => t.status === 'closed').length\r\n};\r\n\r\ndocument.getElementById('statOpen').textContent = stats.open;\r\ndocument.getElementById('statProgress').textContent = stats.progress;\r\ndocument.getElementById('statResolved').textContent = stats.resolved;\r\ndocument.getElementById('statClosed').textContent = stats.closed;\r\n}\r\n\r\n\/\/ \u05d8\u05e2\u05d9\u05e0\u05d4 \u05e8\u05d0\u05e9\u05d5\u05e0\u05d9\u05ea\r\nloadData();\r\n\r\n\/\/ \u05e1\u05d2\u05d9\u05e8\u05ea modal \u05d1\u05dc\u05d7\u05d9\u05e6\u05d4 \u05de\u05d7\u05d5\u05e5 \u05dc\u05ea\u05d5\u05db\u05df\r\ndocument.getElementById('ticketModal').addEventListener('click', function(e) {\r\nif (e.target === this) closeModal();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>\u05de\u05e2\u05e8\u05db\u05ea \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT \ud83c\udfab \u05de\u05e2\u05e8\u05db\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT \u05e0\u05d9\u05d4\u05d5\u05dc \u05d5\u05d8\u05d9\u05e4\u05d5\u05dc \u05d1\u05e4\u05e0\u05d9\u05d5\u05ea \u05de\u05e9\u05ea\u05de\u05e9\u05d9\u05dd \u05d5\u05ea\u05e7\u05dc\u05d5\u05ea \u05d8\u05db\u05e0\u05d9\u05d5\u05ea 0 \u05e4\u05ea\u05d5\u05d7\u05d5\u05ea 0 \u05d1\u05d8\u05d9\u05e4\u05d5\u05dc […]<\/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":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-94","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=94"}],"version-history":[{"count":4,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages\/94\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\u05de\u05e2\u05e8\u05db\u05ea \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT<\/title>\r\n<style>\r\n* { margin: 0; padding: 0; box-sizing: border-box; }\r\nbody { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; }\r\n.container { max-width: 1400px; margin: 0 auto; }\r\n.header { background: white; padding: 25px; border-radius: 15px; margin-bottom: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\r\n.header h1 { font-size: 28px; color: #2d3748; margin-bottom: 5px; }\r\n.header p { color: #718096; font-size: 14px; }\r\n.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 25px; }\r\n.stat-card { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s; cursor: pointer; }\r\n.stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }\r\n.stat-number { font-size: 36px; font-weight: bold; margin-bottom: 8px; }\r\n.stat-label { color: #718096; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }\r\n.stat-card.open .stat-number { color: #e53e3e; }\r\n.stat-card.progress .stat-number { color: #dd6b20; }\r\n.stat-card.resolved .stat-number { color: #38a169; }\r\n.stat-card.closed .stat-number { color: #4299e1; }\r\n.main-content { display: grid; grid-template-columns: 1fr 400px; gap: 25px; }\r\n.tickets-section, .form-section { background: white; padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\r\n.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e2e8f0; }\r\n.section-title { font-size: 20px; font-weight: bold; color: #2d3748; }\r\n.btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: all 0.3s; }\r\n.btn-primary { background: #667eea; color: white; }\r\n.btn-primary:hover { background: #5a67d8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }\r\n.btn-success { background: #48bb78; color: white; }\r\n.btn-danger { background: #f56565; color: white; }\r\n.btn-secondary { background: #cbd5e0; color: #2d3748; }\r\n.btn-sm { padding: 6px 12px; font-size: 12px; }\r\n.form-group { margin-bottom: 18px; }\r\n.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #4a5568; font-size: 14px; }\r\n.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; transition: border 0.3s; }\r\n.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: #667eea; }\r\n.form-group textarea { resize: vertical; min-height: 100px; }\r\n.ticket-card { background: #f7fafc; padding: 18px; border-radius: 10px; margin-bottom: 15px; border-right: 4px solid #cbd5e0; transition: all 0.3s; cursor: pointer; }\r\n.ticket-card:hover { transform: translateX(-5px); box-shadow: 0 4px 15px rgba(0,0,0,0.1); }\r\n.ticket-card.priority-low { border-right-color: #48bb78; }\r\n.ticket-card.priority-medium { border-right-color: #ed8936; }\r\n.ticket-card.priority-high { border-right-color: #f56565; }\r\n.ticket-card.priority-critical { border-right-color: #9f1239; background: #fef2f2; }\r\n.ticket-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }\r\n.ticket-id { font-weight: bold; color: #667eea; font-size: 14px; }\r\n.ticket-status { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; }\r\n.status-open { background: #fed7d7; color: #c53030; }\r\n.status-progress { background: #feebc8; color: #c05621; }\r\n.status-resolved { background: #c6f6d5; color: #22543d; }\r\n.status-closed { background: #bee3f8; color: #2c5282; }\r\n.ticket-title { font-size: 16px; font-weight: 600; color: #2d3748; margin-bottom: 8px; }\r\n.ticket-meta { display: flex; gap: 15px; font-size: 13px; color: #718096; flex-wrap: wrap; }\r\n.ticket-meta span { display: flex; align-items: center; gap: 5px; }\r\n.priority-badge { padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }\r\n.priority-low { background: #c6f6d5; color: #22543d; }\r\n.priority-medium { background: #feebc8; color: #c05621; }\r\n.priority-high { background: #fed7d7; color: #c53030; }\r\n.priority-critical { background: #fce7f3; color: #9f1239; }\r\n.filters { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }\r\n.filter-btn { padding: 8px 16px; border: 2px solid #e2e8f0; background: white; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.3s; }\r\n.filter-btn:hover { border-color: #667eea; color: #667eea; }\r\n.filter-btn.active { background: #667eea; color: white; border-color: #667eea; }\r\n.empty-state { text-align: center; padding: 60px 20px; color: #a0aec0; }\r\n.empty-state-icon { font-size: 64px; margin-bottom: 20px; }\r\n.modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 1000; align-items: center; justify-content: center; }\r\n.modal.active { display: flex; }\r\n.modal-content { background: white; border-radius: 15px; padding: 30px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto; }\r\n.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e2e8f0; }\r\n.modal-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #a0aec0; line-height: 1; }\r\n.modal-close:hover { color: #2d3748; }\r\n.ticket-details { margin-top: 20px; }\r\n.detail-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }\r\n.detail-label { font-weight: 600; color: #4a5568; }\r\n.detail-value { color: #2d3748; }\r\n.comments-section { margin-top: 25px; }\r\n.comment { background: #f7fafc; padding: 15px; border-radius: 8px; margin-bottom: 12px; }\r\n.comment-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }\r\n.comment-author { font-weight: 600; color: #667eea; }\r\n.comment-date { color: #a0aec0; }\r\n.comment-text { color: #4a5568; line-height: 1.6; }\r\n.search-box { margin-bottom: 20px; }\r\n.search-box input { width: 100%; padding: 12px 40px 12px 12px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; }\r\n.notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: white; padding: 16px 24px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); z-index: 2000; display: none; animation: slideDown 0.3s ease; }\r\n.notification.show { display: block; }\r\n.notification.success { border-right: 4px solid #48bb78; }\r\n.notification.error { border-right: 4px solid #f56565; }\r\n@keyframes slideDown { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }\r\n@media (max-width: 1024px) { .main-content { grid-template-columns: 1fr; } .form-section { order: -1; } }\r\n@media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n<div class=\"header\">\r\n<h1>\ud83c\udfab \u05de\u05e2\u05e8\u05db\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT<\/h1>\r\n<p>\u05e0\u05d9\u05d4\u05d5\u05dc \u05d5\u05d8\u05d9\u05e4\u05d5\u05dc \u05d1\u05e4\u05e0\u05d9\u05d5\u05ea \u05de\u05e9\u05ea\u05de\u05e9\u05d9\u05dd \u05d5\u05ea\u05e7\u05dc\u05d5\u05ea \u05d8\u05db\u05e0\u05d9\u05d5\u05ea<\/p>\r\n<\/div>\r\n\r\n<div class=\"stats-row\">\r\n<div class=\"stat-card open\" onclick=\"filterByStatus('open')\">\r\n<div class=\"stat-number\" id=\"statOpen\">0<\/div>\r\n<div class=\"stat-label\">\u05e4\u05ea\u05d5\u05d7\u05d5\u05ea<\/div>\r\n<\/div>\r\n<div class=\"stat-card progress\" onclick=\"filterByStatus('progress')\">\r\n<div class=\"stat-number\" id=\"statProgress\">0<\/div>\r\n<div class=\"stat-label\">\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc<\/div>\r\n<\/div>\r\n<div class=\"stat-card resolved\" onclick=\"filterByStatus('resolved')\">\r\n<div class=\"stat-number\" id=\"statResolved\">0<\/div>\r\n<div class=\"stat-label\">\u05e0\u05e4\u05ea\u05e8\u05d5<\/div>\r\n<\/div>\r\n<div class=\"stat-card closed\" onclick=\"filterByStatus('closed')\">\r\n<div class=\"stat-number\" id=\"statClosed\">0<\/div>\r\n<div class=\"stat-label\">\u05e1\u05d2\u05d5\u05e8\u05d5\u05ea<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"main-content\">\r\n<div class=\"tickets-section\">\r\n<div class=\"section-header\">\r\n<h2 class=\"section-title\">\u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea<\/h2>\r\n<button class=\"btn btn-primary\" onclick=\"showNewTicketForm()\">\u2795 \u05e7\u05e8\u05d9\u05d0\u05d4 \u05d7\u05d3\u05e9\u05d4<\/button>\r\n<\/div>\r\n\r\n<div class=\"search-box\">\r\n<input type=\"text\" id=\"searchInput\" placeholder=\"\ud83d\udd0d \u05d7\u05d9\u05e4\u05d5\u05e9 \u05dc\u05e4\u05d9 \u05de\u05e1\u05e4\u05e8, \u05db\u05d5\u05ea\u05e8\u05ea \u05d0\u05d5 \u05e4\u05d5\u05ea\u05d7...\" oninput=\"searchTickets()\">\r\n<\/div>\r\n\r\n<div class=\"filters\">\r\n<button class=\"filter-btn active\" data-filter=\"all\" onclick=\"filterTickets('all')\">\u05d4\u05db\u05dc<\/button>\r\n<button class=\"filter-btn\" data-filter=\"open\" onclick=\"filterTickets('open')\">\u05e4\u05ea\u05d5\u05d7\u05d5\u05ea<\/button>\r\n<button class=\"filter-btn\" data-filter=\"progress\" onclick=\"filterTickets('progress')\">\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc<\/button>\r\n<button class=\"filter-btn\" data-filter=\"resolved\" onclick=\"filterTickets('resolved')\">\u05e0\u05e4\u05ea\u05e8\u05d5<\/button>\r\n<button class=\"filter-btn\" data-filter=\"closed\" onclick=\"filterTickets('closed')\">\u05e1\u05d2\u05d5\u05e8\u05d5\u05ea<\/button>\r\n<\/div>\r\n\r\n<div id=\"ticketsList\"><\/div>\r\n<\/div>\r\n\r\n<div class=\"form-section\" id=\"newTicketForm\" style=\"display:none;\">\r\n<div class=\"section-header\">\r\n<h2 class=\"section-title\">\u05e7\u05e8\u05d9\u05d0\u05d4 \u05d7\u05d3\u05e9\u05d4<\/h2>\r\n<button class=\"btn btn-secondary btn-sm\" onclick=\"hideNewTicketForm()\">\u2715 \u05e1\u05d2\u05d5\u05e8<\/button>\r\n<\/div>\r\n\r\n<form onsubmit=\"createTicket(event)\">\r\n<div class=\"form-group\">\r\n<label>\u05e9\u05dd \u05d4\u05e4\u05d5\u05ea\u05d7 *<\/label>\r\n<input type=\"text\" id=\"requesterName\" required>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05d3\u05d5\u05d0\"\u05dc *<\/label>\r\n<input type=\"email\" id=\"requesterEmail\" required>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05de\u05d7\u05dc\u05e7\u05d4<\/label>\r\n<select id=\"department\">\r\n<option value=\"IT\">IT<\/option>\r\n<option value=\"\u05db\u05e1\u05e4\u05d9\u05dd\">\u05db\u05e1\u05e4\u05d9\u05dd<\/option>\r\n<option value=\"\u05de\u05e9\u05d0\u05d1\u05d9 \u05d0\u05e0\u05d5\u05e9\">\u05de\u05e9\u05d0\u05d1\u05d9 \u05d0\u05e0\u05d5\u05e9<\/option>\r\n<option value=\"\u05e9\u05d9\u05d5\u05d5\u05e7\">\u05e9\u05d9\u05d5\u05d5\u05e7<\/option>\r\n<option value=\"\u05de\u05db\u05d9\u05e8\u05d5\u05ea\">\u05de\u05db\u05d9\u05e8\u05d5\u05ea<\/option>\r\n<option value=\"\u05d0\u05d7\u05e8\">\u05d0\u05d7\u05e8<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 *<\/label>\r\n<select id=\"category\" required>\r\n<option value=\"\">-- \u05d1\u05d7\u05e8 \u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4 --<\/option>\r\n<option value=\"\u05d7\u05d5\u05de\u05e8\u05d4\">\u05ea\u05e7\u05dc\u05ea \u05d7\u05d5\u05de\u05e8\u05d4<\/option>\r\n<option value=\"\u05ea\u05d5\u05db\u05e0\u05d4\">\u05ea\u05e7\u05dc\u05ea \u05ea\u05d5\u05db\u05e0\u05d4<\/option>\r\n<option value=\"\u05e8\u05e9\u05ea\">\u05d1\u05e2\u05d9\u05d9\u05ea \u05e8\u05e9\u05ea\/\u05d0\u05d9\u05e0\u05d8\u05e8\u05e0\u05d8<\/option>\r\n<option value=\"\u05d3\u05d5\u05d0\u05f4\u05dc\">\u05d1\u05e2\u05d9\u05d9\u05ea \u05d3\u05d5\u05d0\"\u05dc<\/option>\r\n<option value=\"\u05d4\u05e8\u05e9\u05d0\u05d5\u05ea\">\u05d1\u05e7\u05e9\u05ea \u05d4\u05e8\u05e9\u05d0\u05d5\u05ea<\/option>\r\n<option value=\"\u05e1\u05d9\u05e1\u05de\u05d4\">\u05d0\u05d9\u05e4\u05d5\u05e1 \u05e1\u05d9\u05e1\u05de\u05d4<\/option>\r\n<option value=\"\u05de\u05d3\u05e4\u05e1\u05ea\">\u05d1\u05e2\u05d9\u05d9\u05ea \u05de\u05d3\u05e4\u05e1\u05ea<\/option>\r\n<option value=\"\u05d0\u05d7\u05e8\">\u05d0\u05d7\u05e8<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05e2\u05d3\u05d9\u05e4\u05d5\u05ea *<\/label>\r\n<select id=\"priority\" required>\r\n<option value=\"low\">\u05e0\u05de\u05d5\u05db\u05d4<\/option>\r\n<option value=\"medium\" selected>\u05d1\u05d9\u05e0\u05d5\u05e0\u05d9\u05ea<\/option>\r\n<option value=\"high\">\u05d2\u05d1\u05d5\u05d4\u05d4<\/option>\r\n<option value=\"critical\">\u05e7\u05e8\u05d9\u05d8\u05d9\u05ea<\/option>\r\n<\/select>\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05db\u05d5\u05ea\u05e8\u05ea *<\/label>\r\n<input type=\"text\" id=\"title\" required placeholder=\"\u05ea\u05d9\u05d0\u05d5\u05e8 \u05e7\u05e6\u05e8 \u05e9\u05dc \u05d4\u05d1\u05e2\u05d9\u05d4\">\r\n<\/div>\r\n\r\n<div class=\"form-group\">\r\n<label>\u05ea\u05d9\u05d0\u05d5\u05e8 \u05de\u05e4\u05d5\u05e8\u05d8 *<\/label>\r\n<textarea id=\"description\" required placeholder=\"\u05e4\u05e8\u05d8 \u05d0\u05ea \u05d4\u05d1\u05e2\u05d9\u05d4 \u05d1\u05e6\u05d5\u05e8\u05d4 \u05de\u05e4\u05d5\u05e8\u05d8\u05ea...\"><\/textarea>\r\n<\/div>\r\n\r\n<button type=\"submit\" class=\"btn btn-success\" style=\"width: 100%;\">\u2705 \u05e4\u05ea\u05d7 \u05e7\u05e8\u05d9\u05d0\u05d4<\/button>\r\n<\/form>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n<div class=\"modal\" id=\"ticketModal\">\r\n<div class=\"modal-content\">\r\n<div class=\"modal-header\">\r\n<h2 id=\"modalTitle\"><\/h2>\r\n<button class=\"modal-close\" onclick=\"closeModal()\">\u00d7<\/button>\r\n<\/div>\r\n\r\n<div class=\"ticket-details\" id=\"ticketDetails\"><\/div>\r\n\r\n<div class=\"form-group\" style=\"margin-top: 25px;\">\r\n<label>\u05e2\u05d3\u05db\u05df \u05e1\u05d8\u05d8\u05d5\u05e1<\/label>\r\n<div style=\"display: flex; gap: 10px;\">\r\n<select id=\"updateStatus\" style=\"flex: 1;\">\r\n<option value=\"open\">\u05e4\u05ea\u05d5\u05d7\u05d4<\/option>\r\n<option value=\"progress\">\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc<\/option>\r\n<option value=\"resolved\">\u05e0\u05e4\u05ea\u05e8\u05d4<\/option>\r\n<option value=\"closed\">\u05e1\u05d2\u05d5\u05e8\u05d4<\/option>\r\n<\/select>\r\n<button class=\"btn btn-primary btn-sm\" onclick=\"updateTicketStatus()\">\u05e2\u05d3\u05db\u05df<\/button>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"comments-section\">\r\n<h3 style=\"margin-bottom: 15px; color: #2d3748;\">\u05d4\u05e2\u05e8\u05d5\u05ea \u05d5\u05e2\u05d3\u05db\u05d5\u05e0\u05d9\u05dd<\/h3>\r\n<div id=\"commentsList\"><\/div>\r\n\r\n<div class=\"form-group\" style=\"margin-top: 20px;\">\r\n<textarea id=\"newComment\" placeholder=\"\u05d4\u05d5\u05e1\u05e3 \u05d4\u05e2\u05e8\u05d4 \u05d0\u05d5 \u05e2\u05d3\u05db\u05d5\u05df...\" rows=\"3\"><\/textarea>\r\n<button class=\"btn btn-primary btn-sm\" onclick=\"addComment()\" style=\"margin-top: 10px;\">\ud83d\udcac \u05d4\u05d5\u05e1\u05e3 \u05d4\u05e2\u05e8\u05d4<\/button>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<div class=\"notification\" id=\"notification\"><\/div>\r\n\r\n<script>\r\nlet tickets = [];\r\nlet currentTicketId = null;\r\nlet ticketCounter = 1000;\r\n\r\nfunction loadData() {\r\nconst saved = localStorage.getItem('itTickets');\r\nif (saved) {\r\nconst data = JSON.parse(saved);\r\ntickets = data.tickets || [];\r\nticketCounter = data.counter || 1000;\r\n}\r\nrenderTickets();\r\nupdateStats();\r\n}\r\n\r\nfunction saveData() {\r\nlocalStorage.setItem('itTickets', JSON.stringify({ tickets, counter: ticketCounter }));\r\n}\r\n\r\nfunction showNotification(message, type = 'success') {\r\nconst notif = document.getElementById('notification');\r\nnotif.textContent = message;\r\nnotif.className = `notification ${type} show`;\r\nsetTimeout(() => notif.classList.remove('show'), 3000);\r\n}\r\n\r\nfunction showNewTicketForm() {\r\ndocument.getElementById('newTicketForm').style.display = 'block';\r\ndocument.getElementById('newTicketForm').scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\nfunction hideNewTicketForm() {\r\ndocument.getElementById('newTicketForm').style.display = 'none';\r\ndocument.querySelector('form').reset();\r\n}\r\n\r\nfunction createTicket(e) {\r\ne.preventDefault();\r\n\r\nconst ticket = {\r\nid: ++ticketCounter,\r\nrequesterName: document.getElementById('requesterName').value,\r\nrequesterEmail: document.getElementById('requesterEmail').value,\r\ndepartment: document.getElementById('department').value,\r\ncategory: document.getElementById('category').value,\r\npriority: document.getElementById('priority').value,\r\ntitle: document.getElementById('title').value,\r\ndescription: document.getElementById('description').value,\r\nstatus: 'open',\r\ncreatedAt: new Date().toISOString(),\r\nupdatedAt: new Date().toISOString(),\r\ncomments: []\r\n};\r\n\r\ntickets.unshift(ticket);\r\nsaveData();\r\nrenderTickets();\r\nupdateStats();\r\nhideNewTicketForm();\r\nshowNotification(`\u2705 \u05e7\u05e8\u05d9\u05d0\u05d4 #${ticket.id} \u05e0\u05e4\u05ea\u05d7\u05d4 \u05d1\u05d4\u05e6\u05dc\u05d7\u05d4`);\r\n}\r\n\r\nfunction renderTickets() {\r\nconst container = document.getElementById('ticketsList');\r\nconst filter = document.querySelector('.filter-btn.active')?.dataset.filter || 'all';\r\nconst searchTerm = document.getElementById('searchInput').value.toLowerCase();\r\n\r\nlet filtered = tickets;\r\n\r\nif (filter !== 'all') {\r\nfiltered = tickets.filter(t => t.status === filter);\r\n}\r\n\r\nif (searchTerm) {\r\nfiltered = filtered.filter(t =>\r\nt.id.toString().includes(searchTerm) ||\r\nt.title.toLowerCase().includes(searchTerm) ||\r\nt.requesterName.toLowerCase().includes(searchTerm)\r\n);\r\n}\r\n\r\nif (filtered.length === 0) {\r\ncontainer.innerHTML = `\r\n<div class=\"empty-state\">\r\n<div class=\"empty-state-icon\">\ud83d\udced<\/div>\r\n<p>\u05d0\u05d9\u05df \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea \u05dc\u05d4\u05e6\u05d2\u05d4<\/p>\r\n<\/div>\r\n`;\r\nreturn;\r\n}\r\n\r\ncontainer.innerHTML = filtered.map(ticket => `\r\n<div class=\"ticket-card priority-${ticket.priority}\" onclick=\"showTicketDetails(${ticket.id})\">\r\n<div class=\"ticket-header\">\r\n<span class=\"ticket-id\">#${ticket.id}<\/span>\r\n<span class=\"ticket-status status-${ticket.status}\">${getStatusText(ticket.status)}<\/span>\r\n<\/div>\r\n<div class=\"ticket-title\">${ticket.title}<\/div>\r\n<div class=\"ticket-meta\">\r\n<span>\ud83d\udc64 ${ticket.requesterName}<\/span>\r\n<span>\ud83d\udcc1 ${ticket.category}<\/span>\r\n<span class=\"priority-badge priority-${ticket.priority}\">${getPriorityText(ticket.priority)}<\/span>\r\n<span>\ud83d\udd50 ${formatDate(ticket.createdAt)}<\/span>\r\n<\/div>\r\n<\/div>\r\n`).join('');\r\n}\r\n\r\nfunction getStatusText(status) {\r\nconst texts = {\r\nopen: '\u05e4\u05ea\u05d5\u05d7\u05d4',\r\nprogress: '\u05d1\u05d8\u05d9\u05e4\u05d5\u05dc',\r\nresolved: '\u05e0\u05e4\u05ea\u05e8\u05d4',\r\nclosed: '\u05e1\u05d2\u05d5\u05e8\u05d4'\r\n};\r\nreturn texts[status] || status;\r\n}\r\n\r\nfunction getPriorityText(priority) {\r\nconst texts = {\r\nlow: '\u05e0\u05de\u05d5\u05db\u05d4',\r\nmedium: '\u05d1\u05d9\u05e0\u05d5\u05e0\u05d9\u05ea',\r\nhigh: '\u05d2\u05d1\u05d5\u05d4\u05d4',\r\ncritical: '\u05e7\u05e8\u05d9\u05d8\u05d9\u05ea'\r\n};\r\nreturn texts[priority] || priority;\r\n}\r\n\r\nfunction formatDate(dateString) {\r\nconst date = new Date(dateString);\r\nconst now = new Date();\r\nconst diff = now - date;\r\nconst minutes = Math.floor(diff \/ 60000);\r\nconst hours = Math.floor(diff \/ 3600000);\r\nconst days = Math.floor(diff \/ 86400000);\r\n\r\nif (minutes < 60) return `\u05dc\u05e4\u05e0\u05d9 ${minutes} \u05d3\u05e7\u05d5\u05ea`;\r\nif (hours < 24) return `\u05dc\u05e4\u05e0\u05d9 ${hours} \u05e9\u05e2\u05d5\u05ea`;\r\nif (days < 7) return `\u05dc\u05e4\u05e0\u05d9 ${days} \u05d9\u05de\u05d9\u05dd`;\r\nreturn date.toLocaleDateString('he-IL');\r\n}\r\n\r\nfunction showTicketDetails(ticketId) {\r\nconst ticket = tickets.find(t => t.id === ticketId);\r\nif (!ticket) return;\r\n\r\ncurrentTicketId = ticketId;\r\ndocument.getElementById('modalTitle').textContent = `\u05e7\u05e8\u05d9\u05d0\u05d4 #${ticket.id} - ${ticket.title}`;\r\ndocument.getElementById('updateStatus').value = ticket.status;\r\n\r\nconst details = `\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e1\u05d8\u05d8\u05d5\u05e1:<\/div><div class=\"detail-value\"><span class=\"ticket-status status-${ticket.status}\">${getStatusText(ticket.status)}<\/span><\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e4\u05d5\u05ea\u05d7:<\/div><div class=\"detail-value\">${ticket.requesterName}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05d3\u05d5\u05d0\"\u05dc:<\/div><div class=\"detail-value\">${ticket.requesterEmail}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05de\u05d7\u05dc\u05e7\u05d4:<\/div><div class=\"detail-value\">${ticket.department}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e7\u05d8\u05d2\u05d5\u05e8\u05d9\u05d4:<\/div><div class=\"detail-value\">${ticket.category}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e2\u05d3\u05d9\u05e4\u05d5\u05ea:<\/div><div class=\"detail-value\"><span class=\"priority-badge priority-${ticket.priority}\">${getPriorityText(ticket.priority)}<\/span><\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e0\u05e4\u05ea\u05d7:<\/div><div class=\"detail-value\">${new Date(ticket.createdAt).toLocaleString('he-IL')}<\/div><\/div>\r\n<div class=\"detail-row\"><div class=\"detail-label\">\u05e2\u05d5\u05d3\u05db\u05df:<\/div><div class=\"detail-value\">${new Date(ticket.updatedAt).toLocaleString('he-IL')}<\/div><\/div>\r\n<div class=\"detail-row\" style=\"grid-template-columns: 1fr;\"><div class=\"detail-label\">\u05ea\u05d9\u05d0\u05d5\u05e8:<\/div><div class=\"detail-value\" style=\"white-space: pre-wrap; margin-top: 8px;\">${ticket.description}<\/div><\/div>\r\n`;\r\n\r\ndocument.getElementById('ticketDetails').innerHTML = details;\r\nrenderComments(ticket.comments);\r\ndocument.getElementById('ticketModal').classList.add('active');\r\n}\r\n\r\nfunction renderComments(comments) {\r\nconst container = document.getElementById('commentsList');\r\nif (!comments || comments.length === 0) {\r\ncontainer.innerHTML = '<p style=\"color: #a0aec0; text-align: center;\">\u05d0\u05d9\u05df \u05d4\u05e2\u05e8\u05d5\u05ea<\/p>';\r\nreturn;\r\n}\r\n\r\ncontainer.innerHTML = comments.map(c => `\r\n<div class=\"comment\">\r\n<div class=\"comment-header\">\r\n<span class=\"comment-author\">${c.author}<\/span>\r\n<span class=\"comment-date\">${new Date(c.date).toLocaleString('he-IL')}<\/span>\r\n<\/div>\r\n<div class=\"comment-text\">${c.text}<\/div>\r\n<\/div>\r\n`).join('');\r\n}\r\n\r\nfunction addComment() {\r\nconst text = document.getElementById('newComment').value.trim();\r\nif (!text) return;\r\n\r\nconst ticket = tickets.find(t => t.id === currentTicketId);\r\nif (!ticket) return;\r\n\r\nticket.comments.push({\r\nauthor: '\u05d8\u05db\u05e0\u05d0\u05d9 IT',\r\ndate: new Date().toISOString(),\r\ntext: text\r\n});\r\n\r\nticket.updatedAt = new Date().toISOString();\r\nsaveData();\r\nrenderComments(ticket.comments);\r\ndocument.getElementById('newComment').value = '';\r\nshowNotification('\ud83d\udcac \u05d4\u05e2\u05e8\u05d4 \u05e0\u05d5\u05e1\u05e4\u05d4');\r\n}\r\n\r\nfunction updateTicketStatus() {\r\nconst newStatus = document.getElementById('updateStatus').value;\r\nconst ticket = tickets.find(t => t.id === currentTicketId);\r\nif (!ticket) return;\r\n\r\nticket.status = newStatus;\r\nticket.updatedAt = new Date().toISOString();\r\nsaveData();\r\nrenderTickets();\r\nupdateStats();\r\nshowTicketDetails(currentTicketId);\r\nshowNotification(`\u2705 \u05d4\u05e1\u05d8\u05d8\u05d5\u05e1 \u05e2\u05d5\u05d3\u05db\u05df \u05dc-${getStatusText(newStatus)}`);\r\n}\r\n\r\nfunction closeModal() {\r\ndocument.getElementById('ticketModal').classList.remove('active');\r\ncurrentTicketId = null;\r\n}\r\n\r\nfunction filterTickets(filter) {\r\ndocument.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));\r\ndocument.querySelector(`.filter-btn[data-filter=\"${filter}\"]`).classList.add('active');\r\nrenderTickets();\r\n}\r\n\r\nfunction filterByStatus(status) {\r\nfilterTickets(status);\r\ndocument.getElementById('ticketsList').scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\nfunction searchTickets() {\r\nrenderTickets();\r\n}\r\n\r\nfunction updateStats() {\r\nconst stats = {\r\nopen: tickets.filter(t => t.status === 'open').length,\r\nprogress: tickets.filter(t => t.status === 'progress').length,\r\nresolved: tickets.filter(t => t.status === 'resolved').length,\r\nclosed: tickets.filter(t => t.status === 'closed').length\r\n};\r\n\r\ndocument.getElementById('statOpen').textContent = stats.open;\r\ndocument.getElementById('statProgress').textContent = stats.progress;\r\ndocument.getElementById('statResolved').textContent = stats.resolved;\r\ndocument.getElementById('statClosed').textContent = stats.closed;\r\n}\r\n\r\n\/\/ \u05d8\u05e2\u05d9\u05e0\u05d4 \u05e8\u05d0\u05e9\u05d5\u05e0\u05d9\u05ea\r\nloadData();\r\n\r\n\/\/ \u05e1\u05d2\u05d9\u05e8\u05ea modal \u05d1\u05dc\u05d7\u05d9\u05e6\u05d4 \u05de\u05d7\u05d5\u05e5 \u05dc\u05ea\u05d5\u05db\u05df\r\ndocument.getElementById('ticketModal').addEventListener('click', function(e) {\r\nif (e.target === this) closeModal();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>\u05de\u05e2\u05e8\u05db\u05ea \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT \ud83c\udfab \u05de\u05e2\u05e8\u05db\u05ea \u05e0\u05d9\u05d4\u05d5\u05dc \u05e7\u05e8\u05d9\u05d0\u05d5\u05ea \u05e9\u05d9\u05e8\u05d5\u05ea IT \u05e0\u05d9\u05d4\u05d5\u05dc \u05d5\u05d8\u05d9\u05e4\u05d5\u05dc \u05d1\u05e4\u05e0\u05d9\u05d5\u05ea \u05de\u05e9\u05ea\u05de\u05e9\u05d9\u05dd \u05d5\u05ea\u05e7\u05dc\u05d5\u05ea \u05d8\u05db\u05e0\u05d9\u05d5\u05ea 0 \u05e4\u05ea\u05d5\u05d7\u05d5\u05ea 0 \u05d1\u05d8\u05d9\u05e4\u05d5\u05dc […]<\/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":"","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-94","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages\/94","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=94"}],"version-history":[{"count":4,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=\/wp\/v2\/pages\/94\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/store.it-tec.co.il\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}