<div class="modal fade" id="editarApoderado" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title caption-subject font-blue-secondary sbold uppercase"> Editar Apoderado </h4>
            </div>
            <div class="modal-body">
                <div id="errors-container"></div>
                {{ Form::model($usuario, array('id' => 'form-validation','route' => 'apoderado.editar', 'class'=>'')) }}
                <div class="form-body">
                    {!! Form::hidden('id_alumno', $id) !!}
                    {!! Form::hidden('id_usuario', $usuario->id) !!}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="estado"> Estado </label>
                                <select class="select2" required="required" id="estado" name="estado">
                                    <option value="1" {{ ($usuario->estado == true ? 'selected' : '') }}> Activo </option>
                                    <option value="0" {{ ($usuario->estado == false ? 'selected' : '') }}> Inactivo </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="dni"> DNI </label>
                                {!! Form::text('dni', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required', 'maxlength' => '8')) !!}
                                <div class="help-block"> El usuario ser&aacute; el DNI de la persona </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="nombres"> Nombre </label>
                                {!! Form::text('nombres', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required')) !!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="apellido_paterno"> Apellido Paterno </label>
                                {!! Form::text('apellido_paterno', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required')) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="apellido_materno"> Apellido Materno </label>
                                {!! Form::text('apellido_materno', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required')) !!}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="email"> Correo </label>
                        {!! Form::email('email', null, array('placeholder' => '','class' => 'form-control', 'required' => 'required', 'maxlength' => '50')) !!}
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="genero"> G&eacute;nero </label>
                                <select class="select2" required="required" id="genero" name="genero">
                                    <option value="Masculino" {{ ($usuario->genero == 'Masculino' ? 'selected' : '') }}> M&aacute;sculino</option>
                                    <option value="Femenino" {{ ($usuario->genero == 'Femenino' ? 'selected' : '') }}> Femenino</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="estado_civil"> Estado Civil </label>
                                <select class="select2" required="required" id="estado_civil" name="estado_civil">
                                    <option value="Soltero" {{ ($usuario->estado_civil == 'Soltero' ? 'selected' : '') }}> Soltero</option>
                                    <option value="Casado" {{ ($usuario->estado_civil == 'Casado' ? 'selected' : '') }}> Casado</option>
                                    <option value="Viudo" {{ ($usuario->estado_civil == 'Viudo' ? 'selected' : '') }}> Viudo</option>
                                    <option value="Divorciado" {{ ($usuario->estado_civil == 'Divorciado' ? 'selected' : '') }}> Divorciado</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="password"> Contrase&ntilde;a </label>
                                {!! Form::password('password', array('id' => 'password','class' => 'form-control')) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="repassword"> Reingrese su contrase&ntilde;a </label>
                                {!! Form::password('repassword', array('class' => 'form-control')) !!}
                            </div>
                        </div>
                    </div>
                    <div class="form-actions" style="text-align: right">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button id="submitBtn" type="submit" class="btn btn-primary ladda-button" data-style="slide-down">
                            <span class="ladda-label">Guardar</span>
                            <span class="ladda-spinner"></span>
                        </button>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
<script>
    $('.select2').select2({
        minimumResultsForSearch: -1,
        width: '100%'
    });
    $("#form-validation").validate({
        rules: {
            dni: {
                required: true,
                pattern: '^[0-9]{8}$'
            },
            repassword: {
                equalTo: "#password"
            }
        },
        submitHandler: function (form) {
            var l = Ladda.create(document.querySelector('#submitBtn'));
            l.start();
//            form.submit();
            $.ajax({
                url: $(form).attr('action'),
                type: "POST",
                data: $(form).serialize(),
                cache: false,
                dataType: 'json',
                processData: false,
                success: function(data) {
                    if(data.responseText == "Aprobado") {
                        $('#editarApoderado').modal('toggle');
                    } else {
                        $('#errors-container').html(
                            '<div class="alert alert-dismissible alert-danger">' +
                            '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                            '<ul class="list-unstyled">' +
                            data.responseText +
                            '</ul></div>')
                    }
                },
                error: function(data) {
                    var errors = JSON.parse(data.responseText);
                    var htmlErrors = "";
                    $.each(errors, function (index, itemData) {
                        htmlErrors = htmlErrors + '<li>' + itemData + '</li>';
                    });
                    $('#errors-container').html(
                        '<div class="alert alert-dismissible alert-danger">' +
                        '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
                        '<ul class="list-unstyled">' +
                        htmlErrors +
                        '</ul></div>')
                },
                complete: function() {
                    l.toggle();
                }
            });
        }
    });
</script>