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

{% block title %}Documents — ClientPortal{% endblock %}
{% block topbar_title %}Documents{% endblock %}

{% block content %}
<div class="section-header">
    <div class="section-title">Documents</div>
    <div class="section-sub">Review, sign, and download documents for your project.</div>
</div>

<div class="card card-padded">
    <div class="card-header">
        <div>
            <div class="card-title">All Documents</div>
            <div class="card-sub">{{ documents|length }} document{{ documents|length|pluralize }} — {{ pending_count }} pending signature</div>
        </div>
    </div>

    <div class="doc-list">
        {% for doc in documents %}
        <div class="doc-item" id="doc-row-{{ doc.id }}">
            <div class="doc-item-top">
                <div class="doc-icon">
                    <svg width="16" height="16" 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="doc-info">
                    <div class="doc-name">{{ doc.title }}</div>
                    <div class="doc-date">Added {{ doc.created_at|date:"d F Y" }}</div>
                    {% if doc.deadline %}
                    <div class="doc-date" style="color:{% if doc.is_overdue %}var(--danger){% else %}var(--text3){% endif %};">
                        {% if doc.is_overdue %}⚠ Overdue — {% endif %}Due {{ doc.deadline|date:"d M Y" }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <div class="doc-actions">
                {% if doc.signed %}
                    <span class="badge badge-signed">✓ Signed</span>
                    {% if doc.signed_by %}
                    <span style="font-size:11px;color:var(--text3);">by {{ doc.signed_by }} · {{ doc.signed_at|date:"d M Y" }}</span>
                    {% endif %}
                {% else %}
                    <span class="badge badge-pending">Pending Signature</span>
                {% endif %}
            </div>

            <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;">
                <!-- Preview -->
                <button type="button" class="btn btn-outline btn-sm" onclick="previewDocument({{ doc.id }})">
                    <svg width="13" height="13" viewBox="0 0 20 20" fill="currentColor"><path d="M10 3C5 3 1.73 7.11 1 10c.73 2.89 4 7 9 7s8.27-4.11 9-7c-.73-2.89-4-7-9-7zm0 11a4 4 0 110-8 4 4 0 010 8z"/><circle cx="10" cy="10" r="2" fill="currentColor"/></svg>
                    Preview
                </button>

                {% if doc.file %}
                <a href="{% url 'client_portal:download_document' doc.id 'original' %}" class="btn btn-outline btn-sm">
                    <svg width="13" height="13" 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-1zM10 3a1 1 0 011 1v7.586l2.293-2.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 11.586V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                    Download
                </a>
                {% endif %}

                {% if doc.signed_file %}
                <a href="{% url 'client_portal:download_document' doc.id 'signed' %}" class="btn btn-outline btn-sm" style="border-color:var(--success);color:#065f46;">
                    <svg width="13" height="13" 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-1zM10 3a1 1 0 011 1v7.586l2.293-2.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 11.586V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>
                    Download Signed
                </a>
                {% endif %}

                {% if not doc.signed %}
                <button type="button" class="btn btn-primary btn-sm" onclick="openSignModal({{ doc.id }})">
                    <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>
                    Sign Document
                </button>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <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 documents yet.</p>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Document Preview Modal -->
<div id="doc-preview-overlay" class="modal-overlay" onclick="if(event.target===this){this.classList.remove('visible');document.body.style.overflow='';}">
    <div class="modal">
        <div class="modal-head">
            <div class="modal-title" id="preview-doc-title">Document</div>
            <button class="modal-close" type="button"
                    onclick="document.getElementById('doc-preview-overlay').classList.remove('visible');document.body.style.overflow='';">✕</button>
        </div>
        <div class="modal-body">
            <div class="pdf-preview" style="max-height:400px;overflow-y:auto;">
                <div class="pdf-preview-label">Document Content</div>
                <div class="pdf-preview-text" id="preview-doc-text">Loading...</div>
            </div>
            <div id="preview-doc-actions" style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function previewDocument(docId) {
    var overlay = document.getElementById('doc-preview-overlay');
    var title   = document.getElementById('preview-doc-title');
    var text    = document.getElementById('preview-doc-text');
    var actions = document.getElementById('preview-doc-actions');
    text.textContent = 'Loading...';
    actions.innerHTML = '';
    overlay.classList.add('visible');
    document.body.style.overflow = 'hidden';

    fetch('/documents/' + docId + '/detail/', {headers:{'X-Requested-With':'XMLHttpRequest'}})
    .then(function(r){return r.json();})
    .then(function(d){
        title.textContent = d.title;
        text.textContent  = d.preview || 'No preview available.';
        if (!d.signed) {
            actions.innerHTML =
                '<button type="button" class="btn btn-primary btn-sm" onclick="'
                + 'document.getElementById(\'doc-preview-overlay\').classList.remove(\'visible\');'
                + 'document.body.style.overflow=\'\';openSignModal(' + d.id + ')">'
                + '<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>'
                + 'Sign This Document</button>';
        }
    })
    .catch(function(){ text.textContent = 'Failed to load document preview.'; });
}
</script>
{% endblock %}