{% extends 'base.html.twig' %}

{% block title %}
    {{ 'lang.preview'|trans }} {{ 'lang.import'|trans }}
{% endblock %}

{% block styles %}
<style>
    .table > :not(caption) > * > * {
        padding: 0.5rem 0.5rem;
        color: white !important;
        background-color: var(--bs-table-bg);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
    }
</style>
{% endblock %}

{% block body %}
    <div class="bg-dark p-4 h-100">
        <h1 class="text-center mb-4 text-white">{{ 'lang.previewImport'|trans }}</h1>
        <div class="card mb-4 border-radius-20 overflow-hidden transparent text-white">
            <div class="card-header">
                <h4>{{ filename }}</h4>
                <span class="badge {% if importType == 'standard' %}bg-primary{% else %}bg-success{% endif %}">
                {{ importType == 'standard' ? 'lang.standardImport' | trans : 'lang.cumasCrmImport' | trans }}
            </span>
            </div>
            <div class="card-body text-white">
                <div class="mb-3">
                    <strong>{{ 'lang.totalRecords'|trans }}:</strong> {{ contactsPreview|length }}
                    <strong class="ms-3">{{ 'lang.validRecords'|trans }}:</strong>
                    {{ contactsPreview|filter(contact => contact.isValid)|length }}
                    <strong class="ms-3">{{ 'lang.invalidRecords'|trans }}:</strong>
                    {{ contactsPreview|filter(contact => not contact.isValid)|length + errorLines|length }}
                </div>

                {% if contactsPreview|length > 0 %}
                    <h5>{{ 'lang.dataPreview'|trans }}</h5>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ 'lang.email'|trans }}</th>
                                <th>{{ 'lang.firstName'|trans }}</th>
                                <th>{{ 'lang.lastName'|trans }}</th>
                                <th>{{ 'lang.company'|trans }}</th>
                                <th>{{ 'lang.cellphone'|trans }}</th>
                                <th>{{ 'lang.status'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for contact in contactsPreview %}
                                <tr class="{% if not contact.isValid %}table-danger{% endif %}">
                                    <td>{{ contact.lineNumber }}</td>
                                    <td>{{ contact.email }}</td>
                                    <td>{{ contact.firstName }}</td>
                                    <td>{{ contact.lastName }}</td>
                                    <td>{{ contact.company }}</td>
                                    <td>{{ contact.cellphone }}</td>
                                    <td>
                                        {% if contact.isValid %}
                                            <span class="badge bg-success">{{ 'lang.valid'|trans }}</span>
                                        {% else %}
                                            <span class="badge bg-danger">
                                                {{ 'lang.invalid'|trans }}:
                                                {{ contact.errors|join(', ') }}
                                            </span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}

                {% if errorLines|length > 0 %}
                    <h5 class="mt-4">{{ 'lang.errorLines'|trans }}</h5>
                    <div class="table-responsive">
                        <table class="table table-danger table-bordered">
                            <thead>
                            <tr>
                                <th>{{ 'lang.lineNumber'|trans }}</th>
                                <th>{{ 'lang.error'|trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for line in errorLines %}
                                <tr>
                                    <td>{{ line.lineNumber }}</td>
                                    <td>{{ line.error }}</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endif %}
            </div>
            <div class="card-footer d-flex justify-content-between transparent">
                <a href="{{ path('app_import_index') }}" class="button button-outline">
                    {{ 'lang.cancel'|trans }}
                </a>

                <form action="{{ importType == 'standard' ? path('app_import_standard_save') : path('app_import_cumas_save') }}" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token('import_save') }}">
                    <button type="submit" class="button button-blue">
                        {{ 'lang.saveImport'|trans }}
                    </button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}