{% extends 'base.html.twig' %}

 {% block stylesheets %}
     <style type="text/css">
         canvas.drawingBuffer{
             max-width: 100%;
             width: 100%;
         }
     </style>
 {% endblock %}

{% block body %}
    {{ include('partials/form.html.twig', {'movements' : []}) }}
{% endblock %}


{% block javascripts %}

    {% verbatim %}
    <script id="js-stock-mouvement-template" type="text/x-handlebars-template">

        <tr id="{{id}}" class="{{warning}}">
            <td class="align-middle">
                <span class="label js-spinner">
                    <span class="spinner-border spinner-border-sm text-success" role="status"></span>
                </span>
                <br>
                <em class="text-muted text-i">{{product.barcode}}</em>
                <input type="hidden" name="barcode[]"  value="{{product.barcode}}" />
            </td>
            <td class="align-middle">
                {{ qty }}
                <input type="hidden" name="qty[]" value="{{ qty }}" />
            </td>

            <!-- Warehouse -->
            <td class="align-middle">
                <select name="warehouses[]" class="form-control">
                    {% endverbatim %}
                        {% for warehouse in warehouses %}
                            <option value="{{ warehouse.id }}">{{ warehouse.label }}</option>
                        {% endfor %}
                    {% verbatim %}
                </select>
            </td>

            <!-- Serial -->
            <td class="align-middle js-serial">
                <input type="text" class="d-none" name="serial[]" required/>
            </td>

            <!-- serial & increase = DLC-->
            {{#if increase}}
            <td class="align-middle js-serial">
                <input type="date" class="d-none" name="dlc[]" required/>
            </td>
            {{else}}
                <td><input type="hidden" name="dlc[]" value=""/></td>
            {{/if}}

            <td class="align-middle">
                <button type="button" class="btn btn-outline-danger btn-sm js-remove-row" data-remove="{{id}}">X</button>
            </td>
        </tr>
    </script>
    {% endverbatim %}

    <script type="application/javascript">
        (function($, Handlebars){
            var StockMouvement = function(codeBarre, qty, operation, id){
                this.codeBarre = codeBarre;
                this.operation = operation;
                this.qty = qty;
                this.id = id;
            };

            StockMouvement.prototype.getCodeBarre = function(){
                return this.codeBarre;
            };

            StockMouvement.prototype.getQuantity = function(){
                var qty = parseInt(this.qty, 10);

                if(this.isDecrease()){
                    return qty * -1;
                }

                return qty;
            };

            StockMouvement.prototype.isIncrease = function(){
                return this.operation === '+';
            };

            StockMouvement.prototype.isDecrease = function(){
                return this.operation === '-';
            };

            StockMouvement.prototype.getId = function(){
                return this.id;
            };

            var UUId = function(){
                var dt = new Date().getTime();
                var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = (dt + Math.random()*16)%16 | 0;
                    dt = Math.floor(dt/16);
                    return (c=='x' ? r :(r&0x3|0x8)).toString(16);
                });

                this.id = uuid;
            };

            UUId.prototype.getValue = function(){
                return this.id;
            };


            function addEntry(obj){
                var result = compile(obj);
                $("#selected_products").append(result);
            }

            function clearFields(){
                $('#qty').val('');
                $('#product').val('');
            }

            function compile(obj){
                var template = Handlebars.compile($("#js-stock-mouvement-template").html());

                return template({
                    'product' : {
                        'barcode' : obj.getCodeBarre()
                    },
                    'qty' : obj.getQuantity(),
                    'id' : obj.getId(),
                    'warning' : obj.getQuantity() === 0 ? 'table-warning' : '',
                    'increase' : obj.isIncrease()
                })
            }

            function selectProduct(barcode, id){
                getProduct(barcode, id);
            }

            function getProduct(barcode, id){
                var url = $("#selected_products").data('url');

                var q = $.ajax({
                    method: "GET",
                    url: url.replace('hello', barcode)
                });

                q.done(function(product){
                    $("#"+id+" .label").html(product.label);

                    if(product.serialSupport){
                        $("#"+id+" .js-serial .d-none").removeClass('d-none');
                    }else{
                        $("#"+id+" .js-serial .d-none").removeAttr('required');
                    }

                });

                q.fail(function(){
                    $("#"+id).addClass('table-danger');
                    $("#"+id+" input").remove();
                    $("#"+id+" .label.js-spinner").remove();
                });
            }

            function mouvement(direction){
                var barcode = $('input[name="product"]').val();
                var qty = $('input[name="qty"]').val();
                var id = new UUId();

                addEntry(new StockMouvement(barcode, qty, direction, id.getValue()));

                clearFields();

                selectProduct(barcode, id.getValue());
            }

            //Listeners

            $('.js-button-increment-stock').on('click', function(){
                mouvement('+')
            });

            $('.js-button-decrease-stock').on('click', function(){
                mouvement('-')
            });

            $(document).on('click', 'button.js-remove-row', function(){
                var id = $(this).data('remove');
                $('#'+id).remove();
            });

        })(jQuery, Handlebars);
    </script>

    <script type="application/javascript">
        (function($, Quagga){

            function close(){
                Quagga.stop();
                $('#scanner-zone').html('');
            }

            function open(){
                $('#modal').modal('show');
            }

            var scanner = function(){
                Quagga.init({
                    inputStream : {
                        name : "Live",
                        type : "LiveStream",
                        target: document.querySelector('#scanner-zone')
                    },
                    decoder : {
                        readers : [
                            "{{ barcode_type }}",
                        ]
                    }
                }, function(err) {
                    if (err) {
                        console.log(err);
                        return
                    }

                    Quagga.start();
                    open();
                });


                Quagga.onDetected(function(data){
                    $('#product').val(data.codeResult.code);
                    close();
                    $('#modal').modal('hide');
                });
            };

            $('#scanner').on('click', scanner);
            $('#modal').on('hidden.bs.modal', close);
        })(jQuery, Quagga);
    </script>

{% endblock %}