{% 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') }}">
    <style>
        .table {
            font-weight: normal;
        }
        #dt-cbl-cpm {
            font-size: 12px;
        }
        #dt-cbl-cpm tfoot th input{
            font-weight: normal;
            font-size: 11px;
        }
        tfoot {
            display: table-header-group;
        }
        input[type="text"]{
            border: none;
            width: 100%;
            padding: 5px;
        }

    </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">
       <div class="filters">
       <!--     <label for="filter-crg"> Filter by CRG </label>
            <select id="filter-crg"  name="filter_crg" style="width: 200px;" class="" >
                <option value="" selected>Select</option>
                {% for c in crgList %}
                    <option value="{{ c.crg }}"> {{ c.crg }}</option>
                {% endfor %}
            </select>-->

           <!--<label for="filter-person-responsible"> Filter by Person Responsible</label>
           <select id="filter-person-responsible" name="filter_responsible" style="width: 200px;" class="">
               <option value="" selected>Select</option>
               {% for pr in responsibleList %}
                   <option value="{{ pr.person_responsible }}"> {{ pr.person_responsible }}</option>
               {% endfor %}
           </select>-->
       </div>
        <div class="row" style="overflow-x: auto; overflow-y: hidden;">
            <table id="dt-cbl-cpm"
                   class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters"
                   style="overflow:auto;">
                <thead>
                <tr class="">
                    <th style="text-align: center;">ID</th>
                    <th style="text-align: center;">CRG</th>
                    <th style="text-align: center;">Customer PO</th>
                    <th style="text-align: center;">WBS Element</th>
                    <th style="text-align: center;">Person Responsible</th>
                    <th style="text-align: center;">Reason Code</th>
                    <th style="text-align: center;">Project</th>
                    <th style="text-align: center;">UM</th>
                    <th style="text-align: center;">Total CBL</th>
                    <th style="text-align: center;">Pending CBL</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 %}
                </tr>
                </thead>
                <tfoot>
                <tr class="">
                    <th style="text-align: center;">ID</th>
                    <th style="text-align: center;">CRG</th>
                    <th style="text-align: center;">Customer PO</th>
                    <th style="text-align: center;">WBS Element</th>
                    <th style="text-align: center;">Person Responsible</th>
                    <th style="text-align: center;">Reason Code</th>
                    <th style="text-align: center;">Project</th>
                    <th style="text-align: center;">UM</th>
                    <th style="text-align: center;">Total CBL</th>
                    <th style="text-align: center;">Pending CBL</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 %}
                </tr>
                </tfoot>
                <tbody>
                {% for item in cblData %}
                    <tr>
                        <td> {{ item.cbl_id }} </td>
                        <td> {{ item.crg }} </td>
                        <td> {{ item.customer_po }} </td>
                        <td> {{ item.wbs_element }} </td>
                        <td> {{ item.person_responsible }} </td>
                        <td> {{ item.reason_code_desc }} </td>
                        <td> {{ item.project }} </td>
                        <td>
                            <a href="#" class="um_general" data-name="um" data-type="text"
                               data-pk="{{ item.cbl_id }}">{{ item.um }}</a>
                        </td>
                        <td> {{ item.total_cbl }} </td>
                        <td> {{ item.pending_cbl }} </td>

                        {% for m in months_data %}
                            <td>
                                <a href="#" class="ns" data-name="ns"
                                   data-url="{{ path('upd_data_cbl_cpm', {'month': m.net_sales }) }}" data-type="text"
                                   data-pk="{{ item.cbl_id }}">{{ item[m.net_sales] }}</a>
                            </td>
                            <td class="um_value">
                                {{ item[m.umargin] }}
                            </td>
                            <td>
                                <a href="#" class="billing" data-name="billing"
                                   data-url="{{ path('upd_data_cbl_cpm', {'month': m.billing }) }}" data-type="text"
                                   data-pk="{{ item.cbl_id }}">{{ item[m.billing] }}</a>
                            </td>
                        {% endfor %}
                    </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>

    <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">
        var get_all_data_cbl = "{{ path('get_all_data_cbl') }}";
        var upd_data_cbl = "{{ path('upd_data_cbl') }}";
        var upd_data_cbl_cpm = "";
        // $.fn.editable.defaults.mode = 'inline';

        $(document).ready(function () {
            $('.um_general').editable({
                url: upd_data_cbl,
                title: 'Enter UM'
            });

            $('.ns').editable({
                title: 'Enter Net Sales'
            });

            $('.ns').on('save', function(e, params) {
                console.log(params);
            });

            $('.billing').editable({
                url: upd_data_cbl_cpm,
                title: 'Enter Billing'
            });

            var table = $('#dt-cbl-cpm').DataTable({
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false,
                        "searchable": false
                    }
                ],
                "order": [[0, "asc"]]
            });

            $("#filter-person-responsible").change(function () {
                var url = "{{ path('register_cbl_cpm',  {'param': 'person_responsible', 'value_param': 'vpp' }) }}";
                url = url.replace("vpp", $(this).val());
                window.location.href = encodeURI(url);
            });

            $('#dt-cbl-cpm tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search" />');
            });

            // Apply the search
            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });


        });
    </script>

{% endblock %}