{% extends "base.html" %}
{% block title %}Proposals - ICDEV™{% endblock %}

{% block content %}
{% from "includes/classification_macros.html" import design_classification_banner %}
{{ design_classification_banner('CUI') }}
<div class="breadcrumbs"><a href="/">Home</a><span class="separator">/</span><span>Proposals</span></div>

<div class="page-header">
    <h1>Proposal Opportunities</h1>
    <p class="subtitle">GovCon proposal writing lifecycle tracker</p>
</div>

<!-- Weighted Pipeline Value Banner -->
{% if pipeline_rollup %}
<div style="background:var(--bg-card,#16213e);border:1px solid var(--border-color,#2a2a4a);border-radius:8px;padding:16px 20px;margin-bottom:16px;display:flex;gap:24px;align-items:center;flex-wrap:wrap;">
  <div>
    <div style="font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;">Weighted Pipeline Value</div>
    <div style="font-size:1.6rem;font-weight:bold;color:var(--accent-color,#4a90d9);" id="banner-weighted">${{ "{:,.0f}".format(pipeline_rollup.total_weighted_pipeline_value) }}</div>
  </div>
  <div style="width:1px;background:var(--border-color);height:40px;"></div>
  <div>
    <div style="font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;">Total Potential</div>
    <div style="font-size:1.6rem;font-weight:bold;">${{ "{:,.0f}".format(pipeline_rollup.total_potential_value) }}</div>
  </div>
  <div style="width:1px;background:var(--border-color);height:40px;"></div>
  <div>
    <div style="font-size:0.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.05em;">Scored / Total</div>
    <div style="font-size:1.6rem;font-weight:bold;">{{ pipeline_rollup.scored_count }} / {{ (pipeline_rollup.scored_count + pipeline_rollup.unscored_count) }}</div>
  </div>
  <div style="margin-left:auto;">
    <button class="btn btn-secondary" onclick="refreshPipelineValue()" style="font-size:0.8rem;">Refresh Roll-Up</button>
  </div>
</div>
{% endif %}

<!-- Stat Grid — govcon-matched colors -->
<style>
.prop-stat{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:14px 16px;position:relative;overflow:hidden;}
.prop-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius-lg) 0 0 var(--radius-lg);}
.prop-stat.blue::before{background:var(--accent-blue,#4a90d9);}
.prop-stat.orange::before{background:#e8590c;}
.prop-stat.purple::before{background:#9c27b0;}
.prop-stat.green::before{background:var(--status-green,#28a745);}
.prop-stat.yellow::before{background:var(--status-yellow,#ffc107);}
.prop-stat-val{font-size:1.9rem;font-weight:700;line-height:1;}
.prop-stat.blue .prop-stat-val{color:var(--accent-blue,#4a90d9);}
.prop-stat.orange .prop-stat-val{color:#f57c4a;}
.prop-stat.purple .prop-stat-val{color:#ce93d8;}
.prop-stat.green .prop-stat-val{color:var(--status-green,#28a745);}
.prop-stat.yellow .prop-stat-val{color:var(--status-yellow,#ffc107);}
.prop-stat-lbl{font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-top:4px;}
.prop-stage-badge{display:inline-block;font-size:0.7rem;padding:2px 7px;border-radius:4px;font-weight:600;border:1px solid;}
.prop-stage-discover{background:rgba(74,144,217,.15);color:#6db3f8;border-color:rgba(74,144,217,.3);}
.prop-stage-extract {background:rgba(232,89,12,.15); color:#f57c4a;border-color:rgba(232,89,12,.3);}
.prop-stage-map     {background:rgba(40,167,69,.15);  color:#4caf50;border-color:rgba(40,167,69,.3);}
.prop-stage-draft   {background:rgba(156,39,176,.15); color:#ce93d8;border-color:rgba(156,39,176,.3);}
.prop-stage-submit  {background:rgba(40,167,69,.12);  color:#66bb6a;border-color:rgba(40,167,69,.25);}
.prop-stage-won     {background:rgba(0,137,123,.15);  color:#26a69a;border-color:rgba(0,137,123,.3);}
.prop-stage-lost    {background:rgba(220,53,69,.15);  color:#ef5350;border-color:rgba(220,53,69,.3);}
.prop-content-pill{display:inline-flex;align-items:center;gap:3px;font-size:0.67rem;padding:1px 6px;border-radius:10px;background:rgba(74,144,217,.15);color:#6db3f8;border:1px solid rgba(74,144,217,.25);vertical-align:middle;margin-left:4px;}
</style>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px;" id="prop-stats">
    <div class="prop-stat blue">
        <div class="prop-stat-val" id="stat-total">{{ opportunities | length }}</div>
        <div class="prop-stat-lbl">Total</div>
    </div>
    <div class="prop-stat orange">
        <div class="prop-stat-val" id="stat-writing">{{ opportunities | selectattr('status', 'in', ['writing']) | list | length }}</div>
        <div class="prop-stat-lbl">In Writing</div>
    </div>
    <div class="prop-stat purple">
        <div class="prop-stat-val" id="stat-review">{{ opportunities | selectattr('status', 'equalto', 'review') | list | length }}</div>
        <div class="prop-stat-lbl">In Review</div>
    </div>
    <div class="prop-stat green">
        <div class="prop-stat-val" id="stat-submitted">{{ opportunities | selectattr('status', 'equalto', 'submitted') | list | length }}</div>
        <div class="prop-stat-lbl">Submitted</div>
    </div>
    <div class="prop-stat yellow">
        <div class="prop-stat-val {% if nearest_deadline and nearest_deadline <= 7 %}text-danger{% elif nearest_deadline and nearest_deadline <= 14 %}text-warning{% endif %}" id="stat-deadline">
            {{ nearest_deadline if nearest_deadline is not none else '—' }}
        </div>
        <div class="prop-stat-lbl">Days to Deadline</div>
    </div>
</div>

<!-- Actions -->
<div style="margin: 16px 0; display: flex; gap: 8px;">
    <button class="btn btn-primary" onclick="openOppModal()">+ New Opportunity</button>
    <a href="/proposals/reviews-dashboard" class="btn btn-secondary">Executive Review Dashboard</a>
</div>

<!-- pWin Factor Legend -->
<div id="pwin-legend" style="display:none;background:var(--bg-card,#16213e);border:1px solid var(--border-color,#2a2a4a);border-radius:8px;padding:12px 16px;margin-bottom:12px;">
  <div style="font-size:0.8rem;font-weight:600;margin-bottom:8px;">pWin Factor Breakdown</div>
  <div id="pwin-legend-content" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;font-size:0.78rem;"></div>
  <button onclick="document.getElementById('pwin-legend').style.display='none'" style="margin-top:8px;font-size:0.75rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;">Close</button>
</div>

<!-- Opportunity Table -->
<div class="table-container" data-no-enhance="true">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:10px 16px;border-bottom:1px solid var(--border-color);">
        <div style="display:flex;align-items:center;gap:8px;">
            <h2 style="margin:0;">Opportunities</h2>
            <span style="font-size:0.7rem;padding:2px 8px;border-radius:12px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-muted);">{{ opportunities | length }}</span>
        </div>
        <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
            {# Stage legend #}
            <span class="prop-stage-badge prop-stage-discover">🔍 Discover</span>
            <span class="prop-stage-badge prop-stage-extract">⚙️ Extract</span>
            <span class="prop-stage-badge prop-stage-map">🗺️ Map</span>
            <span class="prop-stage-badge prop-stage-draft">✍️ Draft</span>
            <span class="prop-stage-badge prop-stage-submit">✅ Submitted</span>
            <input type="text" id="opp-search" placeholder="Search..." oninput="filterOpps(this.value)"
                   style="padding:4px 10px;border:1px solid var(--border-color);border-radius:4px;background:var(--bg-input);color:var(--text-primary);font-size:0.82rem;width:160px;">
            <a href="/api/proposals/export/csv" class="btn btn-secondary" style="font-size:0.78rem;padding:4px 10px;">Export CSV</a>
        </div>
    </div>
    <table id="opp-table" style="width:100%;border-collapse:collapse;">
        <thead>
            <tr>
                <th style="width:28px;"></th>
                <th>Solicitation #</th>
                <th>Title</th>
                <th>Agency</th>
                <th>Due</th>
                <th>Days</th>
                <th>Type</th>
                <th>Set-Aside</th>
                <th>Status</th>
                <th style="min-width:110px;">pWin</th>
                <th style="min-width:100px;">Wtd Value</th>
                <th>Mgr</th>
            </tr>
        </thead>
        <tbody>
            {% for opp in opportunities %}
            {# Determine pipeline stage #}
            {% set st = opp.status %}
            {% set cp = opp.capture_phase or '' %}
            {% if st in ('intake', 'bid_no_bid') %}
              {% set stage_icon = '🔍' %}{% set stage_cls = 'prop-stage-discover' %}{% set row_color = 'rgba(74,144,217,.06)' %}{% set border_color = '#4a90d9' %}
            {% elif st == 'go' and cp == 'map' %}
              {% set stage_icon = '🗺️' %}{% set stage_cls = 'prop-stage-map' %}{% set row_color = 'rgba(40,167,69,.06)' %}{% set border_color = '#4caf50' %}
            {% elif st == 'go' %}
              {% set stage_icon = '⚙️' %}{% set stage_cls = 'prop-stage-extract' %}{% set row_color = 'rgba(232,89,12,.06)' %}{% set border_color = '#f57c4a' %}
            {% elif st in ('writing', 'review', 'final') %}
              {% set stage_icon = '✍️' %}{% set stage_cls = 'prop-stage-draft' %}{% set row_color = 'rgba(156,39,176,.06)' %}{% set border_color = '#ce93d8' %}
            {% elif st == 'submitted' %}
              {% set stage_icon = '✅' %}{% set stage_cls = 'prop-stage-submit' %}{% set row_color = 'rgba(40,167,69,.04)' %}{% set border_color = '#66bb6a' %}
            {% elif st == 'won' %}
              {% set stage_icon = '🏆' %}{% set stage_cls = 'prop-stage-won' %}{% set row_color = 'rgba(0,137,123,.06)' %}{% set border_color = '#26a69a' %}
            {% else %}
              {% set stage_icon = '—' %}{% set stage_cls = 'prop-stage-lost' %}{% set row_color = 'rgba(220,53,69,.04)' %}{% set border_color = '#ef5350' %}
            {% endif %}
            <tr style="border-left:3px solid {{ border_color }};background:{{ row_color }};" class="opp-row">
                <td style="text-align:center;font-size:0.95rem;" title="{{ st | replace('_',' ') | title }}">{{ stage_icon }}</td>
                <td style="white-space:nowrap;">
                    <a href="/proposals/{{ opp.id }}" style="color:{{ border_color }};font-weight:700;font-size:0.85rem;">{{ opp.solicitation_number }}</a>
                </td>
                <td style="max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ opp.title }}">
                    <a href="/proposals/{{ opp.id }}" style="color:var(--text-primary);">{{ opp.title[:52] }}{% if opp.title|length > 52 %}…{% endif %}</a>
                    {% if opp.section_count %}
                    <span class="prop-content-pill" title="{{ opp.section_count }} section(s) with content">📄 {{ opp.section_count }}</span>
                    {% endif %}
                </td>
                <td style="color:var(--text-secondary);font-size:0.82rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ opp.agency }}">{{ opp.agency[:30] }}{% if opp.agency|length > 30 %}…{% endif %}</td>
                <td style="color:var(--text-secondary);font-size:0.82rem;white-space:nowrap;">{{ opp.due_date or '—' }}</td>
                <td style="font-weight:700;font-size:0.88rem;white-space:nowrap;{% if opp.days_left is not none and opp.days_left <= 7 %}color:var(--status-red,#dc3545);{% elif opp.days_left is not none and opp.days_left <= 14 %}color:var(--status-yellow,#ffc107);{% else %}color:{{ border_color }};{% endif %}">
                    {{ opp.days_left if opp.days_left is not none else '—' }}
                </td>
                <td><span style="font-size:0.72rem;padding:2px 6px;border-radius:3px;background:rgba(74,144,217,.15);color:#6db3f8;border:1px solid rgba(74,144,217,.25);">{{ opp.proposal_type }}</span></td>
                <td style="color:var(--text-secondary);font-size:0.8rem;">{{ opp.set_aside_type or '—' }}</td>
                <td>
                    <span class="prop-stage-badge {{ stage_cls }}">{{ stage_icon }} {{ st | replace('_',' ') | title }}</span>
                    {% if opp.section_count %}
                    <a href="/writeguard?opp_id={{ opp.id }}" title="Open in WriteGuard" style="font-size:0.68rem;margin-left:4px;color:var(--text-muted);text-decoration:none;padding:1px 5px;border:1px solid var(--border-color);border-radius:3px;" target="_blank">WG</a>
                    {% endif %}
                </td>
                <td>
                  {% set display_pwin = opp.computed_pwin_pct if opp.computed_pwin_pct is not none else opp.win_probability %}
                  {% if display_pwin is not none %}
                    {% set pct = display_pwin | int %}
                    {% if pct >= 70 %}{% set bar_color = 'var(--status-green,#4caf50)' %}
                    {% elif pct >= 40 %}{% set bar_color = 'var(--status-yellow,#ffc107)' %}
                    {% else %}{% set bar_color = 'var(--status-red,#dc3545)' %}{% endif %}
                    <div style="display:flex;align-items:center;gap:5px;">
                      <div style="flex:1;background:var(--bg-secondary);border-radius:3px;height:5px;min-width:44px;">
                        <div style="background:{{ bar_color }};height:5px;border-radius:3px;width:{{ pct }}%;"></div>
                      </div>
                      <span style="color:{{ bar_color }};font-weight:700;font-size:0.8rem;min-width:30px;">{{ pct }}%</span>
                      {% if opp.has_pwin_model %}
                        <span style="cursor:pointer;font-size:0.65rem;color:var(--accent-blue,#4a90d9);"
                              onclick="showFactors('{{ opp.id }}', {{ opp.pwin_factors | tojson if opp.pwin_factors else 'null' }})">ℹ</span>
                      {% else %}
                        <button onclick="openPwinModal('{{ opp.id }}')" style="font-size:0.62rem;padding:1px 5px;background:none;border:1px solid var(--border-color);border-radius:3px;color:var(--text-secondary);cursor:pointer;">Score</button>
                      {% endif %}
                    </div>
                  {% else %}
                    <span style="color:var(--text-muted);">—</span>
                    <button onclick="openPwinModal('{{ opp.id }}')" style="font-size:0.62rem;padding:1px 5px;background:none;border:1px solid var(--border-color);border-radius:3px;color:var(--text-secondary);cursor:pointer;margin-left:4px;">Score</button>
                  {% endif %}
                </td>
                <td style="font-size:0.85rem;font-weight:600;color:var(--status-green,#28a745);">
                  {% if opp.weighted_value is not none %}${{ "{:,.0f}".format(opp.weighted_value) }}
                  {% else %}<span style="color:var(--text-muted);">—</span>{% endif %}
                </td>
                <td style="color:var(--text-secondary);font-size:0.82rem;">{{ opp.proposal_manager or '—' }}</td>
            </tr>
            {% else %}
            <tr><td colspan="12" style="text-align:center;padding:1.5rem;color:var(--text-muted);">No opportunities yet. Click "+ New Opportunity" to create one.</td></tr>
            {% endfor %}
        </tbody>
    </table>
    <div style="padding:8px 12px;font-size:0.75rem;color:var(--text-muted);border-top:1px solid var(--border-color);" id="opp-count">
        Showing {{ opportunities | length }} rows
    </div>
</div>
<script>
function filterOpps(q) {
    q = q.toLowerCase();
    var rows = document.querySelectorAll('#opp-table tbody .opp-row');
    var count = 0;
    rows.forEach(function(r) {
        var match = r.textContent.toLowerCase().includes(q);
        r.style.display = match ? '' : 'none';
        if (match) count++;
    });
    document.getElementById('opp-count').textContent = 'Showing ' + count + ' rows';
}
</script>

<!-- Create Opportunity Modal -->
<div id="create-opp-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>New Opportunity</h2>
            <button class="modal-close" onclick="closeOppModal()">&times;</button>
        </div>
        <form id="create-opp-form" onsubmit="return submitOppForm(event)">
            <div class="form-grid">
                <div class="form-group">
                    <label>Solicitation Number *</label>
                    <input type="text" name="solicitation_number" required placeholder="e.g., W911NF-25-R-0001">
                </div>
                <div class="form-group">
                    <label>Title *</label>
                    <input type="text" name="title" required placeholder="Proposal title">
                </div>
                <div class="form-group">
                    <label>Agency *</label>
                    <input type="text" name="agency" required placeholder="e.g., U.S. Army">
                </div>
                <div class="form-group">
                    <label>Sub-Agency</label>
                    <input type="text" name="sub_agency" placeholder="e.g., PEO IEW&amp;S">
                </div>
                <div class="form-group">
                    <label>Due Date *</label>
                    <input type="date" name="due_date" required>
                </div>
                <div class="form-group">
                    <label>Proposal Type *</label>
                    <select name="proposal_type" required>
                        <option value="FFP">FFP — Firm Fixed Price</option>
                        <option value="T_AND_M">T&amp;M — Time &amp; Materials</option>
                        <option value="CPFF">CPFF — Cost Plus Fixed Fee</option>
                        <option value="CPIF">CPIF — Cost Plus Incentive Fee</option>
                        <option value="IDIQ_TO">IDIQ TO — Task Order</option>
                        <option value="BPA_CALL">BPA Call</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Set-Aside</label>
                    <select name="set_aside_type">
                        <option value="">None</option>
                        <option value="full_open">Full &amp; Open</option>
                        <option value="small_business">Small Business</option>
                        <option value="8a">8(a)</option>
                        <option value="hubzone">HUBZone</option>
                        <option value="sdvosb">SDVOSB</option>
                        <option value="wosb">WOSB</option>
                        <option value="edwosb">EDWOSB</option>
                        <option value="sole_source">Sole Source</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>NAICS Code</label>
                    <input type="text" name="naics_code" placeholder="e.g., 541512">
                </div>
                <div class="form-group">
                    <label>Capture Manager</label>
                    <input type="text" name="capture_manager" placeholder="Name">
                </div>
                <div class="form-group">
                    <label>Proposal Manager</label>
                    <input type="text" name="proposal_manager" placeholder="Name">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeOppModal()">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Opportunity</button>
            </div>
        </form>
    </div>
</div>

<!-- pWin Scoring Modal -->
<div id="pwin-modal" class="modal-overlay" style="display:none;">
  <div class="modal-content" style="max-width:480px;">
    <div class="modal-header">
      <h2>Score pWin</h2>
      <button class="modal-close" onclick="closePwinModal()">&times;</button>
    </div>
    <p style="font-size:0.82rem;color:var(--text-secondary);margin-bottom:12px;">
      Rate each capture-plan signal 0–10 (0=very unfavorable, 5=neutral, 10=highly favorable).
    </p>
    <input type="hidden" id="pwin-opp-id">
    <div class="form-grid" style="grid-template-columns:1fr;">
      <div class="form-group">
        <label>Incumbency <span style="font-weight:normal;color:var(--text-secondary);">(weight 30%)</span></label>
        <input type="range" id="f-incumbency" min="0" max="10" value="5" oninput="updateSliderLabel(this,'lbl-incumbency')">
        <span id="lbl-incumbency" style="font-size:0.8rem;color:var(--text-secondary);">5</span>
      </div>
      <div class="form-group">
        <label>Past Performance Fit <span style="font-weight:normal;color:var(--text-secondary);">(weight 25%)</span></label>
        <input type="range" id="f-past_performance_fit" min="0" max="10" value="5" oninput="updateSliderLabel(this,'lbl-ppf')">
        <span id="lbl-ppf" style="font-size:0.8rem;color:var(--text-secondary);">5</span>
      </div>
      <div class="form-group">
        <label>Competitive Position <span style="font-weight:normal;color:var(--text-secondary);">(weight 20%)</span></label>
        <input type="range" id="f-competitive_position" min="0" max="10" value="5" oninput="updateSliderLabel(this,'lbl-cp')">
        <span id="lbl-cp" style="font-size:0.8rem;color:var(--text-secondary);">5</span>
      </div>
      <div class="form-group">
        <label>Compliance Coverage <span style="font-weight:normal;color:var(--text-secondary);">(weight 15%)</span></label>
        <input type="range" id="f-compliance_coverage" min="0" max="10" value="5" oninput="updateSliderLabel(this,'lbl-cc')">
        <span id="lbl-cc" style="font-size:0.8rem;color:var(--text-secondary);">5</span>
      </div>
      <div class="form-group">
        <label>CRM Engagement <span style="font-weight:normal;color:var(--text-secondary);">(weight 10%)</span></label>
        <input type="range" id="f-crm_engagement" min="0" max="10" value="5" oninput="updateSliderLabel(this,'lbl-crm')">
        <span id="lbl-crm" style="font-size:0.8rem;color:var(--text-secondary);">5</span>
      </div>
    </div>
    <div id="pwin-preview" style="margin-top:12px;padding:10px;background:var(--bg-secondary,#1a1a2e);border-radius:6px;text-align:center;font-size:0.9rem;display:none;">
      Estimated pWin: <strong id="pwin-preview-pct">—</strong>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" onclick="closePwinModal()">Cancel</button>
      <button type="button" class="btn btn-primary" id="pwin-submit-btn" onclick="submitPwin()">Compute &amp; Save</button>
    </div>
  </div>
</div>

<style>
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-content { background:var(--bg-card, #16213e); border:1px solid var(--border-color, #2a2a4a); border-radius:8px; padding:24px; max-width:700px; width:90%; max-height:85vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header h2 { margin:0; }
.modal-close { background:none; border:none; color:var(--text-primary, #e0e0e0); font-size:24px; cursor:pointer; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-color, #2a2a4a); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { display:flex; flex-direction:column; }
.form-group label { font-size:12px; color:var(--text-secondary, #a0a0b8); margin-bottom:4px; }
.form-group input, .form-group select { background:var(--bg-secondary, #1a1a2e); border:1px solid var(--border-color, #2a2a4a); color:var(--text-primary, #e0e0e0); padding:8px; border-radius:4px; font-size:14px; }
.form-group input[type=range] { padding:4px 0; border:none; background:none; }
.form-group input:focus, .form-group select:focus { outline:none; border-color:var(--accent-blue, #4a90d9); }
.text-danger { color: var(--status-red, #dc3545) !important; font-weight: bold; }
.text-warning { color: var(--status-yellow, #ffc107) !important; }
@media (max-width: 768px) { .form-grid { grid-template-columns: 1fr; } }
</style>
{% endblock %}

{% block scripts %}
<script>
// ---- Create Opportunity Modal ----
function openOppModal() {
    document.getElementById('create-opp-modal').style.display = 'flex';
}
function closeOppModal() {
    document.getElementById('create-opp-modal').style.display = 'none';
    document.getElementById('create-opp-form').reset();
}
function submitOppForm(event) {
    event.preventDefault();
    var form = event.target;
    var data = {};
    new FormData(form).forEach(function(v, k) { data[k] = v; });
    var btn = form.querySelector('button[type=submit]');
    btn.disabled = true;
    btn.textContent = 'Creating...';
    fetch('/api/proposals/opportunities', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(function(r) { return r.json(); })
    .then(function(resp) {
        if (resp.id) {
            window.location.href = '/proposals/' + resp.id;
        } else {
            alert('Error: ' + (resp.error || JSON.stringify(resp)));
            btn.disabled = false;
            btn.textContent = 'Create Opportunity';
        }
    })
    .catch(function(err) {
        alert('Request failed: ' + err);
        btn.disabled = false;
        btn.textContent = 'Create Opportunity';
    });
    return false;
}
document.getElementById('create-opp-modal').addEventListener('click', function(e) {
    if (e.target === this) { closeOppModal(); }
});

// ---- pWin Modal ----
var FACTOR_FIELDS = ['incumbency','past_performance_fit','competitive_position','compliance_coverage','crm_engagement'];
var FACTOR_WEIGHTS = {incumbency:0.30,past_performance_fit:0.25,competitive_position:0.20,compliance_coverage:0.15,crm_engagement:0.10};
var FACTOR_LABELS = {incumbency:'Incumbency',past_performance_fit:'Past Performance Fit',competitive_position:'Competitive Position',compliance_coverage:'Compliance Coverage',crm_engagement:'CRM Engagement'};

function updateSliderLabel(el, lblId) {
    document.getElementById(lblId).textContent = el.value;
    previewPwin();
}

function previewPwin() {
    var z = 0;
    FACTOR_FIELDS.forEach(function(f) {
        var el = document.getElementById('f-'+f);
        if (!el) return;
        var v = parseInt(el.value) / 10.0;
        var centered = v - 0.5;
        z += FACTOR_WEIGHTS[f] * centered * 2.0 * 6.0;
    });
    var pwin = Math.round(100 / (1 + Math.exp(-z)));
    var prev = document.getElementById('pwin-preview');
    var pct = document.getElementById('pwin-preview-pct');
    prev.style.display = 'block';
    var color = pwin >= 70 ? 'var(--status-green,#4caf50)' : pwin >= 40 ? 'var(--status-yellow,#ffc107)' : 'var(--status-red,#dc3545)';
    pct.style.color = color;
    pct.textContent = pwin + '%';
}

function openPwinModal(oppId) {
    document.getElementById('pwin-opp-id').value = oppId;
    FACTOR_FIELDS.forEach(function(f) {
        var el = document.getElementById('f-'+f);
        if (el) el.value = 5;
    });
    ['lbl-incumbency','lbl-ppf','lbl-cp','lbl-cc','lbl-crm'].forEach(function(id) {
        var el = document.getElementById(id);
        if (el) el.textContent = '5';
    });
    document.getElementById('pwin-preview').style.display = 'none';
    document.getElementById('pwin-modal').style.display = 'flex';
    previewPwin();
}

function closePwinModal() {
    document.getElementById('pwin-modal').style.display = 'none';
}

function submitPwin() {
    var oppId = document.getElementById('pwin-opp-id').value;
    var data = {};
    FACTOR_FIELDS.forEach(function(f) {
        var el = document.getElementById('f-'+f);
        if (el) data[f] = parseInt(el.value) / 10.0;
    });
    var btn = document.getElementById('pwin-submit-btn');
    btn.disabled = true;
    btn.textContent = 'Computing...';
    fetch('/api/govcon/proposals/' + oppId + '/pwin', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(function(r) { return r.json(); })
    .then(function(resp) {
        if (resp.status === 'ok') {
            closePwinModal();
            location.reload();
        } else {
            alert('Error: ' + (resp.error || JSON.stringify(resp)));
            btn.disabled = false;
            btn.textContent = 'Compute & Save';
        }
    })
    .catch(function(err) {
        alert('Request failed: ' + err);
        btn.disabled = false;
        btn.textContent = 'Compute & Save';
    });
}

document.getElementById('pwin-modal').addEventListener('click', function(e) {
    if (e.target === this) { closePwinModal(); }
});

// ---- Factor Breakdown Panel ----
function showFactors(oppId, factors) {
    if (!factors) return;
    var legend = document.getElementById('pwin-legend');
    var content = document.getElementById('pwin-legend-content');
    content.innerHTML = '';
    var colorMap = function(score) {
        if (score >= 0.7) return 'var(--status-green,#4caf50)';
        if (score >= 0.4) return 'var(--status-yellow,#ffc107)';
        return 'var(--status-red,#dc3545)';
    };
    Object.entries(factors).forEach(function(entry) {
        var f = entry[0], d = entry[1];
        var label = FACTOR_LABELS[f] || f;
        var pct = Math.round(d.score * 100);
        var color = colorMap(d.score);
        content.innerHTML += '<div style="padding:6px 8px;background:var(--bg-secondary,#1a1a2e);border-radius:4px;">' +
            '<div style="font-size:0.75rem;color:var(--text-secondary);">' + label + ' <span style="float:right;color:var(--text-muted);">w=' + (d.weight*100).toFixed(0) + '%</span></div>' +
            '<div style="display:flex;align-items:center;gap:6px;margin-top:4px;">' +
            '<div style="flex:1;background:var(--bg-card,#16213e);border-radius:2px;height:6px;">' +
            '<div style="background:' + color + ';height:6px;border-radius:2px;width:' + pct + '%;"></div></div>' +
            '<span style="color:' + color + ';font-size:0.8rem;font-weight:bold;">' + pct + '%</span></div></div>';
    });
    legend.style.display = 'block';
    legend.scrollIntoView({behavior:'smooth', block:'nearest'});
}

// ---- Pipeline Value Refresh ----
function refreshPipelineValue() {
    fetch('/api/govcon/pipeline-value')
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (d.status === 'ok') {
            var el = document.getElementById('banner-weighted');
            if (el) el.textContent = '$' + d.total_weighted_pipeline_value.toLocaleString('en-US', {maximumFractionDigits:0});
        }
    })
    .catch(function(){});
}
</script>
{% endblock %}