{!! Form::model(new jobbag\Client, ['route' => ['clients.store'], 'class' => 'js-form-title js-validateform-client', 'data-title' => 'Add new client']) !!}
    <div class="js-createclientstatus"></div>
	@include('modal/clients/_form', ['submit_text' => 'Add'])
{!! Form::close() !!}

<script>
    $('.js-validateform-client').validate({
        rules: {
            name: {required: true},
            pic: {required: true}
        },
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error').addClass('has-success');
        },
        submitHandler: function(form) {
            $(".js-btnsubmit-newclient").attr("disabled", true).val('Wait...');
            var url = $(form).attr('action'),
            data = $(form).serialize();

            $.ajax({
                url: url,
                data: data,
                type: 'post',
                success: function(data) {
                    $('.alert').remove();
                    if(data.success){
                        if($('.js-addnewclientform').length){
                            $('.js-addnewclientform').modal('hide');

                            //Update client list
                            function selectize(e){
                                $(e).selectize({hideSelected: true});
                            }
                            var clients = $('.js-clientlist');

                            $(clients).each(function(){
                                if ($(this)[0].selectize) {
                                    var value = $(this).val();
                                    $(this)[0].selectize.destroy();
                                    $(this).val(value);
                                }
                            });
                            $.get("{{ url('api/get-clients-list')}}", 
                                function(data) {
                                    clients.empty();
                                    $('option:gt(0)', clients).remove();
                                    clients.append('<option value="">-Please Select-</option>');
                                    $.each(data, function(index, value) {
                                        clients.append('<option value="' + value.id + '">' + value.name + '(' + value.pic + ')</option>');
                                    });
                                    //Reinitialize time
                                    selectize('.js-clientlist');
                                }
                            );
                        }else{
                            bootbox.hideAll();
                        }
                        $('.js-table-clients').bootstrapTable('refresh');
                        $('<p class="alert bg-success">Successful add new client.<button type="button" class="close" data-dismiss="alert" title="Close">x</button></p>').hide().appendTo('.js-status').fadeIn();
                    } else {
                        $('.js-error', form).remove();
                        $('<p class="alert bg-danger js-error">' + data.error + '</span>').hide().prependTo(form).fadeIn();
                        $(".js-btnsubmit-newclient").attr("disabled", false).val('Add');
                    }
                },
                error: function(data){
                    $(".js-btnsubmit-newclient").attr("disabled", false).val('Add');
                    var errors = '';
                    for(datos in data.responseJSON){
                        errors += data.responseJSON[datos] + '<br>';
                    }
                    $('.js-createclientstatus').show().html('<div class="alert bg-danger">'+errors+'</div>');
                  }
            });

            return false;
        }
    });
</script>