{% 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 headercontent %}
    <h3 class="cfj-bgcolor-three pageTitle cfj-color-white">
        Publicaciones <i class="fa fa-angle-right"></i> Importar
    </h3>
{% endblock %}    

{% block content %}

    <div class="box">
		<div class="box-body">
			<div class='box views'>
                <div>
                    <div class="row mt-4" style="display: flex;flex-wrap: wrap;row-gap: 2px">
                        <div class="col-12 col-sm-12 col-md-4 p-1" style="display: flex;flex-direction: column;">
                            <div class="showview p-2" style="height: 100%;">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <label>Elija una conexion: </label>
                                        <div>
                                            <form action="{{ path('app_excel_generate_import_model') }}" method="post">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <select class="form-control" name="mkpConnId">
                                                        {% for mkpConn in mkpConns %}
                                                            <option value={{mkpConn.id}}>{{mkpConn.nombreconfiguracion}}</option>
                                                        {% endfor %}
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-12 mt-2">    
                                                        <button type="submit" class="btn btn-block btn-primary">Descargar modelo</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-12 col-md-8 p-1" style="display: flex;flex-direction: column;">
                            <div class="showview p-2">
                                <div class="row">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <label>Suba el archivo completado: </label>
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                                                <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;">
                                                    <div class="container-fluid" style="">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="row">
                                                                    <div id="info-container" class="col-md-9">
                                                                    </div>
                                                                    <div class="col-md-3">
                                                                        <button id="button_send" disabled class="btn btn-block btn-primary" style="font-weight: bold; border: none; font-size: 20px; margin-top: 0.35rem;"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="row mt-4">
                        <div class="showview p-2">

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

                                <table id='importPublicationsInfoTable' class='table table-hover table-responsive'>
                                    <thead>
                                        <tr class='tr-top-table'>
                                            <th style="width: 30%;">Fecha importación</th>
                                            <th style="width: 30%;">Conexion</th>
                                            <th style="width: 30%;">Estado</th>
                                            <th style="width: 10%;">Informe errores</th>
                                        </tr>
                                    </thead>

                                    <tbody id='rows-container'>
                                        {% include 'AppBundle:Excel:import/publications/imports_registers.html.twig'%}
                                    </tbody>
                                </table>
                                <ul id="table-records-info" class="pagination_description text-center">Se muestran las últimas 10 importaciones</ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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/Import/Excel/Publication/index.js'
        '@AppBundle/Resources/public/js/Import/Excel/base.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block javascripts3rd %}{% endblock %}