{% 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 stylesheets3rd %}{% endblock %}

{% block headercontent %}{% endblock %}

{% block content %}
    
    <div class="box">
		<div class="box-body">
			<div class='box views'>

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

                        <div class="row">

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right">
                                <a id="button-download-template" role="button" class="btn btn-sm" href="{{ bucket_cdn }}" style="display:none" download>
                                    <i class="fa fa-download" aria-hidden="true"></i> Descargar formato
                                </a>
                            </div>

                            <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 id="result-container" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center pl-2 pr-2"></div>

                            <div id="error-container" class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display:none;">
                                <hr>
                                <div class="text-right">
                                    <button id="copy-error" class="btn btn-sm" style=""><i class="fa fa-clipboard" aria-hidden="true"></i> Copiar errores</button>
                                    <table style="width: 100%;">
                                        <thead>
                                            <tr class="tr-top-table">
                                                <th scope="col" style="width: 100%;">Errores</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <div class="text-center table-responsive" style="max-height: 700px;overflow: auto;display: inline-block;">
                                    <table class="table table-hover table-condensed">
                                        <tbody id="error-table-rows-container">
                                        </tbody>
                                    </table>
                                </div>
                            </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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.1.0/progressbar.min.js" integrity="sha512-EZhmSl/hiKyEHklogkakFnSYa5mWsLmTC4ZfvVzhqYNLPbXKAXsjUYRf2O9OlzQN33H0xBVfGSEIUeqt9astHQ==" crossorigin="anonymous" 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/filePondBase.js'
        '@AppBundle/Resources/public/js/Import/Excel/base.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

{% block javascripts3rd %}{% endblock %}