{% extends "base.html" %}

{% block title %}MAT Credit{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/mat_credit.css') }}">
{% endblock %}

{% block content %}
<div class="container">
    <div class="container">
        <h2 style="text-align:center;">MAT Credit and Utilization Records</h2>
        <!-- YEAR ADD CONTROLS -->
        <div class="year-controls">
            <select id="yearSelect">
                <option value="">-- Select AY --</option>
                {% for y in range(2001, 2026) %}
                <option value="{{ y }}-{{ y+1 }}">{{ y }}-{{ y+1 }}</option>
                {% endfor %}
            </select>
            <button onclick="addYearColumn()">➕ Add Year</button>
        </div>

        <!-- SCROLL WRAPPER -->
        <div class="table-wrapper">
            <table id="matTable">
                <thead>
                    <tr id="tableHeader">
                        <th>AY</th>
                        <th>MAT Credit</th>

                        {% for y in added_years %}
                        <th>Utilized {{ y }}</th>
                        {% endfor %}

                        <th>Balance</th>
                        <th>Action</th>
                    </tr>
                </thead>

                <tbody>
                    {% for row in mat_rows %}
                    <tr>
                        <td contenteditable="true">{{ row.financial_year }}</td>
                        <td><input value="{{ row.mat_credit }}"></td>

                        {% for y in added_years %}
                        <td>
                            <input value="{{ utilization_map.get(row.id, {}).get(y, '') }}">
                        </td>
                        {% endfor %}

                        <td><input value="{{ row.balance }}"></td>
                        <td><button onclick="saveRow(this)">Save</button></td>
                    </tr>
                    {% endfor %}

                </tbody>
            </table>
        </div>

        <br>
        <button onclick="addRow()">➕ Add Row</button>
        <!-- <button onclick="saveAll()">💾 Save All</button> -->

    </div>


</div>

{% block extra_js %}
<script src="{{ url_for('static', filename='js/mat_credit.js') }}"></script>
{% endblock %}
{% endblock %}