{% extends 'admin/hub/layout.html.twig' %}

{% set hub_title = 'Mercuriale' %}
{% set hub_breadcrumbs = [
    { label: 'Mercuriale', url: path('app_produits_liste') },
    { label: 'Mapping' }
] %}

{% block title %}Mapping des colonnes - Import Mercuriale{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/mercuriale-import.css') }}">
{% endblock %}

{% block hub_content %}
<div class="hub-content hub-content--medium">
    <h1 class="hub-title"><i class="fas fa-columns"></i> Mapping des colonnes</h1>

    {% include 'components/_import_progress.html.twig' with { current_step: 2 } only %}

    {# Import info #}
    <div class="hub-import-info">
        <div>
            <div class="hub-import-info__filename">{{ import.originalFilename }}</div>
            <div class="hub-import-info__meta">
                {{ import.fournisseur.nom }}
                {% if import.etablissements|length > 0 %}
                    - {{ import.etablissements|map(e => e.nom)|join(', ') }}
                {% else %}
                    - Prix groupe
                {% endif %}
            </div>
        </div>
        <div>
            <div class="hub-stat-card__value">{{ import.totalRows }}</div>
            <div class="hub-stat-card__label">lignes</div>
        </div>
    </div>

    {{ form_start(form, {'attr': {'id': 'mapping-form', 'novalidate': 'novalidate'}}) }}
    <div class="mi-mapping-grid">
        {# Mapping form #}
        <div class="mi-card">
            <div class="mi-card__body">
                <h2 class="hub-section__title mi-mb-md">
                    <i class="fas fa-link"></i> Association des colonnes
                </h2>

                {# Required fields #}
                <div class="mi-field-section">
                    <h3 class="mi-section-title">Champs obligatoires</h3>

                    <div class="mi-fields">
                        <div>
                            <label class="mi-form-group__label">
                                Code produit fournisseur <span class="mi-required">*</span>
                            </label>
                            {{ form_widget(form.mapping_code_fournisseur, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>

                        <div>
                            <label class="mi-form-group__label">
                                Designation <span class="mi-required">*</span>
                            </label>
                            {{ form_widget(form.mapping_designation, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>

                        <div>
                            <label class="mi-form-group__label">
                                Prix unitaire HT <span class="mi-required">*</span>
                            </label>
                            {{ form_widget(form.mapping_prix, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>
                    </div>
                </div>

                {# Optional fields #}
                <div class="mi-field-section">
                    <h3 class="mi-section-title">Champs optionnels</h3>

                    <div class="mi-fields">
                        <div>
                            <label class="mi-form-group__label">Unite</label>
                            {{ form_widget(form.mapping_unite, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>

                        <div>
                            <label class="mi-form-group__label">Conditionnement</label>
                            {{ form_widget(form.mapping_conditionnement, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>

                        <div>
                            <label class="mi-form-group__label">Date de debut</label>
                            {{ form_widget(form.mapping_date_debut, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>

                        <div>
                            <label class="mi-form-group__label">Date de fin</label>
                            {{ form_widget(form.mapping_date_fin, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>
                    </div>
                </div>

                {# Options #}
                <div class="mi-field-section">
                    <h3 class="mi-section-title">Options</h3>

                    <div class="mi-fields">
                        <div class="mi-checkbox-row">
                            {{ form_widget(form.hasHeaderRow) }}
                            <label>La premiere ligne contient les en-tetes</label>
                        </div>

                        <div>
                            <label class="mi-form-group__label">Unite par defaut</label>
                            {{ form_widget(form.defaultUnite, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>

                        <div>
                            <label class="mi-form-group__label">Date de debut par defaut</label>
                            {{ form_widget(form.defaultDateDebut, {'attr': {'class': 'mi-form-field mi-form-field--sm'}}) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Preview data #}
        <div class="mi-card">
            <div class="mi-card__body">
                <h2 class="hub-section__title mi-mb-sm">
                    <i class="fas fa-table"></i> Apercu des donnees
                </h2>
                <p class="mi-text-secondary mi-mb-sm">Premieres lignes du fichier</p>

                <div class="mi-overflow-x">
                    <table class="hub-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                {% for header in headers %}
                                    <th>{{ header ?: '(vide)' }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            {% for index, row in previewRows %}
                                <tr>
                                    <td class="mi-text-muted">{{ index + 2 }}</td>
                                    {% for cell in row %}
                                        <td class="mi-cell-truncate" title="{{ cell }}">
                                            {{ cell ?: '-' }}
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {% if import.totalRows > 5 %}
                    <p class="mi-text-secondary mi-text-center mi-mt-sm">
                        <i class="fas fa-info-circle"></i>
                        + {{ import.totalRows - 5 }} autres lignes
                    </p>
                {% endif %}
            </div>
        </div>
    </div>

    {# Actions #}
    <div class="hub-actions-bar">
        <a href="{{ path('app_mercuriale_import') }}" class="hub-cta hub-cta--outline">
            <i class="fas fa-arrow-left"></i> Retour
        </a>
        <button type="submit" class="hub-cta hub-cta--primary">
            Previsualiser l'import <i class="fas fa-arrow-right"></i>
        </button>
    </div>
    {{ form_end(form) }}
</div>
{% endblock %}