{% extends "mainapp/base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
Dashboard
{% endblock %}

{% block content %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    {% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> {% endcomment %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    
    <link rel="stylesheet" href="{% static 'project_dashboard.css' %}">
    <link rel="stylesheet" href="{% static 'milestone-popup.css' %}">
</head>

<body>

    <div class="project-dashboard" style="width:100%;">
        {% if not client_view %}
        <div class="project-notifications">
            <div class="project-notif-heading">
                <div style="position: relative;">
                    Notifications
                    <div class="notif-reddot"></div>
                </div>
                <svg onclick="projectNotifClose()" id="notif-chevron-icon" width="14" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13 7L7 1L1 7" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
            <div class="project-notifications-content">
                <!-- Tasks Category
                <div class="notification-category" id="tasks-category">
                    <div class="notification-category-heading" onclick="toggleCategory(this)">
                        Tasks
                        <svg id="notif-chevron-icon" width="14" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13 7L7 1L1 7" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div class="notification-content">
                        {% for notif in notifications %}
                        {% if notif.trigger == "task_overdue" or notif.trigger == "task_due_today" %}
                        <div class="notif-container github-miss" data-trigger="{{ notif.trigger }}"  id="notif-{{ notif.id }}">
                            <div>{{ notif.content }}</div>
                            <div class="notif-review"  href="#{{notif.trigger}}" onclick="handleNotificationClick(event, '{{ notif.id }}')">Review</div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div> -->

                <!-- Assessments Category -->
                <div class="notification-category" id="assessments-category">
                    <div class="notification-category-heading" onclick="toggleCategory(this)">
                        Assessments
                        <svg id="notif-chevron-icon" width="14" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13 7L7 1L1 7" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div class="notification-content">
                        {% for notif in notifications %}
                        {% if notif.trigger == "assessments" %}
                        <div class="notif-container github-miss" data-trigger="{{ notif.trigger }}"  id="notif-{{ notif.id }}">
                            <div>{{ notif.content }}</div>
                            <div style="display:flex;gap:10px;">
                                {% if is_user_spm %}
                                    <div class="notif-review">
                                        <button class="snooze-button" onclick="toggleSnoozeDropdown(this)">Snooze</button>
                                        <div class="snooze-dropdown" style="display: none;">
                                            <span class="close-snooze" onclick="closeSnoozeDropdown(this)">&times;</span>
                                            <label for="snooze-days">Snooze for:</label>
                                            <select id="snooze-days" class="snooze-select">
                                                {% for day in days %}
                                                    <option value="{{ day }}">{{ day }} day{% if day > 1 %}s{% endif %}</option>
                                                {% endfor %}
                                            </select>
                                            <button class="confirm-snooze" onclick="confirmSnooze('{{ notif.id }}')">Confirm</button>
                                        </div>
                                    </div>
                                {% endif %}
                            <div class="notif-review" onclick="handleNotificationClick(event, '{{ notif.id }}')">Review</div>
                        </div>
                                            
                    </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>


                <!-- GitHub Miss Category -->
                <div class="notification-category" id="github-miss-category">
                    <div class="notification-category-heading" >
                        GitHub Miss
                        <div class="sorting-controls">
                            <button title="Sort by Repo" id="sort-by-project" class="sort-button selected" onclick="selectSortButton(this, 'github-miss', 'repo')">
                                <svg style="transform:rotate(0);padding-left:2px;" fill="#a3a3a3" width="20" height="20" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
                                    <g id="SVGRepo_bgCarrier" stroke-width="0"/>                            
                                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>                           
                                    <g id="SVGRepo_iconCarrier"> <g> <path d="M7,1V5h4V1Zm3,3H8V2h2ZM7,7v4h4V7Zm3,3H8V8h2ZM1,1V5H5V1ZM4,4H2V2H4ZM1,7v4H5V7Zm3,3H2V8H4Z"/> </g> </g>                          
                                    </svg>
                            </button>
                            
                            <button title="Sort by User"  id="sort-by-user" class="sort-button" onclick="selectSortButton(this, 'github-miss', 'user')">
                                <svg style="transform:rotate(0);" fill="#a3a3a3" width="20" height="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" stroke="#a3a3a3">
                                    <path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z"/>
                                </svg>
                            </button>
                        <svg  onclick="toggleCategory(this)" width="14" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13 7L7 1L1 7" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    
                    </div>
                    <div class="notification-content">
                        {% for notif in notifications %}
                        {% if notif.trigger == "git_person" %}
                        <div class="notif-container github-miss"  id="notif-{{ notif.id }}" 
                        data-trigger="{{ notif.trigger }}"
                        data-repo = "{{ notif.repo.name }}"
                        data-user = "{{notif.user.username}}">
                            <div>{{ notif.content }}</div>
                            <div style="display:flex;gap:10px;">
                                {% if is_user_spm %}
                                    <div class="notif-review">
                                        <button class="snooze-button" onclick="toggleSnoozeDropdown(this)">Snooze</button>
                                        <div class="snooze-dropdown" style="display: none;">
                                            <span class="close-snooze" onclick="closeSnoozeDropdown(this)">&times;</span>
                                            <label for="snooze-days">Snooze for:</label>
                                            <select id="snooze-days" class="snooze-select">
                                                {% for day in days %}
                                                    <option value="{{ day }}">{{ day }} day{% if day > 1 %}s{% endif %}</option>
                                                {% endfor %}
                                            </select>
                                            <button class="confirm-snooze" onclick="confirmSnooze('{{ notif.id }}')">Confirm</button>
                                        </div>
                                    </div>
                                {% endif %}
                            <div class="notif-review" onclick="handleNotificationClick(event, '{{ notif.id }}')">Review</div>
                        </div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>

                <!-- Notice Period Category -->
                <div class="notification-category" id="notice-period-category">
                    <div class="notification-category-heading" onclick="toggleCategory(this)">
                        Notice Period
                        <svg width="14" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13 7L7 1L1 7" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div class="notification-content">
                        {% for notif in notifications %}
                        {% if notif.trigger == "person_notice" %}
                        <div id="notif-{{ notif.id }}" class="notif-container notice-period" data-trigger="{{ notif.trigger }}">
                            <div>{{ notif.content }}</div>
                            <div style="display:flex;gap:10px;">
                                {% if is_user_spm %}
                                    <div class="notif-review">
                                        <button class="snooze-button" onclick="toggleSnoozeDropdown(this)">Snooze</button>
                                        <div class="snooze-dropdown" style="display: none;">
                                            <span class="close-snooze" onclick="closeSnoozeDropdown(this)">&times;</span>
                                            <label for="snooze-days">Snooze for:</label>
                                            <select id="snooze-days" class="snooze-select">
                                                {% for day in days %}
                                                    <option value="{{ day }}">{{ day }} day{% if day > 1 %}s{% endif %}</option>
                                                {% endfor %}
                                            </select>
                                            <button class="confirm-snooze" onclick="confirmSnooze('{{ notif.id }}')">Confirm</button>
                                        </div>
                                    </div>
                                {% endif %}
                        
                        
                            <div class="notif-review-container">
                                <div class="notif-review"  onclick="handleNotificationClick(event, '{{ notif.id }}')">
                                    Review
                                </div>
                                <span class="tooltip">Please talk to the person before marking as complete</span>
                            </div>
                        </div>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>

                <!-- Informational Category -->
                <div class="notification-category" id="informational-category">
                    <div class="notification-category-heading" onclick="toggleCategory(this)">
                        Informational
                        <svg width="14" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13 7L7 1L1 7" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </div>
                    <div class="notification-content">
                        {% for notif in notifications %}
                        {% if  notif.trigger != "assessments" and notif.trigger != "git_person" and notif.trigger != "person_notice" and notif.trigger != "task_overdue" and notif.trigger != "task_due_today" %}
                        <div class="notif-container github-assignments"  id="notif-{{ notif.id }}" data-trigger="{{ notif.trigger }}">
                            <div>{{ notif.content }}</div>
                            <div class="notif-review"  href="#{{notif.trigger}}" onclick="handleNotificationClick(event, '{{ notif.id }}')">Review</div>
                        </div>
                        {% endif %}
                        {% endfor %}
                        {% for notif in birthday_notifications %}
                <div class="notif-container github-assignments" id="notif-{{ notif.id }}" data-trigger="birthday">
                <div>{{ notif.content }}</div>
                </div>
                {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="project-dashboard-heading">
            <div class="pdh-upper">
                <h1 class="project-dashboard-title" id="project_detail">
                    <div class="ps-dd-heading-sqr-txt" data-project-id="{{project_detail.id}}" id="ps-dd-heading-sqr-txt-{{project_detail.id}}" style="
                    position: relative; 
                    font-size: 12px; 
                    line-height: 14px; 
                    border-radius: 4px; 
                    border: 1px solid; 
                    color: #939CA3; 
                    padding: 4px;
                    cursor: pointer;
                    {% if project_detail.priority == 'P1' %} font-weight: bolder; border-color: #94999d;
                    {% elif project_detail.priority == 'P2' %} font-weight: 600; border-color: #99a4ad;
                    {% else %} font-weight: 400; border-color: #CED4DA;
                    {% endif %}
                    " 
                    onclick=" {% if is_user_spm or request.user == project_detail.manager %} openPriorityDd(this) {% endif %}">
                        <span>{{project_detail.priority}}</span>
                    </div>
                    {{ project_detail.project_name }}
                <span style="cursor: pointer; position: relative;" onclick="document.querySelector('.project-status-dd').classList.toggle('visible')">
                    <div id="project-status" style="display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 14px;">
                        {% if project_detail.status == 'on_track' %}
                        <div style="border-radius: 100%; width: 14px; height: 14px; background-color: #00B879;"></div>
                         On Track
                        
                        {% elif project_detail.status == 'escalated' %}
                        <div style="border-radius: 100%; width: 14px; height: 14px; background-color: #A90420;"></div>
                         Escalated
                         {% elif project_detail.status == 'ended' %}
                        <div style="border-radius: 100%; width: 14px; height: 14px; background-color: #A9A9A9;"></div>
                            Ended
                         {% endif %}
                    </div>
                    <div class="project-status-dd">
                        <div class="psd-elem" onclick="updateProjectStatus('on_track', '{{project_detail.id}}')">
                            <div
                                style="display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 14px;">
                                <div style="border-radius: 100%; width: 14px; height: 14px; background-color: #00B879;"></div>
                                On Track
                            </div>
                        </div>
                        <div class="psd-elem" onclick="updateProjectStatus('escalated', '{{project_detail.id}}')">
                            <div
                                style="display: flex; flex-direction: row; align-items: center; gap: 6px; font-weight: 400; font-size: 14px;">
                                <div style="border-radius: 100%; width: 14px; height: 14px; background-color: #A90420;"></div>
                                Escalated
                            </div>
                        </div>
                    </div>
                </span>
                </h1>
                <div style="display: flex; gap: 16px;">
                    <div class="pdh-doc-opt" onclick="pdhActive(this)">
                        {% if not client_view %}
                        <svg class="main-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g id="folder">
                            <path id="Vector" d="M18.3337 15.8333C18.3337 16.2754 18.1581 16.6993 17.8455 17.0118C17.5329 17.3244 17.109 17.5 16.667 17.5H3.33366C2.89163 17.5 2.46771 17.3244 2.15515 17.0118C1.84259 16.6993 1.66699 16.2754 1.66699 15.8333V4.16667C1.66699 3.72464 1.84259 3.30072 2.15515 2.98816C2.46771 2.67559 2.89163 2.5 3.33366 2.5H7.50033L9.16699 5H16.667C17.109 5 17.5329 5.17559 17.8455 5.48816C18.1581 5.80072 18.3337 6.22464 18.3337 6.66667V15.8333Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                        </svg>
                        Documents
                        <div class="pdh-doc-dd">
                            <div style=" height: 40px; color: black; background-color: #F2F4FF; display: flex; align-items: center; justify-content: space-between; padding: 4px 12px;">
                                <div>Title</div>
                                <div> Recently Updated </div>
                            </div>
                            <div id="create-document-modal" class="modal" style="display: none;">
                                <div class="modal-content">
                                    <h2>Create Document</h2>
                                    <form id="createDocumentForm">
                                        <div class="form-group">
                                            <label for="createDocumentName">Title</label>
                                            <input type="text" id="createDocumentName" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="createDocumentLink">Link</label>
                                            <input type="text" id="createDocumentLink" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="documentType">Type</label>
                                            <select id="documentType" required>
                                                <option value="">Select type</option>
                                                <option value="doc">doc</option>
                                                <option value="sheets">sheets</option>
                                                <option value="slides">slides</option>
                                                <option value="forms">forms</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="documentPermissions">Permissions</label>
                                            <select id="documentPermissions" required>
                                                <option value="">Select permissions</option>
                                                <option value="anyone">Anyone on Intranet</option>
                                                <option value="pm">PM</option>
                                                <option value="private">Private</option>
                                                <option value="team">Team</option>
                                            </select>
                                        </div>
                                        <div class="modal-buttons">
                                            <button type="button" onclick="closeCreateDocumentForm()">Cancel</button>
                                            <button type="submit" onclick="submitCreateDocumentForm()">Create</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="editDocumentModal" class="modal" style="display: none;">
                                <div class="modal-content">
                                    <h2>Edit Document Link</h2>
                                    <form id="editDocumentForm">
                                        <div class="form-group">
                                            <label for="editDocumentName">Document Name</label>
                                            <input type="text" id="editDocumentName" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="editDocumentUrl">Document URL</label>
                                            <input type="text" id="editDocumentUrl" required>
                                        </div>
                                        <div class="modal-buttons">
                                            <button type="button" onclick="closeEditModal()">Cancel</button>
                                            <button type="submit">Save Changes</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div id="document-list" class="mdoc-document-list">
                                {% for doc in project_documents %}
                                    {% for document in doc.documents %}
                                        {% if document.url %}
                                        <div class="mdoc-document-list-content" data-pinned="{{ document.pinned|default:False }}" data-created="{{ document.date }}">
                                            <a href="{{ document.url }}" class="mdoc-document-list-name">
                                                {{ document.name }}
                                            </a>
                                            <div style="color: #939CA3; display: flex; align-items: center; gap: 8px;">
                                                <div class="date">{{ document.date }}</div>
                                                <div class="doc-list-opt-dd" onclick="openThisDd(this)">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66602 11.9987C6.66602 12.732 7.26602 13.332 7.99935 13.332C8.73268 13.332 9.33268 12.732 9.33268 11.9987C9.33268 11.2654 8.73268 10.6654 7.99935 10.6654C7.26602 10.6654 6.66602 11.2654 6.66602 11.9987ZM6.66602 3.9987C6.66602 4.73203 7.26602 5.33203 7.99935 5.33203C8.73268 5.33203 9.33268 4.73203 9.33268 3.9987C9.33268 3.26537 8.73268 2.66537 7.99935 2.66537C7.26602 2.66537 6.66602 3.26537 6.66602 3.9987ZM7.99935 9.33203C7.26602 9.33203 6.66602 8.73203 6.66602 7.9987C6.66602 7.26536 7.26602 6.66536 7.99935 6.66536C8.73268 6.66536 9.33268 7.26536 9.33268 7.9987C9.33268 8.73203 8.73268 9.33203 7.99935 9.33203Z" fill="#939CA3"/>
                                                    </svg>
                                                    <div class="pdh-more-opts sub-drop-down">
                                                        <div class="pdh-more-opt" onclick="copyDocumentLink(this)" 
                                                            data-document-url="{{ document.url }}">Copy Link</div>
                                                        <div class="pdh-more-opt" onclick="editDocument(this)"
                                                            data-project-id="{{ project_detail.id }}"
                                                            data-document-name="{{ document.name }}"
                                                            data-document-url="{{ document.url }}">Edit Link</div>
                                                        <div class="pdh-more-opt" onclick="pinUnpinDoc(this)"
                                                            data-project-id="{{ project_detail.id }}"
                                                            data-document-name="{{ document.name }}"
                                                            data-document-url="{{ document.url }}">
                                                            {% if document.pinned %}Unpin Document{% else %}Pin Document{% endif %}
                                                        </div>
                                                        <div class="pdh-more-opt" style="color: #CB1537;" onclick="deleteDocument(this)"
                                                            data-project-id="{{ project_detail.id }}"
                                                            data-document-name="{{ document.name }}"
                                                            data-document-url="{{ document.url }}">Delete</div>
                                                    </div>
                                                </div>
                                                <div style="display: {% if document.pinned %}block{% else %}none{% endif %}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" id="pin-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7092 0.800726C13.4661 -0.442477 11.3894 -0.205536 10.4582 1.28576L7.86601 5.43712C7.86601 5.43712 7.86465 5.4394 7.8598 5.44288C7.85386 5.44714 7.84117 5.45448 7.8199 5.46047C7.77342 5.47356 7.71269 5.47255 7.65846 5.45245C6.77373 5.12446 5.25506 4.76416 3.67805 5.35817C2.82841 5.6782 2.40443 6.41475 2.35823 7.16202C2.31416 7.87502 2.60211 8.60796 3.13174 9.13757L6.35284 12.3587L0.266847 18.4446C-0.088949 18.8005 -0.088949 19.3773 0.266847 19.7332C0.622639 20.0889 1.1995 20.0889 1.5553 19.7332L7.64129 13.6471L10.8624 16.8683C11.392 17.3979 12.125 17.6859 12.838 17.6418C13.5853 17.5956 14.3219 17.1716 14.6418 16.322C15.2358 14.745 14.8755 13.2263 14.5476 12.3415C14.5275 12.2873 14.5265 12.2267 14.5395 12.1801C14.5455 12.1589 14.5529 12.1462 14.5572 12.1402C14.5607 12.1354 14.5628 12.1341 14.5628 12.1341L18.7142 9.54181C20.2056 8.6106 20.4425 6.53397 19.1993 5.29077L14.7092 0.800726ZM12.0038 2.25086C12.3142 1.75376 13.0065 1.67478 13.4208 2.08918L17.9109 6.57922C18.3252 6.99362 18.2463 7.68584 17.7491 7.99623L13.5978 10.5885C12.7371 11.1259 12.5455 12.1832 12.8391 12.9749C13.0995 13.6774 13.3072 14.6959 12.9367 15.6797C12.9113 15.7469 12.8832 15.7711 12.8659 15.783C12.8438 15.7982 12.8004 15.8185 12.7256 15.8231C12.5639 15.8331 12.3329 15.7618 12.1509 15.5799L4.42019 7.84913C4.23821 7.66715 4.16691 7.43617 4.17691 7.27445C4.18153 7.19962 4.20181 7.15621 4.21703 7.13413C4.22894 7.11685 4.25319 7.08865 4.32033 7.06336C5.30414 6.6928 6.32264 6.90056 7.02509 7.16098C7.81687 7.4545 8.87409 7.26292 9.41163 6.40221L12.0038 2.25086Z" fill="black"/>
                                                    </svg>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                    {% endfor %}
                                {% endfor %}
                            </div>
                            <div id="link-list" class="link-list"></div>
                            <div class="add-url">
                                <input type="url" placeholder="New Url" id="md-url" style="display: flex; padding-left: 12px;">
                                <button id="save-button" onclick="get_title()" style="display: flex; background-color: white;
                                margin-top: 8px;
                                margin-bottom: 8px;
                                width: fit-content;
                                height: 40px;
                                border-radius: 4px;
                                border: none;
                                padding: 8px 24px;
                                font-size: 16px;
                                font-weight: 400;
                                color:#504CF5; cursor: pointer;">
                                    Add
                                </button>
                            </div>
                            <div style="display: flex; gap: 24px; margin-top: 20px; justify-content: space-between;">
                                <!-- <button class="upload-btn" onclick="triggerFileUpload()">Upload Document</button> -->
                                <input type="file" id="fileInput" style="display: none;" onchange="handleFileUpload(event)">
                                <label for="fileInput" class="upload-btn">Upload Document</label>
                                <button class="create-btn" onclick="openCreateDocumentForm()">Create Document</button>
                            </div>
                            <div class="pdh-doc-warning">
                                <div class="icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                    <!-- Circle Path -->
                                    <path d="M8 0.25C3.72656 0.25 0.25 3.72656 0.25 8C0.25 12.2734 3.72656 15.75 8 15.75C12.2734 15.75 15.75 12.2734 15.75 8C15.75 3.72656 12.2734 0.25 8 0.25ZM8 14.25C4.55371 14.25 1.75 11.4463 1.75 8C1.75 4.55371 4.55371 1.75 8 1.75C11.4463 1.75 14.25 4.55371 14.25 8C14.25 11.4463 11.4463 14.25 8 14.25Z" fill="#A90420"/>
                                    <!-- "I"-shaped bar -->
                                    <g transform="translate(7, 3)"> <!-- Translate the bar to center it in the circle -->
                                      <path d="M1 3.30469C0.585695 3.30469 0.25 3.64063 0.25 4.05469V8.83594C0.25 9.25 0.585695 9.58594 1 9.58594C1.4143 9.58594 1.75 9.25 1.75 8.83594V4.05469C1.75 3.64063 1.4143 3.30469 1 3.30469ZM1 0.416016C0.585695 0.416016 0.25 0.751956 0.25 1.16602V1.84473C0.25 2.25879 0.585695 2.59473 1 2.59473C1.4143 2.59473 1.75 2.25879 1.75 1.84473V1.16602C1.75 0.751951 1.4143 0.416016 1 0.416016Z" fill="#A90420"/>
                                    </g>
                                  </svg>
                                  </div>
                                <div class="warning">Please strictly use  intranet  to create documentation. Non compliance will lead to immediate termination due to confidentiality breech.</div>
                            </div>
                        </div>
                    {% endif %}
                    </div>
                    <div id="modal" class="modal">
                    <div class="modal-content" id="modal-content-exisiting-repo" >
                        <h2 class="repo-modal-heading">Repositories</h2>
                        
                        <!-- Existing Repositories List -->
                        <div id="existing-repositories">

                           
                                {% if repositories %}
                                <ul>
                                {% for repo in repositories %}
                                    <li>
                                        <a href="{{ repo.url }}" target="_blank" style="text-decoration: none; color: #08090A;">{{ repo.name }}</a>
                                    </li>
                                   
                                {% endfor %}
                            </ul>
                                {% else %}
                                <div>
                                    No Repositories found for this project. Create a new one.
                                </div>
                                {% endif %}
                            
                        </div>
                
                        <!-- Button to Create a New Repository -->
                        <div class="form-buttons">
                            <button class="create-new-repo-btn" type="button" onclick="toggleCreateRepoForm()">Create New Repository</button>
                            <button class="create-repo-cancel-btn" type="button" onclick="closeModal()">Close</button>
                            </div>
                        </div>
                    <div>
                
                        <!-- New Repository Form (Initially Hidden) -->
                        
                        <form id="repo-form" class="modal-content" style="display: none;width: 100%" >
                            <h2 class="repo-modal-heading">Create a New Repository</h2>

                            <div class="create-repo-modal-contain">
                                <div class="form-group">
                                    <label for="owner">Owner</label>
                                    <select id="owner" name="owner" style="background-color: #CED4DA; outline: none; color: #6D747A; width: 100%; height: 48px; border-radius: 4px;">
                                        <option value="">Select Owner</option>
                                        {% for account in github_accounts %}
                                            <option value="{{ account }}">{{ account }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="organization">Organization (Optional)</label>
                                    <select id="organization" name="organization" style="background-color: #CED4DA; outline: none; color: #6D747A; width: 100%; height: 48px; border-radius: 4px;">
                                        <option value="">Select Organization (if applicable)</option>
                                        
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label style="width: 100%; color: #08090A;" for="repo-name">Repository Name</label>
                                    <input
                                        style="background-color: #F8F9FA; color: #6D747A; height: 48px; border-radius: 4px; width: 100%;"
                                        type="text" id="repo-name" name="repo-name" placeholder="Enter repository name">
                                    <div id="repo-status" class="status-message"></div>
                                </div>
                            </div>
                            
                            <div class="form-buttons">
                                <button class="create-new-repo-btn" type="button" onclick="toggleCreateRepoForm()">Back</button>
                                <button class="create-repo-cancel-btn" type="button" onclick="closeModal()">Cancel</button>
                                <button class="create-repo-submit-btn" type="button" onclick="createRepository()">Create Repository</button>
                            </div>
                        </form>
                    </div>
                </div>
                
                
            {% if is_user_spm or request.user == project_detail.manager or hat_type == 'projectManager' %}

            <div id="on-track-div" style="display: flex; flex-direction: row; gap: 12px; align-items: center; ">

                    <div class="github-icon-container" style="margin-left: 0px; cursor: pointer;"
                        onclick="openModal()">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="black">
                            <path
                                d="M12 .5C5.7.5.7 5.4.7 11.7c0 4.9 3.2 9.1 7.7 10.6.6.1.8-.3.8-.6v-2.1c-3.1.7-3.8-1.3-3.8-1.3-.5-1.3-1.2-1.7-1.2-1.7-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.4 1.1 3 .8.1-.6.3-1.1.6-1.4-2.5-.3-5.2-1.3-5.2-5.7 0-1.3.4-2.4 1.2-3.3-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.4 1.3.9-.2 1.9-.3 2.8-.3s1.9.1 2.8.3c2.4-1.6 3.4-1.3 3.4-1.3.6 1.7.2 2.9.1 3.2.8.9 1.2 2.1 1.2 3.3 0 4.4-2.7 5.4-5.3 5.7.3.3.7.9.7 1.9v2.8c0 .3.2.7.8.6 4.5-1.5 7.7-5.7 7.7-10.6C23.3 5.4 18.3.5 12 .5z" />
                        </svg>
                        <div class="github-hover-popup">Project Repositories</div>
                    </div>
            </div>
            {% endif %}
            {% if not client_view %}
            <div class="share-project" id="share-section" onclick="copyClientLink('{{ project_detail.client_access_token }}')">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M18 16.08C17.24 16.08 16.56 16.38 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.19C16.5 7.69 17.21 8 18 8C19.66 8 21 6.66 21 5C21 3.34 19.66 2 18 2C16.34 2 15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.81C7.5 9.31 6.79 9 6 9C4.34 9 3 10.34 3 12C3 13.66 4.34 15 6 15C6.79 15 7.5 14.69 8.04 14.19L15.16 18.35C15.11 18.56 15.08 18.78 15.08 19C15.08 20.61 16.39 21.92 18 21.92C19.61 21.92 20.92 20.61 20.92 19C20.92 17.39 19.61 16.08 18 16.08ZM18 4C18.55 4 19 4.45 19 5C19 5.55 18.55 6 18 6C17.45 6 17 5.55 17 5C17 4.45 17.45 4 18 4ZM6 13C5.45 13 5 12.55 5 12C5 11.45 5.45 11 6 11C6.55 11 7 11.45 7 12C7 12.55 6.55 13 6 13ZM18 20.02C17.45 20.02 17 19.57 17 19.02C17 18.47 17.45 18.02 18 18.02C18.55 18.02 19 18.47 19 19.02C19 19.57 18.55 20.02 18 20.02Z" fill="#08090A"/>
                </svg>
                <script>
                    const projectName = "{{ project_detail.project_name }}";
                    const shareSection = document.getElementById('share-section');

                    function copyClientLink(token) {
                        const clientUrl = `${window.location.origin}/project/dashboard/${projectId}/${projectName}/?token=${token}`;
                        navigator.clipboard.writeText(clientUrl)
                            .then(() => {
                                alert('Secure client link copied! \nShare it with the client to provide access.');
                                shareSection.style.color = '#34c759'; // Change text color to green
                                shareSection.style.textShadow = '0 0 1px rgba(0, 0, 0, 0.3)'; // Subtle glow effect

                                // Reset to original style after 2 seconds
                                setTimeout(() => {
                                    shareSection.style.color = '#000'; // Reset text color to black
                                    shareSection.style.textShadow = 'none'; // Remove glow
                                }, 1000);
                            })
                            .catch(() => {
                                alert('Failed to copy link');
                            });
                    }
                    </script>
            </div>
            {% endif %}
         
                </div>
            </div>
            <div class="pdh-lower">
                
            </div>
        </div>
        {% if not client_view %}
        <div class="project-dashboard-main">
            <div class="project-details-dashboard">
                {% if is_user_spm %}
                <div class="project-dashboard-key-project">
                    <div class="key-project-heading">
                        Key Project Details
                        <span style="display: flex;  flex-direction: row; gap: 20px; align-items: center;">
                            {% if is_user_spm %}
                            <svg style="cursor: pointer;" onclick="editMode()" width="12" height="12"
                                viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" clip-rule="evenodd"
                                    d="M11.8072 1.75499C12.0672 2.01499 12.0672 2.43499 11.8072 2.69499L10.5872 3.91499L8.08724 1.41499L9.30724 0.19499C9.43179 0.0701553 9.60089 0 9.77724 0C9.95358 0 10.1227 0.0701553 10.2472 0.19499L11.8072 1.75499ZM0 11.6689L0 9.64224C0 9.54891 0.0333333 9.46891 0.1 9.40224L7.37333 2.12891L9.87333 4.62891L2.59333 11.9022C2.53333 11.9689 2.44667 12.0022 2.36 12.0022H0.333333C0.146667 12.0022 0 11.8556 0 11.6689Z"
                                    fill="#939CA3" />
                            </svg>
                            {% endif %}
                            <svg id="projectKey-details-chevron-icon" onclick="keyProjectExpand()"
                                style="cursor: pointer;" width="14" height="8" viewBox="0 0 14 8" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M1 1L7 7L13 1" stroke="#6D747A" stroke-width="2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </span>
                    </div>
                    <div id="view-mode" class="project-details-display" style="display: none;">
                       
                        <div class="project-details-input">
                            <label>Start Date:</label>
                            <span id="display-start-date">{{ project_detail.start_date }}</span>
                        </div>
                        <div class="project-details-input">
                            <label>Tentative End Date:</label>
                            <span id="display-tentative-end-date">{{ project_detail.end_date }}</span>
                        </div>
                        {% if is_user_spm %}
                        <div class="project-details-input">
                            <label>Company Name:</label>
                            <span id="display-company-name">{{ project_detail.company_name }}</span>
                        </div>
                        <div class="project-details-input">
                            <label>Client Name:</label>
                            <span id="display-client-name">
                                {% if project_detail.client_name %}
                                {% for client in project_detail.client_name %}
                                {{ client }}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                                {% else %}
                                No clients available
                                {% endif %}
                            </span>
                        </div>
                        <div class="project-details-input">
                            <label>Email:</label>
                            <span id="display-email">
                                {% for email in project_detail.email %}
                                {{ email }}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </span>
                        </div>
                        <div class="project-details-input">
                            <label>Contact Number:</label>
                            <span id="display-mobile">
                                {% for contact in project_detail.contact_number %}
                                {{ contact }}{% if not forloop.last %}, {% endif %}
                                {% endfor %}
                            </span>
                        </div>
                        <div class="project-details-input">
                            <label>Address:</label>
                            <span id="display-address">{{ project_detail.address }}</span>
                        </div>
                        <div class="project-details-input">
                            <label>GSTIN:</label>
                            <span id="display-gstin">{{ project_detail.gstin }}</span>
                        </div>
                        <div class="project-details-input">
                            <label>PAN:</label>
                            <span id="display-pan">{{ project_detail.pan }}</span>
                        </div>
                        <div class="project-details-input">
                            <label>Proposal Doc Link:</label>
                            <span id="display-proposal_doc">
                                {% if project_detail.proposal_doc %}
                                    <a href="{{ project_detail.proposal_doc }}" target="_blank" style="color: #504CF5; text-decoration: none;">Link</a>
                                {% else %}
                                    -
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}
                        <div id="milestone">
                        <div class="project-details-input-milestone">
                            <label>Milestone:</label>
                            <div class="project-details-milestone" >
                                {% for milestone_ele,milestone_status in milestone_statuses.items %}
                                <span id="{{milestone_ele}}" onclick="showMilestonePopup(event)" class="display-milestone milestone-name" 
                                data-start="{{ milestone_status.start }}" 
                                data-end="{{ milestone_status.end }}" title="Start Date: {{ milestone_status.start }}&#10;End Date: {{ milestone_status.end }}"> {{ milestone_ele }}
                                    <svg width="10" height="6" viewBox="0 0 14 8" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 1L7 7L13 1" stroke="#6D747A" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </span>
                                {% endfor %}
                  
                              

                            </div>

                            </div>

                        </div>
                        <div id="milestone-action-popup"
                            style=" display: none; padding: 8px; position: absolute; background: #F2F4FF; border: 1px solid #EBEDF0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                            <div
                                style="display: flex; flex-direction: column; color: #6D747A; font-weight: 400; font-size: 16px; gap: 10px;padding: 10px 6px;">
                                <button id="-btn" style="text-align: left;"
                                    onclick="setMilestoneStatus('on-progress')">On Progess</button>
                                <button id="-btn" style="text-align: left;"
                                    onclick="setMilestoneStatus('completed')">Completed</button>
                                <button id="-btn" style="text-align: left;"
                                    onclick="setMilestoneStatus('incomplete')">Incomplete</button>
                            </div>
                        </div>

                    </div>
                    <div class="project-details">
                        <div class="project-details-key">



                            <div id="edit-mode" style="width: 100%; display: none">
                                <form class="project-details-display" id="edit-form">
                                    <div class="project-details-input">
                                        <label for="project-name">Project Name</label>
                                        <input class="input-style" type="text" id="project-name" name="project-name"
                                        style="padding-left:20px" placeholder="Add a Project" value="{{ project_detail.project_name }}">
                                    </div>
                                    <div class="project-details-input">
                                        <label for="start-date">Start Date</label>
                                        <input class="input-style" type="date" id="start-date" name="start-date"
                                        style="padding-left:20px" value="{{ project_detail.start_date|date:'Y-m-d' }}">
                                    </div>
                                    <div class="project-details-input">
                                        <label for="tentative-end-date">Tentative End Date</label>
                                        <input class="input-style" type="date" id="tentative-end-date" name="tentative-end-date"
                                        style="padding-left:20px" value="{{ project_detail.end_date|date:'Y-m-d' }}">
                                    </div>
                                    <div class="project-details-input">
                                        <label for="company-name">Company Name</label>
                                        <input class="input-style" type="text" id="company-name" name="company-name"
                                        style="padding-left:20px" placeholder="Add Company Name" value="{{ project_detail.company_name }}">
                                    </div>
                                    <div class="project-details-input">
                                        <label for="client-name">Client Name</label>
                                        <div class="input-style" style="width:50%;">
                                            {% if project_detail.client_name %}
                                                {% for client in project_detail.client_name %}
                                                    <div class="client-input-row">
                                                        <input class="input-style client-name-input" type="text" name="client-name" placeholder="Enter Name" value="{{ client }}">
                                                        <span style="width:3px;" class="delete-icon" onclick="addInputTextField(this, 'client-name')">&#10011</span>
                                                    </div>
                                                {% endfor %}
                                            {% else %}
                                                <input class="input-style client-name-input" type="text" name="client-name" placeholder="Enter Name">
                                            {% endif %}
                                        </div>
                                    </div>
                                    
                                    
                                    <div class="project-details-input">
                                        <label for="email">Email</label>
                                        <div class="input-style" style="width:50%;">
                                            {% if project_detail.email %}
                                                {% for email in project_detail.email %}
                                                    <div class="client-input-row">
                                                        <input class="input-style client-name-input" type="text" name="client-email" placeholder="Enter Email" value="{{ email }}">
                                                        <span class="delete-icon" onclick="addInputTextField(this, 'client-email')">&#10011</span>
                                                    </div>
                                                {% endfor %}
                                            {% else %}
                                                <input class="input-style client-name-input" type="text" name="client-email" placeholder="Enter Email">
                                            {% endif %}
                                        </div>
                                    </div>
                                    
                                    <div class="project-details-input">
                                        <label for="mobile">Contact Number</label>
                                        <div class="input-style" style="width:50%;">
                                            {% if project_detail.contact_number %}
                                                {% for mobile in project_detail.contact_number %}
                                                    <div class="client-input-row">
                                                        <input class="input-style client-name-input" type="text" name="client-mobile" placeholder="Enter Contact" value="{{ mobile }}">
                                                        <span class="delete-icon" onclick="addInputTextField(this, 'client-mobile')">&#10011</span>
                                                    </div>
                                                {% endfor %}
                                            {% else %}
                                                <input class="input-style client-name-input" type="text" name="client-mobile" placeholder="Enter Contact">
                                            {% endif %}
                                        </div>
                                    </div>
                                    
                                    <div class="project-details-input">
                                        <label for="address">Address</label>
                                        <textarea class="input-style" id="address" name="address" placeholder="Add Address"
                                            style="width: 50%;">{% if project_detail.address != " " %}{{ project_detail.address }}{% else %}{% endif %}</textarea>
                                    </div>
                                    <div class="project-details-input">
                                        <label for="gstin">GSTIN</label>
                                        <input class="input-style" type="text" id="gstin" name="gstin" placeholder="Add GSTIN"
                                            value="{% if project_detail.gstin != ' ' %}{{ project_detail.gstin }}{% else %}{% endif %}">
                                    </div>
                                    <div class="project-details-input">
                                        <label for="pan">PAN</label>
                                        <input class="input-style" type="text" id="pan" name="pan" placeholder="Add PAN"
                                            value="{% if project_detail.pan != ' ' %}{{ project_detail.pan }}{% else %}{% endif %}">
                                    </div>
                                    <div class="project-details-input">
                                        <label for="proposal_doc">Proposal Doc Link</label>
                                        <input class="input-style" type="url" id="proposal_doc" name="proposal_doc" placeholder="Add document link" value="{{ project_detail.proposal_doc }}">
                                    </div>
                                    <div class="project-details-input-milestone" style="display: flex; flex-direction: row;">
                                        <label for="milestone">Milestone</label>
                                        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                            {% for milestone in milestones %}
                                                <span id="{{ milestone.name }}" name="edit-{{ milestone.name }}"onclick="showMilestoneDetailPopup(event, '{{ milestone.name }}')"  class="display-milestone">
                                                    <p>{{ milestone.name }}</p>
                                                    <svg width="10" height="6" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 1L7 7L13 1" stroke="#6D747A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                                    </svg>
                                                </span>
                                            {% endfor %}
                                            <div style="display: flex; align-items: center; width: fit-content;">
                                                <span class="input-style" onclick="addMilestone(event, this, 'milestone')">+ Add Milestone</span> 
                                            </div>
                                        
                                    </div>
                                    
                                    </div>
                                    <div class="button-container" style="display: flex; justify-content: space-between; align-items: center;">
                                        <button type="button" class="key-project-save-btn" id={{project_detail.id}}
                                            onclick="endProject(this)">End Project</button>
                                        <div style="display: flex; gap: 8px;">
                                            <button type="button" class="key-project-save-btn"
                                                onclick="saveChanges()">Save</button>
                                            <button type="button" class="key-project-cancel-btn"
                                                onclick="cancelEdit()">Cancel</button>
                                        </div>
                                    </div>
                                    
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

           <div id="milestone-popup" class="popup" style="display: none;">
    <div class="popup-content">
        <div class="input-row">
            <label for="rename-milestone">Name</label>
            <input class="input-style" type="text" id="rename-milestone" placeholder="M2"/>
        </div>

        <div class="input-row">
            <label>Milestone type</label>
            <div class="milestone-type" onclick="openThisDd(this)">
                <span class="milestone-type-block">Retainer based</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="M3 4.5L6 7.5L9 4.5" stroke="#6D747A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <div class="sub-drop-down">
                    <div class="sub-dd-opt" data-value="retainer">Retainer based</div>
                    <div class="sub-dd-opt" data-value="fixed">Fixed-cost</div>
                </div>
            </div>
        </div>

        <div class="input-row">
            <label for="milestone-budget">Budget</label>
            <div class="budget-wrapper">
                <span class="currency-symbol">₹</span>
                <input class="input-style" type="number" id="milestone-budget" placeholder="4000"/> 
            </div>
        </div>

        <div class="input-row">
            <label for="milestone-start-date">Start date:</label>
            <div class="date-input-wrapper">
                <input type="date" id="milestone-start-date"/>
            </div>
        </div>

        <div class="input-row">
            <label for="milestone-end-date">End date:</label>
            <div class="date-input-wrapper">
                <input type="date" id="milestone-end-date"/>
            </div>
        </div>

        <div class="stages-section">
            <label>Milestone Stages</label>
            <div class="stages-container">
                <div class="stage-checkbox">
                    <input type="checkbox" id="design-stage"/>
                    <label for="design-stage">Design Stage</label>
                </div>
                <div class="stage-checkbox">
                    <input type="checkbox" id="dev-stage"/>
                    <label for="dev-stage">Development Stage</label>
                </div>
                <div class="stage-checkbox">
                    <input type="checkbox" id="testing-stage"/>
                    <label for="testing-stage">Testing Stage</label>
                </div>
                <div class="stage-checkbox">
                    <input type="checkbox" id="deployment-stage"/>
                    <label for="deployment-stage">Deployment / DevOps</label>
                </div>
                <div class="stage-checkbox">
                    <input type="checkbox" id="wrapup-stage"/>
                    <label for="wrapup-stage">Milestone Wrap-up</label>
                </div>
            </div>
        </div>
    </div>
</div>
                {% endif %}
            </div>
            <div id="clickupModal" class="clickupModal" style="display: none;">
                <form id="clickupForm">
                    <div id="clickup-modal-content" class="clickup-modal-content">
                        <h2 style="color: #08090A; font-weight: 700; font-size: 18px;">Sync with ClickUp</h2>
                        <p style="color: #08090A; font-weight: 500; font-size: 16px;">Choose a project to sync.</p>
            
                        <!-- Existing Project Selection -->
                        <div id="existingProjects" style="display: flex;" class="existingProjects">
                                <div  >
                                {% if existing_projects %}
                                    {% for project in existing_projects %}
                                    
                                        <label class="circular-checkbox">
                                            <input type="radio" name="existing-project" value="{{ project.list_id }}">
                                            {{ project }}
                                        </label>
                                    
                                    {% endfor %}
                                {%else %}
                                        No existing free projects. Pleas