{{--

Name: receiver.partials.jscript
Author: Arto Laine
Created: 2015-09-17
Description: receiver create javascripts


Updated by:
Description:

--}}

        <script>
            $('input[name="newfield"]').change(function() {
                $(this).closest('.form-group').removeClass('has-error');
            });

            var order = 1;
            var lastOrder = 0;

            countFields();
            orderUpdate();

            // Add input boxes
            $('#newfield-btn').click(function() {
                var inputName = $('input[name="newfield"]').val().trim().toLowerCase().replace(/[,\[\]\- ]+/g, "_");
                var inputValue = $('input[name="newfield"]').val().trim();

                // Check we enter just the allowed characters (alpha_num, space, dash, underscore)
                if (!inputValue.match(/^([a-zåäö\ \-_0-9]+)$/i)) {
                    $('input[name="newfield"]').closest('.form-group').addClass('has-error');
                    return false;
                }

                // Check for duplicates
                $('.screen-name').each(function(e) {
                    if ($(this).val().toLowerCase() == inputValue.toLowerCase()) {
                        inputName = '';
                        $('input[name="newfield"]').closest('.form-group').addClass('has-error');
                    }
                });

                // Prevent empty inserts
                if (inputName == '' || inputName == 'template[]') {
                    $('input[name="newfield"]').closest('.form-group').addClass('has-error');
                    return false;
                }

                var inputField = ''
                +'<div class="form-group" data-order="'+order+'">'
                +'<div class="clearfix"></div>'
                +'<div class="row label-padd">'
                +'    <label for="template['+lastOrder+'][name]" class="col-md-12 control-label" style="    margin-top: 10px;">'+inputValue+'</label>'
                +'</div>'
                +'    <div class="col-xs-10" >'
                +'        <input class="form-control receiverfield" type="text" name="template['+lastOrder+'][value]" maxlength="255" value="">'
                +'        <input class="screen-name" type="hidden" name="template['+lastOrder+'][screen_name]" value="'+inputValue+'"></input>'
                +'        <input type="hidden" name="template['+lastOrder+'][name]" value="'+inputName+'"></input>'
                +'        <input class="order" type="hidden" name="template['+lastOrder+'][order]" value="'+order+'"></input>'
                +'    </div>'
                +'    <div class="col-xs-2">'
                +'        <table>'
                +'            <tbody>'
                +'                <tr style="height: 32px;">'
                +'                    <td>'
                +'                        <a class="fa fa-sort-up" data-up="'+order+'" style="font-size: 24px; display:block; height: 16px;"></a>'
                +'                        <a class="fa fa-sort-down" data-down="'+order+'" style="font-size: 24px; display:block; height: 16px;"></a>'
                +'                    </td>'
                +'                    <td><a class="fa fa-times" data="delete-row" style="font-size: 24px; padding-left: 10px; color: #fa3939;"><a></td>'
                +'                </tr>'
                +'            </tbody>'
                +'        </table>'
                +'    </div>'
                +'</div>';

                // Empty input field
                $('input[name="newfield"]').val('');

                // Add field
                $('#addon-fields').append(inputField);

                $('div[data-element="receiver_receiverlists"]').height($('div[data-element="receiver_receiverlists"]').height() + 70);

                order++;
                lastOrder++;
                orderUpdate();
            });

            // Move field up
            $('body').on('click', '.fa-sort-up', function(event) {
                var order = $(this).attr('data-up');

                // Update order on field above
                $('.form-group[data-order="'+(order-1)+'"]').attr('data-order', order);
                $('.fa-sort-up[data-up="'+(order-1)+'"]').attr('data-up', order);
                $('.fa-sort-down[data-down="'+(order-1)+'"]').attr('data-down', order);
                $('.order[value="'+(order-1)+'"]').attr('value', order);

                // Update order
                $(this).attr('data-up', order-1);
                $(this).siblings('.fa-sort-down').attr('data-down', order-1);
                $(this).closest('.form-group').attr('data-order', order-1);
                $(this).closest('.order').attr('value', order-1);

                orderInputs();
                orderUpdate();
            });

            // Move field down
            $('body').on('click', '.fa-sort-down', function(event) {
                var order = $(this).attr('data-down');

                // Update order on field below
                $('.form-group[data-order="'+(parseInt(order)+1)+'"]').attr('data-order', order);
                $('.fa-sort-up[data-up="'+(parseInt(order)+1)+'"]').attr('data-up', order);
                $('.fa-sort-down[data-down="'+(parseInt(order)+1)+'"]').attr('data-down', order);
                $('.order[value="'+(parseInt(order)+1)+'"]').attr('value', order);

                // Update order
                $(this).attr('data-down', (parseInt(order)+1));
                $(this).siblings('.fa-sort-up').attr('data-up', (parseInt(order)+1));
                $(this).closest('.form-group').attr('data-order', (parseInt(order)+1));
                $(this).closest('.order').attr('value', (parseInt(order)+1));

                orderInputs();
                orderUpdate();
            });

            function deleteInput(inputField) {
                inputField.closest('.form-group').remove();
                lastOrder--;
                orderUpdate();
                $('div[data-element="receiver_receiverlists"]').height($('div[data-element="receiver_receiverlists"]').height() - 70);
            };

            // Change order for each input
            function orderUpdate() {
                $('#addon-fields .form-group').each(function(e) {
                    $(this).attr('data-order', e+1);
                    $(this).children('div').children('.order').attr('value', e+1);
                    $(this).find('.fa-sort-up').attr('data-up', e+1);
                    $(this).find('.fa-sort-down').attr('data-down', e+1);

                    // Set correct order arrows
                    if (lastOrder == 1) {
                        $(this).find('.fa-sort-up').hide();
                        $(this).find('.fa-sort-down').hide();
                    } else if ($(this).children('div').children('.order').attr('value') == 1) {
                        $(this).find('.fa-sort-up').hide();
                        $(this).find('.fa-sort-down').show();
                    } else if ($(this).children('div').children('.order').attr('value') == lastOrder) {
                        $(this).find('.fa-sort-up').show();
                        $(this).find('.fa-sort-down').hide();
                    } else {
                        $(this).find('.fa-sort-up').show();
                        $(this).find('.fa-sort-down').show();
                    }
                });
            };

            // Order fields based on data-order
            function orderInputs() {
                $("#addon-fields").find('.form-group').sort(function(a,b) {
                    return +a.dataset.order - +b.dataset.order;
                })
                .appendTo("#addon-fields");
            };

            // Count inputs and update order counters
            function countFields() {
                // Set counters to defaults before counting
                order = 1;
                lastOrder = 0;

                $('#addon-fields .form-group').each(function(e) {
                    order++;
                    lastOrder++;
                });
            };

            // Launch Delete alert box
            $('body').on('click', '*[data="delete-row"]', function(event){
                var row = this;
                swal({
                    title: "{!! Lang::get('receiver.form.swal.title') !!}",
                    text: "{!! Lang::get('receiver.form.swal.text') !!}",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#ed5565",
                    confirmButtonText: "{!! Lang::get('receiver.form.swal.confirmButton') !!}",
                    cancelButtonText: "{!! Lang::get('receiver.form.swal.cancelButton') !!}",
                    allowOutsideClick: true,
                }).then(function(status) {
                    if (status.value) {
                        deleteInput(row);
                    } else {
                        swal({
                            title : "{!! Lang::get('receiver.form.swal.cancelTitle') !!}",
                            text: "{!! Lang::get('receiver.form.swal.cancelText') !!}",
                            type: "error",
                            timer: 5000,
                            confirmButtonColor: "#8ab141",
                            allowOutsideClick: true,
                        });
                    }
                });
            });

            $('input[name="email"]').focusout(function() {
                checkReceiver($(this));
            });

            $('input[name="phone"]').focusout(function() {
                checkReceiver($(this));
            });

            // Check for duplicate receiver
            function checkReceiver(element) {
                var value = element.val();
                var type = element.attr('name');
                var $field;

                if(type == 'email') {
                    $field = $('span[data="duplicate_email"]');
                } else {
                    $field = $('span[data="duplicate_phone"]');
                }

                $.ajax({
                    method: "POST",
                    url: "{{ route('receiver.check') }}",
                    data: {
                        id: $('input[name="receiver_id"]').val(),
                        type: type,
                        value: value
                    },
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
                })
                .success(function(data) {
                    if(data.success){
                        // Remove old message instead of adding more messages
                        $field.html('');
                        // Don't show message for current receiver if email is for this receiver, in case of edit and put same email again
                        if ($(location).attr('href').indexOf('/receiver/'+data.id+'/edit') <= 0) {
                            // Add duplicate receiver msg
                            var link = '<span>{!! Lang::get('receiver.form.duplicateReceiver', ['receiverIdUrl' => url('receiver') . '/\'+data.id+\'/edit']) !!}</span>';
                            $field.append(link);
                        }
                    } else {
                        $field.html('');
                    }
                })
                .fail(function(data) {
                    $field.html('');
                });
            }

            // Receiver list filtering
            $('.filterbtn').click(function() {
                // console.log($(this).val());
                var filter = $('input[name="filter"]').val().toLowerCase();
                $('.receiver').each(function(e) {
                    // console.log($(this).find('label').html());
                    if ($(this).find('label').html().toLowerCase().search(filter) == -1) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            });

            // Prevent accidental form submit with Enter key
            $('form').bind('keypress keydown keyup', function(e){
                if(e.keyCode == 13) { e.preventDefault(); }
            });

            // Prevent form submit if no receiverlist selected
            $('input[data-element="receiver_store"]').click(function(e) {
                e.preventDefault();
                if(countSelectedReceiverLists() > 0) {
                    this.form.submit();
                } else {
                    toastr.error('@lang('receiver.alert.selectReceiverListContent')', '@lang('receiver.alert.selectReceiverListTitle')');
                }
            });

            // Count how many receiverlists have been selected
            function countSelectedReceiverLists() {
                return $('input[type="checkbox"]:checked').length;
            };

            // Adjust receiver list size on resize
            $(window).resize(function() {
                var width = $(document).width();
                if (width < 992) {
                    $('div[data-element="receiver_receiverlists"]').height(350);
                } else {
                    $('div[data-element="receiver_receiverlists"]').height(200 + lastOrder * 70);
                }
            });

        </script>