{#-
SPDX-License-Identifier: Apache-2.0
SPDX-FileCopyrightText: 2025 - 2026 BMO Soluciones, S.A.
-#}

{% extends 'base.html' %}

{% block content %}
<div class="container">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-tools me-2"></i>{{ _('Implementación Inicial') }}</h2>
    </div>

    <div class="row">
        <div class="col-12 mb-4">
            <div class="card h-100">
                <div class="card-body d-flex flex-column">
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary bg-opacity-10 rounded p-3 me-3">
                            <i class="bi bi-file-earmark-excel text-primary fs-3"></i>
                        </div>
                        <h5 class="card-title mb-0">{{ _('Importar configuración contable de comprobante resumido') }}</h5>
                    </div>
                    <p class="card-text text-muted">
                        {{ _('Suba un archivo Excel para asignar cuentas contables por nombre visible de empresa, percepción, deducción, prestación y política de vacaciones.') }}
                    </p>

                    <form method="post" action="{{ url_for('implementation.import_accounting_configuration') }}" enctype="multipart/form-data" class="mb-3">
                        <div class="row g-2 align-items-center">
                            <div class="col-md-8">
                                <input class="form-control" type="file" name="accounting_file" accept=".xlsx,.xlsm" required>
                            </div>
                            <div class="col-md-4">
                                <button type="submit" class="btn btn-outline-primary w-100">
                                    <i class="bi bi-upload me-1"></i>{{ _('Importar configuración') }}
                                </button>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>type</th>
                                    <th>id</th>
                                    <th>debit account</th>
                                    <th>debit account description</th>
                                    <th>credit account</th>
                                    <th>credit account description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td>company</td><td>USER_VISIBLE_ID_NOT_DB_ID</td><td>111111111111111</td><td>Account Description</td><td>111111111111111</td><td>Account Description</td></tr>
                                <tr><td>earnings</td><td>USER_VISIBLE_ID_NOT_DB_ID</td><td>111111111111111</td><td>Account Description</td><td>111111111111111</td><td>Account Description</td></tr>
                                <tr><td>deductions</td><td>USER_VISIBLE_ID_NOT_DB_ID</td><td>111111111111111</td><td>Account Description</td><td>111111111111111</td><td>Account Description</td></tr>
                                <tr><td>benefits</td><td>USER_VISIBLE_ID_NOT_DB_ID</td><td>111111111111111</td><td>Account Description</td><td>111111111111111</td><td>Account Description</td></tr>
                                <tr><td>vacation_policy</td><td>USER_VISIBLE_ID_NOT_DB_ID</td><td>111111111111111</td><td>Account Description</td><td>111111111111111</td><td>Account Description</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}