{% 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 mat-container">

    <h2 class="page-title">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 Utilized Year</button>
    </div>

    <!-- TABLE WRAPPER -->
    <div class="table-wrapper">
        <table id="matTable">
            <thead>
                <tr id="tableHeader">
                    <th>AY</th>
                    <th>MAT Credit</th>
                    <th>Opening balance</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="false">{{ row.financial_year }}-{{ row.financial_year | int + 1 }}</td>
                    <td><input value="{{ row.mat_credit }}"></td>
                    <td><input value="{{ row.opening_balance }}"></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>

    <div class="action-footer">
        <button class="add-row-btn" onclick="addRow()">➕ Add New Row</button>
    </div>

</div>
{% endblock %}

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