{% 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 type="text/css">
        .table {
            font-weight: normal;
        }
        #datatable-cbl-data {
            font-size: 12px;
        }
        #menuTop {
            margin-top: 20px;
        }
        tfoot {
            display: table-header-group;
        }
        input[type="text"]{
            border: none;
            width: 100%;
            padding: 5px;
        }

        #datatable-cbl-data_wrapper > col-sm-12 {
            overflow-x: auto;
            display: block;
        }
    </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">Person Responsible</label>
            <select id="filter-person-responsible" name="filter_responsible" style="width: 200px;" class="">
                <option value="" selected>Select option </option>
                {% for pr in responsibleList %}
                    <option value="{{ pr.person_responsible }}"> {{ pr.person_responsible }}</option>
                {% endfor %}
            </select>-->
            &nbsp;
            <!-- <label for="filter-reason-code">Reason Code</label>
            <select id="filter-reason-code" name="filter_reason_code" style="width: 200px;" class="">
                <option value="" selected> Select option</option>
                {% for rCode in reasonCode %}
                   <option value="{{ rCode.options_id }}"> {{ rCode.value }}</option>
                {% endfor %}
            </select>
            &nbsp;
            <button type="button" id="filter-button"> Filter </button> -->
            <div style="float: right">
                <a href="{{ path('register_cbl_cpm') }}" > CPM </a>
            </div>

        </div>

        <table id="datatable-cbl-data" class="table table-bordered table-hover table-striped table-responsive table1 tablesorter tablesorter-blue hasFilters" style="width: 100% !important;">
            <thead>
                <tr class="">
                    <th style="text-align: center;">CBLID</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;">Person Responsible</th>
                    <th style="text-align: center;">Assignment Id</th>
                    <th style="text-align: center;">Assignment Description</th>
                    <th style="text-align: center;">Business Unit</th>
                    <th style="text-align: center;">Product Area</th>
                    <th style="text-align: center;">Project Definition</th>
                    <th style="text-align: center;">Reason Code</th>
                    <th style="text-align: center;">Comments</th>
                    <th style="text-align: center;">UM</th>
                    <th style="text-align: center;">Total CBL</th>
                    <th style="text-align: center;">Pending CBL</th>
                </tr>
            </thead>
            <tfoot>
                <tr class="">
                    <th style="text-align: center;">CBLID</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;">Person Responsible</th>
                    <th style="text-align: center;">Assignment Id</th>
                    <th style="text-align: center;">Assignment Description</th>
                    <th style="text-align: center;">Business Unit</th>
                    <th style="text-align: center;">Product Area</th>
                    <th style="text-align: center;">Project Definition</th>
                    <th style="text-align: center;">Reason Code</th>
                    <th style="text-align: center;">Comments</th>
                    <th style="text-align: center;">UM</th>
                    <th style="text-align: center;">Total CBL</th>
                    <th style="text-align: center;">Pending CBL</th>
                </tr>
            </tfoot>
            <tbody>
                {% for item in cblData %}
                    <tr>
                        <td> {{ item.cbl_id }} </td>
                        <td> {{ item.crg }} </td>
                        <td>
                            {{ item.deal_id }}
                        </td>
                        <td>
                           {{ item.deal_description }}
                        </td>
                        <td>
                            <a href="#" class="person_responsible" data-type="select" value="{{ item.person_responsible }}" data-value="{{ item.person_responsible }}" data-name="person_responsible" data-pk="{{ item.cbl_id }}" data-title="Select Person Responsible"></a>
                        </td>
                        <td> {{ item.assignment_id }} </td>
                        <td> {{ item.assignment_description }} </td>
                        <td> {{ item.business_unit }} </td>
                        <td> {{ item.product_area }} </td>
                        <td> {{ item.project }} </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.cbl_id }}" data-title="Select reason code"></a>
                        </td>
                        <td>
                            <a href="#" class="comments" data-name="comment" data-pk="{{ item.cbl_id }}">{{ item.comment }}</a>
                        </td>
                        <td> {{ item.um }} </td>
                        <td> {{ item.total_cbl }} </td>
                        <td> {{ item.pending_cbl }} </td>
                    </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">
        var get_all_data_cbl = "{{ path('get_all_data_cbl') }}";
        var upd_data_cbl = "{{ path('upd_data_cbl') }}";

        // $.fn.editable.defaults.mode = 'inline';

        $(document).ready(function () {
            $('.comments').editable({
                url: upd_data_cbl,
                title: 'Enter comments',
                rows: 10
            });
            $('.deal_id').editable({
                url: upd_data_cbl,
                title: 'Edit deal id'
            });

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

            $('.deal_description').editable({
                url: upd_data_cbl,
                source: [
                    {value: '0', text: 'Select'},
                    {% for dDesc in dealDesc %}
                    {value: '{{ dDesc.deal_description }}', text: '{{ dDesc.deal_description }}'},
                    {% endfor %}
                ]
            });

            $('.person_responsible').editable({
                url: upd_data_cbl,
                source: [
                    {value: '0', text: 'Select'},
                    {% for pRes in responsibleList %}
                    {value: '{{ pRes.person_responsible }}', text: '{{ pRes.person_responsible }}'},
                    {% endfor %}
                ]
            });

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


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

            /*$('#datatable-cbl-data tr.search-input td').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();
                    }
                });
            });

            /* $("#filter-button").click(function () {
                var url = "{{ path('register_data_cbl',  {'param': 'person_responsible', 'value_param': 'vpp' }) }}";
                url = url.replace("vpp", $(this).val());
                window.location.href = encodeURI(url);
            });
            $("#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 %}