{% 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-card {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .ecs-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

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

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

    .ecs-table .description {
        min-width: 220px;
    }

    .ecs-actions {
        display: flex;
        gap: 5px;
        white-space: nowrap;
    }

    .ecs-count {
        color: #6c757d;
        font-size: 13px;
    }

    .ecs-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .ecs-pagination a {
        text-decoration: none;
    }
</style>

<div class="container-fluid">
    <div class="ecs-title">ECS Design</div>
    <div class="ecs-subtitle">
        Entitlement Calculation Sheet — Format Setup
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert
                {% if message.tags == 'error' %}
                    alert-danger
                {% elif message.tags == 'success' %}
                    alert-success
                {% else %}
                    alert-info
                {% endif %}
                alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close"
                        data-bs-dismiss="alert"
                        aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    <div class="ecs-card">
        <div class="ecs-card-title">
            {% if edit_row %}
                Edit ECS Format
            {% else %}
                Add ECS Format
            {% endif %}
        </div>

        <form method="post">
            {% csrf_token %}

            {% if edit_row %}
                <input type="hidden" name="action" value="update">
                <input type="hidden" name="row_id"
                       value="{{ edit_row.pk }}">
            {% else %}
                <input type="hidden" name="action" value="add">
            {% endif %}

            <div class="row g-3">
                <div class="col-md-2">
                    <label class="form-label">Line No</label>
                    <input type="text" name="lineno"
                           class="form-control"
                           maxlength="5" required
                           value="{{ edit_row.lineno|default:'' }}">
                </div>

                <div class="col-md-5">
                    <label class="form-label">Description</label>
                    <input type="text" name="descript"
                           class="form-control"
                           maxlength="150" required
                           value="{{ edit_row.descript|default:'' }}">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Section</label>
                    <input type="text" name="section"
                           class="form-control"
                           maxlength="50"
                           value="{{ edit_row.section|default:'' }}"
                           placeholder="Contoh: LIFTING">
                </div>

                <div class="col-md-3">
                    <label class="form-label">Row Type</label>
                    <select name="row_type" class="form-select" required>
                        {% for code, label in row_types %}
                            <option value="{{ code }}"
                                {% if edit_row %}
                                    {% if edit_row.row_type == code %}
                                        selected
                                    {% endif %}
                                {% elif code == "INPUT" %}
                                    selected
                                {% endif %}>
                                {{ label }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label">Unit</label>
                    <input type="text" name="unit"
                           class="form-control"
                           maxlength="20"
                           value="{{ edit_row.unit|default:'' }}"
                           placeholder="USD, BBL, %">
                </div>

                <div class="col-md-2">
                    <label class="form-label">Sequence</label>
                    <input type="number" name="sequence"
                           class="form-control"
                           value="{{ edit_row.sequence|default:0 }}"
                           required>
                </div>

                <div class="col-md-8">
                    <label class="form-label">
                        Formula (optional)
                    </label>
                    <input type="text" name="formula"
                           class="form-control"
                           value="{{ edit_row.formula|default:'' }}"
                           placeholder="Diisi setelah rumus ECS diverifikasi">
                </div>

                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        {% if edit_row %}Save Changes{% else %}Add Row{% endif %}
                    </button>

                    {% if edit_row %}
                        <a href="{% url 'ecs_design' %}"
                           class="btn btn-secondary">
                            Cancel
                        </a>
                    {% endif %}
                </div>
            </div>
        </form>
    </div>

    <div class="ecs-card">
        <div class="d-flex justify-content-between align-items-center
                    flex-wrap gap-2 mb-3">
            <div class="ecs-card-title mb-0">ECS Format List</div>
            <div class="ecs-count">
                Total: {{ total_rows }} rows
            </div>
        </div>

        <form method="get" class="row g-2 mb-3">
            <div class="col-md-5">
                <input type="text" name="q"
                       class="form-control"
                       value="{{ search }}"
                       placeholder="Search line no, description, section...">
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary">
                    Search
                </button>
                <a href="{% url 'ecs_design' %}"
                   class="btn btn-secondary">
                    Reset
                </a>
            </div>
        </form>

        <div class="table-responsive">
            <table class="table table-bordered table-hover ecs-table">
                <thead>
                    <tr>
                        <th style="width: 70px;">Sequence</th>
                        <th style="width: 90px;">Line No</th>
                        <th>Description</th>
                        <th>Section</th>
                        <th>Row Type</th>
                        <th>Unit</th>
                        <th>Formula</th>
                        <th style="width: 150px;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in page_obj %}
                        <tr>
                            <td class="text-end">{{ row.sequence }}</td>
                            <td>{{ row.lineno }}</td>
                            <td class="description">{{ row.descript }}</td>
                            <td>{{ row.section|default:"-" }}</td>
                            <td>{{ row.row_type }}</td>
                            <td>{{ row.unit|default:"-" }}</td>
                            <td>{{ row.formula|default:"-" }}</td>
                            <td>
                                <div class="ecs-actions">
                                    <a href="?edit={{ row.pk }}{% if search %}&q={{ search|urlencode }}{% endif %}"
                                       class="btn btn-sm btn-warning">
                                        Edit
                                    </a>

                                    <form method="post"
                                          onsubmit="return confirm('Hapus baris desain ini?');">
                                        {% csrf_token %}
                                        <input type="hidden"
                                               name="action"
                                               value="delete">
                                        <input type="hidden"
                                               name="row_id"
                                               value="{{ row.pk }}">
                                        <button type="submit"
                                                class="btn btn-sm btn-danger">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="8"
                                class="text-center text-muted py-4">
                                Belum ada data ECS Design.
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="ecs-pagination">
            <div class="ecs-count">
                {% if page_obj.paginator.count %}
                    Showing
                    {{ page_obj.start_index }}–{{ page_obj.end_index }}
                    of {{ page_obj.paginator.count }}
                {% else %}
                    Showing 0–0 of 0
                {% endif %}
            </div>

            {% if page_obj.paginator.num_pages > 1 %}
                <nav aria-label="ECS design pagination">
                    <ul class="pagination mb-0">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="?page=1{% if search %}&q={{ search|urlencode }}{% endif %}">
                                    First
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link"
                                   href="?page={{ page_obj.previous_page_number }}{% if search %}&q={{ search|urlencode }}{% endif %}">
                                    Previous
                                </a>
                            </li>
                        {% endif %}

                        <li class="page-item active">
                            <span class="page-link">
                                {{ page_obj.number }}
                                / {{ page_obj.paginator.num_pages }}
                            </span>
                        </li>

                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link"
                                   href="?page={{ page_obj.next_page_number }}{% if search %}&q={{ search|urlencode }}{% endif %}">
                                    Next
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link"
                                   href="?page={{ page_obj.paginator.num_pages }}{% if search %}&q={{ search|urlencode }}{% endif %}">
                                    Last
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}