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

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css') }}">
    <style>
        .buttons-grid {
            text-align: right;
        }
    </style>
    <!-- <script src="{{ asset('plugins/jquery.maskMoney.js') }}" type="text/javascript"></script> -->
{% 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 class="table table-bordered table-hover table-striped table-responsive table-condensed">
            <thead>
            <tr>
                <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;">Business Unit</th>
                <th style="text-align: center;">Total</th>
                <th style="text-align: center;">UM</th>
            </tr>
            </thead>
            <tbody>
            {% for item in cblData %}
                <tr>
                    <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.business_unit }} </td>
                    <td> {{ item.total_cbl }} </td>
                    <td> {{ item.um }} </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div style="margin-top: 20px" class="col-lg-12">
        <form method="POST" action="">
            <div class="row">
                <div class="col-lg-6  col-md-6">
                    <label class="control-label" for="um_general"> UM </label>
                    <input type="number" maxlength="3" max="100" class="form-control" name="um_general" id="um_general"
                           value="{{ cblData[0].um }}">
                    <input type="hidden" value="{{ cbl_id }}" name="cbl_id">

                    <label class="control-label" for="revenue_recognition"> Direct Billling </label>
                    <select name="revenue_recognition" class="form-control" id="revenue_recognition" required>
                        <option value=""> Select</option>
                        {% for rR in revenueRecognition %}
                            <option value="{{ rR.options_id }}"
                                    {% if cblData[0].revenue_recognition == rR.options_id %} selected="selected" {% endif %}> {{ rR.value }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-6 col-md-6">
                    <label class="control-label" for="reason_code"> Reason Code </label>
                    <select name="reason_code" class="form-control" id="reason_code" required>
                        <option value=""> Select Reason Code</option>
                        {% for rCode in reasonCode %}
                            <option value="{{ rCode.options_id }}"
                                    {% if cblData[0].reason_code == rCode.options_id %} selected="selected" {% endif %}> {{ rCode.value }}</option>
                        {% endfor %}
                    </select>

                    <label class="control-label" for="comment"> {{'ticketDetail.comments.comentario' trans}} </label>
                    <textarea class="form-control" name="comment" id="comment">{{ cblData[0].comment }}</textarea>
                </div>


                <div class="col-lg-12 col-md-12">
                    <label class="control-label" for="month_billing"> Mes Facturacion / UB </label>
                    <select name="month_billing" class="form-control" id="month_billing" required>
                        <option value=""> {{'Seleccione Mes' | trans}}</option>
                        {% for m in months %}
                            <option value="{{ m.options_id }}"
                                    {% if cblData[0].billing_month == m.options_id %} selected="selected" {% endif %}> {{ m.value }}
                            </option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <table style="margin-top: 20px" id="cbl_monthly" name="cbl_monthly"
                   class="table table-bordered table-hover table-striped table-responsive table-condensed">
                <tr>
                    <th>{{'monitorii.month' | trans}}</th>
                    <th>NS</th>
                    <th>UM</th>
                    <th>Billing</th>
                    <th colspan="2"></th>
                </tr>
                {% if cblMonthly %}
                    {% for item in cblMonthly %}
                        <tr>
                            <td>
                                <select name="month_general[]" class="form-control" id="month_general" required>
                                    <option value=""> {{'Seleccione Mes' | trans}}</option>
                                    {% for m in months %}
                                        <option value="{{ m.options_id }}"
                                                {% if item.month == m.options_id %} selected="selected" {% endif %}> {{ m.value }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td>
                                <input type="number" class="form-control ns" name="ns_month[]" value="{{ item.ns }}">
                            </td>
                            <td>
                                <input type="number" readonly class="form-control um_month" name="um_month[]"
                                       value="{{ item.um }}">
                            </td>
                            <td>
                                <input type="number" class="form-control  billling-month" name="billing_month[]"
                                       value="{{ item.billing }}">
                            </td>
                            <td colspan="2">
                                <input type="button" name="reload[]" class="refresh" value='r'/>
                                <input type="button" name="addRow[]" class="add" value='+'/>
                                <input type="button" name="addRow[]" class="removeRow" value='-'/>
                            </td>
                        </tr>

                    {% endfor %}

                {% else %}
                    <tr>
                        <td>
                            <select name="month_general[]" class="form-control" id="month_general" required>
                                <option value=""> {{'Seleccione Mes' | trans}}</option>
                                {% for month in months %}
                                    <option value="{{ month.options_id }}"> {{ month.value }}</option>
                                {% endfor %}
                            </select>
                        </td>
                        <td>
                            <input type="number" class="form-control ns" name="ns_month[]">

                        </td>
                        <td>
                            <input type="number" readonly class="form-control um_month" name="um_month[]">
                        </td>
                        <td>
                            <input type="number" class="form-control billling-month" name="billing_month[]">
                        </td>
                        <td colspan="2">
                            <input type="button" name="reload[]" class="refresh" value='r'/>
                            <input type="button" name="addRow[]" class="add" value='+'/>
                            <input type="button" name="addRow[]" class="removeRow" value='-'/>
                        </td>
                    </tr>
                {% endif %}

            </table>

            <div style="margin-top: 20px" class="buttons-grid">
                <a href="{{ path('register_data_cbl') }}" class="btn btn-danger"> Volver </a>
                <button class="btn btn-success" type="submit"> {{'ticketDetail.save' | trans}}</button>
            </div>
        </form>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {

        });

        //$("form").submit(function (event) {
        // });

        $(document).on('click', '#cbl_monthly .add', function () {
            var row = $(this).closest('tr');
            var clone = row.clone();
            // clear the values
            var tr = clone.closest('tr');
            tr.find('input[type=number]').val('');
            tr.find('select').val('');
            $(this).closest('tr').after(clone);
        });

        $(document).on('keypress', '#cbl_monthly .next', function (e) {
            if (e.which == 13) {
                var v = $(this).index('input:number');
                var n = v + 1;
                $('input:text').eq(n).focus();
                //$(this).next().focus();
            }
        });

        $(document).on('keypress', '#cbl_monthly .nextRow', function (e) {
            if (e.which == 13) {
                $(this).closest('tr').find('.add').trigger('click');
                $(this).closest('tr').next().find('input:first').focus();
            }
        });

        $(document).on('click', '#cbl_monthly .removeRow', function () {
            if ($('#cbl_monthly .add').length > 1) {
                $(this).closest('tr').remove();
            }
        });

        $(document).on('click', '#cbl_monthly .refresh', function () {
            var um_percent = $('#um_general').val();
            var ns = $(this).closest('tr').find('.ns').val();
            $(this).closest('tr').find('.um_month').val((um_percent * ns)/100);
        });

        // event button back

    </script>

{% endblock %}