{% extends "tasks/base.html" %}
{% load tasks_tags %}
{% block title %}Assets — {{ project.name }}{% endblock %}
{% block topbar_title %}{{ project.name }}{% endblock %}
{% block topbar_actions %}
{% if request.user|has_perm:"request_assets" %}
<a href="{% url 'task_management:asset_request_create' project.id %}" class="s-btn s-btn-primary s-btn-sm">+ Request Asset</a>
{% endif %}
{% endblock %}
{% block content %}
<div class="s-tabs">
    <a href="{% url 'task_management:project_detail' project.id %}" class="s-tab">Overview</a>
    <a href="{% url 'task_management:project_kanban' project.id %}" class="s-tab">Kanban</a>
    <a href="{% url 'task_management:project_gantt' project.id %}" class="s-tab">Gantt</a>
    <a href="{% url 'task_management:document_request_list' project.id %}" class="s-tab">Docs</a>
    <a href="{% url 'task_management:asset_request_list' project.id %}" class="s-tab active">Assets</a>
</div>
<div class="s-card s-card-pad">
    <div class="s-card-header">
        <div class="s-card-title">Asset Requests ({{ asset_requests|length }})</div>
    </div>
    {% for asset in asset_requests %}
    <div style="padding:12px 0;border-bottom:1px solid var(--s-border);">
        <div style="display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;">
            <div style="flex:1;min-width:180px;">
                <div style="font-size:13px;font-weight:600;color:var(--s-navy);">{{ asset.title }}</div>
                <div style="font-size:11px;color:var(--s-text3);margin-top:2px;">
                    {{ asset.description|truncatewords:15 }}
                    {% if asset.required %} · <span style="color:var(--s-red);font-weight:700;">Required</span>{% endif %}
                    {% if asset.deadline %} · Due {{ asset.deadline|date:"d M Y" }}{% endif %}
                </div>
                {% if asset.file_name %}
                <div style="display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 8px;background:var(--s-green-light);border-radius:4px;font-size:10px;color:#065f46;">
                    📎 {{ asset.file_name }}
                    {% if asset.uploaded_at %}<span style="color:var(--s-text3);"> · {{ asset.uploaded_at|date:"d M Y" }}</span>{% endif %}
                </div>
                {% endif %}
            </div>
            <div style="display:flex;gap:4px;align-items:center;flex-wrap:wrap;flex-shrink:0;">
                <span class="s-badge {% if asset.status == 'approved' %}s-badge-green{% elif asset.status == 'uploaded' %}s-badge-blue{% elif asset.status == 'rejected' %}s-badge-red{% elif asset.status == 'requested' %}s-badge-amber{% else %}s-badge-gray{% endif %}">{{ asset.get_status_display }}</span>
                {% if asset.portal_visible %}<span style="font-size:8px;color:var(--s-green);font-weight:700;">● PORTAL</span>{% endif %}
            </div>
        </div>
        <div style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;">
            <button type="button" class="s-btn s-btn-outline s-btn-sm" onclick="previewAssetRequest({{ asset.id }})">Preview</button>
            {% if asset.file %}<a href="{% url 'task_management:asset_request_download' asset.id %}" class="s-btn s-btn-outline s-btn-sm">Download</a>{% endif %}
            {% if asset.status == 'uploaded' and request.user|has_perm:"approve_asset_requests" %}
            <form method="post" action="{% url 'task_management:asset_request_approve' asset.id %}" style="display:inline;">{% csrf_token %}<button type="submit" class="s-btn s-btn-success s-btn-sm">✓ Approve</button></form>
            <form method="post" action="{% url 'task_management:asset_request_reject' asset.id %}" style="display:inline;">{% csrf_token %}<button type="submit" class="s-btn s-btn-outline s-btn-sm" style="color:var(--s-red);" onclick="return confirm('Reject and ask client to re-upload?')">Reject</button></form>
            {% endif %}
            {% if asset.status == 'draft' %}
                {% if request.user|has_perm:"request_assets" %}
                <form method="post" action="{% url 'task_management:asset_request_push' asset.id %}" style="display:inline;">{% csrf_token %}<button type="submit" class="s-btn s-btn-blue s-btn-sm">Send to Client</button></form>
                <a href="{% url 'task_management:asset_request_edit' asset.id %}" class="s-btn s-btn-outline s-btn-sm">Edit</a>
                <button type="button" class="s-btn s-btn-outline s-btn-sm" style="color:var(--s-red);" onclick="openDeleteModal('{% url 'task_management:asset_request_delete' asset.id %}', '{{ asset.title|escapejs }}')">Delete</button>
                {% endif %}
            {% endif %}
        </div>
    </div>
    {% empty %}
    <div class="s-empty"><p>No asset requests yet.</p></div>
    {% endfor %}
</div>
{% if assets_page and assets_page.paginator.num_pages > 1 %}
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;">
    <div>Page {{ assets_page.number }} of {{ assets_page.paginator.num_pages }}</div>
    <div style="display:flex;gap:8px;">
        {% if assets_page.has_previous %}<a class="s-btn s-btn-outline s-btn-sm" href="?assets_page={{ assets_page.previous_page_number }}">← Previous</a>{% endif %}
        {% if assets_page.has_next %}<a class="s-btn s-btn-outline s-btn-sm" href="?assets_page={{ assets_page.next_page_number }}">Next →</a>{% endif %}
    </div>
</div>
{% endif %}
<!-- Preview Modal -->
<div id="asset-preview-modal" class="s-modal-overlay" onclick="if(event.target===this)this.classList.remove('visible')">
    <div class="s-modal" style="max-width:540px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
            <div class="s-modal-title" id="asset-preview-title">Asset</div>
            <button type="button" onclick="document.getElementById('asset-preview-modal').classList.remove('visible')" style="background:none;border:none;font-size:18px;cursor:pointer;color:var(--s-text3);">✕</button>
        </div>
        <div id="asset-preview-body" style="font-size:13px;color:var(--s-text2);line-height:1.6;">Loading...</div>
    </div>
</div>
<script>
function previewAssetRequest(id) {
    var modal = document.getElementById('asset-preview-modal');
    var title = document.getElementById('asset-preview-title');
    var body  = document.getElementById('asset-preview-body');
    body.textContent = 'Loading...';
    modal.classList.add('visible');
    fetch('/staff/assets/' + id + '/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="margin-bottom:12px;">' + d.description + '</p>';
        html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;margin-bottom:12px;">';
        html += '<div><strong>Status:</strong> ' + d.status + '</div>';
        html += '<div><strong>Required:</strong> ' + (d.required ? 'Yes' : 'No') + '</div>';
        if (d.deadline) html += '<div><strong>Deadline:</strong> ' + d.deadline + '</div>';
        html += '<div><strong>Portal:</strong> ' + (d.portal_visible ? '✓ Visible' : 'Hidden') + '</div>';
        html += '</div>';
        if (d.has_file) {
            html += '<div style="padding:10px;background:var(--s-bg);border-radius:6px;margin-bottom:12px;">';
            html += '<div style="font-size:11px;font-weight:700;color:var(--s-text3);margin-bottom:6px;">UPLOADED FILE</div>';
            html += '<div style="font-size:12px;font-weight:600;">📎 ' + d.file_name + '</div>';
            if (d.uploaded_at) html += '<div style="font-size:10px;color:var(--s-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:200px;margin-top:8px;border-radius:6px;border:1px solid var(--s-border);" />';
            html += '<div style="margin-top:8px;"><a href="/staff/assets/' + d.id + '/download/" class="s-btn s-btn-outline s-btn-sm">Download</a></div>';
            html += '</div>';
        }
        body.innerHTML = html;
    });
}
</script>
{% endblock %}