{% extends '@Core/base.html.twig' %}
{% block sectionTitle %}Orden de trabajo{% endblock %}
{% block sectionActions %}

{% endblock %}
{% block breadcrumbLinks %}
    {% if roleRight == true %}
        <li><a href="{{ path("optimization_stock_list") }}">Órdenes de trabajo</a></li>
    {% endif %}
{% endblock %}

{% block content %}

    <div class="content">

        <div class="panel panel-flat">
            <div class="panel-body">

                <div class="row">

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

                        <div class="">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="">
                                        <h6 class="panel-title-no-sub">
                                            COD-Orden: <strong>{{ optimization.getAlias }}</strong>
                                        </h6>
                                    </div>

                                    <div class="">
                                        <h6 class="panel-title-no-sub">
                                            Unidades a incluir: <strong>{{ movements }}</strong>
                                        </h6>
                                    </div>

                                    <div class=" ">
                                        <span class="label {{ optimization.typeWorkingOrder.background }}">{{ optimization.typeWorkingOrder.description }}</span>
                                        &nbsp;
                                        {% if optimization.isClosed %}
                                            <span class="label bg-danger-600">Cerrada</span>
                                        {% else %}
                                            <span class="label bg-success-600">Abierta</span>
                                        {% endif %}
                                    </div>

                                    <div class=" ">
                                        {% if optimization.isActual %}
                                            <span class="label border-left-info label-striped">ACTUAL</span>
                                        {% endif %}
                                    </div>

                                    <div class=" ">
                                        {% if optimization.reception is not null %}
                                            <a type="button" class="text-color3 btn btn-flat text-color3 border-color3 btn-rounded" href="{{ path('reception_edit',{'id':optimization.reception.getId}) }}"> <i class=" icon-arrow-right5"></i> Ir a la recepción: {{ optimization.reception.alias }}</a>
                                        {% endif %}
                                    </div>

                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <div class=" ">Fecha creación</div>
                                        <div class=" "><strong>{{ optimization.dateCreation | date('d-m-Y \\a \\l\\a\\s H:i:s') }}</strong></div>
                                    </div>

                                    <div class="form-group">
                                        <div class=" ">Fecha realización
                                        </div>
                                        <div class=" "><strong>{%  if optimization.dateDone  %}{{ optimization.dateDone | date('d-m-Y \\a \\l\\a\\s H:i:s') }}{% else %} &nbsp;{% endif %}</strong>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- BUTTONS -->
                    <div class="col-md-6 col-xs-12" style="margin-top: 20px">
                        <div class="text-right">

                            <div class="col-xs-4" style="margin-bottom: 10px;float: right;">
                                <a class="col-xs-6 text-white btn bg-pink-300 btn-block btn-float" type="button" id="" href="#" onclick="showDialogTypePrinter()">
                                    <h1><i class="icon-printer button_label_cc_icon"></i></h1><div class="button_label_cc_text">IMPRIMIR<br> ORDEN DE TRABAJO</div>
                                </a>
                            </div>

                            {% if not optimization.didItGenerateTransfers %}

                                <div class="col-xs-4" style="margin-bottom: 10px;float: right;">
                                    <a class="col-xs-6 text-white btn bg-green-300 btn-block btn-float" type="button" id="" href="#" onclick="createTransfers()">
                                        <h1><i class="icon-share button_label_cc_icon"></i></h1><div class="button_label_cc_text">GENERAR<br> TRASPASOS</div>
                                    </a>
                                </div>

                            {% endif %}

                            {% if not optimization.isClosed %}
                                <div class="col-xs-4" style="margin-bottom: 10px;float: right;">
                                    <a class="col-xs-6 text-white btn bg-red btn-block btn-float" type="button" id="" href="#" onclick="closeOptimization()">
                                        <h1><i class="icon-cancel-circle2 button_label_cc_icon"></i></h1><div class="button_label_cc_text">CERRAR<br> ORDEN</div>
                                    </a>
                                </div>
                            {% endif %}


                        </div>
                    </div>

                </div>




            </div>



        </div>

        {% if app.session.flashBag.has('success') %}
            <div class="alert alert-success">
                {% for msg in app.session.flashBag.get('success') %}
                    {{ msg }}
                {% endfor %}
            </div>
        {% endif %}

        <div class="panel panel-flat">
            <div class="panel-body">

                        <div class="tabbable">
                            <ul class="nav nav-tabs nav-tabs-bottom nav-justified">
                                <li class=" {% if optimization.transfer | length == 0 %}active{% endif %}"><a href="#movementsTab" data-toggle="tab">Mercancía para mover</a></li>
                                <li class=" {% if optimization.transfer | length >  0 %}active{% endif %}"><a href="#transfersTab" data-toggle="tab">Traspasos asociados a la orden</a></li>
                            </ul>
                            <div class="tab-content">

                                <!-- MOVEMENTS TABLE -->
                                <div class="tab-pane {% if optimization.transfer | length == 0 %}active{% endif %}" id="movementsTab">
                                    <!-- SEARCHER -->
                                    <div id="ware_to_move_searcher">
                                        {% form_theme searchForm 'bootstrap_3_layout.html.twig' %}
                                        <div class="panel panel-white">
                                            <div class="panel-heading collapsed" data-toggle="collapse" href="#searcher">
                                                <h6 class="text-color3">
                                                    <h6 style="cursor: pointer">BUSCADOR DE ORDENES DE TRABAJO <i class="icon-arrow-down15"></i></h6>
                                                    <div id="criteriaSearchStockOptimization">

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

                                            <div id="searcher" class="panel-collapse collapse">
                                                {{ form_start(searchForm) }}
                                                <div class="panel-body">
                                                    <div class="row">
                                                        <div class="col-xs-4">
                                                            {{ form_row(searchForm.article) }}
                                                            {{ form_row(searchForm.season) }}
                                                            {{ form_row(searchForm.section) }}
                                                            {% if group.groupConfiguration.showAutoincrementNumberForArticle %}
                                                                {{ form_row(searchForm.autoIncrement) }}
                                                            {% endif %}
                                                        </div>

                                                        <div class="col-xs-4">
                                                            {{ form_row(searchForm.shopOut) }}
                                                            {{ form_row(searchForm.shopIn) }}
                                                            {% if group.groupConfiguration.useLocatorAlias %}
                                                                {{ form_row(searchForm.locatorAlias) }}
                                                            {% endif %}
                                                        </div>

                                                        <div class="col-xs-4">
                                                            {{ form_row(searchForm.dealer) }}
                                                            {{ form_row(searchForm.brand) }}
                                                            {% if group.groupConfiguration.useLocator %}
                                                                {{ form_row(searchForm.locator) }}
                                                            {% endif %}
                                                        </div>
                                                    </div>

                                                    <div class="text-right">
                                                        <a onclick="clearFilterSearch()" class="btn bg-color7 btn-rounded">Limpiar<i class="glyphicon glyphicon-remove position-right"></i></a>
                                                        <button type="submit" class="btn bg-color3 btn-rounded">Buscar<i class="icon-search4 position-right"></i></button>
                                                    </div>
                                                </div>
                                                {{ form_end(searchForm) }}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- /SEARCHER -->

                                    <!-- LIST -->
                                    <div id="movementsTabDiv">

                                    </div>
                                    <!-- /LIST -->
                                </div>

                                <!-- TABLE WITH TRANSFERS -->
                                <div class="tab-pane {% if optimization.transfer | length > 0 %}active{% endif %}" id="transfersTab">
                                    <table id="data-table-transfer" class="table datatable-basic  datatable-sorting" width="100%">

                                        <thead>
                                        <tr role="text-align: center">
                                            <th>COD-Traspaso</th>
                                            <th>Tipo traspaso</th>
                                            <th>Fecha Creación</th>
                                            <th>Fecha Salida</th>
                                            <th>Fecha Entrada</th>
                                            <th>Tienda Salida</th>
                                            <th>Tienda Entrada</th>
                                            <th>Creación</th>
                                            <th class="col-sm-1 text-center">Unidades a incluir</th>
                                            <th class="col-sm-1 text-center">Unidades ya incluidas</th>
                                            <th class="col-sm-1 text-center">Estado</th>
                                        </tr>

                                        </thead>

                                        <tbody>

                                        {% for key, value in arrayTransfers %}

                                            <tr>
                                                <td><a href="{{ path('transfer_edit',{'id':value['transfer'].id}) }}">{{ value['transfer'].getAlias }}</a></td>
                                                <td>{% if value['transfer'].typeTransfer %}{{ value['transfer'].typeTransfer.description }}{% endif %}</td>
                                                <td><span class='hide_dataTable_dates'>{{ value['transfer'].dateCreation | date('Ymd') }}</span>{{ value['transfer'].getDateCreation | date('d/m/Y H:i:s')}}</td>
                                                <td>{% if  value['transfer'].getDateOut %}{{ value['transfer'].getDateOut | date('d/m/Y H:i:s')}}{% endif %}</td>
                                                <td>{% if  value['transfer'].getDateIn %}{{ value['transfer'].getDateIn | date('d/m/Y H:i:s')}}{% endif %}</td>
                                                <td>{% if value['transfer'].getShopOut %}{{ value['transfer'].getShopOut.name }}{% endif %}</td>
                                                <td>{% if value['transfer'].getShopIn %}{{ value['transfer'].getShopIn.name }}{% endif %}</td>
                                                <td>
                                                    {% if value['transfer'].getTypeStockOptimizationTransfer %}
                                                        <span class="label {{ value['transfer'].getTypeStockOptimizationTransfer.color }}">
                                                            {{ value['transfer'].getTypeStockOptimizationTransfer.description }}
                                                        </span>
                                                    {% endif %}
                                                </td>
                                                <td class="text-center">
                                                    {{ value['qty'] }}
                                                </td>
                                                <td class="text-center">{{ value['transfer'].getTransferElement | length }}</td>
                                                <td class="text-center"><span class="label {{ status_transfer_stock_service.getStatusColor(value['transfer'].getTypeTransferStatus.id) }}">{{ value['transfer'].getTypeTransferStatus.description }}</span></td>

                                            </tr>

                                        {% endfor %}

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

            </div>

        </div>
    </div>

    <!-- Basic modal -->
    <div id="modal_type_printer" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content" style="text-align: center;">
                <div class="modal-header">
                    <h5 class="modal-title">Tipo de impresión</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <p>
                        ¿Qué tipo de formato desea imprimir para esta orden de trabajo?
                    </p>
                    <div style="margin-left: 45%; text-align: left !important;">
                        <div class="radio">
                            <label>
                                <input name="format_print_type" type="radio" id="A4_radio">
                                A4
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input name="format_print_type" type="radio" id="ticket_radio">
                                Ticket
                            </label>
                        </div>
                    </div>
                    <div hidden="true" id="div_group">
                        <p>
                            ¿Tipo de agrupación?
                        </p>
                        <div style="margin-left: 42%; text-align: left !important;" >
                            <div class="radio">
                                <label>
                                    <input name="format_print_group" type="radio" id="article_radio">
                                    Artículo
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input name="format_print_group" type="radio" id="article_size_radio">
                                    Artículo/Talla
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger rounded-round" data-dismiss="modal"><i class="icon-close2 position-left"></i>Cerrar</button>
                    <button class="btn-rounded btn bg-danger-300 valoration_buttons" onclick="printDocument(true)" disabled="true" id="no_valoration_button"><i class="icon-cash position-left"></i>Con valoración</button>
                    <button class="btn-rounded btn bg-danger-300 valoration_buttons" onclick="printDocument(false)" disabled="true" id="valoration_button"><i class="icon-cash2 position-left"></i>Sin valoración</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /Basic modal -->


{% endblock%}



{% block script %}

    <script src="{{ asset('assets/js/core.stockOptimizationElement.searchcriteria.js') }}"></script>

    <script>

        $(document).ready(function(){

            $('#data-table-transfer').DataTable().order([2, 'desc']).draw();

            var table = $('#article_list_table').DataTable().order([1, 'desc']).draw();

            {% if optimization.transfer | length == 0 %}
                fillMovementTab(null);
            {% else %}
                $('a[href="#transfersTab"]').trigger('click');
            {% endif %}

            // LOCATOR MASK
            $("#searchStockOptimizationElementForm_locator").inputmask({"mask": "**-**-**"});

            // AUTO COMPLETE FOR ARTICLE
            $('#searchStockOptimizationElementForm_article').typeahead({
                highlight: true,
                minLength: 1
            },{
                name: 'alias',
                display: function(value) {
                    return value.alias + ' - ' +value.brand + ' - ' + value.model + ' - ' + value.color
                },
                source: function (query,sync, async) {

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

                $("#searchSaleForm_article").typeahead('val',data.alias);

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

        function showDialogTypePrinter(){
            $("#modal_type_printer").modal("show");
        }

        //CREATING TRANSFERS FROM STOCK OPTIMIZATION
        function createTransfers(){
            var elements = $('.chosen_element:checkbox:checked');

            if(elements.length === 0) {
                swal('OPS!', 'No ha seleccionado elementos para realizar los traspasos', 'warning');
            } else {
                generateTransfer('{{ optimization.id }}', null, null, null, '{{ constant('CoreBundle\\Entity\\TypeStockOptimizationTransfer::ID_WORKORDER_TRANSFER') }}');
            }
        }


        //PRINTING STOCK OPTIMIZATION
        function printStockOptimization(type, valoration, lessThanQty){
            var route = Routing.generate('_ajax_print_stock_optimization',{'id': '{{ optimization.id }}', 'type' : type, 'valoration' : valoration, 'lessThanQty' : lessThanQty });

            $.get(route, function(response){
                var myWindow = window.open();

                if(!myWindow || myWindow.closed || typeof myWindow.closed=='undefined') {
                    swal(
                        'OPPS!',
                        'Su navegador tiene las ventanas emergentes bloquedas. ' +
                        'Pulse en la i rodeada de un círculo en la barra de navegación de su navegador. ' +
                        'En el desplegable que le saldrá pulse sobre "Confuración del sitio web". ' +
                        'En la nueva ventana que se le abrira busque "Ventanas emergentes y redirecciones". ' +
                        'En el selector a su derecha selecciones "Permitir".',
                        'warning'
                    );
                } else {
                    myWindow.document.open('text/plain');
                    myWindow.document.writeln(response);
                    myWindow.document.close();
                    $("#modal_type_printer").modal("hide");
                }
            }).fail(function (data) {
                //errorNotity(data.message);
                console.log(data.responseText);
            });
        }


        //CLOSE STOCK OPTIMIZATION
        function closeOptimization(){

            var route = Routing.generate('_ajax_close_stock_optimization',{'id': '{{ optimization.id }}' });
            $.get(route, function(response){

                new PNotify({
                    title: 'Perfecto',
                    text: "La orden de trabajo se ha cerrado y completado correctamente.",
                    type: "success"
                });
                window.location.href = Routing.generate("optimization_stock_edit", { "id" : '{{ optimization.id }}' });

            }).fail(function (data) {
                //errorNotity(data.message);
                console.log(data);
            });

        }

        function checkSeriesForPrint() {
            var route = Routing.generate('check_series_for_print',{'id': '{{ optimization.id }}' });

            $.get(route, function(response) {

            }).done(function (response) {
                printStockOptimization('TICKET', null, response['isLessThanQty']);
            }).fail(function(error){
                console.log(error.responseText);
            })
        }

        function isEmpty(el) {
            return !$.trim(el.html());
        }

        $('a[href=#movementsTab]').click(function(){
            if(isEmpty($('#movementsTabDiv'))) {
                fillMovementTab(null);
            }
        });

        function fillMovementTab(params) {
            var optimization = '{{ optimization.id }}';

            var url = Routing.generate('fill_movement_tab', {'optimization' : optimization, 'params' : params });

            showProgressBarOnElementId('movementsTabDiv',60);

            $.post(url, function() {
            }).done(function(result){
                core_stock_optimization_element_search_criteria.getCriteria();
                $('#movementsTabDiv').html(result);
            }).fail(function(error){
                console.log(error.responseText);
            })
        }

        $('form[name="searchStockOptimizationElementForm"]').submit(function(event){
            $('#searcher').removeClass('in');
            fillMovementTab($(this).serialize());
            event.preventDefault();
        });

        function clearFilterSearch() {
            var url = Routing.generate('clear_stock_optimization_element_search');

            $.get(url, function(){

            }).done(function(result){
                // RESET ALL VALUES
                resetForm($('form[name="searchStockOptimizationElementForm"]'));
                $('#searcher').removeClass('in');
                fillMovementTab(null);
            }).fail(function (error) {
                console.log(error.responseText);
            });
        }

        function resetForm($form) {
            $form.find('input:text, input:password, input:file, select, textarea').val('');
            $form.find('input:radio, input:checkbox')
                .removeAttr('checked').removeAttr('selected');
            $form.find('select option:selected').removeAttr('selected');
            $form.find('.select2-search-choice').empty();
        }

        $('input:radio[name=format_print_type]').change(function(){
           if($(this).is(':checked') && $(this).attr('id') == 'A4_radio') {
               $('#div_group').prop('hidden', false);
               $('.valoration_buttons').prop('disabled', true);
           } else if($(this).is(':checked') && $(this).attr('id') == 'ticket_radio') {
               $('#div_group').prop('hidden', true);
               $("input:radio[name=format_print_group]").removeAttr("checked");
               $("#valoration_button").prop('disabled', false);
               $("#no_valoration_button").prop('disabled', true);
           }
        });

        $('input:radio[name=format_print_group]').change(function(){
            if($(this).is(':checked')) {
                $('.valoration_buttons').prop('disabled', false);
            }
        });

        function printDocument(valoration) {
            var radioFormat = $('input:radio[name=format_print_type]:checked').attr('id');

            if(radioFormat == 'A4_radio') {
                var groupFormat = $('input:radio[name=format_print_group]:checked').attr('id');

                if(groupFormat == "article_radio") {
                    printStockOptimization('A4', valoration, false);
                } else if(groupFormat == "article_size_radio") {
                    printStockOptimization('A4_article_size', valoration, false);
                }
            } else if(radioFormat == 'ticket_radio'){
                checkSeriesForPrint()
            }
        }
    </script>
{% endblock %}