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

{% endblock %}

{% block dashboard %}
    <style>

        .modal.modal-wide .modal-dialog {
            width: 90%;
        }
        .modal-wide .modal-body {
            overflow-y: auto;
        }


        .wrapper{padding-bottom:50px;}
        .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
        .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
        .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
        pre,.well{background:#FFFFFF;}
        .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
        .isloading-wrapper.isloading-right{margin-left:10px;}
        .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

        /*Glyphicon Spinner*/
        .glyphicon-spin {
            -animation: spin .9s infinite linear;
            -webkit-animation: spin2 .9s infinite linear;
        }

        @-webkit-keyframes spin2 {
            from { -webkit-transform: rotate(0deg);}
            to { -webkit-transform: rotate(360deg);}
        }

        @keyframes spin {
            from { transform: scale(1) rotate(0deg);}
            to { transform: scale(1) rotate(360deg);}
        }
        #menuTop {
            margin-top: 30px;
        }
        /* Hiding the checkbox, but allowing it to be focused */
        .badgebox
        {
            opacity: 0;
        }

        .badgebox + .badge
        {
            /* Move the check mark away when unchecked */
            text-indent: -999999px;
            /* Makes the badge's width stay the same checked and unchecked */
            width: 27px;
        }

        .badgebox:focus + .badge
        {
            /* Set something to make the badge looks focused */
            /* This really depends on the application, in my case it was: */

            /* Adding a light border */
            box-shadow: inset 0px 0px 5px;
            /* Taking the difference out of the padding */
        }

        .badgebox:checked + .badge
        {
            /* Move the check mark back when checked */
            text-indent: 0;
        }
        #example td:hover{
            text-decoration: underline;
            cursor: pointer;
        }


        .js-example-tokenizer{
            width: 100%;
        }
        .js-example-tokenizer .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }
        .js-example-tokenizer .select2-choice{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        }
        .js-example-tokenizer .select2-choice:focus{
            border-color:#66afe9;
            outline:0;
            -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }


    </style>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>

        $(function () {

            $(".datetimepicker1").datetimepicker();


            $(".js-example-tokenizer").select2({
                placeholder: "Select a state"
            });

            var table = $('#example').DataTable( {
                dom: 'Bfrtip',
                "order": false,
                "ajax": {
                    "url": "{{ path('showVPWReport2',{'idproyectos':idproyectos,'idmodule':10}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.idproveedor= $('#idproveedor').val();
                        d.customer= $('#customer').val();
                        d.market= $('#market').val();
                        d.vendor= $('#vendor').val();
                        d.rcm= $('#rcm').val();
                        d.sinceDate = $('#sinceDate').val();
                        d.toDate = $('#toDate').val();
                    }
                },
                columns: [
                    { "data": "startDate"},
                    { "data": "remotePunch","visible": false,"searchable": false  },
                    { "data": "sitio" },

                    { "data": "customer"  },

                    { "data": "CustomerMarket","visible": false,"searchable": false  },
                    { "data": "rcm" },




                    { "data": "vendor","visible": false,"searchable": false  },

                    { "data": "cm","visible": false,"searchable": false  },

                    { "data": "solicitante" },
                    { "data": "email","visible": false,"searchable": false  },
                    { "data": "telefono","visible": false,"searchable": false  },
                    { "data": "technology","visible": false,"searchable": false  },
                    { "data": "timeScheduled","visible": false,"searchable": false  },
                    { "data": "vpwActivityStatus","visible": false,"searchable": false  },
                    { "data": "vpwResult","visible": false,"searchable": false  },


                    { "data": "srsResult","visible": false,"searchable": false  },
                    { "data": "failedItems" },
                    { "data": "correctedItems" },
                    { "data": "remainingItems" },
                    { "data": "unobservableItems" },

                    { "data": "findingsComments","visible": false,"searchable": false  },
                    { "data": "cxChecklistStatus","visible": false,"searchable": false  },
                    { "data": "adminTime" },
                    { "data": "vpwTime" },
                    { "data": "downTime" },
                    { "data": "totalTime"},
                    { "data": "tool","visible": false,"searchable": false  },
                    { "data": "commentTool","visible": false,"searchable": false  },




                    { "data": "comments","visible": false,"searchable": false}
                ],
                lengthMenu: [
                    [  100, 200, -1 ],
                    [ '100 rows', '200 rows', 'Show all' ]
                ],
                buttons: [
                    'excel'
                ]
            } );

            $('#example tbody').on( 'click', 'td', function () {
                var columnData = table .column($(this).index()+':visIdx' )
                        .data();
                var data = table.row( $(this).parents('tr') ).data();
                // failed    tems
                if(table.column($(this).index() + ':visIdx').index() == 11){
                    $.ajax({
                        type: 'POST',
                        url:'{{ path('getItemsVWP',{'idproyectos':idproyectos,'opc':0}) }}',
                        data: { $idpadre: data.id}
                    }).done(function (json) {
                        row = jQuery.parseJSON(json);
                        row = row.items;
                        option = "";
                        for (i=0; i<row.length; i++) {
                            option += "<tr><td>"+row[i].estado+"</td><td>"+row[i].DATE+"</td></tr>";
                        }
                        $("#tbodyItems").empty();
                        $("#tbodyItems").append(option);
                        $(".titleItems").text('FAILS');

                        $("#modalItems").modal();

                    });


                }


                // Corrected During Punch
                else if(table.column($(this).index() + ':visIdx').index() == 12  ){
                    $.ajax({
                        type: 'POST',
                        url:'{{ path('getItemsVWP',{'idproyectos':idproyectos,'opc':1}) }}',
                        data: { $idpadre: data.id}
                    }).done(function (json) {
                        row = jQuery.parseJSON(json);
                        row = row.items;
                        option = "";
                        for (i=0; i<row.length; i++) {
                            option += "<tr><td>"+row[i].estado+"</td><td>"+row[i].DATE+"</td></tr>";
                        }
                        $("#tbodyItems").empty();
                        $("#tbodyItems").append(option);
                        $(".titleItems").text('CORRECTED DURING SESSION');

                        $("#modalItems").modal();

                    });

                }


                // Outstanding corrections
                else if(table.column($(this).index() + ':visIdx').index() == 13){
                    $.ajax({
                        type: 'POST',
                        url:'{{ path('getItemsVWP',{'idproyectos':idproyectos,'opc':2}) }}',
                        data: { $idpadre: data.id}
                    }).done(function (json) {
                        row = jQuery.parseJSON(json);
                        row = row.items;
                        option = "";
                        for (i=0; i<row.length; i++) {
                            option += "<tr><td>"+row[i].estado+"</td><td>"+row[i].DATE+"</td></tr>";
                        }
                        $("#tbodyItems").empty();
                        $("#tbodyItems").append(option);
                        $(".titleItems").text('REMAINING CORRECTIONS');

                        $("#modalItems").modal();

                    });

                }


                // UnObservable Items
                else if(table.column($(this).index() + ':visIdx').index() == 14){
                    $.ajax({
                        type: 'POST',
                        url:'{{ path('getItemsVWP',{'idproyectos':idproyectos,'opc':3}) }}',
                        data: { $idpadre: data.id}
                    }).done(function (json) {
                        row = jQuery.parseJSON(json);
                        row = row.items;
                        option = "";
                        for (i=0; i<row.length; i++) {
                            option += "<tr><td>"+row[i].estado+"</td><td>"+row[i].DATE+"</td></tr>";
                        }
                        $("#tbodyItems").empty();
                        $("#tbodyItems").append(option);
                        $(".titleItems").text('UNOBSERVABLE');

                        $("#modalItems").modal();

                    });
                }





            } );




            $("#customer").change(function () {
                data ={};
                data['customer'] = $(this).val();

                $.getJSON('{{path('getDataByCustomerUSA')}}',data, function (data) {
                    regions = data.regions;
                    markets = data.markets;
                    opc = "<option value=''>ALL REGION</option>"
                    for(i=0; i < regions.length; i++){
                        opc += "<option value='"+regions[i].EricssonRegion+"'>"+regions[i].EricssonRegion+"</option>"

                    }
                    $("#regions").empty();
                    $("#regions").change();
                    $("#regions").append(opc);
                    opc = "<option value=''>ALL MARKET</option>"
                    for(i=0; i < markets.length; i++){
                        opc += "<option value='"+markets[i].EricssonMarket+"'>"+markets[i].EricssonMarket+"</option>"

                    }
                    $("#market").empty();
                    $("#market").change();
                    $("#market").append(opc);

                });



            });
            $("#btnSearch").click(function () {
                $("#cargar").css('display','');
                table.ajax.reload(function ( json ) {
                $("#cargar").css('display','none');
            });

            })

        });

    </script>


<div class="panel panel-success">
    <div class="panel-heading"> FILTERS </div>
    <div class="panel-body" id="avances">
        <div class="col-lg-12">

            <div id="range" class="col-lg-6">
                <div class="col-lg-1"><label>FROM</label></div>
                <div class="col-lg-5"><input class="form-control datetimepicker1" id="sinceDate" name="sinceDate"
                                             data-date-format="YYYY-MM-DD"></div>
                <div class="col-lg-1"><label>TO</label></div>
                <div class="col-lg-5"><input class="form-control datetimepicker1" id="toDate" name="toDate"
                                             data-date-format="YYYY-MM-DD"></div>

            </div>
        </div>
    <div class="col-lg-12">
        <div class="col-lg-3">
            <label>Customer</label>
            <select class="js-example-tokenizer"   name="cu" id="customer">
                <option value="">ALL CUSTOMER</option>
                <option value="AT&T">AT&T</option>
                <option value="ROGERS">ROGERS</option>
                <option value="SPRINT">SPRINT</option>
                <option value="T-MOBILE">T-MOBILE</option>
                <option value="SOUTHERNLINC">SOUTHERNLINC</option>
                <option value="VERIZON">VERIZON</option>
            </select>
        </div>
        <div class="col-lg-3">
            <label>Market</label>
            <select class="js-example-tokenizer" multiple  name="cu" id="market">
            </select>
        </div>
        <div class="col-lg-3">
            <label>Vendor</label>
            <select class="js-example-tokenizer" multiple  name="cu" id="vendor">
                <option value="">All Vendors</option>
                {% for vendor in vendors %}
                    <option>{{ vendor.vendor }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-lg-3">
            <label>RCM</label>
            <select class="js-example-tokenizer" multiple  name="cu" id="rcm">
                <option value="">All RCM</option>
                {% for supervisor in supervisores %}
                    <option value="{{ supervisor.idUser }}">{{ supervisor.nombre }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="col-lg-2 col-lg-offset-5">
        <br>
        <button class="btn btn-info" id="btnSearch">
            SEARCH
        </button>
    </div>
    </div>
</div>

    <div class="col-lg-12" style="margin-top:100px">

        <table id="example" class="display " cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Date Scheduled</th>
                <th>Punchwalk Type</th>
                <th>Site ID</th>
                <th>Customer</th>
                <th>Market</th>
                <th>RCM</th>
                <th>Supplier</th>
                <th>Market CM</th>
                <th>Crew Lead Name</th>
                <th>Crew Lead Email</th>
                <th>Crew Lead Phone Number</th>
                <th>Technology</th>

                <th>Time Scheduled</th>

                <th>VPW Activity Status</th>
                <th>Result</th>

                <th>SRS Result</th>

                <th>Failed Items</th>
                <th>Corrected During Punch</th>
                <th>Outstanding Corrections</th>
                <th>Unobservable Items</th>

                <th>Findings</th>

                <th>CX Checklist Status</th>

                <th>RCM Admin Time (Minutes)</th>
                <th>RCM VPW Time (MINUTES)</th>
                <th>RCM Down Time (Minutes)</th>
                <th>RCM Total Time (Minutes)</th>

                <th>Video Tool Used</th>
                <th>Video Tool Issues</th>
                <th>Comments</th>








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


    <div class="modal modal-wide fade" id="modalItems" tabindex="-1" role="dialog" aria-labelledby="modalItems" style="width: 80%" >
        <div class="modal-dialog" role="document">

            <div class="modal-content">
                <div class="modal-header  btn-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">ITEMS <span class="titleItems"></span></h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <table class="display  dataTable no-footer " cellspacing="0" width="100%">
                                <thead>
                                <th>TASK  <span class="titleItems"></span></th>
                                <th>DATE</th>
                                </thead>
                                <tbody id="tbodyItems">

                                </tbody>
                            </table>

                        </div>
                    </div>



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <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 %}