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

{% block title %}Contracts - AI ML Operations{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
            <h1 class="section-title" style="margin-bottom: 0;">Contracts</h1>
            <a href="{% url 'financial_index' %}" class="btn" style="padding: 0.5rem 1.5rem; font-size: 0.9rem;">Back to
                Dashboard</a>
        </div>

        {% if chart_data_json %}
        <h2 class="section-title" style="font-size: 2rem; margin-bottom: 2rem;">Burn Rate Charts</h2>
        <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 3rem;">
            {% for c in contracts %}
            <div
                style="flex: 1; min-width: 300px; max-width: 400px; background: var(--surface-color); border: 1px solid rgba(255,255,255,0.1); padding: 15px; border-radius: 8px;">
                <canvas id="chart_{{ forloop.counter }}"></canvas>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <div class="table-responsive">
            {% if contracts %}
            <table class="table" style="margin-bottom: 2rem;">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Identifier</th>
                        <th>Type</th>
                        <th>% Complete</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Proposed Amount</th>
                        <th>Budget Hours</th>
                        <th>Hours Charged</th>
                        <th>Money Spent</th>
                        <th>Money Remaining</th>
                        <th>Projected End Date</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contract in contracts %}
                    <tr>
                        <td><a href="{% url 'contract_detail' contract.slug %}">{{ contract.name }}</a></td>
                        <td>{{ contract.slug }}</td>
                        <td>{{ contract.contract_type }}</td>
                        <td>
                            <span class="badge" style="background: rgba(0, 243, 255, 0.1); border: 1px solid var(--primary-color); color: var(--primary-color);">
                                {{ contract.ticket_percent_complete|floatformat:0 }}%
                            </span>
                        </td>
                        <td>{{ contract.baseline_start }}</td>
                        <td>{{ contract.baseline_end }}</td>
                        <td>{{ contract.proposed_amount }}</td>
                        <td>{{ contract.budget_hours }}</td>
                        <td>{{ contract.total_hours_spent }}</td>
                        <td>${{ contract.total_money_spent|floatformat:2 }}</td>
                        <td>${{ contract.remaining_money|floatformat:2 }}</td>
                        <td>{{ contract.projected_end_date }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            <p>Create a <a href="{% url 'new_contract' %}" class="text-cyber-cyan"
                    style="text-decoration: underline;">new contract</a>.</p>
            {% else %}
            <p style="color: var(--text-muted);">There are no contracts. <a href="{% url 'new_contract' %}"
                    class="text-cyber-cyan" style="text-decoration: underline;">Please make one</a>.</p>
            {% endif %}
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.1/dist/chartjs-adapter-moment.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const chartDataRaw = '{{ chart_data_json|escapejs }}';
        if (chartDataRaw) {
            Chart.defaults.color = '#e0e0e0';
            Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';

            const chartData = JSON.parse(chartDataRaw);
            chartData.forEach((data, index) => {
                const canvas = document.getElementById('chart_' + (index + 1));
                if (!canvas) return;
                const ctx = canvas.getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        datasets: [
                            {
                                label: 'Historical Burn',
                                data: [
                                    { x: data.start_date, y: data.budget },
                                    { x: data.today, y: data.remaining }
                                ],
                                borderColor: '#00f3ff', /* Cyber cyan */
                                backgroundColor: '#00f3ff',
                                fill: false,
                                tension: 0.1
                            },
                            {
                                label: 'Projected Burn',
                                data: [
                                    { x: data.today, y: data.remaining },
                                    { x: data.projected_end, y: 0 }
                                ],
                                borderColor: '#bc13fe', /* Neon purple */
                                borderDash: [5, 5],
                                backgroundColor: '#bc13fe',
                                fill: false,
                                tension: 0.1
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            title: {
                                display: true,
                                text: data.name + ' Burn Rate ($)',
                                color: '#ffffff'
                            },
                            legend: {
                                labels: { color: '#e0e0e0' }
                            }
                        },
                        scales: {
                            x: {
                                type: 'time',
                                time: { unit: 'month' },
                                title: { display: true, text: 'Date', color: '#a0a0a0' },
                                grid: { color: 'rgba(255, 255, 255, 0.05)' },
                                ticks: { color: '#a0a0a0' }
                            },
                            y: {
                                beginAtZero: true,
                                title: { display: true, text: 'Remaining Budget ($)', color: '#a0a0a0' },
                                grid: { color: 'rgba(255, 255, 255, 0.05)' },
                                ticks: { color: '#a0a0a0' }
                            }
                        }
                    }
                });
            });
        }
    });
</script>
{% endblock %}