{% 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 () {

            $("#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);

                });



            });


            $('.datetimepicker1').datetimepicker();
            $('#datetimepicker8').datetimepicker();


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

            var table = $('#example').DataTable( {
                dom: 'Bfrtip',
                "ajax": {
                    "url": "{{ path('showVSSComparedReport',{'idproyectos':idproyectos,'idmodule':10}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.dateFrom= $('#dateFrom').val();
                        d.dateTo= $('#dateTo').val();
                    }
                },
                columns: [
                    { "data": "sitio" },
                    { "data": "CustomerMarket"  },
                    { "data": "CustomerRegion" },
                    { "data": "customer" },




                    { "data": "startDate"},
                    { "data": "actualStarted"  },
                    { "data": "completedForecastDate" },
                    { "data": "actualCompleted"  },
                    { "data": "comment" }
                ],
                lengthMenu: [
                    [  25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 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 () {
                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 class="col-lg-1">
                    <label>From</label>
                    </div>
                <div class="col-lg-2">


                    <div class="form-group">
                        <div class='input-group date datetimepicker1' >
                            <input id="dateFrom" type='text' class="form-control" data-date-format="YYYY-MM-DD" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>


                </div>
                <div class="col-lg-1">
                    <label>To</label>
                </div>
                <div class="col-lg-2">


                    <div class="form-group">
                        <div class='input-group date datetimepicker1' >
                            <input id="dateTo" type='text' class="form-control" data-date-format="YYYY-MM-DD" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="col-lg-2">
            <select class="js-example-tokenizer"   name="cu" id="customer">
                <option value="ALL">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-2" id="parametros" >
                    <select class="form-control" id="regions" name="region">
                        <option value="ALL">ALL REGION</option>
                    </select>
                </div>
        <div class="col-lg-2">
            <select class="js-example-tokenizer"  name="cu" id="market">
                <option value="ALL">ALL MARKET</option>
            </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>Site ID</th>
                <th>Market</th>
                <th>Region</th>
                <th>CU</th>
                <th>Schedule Date</th>
                <th>Actual Start</th>
                <th>Scheduled Complete</th>
                <th>Actual Complete</th>
                <th>Commets</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 %}