<script>
    function get_administradores(ugel_ide,ugel_nombre){
        open_cargar("Espere un momento...");
        param={
            ugel_ide:ugel_ide,
            ugel_nombre:ugel_nombre,
        };
        $.post("<?php echo site_url("superadmin/get_admin_ugel"); ?>",param,function(data){
            close_cargar();
            $("#title_lista_ugel_nombre").html(ugel_nombre);
            $("#dialog_nuevo_admin_ugel_ugel_ide").val(ugel_ide);
            $("#dialog_nuevo_admin_ugel_ugel_nombre").val(ugel_nombre);
            $("#tbody_lista_admin_ugel").html(data);
            $("#dialog_lista_admin_ugel").dialog("open");
        });
    }
    function get_usuario(obj){
        $("#dialog_nuevo_admin_ugel_estado").attr("class","text text-warning");
        $("#dialog_nuevo_admin_ugel_estado").html("<span class='glyphicon glyphicon-search'></span> <b>VERIFICANDO</b>");
        param={
            usua_user:$(obj).val()
        };
        $.post("<?php echo site_url("superadmin/get_usuario"); ?>",param,function(data){
            close_cargar();
            data=JSON.parse(data);
            $("#dialog_nuevo_admin_ugel_estado").attr("class",data.class);
            $("#dialog_nuevo_admin_ugel_estado").html(data.result);
        });
    }
    $(document).ready(function(){
        $("#dialog_lista_admin_ugel").dialog({
            title:"ADMINISTRADORES",
            modal:true,
            width:900,
            height:400,
            resizable:false,
            autoOpen:false,
        });
        $("#dialog_nuevo_admin_ugel").dialog({
            title:"NUEVO ADMIN UGEL",
            modal:true,
            width:600,
            height:270,
            resizable:false,
            autoOpen:false,
        });
        $("#form_nuevo_admin_ugel").submit(function(e){
            e.preventDefault();
            $.post("<?php echo site_url("superadmin/nuevo_admin_ugel"); ?>",$("#form_nuevo_admin_ugel").serialize(),function(data){
                ugel_ide=$("#dialog_nuevo_admin_ugel_ugel_ide").val();
                ugel_nombre=$("#dialog_nuevo_admin_ugel_ugel_nombre").val();
                get_administradores(ugel_ide,ugel_nombre);
                $("#dialog_nuevo_admin_ugel").dialog("close");
                if(data==0){
                    alert("NO SE PUDO REGISTRAR AL NUEVO USUARIO");
                }
            });
        });
    });
</script>

<div id="dialog_nuevo_admin_ugel" style="display:none;">
    <form id="form_nuevo_admin_ugel" class="form-horizontal">
        <div class="form-group">
            <input type="hidden" id="dialog_nuevo_admin_ugel_ugel_ide" name="usua_ugel_ide">
            <input type="hidden" id="dialog_nuevo_admin_ugel_ugel_nombre">
        </div>
        <div class="form-group">
            <label class="col-sm-3">USUARIO:</label>
            <div class="col-sm-4">
                <input name="usua_user" type="text" class="form-control" required onchange="get_usuario(this)">
            </div>
            <div class="col-sm-5" id="dialog_nuevo_admin_ugel_estado" class=""></div>
        </div>
        <div class="form-group">
            <label class="col-sm-3">NOMBRES:</label>
            <div class="col-sm-9">
                <input name="usua_nombres" type="text" class="form-control" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3">APELLIDOS:</label>
            <div class="col-sm-9">
                <input name="usua_apellidos" type="text" class="form-control" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12 text-right">
                <button class="btn btn-sm btn-primary" type="submit">
                    <span class="glyphicon glyphicon-ok"></span>
                    GUARDAR
                </button>
                <button class="btn btn-sm btn-danger" type="button" onclick="$('#dialog_nuevo_admin_ugel').dialog('close')">
                    <span class="glyphicon glyphicon-remove"></span>
                    CANCELAR
                </button>
            </div>
        </div>
    </form>
</div>

<div id="dialog_lista_admin_ugel" style="display:none;">
    <h4><b id="title_lista_ugel_nombre"></b></h4>
    <button class="btn btn-primary btn-sm" onclick="$('#dialog_nuevo_admin_ugel').dialog('open');$('#dialog_lista_admin_ugel').dialog('close')">
        <span class="glyphicon glyphicon-plus"></span>
        Nuevo Administrador
    </button>
    <br><br>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th width="05%">NRO</th>
                <th width="10%">USUARIO</th>
                <th width="10%">CLAVE</th>
                <th width="20%">NOMBRES</th>
                <th width="20%">APELLIDOS</th>
                <th width="10%">ESTADO</th>
                <th width="15%">OPCIONES</th>
            </tr>
        </thead>
        <tbody id="tbody_lista_admin_ugel">

        </tbody>
    </table>
</div>