{% extends "AppBundle::layout_backend.html.twig" %}

{% block stylesheets2nd %}


    {% stylesheets
        'bundles/app/css/filepond.css'
        'bundles/app/css/filepond.min.css'
        'bundles/app/css/filepond-plugin-image-preview.min.css'
        filter='cssrewrite' 
    %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

{% endblock %}

{% block bootstrap_stylesheets %}
    <link 
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" 
        crossorigin="anonymous"
    >
{% endblock %}

{% block bootstrap_javascript %}
    <script 
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
        crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
{% endblock %}   

{% block content %}
    {% stylesheets 
        'bundles/app/css/new-boostrap-common-styles.css'
    filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}"/>
    {% endstylesheets %}

    <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <div class="card h-100">
                <div class="card-body generation-model d-flex flex-column" style="height: 100%;">
                    <div class="card card-body text-bg-light mb-2" style="max-height: fit-content;">
                        <b>1.  Generar modelo de importación de atributos (ficha técnica) para una conexión y una categoría especifica. Luego completarlo con los SKU's y atributos deseados.</b>
                    </div>
                    <form id="generate-model" action="{{ path('app_excel_import_model_for_product_attributes') }}" method="post"  class="flex-grow-1 d-flex flex-column justify-content-between">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="mkpConn">Seleccione una conexión</label>
                                <select id="mkpConn" class="form-select mkp-conn" name="mkpConnId" required>
                                {% for mkpConn in mkpConns %}
                                    <option value="{{mkpConn.id}}">{{mkpConn.nombreconfiguracion}}</option>
                                {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="category">Seleccione una categoría</label>
                                <select 
                                    id="category" 
                                    name="categorySellerId"  
                                    class="form-select category" 
                                    placeholder="Categorías"
                                    style="flex-grow: 1; margin-right: 10px;"
                                    data-url="{{ path('CategoriaGlobal_Mapped') }}"
                                    required
                                >
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mt-2">    
                                <button type="submit" class="btn btn-custom-primary">Generar modelo</button>
                            </div>
                        </div>
                    </form>
                    <div class="spinner-container d-none" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
                        <div class="spinner-border" role="status" style="color: #00554e;">
                            <span class="sr-only">Cargando...</span>
                        </div>
                    </div>
                </div>    
            </div>    
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
            <div class="card h-100">
                <div class="card-body upload-model">
                    <div class="card card-body text-bg-light mb-2"><b>2.  Una vez completado el excel con los SKU's y sus respectivos atributos, adjuntar el mismo y presionar en <em>Importar atributos</em> detallando previamente la conexión.</b></div>
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="mkpConn">Seleccione una conexión</label>
                            <select id="mkpConn" class="form-select mkp-conn" name="mkpConnId" required>
                            {% for mkpConn in mkpConns %}
                                <option value="{{mkpConn.id}}" data-mkp-code="{{mkpConn.marketplace.codigo}}">{{mkpConn.nombreconfiguracion}}</option>
                            {% endfor %}
                            </select>
                        </div>
                        {# <div class="col-md-6 mb-3">
                            <label for="category">Seleccione una categoría</label>
                            <select 
                                id="category" 
                                name="globalCategoryId"  
                                class="form-select category" 
                                placeholder="Categorías"
                                style="flex-grow: 1; margin-right: 10px;"
                                data-url="{{ path('CategoriaGlobal_Mapped') }}"
                                required
                            >
                            </select>
                        </div> #}
                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <label>Suba el archivo completado: </label>
                            <div id="filepondContainer" class="mt-2">
                                <input
                                    id="file"
                                    type="file" 
                                    class="filepond"
                                    name="file"  
                                    data-allow-reorder="true"
                                    data-max-file-size="3MB"
                                    data-max-files="1"
                                    style="display:none;"
                                >
                            </div>
                        </div>

                        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <div id="send-file-container" class="info-container" style="visibility: hidden; margin-top: 2.5rem">
                                <div class="container-fluid" style="">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div id="info-container">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 mt-2">  
                            <button id="button_send" disabled class="btn btn-custom-primary">Importar atributos</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12">

            <div id="importProductsAttributesInfoContainer" class="card card-body table-container mb-2" role="table" aria-label="users">

                <table id='importProductsAttributesInfoTable' class='table table-hover table-responsive'>
                    <thead>
                        <tr class='tr-top-table'>
                            <th class="text-center" style="width: 22.5%;">ID de importación</th>
                            <th class="text-center" style="width: 22.5%;">Elementos</th>
                            <th class="text-center" style="width: 22.5%;">Fecha creación</th>
                            <th class="text-center" style="width: 22.5%;">Estado</th>
                            <th class="text-center" style="width: 10%;">Acciones</th>
                        </tr>
                    </thead>

                    <tbody id='rows-container'>
                    </tbody>
                </table>
                <ul id="table-records-info" class="pagination_description text-center">Se muestran las últimas 10 importaciones</ul>
            </div>
        </div>
    </div>

    <div class="position-fixed bottom-0 end-0 p-3" id="toast-container" style="z-index: 200000">
    </div>

{% endblock %}    

{% block javascripts2nd %}

    <script src="https://unpkg.com/read-excel-file@5.1.0/bundle/read-excel-file.min.js" referrerpolicy="no-referrer"></script>

    {% javascripts 
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-validate-size.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-validate-type.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond-plugin-file-encode.min.js'
        '@AppBundle/Resources/public/js/Filepond/filepond.min.js'
        '@AppBundle/Resources/public/js/Toast/toast.js'
        '@AppBundle/Resources/public/js/Import/Excel/ProductsAttributes/index.js'
        '@AppBundle/Resources/public/js/Import/Excel/base.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block javascripts3rd %}{% endblock %}