<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>525 Sistema</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="css/style.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="css/jquery.fileupload.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
     
</head>
<body style="padding-top: 0px; margin: 15% 25%; background-image: url('img/hero6.jpg');">
  <div class="jumbotron"  style="margin-top:-10% ;background-color: rgba(0, 0, 0, 0);">
  <h1 style="margin-bottom: 10%" class="text-center display-3">525</h1>
  <p></p>
  <form id="form" action="" method="post">
     <div class="form-group">
    <input type="text" style="margin-left: 25%; margin-right: 25%; width: 50% !important" id="wbhook" class="form-control text-center" name="webhook" placeholder="Ingresa la dirección de envio">
    <input type="hidden"  id="webhook" name="archivo" >
  </div>
  
  
 
</form>
<center>
    <span  class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>Seleccionar archivo...</span>
        <!-- The file input field used as target for the file upload widget -->
        <input   id="fileupload" type="file" name="files[]" >
    </span>
    <br>
    <br>
    <!-- The global progress bar -->
    <div id="progress" class="progress">
        <div class="progress-bar progress-bar-success"></div>
    </div>
    <!-- The container for the uploaded files -->
    <div id="files" class="files"></div>
</center>
    <br><div style="display: none" class="alert alert-success" role="alert">
  <strong>Listo!</strong> Ha finalizado el proceso.
</div>
<div style="display: none" class="alert alert-warning" role="alert">
  <strong>Error!</strong> Hubo un problema.
</div>
<center>
    <p class="lead">
      <button id="submit" style="width: 40%" class="btn btns btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Procesando datos">Iniciar</button>
  </p>
  </center>
  
  
</div>

   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="js/jquery.fileupload.js"></script>
<script>
/*jslint unparam: true */
/*global window, $ */

$(function () {
    // Change this to the location of your server-side upload handler:
    var url = 'server/php/';
    $('#fileupload').fileupload({

        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
                $('#webhook').val(file.name)
            });
            $("#fileupload").prop('disabled', true);
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
         $("#submit").on('click', function(){

    var $this = $('.btns');
  $this.button('loading');
    
      
            // send ajax
            $.ajax({
                url: 'procesarExcel.php', // url where to submit the request
                type : "GET", // type of action POST || GET
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data : { webhook: $('#wbhook').val(),
                archivo: $("#webhook").val()},
                //$("#form").serialize(), // post data || get data
                success : function(result) {
                    // you can see the result from the console
                    // tab of the developer tools
                    console.log(result);
                    if(result.status == true) {
                      $(".alert-success").show();
                       $this.button('reset');
                    }
                },
                error: function(xhr, resp, text) {
                    $(".alert-warning").show();
                    $this.button('reset');
                    console.log(xhr, resp, text);
                }
            });
        });
});
</script>
    
</body>
</html>