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

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

{% block title %}Import Mercuriale - Mercuriale.io{% endblock %}

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

{% block hub_content %}
<div class="hub-content hub-content--narrow">
    <h1 class="hub-title"><i class="fas fa-file-import"></i> Import de mercuriale</h1>

    {# Card #}
    <div class="hub-section">
        <div class="mi-card">
            <div class="mi-card__body">
                {{ form_start(form, {'attr': {
                    'id': 'upload-form',
                    'novalidate': 'novalidate',
                    'data-controller': 'file-upload',
                    'data-file-upload-max-size-value': '10485760',
                    'data-file-upload-max-files-value': '1',
                    'data-file-upload-allowed-types-value': '[]',
                    'data-file-upload-allowed-extensions-value': '["csv", "xlsx"]',
                    'data-file-upload-mode-value': 'single',
                    'data-file-upload-loading-text-value': 'Analyse en cours...',
                    'data-action': 'submit->file-upload#submit'
                }}) }}

                    {# Global form errors #}
                    {% if form.vars.errors|length > 0 %}
                        <div class="mi-error-box">
                            <div class="mi-error-box__title">
                                <i class="fas fa-exclamation-circle"></i>
                                Erreurs de validation
                            </div>
                            <ul class="mi-error-box__list">
                                {% for error in form.vars.errors %}
                                    <li>{{ error.message }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

                    {# Fournisseur select #}
                    <div class="mi-form-group">
                        <label class="mi-form-group__label">
                            <i class="fas fa-truck"></i> Fournisseur
                        </label>
                        {{ form_widget(form.fournisseur, {'attr': {'class': 'mi-form-field'}}) }}
                        {{ form_errors(form.fournisseur) }}
                    </div>

                    {# Etablissements checkboxes #}
                    <div class="mi-form-group">
                        <label class="mi-form-group__label">
                            <i class="fas fa-building"></i> Etablissements (optionnel)
                        </label>
                        <div class="mercuriale-import-checkboxes">
                            {{ form_widget(form.etablissements) }}
                        </div>
                        <p class="mi-form-group__hint">
                            <i class="fas fa-info-circle"></i>
                            Cochez les etablissements concernes. Laissez vide pour appliquer les prix a tous (prix groupe).
                        </p>
                        {{ form_errors(form.etablissements) }}
                    </div>

                    {# File input #}
                    <div class="mi-form-group">
                        <label class="mi-form-group__label">
                            <i class="fas fa-file-excel"></i> Fichier mercuriale
                        </label>

                        <div data-file-upload-target="dropZone" class="mi-dropzone">
                            <div class="mi-dropzone__icon">
                                <i class="fas fa-cloud-upload-alt"></i>
                            </div>
                            <h3 class="mi-dropzone__title">Glissez votre fichier ici</h3>
                            <p class="mi-dropzone__subtitle">ou cliquez pour parcourir</p>
                            <div class="mi-dropzone__hint">
                                <i class="fas fa-info-circle"></i>
                                CSV ou XLSX - Maximum 10 Mo - 5000 lignes max
                            </div>
                        </div>

                        <div data-file-upload-target="preview" class="mi-file-preview">
                            <div class="mi-file-preview__row">
                                <div class="mi-file-preview__icon">
                                    <i class="fas fa-file-excel"></i>
                                </div>
                                <div class="mi-file-preview__info" data-file-upload-target="filesList"></div>
                                <button type="button" data-action="file-upload#clearAll" class="mi-file-preview__remove">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>

                        {{ form_widget(form.file, {'attr': {'class': 'hidden', 'data-file-upload-target': 'input'}}) }}
                        {{ form_errors(form.file) }}
                    </div>

                    {# Submit button #}
                    <button type="submit" data-file-upload-target="submit" disabled class="btn btn--primary btn--lg btn--full">
                        <i class="fas fa-upload"></i>
                        Analyser le fichier
                    </button>

                {{ form_end(form) }}
            </div>
        </div>
    </div>

    {# Pending imports #}
    {% if pendingImports is not empty %}
    <div class="hub-section">
        <div class="hub-section__header">
            <h2 class="hub-section__title"><i class="fas fa-clock"></i> Imports en cours</h2>
        </div>
        <div class="mi-card">
            <div class="mi-card__body">
                {% for import in pendingImports %}
                <div class="mi-pending-item">
                    <div>
                        <div class="mi-pending-item__name">{{ import.originalFilename }}</div>
                        <div class="mi-pending-item__meta">
                            {{ import.fournisseur.nom }} - {{ import.totalRows }} lignes
                            <span class="hub-badge hub-badge--{{ import.status.color }}">
                                {{ import.status.label }}
                            </span>
                        </div>
                    </div>
                    <div class="hub-ctas">
                        <a href="{{ path('app_mercuriale_import_mapping', {importId: import.idAsString}) }}" class="hub-cta hub-cta--primary">
                            <i class="fas fa-arrow-right"></i> Continuer
                        </a>
                        <form action="{{ path('app_mercuriale_import_cancel', {importId: import.idAsString}) }}" method="post" class="inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('cancel_import_' ~ import.idAsString) }}">
                            <button type="submit" class="hub-cta hub-cta--outline" onclick="return confirm('Annuler cet import ?')">
                                <i class="fas fa-times"></i>
                            </button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}