{% extends "base.html" %}

{% block title %}프로세스 원가{% endblock %}

{% block head_extra %}
<style>
    .pc-grid {
        display: grid;
        grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 340px);
        gap: 14px;
        align-items: start;
    }

    .pc-shell {
        display: grid;
        gap: 14px;
    }

    .pc-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .pc-source-tabs {
        display: inline-flex;
        gap: 6px;
        background: rgba(245, 247, 249, 0.95);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px;
    }

    .pc-source-tabs a {
        text-decoration: none;
        color: var(--ink);
        font-size: 13px;
        font-weight: 800;
        padding: 8px 12px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .pc-source-tabs a.active {
        background: var(--accent);
        color: #fff;
    }

    .pc-filter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .pc-filter select {
        min-width: 110px;
    }

    .pc-project-search {
        width: 100%;
    }

    .pc-project-list {
        display: grid;
        gap: 8px;
        max-height: calc(100vh - 285px);
        overflow: auto;
        padding-right: 2px;
    }

    .pc-project-item {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.94);
        padding: 10px;
        text-decoration: none;
        color: var(--ink);
        display: grid;
        gap: 5px;
    }

    .pc-project-item.active {
        border-color: #111;
        box-shadow: 0 0 0 1px #111 inset;
    }

    .pc-project-head {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        align-items: baseline;
        font-size: 13px;
    }

    .pc-project-code {
        font-weight: 800;
    }

    .pc-project-name {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pc-metric-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .pc-card {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 6px;
    }

    .pc-card .label {
        font-size: 12px;
        color: var(--muted);
        font-weight: 700;
    }

    .pc-card .value {
        font-size: 24px;
        font-weight: 900;
        letter-spacing: -0.03em;
    }

    .pc-card .meta {
        font-size: 12px;
        color: var(--muted);
    }

    .pc-note {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
    }

    .pc-block {
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
    }

    .pc-block h3 {
        font-size: 15px;
        padding: 11px 12px;
        border-bottom: 1px solid var(--line);
        background: linear-gradient(180deg, #ffffff, #f7f8fa);
    }

    .pc-table-wrap {
        overflow: auto;
        max-height: 390px;
    }

    .pc-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        min-width: 620px;
    }

    .pc-table th,
    .pc-table td {
        border-bottom: 1px solid #eceff4;
        padding: 9px 10px;
        text-align: right;
        white-space: nowrap;
    }

    .pc-table th:first-child,
    .pc-table td:first-child {
        text-align: left;
    }

    .pc-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f5f7fa;
        font-weight: 800;
        color: #353b45;
    }

    .pc-table tr:nth-child(even) td {
        background: #fcfcfd;
    }

    .pc-table td.negative {
        color: #b0272d;
        font-weight: 800;
    }

    .pc-table td.positive {
        color: #1f6f3d;
        font-weight: 800;
    }

    .pc-side-stack {
        display: grid;
        gap: 12px;
    }

    .pc-kpi {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
        display: grid;
        gap: 10px;
    }

    .pc-kpi h3 {
        font-size: 15px;
    }

    .pc-kpi-row {
        display: grid;
        gap: 6px;
    }

    .pc-kpi-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
    }

    .pc-bar {
        height: 8px;
        border-radius: 999px;
        background: #edf1f5;
        overflow: hidden;
    }

    .pc-bar > span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #445a7e, #67a2d4);
        width: 0;
    }

    .pc-mini-chart {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 12px;
    }

    .pc-mini-chart h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .pc-mini-chart svg {
        width: 100%;
        height: auto;
        display: block;
        min-height: 170px;
    }

    .pc-badge {
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 4px 8px;
        font-size: 11px;
        color: var(--muted);
    }

    body[data-view-mode="dual"] .pc-grid {
        grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(300px, 360px);
    }

    body[data-view-mode="dual"] .pc-project-list {
        max-height: calc(100vh - 250px);
    }

    @media (max-width: 1260px) {
        .pc-grid {
            grid-template-columns: 1fr;
        }

        .pc-project-list {
            max-height: 260px;
        }

        .pc-metric-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
</style>
{% endblock %}

{% block content %}
{% set detail = process_cost_detail or {} %}
{% set overview = detail.overview or {} %}
{% set diagnostics = detail.diagnostics or {} %}
<section class="panel pc-shell">
    <div class="section-title" style="margin-bottom: 0;">
        <h2>프로세스 원가 관리</h2>
        <p>토목설계회사 기준 초안 (직접인건비/외주비/설계경비/판관비 중심)</p>
    </div>

    <div class="pc-toolbar">
        <div class="pc-source-tabs">
            <a href="/process-cost?source=hanmac{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}{% if process_cost_selected_code %}&code={{ process_cost_selected_code }}{% endif %}" class="{% if process_cost_source == 'hanmac' %}active{% endif %}">Hanmac ERP</a>
            <a href="/process-cost?source=wehago{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}{% if process_cost_selected_code %}&code={{ process_cost_selected_code }}{% endif %}" class="{% if process_cost_source == 'wehago' %}active{% endif %}">WEHAGO</a>
        </div>
        <form method="get" action="/process-cost" class="pc-filter">
            <input type="hidden" name="source" value="{{ process_cost_source }}">
            <input type="hidden" name="code" value="{{ process_cost_selected_code }}">
            <select name="year" aria-label="연도 선택">
                {% if not process_cost_years %}
                    <option value="">연도 없음</option>
                {% else %}
                    {% for y in process_cost_years|sort(reverse=True) %}
                        <option value="{{ y }}" {% if process_cost_selected_year == y %}selected{% endif %}>{{ y }}</option>
                    {% endfor %}
                {% endif %}
            </select>
            <button type="submit" class="button-secondary">적용</button>
        </form>
    </div>

    <div class="pc-grid">
        <section class="pc-block">
            <h3>프로젝트 선택</h3>
            <div style="padding: 10px;">
                <input type="text" id="projectSearchInput" class="pc-project-search" placeholder="프로젝트 코드/명 검색">
            </div>
            <div class="pc-project-list" id="projectList">
                {% for item in process_cost_projects %}
                    <a
                        href="/process-cost?source={{ process_cost_source }}{% if process_cost_selected_year %}&year={{ process_cost_selected_year }}{% endif %}&code={{ item.support_dept_code }}"
                        class="pc-project-item {% if process_cost_selected_code == item.support_dept_code %}active{% endif %}"
                        data-project-search="{{ (item.support_dept_code ~ ' ' ~ item.support_dept_name ~ ' ' ~ (item.client_name or ''))|lower }}"
                        title="{{ item.support_dept_code }} {{ item.support_dept_name }}"
                    >
                        <div class="pc-project-head">
                            <span class="pc-project-code">{{ item.support_dept_code }}</span>
                            <span class="pc-badge">{{ "{:,.0f}".format(item.expense_amount|default(0)) }}원</span>
                        </div>
                        <div class="pc-project-name">{{ item.support_dept_name }}</div>
                        {% if item.client_name %}
                            <div class="pc-project-name">{{ item.client_name }}</div>
                        {% endif %}
                    </a>
                {% endfor %}
                {% if not process_cost_projects %}
                    <div class="pc-note" style="padding: 12px;">해당 조건의 프로젝트 데이터가 없습니다.</div>
                {% endif %}
            </div>
        </section>

        <section class="pc-shell" style="gap: 12px;">
            <div class="pc-metric-grid">
                <article class="pc-card">
                    <span class="label">계약금액</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.contract_amount|default(0)) }}원</strong>
                    <span class="meta">{{ overview.support_dept_name or '-' }}</span>
                </article>
                <article class="pc-card">
                    <span class="label">누적 수익</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.revenue_amount|default(0)) }}원</strong>
                    <span class="meta">최근 증빙일 {{ overview.last_posting_date or '-' }}</span>
                </article>
                <article class="pc-card">
                    <span class="label">누적 비용</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.expense_amount|default(0)) }}원</strong>
                    <span class="meta">목표원가 {{ "{:,.0f}".format(overview.target_cost_amount|default(0)) }}원</span>
                </article>
                <article class="pc-card">
                    <span class="label">예상 영업수지</span>
                    <strong class="value">{{ "{:,.0f}".format(overview.profit_amount|default(0)) }}원</strong>
                    <span class="meta">마진율 {{ "{:.1f}".format(overview.profit_rate|default(0)) }}%</span>
                </article>
            </div>

            <div class="pc-note">
                설계회사 프로세스 원가 관리 초안: 목표원가(계약금액 기준 85%)와 실제 집행을 비교해 과다/과소 집행 구간을 빠르게 파악합니다.
            </div>

            <section class="pc-block">
                <h3>설계 프로세스별 원가 현황</h3>
                <div class="pc-table-wrap">
                    <table class="pc-table">
                        <thead>
                            <tr>
                                <th>구분</th>
                                <th>목표 원가</th>
                                <th>실제 집행</th>
                                <th>차이(목표-실제)</th>
                                <th>집행률</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in detail.phase_rows or [] %}
                                <tr>
                                    <td>{{ row.phase }}</td>
                                    <td>{{ "{:,.0f}".format(row.target_amount|default(0)) }}</td>
                                    <td>{{ "{:,.0f}".format(row.actual_amount|default(0)) }}</td>
                                    <td class="{% if (row.gap_amount|default(0)) < 0 %}negative{% elif (row.gap_amount|default(0)) > 0 %}positive{% endif %}">
                                        {{ "{:,.0f}".format(row.gap_amount|default(0)) }}
                                    </td>
                                    <td>{{ "{:.1f}".format(row.progress_rate|default(0)) }}%</td>
                                </tr>
                            {% endfor %}
                            {% if not (detail.phase_rows or []) %}
                                <tr><td colspan="5" style="text-align:center; color: var(--muted);">표시할 데이터가 없습니다.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </section>

            <section class="pc-block">
                <h3>계정별 집행 상위 항목</h3>
                <div class="pc-table-wrap">
                    <table class="pc-table">
                        <thead>
                            <tr>
                                <th>계정</th>
                                <th>집행금액</th>
                                <th>비중</th>
                                <th>전표건수</th>
                                <th>최근 증빙일</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in detail.account_rows or [] %}
                                <tr>
                                    <td title="{{ row.account_code }} {{ row.account_name }}">{{ row.account_code }} {{ row.account_name }}</td>
                                    <td>{{ "{:,.0f}".format(row.amount|default(0)) }}</td>
                                    <td>{{ "{:.1f}".format(row.share_rate|default(0)) }}%</td>
                                    <td>{{ "{:,}".format(row.row_count|default(0)) }}</td>
                                    <td>{{ row.last_posting_date or '-' }}</td>
                                </tr>
                            {% endfor %}
                            {% if not (detail.account_rows or []) %}
                                <tr><td colspan="5" style="text-align:center; color: var(--muted);">표시할 데이터가 없습니다.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </section>
        </section>

        <aside class="pc-side-stack">
            <section class="pc-kpi">
                <h3>원가 건전성 지표</h3>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>비용/수익 비율</span><strong>{{ "{:.1f}".format(diagnostics.cost_to_revenue_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.cost_to_revenue_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>직접인건비 비중</span><strong>{{ "{:.1f}".format(diagnostics.labor_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.labor_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>외주비 비중</span><strong>{{ "{:.1f}".format(diagnostics.outsourcing_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.outsourcing_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>설계경비 비중</span><strong>{{ "{:.1f}".format(diagnostics.design_cost_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.design_cost_ratio|default(0) }}"></span></div>
                </div>
                <div class="pc-kpi-row">
                    <div class="pc-kpi-head"><span>판관비 비중</span><strong>{{ "{:.1f}".format(diagnostics.sga_ratio|default(0)) }}%</strong></div>
                    <div class="pc-bar"><span data-rate="{{ diagnostics.sga_ratio|default(0) }}"></span></div>
                </div>
            </section>

            <section class="pc-kpi">
                <h3>데이터 현황</h3>
                <div class="pc-kpi-head"><span>선택 소스</span><strong>{% if process_cost_source == 'wehago' %}WEHAGO{% else %}Hanmac ERP{% endif %}</strong></div>
                <div class="pc-kpi-head"><span>연도</span><strong>{{ process_cost_selected_year or '-' }}</strong></div>
                <div class="pc-kpi-head"><span>전표 건수</span><strong>{{ "{:,}".format(overview.voucher_count|default(0)) }}</strong></div>
                <div class="pc-kpi-head"><span>행 건수</span><strong>{{ "{:,}".format(overview.row_count|default(0)) }}</strong></div>
                <div class="pc-kpi-head"><span>실행률</span><strong>{{ "{:.1f}".format(overview.execution_rate|default(0)) }}%</strong></div>
            </section>

            <section class="pc-mini-chart">
                <h3>최근 월별 수익/비용 추이</h3>
                <svg id="processMonthlyChart" viewBox="0 0 540 220" preserveAspectRatio="xMidYMid meet"></svg>
            </section>
        </aside>
    </div>
</section>
{% endblock %}

{% block script %}
<script>
    (() => {
        const searchInput = document.getElementById("projectSearchInput");
        const list = document.getElementById("projectList");
        if (searchInput && list) {
            searchInput.addEventListener("input", () => {
                const keyword = (searchInput.value || "").trim().toLowerCase();
                list.querySelectorAll("[data-project-search]").forEach((item) => {
                    const text = (item.dataset.projectSearch || "").toLowerCase();
                    item.style.display = !keyword || text.includes(keyword) ? "" : "none";
                });
            });
        }

        document.querySelectorAll(".pc-bar > span[data-rate]").forEach((bar) => {
            const raw = Number(bar.dataset.rate || 0);
            const width = Math.max(0, Math.min(raw, 100));
            bar.style.width = `${width}%`;
        });

        const monthlyRows = {{ (process_cost_detail.monthly_rows or []) | tojson }};
        const svg = document.getElementById("processMonthlyChart");
        if (!svg || !Array.isArray(monthlyRows) || !monthlyRows.length) {
            if (svg) {
                svg.innerHTML = '<text x="50%" y="50%" text-anchor="middle" fill="#7a8089" font-size="13">월별 데이터가 없습니다.</text>';
            }
            return;
        }

        const width = 540;
        const height = 220;
        const pad = { top: 16, right: 14, bottom: 36, left: 42 };
        const plotW = width - pad.left - pad.right;
        const plotH = height - pad.top - pad.bottom;
        const maxVal = Math.max(
            ...monthlyRows.map((row) => Number(row.revenue_amount || 0)),
            ...monthlyRows.map((row) => Number(row.expense_amount || 0)),
            1
        );
        const stepX = monthlyRows.length > 1 ? plotW / (monthlyRows.length - 1) : 0;
        const y = (v) => pad.top + (1 - Math.min(v / maxVal, 1)) * plotH;
        const x = (i) => pad.left + stepX * i;

        const revenuePoints = monthlyRows.map((row, i) => `${x(i)},${y(Number(row.revenue_amount || 0))}`).join(" ");
        const expensePoints = monthlyRows.map((row, i) => `${x(i)},${y(Number(row.expense_amount || 0))}`).join(" ");

        let labels = "";
        monthlyRows.forEach((row, i) => {
            labels += `<text x="${x(i)}" y="${height - 12}" text-anchor="middle" fill="#677182" font-size="10">${(row.month_label || '').slice(2)}</text>`;
        });

        svg.innerHTML = `
            <line x1="${pad.left}" y1="${pad.top}" x2="${pad.left}" y2="${height - pad.bottom}" stroke="#d9dde3" />
            <line x1="${pad.left}" y1="${height - pad.bottom}" x2="${width - pad.right}" y2="${height - pad.bottom}" stroke="#d9dde3" />
            <polyline points="${revenuePoints}" fill="none" stroke="#2c5f96" stroke-width="2.3" />
            <polyline points="${expensePoints}" fill="none" stroke="#d9822b" stroke-width="2.3" />
            ${labels}
            <text x="${pad.left}" y="${pad.top - 3}" fill="#2c5f96" font-size="11">수익</text>
            <text x="${pad.left + 36}" y="${pad.top - 3}" fill="#d9822b" font-size="11">비용</text>
        `;
    })();
</script>
{% endblock %}