{% extends "base.html.twig" %}
{% block menuTop %}

{% endblock %}


{% block dashboard %}

<style>
    input {
        -webkit-appearance: textfield;
        background-color: white;
        -webkit-rtl-ordering: logical;
        cursor: text;
        padding: 0px;
        border-width: 1px;
        border-style: solid;
        border-color: black !important;
        border-image: initial;
    }
    .dataTables_length select {
        width: 60px;
    }
    .dataTables_length label {
        font-weight: normal;
    }
    div.dt-buttons {
        position: relative !important;
        float: right !important;
        margin-right: -5px !important;
    }
</style>
<script>
    {% if idproyectos >= 1000 %}
    var columnaStock = [
        { "data": "Project" },{ "data": "po" },{ "data": "code" },{ "data": "code_w" },
         { "data": "description" },{ "data": "Supply_Quantity" },{ "data": "Executed" },{ "data": "Stock_Quantity" },
        { "data": "Availability_Percentage" }
    ];
    {% else %}
    var columnaStock = [
        { "data": "Project" }, { "data": "Product_Number" }, { "data": "Product_Description" },
        { "data": "Supply_Quantity" },{ "data": "Executed" },{ "data": "Stock_Quantity" },
        { "data": "Availability_Percentage" }
    ];
    var columnaConversion = [
        { "data": "id" }, { "data": "codigo_proyecto" }, { "data": "codigo_material" },
        { "data": "nombre_material" },{ "data": "factor_conversion" }
    ];
    {% endif %}

    /*var columnaStock = [
        { "data": "Project" }, { "data": "Product_Number" }, { "data": "Product_Description" },
        { "data": "Supply_Quantity" },{ "data": "Executed" },{ "data": "Stock_Quantity" },
        { "data": "Availability_Percentage" }
    ];
    var columnaConversion = [
        { "data": "id" }, { "data": "codigo_proyecto" }, { "data": "codigo_material" },
        { "data": "nombre_material" },{ "data": "factor_conversion" }
    ];*/

    var strFileTypes = "*.xlsx";
    var arrFileTypes = ['xlsx'];

    $(document).ready(function(){
        $("#btnGenerate").click(function(){
            if ($("#cmbProject :selected").length ==0){
                alert('Select one or more projects.');
            }else{
                $("#quantity").html(0);
                var tipoReporte = 'AVAILABILITY-REPORT';
                createTable(tipoReporte);
                switch (tipoReporte){
                    case 'AVAILABILITY-REPORT':
                        buildDatatable(columnaStock);
                        break;
                }
            }
        });
        $('#txtStartDate').datepicker({
            dateFormat: 'yy-mm-dd',
            onClose: function (selectedDate) {
                $("#txtEndDate").datepicker("option", "minDate", selectedDate);
            }
        });
        $('#txtEndDate').datepicker({
            dateFormat: 'yy-mm-dd',
        });

        var f = new Date();
        var month = (f.getMonth() + 1);

        if (month < 10) month = '0' + month;
        var dateI = f.getFullYear() + '-' + month + "-01";
        var dateF = f.getFullYear() + '-' + month + "-" + f.getDate();

        $('#txtStartDate').val(dateI);
        $('#txtEndDate').val(dateF);


        $('#tipoArchivo').on("change", function () {
            var tipo = $('#tipoArchivo').val();
            if (tipo == 'SUPPLY-REPORT') {
                $('#divProyecto').removeClass('hide');
                $('#divProyecto').addClass('show');
            }else{
                $('#divProyecto').removeClass('show');
                $('#divProyecto').addClass('hide');
            }
        });

        $('#tipoReporte').change(function() {
            var tipoReporte = 'AVAILABILITY-REPORT';
            var html = '<i class="fa fa-file-text-o"></i> '
                    + $('#tipoReporte option:selected').text().toUpperCase();
            $('#titleReport').html(html);
            createTable(tipoReporte);
            switch (tipoReporte){
                case 'AVAILABILITY-REPORT':
                    buildDatatable(columnaStock);
                    break;
            }
        });
    });
    {% if idproyectos >= 1000 %}

    function createTable(tipoReporte){
        var strHeader = '';
        var strFooter = '';
        var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';

        switch (tipoReporte){
            case 'AVAILABILITY-REPORT':
                strHeader = '<th>Project</th><th>PO</th><th>Code</th><th>Code W</th><th>Description</th>' +
                        '<th class="sum">Supply Quantity</th><th class="sum">Executed</th>' +
                        '<th class="sum">Stock Quantity</th>' +
                        '<th>Availability Percentage</th>';
                strFooter = '<tfoot><tr><th></th><th></th><th></th><th></th><th class="text-right">PAGE TOTAL:</th>' +
                            '<th class="text-right">0</th><th class="text-right">0</th>' +
                            '<th class="text-right">0</th><th></th></tr></tfoot>';
                break;
        }

        strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody>' + strFooter + '</table>';
        $('#datatable').empty();
        $('#datatable').html(strTable);
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

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

    function buildDatatable(columnas){
        table = $('#example').DataTable( {
            dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
            scrollY: '60vh',
            scrollX: true,
            scrollCollapse: true,
            orderCellsTop: true,
            "ajax": {
                "url": "{{ path('reporteMonitorStockPR') }}",
                "type": "POST",
                data:  function( d ) {
                    d.project   = $("#cmbProject").val(),
                    d.idproyectos = {{ idproyectos }}
                }
            },
            columns: columnas,
            columnDefs: [
                {
                    "render": function ( data, type, row ) {
                        if (data == null){
                            return '-'
                        }else
                        return data +' %';
                    },
                    "targets": 8
                },
                {
                    "render": function ( data, type, row ) {
                        if (data == null){
                            return '-'
                        }else
                            return data;
                    },
                    "targets": [5,6,7]
                },
                {
                    targets: [5,6,7,8],
                    className: 'dt-body-right'
                }
            ],
            fnRowCallback: function(row, data, index){
                if(data.Availability_Percentage >= 0 && data.Availability_Percentage <=25 || data.Availability_Percentage <= 0){
                    //$(row).find('td').css('color', 'red');
                    $(row).find('td:eq(8)').css('color', 'red');
                    $(row).find('td:eq(8)').css('font-weight', '800');
                }
                if(data.Availability_Percentage > 25 && data.Availability_Percentage <=50){
                    //$(row).find('td').css('color', 'blue');
                    $(row).find('td:eq(8)').css('color', '#ff9900');
                    $(row).find('td:eq(8)').css('font-weight', '900');
                }
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();
                api.columns('.sum', {
                    page: 'current'
                }).every(function() {
                    var sum = this
                            .data()
                            .reduce(function(a, b) {
                                var x = parseInt(a) || 0;
                                var y = parseInt(b) || 0;
                                return x + y;
                            }, 0);
                    $(this.footer()).html(sum);
                });
            },
            lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
            buttons: [
                {
                    extend:'excel',
                    title: 'Material_Availability_PR'
                }
            ]
        } );
    }

    {% else %}

    function createTable(tipoReporte){
        var strHeader = '';
        var strFooter = '';
        var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
        switch (tipoReporte){
            case 'AVAILABILITY-REPORT':
                strHeader = '<th>Project</th><th>Product Number</th><th>Product Description</th>' +
                        '<th class="sum">Supply Quantity</th><th class="sum">Executed</th>' +
                        '<th class="sum">Stock Quantity</th>' +
                        '<th>Availability Percentage</th>';
                strFooter = '<tfoot><tr><th></th><th></th><th class="text-right">PAGE TOTAL:</th>' +
                            '<th class="text-right">0</th><th class="text-right">0</th>' +
                            '<th class="text-right">0</th><th></th></tr></tfoot>';
                break;
        }
        strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody>' + strFooter + '</table>';
        $('#datatable').empty();
        $('#datatable').html(strTable);
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

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

    function buildDatatable(columnas){
        table = $('#example').DataTable( {
            dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
            scrollY: '60vh',
            scrollX: true,
            scrollCollapse: true,
            orderCellsTop: true,
            "ajax": {
                "url": "{{ path('reporteMonitorStockPR') }}",
                "type": "POST",
                data:  function( d ) {
                    d.project   = $("#cmbProject").val(),
                    d.idproyectos = {{ idproyectos }}
                }
            },
            columns: columnas,
            columnDefs: [
                {
                    "render": function ( data, type, row ) {
                        if (data == null){
                            return '-'
                        }else
                        return data +' %';
                    },
                    "targets": 6
                },
                {
                    "render": function ( data, type, row ) {
                        if (data == null){
                            return '-'
                        }else
                            return data;
                    },
                    "targets": [3,4,5]
                },
                {
                    targets: [3,4,5,6],
                    className: 'dt-body-right'
                }
            ],
            fnRowCallback: function(row, data, index){
                if(data.Availability_Percentage >= 0 && data.Availability_Percentage <=25){
                    //$(row).find('td').css('color', 'red');
                    $(row).find('td:eq(6)').css('color', 'red');
                    $(row).find('td:eq(6)').css('font-weight', '800');
                }
                if(data.Availability_Percentage > 25 && data.Availability_Percentage <=50){
                    //$(row).find('td').css('color', 'blue');
                    $(row).find('td:eq(6)').css('color', '#ff9900');
                    $(row).find('td:eq(6)').css('font-weight', '900');
                }
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();
                api.columns('.sum', {
                    page: 'current'
                }).every(function() {
                    var sum = this
                            .data()
                            .reduce(function(a, b) {
                                var x = parseInt(a) || 0;
                                var y = parseInt(b) || 0;
                                return x + y;
                            }, 0);
                    $(this.footer()).html(sum);
                });
            },
            lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
            buttons: [
                {
                    extend:'excel',
                    title: 'Material_Availability_PR'
                }
            ]
        } );
    }

    {% endif %}


</script>
    <div class="row">
        {#<div class="col-md-3 col-sm-3 form-group">
            <label for="txtStartDate">{{'monitor.etiqueta.fechaI' | trans}}: </label>
            <input type="text" class="form-control" id="txtStartDate" name="txtStartDate" value="">
        </div>
        <div class="col-md-3 col-sm-3 form-group">
            <label for="txtEndDate">{{'monitor.etiqueta.fechaF' | trans}}: </label>
            <input type="text" class="form-control" id="txtEndDate" name="txtEndDate" value="">
        </div>#}
        <div class="col-md-5 form-group">
            <label for="cmbProject">Project: </label> <i>(press CTRL + CLIC for multiple selection)</i>
            <select class="form-control" id="cmbProject" name="cmbProject" multiple>
                {%for proyecto in proyectos%}
                    <option value="{{proyecto.id}}">{{proyecto.nombre}}</option>
                {%endfor%}
                {#<option value="LTE2019">LTE 2019</option>#}
            </select>
        </div>
        <div class="col-md-2 col-sm-2 form-group" style="vertical-align: middle">
            <label for="btnGenerate">&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <button class="btn btn-primary form-control" id="btnGenerate"><strong>{{'ticketDetail.boton.generar' | trans}}</strong></button>
        </div>
        <div class="col-md-5 col-sm-5 text-center">
            {% if idproyectos==230 %}
            <img id="logo" class="pull-right" src="{{ asset('images/logo_claro_title_02.jpg') }}"  width="224" height="92" />
            {% endif %}
            {# if idproyectos==236 #}
                <!-- <img id="logo" class="pull-right" src="{{ asset('images/LogoTIGO.png') }}"  width="224" height="92" /> -->
            {# endif #}
        </div>
    </div>

<div class="row">
    <div class="col-md-12">
        <h1 class="text-center text-primary" style="font-size: x-large">
          {% if idproyectos >= 1000 %}
            <b id="titleReport"><i class="fa fa-file-text-o"></i> MATERIAL AVAILABILITY PO</b>
          {% else %}
            <b id="titleReport"><i class="fa fa-file-text-o"></i> MATERIAL AVAILABILITY</b>
          {% endif %}
    </div>
</div>

<div class="row">
    <div id="datatable" class="col-sm-12">
        <table id="example" class="display nowrap" width="100%">
            <thead>
            <tr>

            </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
    </div>
</div>

    <div id="modal_add_conversion" class="modal fade" data-keyboard="true" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title">Material Unit Conversion</h3>
                </div>

                <div class="modal-body">
                    <div id="dt_conversion" class="col-sm-12">
                        <table id="dt_add_conversion" class="display nowrap" width="100%">
                            <thead><tr></tr>
                            </thead>
                            <tbody id="tbody_conversion">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascripts %}
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
<!--script src="{{ asset('js/jquery-1.12.4.js') }}"></script-->
<script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('js/jszip.min.js') }}"></script>
<script src="{{ asset('js/pdfmake.min.js') }}"></script>
<script src="{{ asset('js/vfs_fonts.js') }}"></script>
<script src="{{ asset('js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}