<script>
    $(document).ready(function(){
        $("#form_buscar_ugel").submit(function(e){
            open_cargar("Espere un momento...");
            e.preventDefault();
            $.post("<?php echo site_url("superadmin/getugels"); ?>",$(this).serialize(),function(data){
                $("#tbody_ugels").html(data);
                close_cargar();
            });
        });
    });
    function funcion_nueva_ugel(data){
        $("#form_buscar_ugel").submit();
        $("#form_nueva_ugel")[0].reset();
        $("#dialog_nueva_ugel").dialog("close");
    }
</script>
<div class="row">
    <form id="form_buscar_ugel">
        <div class="col-sm-4">
            <select name="dre" class="form-control" required>
                <option value="">::: SELECCIONE UNA OPCION :::</option>
                <?php foreach ($dres as $reg): ?>
                <option value="<?php echo $reg->dre_ide; ?>"><?php echo $reg->dre_nombre; ?></option>
                <?php endforeach ?>
            </select>
        </div>
        <div class="col-sm-4">
            <button class="btn btn-sm btn-primary" type="submit">
                <span class="glyphicon glyphicon-search"></span>
                VER UGELs
            </button>
            <button class="btn btn-sm btn-success" type="button" onclick="$('#dialog_nueva_ugel').dialog('open')">
                <span class="glyphicon glyphicon-plus"></span>
                NUEVA UGEL
            </button>
        </div>
    </form>
</div>
<br>
<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th width="05%">NRO</th>
                    <th width="40%">NOMBRE UGEL</th>
                    <th width="15%">UGEL CORTO</th>
                    <th width="10%">ESTADO</th>
                    <th width="30%">OPCIONES</th>
                </tr>
            </thead>
            <tbody id="tbody_ugels">
            </tbody>
        </table>
    </div>
</div>