{% 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>

<!-- Stat Grid -->
<div class="stat-grid" id="prop-stats">
    <div class="stat-card">
        <div class="stat-value" id="stat-total">{{ opportunities | length }}</div>
        <div class="stat-label">Total</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-writing">{{ opportunities | selectattr('status', 'equalto', 'writing') | list | length }}</div>
        <div class="stat-label">In Writing</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-review">{{ opportunities | selectattr('status', 'equalto', 'review') | list | length }}</div>
        <div class="stat-label">In Review</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-submitted">{{ opportunities | selectattr('status', 'equalto', 'submitted') | list | length }}</div>
        <div class="stat-label">Submitted</div>
    </div>
    <div class="stat-card">
        <div class="stat-value {% 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="stat-label">Days to Nearest 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>

<!-- Opportunity Table -->
<div class="table-container">
    <div class="table-header">
        <h2>Opportunities</h2>
    </div>
    <table>
        <thead>
            <tr>
                <th>Solicitation #</th>
                <th>Title</th>
                <th>Agency</th>
                <th>Due Date</th>
                <th>Days Left</th>
                <th>Type</th>
                <th>Set-Aside</th>
                <th>Status</th>
                <th>Win %</th>
                <th>Proposal Mgr</th>
            </tr>
        </thead>
        <tbody>
            {% for opp in opportunities %}
            <tr>
                <td><a href="/proposals/{{ opp.id }}">{{ opp.solicitation_number }}</a></td>
                <td><a href="/proposals/{{ opp.id }}">{{ opp.title }}</a></td>
                <td>{{ opp.agency }}</td>
                <td>{{ opp.due_date }}</td>
                <td class="{% if opp.days_left is not none and opp.days_left <= 7 %}text-danger{% elif opp.days_left is not none and opp.days_left <= 14 %}text-warning{% endif %}">
                    {{ opp.days_left if opp.days_left is not none else '—' }}
                </td>
                <td><span class="badge badge-info">{{ opp.proposal_type }}</span></td>
                <td>{{ opp.set_aside_type or '—' }}</td>
                <td>
                    {% set status_colors = {'intake': 'info', 'bid_no_bid': 'warning', 'go': 'success', 'writing': 'info', 'review': 'warning', 'final': 'success', 'submitted': 'success', 'won': 'success', 'lost': 'error', 'no_bid': 'warning', 'cancelled': 'error'} %}
                    <span class="badge badge-{{ status_colors.get(opp.status, 'info') }}">{{ opp.status | replace('_', ' ') | title }}</span>
                </td>
                <td>
                    {% if opp.win_probability is not none %}
                        {% if opp.win_probability >= 70 %}
                            <span style="color:var(--status-green); font-weight:bold;">{{ opp.win_probability }}%</span>
                        {% elif opp.win_probability >= 40 %}
                            <span style="color:var(--status-yellow, #ffc107); font-weight:bold;">{{ opp.win_probability }}%</span>
                        {% else %}
                            <span style="color:var(--status-red); font-weight:bold;">{{ opp.win_probability }}%</span>
                        {% endif %}
                    {% else %}
                        <span style="color:var(--text-secondary);">—</span>
                    {% endif %}
                </td>
                <td>{{ opp.proposal_manager or '—' }}</td>
            </tr>
            {% else %}
            <tr><td colspan="10" class="text-muted" style="text-align:center;">No opportunities yet. Click "+ New Opportunity" to create one.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- 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>

<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: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>
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(); }
});
</script>
{% endblock %}