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

{% block title %}Assets — ClientPortal{% endblock %}
{% block topbar_title %}Asset Uploads{% endblock %}

{% block content %}
<div class="section-header">
    <div class="section-title">Asset Uploads</div>
    <div class="section-sub">Please upload all required assets so the team can proceed with production.</div>
</div>

<div class="card card-padded">
    <div class="card-header">
        <div>
            <div class="card-title">Required Assets</div>
            <div class="card-sub">{{ assets|length }} asset{{ assets|length|pluralize }} — {{ missing_count }} required upload{{ missing_count|pluralize }} outstanding</div>
        </div>
    </div>

    <div class="asset-list">
        {% for asset in assets %}
        <div class="asset-item" id="asset-row-{{ asset.id }}"
             style="{% if asset.status == 'requested' and asset.required %}border-color:#fecaca;{% endif %}">
            <div class="asset-item-top">
                <div class="asset-icon" style="background:{% if asset.status == 'approved' %}var(--success-light){% elif asset.status == 'uploaded' %}var(--blue-light){% else %}#fff5f5{% endif %}">
                    {% if asset.status == 'approved' %}
                    <svg width="16" height="16" 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>
                    {% elif asset.status == 'uploaded' %}
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"/></svg>
                    {% else %}
                    <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>
                    {% endif %}
                </div>
                <div class="asset-info">
                    <div class="asset-name">{{ asset.title }}</div>
                    {% if asset.description %}
                    <div class="asset-desc">{{ asset.description }}</div>
                    {% endif %}
                    {% if asset.deadline %}
                    <div class="asset-desc" style="color:{% if asset.is_overdue %}var(--danger){% else %}var(--text3){% endif %};">
                        {% if asset.is_overdue %}⚠ Overdue — {% endif %}Due {{ asset.deadline|date:"d M Y" }}
                    </div>
                    {% endif %}
                    {% if asset.file_name %}
                    <div class="uploaded-file"><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> {{ asset.file_name }}</div>
                    {% endif %}
                </div>
            </div>

            <div class="asset-bottom">
                <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                    {% if asset.status == 'requested' %}
                        <span class="badge badge-missing">Missing</span>
                    {% elif asset.status == 'uploaded' %}
                        <span class="badge badge-uploaded">Uploaded</span>
                    {% elif asset.status == 'approved' %}
                        <span class="badge badge-approved">✓ Approved</span>
                    {% endif %}

                    {% if asset.required %}
                    <span class="asset-req">Required</span>
                    {% else %}
                    <span class="asset-req optional">Optional</span>
                    {% endif %}
                </div>

                <div style="display:flex;gap:6px;flex-wrap:wrap;">
                    {% if asset.file %}
                    <button type="button" class="btn btn-outline btn-sm" onclick="previewAsset({{ asset.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"/></svg>
                        Preview
                    </button>
                    <a href="{% url 'client_portal:download_asset' asset.id %}" 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 asset.status == 'requested' %}
                    <label class="upload-label" for="upload-{{ asset.id }}">
                        <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-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>
                        Upload File
                    </label>
                    <input type="file" class="upload-input" id="upload-{{ asset.id }}" data-asset-id="{{ asset.id }}">
                    {% elif asset.status == 'uploaded' %}
                    <button type="button" class="btn btn-outline btn-sm replace-btn" data-asset-id="{{ asset.id }}">Replace</button>
                    {% endif %}
                </div>
            </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 assets required for this project yet.</p>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Asset Preview Modal -->
<div id="asset-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="asset-preview-title">Asset</div>
            <button class="modal-close" type="button"
                    onclick="document.getElementById('asset-preview-overlay').classList.remove('visible');document.body.style.overflow='';">✕</button>
        </div>
        <div class="modal-body">
            <div id="asset-preview-body">Loading...</div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function previewAsset(assetId) {
    var overlay = document.getElementById('asset-preview-overlay');
    var title   = document.getElementById('asset-preview-title');
    var body    = document.getElementById('asset-preview-body');
    body.textContent = 'Loading...';
    overlay.classList.add('visible');
    document.body.style.overflow = 'hidden';

    fetch('/assets/' + assetId + '/preview/', {headers:{'X-Requested-With':'XMLHttpRequest'}})
    .then(function(r){return r.json();})
    .then(function(d){
        title.textContent = d.title;
        var html = '';
        if (d.description) html += '<p style="font-size:13px;color:var(--text2);margin-bottom:14px;">' + d.description + '</p>';
        html += '<div style="display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;">';
        html += '<span class="badge badge-' + (d.status === 'Approved' ? 'approved' : d.status === 'Uploaded' ? 'uploaded' : 'missing') + '">' + d.status + '</span>';
        if (d.required) html += '<span style="font-size:10px;font-weight:700;color:var(--danger);text-transform:uppercase;">Required</span>';
        html += '</div>';
        if (d.has_file) {
            html += '<div style="padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;">';
            html += '<div style="font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px;">Uploaded File</div>';
            html += '<div style="font-size:13px;font-weight:600;color:var(--navy);">📎 ' + d.file_name + '</div>';
            if (d.uploaded_at) html += '<div style="font-size:11px;color:var(--text3);margin-top:2px;">Uploaded ' + d.uploaded_at + '</div>';
            if (d.is_image && d.file_url) {
                html += '<img src="' + d.file_url + '" style="max-width:100%;max-height:260px;margin-top:10px;border-radius:8px;border:1px solid var(--border);" />';
            }
            html += '<div style="margin-top:10px;"><a href="/assets/' + d.id + '/download/" class="btn btn-outline btn-sm">Download</a></div>';
            html += '</div>';
        }
        body.innerHTML = html;
    })
    .catch(function(){ body.textContent = 'Failed to load preview.'; });
}
</script>
{% endblock %}