<%-- 
    Document   : index
    Created on : 05-ene-2018, 20:49:32
    Author     : Alonso
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <%@include file="templates/header.jsp" %>
        <!--template-core-->

        <!--css-->

        <!--css-->
    </head>

    <body>
        <%@include file="templates/header-body.jsp" %>


        <!--  content -->
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-flat border-top-xlg border-top-primary">
                    <div class="panel-heading">
                        <h6 class="panel-title text-semibold"><i class="icon-cog3 position-left"></i> Mantenimiento persona</h6>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="control-label display-block">Ingresar criterio de búsqueda: </label>
                                    <div class="input-group input-group-xlg">
                                        <span class="input-group-addon"><i class="icon-search4"></i></span>
                                        <input id="txt_criterio_busqueda" type="text" class="form-control" placeholder="Ingresar criterio">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button id="btn_buscar_criterio" type="button" class="btn btn-primary"><i class="icon-search4 position-left"></i> Buscar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-flat border-top-xlg border-top-primary">
                    <div class="panel-heading">
                        <h6 class="panel-title text-semibold"><i class=" icon-list3 position-left"></i> Listado persona</h6>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button id="btn_agregar_persona" type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_registrar_persona"><i class="icon-plus3 position-left"></i> Agregar</button>
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-striped table-sm" id="tabla_persona">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>DNI</th>
                                                <th>APELLIDOS Y NOMBRES</th>
                                                <th>EDAD</th>
                                                <th>CORREO ELECTRONICO</th>
                                                <th>ESTADO</th>
                                                <th>ACCIONES</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / content -->

        <!--  modal_registrar_persona -->
        <div id="modal_registrar_persona" class="modal fade" data-backdrop="static">
            <!--<div id="modal_registrar_persona">-->
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h6 class="modal-title">Registrar persona</h6>
                    </div>

                    <div class="modal-body">
                        <form id="form_registrar_persona">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label display-block">Número de documento:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-vcard"></i></span>
                                            <input id="txt_numero_documento" name="txt_numero_documento" type="text" class="form-control" placeholder="Ingresar número de documento">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label display-block">Apellidos:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-user"></i></span>
                                            <input id="txt_apellidos" name="txt_apellidos" type="text" class="form-control" placeholder="Ingresar apellidos">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">  
                                    <div class="form-group">
                                        <label class="control-label display-block">Nombres:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-user"></i></span>
                                            <input id="txt_nombres" name="txt_nombres" type="text" class="form-control" placeholder="Ingresar nombres">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label display-block">Edad:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-user"></i></span>
                                            <input id="txt_edad" name="txt_edad" type="text" class="form-control" placeholder="Ingresar edad">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label class="control-label display-block">Correo electrónico:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-mention"></i></span>
                                            <input id="txt_correo" name="txt_correo" type="text" class="form-control" placeholder="Ingresar correo electrónico">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="text-danger pull-right">Campos obligatorios (*)</span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer text-center">
                        <button id="btn_registrar_persona" type="button" class="btn btn-primary">Registrar</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /modal_registrar_persona -->


        <!--  modal_editar_persona -->
        <div id="modal_editar_persona" class="modal fade" data-backdrop="static">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h6 class="modal-title">Editar persona</h6>
                    </div>

                    <div class="modal-body">
                        <form id="form_editar_persona">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label display-block">Número de documento:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-vcard"></i></span>
                                            <input disabled="disabled" id="txt_numero_documento_editar" name="txt_numero_documento_editar" type="text" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label display-block">Apellidos:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-user"></i></span>
                                            <input id="txt_apellidos_editar" name="txt_apellidos_editar" type="text" class="form-control" placeholder="Ingresar apellidos">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">  
                                    <div class="form-group">
                                        <label class="control-label display-block">Nombres:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-user"></i></span>
                                            <input id="txt_nombres_editar" name="txt_nombres_editar" type="text" class="form-control" placeholder="Ingresar nombres">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="control-label display-block">Edad:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-user"></i></span>
                                            <input id="txt_edad_editar" name="txt_edad_editar" type="text" class="form-control" placeholder="Ingresar edad">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label class="control-label display-block">Correo electrónico:<span class="text-danger"> (*)</span></label>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="icon-mention"></i></span>
                                            <input id="txt_correo_editar" name="txt_correo_editar" type="text" class="form-control" placeholder="Ingresar correo electrónico">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="text-danger pull-right">Campos obligatorios (*)</span>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer text-center">
                        <button id="btn_editar_persona" type="button" class="btn btn-primary">Editar</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /modal_editar_persona -->



        <%@include file="templates/footer-body.jsp" %>

        <!--js plantilla-->

        <!--jQueryValidator-->
        <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/validation/validate.min.js"></script>

        <!--jQueryValidator-->

        <!--form-->
        <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/inputs/touchspin.min.js"></script>
        <script type="text/javascript" src="../plantilla/assets/js/pages/form_input_groups.js"></script>
        <!--form-->

        <!--modal-->
        <script type="text/javascript" src="../plantilla/assets/js/pages/components_modals.js"></script>
        <!--modal-->

        <!--sweetalerts-->
        <script type="text/javascript" src="../plantilla/assets/js/plugins/notifications/bootbox.min.js"></script>
        <script type="text/javascript" src="../plantilla/assets/js/plugins/notifications/sweet_alert.min.js"></script>
        <!--sweetalerts-->

        <!--datatable-->
        <script type="text/javascript" src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js"></script>
        <script type="text/javascript" src="../plantilla/assets/js/plugins/forms/selects/select2.min.js"></script>
        <!--datatable-->

        <!--js plantilla-->

        <!--mi js-->
        <script src="../js/pages/persona.js" type="text/javascript"></script>
        <!--mi js-->

    </body>
</html>