{% extends "base.html" %}

{% block title %}Project Details | PMS{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary: #433185;
        --primary-light: #5a4299;
        --surface: rgba(255, 255, 255, 0.98);
        --surface-soft: #f5f3ff;
        --text: #1f2937;
        --muted: #6b7280;
        --line: #e5e7eb;
    }

    .project-detail-shell { max-width: 1240px; margin: 0 auto; }
    .project-detail-head {
        background: var(--surface);
        border-radius: 1rem;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
        padding: 1.2rem;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.9rem;
        flex-wrap: wrap;
    }
    .project-name { margin: 0; color: var(--primary); font-size: 1.35rem; font-weight: 700; }
    .project-sub { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.92rem; }
    .head-actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
    .btn {
        text-decoration: none;
        padding: 0.5rem 0.8rem;
        border-radius: 0.55rem;
        font-size: 0.88rem;
        font-weight: 600;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
    .btn-back { color: var(--primary); background: #ede9fe; border-color: #ddd6fe; }
    .btn-back:hover { background: #ddd6fe; }
    .btn-edit { color: #fff; background: var(--primary); border-color: var(--primary); }
    .btn-edit:hover { background: var(--primary-light); color: #fff; }
    .btn-danger { color: #dc2626; background: #fff1f2; border-color: #fecaca; }
    .btn-danger:hover { background: #ffe4e6; }

    .detail-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
    .panel {
        background: var(--surface);
        border-radius: 1rem;
        box-shadow: 0 20px 35px rgba(16, 24, 40, 0.09);
        border: 1px solid #e5e7eb;
        padding: 1rem;
    }
    .span-12 { grid-column: span 12; }
    .span-6 { grid-column: span 6; }
    .panel h2 { margin: 0 0 0.8rem; color: var(--primary); font-size: 1rem; font-weight: 700; }

    .meta-list { margin: 0; padding: 0; list-style: none; }
    .meta-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f5f9;
        padding: 0.62rem 0;
        gap: 0.8rem;
    }
    .meta-row:last-child { border-bottom: 0; }
    .meta-key { color: var(--muted); font-size: 0.88rem; font-weight: 600; }
    .meta-val { color: var(--text); font-size: 0.92rem; font-weight: 600; text-align: right; }

    .chip-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
    .chip {
        display: inline-flex;
        align-items: center;
        border: 1px solid #ddd6fe;
        background: var(--surface-soft);
        color: var(--primary);
        border-radius: 999px;
        padding: 0.32rem 0.62rem;
        font-size: 0.83rem;
        font-weight: 600;
    }

    .table-wrap { overflow-x: auto; }
    .data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
    .data-table th {
        text-align: left;
        padding: 0.82rem 0.92rem;
        color: #64748b;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
        background: #f9fafc;
        border-bottom: 1px solid #e5e7eb;
    }
    .data-table td {
        padding: 0.86rem 0.92rem;
        border-bottom: 1px solid #edf1f7;
        color: #1f2937;
        font-size: 0.9rem;
        vertical-align: top;
    }
    .data-table tr:last-child td { border-bottom: 0; }
    .status-pill {
        display: inline-flex;
        border-radius: 999px;
        padding: 0.22rem 0.56rem;
        font-size: 0.74rem;
        font-weight: 700;
        line-height: 1;
        background: #eef2ff;
        color: #433185;
    }
    .muted-empty { color: var(--muted); font-size: 0.9rem; }
    .env-block {
        border: 1px solid #e5e7eb;
        border-radius: 0.78rem;
        padding: 0.9rem;
        background: #fff;
    }

    @media (max-width: 992px) {
        .span-6 { grid-column: span 12; }
    }
    @media (max-width: 768px) {
        .meta-row { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
        .meta-val { text-align: left; }
    }
</style>
{% endblock %}

{% block content %}
<section class="project-detail-shell">
    <header class="project-detail-head">
        <div>
            <h1 class="project-name">{{ project.name|default:"Project" }}</h1>
            <p class="project-sub">Project profile, progress and delivery details.</p>
        </div>
        <div class="head-actions">
            <a href="{% url 'projects:project_update' project.id %}" class="btn btn-edit">
                <i class="bi bi-pencil-square"></i> Edit Project
            </a>
            <a href="{% url 'projects:project_list' %}" class="btn btn-back">
                <i class="bi bi-arrow-left"></i> Back to Projects
            </a>
        </div>
    </header>

    <section class="detail-grid">
        <article class="panel span-6">
            <h2>Project Overview</h2>
            <ul class="meta-list">
                <li class="meta-row"><span class="meta-key">Type of Model</span><span class="meta-val">{{ project.get_model_type_display|default:"-" }}</span></li>
                <li class="meta-row"><span class="meta-key">Type of Project</span><span class="meta-val">{{ project.get_project_type_display|default:"-" }}</span></li>
                <li class="meta-row"><span class="meta-key">Industry</span><span class="meta-val">{{ project.get_industry_display|default:"-" }}</span></li>
                <li class="meta-row"><span class="meta-key">Status</span><span class="meta-val"><span class="status-pill">{{ project.get_status_display|default:"-" }}</span></span></li>
                <li class="meta-row"><span class="meta-key">Start Date</span><span class="meta-val">{{ project.start_date|default:"-" }}</span></li>
                <li class="meta-row"><span class="meta-key">Project Cost</span><span class="meta-val">{{ project.project_cost|default:"-" }}</span></li>
            </ul>
        </article>

        <article class="panel span-6">
            <h2>Links</h2>
            <ul class="meta-list">
                <li class="meta-row"><span class="meta-key">Meeting Link</span><span class="meta-val">{% if project.meeting_link %}<a href="{{ project.meeting_link }}" target="_blank" rel="noopener">Open</a>{% else %}-{% endif %}</span></li>
                <li class="meta-row"><span class="meta-key">Basecamp Link</span><span class="meta-val">{% if project.basecamp_link %}<a href="{{ project.basecamp_link }}" target="_blank" rel="noopener">Open</a>{% else %}-{% endif %}</span></li>
                <li class="meta-row"><span class="meta-key">Case Study Link</span><span class="meta-val">{% if project.case_study_link %}<a href="{{ project.case_study_link }}" target="_blank" rel="noopener">Open</a>{% else %}-{% endif %}</span></li>
                <li class="meta-row"><span class="meta-key">Created</span><span class="meta-val">{{ project.created_at|date:"j F,Y" }}</span></li>
                <li class="meta-row"><span class="meta-key">Updated</span><span class="meta-val">{{ project.updated_at|date:"j F,Y" }}</span></li>
            </ul>
        </article>

        <article class="panel span-12">
            <h2>Clients</h2>
            {% if project.project_relations.all %}
                <div class="chip-list">
                    {% for relation in project.project_relations.all %}
                        {% if relation.client %}
                            <span class="chip">{{ relation.client }}</span>
                        {% endif %}
                    {% endfor %}
                </div>
            {% elif project.clients %}
                <div class="chip-list"><span class="chip">{{ project.clients }}</span></div>
            {% else %}
                <p class="muted-empty">No clients linked.</p>
            {% endif %}
        </article>

        <article class="panel span-12">
            <h2>Vendors</h2>
            {% if vendors %}
                <div class="chip-list">
                    {% for relation in vendors %}
                        {% if relation.vendor %}
                            <span class="chip">{{ relation.vendor.name }}</span>
                        {% endif %}
                    {% endfor %}
                </div>
            {% else %}
                <p class="muted-empty">No vendors linked.</p>
            {% endif %}
        </article>

        <article class="panel span-6">
            <h2>Deliverables</h2>
            {% if project.deliverables.all %}
                <div class="chip-list">
                    {% for d in project.deliverables.all %}
                        <span class="chip">{{ d.name }}</span>
                    {% endfor %}
                </div>
            {% else %}
                <p class="muted-empty">No deliverables selected.</p>
            {% endif %}
        </article>

        <article class="panel span-6">
            <h2>Technologies</h2>
            {% if project.technologies.all %}
                <div class="chip-list">
                    {% for t in project.technologies.all %}
                        <span class="chip">{{ t.name }}</span>
                    {% endfor %}
                </div>
            {% else %}
                <p class="muted-empty">No technologies selected.</p>
            {% endif %}
        </article>

        <article class="panel span-12">
            <h2>Notes</h2>
            {% if project.notes %}
                <div>{{ project.notes|linebreaksbr }}</div>
            {% else %}
                <p class="muted-empty">No notes added.</p>
            {% endif %}
        </article>

        <article class="panel span-12">
            <h2>Payments</h2>
            {% if payments %}
                <div class="table-wrap">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Amount</th>
                                <th>Payment Type</th>
                                <th>Due On</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for payment in payments %}
                                <tr>
                                    <td>{{ payment.amount }}</td>
                                    <td>{{ payment.get_payment_type_display }}</td>
                                    <td>{{ payment.due_on }}</td>
                                    <td><span class="status-pill">{{ payment.get_status_display }}</span></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="muted-empty">No payment records found.</p>
            {% endif %}
        </article>

        <article class="panel span-12">
            <h2>Milestones</h2>
            {% if milestones %}
                <div class="table-wrap">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for milestone in milestones %}
                                <tr>
                                    <td>{{ milestone.name }}</td>
                                    <td>{{ milestone.description|default:"-" }}</td>
                                    <td>{{ milestone.start_date }}</td>
                                    <td>{{ milestone.end_date }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="muted-empty">No milestone records found.</p>
            {% endif %}
        </article>

        <article class="panel span-6">
            <h2>Live Environment</h2>
            <div class="env-block">
                {% if live_environment %}
                    <ul class="meta-list">
                        <li class="meta-row"><span class="meta-key">Google Play</span><span class="meta-val">{{ live_environment.google_play_link|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Apple Store</span><span class="meta-val">{{ live_environment.apple_store_link|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">API URL</span><span class="meta-val">{{ live_environment.api_url|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Admin Panel URL</span><span class="meta-val">{{ live_environment.admin_panel_url|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Admin Username</span><span class="meta-val">{{ live_environment.admin_username|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Admin Password</span><span class="meta-val">{{ live_environment.admin_password|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Website URLs</span><span class="meta-val">{{ live_environment.website_urls|default:"-"|linebreaksbr }}</span></li>
                        <li class="meta-row"><span class="meta-key">Promotional Website</span><span class="meta-val">{{ live_environment.promotional_website|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Social Links</span><span class="meta-val">{{ live_environment.social_links|default:"-"|linebreaksbr }}</span></li>
                    </ul>
                {% else %}
                    <p class="muted-empty">No live environment details.</p>
                {% endif %}
            </div>
        </article>

        <article class="panel span-6">
            <h2>Development Environment</h2>
            <div class="env-block">
                {% if development_environment %}
                    <ul class="meta-list">
                        <li class="meta-row"><span class="meta-key">Google Play</span><span class="meta-val">{{ development_environment.google_play_link|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Apple Store</span><span class="meta-val">{{ development_environment.apple_store_link|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">API URL</span><span class="meta-val">{{ development_environment.api_url|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Admin Panel URL</span><span class="meta-val">{{ development_environment.admin_panel_url|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Admin Username</span><span class="meta-val">{{ development_environment.admin_username|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Admin Password</span><span class="meta-val">{{ development_environment.admin_password|default:"-" }}</span></li>
                        <li class="meta-row"><span class="meta-key">Website URLs</span><span class="meta-val">{{ development_environment.website_urls|default:"-"|linebreaksbr }}</span></li>
                        <li class="meta-row"><span class="meta-key">Promotional Website</span><span class="meta-val">{{ development_environment.promotional_website|default:"-" }}</span></li>
                    </ul>
                {% else %}
                    <p class="muted-empty">No development environment details.</p>
                {% endif %}
            </div>
        </article>
    </section>
</section>
{% endblock %}