orders = null;
products = null;
contacts = null;
customers = null;
fade_time = 500;

jQuery(document).ready( function($) {
    function getFormData(form) {
        var unindexed_array = form.serializeArray();
        var indexed_array = {};

        $.map(unindexed_array, function(n, i){
            indexed_array[n['name']] = n['value'];
        });
        return indexed_array;
    }

    function get_zones() {
        var select = $('select[name=country_id]');
        var id = select.val();

        var request = {
            action: 'get_zones',
            data: select.find('option[value=' + id + ']').attr('data-code'),
            nonce: contacts.nonce
        };

        $.post(contacts.ajaxurl, request, function( response ) {
            $('select[name=location_id]').find('option').remove();

            var select = $('select[name=zone_id]');
            select.find('option').remove();

            if( response ) {
                select.append($('<option value="0"></option>'));

                for (var key in response) {
                    select.append($('<option value="' +
                            response[key].id + '" data-code="' +
                            response[key].code + '">' +
                            response[key].name + '</option>'));
                }
            }
        });
    }

    function get_locations() {
        var select = $('select[name=zone_id]');
        var id = select.val();

        var request = {
            action: 'get_locations',
            data: select.find('option[value=' + id + ']').attr('data-code'),
            nonce: contacts.nonce
        };

        $.post(contacts.ajaxurl, request, function( response ) {
            var select = $('select[name=location_id]');
            select.find('option').remove();

            if( response ) {
                select.append($('<option value="0"></option>'));

                for (var key in response) {
                    select.append($('<option value="' +
                            response[key].id + '" data-code="' +
                            response[key].code + '">' +
                            response[key].name + '</option>'));
                }
            }
        });
    }

    class Orders {
        constructor( cfg ) {
            this.form = null;
            this.page = cfg.page;
            this.form_data = null;
            this.fade_time = cfg.fade_time;
            this.nonce = mettatealib.nonce;
            this.ajaxurl = mettatealib.ajaxurl
        }

        on_change_customer() {
            var customer_id = $(this).val();

            var request = {
                'action': 'orders_change_customer',
                'data': customer_id,
                'nonce': orders.nonce
            };

            $.post(orders.ajaxurl, request, function( response ) {
                var select = $('.form.orders select[name=branch]');
                select.find('option').remove();
                select.append('<option value="0"></option>');
                response.forEach(function(element, i) {
                    select.append( $(
                        '<option value="' +  element.id + '">' +
                        element.branch + '</option>') );
                });
            });
        }

        on_change_product() {
            var product_id = $(this).val();
            var request = {
                'action': 'orders_change_product',
                'data': product_id,
                'nonce': orders.nonce
            };
            $.post(orders.ajaxurl, request, function( response ) {
               var rp = response;
               form = $('.form.orders');
               form.find('input[name=price]').val(rp.unit_price);
               form.find('input[name=markup]').val(rp.markup);
               form.find('input[name=discount]').val(rp.discount);
               orders.update_total();
            });
        }

        update_total() {
            var form_orders = $('.form.orders');

            var price = parseFloat(form_orders.find('input[name=price]').val());
            var quantity = parseInt(form_orders.find('select[name=quantity]').val());
            var discount = parseInt(form_orders.find('input[name=discount]').val());
            var markup = parseInt(form_orders.find('input[name=markup]').val());
            var freight = parseInt(form_orders.find('input[name=freight]').val());
            var sales_tax = parseInt(form_orders.find('input[name=sales_tax]').val());

            price = price ? price : 0;
            quantity = quantity ? quantity : 0;
            discount = discount ? discount : 0;
            markup = markup ? markup : 0;
            freight = freight ? freight : 0;
            sales_tax = sales_tax ? sales_tax : 0;

            var cost = price * quantity;
            if (markup) {
                cost = cost + cost * (markup/100);
            }
            cost = + cost - (cost * (discount/100));

            var total = (cost * (sales_tax/100)) + freight + cost;
            form_orders.find('input[name=total]').val(total.toFixed(2));
        }

        add_order(event = 0) {
            var parent = 0;
            var form = $('#orders');
            var fd = getFormData( form );

            var obj = {};
            form.find('tbody tr').each(function(i) {
                obj[i] = {};

                $(this).find('td').each(function() {
                    var attr = $(this).attr('data-id');
                    var key = $(this).attr('data-key');

                    if (typeof attr !== typeof undefined && attr !== false) {
                        obj[i][key] = parseInt(attr.replace(/['"]+/g, ''));
                    } else {
                        if ($(this).find('input').length) {
                            obj[i][key] = $(this).find('input').is(':checked') ? 1 : 0;
                        } else {
                            obj[i][key] = $(this).text();
                        }
                    }
                });
            });

            fd['details'] = obj;

            if (event) {
                parent = event.data.parent;
                fd['parent_id'] = event.data.parent_id;
            }

            var aside = form.find('aside');
            aside.slideUp().removeAttr('class').find('dd').text('');

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp().removeAttr('class').find('dd').text('');
            });

            var request = {
                'action': 'add_order',
                'data': fd,
                'nonce': orders.nonce
            };
            console.log(request);
            $.post(orders.ajaxurl, request, function( response ) {
                console.log(response)
                var tbody = $('#orders_page').find('table.orders tbody');

                if (response.result) {
                    parent.find('form section').attr('data-id', response.id);
                    aside.addClass('success');
                    aside.find('dd').text('Success, new order has been added.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.addClass('error');
                    aside.find('dd').text('Error, ' + response.last_error + '.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }
                response.details.forEach(function(entry) {

                    tbody.append($(`
                        <tr>
                            <td><input type="checkbox" /></td>
                            <td>` +  entry.order_number + `</td>
                            <td>` +  entry.product + `</td>
                            <td>` +  entry.quantity + `</td>
                            <td>` +  entry.fulfilled + `</td>
                            <td>` +  entry.paid + `</td>
                            <td>` +  entry.customer + `</td>
                            <td>` +  entry.branch + `</td>
                            <td>` +  entry.order_date + `</td>
                            <td>` +  entry.ship_date + `</td>
                            <td>` +  entry.bill_date + `</td>
                            <td>` +  entry.freight + `</td>
                            <td>` +  entry.markup + `</td>
                            <td>` +  entry.discount + `</td>
                            <td>` +  entry.sales_tax + `</td>
                            <td>` +  entry.total + `</td>
                            <td>` +  entry.notes + `</td>
                        </tr>
                    `));
                });

            });

            $(".actions.orders :input").attr("disabled", false);

            return this;
        }

        view_customers() {

        }

        view_customer() {
            var customer_id = $(this).parent().find('select').val();
            if ( customer_id === '0') {
                return;
            }
            var request = {
                action: 'view_customer',
                data: {id: customer_id, action: 'edit'},
                nonce: orders.nonce
            };
            var wrapper = $('.the-content>.wrapper');
            $.post(orders.ajaxurl, request, function( response ) {

                var form = $( response );
                wrapper.append( form );

                form.find("tbody tr:odd").css("background-color", "#c3e2ff");
                form.find("tbody tr:even").css("background-color", "#ffffff");

                form.fadeIn(orders.fade_time, function() {

                    form.find('button.save').on('click', customers.edit_customer);
                    form.find('button.delete').on('click', customers.delete_customer);
                    form.find('button.cancel').on('click', customers.cancel_customer_form);

                    form.find('table.branches tr td:first-child a').on('click', function() {
                        var branch_id = $(this).closest('tr').attr('data-id');
                        customers.edit_branch_form(branch_id);
                    });
                });
            });
        }

        view_branch() {
            var branch_id = $(this).parent().find('select').val();

            if ( branch_id === '0' ) {
                return;
            }
            var customer_id = $(this).closest('.row').find('select[name=customers]').val();
            var request = {
                action: 'view_branch',
                data: {action: 'edit', id: customer_id, branch_id: branch_id},
                nonce: orders.nonce
            };

            var wrapper = $('.the-content>.wrapper');
            $.post(orders.ajaxurl, request, function( response ) {
                if ( response ) {
                    var form = $( response );
                    wrapper.append( form );
                    form.find("tbody tr:odd").css("background-color", "#c3e2ff");
                    form.find("tbody tr:even").css("background-color", "#ffffff");

                    form.fadeIn(orders.fade_time, function(){

                        form.find('button.save').on( "click", {
                            customer_id: customer_id,
                            branch_id: branch_id },
                        customers.edit_branch );

                        form.on('click', 'button.delete', customers.delete_branch);
                        form.on('click', 'button.cancel', customers.cancel_branch_form);

                    });
                }
            });
        }

        insert_product( data ) {
            var fd = data;
            var html = '<tr data-id="' + 0 + '">';

            var paid = fd.paid ? 'checked=" checked"' : '';
            var fulfilled = fd.fulfilled ? 'checked=" checked"' : '';

            html += `
                <td data-key="delete"><i class="fa fa-times"></i></td>
                <td data-key="fulfilled"><input type="checkbox"` + fulfilled + ` name="fulfilled"></td>
                <td data-key="paid"><input type="checkbox"` + paid + ` name="paid"></td>
                <td data-key="product_id" data-id="'` + fd.product_id + `'">` + fd.product + `</td>
                <td data-key="total">` + fd.total + `</td>
                <td data-key="price">` + fd.price + `</td>
                <td data-key="quantity">` + fd.quantity + `</td>
                <td data-key="order_number">` + fd.order_number + `</td>
                <td data-key="markup">` + fd.markup + `</td>
                <td data-key="discount">` + fd.discount + `</td>
                <td data-key="customer_id" data-id="'` + fd.customer_id + `'">` + fd.customer + `</td>
                <td data-key="branch_id" data-id="'` + fd.branch_id + `'">` + fd.branch + `</td>
                <td data-key="order_date">` + fd.order_date + `</td>
                <td data-key="ship_date">` + fd.ship_date + `</td>
                <td data-key="bill_date">` + fd.bill_date + `</td>
                <td data-key="freight">` + fd.freight + `</td>
                <td data-key="sales_tax">` + fd.sales_tax + `</td>
                <td data-key="notes">` + fd.notes + `</td>
            `;

            html += '</tr>';

            return html;
        }

        add_product() {
            var form = $('.form.orders');
            var aside = form.find('form>aside');
            aside.slideUp().removeAttr('class').find('dd').text('');

            var fd = getFormData( form.find('form') );

            var customer_id = parseInt(fd.customers);
            var branch_id = parseInt(fd.branch);

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp().removeAttr('class').find('dd').text('');
            });

            if ( ! customer_id ) {
                aside.removeAttr('class');
                aside.addClass('error');
                aside.find('dd').text('Error, you must select a customer before you can a product.');
                aside.slideDown(function(){
                    timeout = setTimeout(function () {
                        aside.slideUp();
                    }, 5000);
                });
                return;
            } else if ( ! branch_id ) {
                aside.removeAttr('class');
                aside.addClass('error');
                aside.find('dd').text('Error, you must select a branch before you can a product.');
                aside.slideDown(function(){
                    timeout = setTimeout(function () {
                        aside.slideUp();
                    }, 5000);
                });
                return;
            } else if ( ! fd.order_number ) {
                aside.removeAttr('class');
                aside.addClass('error');
                aside.find('dd').text('Error, you must enter an order number before you can a product.');
                aside.slideDown(function(){
                    timeout = setTimeout(function () {
                        aside.slideUp();
                    }, 5000);
                });
                return;
            }

            fd.customer_id = customer_id;
            fd.branch_id = branch_id;
            fd.product_id = parseInt(fd.products);
            fd.customer = form.find('.field.customer option[value= ' +customer_id+ ']').text();
            fd.branch = form.find('.field.branch option[value= ' +branch_id+ ']').text();
            fd.product = form.find('.field.product option[value= ' +fd.product_id+ ']').text();

            var row = $(orders.insert_product( fd ) );
            var tbody = form.find('table.products tbody');
            tbody.append(row);

            tbody.find("tr:odd").css("background-color", "#c3e2ff");
            tbody.find("tr:even").css("background-color", "#ffffff");

            row.find('input[name=fulfilled]').on('change', function() {
                var fulfilled = true;
                $(this).closest('tbody').find('input[name=fulfilled]').each(function () {
                   if (! $(this).is(':checked')) {
                       fulfilled = false;
                       return false;
                   }
                });

                if (fulfilled) {
                    $('.form.orders .field.fulfilled input').prop('checked', true);
                } else {
                    $('.form.orders .field.fulfilled input').prop('checked', false);
                }
           });

            row.find('input[name=paid]').on('change', function() {
                var paid = true;
                $(this).closest('tbody').find('input[name=paid]').each(function () {
                   if (! $(this).is(':checked')) {
                       paid = false;
                       return false;
                   }
                });

                if (paid) {
                    $('.form.orders .field.paid input').prop('checked', true);;
                } else {
                    $('.form.orders .field.paid input').prop('checked', false);;
                }
           });
        }

        add_order_form(event = 0) {
            var form_orders = $('.form.orders');
            if ( form_orders.length ) return;

            var request = {
                action: 'form_orders',
                data: {
                    action: 'add',
                    product_id: 1,
                    quantity: 5,
                    freight: 0.00,
                    tax_percent: 13
                },
                nonce: orders.nonce
            };

            $.post(orders.ajaxurl, request, function( response ) {
                if ( response ) {
                    $(".actions.orders :input").attr("disabled", true);

                    var form = $( response );
                    orders.form = form;
                    var parent = event.data  ? event.data.parent : form;
                    var parent_id = event.data  ? event.data.parent_id : 0;

                    form.find( "input.date" ).datepicker({ dateFormat: 'M dd, yy' });
                    form.find( "input.date[name=order_date]" ).datepicker("setDate", new Date());

                    $('.the-content>.wrapper').append( form );

                    form.fadeIn(orders.fade_time);

                    form.find('button.save').on( "click", {
                        parent: parent,
                        parent_id: parent_id
                    }, orders.add_order );

                    form.find('button.cancel').on( "click", {
                        parent: parent
                    }, orders.cancel_order_form );

                    form.find('button.add_product').on( "click", orders.add_product);
                    form.find('select[name=customers]').on( "change", orders.on_change_customer );
                    form.find('select[name=products]').on( "change", orders.on_change_product );

                    form.find('.field.branch i.view').on( "click", orders.view_branch );
                    form.find('.field.customer i.view').on( "click", orders.view_customer );


                    form.find('input[name=price]').on('change', orders.update_total);
                    form.find('select[name=quantity]').on('change', orders.update_total);
                    form.find('input[name=markup]').on('change', orders.update_total);
                    form.find('input[name=discount]').on('change', orders.update_total);
                    form.find('input[name=freight]').on('change', orders.update_total);
                    form.find('input[name=sales_tax]').on('change', orders.update_total);

                    form.find('.field.branch i.view').hover( function() {
                        if ($(this).parent().find('select').val() === '0') {
                            $(this).css('color', 'red');
                        } else {
                            $(this).css('color', 'green');
                        }
                    });
                    form.find('.field.customer i.view').hover( function() {
                        if ($(this).parent().find('select').val() === '0') {
                            $(this).css('color', 'red');
                        } else {
                            $(this).css('color', 'green');
                        }
                    });

                    form.find('.field.branch i.view').mouseout( function() {
                        $(this).css('color', '#0c5971');
                    });
                    form.find('.field.customer i.view').mouseout( function() {
                        $(this).css('color', '#0c5971');
                    });

                    form.find('img.clear').on('click', function(){
                        $(this).closest('form').trigger('reset');
                    });
                }
            });

            return this;
        }

        cancel_order_form(event) {

            var parent = event.data.parent;

            $('.form.orders').fadeOut(orders.fade_time, function() {
                if (parent) {
                    parent.fadeIn(orders.fade_time);
                }
                $(this).remove();
            });

            $(".actions.orders :input").attr("disabled", false);
            return this;
        };
    }

    class Products {
        constructor( cfg ) {
            this.form = null;
            this.page = cfg.page;
            this.form_data = null;
            this.fade_time = cfg.fade_time;
            this.nonce = mettatealib.nonce;
            this.ajaxurl = mettatealib.ajaxurl
        }

        get_html_row( data ) {
            return `
            <tr data-id="` + data.product_id + `">
                <td><input type="checkbox" /></td>
                <td>` + data.name + `</td>
                <td>` + data.description + `</td>
                <td>` + data.unit_price + `</td>
                <td>` + data.markup + `</td>
                <td>` + data.discount + `</td>
                <td>` + data.units_in_stock + `</td>
                <td>` + data.reorder_level + `</td>
                <td>` + data.unit_type + `</td>
                <td>` + data.unit_size + `</td>
                <td>` + data.unit_weight + `</td>
                <td>` + data.quantity_per_unit + `</td>
                <td>` + data.units_on_order + `</td>
                <td>` + data.notes + `</td>
            </tr>
            `;
        }

        add_product(event = 0) {
            var parent = 0;
            var form = $('#products');
            var form_data = getFormData( form );

            if (event) {
                parent = event.data.parent;
                form_data['parent_id'] = event.data.parent_id;
            }

            var aside = form.find('>aside');
            aside.slideUp();

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp(function(){
                   aside.removeAttr('class');
                   aside.find('dd').text('');
                });
            });

            var request = {
                'action': 'add_product',
                'data': form_data,
                'nonce': products.nonce
            };
            $.post(products.ajaxurl, request, function( response ) {
                console.log(response);
                if ( response.result ) {
                    var tbody = $('#products_page').find('table.products tbody');
                    parent.find('form section').attr('data-id', response.id);

                    tbody.append($(`
                        <tr data-id="` + response.id + `">
                            <td><input type="checkbox" /></td>
                            <td>` +  response.name + `</td>
                            <td>` +  response.description + `</td>
                            <td>` +  response.unit_price + `</td>
                            <td>` +  response.markup + `</td>
                            <td>` +  response.discount + `</td>
                            <td>` +  response.units_in_stock + `</td>
                            <td>` +  response.reorder_level + `</td>
                            <td>` +  response.unit_type + `</td>
                            <td>` +  response.unit_size + `</td>
                            <td>` +  response.unit_weight + `</td>
                            <td>` +  response.quantity_per_unit + `</td>
                            <td>` +  response.units_on_order + `</td>
                            <td>` +  response.notes + `</td>
                        </tr>
                    `));
                    tbody.find("tr:odd").css("background-color", "#c3e2ff");

                    aside.removeAttr('class');
                    aside.addClass('success');
                    aside.find('dd').text('Success, new product has been added.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Error, ' + response.last_error + '.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }
            });

            return this;
        }

        edit_product(event = 0) {
            var parent = 0,
                form = $('#products'),
                data = getFormData( form ),
                products_form = $('.form.products'),
                products_page = $('#products_page'),
                product_id = products_form.attr('data-id');

            if (event) {
                parent = event.data.parent;
            }

            data['product_id'] = product_id;

            var aside = form.find('>aside');
            aside.slideUp().removeAttr('class');

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp(function(){
                   aside.removeAttr('class');
                   aside.find('dd').text('');
                });
            });

            var request = {
                action: 'edit_product',
                data: data,
                nonce: products.nonce
            };

            $.post(products.ajaxurl, request, function( response ) {

                if ( response.result ) {
                    response.product_id = product_id;
                    var row = $ ( products.get_html_row( response ) );
                    products_page.find('tbody tr[data-id="' + product_id + '"]').replaceWith(row);
                    products_page.find('table.products tr:odd').css("background-color", "#ffffff");

                    aside.addClass('success');
                    aside.find('dd').text('Success, product updated.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.addClass('error');
                    aside.find('dd').text('Nothing has changed, no update is needed.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }

                products_page.find('table.products').find("tbody tr:odd").
                    css("background-color", "#c3e2ff");

                products_page.find('table.products').find("tbody tr:even").
                    css("background-color", "#ffffff");
            }, 'json' );

        }

        delete_product() {
            var products_form = $('.form.products');
            var id = products_form.attr('data-id');

            var request = {
                'action': 'delete_product',
                'data': id,
                'nonce': products.nonce
            };

            $.post(products.ajaxurl, request, function( response ) {
                if ( response ) {
                    products_form.fadeOut(products.fade_time, function() {
                        $(this).remove();
                    });
                    $('.table.wrap').find('tr[data-id='+ id +']').
                    fadeOut(products.fade_time, function() {
                        $(this).remove();
                        products.page.find('table').find("tbody tr:odd").
                            css("background-color", "#c3e2ff");

                        products.page.find('table').find("tbody tr:even").
                            css("background-color", "#ffffff");
                    });
                }
            });

            $(".actions.products :input").attr("disabled", false);
        }

        add_product_form(event = 0) {
            if ( $('.form.products').length ) return;

            var args = { action: 'add' };

            var request = {
                'action': 'form_products',
                'data': args,
                'nonce': products.nonce
            };

            $.post(products.ajaxurl, request, function( response ) {
                if ( response ) {

                    $(".actions.products :input").attr("disabled", true);

                    var form = $( response );
                    products.form = form;
                    var parent = event.data  ? event.data.parent : form;
                    var parent_id = event.data  ? event.data.parent_id : 0;

                    $('.the-content>.wrapper').append( form );
                    form.fadeIn(products.fade_time);

                    form.find('button.save').on( "click", {
                        parent: parent,
                        parent_id: parent_id
                    }, products.add_product );

                    form.find('button.cancel').on( "click", {
                        parent: parent
                    }, products.cancel_product_form );

                    form.find('button.image').on('click', function() {
                        alert(12);
                    });

                    form.find('img.clear').on('click', function(){
                        $(this).closest('form').trigger('reset');
                    });;
                }
            });

            return this;
        }

        edit_product_form(id = 0) {
            if ( $('.form.products').length ) return;

            if( id === Object(id) ) {
                id = $(this).attr('data-id');
            }

            var wrapper = $('.the-content>.wrapper');
            var request = {
                action: 'form_products',
                data: { action: 'edit', id: id },
                nonce: contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    $(".actions.products :input").attr("disabled", true);

                    var form = $( response );
                    products.form = form;
                    wrapper.append(form);
                    form.fadeIn(products.fade_time);

                    form.find('button.save').on( "click", { parent: form }, products.edit_product);
                    form.find('button.cancel').on( "click", { parent: 0 }, products.cancel_product_form );
                    form.find('button.delete').on('click', products.delete_product);

                    form.find('img.clear').on('click', function(){
                        $(this).closest('form').trigger('reset');
                    });;
                }
            });

        }

        cancel_product_form(event) {
            var parent = event.data.parent;

            $('.form.products').fadeOut(products.fade_time, function() {
                if (parent) {
                    parent.fadeIn(products.fade_time);
                }
                $(this).remove();
            });

            $(".actions.products :input").attr("disabled", false);
            return this;
        }

        do_bulk_action() {
            var page = $('#products_page');
            var action = page.find('select[name=bulk_action]').val();
            var keys = [];

            $('table.products tbody tr td:first-child input').each(function() {
                if ( $(this).is(':checked') ) {
                    keys.push($(this).closest('tr').attr('data-id').trim());
                }
            });

            var data = { keys: keys, action: parseInt(action) };
            var request = {
                'action': 'product_bluk_action',
                'data': data,
                'nonce': products.nonce
            };

            $.post(products.ajaxurl, request, function( response ) {
                if ( response ) {
                    var tbody = $('table.products tbody');
                    tbody.find('tr td:first-child input').each(function() {
                        if ( $(this).is(':checked') && data['action'] === 1 ) {
                            $(this).closest('tr').remove();
                        }
                    });
                    tbody.find("tr:odd").css("background-color", "#c3e2ff");

                    tbody.find("tr:even").css("background-color", "#ffffff");
                }
            });
        }
    }

    class Contacts {
        constructor( cfg ) {
            this.form = null;
            this.page = cfg.page;
            this.form_data = null;
            this.fade_time = cfg.fade_time;
            this.nonce = mettatealib.nonce;
            this.ajaxurl = mettatealib.ajaxurl
        }

        get_html_row( data ) {
            return `
            <tr data-id="` + data['id'] + `">
                <td><input type="checkbox" /></td>
                <td>` + data['status'] + `</td>
                <td>` + data['title'] + `</td>
                <td>` + data['first_name'] + `</td>
                <td>` + data['last_name'] + `</td>
                <td>` + data['roles'] + `</td>
                <td>` + data['phone1'] + `</td>
                <td>` + data['phone2'] + `</td>
                <td>` + data['email_address'] + `</td>
                <td>` + data['country'] + `</td>
                <td>` + data['state'] + `</td>
                <td>` + data['city'] + `</td>
                <td>` + data['address'] + `</td>
                <td>` + data['unit'] + `</td>
                <td>` + data['postcode'] + `</td>
                <td>` + data['notes'] + `</td>
            </tr>
            `;
        }

        get_form_contact_roles() {
            var roles = [],
                form = contacts.form.find('#contacts'),
                contact_roles = form.find('#contact_roles'),
                role_options = form.find('select[name=role] option');

            form.find('select[name=role] option').each(function() {
                role_options[ $(this).text() ] = parseInt($(this).val());
            });

            contact_roles.find('li').each(function() {
                var text = $(this).text().trim();
                roles.push(role_options[text]);
            });
            return roles;
        }

        qsearch() {
            var request = {
                'action': 'qsearch_contacts',
                'data': $(this).parent().find('input').val(),
                'nonce': contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    $(".actions.contacts :input").attr("disabled", true);

                    var sr = $(response);
                    sr.find('button.search').remove();
                    sr.find('table').find("tbody tr:even").
                        css("background-color", "#c3e2ff");

                    $('#content .wrapper').append(sr);

                    sr.fadeIn(contacts.fade_time);

                    sr.on('click', 'tr', function() {
                        sr.find('table').find("tbody tr:even").
                            css("background-color", "#c3e2ff");

                        sr.find('tr').removeClass('selected');
                        sr.find('td input[type=checkbox]').prop('checked', false);
                        $(this).find('td input[type=checkbox]').prop('checked', true);
                        $(this).addClass('selected');
                        $(this).removeAttr('style');
                    });
                    sr.on('click', 'button.cancel', function() {
                        sr.fadeOut(contacts.fade_time, function() {
                            $(this).remove();
                            $(".actions.contacts :input").attr("disabled", false);
                        });
                    });
                    sr.on('click', 'button.search', function() {
                        sr.fadeOut(contacts.fade_time, function() {
                            $(this).remove();
                            form_search_contacts();
                        });
                    });
                    sr.on('click', 'button.edit', function() {
                        sr.fadeOut(contacts.fade_time, function() {
                            var id = sr.find('input[type=checkbox]:checked').closest('tr').attr('data-id');
                            sr.remove();
                            contacts.edit_contact_form(id);
                        });
                    });
                }
            });
        }

        add_contact_role() {
            var id, item, select, selected, role, role_id = null;
            id = '#' + $(this).attr('data-id');
            var ul = $(id).find('ul');

            select = $('.field.role select');
            selected = select.find('option:selected');
            role = selected.text();
            role_id = selected.val();

            if ( role ) {
                item = $(`<li data-id="` + role_id + `">` + role + ` <i class="fa fa-times"></i></li>`);
                item.hide();

                if ( ! ul.find('li[data-id="' + role_id + '"]').length ) {
                    ul.append(item);
                }
                item.find('i').on('click', function() {
                    item.fadeOut(contacts.fade_time, function() {
                        $(this).remove();
                    });
                });
                item.fadeIn(contacts.fade_time);
            }
            select.val(0);

            return this;
        }

        add_contact(event = 0) {
            var parent = 0;
            var form = contacts.form.find('#contacts');
            var form_data = getFormData( form );

            var aside = form.find('aside');
            aside.slideUp().removeAttr('class').find('dd').text('');

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp().removeAttr('class').find('dd').text('');
            });

            if (event) {
                parent = event.data.parent;
                form_data['parent_id'] = event.data.parent_id;
            }

            form_data['roles'] = contacts.get_form_contact_roles();

            var request = {
                'action': 'add_contact',
                'data': form_data,
                'nonce': contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if (response.result) {
                    var row = $( contacts.get_html_row( response ) );

                    var tbody = $('table.contacts').find('tbody');
                    tbody.append(row);
                    tbody.find("tr:odd").css("background-color", "#c3e2ff");
                    tbody.find("tr:even").css("background-color", "#ffffff");

                    if (event.data.parent_id) {
                        parent.find('form section').attr('data-id', response.branch_id);
                        parent.fadeIn(contacts.fade_time);
                    }

                    aside.addClass('success');
                    aside.find('dd').text('Success, new contact has been added.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Error, ' + response.last_error + '.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }
            }, 'json' );

            return this;
        }

        edit_contact(event = 0) {
            var parent = 0,
                form = $('#contacts'),
                data = getFormData( form ),
                contact_roles = $('#contact_roles'),
                contacts_form = $('.form.contacts'),
                contacts_page = $('#contacts_page');

            var aside = form.find('aside');
            aside.slideUp().removeAttr('class').find('dd').text('');

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp().removeAttr('class').find('dd').text('');
            });

            if (event) {
                parent = event.data.parent;
            }

            data['roles'] =  contacts.get_form_contact_roles();
            data['contact_id'] = contacts_form.attr('data-id');

            var request = {
                action: 'edit_contact',
                data: data,
                nonce: contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                var role_names = [];
                data['roles'].forEach((item, index) => {
                    var text = $('.field.role select option[value="' + item + '"]').text();
                    role_names.push( text );
                });
                data['roles'] = role_names.join(', ');

                var country_id = (parseInt( data['country_id'] ) ) ? data['country_id'] : 0;
                var zone_id = (parseInt( data['zone_id'] ) ) ? data['zone_id'] : '';
                var location_id = (parseInt( data['location_id'] ) ) ? data['location_id'] : 0;
                var status_id = (parseInt( data['status_id'] ) ) ? data['status_id'] : 0;

                var country = $('.field.country select option[value="' + country_id + '"]').text();
                var state = $('.field.state select option[value="' + zone_id + '"]').text();
                var city = $('.field.city select option[value="' + location_id + '"]').text();
                var status = $('.field.status select option[value="' + status_id + '"]').text();

                data['country'] = country;
                data['state'] = state;
                data['city'] = city;
                data['status'] = status;
                data['id'] = data['contact_id'];

                if (response.result) {
                    var table = contacts_page.find('table');
                    var row = $( contacts.get_html_row( data ) );
                    var tr = table.find('tbody tr[data-id="' + data['id'] + '"]');

                    tr.replaceWith(row);

                    table.find("tbody tr:odd").css("background-color", "#c3e2ff");
                    table.find("tbody tr:even").css("background-color", "#ffffff");

                    var style = row.css('background-color');
                    row.css('background-color', '#d3ffd0');
                    timeout = setTimeout(function () {
                        row.css('background-color', style);
                    }, 1000);

                    aside.addClass('success');
                    aside.find('dd').text('Success, contact updated.');
                    aside.slideDown(function() {
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    var row = contacts_page.find('tbody tr[data-id=' + data['id'] +']');

                    var style = row.css('background-color');
                    row.css('background-color', '#ffcecf');
                    timeout = setTimeout(function () {
                        row.css('background-color', style);
                    }, 1000);

                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Nothing has changed, no update is needed.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }

            }, 'json' );

            $(".actions.contacts :input").attr("disabled", false);
        }

        delete_contact() {
            var contacts_form = $('.form.contacts');
            var id = contacts_form.attr('data-id');

            var request = {
                'action': 'delete_contact',
                'data': id,
                'nonce': contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    contacts_form.fadeOut(contacts.fade_time, function() {
                        $(this).remove();
                    });
                    $('.table.wrap').find('tr[data-id='+ id +']').fadeOut(contacts.fade_time, function() {
                        $(this).remove();
                        contacts.page.find('table').find("tbody tr:even").
                            css("background-color", "#c3e2ff");

                        contacts.page.find('table').find("tbody tr:odd").
                            css("background-color", "#ffffff");
                    });
                }
            });

            $(".actions.contacts :input").attr("disabled", false);
        }

        search_contacts() {
            var form = $('#contacts');
            var data = getFormData( form );
            var contact_roles = form.find('#contact_roles');


            data['roles'] = [];
            contact_roles.find('li').each(function() {
                data['roles'].push(parseInt($(this).attr('data-id')));
            });

            var request = {
                'action': 'search_contacts',
                'data': data,
                'nonce': contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    $(".actions.contacts :input").attr("disabled", true);

                    var sr = $(response);
                    if (! sr.find('table tbody tr').length ) {
                        return; // Todo add dialog box for now results
                    }
                    sr.find('table').find("tbody tr:even").
                        css("background-color", "#c3e2ff");

                    $('#content .wrapper').append(sr);
                    $('.form.contacts').fadeOut(contacts.fade_time, function() {
                        $(this).remove();
                        sr.fadeIn(contacts.fade_time);

                        sr.on('click', 'tr', function() {
                            sr.find('table').find("tbody tr:even").
                                css("background-color", "#c3e2ff");

                            sr.find('tr').removeClass('selected');
                            sr.find('td input[type=checkbox]').prop('checked', false);
                            $(this).find('td input[type=checkbox]').prop('checked', true);
                            $(this).addClass('selected');
                            $(this).removeAttr('style');
                        });
                        sr.on('click', 'button.cancel', function() {
                            sr.fadeOut(contacts.fade_time, function() {
                                $(this).remove();
                                $(".actions.contacts :input").attr("disabled", false);
                            });
                        });
                        sr.on('click', 'button.search', function() {
                            sr.fadeOut(contacts.fade_time, function() {
                                $(this).remove();
                                contacts.search_contacts_form();
                            });
                        });
                        sr.on('click', 'button.edit', function() {
                            sr.fadeOut(contacts.fade_time, function() {
                                var id = sr.find('input[type=checkbox]:checked').closest('tr').attr('data-id');
                                $(this).remove();
                                contacts.edit_contact_form(id);
                            });
                        });
                    });
                }
            });

            $(".actions.contacts :input").attr("disabled", false);
        }

        add_contact_form(event = null) {
            if ( $('.form.contacts').length ) return;

            var request = {
                'action': 'form_contacts',
                'data': { action: 'add' },
                'nonce': contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {

                var form = $( response );
                contacts.form = form;
                var parent = event.data  ? event.data.parent : form;
                var parent_id = event.data  ? event.data.parent_id : 0;

                $('.the-content>.wrapper').append( form );
                form.fadeIn(contacts.fade_time,function() {
                    form.on('change', 'select[name=zone_id]', get_locations);

                    form.find('button.save').on( "click", {
                        parent: parent,
                        parent_id: parent_id
                    }, contacts.add_contact );

                    form.find('button.cancel').on( "click", { parent: parent }, contacts.cancel_contact_form );

                    form.on('click', 'button.add_role', contacts.add_contact_role);
                    $(".actions.contacts :input").attr("disabled", true);
                });
            });

            return this;
        }

        edit_contact_form(id = 0) {
            if ( $('.form.contacts').length ) return;
            if( id === Object(id) ) {
                id = $(this).attr('data-id');
            }

            var data = { action: 'edit', id: id };
            var wrapper = $('.the-content>.wrapper');
            var request = {
                action: 'form_contacts',
                data: data,
                nonce: contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                $(".actions.contacts :input").attr("disabled", true);

                var form = $( response );
                contacts.form = form;
                wrapper.append(form);

                form.on('change', 'select[name=country_id]', get_zones);
                form.on('change', 'select[name=zone_id]', get_locations);

                var ul = form.find('ul');

                ul.find('li').each(function() {
                    var item = $(this);
                    item.find('i').on('click', function() {
                        item.fadeOut(contacts.fade_time, function() {
                            $(this).remove();
                        });
                    });
                });

                form.fadeIn(contacts.fade_time);

                form.find('button.save').on( "click", { parent: form }, contacts.edit_contact );
                form.find('button.cancel').on( "click", { parent: form }, contacts.cancel_contact_form );

                form.find('button.delete').on('click', contacts.delete_contact);
                form.find('button.add_role').on('click', contacts.add_contact_role);

            });

        }

        cancel_contact_form(event) {

            var parent = event.data.parent;

            $('.form.contacts').fadeOut(contacts.fade_time, function() {
                if (parent) {
                    parent.fadeIn(contacts.fade_time);
                }
                $(this).remove();
            });

            $(".actions.contacts :input").attr("disabled", false);
            return this;
        };

        search_contacts_form() {
            if ( $('.form.contacts').length ) return;

            var args = {
                action: 'search'
            };
            var wrapper = $('.the-content>.wrapper');
            var request = {
                action: 'form_contacts',
                data: args,
                nonce: contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    form = $( response );
                    wrapper.append(form);
                    form.fadeIn(contacts.fade_time);

                    form.on('change', 'select[name=country_id]', get_zones);
                    form.on('change', 'select[name=zone_id]', get_locations);

                    form.find('button.search').on('click', contacts.search_contacts);
                    form.find('button.cancel').on('click', contacts.cancel_contact_form);
                    form.find('button.add_role').on('click', contacts.add_contact_role);
                    $(".actions.contacts :input").attr("disabled", true);
                }
            });
        }

        do_bulk_action() {
            var page = $('#contacts_page');
            var action = page.find('select[name=bulk_action]').val();
            var keys = [];

            $('table.contacts tbody tr td:first-child input').each(function() {
                if ( $(this).is(':checked') ) {
                    keys.push($(this).closest('tr').attr('data-id').trim());
                }
            });

            var data = { keys: keys, action: parseInt(action) };
            var request = {
                'action': 'contact_bluk_action',
                'data': data,
                'nonce': contacts.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    $('table.contacts tbody tr td:first-child input').each(function() {
                        if ( $(this).is(':checked') && data['action'] === 1 ) {
                            $(this).closest('tr').remove();
                        }
                    });
                }
            });
        }
    };

    class Customers {
        constructor( cfg ) {
            this.form = null;
            this.page = cfg.page;
            this.form_data = null;
            this.fade_time = cfg.fade_time;
            this.nonce = mettatealib.nonce;
            this.ajaxurl = mettatealib.ajaxurl
        }

        get_customer_row( data ) {

            return $(`
                <tr data-id="` + data['id'] + `">
                    <td><input type="checkbox" /></td>
                    <td>` + data['status'] + `</td>
                    <td>` + data['customer'] + `</td>
                    <td>` + data['type'] + `</td>
                    <td>` + data['notes'] + `</td>
                </tr>
            `);
        }

        add_customer() {
            var form = $('#customers');
            var data = getFormData( form );
            var page = $('#customers_page');

            form.find('button.add_branch').show();

            var tbody = $('table.customers').find('tbody');

            var aside = form.find('>aside');
            aside.slideUp().removeAttr('class');

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp(function(){
                   aside.removeAttr('class');
                   aside.find('dd').text('');
                });
            });

            var request = {
                'action': 'add_customer',
                'data': data,
                'nonce': customers.nonce
            };
            $.post(customers.ajaxurl, request, function( response ) { ;
                if ( response.result ) {
                    var row = $( customers.get_customer_row( response ) );
                    var form = $('.form.customers');

                    form.attr('data-id', response['id']);
                    tbody.append(row);
                    tbody.find("tr:odd").css("background-color", "#c3e2ff");
                    tbody.find("tr:even").css("background-color", "#ffffff");

                    form.find('input[name=customer]').val(response['customer']);
                    form.find('select[name=status_id]').val(response['status_id']);
                    form.find('select[name=type_id]').val(response['type_id']);
                    form.find('textarea[name=notes]').val(response['notes']);

                    aside.addClass('success');
                    aside.find('dd').text('Success, new customer has been added.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Error, ' + response.last_error + '.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }
            }, 'json' );

        }

        edit_customer() {
            var form = $('#customers');
            var data = getFormData( form );
            var customers_page = $('#customers_page');
            var customers_form = $('.form.customers');
            var customer_id = customers_form.attr('data-id');

            data['customer_id'] = customer_id;

            var tbody = $('table.customers').find('tbody');

            var aside = form.find('>aside');
            aside.slideUp().removeAttr('class');

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp(function(){
                   aside.removeAttr('class');
                   aside.find('dd').text('');
                });
            });

            var request = {
                'action': 'edit_customer',
                'data': data,
                'nonce': customers.nonce
            };
            $.post(customers.ajaxurl, request, function( response ) {
                if ( response.result ) {
                    data['id'] = customer_id;
                    data['status'] = $('.field.status select option[value="' + data['status_id'] + '"]').text();
                    data['type'] = $('.field.type select option[value="' + data['type_id'] + '"]').text();

                    var row = customers.get_customer_row( data );

                    customers_page.find('tbody tr[data-id="' + customer_id + '"]').replaceWith( row );
                    $("table.customers tbody tr:odd").css("background-color", "#c3e2ff");

                    aside.addClass('success');
                    aside.find('dd').text('Success, customer updated.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });

                }  else {
                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Nothing has changed, no update is needed.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }
            }, 'json' );
        }

        delete_customer() {
            var customers_form = $('.form.customers');
            var id = customers_form.attr('data-id');

            var request = {
                'action': 'delete_customer',
                'data': id,
                'nonce': customers.nonce
            };

            $.post(customers.ajaxurl, request, function( response ) {
                if ( response ) {
                    customers_form.fadeOut(fade_time, function() {
                        $('.table.wrap').find('tr[data-id='+ id +']').remove();

                        $('.table.wrap').find("tbody tr:even").
                            css("background-color", "#c3e2ff");

                        $('.table.wrap').find("tbody tr:odd").
                            css("background-color", "#ffffff");

                        customers_form.remove();
                    });
                }
            });
        }

        add_customer_form() {
            var form_customers = $('.form.customers');
            if ( form_customers.length ) return;

            var args = { action: 'add' };

            var request = {
                'action': 'form_customers',
                'data': args,
                'nonce': customers.nonce
            };
            $.post(customers.ajaxurl, request, function( response ) {
                if ( response ) {
                    var form = $( response );

                    $('.the-content>.wrapper').append( form );
                    form.fadeIn(customers.fade_time);
                    $(".actions.customers :input").attr("disabled", true);
                    form.find('button.save').on('click', customers.add_customer);
                    form.find('button.cancel').on('click', customers.cancel_customer_form);
                    form.find('button.add_branch').on( "click", { parent: form_customers }, customers.add_branch_form );
                }
            });
        }

        edit_customer_form(id = 0) {
            var show_add_branch = false;

            var form_customers = $('.form.customers');

            if ( form_customers.length ) return;

            if( id === Object(id) ) {
                id = $(this).attr('data-id');
                show_add_branch = true;
            }

            var args = { id: id, action: 'edit' };
            var request = {
                'action': 'form_customers',
                'data': args,
                'nonce': customers.nonce
            };

            $.post(customers.ajaxurl, request, function( response ) {
                if (! response ) return;

                var form = $( response );
                if ( show_add_branch ) {
                    form.find('button.add_branch').show();
//                    var branches = customers.get_branches(id);
                }

                $('.the-content>.wrapper').append( form );

                var tbody = form.find('form tbody');
                tbody.find("tr:odd").css("background-color", "#c3e2ff");
                tbody.find("tr:even").css("background-color", "#ffffff");

                form.fadeIn(customers.fade_time);
                form.find('button.save').on('click', customers.edit_customer);
                form.find('button.delete').on('click', customers.delete_customer);
                form.find('button.cancel').on('click', customers.cancel_customer_form);

                form.find('button.add_branch').on( "click", { parent: form_customers }, customers.add_branch_form );

                form.find('table.branches tr td:first-child a').on('click', function() {
                    var branch_id = $(this).closest('tr').attr('data-id');
                    customers.edit_branch_form(branch_id);
                });

                $("table.customers tbody tr:odd").css("background-color", "#c3e2ff");
            });
        }

        cancel_customer_form() {
            $('.form.customers').fadeOut(contacts.fade_time, function() {
                $(this).remove();
            });

            $(".actions.customers :input").attr("disabled", false);
            return this;
        };

        add_customer_contact(event) {
            var form = $('.form.branches');
            var aside = form.find('form aside');
            var branch_id = parseInt(form.find('form section').attr('data-id'));

            if ( ! branch_id ) {
                aside.addClass('error');
                aside.find('dd').text('You must save this branch before adding contacts.');
                aside.slideDown(function(){
                    $(this).delay( 5000 ).slideUp();
                });

            } else {
                form.fadeOut(customers.fade_time);
                event.data.parent = form;
                event.data.parent_id = form.find('form section').attr('data-id');
                contacts.add_contact_form(event);
            }
        }

        get_branch_row( data ) {
            return $(`
                <tr data-id="` + data['branch_id'] + `">
                    <td><a href="#">` + 'Edit' + `</a></td>
                    <td>` + data['status'] + `</td>
                    <td>` + data['customer'] + `</td>
                    <td>` + data['branch'] + `</td>
                    <td>` + data['agent'] + `</td>
                    <td>` + data['address'] + `</td>
                    <td>` + data['unit'] + `</td>
                    <td>` + data['postcode'] + `</td>
                    <td>` + data['country'] + `</td>
                    <td>` + data['state'] + `</td>
                    <td>` + data['city'] + `</td>
                    <td>` + data['notes'] + `</td>
                </tr>
            `);
        }

        add_branch() {
            var customer_id = parseInt($('.form.customers').attr('data-id'));
            var form = $('#branches');
            var form_data = getFormData( form );
            var data = { action: 'add', customer_id: customer_id, data: form_data};

            var aside = form.find('>aside');
            aside.slideUp();

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp().removeAttr('class').find('dd').text('');
            });

            var request = {
                'action': 'add_branch',
                'data': data,
                'nonce': customers.nonce
            };
            $.post(customers.ajaxurl, request, function( response ) {

                var form = $('.form.branches');
                var section = form.find('form section');

                if (response.result) {
                    section.attr('data-id', response['branch_id'] );

                    var table = $('.form.customers table');
                    var row = customers.get_branch_row(response);
                    table.append(row);

                    var tbody = table.find('tbody');
                    tbody.find("tr:odd").css("background-color", "#c3e2ff");
                    tbody.find("tr:even").css("background-color", "#ffffff");

                    row.find('a').on('click', function() {
                        customers.edit_branch_form(row.attr('data-id'));
                    });

                    aside.removeAttr('class');
                    aside.addClass('success');
                    aside.find('dd').text('Success, new branch has been added.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Error, ' + response.last_error + '.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }
            });
        }

        edit_branch(args = 0) {

            var customer_id = parseInt($('.form.customers').attr('data-id'));
            var form = $('.form.branches form');
            var customers_form = $('.form.customers');
            var branch_id = form.find('section').attr('data-id');

            if (args['data']) {
                data = args['data'];
                customer_id = parseInt(data.customer_id);
                branch_id = parseInt(data.branch_id);
            }


            var aside = form.find('>aside');
            aside.slideUp();

            var timeout = null;
            aside.on('click', 'i', function() {
                clearTimeout(timeout);
                aside.slideUp().removeAttr('class').find('dd').text('');
            });

            var request = {
                'action': 'edit_branch',
                'data': {
                    action: 'edit',
                    customer_id: customer_id,
                    branch_id: branch_id,
                    data: getFormData( form )
                },
                'nonce': customers.nonce
            };
            $.post(customers.ajaxurl, request, function( response ) {
                var form = $('.form.branches');
                var table = $('.form.customers table');

                if (response.result) {
                    var row = customers.get_branch_row( response );

                    row.find('a').on('click', function() {
                        customers.edit_branch_form(row.attr('data-id'));
                    });
                    table.find('tr[data-id='+ branch_id +']').replaceWith( row );

                    var tbody = table.find('tbody');
                    tbody.find("tr:odd").css("background-color", "#c3e2ff");
                    tbody.find("tr:even").css("background-color", "#ffffff");

                    aside.addClass('success');
                    aside.find('dd').text('Success, branch updated.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                } else {
                    aside.removeAttr('class');
                    aside.addClass('error');
                    aside.find('dd').text('Nothing has changed, no update is needed.');
                    aside.slideDown(function(){
                        timeout = setTimeout(function () {
                            aside.slideUp();
                        }, 5000);
                    });
                }

            });
        }

        delete_branch() {
            var customer_id = parseInt($('.form.customers').attr('data-id'));
            var form_branches = $('.form.branches');
            var form_customers = $('.form.customers');
            var branch_id = form_branches.find('section').attr('data-id');

            var request = {
                'action': 'delete_branch',
                'data': branch_id,
                'nonce': customers.nonce
            };

            $.post(customers.ajaxurl, request, function( response ) {
                if (! response) return;

                var form = form_branches.find('form');
                form_branches.fadeOut(customers.fade_time, function() {
                    form_customers.fadeIn(customers.fade_time);
                    form_customers.find('table.branches tbody tr[data-id=' + branch_id + ']').remove();
                    form_branches.remove();
                });

            });

        }

        add_branch_form(event = 0) {
            var parent = event.data.parent;

            var customers_form = $('.form.customers');
            var wrapper = $('.the-content>.wrapper');
            var customers_id = customers_form.attr('data-id');

            var data = {
                'id': customers_id,
                'branch_id': 0,
                'action': 'add'
            };

            var request = {
                'action': 'form_branches',
                'data': data,
                'nonce': customers.nonce
            };

            $.post(customers.ajaxurl, request, function( response ) {

                wrapper.append($(response));
                var form = wrapper.find('.form.branches');
                var aside = form.find('aside');

                form.on('change', 'select[name=country_id]', get_zones);
                form.on('change', 'select[name=zone_id]', get_locations);

                customers_form.fadeOut(customers.fade_time, function() {
                    form.fadeIn(customers.fade_time);
                });

                form.on('click', 'button.save', customers.add_branch);
                form.on('click', 'button.cancel', customers.cancel_branch_form);


                aside.on('click', 'i', function() {
                    aside.slideUp();
                });
                form.find('button.add_contact').on( "click", { parent: form }, customers.add_customer_contact );
            });

        }

        edit_branch_form(id = 0) {
            if( id === Object(id) ) {
                id = $(this).attr('data-id');
            }

            var customers_form = $('.form.customers');
            var wrapper = $('.the-content>.wrapper');
            var customers_id = customers_form.attr('data-id');

            var data = {
                'id': customers_id,
                'branch_id': id,
                'action': 'edit'
            };

            var request = {
                'action': 'form_branches',
                'data': data,
                'nonce': customers.nonce
            };
            $.post(customers.ajaxurl, request, function( response ) {
                var form = $(response);
                wrapper.append( form );

                form.find('tbody').find("tr:odd").
                    css("background-color", "#c3e2ff");
                form.find('tbody').find("tr:even").
                    css("background-color", "#ffffff");

                form.on('change', 'select[name=country_id]', get_zones);
                form.on('change', 'select[name=zone_id]', get_locations);

                customers_form.fadeOut(customers.fade_time, function() {
                    form.fadeIn(customers.fade_time);
                });

                form.on('click', 'button.save', customers.edit_branch);
                form.on('click', 'button.delete', customers.delete_branch);
                form.on('click', 'button.cancel', customers.cancel_branch_form);

                form.find('button.add_contact').on( "click", { parent: form }, customers.add_customer_contact );
            });
        }

        cancel_branch_form() {
            var customers_form = $('.form.customers');
            var wrapper = $('.the-content>.wrapper');
            var form = wrapper.find('.form.branches');

            form.fadeOut(customers.fade_time, function() {
                customers_form.fadeIn(customers.fadetime);
                $(this).remove();
            });

            $(".actions.customers :input").attr("disabled", false);
            return this;
        };

        do_bulk_action() {
            var page = $('#customers_page');
            var action = page.find('select[name=bulk_action]').val();
            var keys = [];

            $('table.customers tbody tr td:first-child input').each(function() {
                if ( $(this).is(':checked') ) {
                    keys.push($(this).closest('tr').attr('data-id').trim());
                }
            });

            var data = { keys: keys, action: parseInt(action) };
            var request = {
                'action': 'customers_bluk_action',
                'data': data,
                'nonce': customers.nonce
            };

            $.post(contacts.ajaxurl, request, function( response ) {
                if ( response ) {
                    $('table.customers tbody tr td:first-child input').each(function() {
                        if ( $(this).is(':checked') && data['action'] === 1 ) {
                            $(this).closest('tr').remove();
                        }
                    });
                }
            });
        }
    };

    contacts = new Contacts( { 'fade_time': 400, page: $('#contacts_page') } );

    actions_contacts = $('.actions.contacts');
    actions_contacts.
        on('click', 'button.add', contacts.add_contact_form).
        on('click', 'button.apply', contacts.do_bulk_action).
        on('click', 'button.search', contacts.search_contacts_form).
        on('change', 'select.bulk', function() {
            value = $(this).val();
            actions_contacts.find('select').each(function() {
                $(this).val(value);
            });
        });

    if ( ! $('#search_results').length ) {
        actions_contacts.on('click', 'button.qsearch', contacts.qsearch);
        actions_contacts.find('input[type=text]').on('keypress',function(e) {
            if( e.which === 13 ) {
                actions_contacts.find('button.qsearch').click();
            }
        });
    }
    $('#contacts_page table.contacts').on('dblclick', 'tr', contacts.edit_contact_form);

    // -------------------------------------------------------------------------

    customers = new Customers( { 'fade_time': 400, page: $('#customers_page') } );

    actions_customers = $('.actions.customers');
    actions_customers.
        on('click', 'button.add', customers.add_customer_form).
        on('click', 'button.apply', customers.do_bulk_action).
        on('change', 'select.bulk', function() {
            value = $(this).val();
            actions_customers.find('select').each(function() {
                $(this).val(value);
            });
        });

    $('#customers_page table.customers').on('dblclick', 'tr', customers.edit_customer_form);

    // -------------------------------------------------------------------------

    products = new Products( { 'fade_time': 400, page: $('#products_page') } );

    actions_products = $('.actions.products');
    actions_products.
        on('click', 'button.apply', products.do_bulk_action).
        on('click', 'button.add', products.add_product_form).
        on('change', 'select.bulk', function() {
            value = $(this).val();
            actions_products.find('select').each(function() {
                $(this).val(value);
            });
        });

    $('#products_page table.products').on('dblclick', 'tr', products.edit_product_form);

    // -------------------------------------------------------------------------

    orders = new Orders( { 'fade_time': 400, page: $('#orders_page') } );

    actions_orders = $('.actions.orders');
    actions_orders.
        on('click', 'button.add', orders.add_order_form);

});