<!-- Arrange Event Modal -->
<div class="modal fade" id="arrangeModal" tabindex="-1" role="dialog" aria-labelledby="arrangeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Esemény kiadása ügyintézésre</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="inputDate" class="control-label">Intézés határideje</label>
                    <div class="input-group">
                        <input name="deadtime" type="text" id="inputDate" class="form-control" value="" />
                        <span class="input-group-addon">
                            <i class="glyphicon glyphicon-calendar"></i>
                        </span>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputUser" class="control-label">Ügyintéző</label>
                    <div class="input-group">
                        <input name="usernames[]" type="text" id="inputUser" class="form-control username" data-provide="typeahead" autocomplete="off" />
                        <input name="usersID[]" type="hidden" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default addButton">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                        </span>
                    </div>
                </div>

                <!-- Optional fields template -->
                <div class="form-group hide" id="optionTemplate">
                    <div class="input-group">
                        <input name="usernames[]" type="text" class="form-control username" data-provide="typeahead" autocomplete="off" />
                        <input name="usersID[]" type="hidden" />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default removeButton">
                                <i class="glyphicon glyphicon-minus"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Mégsem</button>
                <button type="submit" class="btn btn-primary">
                    <span class="glyphicon glyphicon-share"></span> Kiadás
                </button>
            </div>
        </form><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script>
$(document).ready(function () {

    $('#arrangeModal').bootstrapValidator({
        fields: {
            deadtime: {
                validators: {
                    notEmpty: {
                        message: 'Nem maradhat üresen'
                    },
                    date: {
                        format: 'YYYY-MM-DD',
                        message: 'Érvénytelen dátum'
                    },
                    callback: {
                        callback: function(value, validator, $field) {
                            var i = value.split('-')
                            if (i.length == 3)
                            {
                                var today = new Date()
                                var inputDate = new Date(parseInt(i[0]), parseInt(i[1]) - 1, parseInt(i[2]) + 1)

                                if (inputDate < today)
                                {
                                    return false
                                }
                            }

                            return true
                        },
                        message: 'A mai napnál nem lehet korábbi az esemény'
                    }
                }
            },
            'usernames[]': {
                validators: {
                    notEmpty: {
                        message: 'Nem maradhat üresen'
                    }
                }
            }
        }
    })

    .find('[name="deadtime"]').mask('9999-99-99').end()

    .on('click', '.addButton', function() {
        var $template = $('#optionTemplate')
        var $clone = $template.clone().removeClass('hide').removeAttr('id').insertBefore($template)
        var $option = $clone.find('[name="usernames[]"]')

        $('#arrangeModal').bootstrapValidator('addField', $option)
    })

    .on('click', '.removeButton', function() {
        var $row = $(this).parents('.form-group')
        var $option = $row.find('[name="usernames[]"]')

        $row.remove()

        $('#arrangeModal').bootstrapValidator('removeField', $option)
    })

    // Usernames autocomplete by typeahead
    var users = []
    var usernames = []
    var autocomplete = $.typeahead({
        source: function(query, process) {
            $.ajax({
                url: 'autocomplete_usernames',
                type: 'POST',
                data: 'q=' + query,
                dataType: 'JSON',
                async: false,
                success: function(data) {
                    var lbl
                    users = []
                    usernames = []

                    $.each(data, function(index, item) {
                        //if (item.fullname.length > 0)
                        //  lbl = item.fullname
                        //else
                            lbl = item.username

                        usernames.push( lbl )
                        users[ lbl ] = item.id
                    })

                    console.log(usernames)
                    process( usernames )
                }
            })
        },
        updater: function (selectedItem) {
            //$( 'name="usersID[]"' ).val( users[ selectedItem ] )

            return selectedItem
        }
    })

    $('.username').autocomplete
})
</script>