<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Plazas - Dashboard</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>
<script type="text/javascript">
    $(document).ready(function () {
        $(".list-unstyled").find('li').removeClass("active");
        $("#plazas").addClass("active");
    });
</script>
<script>
    $(document).ready(function() {
        $('#tablaproductos').DataTable();
    } );
</script>
<script>
    function activarlista(){
        $("#grid_click").removeClass("activar_vista");
        $("#list_click").addClass("activar_vista");
        $("#grid_view").css('display','none').fadeOut(300);
        $("#list_view_products").css('display','block').fadeIn(300);
    }  
</script>
<script>
    function activargrid(){
        $("#list_click").removeClass("activar_vista");
        $("#grid_click").addClass("activar_vista");
        $("#list_view_products").css('display','none').fadeOut(300);
        $("#grid_view").css('display','block').fadeIn(300);
    }
</script>
<?php include('sidebar.php') ?>       
<div id="content">
    <?php include('header.php') ?>       
    <div class="content-section">
        <div class="main">
            <h1 class="breadcrumb-header">Plazas</h1>
            <div class="row">
                <div class="col-md-6">
                    <div class="list_view">
                        <div class="row">
                            <div class="colgrilla">
                                <div class="btn_view">
                                    <a class="activar_vista" id="list_click" tooltip-location="top" tooltip-animate tooltip="Ver como lista" onclick="activarlista()"><i class="fas fa-list"></i></a>
                                </div>
                            </div>
                            <div class="colgrilla">
                                <div class="btn_view">
                                    <a id="grid_click" tooltip-location="top" tooltip-animate tooltip="Ver como grupo" onclick="activargrid()"><i class="fas fa-th"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="add_producto">
                        <div class="btn_add_producto">
                            <a href="#" data-toggle="modal" data-target="#addProducto">Agregar manual</a>
                        </div>
                    </div>
                    <div class="add_producto">
                        <div class="btn_add_producto">
                            <a href="#" data-toggle="modal" data-target="#addProductoExpress">Agregar express</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_productos" id="grid_view">
                <div class="row">
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="img-container">
                                        <img src="images/not_found.png">
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="info_details">
                                        <p>Nombre de la plaza</p>
                                        <p>Descripción</p>
                                        <p>Salario</p>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Ver plaza" data-toggle="modal" data-target="#verProducto"><i class="far fa-eye"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Editar plaza" data-toggle="modal" data-target="#editarProducto"><i class="far fa-edit"></i></a>
                                        </div>
                                        <div class="botones_interactivos">
                                            <a href="#" tooltip-location="top" tooltip-animate tooltip="Eliminar plaza" data-toggle="modal" data-target="#deleteProducto"><i class="far fa-times-circle"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main_list_products" id="list_view_products">
                <div class="row">
                    <div class="col-md-12">
                        <div class="body-table">
                            <table id="tablaproductos" class="display" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Nombre de la plaza</th>
                                        <th>Descripción</th>
                                        <th>Salario</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Nombre de la plaza</td>
                                        <td>Descripción</td>
                                        <td>Salario</td>
                                        <td><a href="#" class="ver_producto" data-toggle="modal" data-target="#verProducto">Ver</a><a href="#" class="editar_producto" data-toggle="modal" data-target="#editarProducto">Editar</a><a href="#" class="eliminar_producto" data-toggle="modal" data-target="#deleteProducto">Eliminar</a></td>
                                    </tr>
                                    

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>Nombre de la plaza</th>
                                        <th>Descripción</th>
                                        <th>Salario</th>
                                        <th>Acciones</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php include('footer.php') ?>
    </div>
</div>

  <!-- Modal agregar-->
  <div class="modal fade" id="addProducto" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Agregar plaza</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="img-container">
                        <img src="images/not_found.png">
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="custom-file-upload">
                        <input type="file" id="file" name="myfiles[]" multiple readonly />
                    </div>
                </div>
            </div>
            <div class="data_product">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" name="nombre" placeholder="Nombre de la plaza">
                        <textarea placeholder="Descripción general de la plaza"></textarea>
                        <input type="number" name="salario" placeholder="Salario">
                    </div>
                    <div class="add_producto_confirm">
                        <div class="btn_add_producto_confirm">
                            <a href="#" type="submit">Agregar plaza</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      
    </div>
  </div>


  <!-- Modal agregar express-->
  <div class="modal fade" id="addProductoExpress" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Agregar plaza express</h4>
        </div>
        <div class="modal-body">
            <div class="data_product">
                <div class="row">
                    <div class="col-md-12">
                        <input type="link" name="link" placeholder="Link de la plaza">
                    </div>
                    <div class="add_producto_confirm">
                        <div class="btn_add_producto_confirm">
                            <a href="#" type="submit">Agregar plaza</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      
    </div>
  </div>

  <!-- Modal ver-->
  <div class="modal fade" id="verProducto" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Ver plaza</h4>
        </div>
        <div class="modal-body">
            <div class="data_product">
                <div class="row">
                    <div class="col-md-4">
                        <div class="img-container">
                            <img src="images/not_found.png">
                        </div>
                    </div>
                    <div class="col-md-8">
                        <input type="text" name="nombre" placeholder="Nombre de la plaza" readonly>
                        <input type="text" name="descript" placeholder="Descripción" readonly>
                        <input type="number" name="sku" placeholder="3500" readonly>
                    </div>
                </div>
            </div>
        </div>
      </div>
      
    </div>
  </div>
   <!-- Modal editar-->
<div class="modal fade" id="editarProducto" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Editar plaza</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="img-container">
                        <img src="images/not_found.png">
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="custom-file-upload">
                        <input type="file" id="file" name="myfiles[]" multiple disabled />
                    </div>
                </div>
            </div>
            <div class="data_product">
                <div class="row">
                    <div class="col-md-12">
                        <input type="text" name="nombre" placeholder="Nombre de la plaza">
                        <textarea placeholder="Descripción"></textarea>
                        <input type="number" name="sku" placeholder="3500">
                    </div>
                </div>
                <div class="add_producto_confirm">
                    <div class="btn_add_producto_confirm">
                        <a href="#" type="submit">Actualizar plaza</a>
                    </div>
                </div> 
            </div>
        </div>
      </div>
    </div>
</div>
  <!-- Modal eliminar-->
  <div class="modal fade" id="deleteProducto" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">¡Atención!</h4>
        </div>
        <div class="modal-body">
            <h1 class="alert">¿Estás seguro que deseas eliminar esta plaza?</h1>
            <p class="text-alert">Una vez eliminado no será posible recuperarla</p>
            <div class="row">
                <div class="col-md-6">
                    <div class="cancel_producto_confirm">
                        <div class="btn_cancelar">
                            <a href="#" type="submit">Cancelar</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="delet_producto_confirm">
                        <div class="btn_delete_producto_confirm">
                            <a href="#" type="submit">Eliminar</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      
    </div>
  </div>


  <script>
      ;(function($) {

          // Browser supports HTML5 multiple file?
          var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',
              isIE = /msie/i.test( navigator.userAgent );

          $.fn.customFile = function() {

            return this.each(function() {

              var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input
                  $wrap = $('<div class="file-upload-wrapper">'),
                  $input = $('<input type="text" class="file-upload-input" disabled placeholder="Ningún archivo seleccionado" />'),
                  // Button that will be used in non-IE browsers
                  $button = $('<button type="button" class="file-upload-button">Subir foto</button>'),
                  // Hack for IE
                  $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Subir foto</label>');

              // Hide by shifting to the left so we
              // can still trigger events
              $file.css({
                position: 'absolute',
                left: '-9999px'
              });

              $wrap.insertAfter( $file )
                .append( $file, $input, ( isIE ? $label : $button ) );

              // Prevent focus
              $file.attr('tabIndex', -1);
              $button.attr('tabIndex', -1);

              $button.click(function () {
                $file.focus().click(); // Open dialog
              });

              $file.change(function() {

                var files = [], fileArr, filename;

                // If multiple is supported then extract
                // all filenames from the file array
                if ( multipleSupport ) {
                  fileArr = $file[0].files;
                  for ( var i = 0, len = fileArr.length; i < len; i++ ) {
                    files.push( fileArr[i].name );
                  }
                  filename = files.join(', ');

                // If not supported then just take the value
                // and remove the path to just show the filename
                } else {
                  filename = $file.val().split('\\').pop();
                }

                $input.val( filename ) // Set the value
                  .attr('title', filename) // Show filename in title tootlip
                  .focus(); // Regain focus

              });

              $input.on({
                blur: function() { $file.trigger('blur'); },
                keydown: function( e ) {
                  if ( e.which === 13 ) { // Enter
                    if ( !isIE ) { $file.trigger('click'); }
                  } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del
                    // On some browsers the value is read-only
                    // with this trick we remove the old input and add
                    // a clean clone with all the original events attached
                    $file.replaceWith( $file = $file.clone( true ) );
                    $file.trigger('change');
                    $input.val('');
                  } else if ( e.which === 9 ){ // TAB
                    return;
                  } else { // All other keys
                    return false;
                  }
                }
              });

            });

          };

          // Old browser fallback
          if ( !multipleSupport ) {
            $( document ).on('change', 'input.customfile', function() {

              var $this = $(this),
                  // Create a unique ID so we
                  // can attach the label to the input
                  uniqId = 'customfile_'+ (new Date()).getTime(),
                  $wrap = $this.parent(),

                  // Filter empty input
                  $inputs = $wrap.siblings().find('.file-upload-input')
                    .filter(function(){ return !this.value }),

                  $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>');

              // 1ms timeout so it runs after all other events
              // that modify the value have triggered
              setTimeout(function() {
                // Add a new input
                if ( $this.val() ) {
                  // Check for empty fields to prevent
                  // creating new inputs when changing files
                  if ( !$inputs.length ) {
                    $wrap.after( $file );
                    $file.customFile();
                  }
                // Remove and reorganize inputs
                } else {
                  $inputs.parent().remove();
                  // Move the input so it's always last on the list
                  $wrap.appendTo( $wrap.parent() );
                  $wrap.find('input').focus();
                }
              }, 1);

            });
          }

}(jQuery));

$('input[type=file]').customFile();
  </script>