{% extends '@Core/base-app.html.twig' %}
{% block sidebar %}

{% endblock %}

{% block sectionTitle %}Asistente de ventas{% endblock %}
{% block sectionActions %}
{% endblock %}
{% block breadcrumbLinks %}
{% endblock %}
{% block content %}


    <style>
        .breadcrumb-line{
            display: none;
        }
        .page-header{
            display: none;
        }
        .panel-body {
            padding-left: 10px;
            padding-right: 10px;
            padding-top: 10px;
        }
        .col-md-12{
            padding-left: 5px;
            padding-right: 5px;
        }
        .nav>li {
            display: inline-block;
            font-size: 12px;
        }
        .active{
            border-bottom: 1px grey solid;
        }
        .size_assistant{
            display: inline-block;
            text-align: center;
            border: 1px lightgray solid;
            padding: 5px;
            margin: 2px;
        }
    </style>

    <div class="panel-body">

        <div class="panel panel-flat">

            <!-- HEADER -->
            <div class="panel-heading" style="padding: 10px !important;">
                <h6 class="panel-title" style="margin-bottom: 0px;font-size: 12px; padding-bottom: 5px;">ASISTENTE DE VENTAS</h6>
            </div>

            <!-- BODY -->
            <div class="">


                <!-- BODY -->
                <div class="">

                    <div class="col-md-12" id="bodySalesAssistantDialog">


                        <div style="margin-left: -5px;margin-right: -5px;">


                            <div class="col-xs-6" style="padding-right: 5px;">
                                <!-- data range price -->
                                <div class="input-group form-group" style="margin-bottom: 10px;">
                                    <span class="input-group-addon bg-indigo"><i class="icon-coin-euro"></i></span>
                                    <input class="form-control" id="price-range-sales-assistant" type="text" placeholder="Precio"/>
                                </div>
                                <!-- typesizes available inside serie -->
                                <div class="input-group form-group">
                                    <span class="input-group-addon bg-teal"><i class="icon-table"></i></span>
                                    <select class="form-control" id="type-size-sales-assistant">
                                        <option value="">Tallas</option>
                                    </select>
                                </div>
                            </div>

                            <!-- barcode scan -->
                            <div class="col-xs-6" style="padding-left: 5px;">
                                <div class="input-group form-group">
                                    <span class="input-group-addon bg-pink"><i class="icon-search4"></i></span>
                                    <input class="form-control scan_enter" id="code-scan-sales-assistant" type="text" placeholder="Escanear Etiqueta" tabindex="0" autofocus/>
                                </div>
                            </div>

                            <div class="col-xs-12">

                                <button type="button" class="btn-rounded btn btn-flat border-color3 text-color3" onclick="reloadSalesAssistantDialog()" id="reload_sale_assistant_btn" style="float: left">
                                    <i class="glyphicon glyphicon-refresh"></i>
                                    Reiniciar
                                </button>

                                <button type="button" class="btn-rounded btn btn-flat border-color3 btn-rounded bg-color3" onclick="scanBarCodeSalesAssistant(true)" id="" style="float: right;border: 5px solid green;">
                                    <i class="glyphicon glyphicon-search"></i>
                                    Buscar
                                </button>

                            </div>

                        </div>

                        <!-- article header -->
                        <div class="col-xs-12 col-md-5" id="salesAssistantArticleHeader">
                        </div>

                        <!-- article header prices-->
                        <div class="col-xs-12" style="margin-bottom: 10px;margin-top: 10px;">
                            <hr>
                        </div>

                        <div class="col-xs-12 col-md-5" id="salesAssistantArticleHeaderPrices" style="margin-left: -10px;">
                        </div>

                        <div class="col-xs-12" style="margin-bottom: 10px;margin-top: 10px;">
                            <hr>
                        </div>


                        <!-- TABS -->
                        <div class="col-xs-12">
                            <ul class="nav">
                                <li class="nav-item active"><a href="#salesAssistantTabDistro" id="distroTAB" data-toggle="tab">Distribución</a></li>
                                <li class="nav-item"><a href="#salesAssistantTabModel" data-toggle="tab">Modelo</a></li>
                                <li class="nav-item"><a href="#salesAssistantTabBrand" data-toggle="tab">Marca</a></li>
                                <li class="nav-item"><a href="#salesAssistantTabColor" data-toggle="tab">Color / Categoría</a></li>
                            </ul>

                            <!-- TABS -->
                            <div class="tab-content">
                                <!-- DISTRO -->
                                <div class="tab-pane active" id="salesAssistantTabDistro">
                                    <div class="row" id="salesAssistantTabDistroBody" style="margin-top: 10px">

                                    </div>
                                </div>
                                <!-- MODEL -->
                                <div class="tab-pane" id="salesAssistantTabModel">
                                    <div class="row" id="salesAssistantTabModelBody" style="margin-top: 10px">

                                    </div>
                                </div>
                                <!-- BRAND -->
                                <div class="tab-pane" id="salesAssistantTabBrand">
                                    <div class="row" id="salesAssistantTabBrandBody" style="margin-top: 10px">

                                    </div>
                                </div>
                                <!-- COLOR -->
                                <div class="tab-pane" id="salesAssistantTabColor">
                                    <div class="row" id="salesAssistantTabColorBody" style="margin-top: 10px">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- BODY -->

                <!-- FOOTER -->
                <div class="panel-footer" style="">

                </div>
                <!-- FOOTER -->


            </div>

        </div>

    </div>

    <script>

        $(document).ready(function(){

            setTimeout(function () {
                //FOCUS SCAN BAR
                $("#code-scan-sales-assistant").focus();
            }, 500);

        });

        //SHOW DIALOG FOR TRANSFER
        function createWorkingOrder(shopOutId, shopInId, articleId, typeSizeId, shopOut, shopIn , typeSize, max){

            console.log('createWorkingOrder');

            //ASSIGN VARIABLES
            if (shopOutId != "*"){
                $("#saleAssistantWorkingOrder_shopOutId").val(shopOutId);
                $("#saleAssistantWorkingOrder_shopOut").html(shopOut);
            }else{
                $("#saleAssistantWorkingOrder_shopOutId").val("");
                $("#saleAssistantWorkingOrder_shopOut").html("");
            }

            $("#saleAssistantWorkingOrder_shopInId").val(shopInId);
            $("#saleAssistantWorkingOrder_articleId").val(articleId);
            $("#saleAssistantWorkingOrder_typeSizeId").val(typeSizeId);


            $("#saleAssistantWorkingOrder_shopIn").html(shopIn);
            $("#saleAssistantWorkingOrder_typeSize").html(typeSize);

            $("#saleAssistantWorkingOrder_qty").val("1");
            $("#saleAssistantWorkingOrder_qty").attr({"max" : max});

            //OPEN DIALOG
            $('#salesAssistantWorkingOrderDialog').modal('show');
        }

        //CLEAN DIALOG SALES ASSISTANT
        function reloadSalesAssistantDialog(){
            $("#salesAssistantArticleHeader").html("");
            $("#salesAssistantArticleHeaderPrices").html("");
            $("#price-range-sales-assistant").val("");
            $("#code-scan-sales-assistant").val("");
            $('#salesAssistantTabDistroBody').html("");
            $('#salesAssistantTabModelBody').html("");
            $('#salesAssistantTabBrandBody').html("");
            $('#salesAssistantTabColorBody').html("");

            //FOCUS SCAN BAR
            $("#code-scan-sales-assistant").focus();

            $('#type-size-sales-assistant').html('');
        }

        function cleanSalesAssistantDialog(){
            $("#salesAssistantArticleHeader").html("");
            $("#salesAssistantArticleHeaderPrices").html("");
            $("#price-range-sales-assistant").val("");
            $('#salesAssistantTabDistroBody').html("");
            $('#salesAssistantTabModelBody').html("");
            $('#salesAssistantTabBrandBody').html("");
            $('#salesAssistantTabColorBody').html("");

            //FOCUS SCAN BAR
            $("#code-scan-sales-assistant").focus();

            // FIRST TAB
            document.getElementById('distroTAB').click();
        }

        //SCANBAR CODE
        $('form input').keydown(function (e) {

            if (e.keyCode == 13) {
                scanBarCodeSalesAssistant(true);
                return false;
            }
        });

        $("#code-scan-sales-assistant").change(function() {
            var valor = $("#code-scan-sales-assistant").val();
            if (valor) {
                scanBarCodeSalesAssistant(true);
            }
        });

        function loadArticleIntoSaleAssistant(code){
            $("#code-scan-sales-assistant").val(code);
            cleanSalesAssistantDialog();
            scanBarCodeSalesAssistant(true);
        }

        function scanBarCodeSalesAssistant(count_visit){

            //REPLACE WRONG CHARS
            //REPLACE WRONG CHARS
            var scanCode = $("#code-scan-sales-assistant").val();
            scanCode=replaceWrongCharsOnScanbar(scanCode);
            $("#code-scan-sales-assistant").val(scanCode);

            if ($("#code-scan-sales-assistant").val() === ""){
                return ;
            }

            //alias
            var alias = { 'alias' : $("#code-scan-sales-assistant").val() };

            $('#salesAssistantArticleHeader').html('<i class="icon-spinner spinner position-left" style="display: inline-block; width: 100%; margin: 15px"></i>');
            $('#salesAssistantArticleHeaderPrices').html('<i class="icon-spinner spinner position-left" style="display: inline-block; width: 100%; margin: 15px"></i>');

            $.ajax({
                type: "POST",
                url: " {{path('ajax_barcode_scan_search_sales_assistant')}}",
                data: {alias: alias},
                success: function(result) {
                    plotTypeSizes(result["typeSizes"]);
                    if(result['type'] === 'stock') {
                        postArticleToSalesAssistant(result['articleId'], count_visit)
                    } else if(result['type'] === 'article') {
                        postArticleToSalesAssistant(result['articleId'], count_visit)
                    } else if(result['type'] === 'sort_number') {
                        postArticleToSalesAssistant(result['articleId'], count_visit)
                    }
                },
                error: function(err) {
                    new PNotify({
                        text: err.responseJSON,
                        type: "error"
                    });
                }
            });
        }

        function plotTypeSizes(typeSizes){
            var typeSizeSaleAssistant = $("#type-size-sales-assistant").val();
            $('#type-size-sales-assistant').html('');
            $('#type-size-sales-assistant').append('<option value=""></option>');
            $.each(typeSizes, function(k, v) {
                $('#type-size-sales-assistant').append('<option value="' + v["id"] + '">' + v["name"] + '</option>');
            });
            $("#type-size-sales-assistant").val(typeSizeSaleAssistant);
        }

        //ADD ARTICLE TO SALES ASSISTANT
        function postArticleToSalesAssistant(articleId,count_visit){
            //price data range set with an initial high value
            var priceDataRange = { 'priceDataRange' : 99999 };

            if($("#price-range-sales-assistant").val().length > 0) {
                priceDataRange = { 'priceDataRange' : $("#price-range-sales-assistant").val() };
            }

            var typeSizeSaleAssistant = $("#type-size-sales-assistant").val();

            $.ajax({
                type: "POST",
                url: " {{path('ajax_load_sales_assistant_info_app')}}",
                data: {articleId: articleId, priceDataRange: priceDataRange, typeSizeSaleAssistant: typeSizeSaleAssistant, count_visit: count_visit},
                success: function(result) {

                    //FILL HTML DIVS

                    //HEADER
                    $('#salesAssistantArticleHeader').html(result["header"]);
                    $('#salesAssistantArticleWorkingOrderHeader').html(result["header"]); //HEADER FOR WORKING ORDER

                    //HEADER PRICES
                    $('#salesAssistantArticleHeaderPrices').html(result["headerPrices"]);

                    //DISTRO
                    $('#salesAssistantTabDistroBody').html(result["distro"]);

                    //MODEL
                    $('#salesAssistantTabModelBody').html(result["model"]);

                    //BRAND
                    $('#salesAssistantTabBrandBody').html(result["brand"]);

                    //COLOR
                    $('#salesAssistantTabColorBody').html(result["color"]);

                    // FIRST TAB
                    document.getElementById('distroTAB').click();

                },
                error: function(err) {
                    new PNotify({
                        text: err.responseJSON,
                        type: "error"
                    });
                    reloadSalesAssistantDialog();
                }
            });
        }


        //ASSIGN CUSTOMER TO SALE FROM ASSISTANT
        $('#customer_assistant').typeahead({
            highlight: true,
            minLength: 3
        },{
            name: 'articles',
            display: function(value) {
                return value.name
            },
            source: function (query,sync, async) {

                $.get(Routing.generate('_ajax_search_customer', {'text': query}), function (data) {
                    async(data);
                })
            }
        }).bind("typeahead:select",function(e,data){

            //CUSTOMER ASSISTANT
            $("#customer_assistant").typeahead('val',data.name);
            $("#customer_assistant").attr('disabled',true);
            $("#customer_assistant_name").html(data.justName);
            $("#customer_assistant_type").html(data.type);

            //CUSTOMER SALE
            $("#customer_sale").typeahead('val',data.name);
            $("#customer_sale").attr('disabled',true);
            $("#customer_sale_name").html(data.justName);
            $("#customer_sale_type").html(data.type);

            $("#customer_sale_delete_customer").removeClass("hidden");
            $("#customer_sale_delete_customer_id").html(data.id);


            {% if sale is defined %}
            var route = Routing.generate('_ajax_assign_customer_2_sale',{'customerId':data.id, 'saleId': '{{ sale.id }}' });
            $.get(route, function(response){
                new PNotify({
                    title: 'Perfecto',
                    text: "Cliente asignado a la venta.",
                    type: "success"
                });
            });
            {% endif %}

            return false;
        }).bind("typeahead:autocomplete",function(e,data){
            if(e.keyCode === 9) return false;
        });

        //REQUEST STOCK QUESTION
        function requestStockFromSaleAssistantQuestion(isGlobal){

            var customerId= $("#customer_sale_delete_customer_id").html();
            var shopOutId=$("#saleAssistantWorkingOrder_shopOutId").val();

            //isGlobal -> flag to detect if we need a customer or not to request a transfer
            console.log("-"+isGlobal+"-");
            console.log("-"+customerId+"-");

            //CHECKING RESERVATIONS PENDING
            {% if isPossibleUseRequestSaleAssistantPending == false and isPossibleUseRequestSaleAssistantRegular == false %}
            new PNotify({
                text: "No es posible hacer una solicitud de reserva de este artículo.",
                type: "error"
            });

            return ;
            {% endif %}

            //CHECKING RESERVATIONS REGULAR
            {% if isPossibleUseRequestSaleAssistantPending == false %}
            if (shopOutId == ""){
                new PNotify({
                    text: "No es posible hacer una solicitud de reserva de un artículo pendiente de recepción en la venta actual.",
                    type: "error"
                });

                return ;
            }
            {% endif %}



            if (typeof isGlobal === "undefined"){

                //AVOID EMPTY CUSTOMER
                if (typeof customerId === "undefined" || customerId == ""){
                    new PNotify({
                        text: "Cliente no asignado. Para realizar una solicitud de stock debe tener un cliente asignado a la venta.",
                        type: "error"
                    });

                    return ;
                }
            }else{
                //AVOID SHOP OUT EMPTY AND CUSTOMERID NOT ASSIGNED
                if (shopOutId == "" && (typeof customerId === "undefined" || customerId == "") ){
                    new PNotify({
                        text: "No puede hacer una solicitud pendiente de recepción sin cliente asociado.",
                        type: "error"
                    });

                    return ;
                }
            }

            //CHECK AVAILABLES
            if ($('#saleAssistantWorkingOrder_qty').attr('max') < $('#saleAssistantWorkingOrder_qty').val() ){

                new PNotify({
                    text: "Está solicitando un número de unidades de este artículo mayor al disponible actualmente.",
                    type: "error"
                });

            }else{

                //CLOSE DIALOG
                $('#salesAssistantWorkingOrderDialog').modal('toggle');

                //DIALOG SWAL
                var sw = swal({
                        title: "Solicitar stock",
                        text: '¿Desea solicitar un stock de este artículo para esta tienda?',
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#EF5350",
                        confirmButtonText: "Si",
                        cancelButtonText: "No",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    },
                    function(isConfirm){
                        if (isConfirm) {
                            requestStockFromSaleAssistant();
                        }
                    }
                );
            }
        }

        //REQUEST STOCK PROCESS
        function requestStockFromSaleAssistant(){

            var shopInId=$("#saleAssistantWorkingOrder_shopInId").val();
            var shopOutId=$("#saleAssistantWorkingOrder_shopOutId").val();
            var articleId=$("#saleAssistantWorkingOrder_articleId").val();
            var typeSizeId=$("#saleAssistantWorkingOrder_typeSizeId").val();
            var quantity=$("#saleAssistantWorkingOrder_qty").val();
            var notes=$("#saleAssistantWorkingOrder_notes").val();

            var customerId= $("#customer_sale_delete_customer_id").html();

            //AVOID WORKING ORDER SAME SHOP
            if (shopInId == shopOutId){
                new PNotify({
                    text: "Es imposible solicitar un stock en la misma tienda de entrada y salida.",
                    type: "error"
                });

                return ;
            }

            var saleId = "";
            {% if sale is defined %}
            var saleId = '{{ sale.id }}';
            {% endif %}


            var route = Routing.generate('_ajax_create_stock_optimization_from_sale_assistant',{'shopOutId':shopOutId, 'shopInId':shopInId, 'articleId':articleId, 'typeSizeId':typeSizeId, 'quantity':quantity, 'customerId':customerId, 'saleId': saleId, 'notes':notes });
            $.get(route, function(response){

                {% if sale is defined %}
                window.location.href = Routing.generate("sales_edit", { "id" : '{{ sale.id }}' });
                {% else %}
                window.location.reload()
                {% endif %}

                new PNotify({
                    title: 'Perfecto',
                    text: "Se ha solicitado el stock.",
                    type: "success"
                });
            }).fail(function(xhr, status, error){
                console.log(xhr.responseText);

                new PNotify({
                    title: 'Error',
                    text: "Se ha producido un error solicitado el stock. Vuelva a intentarlo.",
                    type: "error"
                });
            });


        }


    </script>



    <!-- DIALOG ASSISTANT WORKING ORDER -->
    <div class="modal fade" id="salesAssistantWorkingOrderDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">

                <!-- HEADER -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Solicitar stock</h4>
                    <div id="type-method-open" data-open="0"></div>
                </div>
                <!-- HEADER -->

                <!-- BODY -->
                <div class="modal-body">

                    <div class="col-md-12" id="bodySalesAssistantWorkingOrderDialog">

                        <!-- ARTICLE HEADER -->
                        <div class="col-md-9 mb-20" id="salesAssistantArticleWorkingOrderHeader">
                        </div>

                        <div class="col-md-12 mb-20">
                            <hr>
                        </div>

                        <!-- FORM -->
                        <div class="row mt-20">

                            <!-- SHOPS, TYPE SIZES AND QTY -->
                            <div class="col-md-8">

                                <div class="col-md-6">

                                    <div class="form-group" id="">
                                        <strong>Tienda de salida</strong><br>
                                        <input class="form-control input-circle typeahead hidden" id="saleAssistantWorkingOrder_shopOutId">
                                        </input>
                                        <span id="saleAssistantWorkingOrder_shopOut"></span>
                                    </div>

                                </div>

                                <div class="col-md-6">

                                    <div class="form-group" id="">
                                        <strong>Tienda de entrada</strong><br>
                                        <input class="form-control input-circle typeahead hidden" id="saleAssistantWorkingOrder_shopInId">
                                        </input>
                                        <span id="saleAssistantWorkingOrder_shopIn"></span>
                                    </div>

                                </div>

                                <div class="col-md-6">

                                    <div class="form-group" id="">
                                        <strong>Talla</strong><br>
                                        <input class="form-control input-circle typeahead hidden" id="saleAssistantWorkingOrder_typeSizeId">
                                        </input>
                                        <span id="saleAssistantWorkingOrder_typeSize"></span>
                                    </div>

                                    <input class="form-control input-circle typeahead hidden" id="saleAssistantWorkingOrder_articleId">
                                    </input>

                                </div>

                                <div class="col-md-6">

                                    <div class="form-group" id="">
                                        <strong>Unidades</strong><br>
                                        <input class="form-control input-circle typeahead" id="saleAssistantWorkingOrder_qty" type="number" name="quantity" min="1" max="5" style="width: 80px;">
                                        </input>
                                    </div>

                                </div>

                            </div>

                            <!-- NOTES -->
                            <div class="col-md-12">
                                <div class="form-group" id="">
                                    <strong>Obsevaciones</strong><br>
                                    <textarea class="form-control" id="saleAssistantWorkingOrder_notes" placeholder="Escriba aquí las observaciones de la solicitud" rows="5"></textarea>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <!-- BODY -->

                <!-- FOOTER -->
                <div class="modal-footer" style="margin-top: 20px;">

                    <div class="col-md-12">
                        &nbsp;
                    </div>
                    <button type="button" class="btn-rounded btn btn-flat border-color3 text-color3" data-dismiss="modal">
                        <i class="glyphicon glyphicon-remove"></i>
                        Cerrar
                    </button>

                    <button  type="button" id="btnStockOptimization" class="btn-rounded btn bg-pink-300 float-right" style="" value="Solicitar stock" onclick="requestStockFromSaleAssistantQuestion(false)">
                        <i class="icon-paperplane ml-2"></i>
                        Solicitar stock
                    </button>

                </div>
                <!-- FOOTER -->

            </div>
        </div>
    </div>

{% endblock%}