{% extends 'base.html' %}
{% load static %}

{% block title %}Planning Backlog | AI ML Operations{% endblock %}

{% block content %}
<div class="container section">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
        <h2 class="section-title" style="margin-bottom: 0;">Backlog</h2>
        <div>
            <a href="{% url 'planning:board_view' %}" class="btn"
                style="padding: 0.5rem 1rem; border-radius: 8px; margin-right: 1rem; background: var(--surface-color); color: var(--text-color); border: 1px solid var(--primary-color);">View
                Board</a>
            {% if is_developer %}
            <button class="btn" id="openAddModalBtn" style="padding: 0.5rem 1rem; border-radius: 8px;">Add Item</button>
            {% endif %}
        </div>
    </div>

    <form method="get" action="{% url 'planning:backlog_view' %}"
        style="margin-bottom: 2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; gap: 0.5rem; align-items: center;">
            <label for="status" style="color: var(--text-muted);">Status:</label>
            <select name="status" id="status" class="form-control" style="width: 150px; margin-bottom: 0;"
                onchange="this.form.submit()">
            <option value="">All</option>
            {% for status_value, status_label in statuses %}
                <option value="{{ status_value }}" {% if request.GET.status == status_value %}selected{% endif %}>{{
                    status_label }}</option>
                {% endfor %}
            </select>
        </div>

        <div style="display: flex; gap: 0.5rem; align-items: center;">
            <label for="contract" style="color: var(--text-muted);">Contract:</label>
            <select name="contract" id="contract" class="form-control" style="width: 200px; margin-bottom: 0;"
                onchange="this.form.submit()">
                <option value="">All</option>
                {% for contract in contracts %}
                <option value="{{ contract.id }}" {% if request.GET.contract == contract.id|stringformat:"i" %}selected{% endif %}>{{ contract.name }}</option>
                {% endfor %}
            </select>
        </div>

        <div style="display: flex; gap: 0.5rem; align-items: center;">
            <label for="charge_number" style="color: var(--text-muted);">Charge Number:</label>
            <select name="charge_number" id="charge_number" class="form-control" style="width: 200px; margin-bottom: 0;"
                onchange="this.form.submit()">
                <option value="">All</option>
                {% for cn in charge_numbers %}
                <option value="{{ cn.id }}" {% if request.GET.charge_number == cn.id|stringformat:"i" %}selected{% endif %}>{{ cn }}</option>
            {% endfor %}
        </select>
        </div>

        <a href="{% url 'planning:backlog_view' %}" class="btn"
            style="padding: 0.5rem 1rem; border-radius: 8px; background: transparent; border: 1px solid var(--text-muted); color: var(--text-muted);">Clear
            Filters</a>
    </form>

    <div class="table-responsive"
        style="background: var(--surface-color); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); padding: 1rem;">
        <table class="table">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Charge Number</th>
                    <th>Status</th>
                    <th>Created</th>
                    <th>Last Updated</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr style="cursor: pointer; transition: background 0.2s;"
                    onmouseover="this.style.background='rgba(255,255,255,0.05)'"
                    onmouseout="this.style.background='transparent'" onclick="showItemDetails({{ item.id }})">
                    <td style="font-weight: 500; color: white;">{{ item.title }}</td>
                    <td>
                        {% if item.charge_number %}<span class="badge"
                            style="background: rgba(188, 19, 254, 0.2); color: var(--secondary-color); border: 1px solid var(--secondary-color);">{{
                            item.charge_number }} ({{ item.charge_number.get_percent_complete|floatformat:0
                            }}%)</span>
                            {% else %}
                            -
                            {% endif %}
                        </td>
                    <td><span class="badge" style="border: 1px solid var(--primary-color);">
                        {{ item.get_status_display }}</span></td>
                    <td style="color: var(--text-muted); font-size: 0.9rem;">{{ item.created_at|date:"M d, Y" }}</td>
                    <td style="color: var(--text-muted); font-size: 0.9rem;">{{ item.updated_at|date:"M d, Y" }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="5" style="text-align: center; color: var(--text-muted); padding: 2rem;">No items found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Item Details Modal (Reused from Board) -->
<div id="itemDetailModal" class="modal" style="display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px);">
    <div class="modal-content" style="background-color: var(--surface-color); margin: 10% auto; padding: 2rem; border: 1px solid var(--primary-color); border-radius: 12px; width: 90%; max-width: 600px; color: var(--text-color); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);">
        <span class="close" id="closeDetailModal" style="color: var(--text-muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
        <div id="itemDetailContent">
            <!-- Loaded via AJAX -->
        </div>
    </div>
</div>

<!-- Add Item Modal -->
<div id="addItemModal" class="modal" style="display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px);">
    <div class="modal-content" style="background-color: var(--surface-color); margin: 10% auto; padding: 2rem; border: 1px solid var(--primary-color); border-radius: 12px; width: 90%; max-width: 600px; color: var(--text-color); box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);">
        <span class="close" id="closeAddModal" style="color: var(--text-muted); float: right; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
        <h2 style="color: var(--primary-color); margin-bottom: 1.5rem;">New Item</h2>
        <form method="post" action="{% url 'planning:create_item' %}">
            {% csrf_token %}
            <div class="form-group">
                <label style="color: var(--text-muted); margin-bottom: 0.5rem; display: block;">Title</label>
                <input type="text" name="title" class="form-control" required>
            </div>
            <div class="form-group">
                <label style="color: var(--text-muted); margin-bottom: 0.5rem; display: block;">Charge Number (QBD)</label>
                <select name="charge_number" class="form-control">
                    <option value="">-- No Charge Number --</option>
                    {% for cn in qbd_charge_numbers %}
                    <option value="{{ cn.id }}">{{ cn.contract.name }} - {{ cn.slug }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label style="color: var(--text-muted); margin-bottom: 0.5rem; display: block;">Description</label>
                <textarea name="description" class="form-control" rows="4"></textarea>
            </div>
            <input type="hidden" name="next" value="{{ request.path }}">
            <button type="submit" class="btn">Create</button>
        </form>
    </div>
</div>

<script>
    const detailModal = document.getElementById('itemDetailModal');
    const closeDetailBtn = document.getElementById('closeDetailModal');
    const detailContent = document.getElementById('itemDetailContent');

    const addModal = document.getElementById('addItemModal');
    const openAddBtn = document.getElementById('openAddModalBtn');
    const closeAddBtn = document.getElementById('closeAddModal');

    closeDetailBtn.onclick = () => detailModal.style.display = "none";
    
    if (openAddBtn) openAddBtn.onclick = () => addModal.style.display = "block";
    if (closeAddBtn) closeAddBtn.onclick = () => addModal.style.display = "none";

    window.onclick = (event) => {
        if (event.target == detailModal) detailModal.style.display = "none";
        if (addModal && event.target == addModal) addModal.style.display = "none";
    }

    function showItemDetails(itemId) {
        fetch(`/planning/item/${itemId}/`)
            .then(res => res.text())
            .then(html => {
                detailContent.innerHTML = html;
                detailModal.style.display = "block";
            });
    }
</script>
{% endblock %}