{% 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;
            font-size: 12px;
        }

    </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">
        <table id="datatable-cbl-data" class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue" style="width: 100% !important;">
            <thead>
            <tr class="">
                <th style="text-align: center;">UnbilledID</th>
                <th style="text-align: center;">CRG</th>
                <th style="text-align: center;">Deal Id</th>
                <th style="text-align: center;">Deal Description</th>
                <th style="text-align: center;">Assignment Id</th>
                <th style="text-align: center;">Assignment Description</th>
                <th style="text-align: center;">WBS Element</th>
                <th style="text-align: center;">Person Responsible</th>
                <th style="text-align: center;">Sales Order</th>
                <th style="text-align: center;">Ericsson Contract</th>
                <th style="text-align: center;">Reason Code</th>
                <th style="text-align: center;">Total UB</th>
                <th style="text-align: center;">Pending UB</th>
                {% for m in months_data %}
                    <th style="text-align: center;">{{ m.value }}</th>
                {% endfor %}
            </tr>
            </thead>
            <tbody>
            {% for item in cblData %}
                <tr>
                    <td> {{ item.unbilled_id }} </td>
                    <td> {{ item.crg }} </td>
                    <td> {{ item.deal_id }} </td>
                    <td> {{ item.deal_description }} </td>
                    <td> {{ item.assignment_id }} </td>
                    <td> {{ item.assignment_description }} </td>
                    <td> {{ item.wbs_element }} </td>
                    <td> {{ item.person_responsible }} </td>
                    <td> {{ item.sales_order }} </td>
                    <td> {{ item.ericsson_contract }} </td>
                    <td> <a href="#" class="reason_code" data-type="select" value="{{ item.reason_code }}" data-value="{{ item.reason_code }}" data-name="reason_code" data-pk="{{ item.unbilled_id }}" data-title="Select reason code"></a> </td>
                    <td> {{ item.total_ub }} </td>
                    <td> {{ item.pending_ub }} </td>
                    {% for m in months_data %}
                        <td>
                            <a href="#" class="ns" data-name="ns"
                               data-url="{{ path('upd_data_cbl_cpm', {'month': m.desc_month }) }}" data-type="text"
                               data-pk="{{ item.unbilled_id }}">{{ item[m.desc_month] }}</a>
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </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">
        $(document).ready(function () {
            var get_all_data_ub = "";
            var upd_data_ub = "{{ path('upd_data_ub') }}";

            $('.comments').editable({
                url: upd_data_ub,
                title: 'Enter comments',
                rows: 10
            });

            $('.reason_code').editable({
                url: upd_data_ub,
                source: [
                    {value: '0', text: 'Select' },
                    {% for rCode in reasonCode %}
                    {value: '{{ rCode.options_id }}', text: '{{ rCode.value }}' },
                    {% endfor %}
                ]
            });

            $('.risk_level').editable({
                url: upd_data_ub,
                source: [
                    {value: '0', text: 'Select' },
                    {% for rLevel in riskLevel %}
                    {value: '{{ rLevel.options_id }}', text: '{{ rLevel.value }}' },
                    {% endfor %}
                ]
            });


            $('#datatable-cbl-data').DataTable({
                "columnDefs": [
                    {
                        "targets": [0],
                        "visible": false,
                        "searchable": false
                    }
                ],
                "order": [[0, "asc"]]
            });
        });

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