@include ('header')
@include ('navigator_clientes')


<h2 class="text-center">RECTIFICACIONES</h2>

<section class="container">
    <div class="row">
        <form action="/rectificaciones/cargas" method="POST" enctype="multipart/form-data" class="card"
            style="width: 60vw;margin: 0 auto;display: flex;padding: 10px 30px 0 30px;" id="sendTxt">
            <div class="card-body" style="width: 80vw;">
                <div class="col-sm-9">
                    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                    <label for="" class="form-group">Eliga un archivo</label>
                    <input type="file" name="userText" accept=".txt" class="form-group" id="txtInput">
                    <!-- Este mensaje aparece cuando el archivo no es TXT -->
                    <p class="text-danger hidden" id="archInv">Archivo inválido. El archivo ingresado debe tener formato
                        TXT</p>
                </div>
                <div class="col-sm-3 text-center" id="btn-fidelitas" style="margin-top: 5vh;">
                    <button class="btn btn-fidelitas" id="carga">Cargar</button>
                </div>
            </div>
        </form>
    </div>
    <!-- Este es el mensaje de carga, que aparece cuando ya se cargó el archivo TXT -->
    <div>
        <h3 class="text-center hidden" id="procesando">Los datos se están procesando, esta acción puede tardar unos
            minutos. <br><br> Espere por favor...</h3>
    </div>

</section>

<script type="text/javascript" src="{{ URL::asset('js/rectificaciones/rectificaciones.js') }}"></script>

<script>
    var txt = ".txt";
    window.onload = function () {
        $("#txtInput").change(function () {
            var txtName = $("#txtInput").val()
            if (txtName.includes(txt) != true) {
                $("#archInv").toggleClass('hidden');
            }
            if (txtName.includes(txt)) {
                if ($("#archInv").hasClass('hidden') != true) {
                    $("#archInv").toggleClass('hidden');
                }
            }
        });

    };
</script>

@include ('footer')