extends layout

block content
    link(href='assets/css/style.css', rel='stylesheet')
    script(src='assets/js/crosshair-min.js')
    div.page-content
        div.content-wrapper
            div
                div.col-md-4
                    div.panel.panel-flat
                        div.panel-heading
                            h6.panel-title Plants
                            div.heading-elements
                                div.heading-btn.btn-group
                                    //-button.btn.btn-xs.btn-primary(type="button") Add
                        div.container-fluid
                            div.col-md-10
                                form.form-horizontal
                                    div.form-group
                                        label.control-label.col-lg-3 Tool :
                                        div.col-lg-9
                                            select.select.select2-hidden-accessible-.form-control(name="tool", tabindex="-1", aria-hidden="true")
                                                option(value=0) Seed
                                    //- dynamic form
                                    div
                                        div.plant-row
                                            div.form-group
                                                label.control-label.col-lg-3 Plant :
                                                div.col-lg-9
                                                    select.select.plant_type.form-control(name="plant[]", id="plant[]", aria-hidden="true")
                                                        option(value=0) Kale
                                                        option(value=1) Napa cabbage
                                                        option(value=2) Red Oak Lettuce
                                            div.form-group
                                                label.control-label.col-lg-3 Position:
                                                div.col-lg-9
                                                    input.form-control.position(type="text", name='position[]', id='position[]')
                                            hr
                                    //- \dynamic form

                                    div.form-group
                                        div.col-lg-3
                                        div.col-lg-9
                                            button.btn.btn-default(type='button', id='add_plant')
                                                span Add Plant
                                            button.btn.btn-primary(type='button', id='execute')
                                                span Execute
                                    div.form-group
                                        div.col-lg-3
                                        div.col-lg-9


                div.col-md-8
                    div.panel.panel-flat
                        div.panel-heading
                            h6.panel-title Raise Bed
                        div.container-fluid
                            div.col-md-12
                                div.row
                                    div.col-md-12(id="status")
                                div.crosshair
                                    img(id="demo-img" src="./assets/images/bed-plane.png" alt="")

    script.
        var socket = io();
        socket.on('timer', function (data) {
            $('#timer').html(data.current);
        });
        function plantVisual() {
            $('.position').each(function(position) {
                var plants = $(this).val();
                if(!$.isNumeric(plants.substr(plants.length - 1))) {
                    console.log(plants.substr(plants.length - 1));
                    return;
                }
                var positions = [[0, 0],
                                                 [170, 500], [170, 370], [170, 240], [170, 110],
                                                 [320, 110], [320, 240], [320, 370], [320, 500],
                                                 [470, 500], [470, 370], [470, 240], [470, 110],
                                                 [620, 110], [620, 240], [620, 370], [620, 500]
                                                 ];
                var plant_array = plants.split(',');
                var plant_type = $(this).parent().parent().parent().find('.plant_type');
                //console.log('type: ' + plant_type.val());
                $.each(plant_array, function( index, value ) {
                    if($('#plant_'+value).data('type') != plant_type.val()) {
                        $('img').remove('img[id=plant_'+value+']');
                    }

                    if(value != '' && $('#plant_'+value).length == 0) {
                        switch(parseInt(plant_type.val())) {
                            case 0:
                                $('.crosshair').append('<img class="plants" data-id="'+value+'" data-type="0" id="plant_'+value+'" name="plant" src="./assets/images/spinach-512.png" style="left: '+positions[value][0]+'px; top: '+positions[value][1]+'px;">');
                                break;

                            case 1:
                                $('.crosshair').append('<img class="plants" data-id="'+value+'" data-type="1" id="plant_'+value+'" name="plant" src="./assets/images/cabbage.png" style="left: '+(positions[value][0]-5)+'px; top: '+(positions[value][1]-5)+'px;">');
                                break;

                            case 2:
                                $('.crosshair').append('<img class="plants" data-id="'+value+'" data-type="2" id="plant_'+value+'" name="plant" src="./assets/images/redoak.png" style="left: '+(positions[value][0]-5)+'px; top: '+(positions[value][1]-5)+'px;">');
                                break;
                        }
                    }
                });
            });
            //console.log(plant_array);
            var plant_arr_global = $('.position').serializeArray();

            $('.plants').each(function(plant) {
                var current_id = $(this).data('id');
                var remove_permit = 0;
                //console.log('plant: ' + plant);
                $.each(plant_arr_global, function(key, value) {
                    //console.log('global_arr : ' + value.value);
                    var ArrayOfInts = value.value.split(',').map(Number);
                    //console.log(ArrayOfInts);
                    if(jQuery.inArray(current_id, ArrayOfInts) >= 0) {
                    //if(value.value.indexOf(current_id.toString()) >= 0) {
                        remove_permit += 1;
                        //console.log('found: ' + current_id + ' - ' + remove_permit);
                    }
                });

                if(remove_permit == 0) {
                    $('img').remove('#plant_'+current_id);
                }
                remove_permit = 0;
            });
        }
        $(document).on('keyup', '.position', function() {
        //$('.position').keyup(function() {
            plantVisual();
        });

        $('#demo-img').crosshair({
            callback: function(crosshair) {
                var pos_x = ((crosshair.coords.x-63)/1009)*800;
                var pos_y = ((crosshair.coords.y-63)/756)*600;
                pos_x = Math.min(Math.max(parseInt(pos_x), 0), 600);
                pos_y = Math.min(Math.max(parseInt(pos_y), 0), 600);
                pos_y = Math.min(Math.max(parseInt(500-pos_y), 0), 300);
                $('#status').html(pos_x+','+pos_y);
                console.log("Pixel coordinates: ("+(pos_x)+", "+(pos_y)+")");
                console.log("Relative position: X: "+crosshair.pct.x+"%, Y: "+crosshair.pct.y+"%");
                // 1008, 756
                //console.log(pos_x/10 + ', ' + pos_y/10);
                execute(pos_x/10, pos_y/10);
            }
        });

        $('img[name=plant]').css({'left': '126.201px', 'top': '91.9792px'});

        $('#add_plant').click(function(e) {
            console.log('adding...');
            var divNomeMail = $('.plant-row');
            var sDivNomeMailHtml = divNomeMail.html();
            var sInputGroupClasses = divNomeMail.attr('class');

            console.log(divNomeMail.next().length);

            //Gambiarra pra nao ficar criando mil inputs
            //if(divNomeMail.next().length >= 1) return;

            divNomeMail.parent().append('<div class="plant-row"><div class="form-group"><label class="control-label col-lg-3">Plant :</label><div class="col-lg-9"><select aria-hidden="true" class="select form-control plant_type" name="plant[]" id="plant[]" tabindex="-1"><option value=0> Kale</option><option value=1> Napa cabbage</option><option value=2> Red Oak Lettuce</option></select></div></div><div class="form-group"><label class="control-label col-lg-3">Position:</label><div class="col-lg-9"><input class="form-control position" id="position[]" name="position[]" type="text"/></div></div><hr/></div>');
            $('select').select2();
        });

        $('#execute').click(function(e) {
            //- var position = $('#position').val();
            var positions = [];
            var plants = $('select[name="plant[]"] option:selected');

            $('input[name="position[]"]').each(function(key, value) {
                var aValue = $(this).val();
                positions[key] = [plants[key]['value'], aValue];
            });
            console.log(JSON.stringify(positions));
            console.log('--------------------');
            //- return;
            //- if(number > 18) {
            //-     swal({
            //-         title: 'Warning',
            //-         text: number + ' is exceed number limit (18) ?',
            //-         type: 'error',
            //-         showConfirmButton: true,
            //-         timer: 3000
            //-     })
            //-     return;
            //- }
            swal({
                title: 'Warning',
                text: 'Execute tree(s) ?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                //confirmButtonText: 'Yes, execute it!'
            }).then((result) => {
                if (result.value) {
                    $.ajax({
                        url: '/api/execute/plants',
                        method: 'post',
                        dataType: "json",
                        data: {positions: JSON.stringify(positions)}
                    }).done(function(res) {
                        console.log('res: '+res.msg);
                    });
                    /*
                    swal(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                    */
                }
            })
        });

        function plant_execute() {
            console.log('plainting ...');
        }

        $(document).on("keypress", "form", function(event) {
            if(event.keyCode === 13) {
                $('#execute').click();
            }
            return event.keyCode != 13;
        });

        function execute(pos_x, pos_y) {
            console.log(pos_x+', '+pos_y);
            $.ajax({
                url: '/api/controls/coordinate',
                method: 'post',
                data: {pos_x: pos_x, pos_y: pos_y},
            }).done(function(res) {
                console.log(res.msg);
            });
        }