{% extends "finance/base.html" %}

{% block content %}
<style>
    .ecs-title {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .ecs-subtitle {
        color: #6c757d;
        margin-bottom: 20px;
    }

    .ecs-sheet {
        overflow: auto;
        max-height: 72vh;
        border: 1px solid #dee2e6;
    }

    .ecs-table {
        min-width: 1100px;
        margin-bottom: 0;
        font-size: 13px;
    }

    .ecs-table th {
        background: #505b69;
        color: #fff;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    .ecs-table td {
        vertical-align: middle;
    }

    .ecs-description {
        min-width: 360px;
    }

    .ecs-number {
        min-width: 145px;
        text-align: right;
    }

    .ecs-line {
        text-align: center;
        white-space: nowrap;
    }

    .ecs-section td {
        background: #dce6f1;
        font-weight: 700;
    }

    .ecs-total td {
        background: #e9ecef;
        font-weight: 700;
    }

    .ecs-input {
        min-width: 145px;
        text-align: right;
    }

    .ecs-note {
        font-size: 12px;
        color: #6c757d;
    }
</style>

<div class="container-fluid">
    <h2 class="ecs-title">Entitlement Calculation Statement</h2>
    <div class="ecs-subtitle">
        ECS — Monthly Calculation
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                {{ message }}
                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endif %}

    <form method="get" class="row g-2 align-items-end mb-3">
        <div class="col-md-3 col-lg-2">
            <label for="month" class="form-label fw-bold">Month</label>
            <select id="month" name="month" class="form-select">
                {% for m, label in month_options %}
                    <option value="{{ m }}"
                        {% if selected_month == m %}selected{% endif %}>
                        {{ label }}
                    </option>
                {% endfor %}
            </select>
        </div>

        <div class="col-md-2 col-lg-1">
            <label for="year" class="form-label fw-bold">Year</label>
            <select id="year" name="year" class="form-select">
                {% for y in year_options %}
                    <option value="{{ y }}"
                        {% if selected_year == y|stringformat:"s" %}selected{% endif %}>
                        {{ y }}
                    </option>
                {% endfor %}
            </select>
        </div>

        <div class="col-auto">
            <button type="submit" class="btn btn-primary">Display</button>
        </div>
    </form>

    <form method="post">
        {% csrf_token %}
        <input type="hidden" name="period" value="{{ period }}">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                <strong>Period:</strong> {{ period|slice:"0:2" }}/{{ period|slice:"2:6" }}
            </div>
            <button type="submit" class="btn btn-success">Save ECS</button>
        </div>

        <div class="ecs-sheet">
            <table class="table table-bordered table-hover ecs-table">
                <thead>
                    <tr>
                        <th>No.</th>
                        <th>Descriptions</th>
                        <th>Unit</th>
                        <th>Line</th>
                        <th>Calculation</th>
                        <th>Pertamina EP</th>
                        <th>Company</th>
                        <th>Unrec. Cost C/F</th>
                    </tr>
                </thead>


                <tbody>
                    {% for row in rows %}
                        <tr
                            {% if row.row_type == "HEADER" or row.row_type == "SECTION" %}
                                class="ecs-section"
                            {% elif row.row_type == "TOTAL" %}
                                class="ecs-total"
                            {% endif %}
                        >
                            <td class="ecs-line">{{ row.excel_no|default:"" }}</td>

                            <td class="ecs-description">
                                {{ row.descript }}
                            </td>

                            <td class="text-center">
                                {{ row.unit|default:"" }}
                            </td>

                            <td class="ecs-line">
                                {{ row.lineno }}
                            </td>

                            <td>
                                {% if row.row_type == "INPUT" %}
                                    <input
                                        type="number"
                                        step="0.00001"
                                        name="amount_{{ row.lineno }}"
                                        value="{{ row.amount|floatformat:5 }}"
                                        class="form-control ecs-input"
                                    >
                                {% elif row.row_type == "FORMULA" or row.row_type == "TOTAL" %}
                                    {% if row.display_amount != None %}
                                        <span class="d-block text-end">
                                            {{ row.display_amount|floatformat:2 }}
                                        </span>
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                {% else %}
                                    —
                                {% endif %}
                            </td>

                            <td class="text-end">
                                {% if row.pertamina_amount != None %}
                                    {{ row.pertamina_amount|floatformat:2 }}
                                {% endif %}
                            </td>

                            <td class="text-end">
                                {% if row.company_amount != None %}
                                    {{ row.company_amount|floatformat:2 }}
                                {% endif %}
                            </td>

                            <td class="text-end">
                                {% if row.unrecovered_amount != None %}
                                    {{ row.unrecovered_amount|floatformat:2 }}
                                {% endif %}
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="8" class="text-center text-muted">
                                Belum ada format ECS. Isi terlebih dahulu melalui ECS Design.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>

            </table>
        </div>

        <p class="ecs-note mt-2">
            Nilai yang bisa diedit berasal dari input ECS. Hasil formula dan alokasi
            akan ditampilkan setelah pemetaan rumus Excel selesai diverifikasi.
        </p>

        <div class="text-end mt-3 mb-4">
            <button type="submit" class="btn btn-success">Save ECS</button>
        </div>
    </form>
</div>
{% endblock %}