<script>
    function ver_usuarios() {
        $("#tabla_titulo").html("Cargando Lista de Usuarios...");
        param = {
            m: $("#tabla_mos").val(),
            b: $("#tabla_txt").val(),
            p: $("#tabla_pag").val(),
        }
        $.post("<?php echo site_url("admin/get_usuarios"); ?>", param, function(data) {
            data = JSON.parse(data);
            $("#tbody_usuarios").html(data.tabla);
            $("#tabla_info").html("Mostrando Registros del " + (data.ini + 1) + " al " + (data.fin + 1));
            $("#tabla_pag").html(data.pgs_opt);
            $("#tabla_pag").val(data.pag);
            $("#tabla_tot").html(data.pgs);
            $("#tabla_titulo").html("Lista de Usuarios");
        });
    }
    var dnis;
    var nombres;
    var apellidos;
    $(document).ready(function() {
        $("#dialog_nuevos_usuarios").dialog({
            title: "NUEVOS USUARIOS",
            modal: true,
            width: 1000,
            height: 600,
            resizable: false,
            autoOpen: false,
        });
        ver_usuarios();
        $("#tabla_mos").change(function() {
            ver_usuarios();
        });
        $("#tabla_pag").change(function() {
            ver_usuarios();
        });
        $("#tabla_txt").keyup(function() {
            setTimeout(ver_usuarios, 1000);
        });
        $("#tabla_export_excel").click(function() {
            $("#iframe_excel").attr("src", "<?php echo site_url("admin/get_usuarios_excel?b="); ?>" + $("#tabla_txt").val());
        });
        $("#tabla_ant").click(function() {
            p = parseInt($("#tabla_pag").val());
            $("#tabla_pag").val(p - 1);
            if ($("#tabla_pag").val() == null) {
                $("#tabla_pag").val(1)
            }
            ver_usuarios();
        });
        $("#tabla_sig").click(function() {
            p = parseInt($("#tabla_pag").val());
            $("#tabla_pag").val(p + 1)
            if ($("#tabla_pag").val() == null) {
                $("#tabla_pag").val(1)
            }
            ver_usuarios();
        });
        $("#tabla_nuevos_usuarios").click(function() {
            $("#dialog_nuevos_usuarios").dialog("open");
        });
        $("#pre").click(function() {
            dnis = $("#dnis").val();
            nombres = $("#nombres").val();
            apellidos = $("#apellidos").val();
            dnis1 = dnis.split("\n");
            nombres1 = nombres.split("\n");
            apellidos1 = apellidos.split("\n");
            tbody = $("#tbody_nuevos_usuarios").html();
            for (i = 0; i < dnis1.length; i++) {
                d = dnis1[i];
                n = nombres1[i];
                a = apellidos1[i];
                tbody = tbody + "<tr class='tr_pre' id='tr_" + i + "'><td width='4%'>" + (i + 1) + "</td><td width='32%'>" + d + "</td><td width='32%'>" + n + "</td><td width='32%'>" + a + "</td></tr>";
            }
            tbody = $("#tbody_nuevos_usuarios").html(tbody);
            $("#tr_listas").addClass("hidden");
            $("#dnis").val(dnis);
            $("#nombres").val(nombres);
            $("#apellidos").val(apellidos);
            $("#pre").addClass("hidden");
            $("#can").removeClass("hidden");
            $("#gua").removeClass("hidden");
        });
        $("#can").click(function() {
            $(".tr_pre").remove();
            $("#tr_listas").removeClass("hidden");
            $("#dnis").val(dnis);
            $("#nombres").val(nombres);
            $("#apellidos").val(apellidos);
            $("#pre").removeClass("hidden");
            $("#can").addClass("hidden");
            $("#gua").addClass("hidden");
        });
        $("#form_nuevos_usuarios").submit(function(e) {
            e.preventDefault();
            dnis = $("#dnis").val();
            nombres = $("#nombres").val();
            apellidos = $("#apellidos").val();
            dnis1 = dnis.split("\n");
            nombres1 = nombres.split("\n");
            apellidos1 = apellidos.split("\n");
            for (i = 0; i < dnis1.length; i++) {
                param = {
                    d: dnis1[i],
                    n: nombres1[i],
                    a: apellidos1[i],
                    i: i
                }
                $.post("<?php echo site_url("admin/nuevo_usuario"); ?>", param, function(data) {
                    data = JSON.parse(data);
                    $("#tr_" + data.i).attr("class", "tr_pre");
                    $("#tr_" + data.i).addClass(data.col);
                    $("#tr_" + data.i).attr("title", data.txt);
                });
            }
        })
    });
</script>
<div class="row">
    <div class="col-sm-12">
        <div class="table-header" id="tabla_titulo">
            Lista de Usuarios
        </div>
        <div class="dataTables_wrapper form-inline no-footer">
            <div class="row">
                <div class="col-sm-6">
                    <div class="dataTables_length" id="dynamic-table_length">
                        <label>
                            Mostrar
                            <select id="tabla_mos" aria-controls="dynamic-table" class="form-control input-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                            Registros
                        </label>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div id="dynamic-table_filter" class="dataTables_filter">
                        <label>
                            Buscar:
                            <input type="search" class="form-control input-sm" id="tabla_txt">
                        </label>
                    </div>
                </div>
            </div>
            <div class="col-sm-12" style="overflow-y: scroll;padding:0px;">
                <table class="table table-bordered table-hover" style="margin-bottom: 0px;">
                    <thead>
                        <tr>
                            <th width="05%">NRO.</th>
                            <th width="10%">USUARIO</th>
                            <th width="20%">APELLIDOS</th>
                            <th width="20%">NOMBRES</th>
                            <th width="20%">CORREO</th>
                            <th width="10%">CELULAR</th>
                            <th width="15%">OPCIONES</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="col-sm-12" style="overflow-y: scroll;padding:0px;max-height: 300px;min-height: 300px;background-color: white;">
                <table class="table table-bordered table-hover" style="margin-bottom: 0px;">
                    <tbody id="tbody_usuarios">

                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <br>
                    <div id="tabla_info">
                        Mostrando...
                    </div>
                </div>
                <div class="col-sm-4">
                    <br>
                    <button class="btn btn-danger btn-sm" id="tabla_nuevos_usuarios">
                        <span class="fa fa-users"></span>
                        Nuevos Usuarios
                    </button>
                    <button class="btn btn-success btn-sm" id="tabla_export_excel">
                        <span class="ace-icon fa fa-file-excel-o"></span>
                        Exportar a Excel
                    </button>
                </div>
                <div class="col-xs-4 text-right">
                    <br>
                    <button class="btn btn-sm btn-primary" id="tabla_ant">Anterior</button>
                    <label id="paginas_info">
                        Pagina
                        <select id="tabla_pag">
                            <option value="1">1</option>
                        </select>
                        de
                        <label id="tabla_tot"></label>
                    </label>
                    <button class="btn btn-sm btn-primary" id="tabla_sig">Siguiente</button>
                </div>
            </div>
        </div>
    </div>

    <div style="display:none;">
        <iframe id="iframe_excel" src="" frameborder="0"></iframe>
    </div>

    <div id="dialog_nuevos_usuarios">
        <label class="text text-info"><b>Si tiene sus listas en Excel o Word copie y pegue directamente en los campos que corresponden</b></label>
        <form action="" id="form_nuevos_usuarios">
            <div class="col-sm-12" style="overflow-y: scroll;padding:0px;">
                <table class="table table-bordered" style="margin-bottom: 0px;">
                    <thead>
                        <tr>
                            <th width="4%">#</th>
                            <th width="32%">LISTA DE DNIS</th>
                            <th width="32%">LISTA DE NOMBRES</th>
                            <th width="32%">LISTA DE APELLIDOS</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="col-sm-12" style="overflow-y: scroll;padding:0px;max-height: 300px;min-height: 300px;border:1px solid #ccc;">
                <table class="table table-bordered table-condensed table-hover" style="margin-bottom: 0px;">
                    <tbody id="tbody_nuevos_usuarios">
                        <tr id="tr_listas">
                            <td width="4%"></td>
                            <td width="32%"><textarea name="dnis" id="dnis" rows="13" style="width:100%"></textarea></td>
                            <td width="32%"><textarea name="nombres" id="nombres" rows="13" style="width:100%"></textarea></td>
                            <td width="32%"><textarea name="apellidos" id="apellidos" rows="13" style="width:100%"></textarea></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-sm-12" style="padding:0px;padding-top:10px;">
                <button class="btn btn-success btn-sm" id="pre" type="button">
                    <span class="glyphicon glyphicon-zoom-in"></span>
                    Previsualizar
                </button>
                <button class="btn btn-danger btn-sm hidden" id="can" type="button">
                    <span class="glyphicon glyphicon-remove"></span>
                    Cancelar
                </button>
                <button class="btn btn-primary btn-sm hidden" id="gua" type="submit">
                    <span class="fa fa-users"></span>
                    Registrar
                </button>
            </div>
            <div class="col-sm-12" style="padding:0px;padding-top:10px;">
                <div id="res_nuevos_usuarios" class=""></div>
            </div>
        </form>
    </div>