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

{% block stylesheets %}

    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css') }}">
    <link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" rel="stylesheet"/>

    <style>
        .table {
            font-weight: normal;
        }
        .tablesorter-blue{
            border-width: 1px;
        }
    </style>

{% endblock %}
{% block titulo %} - <a href="{{ path('projectInitial',{ 'idproyectos':idproyectos}) }}">{{ proyectos.proyecto }}</a> -
    <a href="{{ path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule}) }}">{{ modulo.modulo }}</a>
{% endblock %}

{% block menuTop %}
{% endblock %}

{% block dashboard %}
    <div class="col-lg-12">
        <!--<form id="form" action="{{ path("report_wow_xls") }}" method="GET" >
            <button type="button" id="sendForm"><img src="/pwm/web/images/xls.png" width="24px"></button>
        </form>-->
        <a href="{{ path("report_wow_xls") }}"><img src="/pwm/web/images/xls.png" width="24px"></a>

        <div class="row">
        <table id="datatable-cbl-data" class="table table-bordered table-hover table-striped table-responsive tablesorter tablesorter-blue" style="width: 100% !important;">
            <thead>
                <tr class="">
                    <th style="text-align: center;">CRG</th>
                    <th style="text-align: center;">Deal Description</th>
                    <th style="text-align: center;">{{'PROYECTO' | trans}}</th>
                    <th style="text-align: center;">Owner</th>
                    <th style="text-align: center;">BU</th>
                    <th style="text-align: center;">PA</th>
                    <th style="text-align: center;">Comm</th>
                    <th style="text-align: center;">UM% </th>
                    <th style="text-align: center;">Total Ub {{ "now"|date("M") }}</th>
                    <th style="text-align: center;">Pending Ub {{ "now"|date("M") }}</th>   
                    {% for m in months_data %}
                        <th style="text-align: center;">NS {{ m.value }}</th>
                        <th style="text-align: center;">UM {{ m.value }}</th>
                        <th style="text-align: center;">Billing {{ m.value }}</th>
                    {% endfor %}
                    <th>NS Q</th>
                    <th>UM Q</th>
                    <th>Inv Q</th>
                </tr>
            </thead>
            <tbody>
            {% for item in cblData %}
                <tr>
                    <td> {{ item.crg }} </td>
                    <td> 
                        <a href="#" class="deal_description" data-name="deal_description" data-pk="{{ item.cbl_id }}">
                            {% if item.deal_description == '2.02E+13' or item.deal_description == '#' %}                         
                                <font color="#DF013A"><i>Not Available</i></font>
                            {% else %} 
                                {{ item.deal_description }}
                            {% endif %}                          
                        </a>
                    </td>
                    <td>
                        <a href="#" class="project_general" data-value="{{ item.project_general }}" data-type="select" data-name="project_general"  data-title="Select project" data-pk="{{ item.cbl_id }}"></a>
                    </td>
                    <td> {{ item.person_responsible }} </td>
                    <td> {{ item.business_unit }} </td>
                    <td> {{ item.product_area }} </td>
                    <td> {{ item.fire_commodity }} </td>
                    <td><a href="#" class="valores" data-name="um" data-pk="{{ item.cbl_id }}">{{ item.um }}</a></td>
                    <td> {{ item.total_ub }} </td>
                    <td> {{ item.pending_ub }} </td>
                    <!-- declaracion de variables en donde se guardaran los valores de los quarter -->
                    {% set netsales = 0 %}
                    {% set umargin = 0 %}
                    {% set billing = 0 %}
                    {% for m in months_data %}
                        <!-- sumatoria de los resultados de los quarter -->
                        {% set netsales = netsales + item[m.net_sales] %}
                        {% set umargin = umargin + item[m.umargin] %}
                        {% set billing = billing + item[m.billing] %}
                        <!-- se imprime el valor que esta retornando dentro de los arreglos -->
                        <td><a href="#" class="valores" data-name="{{ m.net_sales }}" data-pk="{{ item.cbl_id }}">{{ item[m.net_sales] }}</a></td>
                        <td> {{ item[m.umargin] }} </td>
                        <td><a href="#" class="valores" data-name="{{ m.billing }}" data-pk="{{ item.cbl_id }}">{{ item[m.billing] }}</a></td>
                    {% endfor %}
                    <!-- impresion de variables de los quarter -->
                    <td> {{ netsales }} </td>
                    <td> {{ umargin }} </td>
                    <td> {{ billing }} </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
    </div>

    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>

    <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
    <script src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
    <script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>

    <script src="{{ asset('js/tableExport.js') }}"></script>

    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>


    <script type="text/javascript">
        setTimeout('document.location.reload()',120000);
        var upd_data_cbl = "{{ path('upd_data_cbl') }}";
        $(document).ready(function () {
            $('#datatable-cbl-data').DataTable({
            });
        });

        $('.project_general').editable({
            url: upd_data_cbl,
            title: 'Project Name',
            source: [
                {value: '0', text: 'Select'},
                {% for p in projects %}
                {value: '{{ p.project_id }}', text: '{{ p.project_name }}'},
                {% endfor %}
            ]
        });
        $('.deal_description').editable({
                url: upd_data_cbl,
                title: 'Enter description',
                rows: 10
        });
        $('.valores').editable({
                url: upd_data_cbl,
                title: 'Enter value',
                rows: 10
        });

        $("#sendForm").click(function () {
            $("#form").ajaxSubmit({
                beforeSubmit: function (formData, jqForm, options) {
                    $("#sendForm").after('<img class="loading" width="16" src="{{ asset('loadings/spin.GIF') }}" />');
                    $("#sendForm").attr('disabled', true);

                },
                error: function (error) {
                    swal(error.statusText, "Please Contact The Administrator Sever", "error");
                    $("#sendForm").attr('disabled', false);
                    $(".loading").hide();
                },
                success: function (responseText, statusText, xhr, $form) {
                    $("#sendForm").attr('disabled', false);
                    $(".loading").hide();
                    //console.log(responseText, statusText);
                }
            });
            return false;
        });
        
    </script>


{% endblock %}