{% extends "portal/base.html" %}
{% load portal_tags %}

{% block title %}Dashboard - ClientPortal{% endblock %}
{% block topbar_title %}Dashboard{% endblock %}

{% block content %}
{% if project %}
<!-- Project Summary -->
<div class="project-summary">
    <div class="project-main">
        <div class="project-status-row">
            <span class="badge badge-{{ project.status }}">{{ project.get_status_display }}</span>
        </div>
        <div class="project-name">{{ project.name }}</div>
        {% if project.description %}
        <div class="project-desc">{{ project.description }}</div>
        {% endif %}

        <div class="project-meta">
            <div class="meta-item">
                <div class="meta-label">Start Date</div>
                <div class="meta-value">{{ project.start_date|date:"d M Y" }}</div>
            </div>
            <div class="meta-item">
                <div class="meta-label">Est. Completion</div>
                <div class="meta-value">{{ project.end_date|date:"d M Y" }}</div>
            </div>
            <div class="meta-item">
                <div class="meta-label">Project Manager</div>
                <div class="meta-value">{{ project.project_manager|default:"TBC" }}</div>
            </div>
        </div>
    </div>

    <div class="progress-section">
        <div class="progress-ring-wrap">
            <svg class="progress-ring" width="140" height="140" viewBox="0 0 140 140">
                <circle class="ring-bg" cx="70" cy="70" r="58"/>
                <circle class="ring-fill" id="ring-fill" cx="70" cy="70" r="58"
                        data-progress="{{ project.progress_percentage }}"
                        stroke-dasharray="364.4"
                        stroke-dashoffset="364.4"/>
            </svg>
            <div class="ring-label">
                <div class="ring-pct">{{ project.progress_percentage }}%</div>
                <div class="ring-txt">Complete</div>
            </div>
        </div>
        <div class="progress-title">Overall Progress</div>
        <div class="progress-sub">{{ project.completed_tasks_count }} of {{ project.total_tasks_count }} tasks completed</div>
    </div>
</div>

<!-- Stat Cards -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-icon blue">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/></svg>
        </div>
        <div class="stat-label">Docs Pending</div>
        <div class="stat-value">{{ project.pending_documents_count }}</div>
        <div class="stat-detail">Require your signature</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon amber">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
        </div>
        <div class="stat-label">Assets Missing</div>
        <div class="stat-value">{{ project.missing_assets_count }}</div>
        <div class="stat-detail">Required uploads outstanding</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon green">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
        </div>
        <div class="stat-label">Tasks Done</div>
        <div class="stat-value">{{ project.completed_tasks_count }}<span style="font-size:14px;color:var(--text3);">/{{ project.total_tasks_count }}</span></div>
        <div class="stat-detail">{{ project.progress_percentage }}% of milestones</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon blue">
            <svg width="18" height="18" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/></svg>
        </div>
        <div class="stat-label">Days Left</div>
        <div class="stat-value">{{ project.days_remaining }}</div>
        <div class="stat-detail">Until estimated delivery</div>
    </div>
</div>

<!-- Project Approval Banner (100%) -->
{% if can_approve_completion %}
<div id="approval-banner" style="
    background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);
    border:2px solid var(--success);
    border-radius:var(--radius);
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 4px 16px rgba(16,185,129,.12);
">
    <div style="display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;">
        <div style="width:44px;height:44px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
            <svg width="22" height="22" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
        </div>
        <div style="flex:1;min-width:220px;">
            <div style="font-family:'Fraunces',serif;font-size:17px;font-weight:600;color:#065f46;margin-bottom:4px;">
                Your project is 100% complete!
            </div>
            <div style="font-size:13px;color:#047857;line-height:1.5;">
                All milestones have been reached. Please review the deliverables and either approve the project or let us know if changes are needed.
            </div>
            <div style="display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;">
                <button type="button" class="btn btn-success" onclick="openApprovalModal()">
                    <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                    Approve &amp; Close Project
                </button>
                <button type="button" class="btn btn-outline" onclick="openChangesModal()">
                    <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.379-8.379-2.828-2.828z"/></svg>
                    Request Changes
                </button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Action Items -->
<div class="card card-padded">
    <div class="card-header">
        <div>
            <div class="card-title">Action Required</div>
            <div class="card-sub">Items that need your attention before work can continue</div>
        </div>
    </div>

    {% if unsigned_docs or missing_assets %}
        {% for doc in unsigned_docs %}
        <div class="action-item action-item-doc">
            <span class="action-icon">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.379-8.379-2.828-2.828z"/></svg>
            </span>
            <span class="action-text"><strong>{{ doc.title }}</strong> — requires your signature</span>
            <a href="{% url 'client_portal:documents' %}" class="btn btn-outline btn-sm">Sign Now →</a>
        </div>
        {% endfor %}

        {% for asset in missing_assets %}
        <div class="action-item action-item-asset">
            <span class="action-icon">
                <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
            </span>
            <span class="action-text"><strong>{{ asset.title }}</strong> — required upload is missing</span>
            <a href="{% url 'client_portal:assets' %}" class="btn btn-outline btn-sm">Upload →</a>
        </div>
        {% endfor %}
    {% else %}
        <div class="empty-state">
            <div class="empty-state-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd"/></svg></div>
            <p>No outstanding actions — you're all caught up!</p>
        </div>
    {% endif %}
</div>

{% else %}
<div class="empty-state" style="padding:60px 20px;">
    <div class="empty-state-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd"/></svg></div>
    <p>No active project assigned yet. Contact your project manager for access.</p>
</div>
{% endif %}

<!-- Approval Modal -->
<div id="approval-modal" class="modal-overlay" aria-hidden="true" role="dialog">
    <div class="modal">
        <div class="modal-head">
            <div class="modal-title">Approve Project Completion</div>
            <button class="modal-close" type="button" onclick="closeApprovalModal()" aria-label="Close">✕</button>
        </div>
        <div class="modal-body">
            <div style="padding:12px;background:var(--success-light);border-radius:8px;margin-bottom:16px;font-size:13px;color:#065f46;line-height:1.5;">
                By approving, you confirm that all deliverables meet your requirements and the project is complete. This will formally close the project.
            </div>
            <form id="approval-form" method="post" action="{% url 'client_portal:project_approve' %}">
                {% csrf_token %}
                <div class="sign-section">
                    <div class="sign-label">Optional feedback or final notes</div>
                    <textarea name="feedback" rows="4"
                              style="width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;resize:vertical;outline:none;"
                              placeholder="Great work on the project! Everything looks good..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline" onclick="closeApprovalModal()">Cancel</button>
                    <button type="submit" class="btn btn-success">
                        <svg width="13" height="13" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                        Confirm Approval
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Request Changes Modal -->
<div id="changes-modal" class="modal-overlay" aria-hidden="true" role="dialog">
    <div class="modal">
        <div class="modal-head">
            <div class="modal-title">Request Changes</div>
            <button class="modal-close" type="button" onclick="closeChangesModal()" aria-label="Close">✕</button>
        </div>
        <div class="modal-body">
            <div style="padding:12px;background:var(--warn-light);border-radius:8px;margin-bottom:16px;font-size:13px;color:#92400e;line-height:1.5;">
                Please describe clearly what needs to be revised. Your feedback will be sent directly to the project team.
            </div>
            <form id="changes-form" method="post" action="{% url 'client_portal:project_request_changes' %}">
                {% csrf_token %}
                <div class="sign-section">
                    <div class="sign-label">What needs to change? <span style="color:var(--danger);">*</span></div>
                    <textarea name="feedback" id="changes-feedback" rows="5" required
                              style="width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;resize:vertical;outline:none;"
                              placeholder="Please revise the homepage design — the colour scheme doesn't match our brand guidelines..."></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline" onclick="closeChangesModal()">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <svg width="13" height="13" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.379-8.379-2.828-2.828z"/></svg>
                        Send Feedback
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function openApprovalModal() {
    var modal = document.getElementById('approval-modal');
    if (modal) { modal.classList.add('visible'); document.body.style.overflow = 'hidden'; }
}
function closeApprovalModal() {
    var modal = document.getElementById('approval-modal');
    if (modal) { modal.classList.remove('visible'); document.body.style.overflow = ''; }
}
function openChangesModal() {
    var modal = document.getElementById('changes-modal');
    if (modal) { modal.classList.add('visible'); document.body.style.overflow = 'hidden'; }
}
function closeChangesModal() {
    var modal = document.getElementById('changes-modal');
    if (modal) { modal.classList.remove('visible'); document.body.style.overflow = ''; }
}
['approval-modal', 'changes-modal'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) el.addEventListener('click', function(e) {
        if (e.target === el) { el.classList.remove('visible'); document.body.style.overflow = ''; }
    });
});
</script>
{% endblock %}