{% 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 yearFunc() {
            $("#yearInput").css('display', '');
            $("#monthInput").css('display', 'none');
            $("#weeklyDatePicker").css('display', 'none');
            $("#yearInput, #monthInput, #weeklyDatePicker").val('');
            $("#iniWeek").val('');
            $("#iniWeek").change();
        }
        function monthFunc() {
            $("#yearInput").css('display', 'none');
            $("#monthInput").css('display', '');
            $("#weeklyDatePicker").css('display', 'none');
            $("#yearInput, #monthInput, #weeklyDatePicker").val('');
            $("#iniWeek").val('');
            $("#iniWeek").change();

        }
        function weekFunc() {
            $("#yearInput").css('display', 'none');
            $("#monthInput").css('display', 'none');
            $("#weeklyDatePicker").css('display', '');
            $("#yearInput, #monthInput, #weeklyDatePicker").val('');
            $("#iniWeek").val('');
            $("#iniWeek").change();

        }

        $(function () {
            $("#yearInput").css('display', '');
            $("#monthInput").css('display', 'none');
            $("#weeklyDatePicker").css('display', 'none');

            moment.locale('en', {
                week: {dow: 1} // Monday is the first day of the week
            });


            $("#yearInput").datetimepicker({
                format: 'YYYY',
                viewMode: "years"
            });
            $("#yearInput").on('dp.change', function (e) {

                $("#yearInput").datetimepicker('destroy');
                $("#yearInput").datetimepicker({
                    format: 'YYYY',
                    viewMode: "years",
                });
                $("#iniWeek").val($("#yearInput").val());
                $("#iniWeek").change();

            });


            $("#monthInput").datetimepicker({
                format: 'MM/YYYY',
                viewMode: "months"
            });
            $("#monthInput").on('dp.change', function (e) {

                $("#monthInput").datetimepicker('destroy');
                $("#monthInput").datetimepicker({
                    format: 'MM/YYYY',
                    viewMode: "months",
                });
                $("#iniWeek").val(moment($("#monthInput").val(), "MM/YYYY").format("YYYY-MM"));
                $("#iniWeek").change();

            });


            $("#weeklyDatePicker").datetimepicker({
                format: 'MM/DD/YYYY'
            });

            $('#weeklyDatePicker').on('dp.change', function (e) {
                // console.log(e);

                value = $("#weeklyDatePicker").val();
                firstDate = moment(value, "MM/DD/YYYY").day(1).format("MM/DD/YYYY");
                lastDate = moment(value, "MM/DD/YYYY").day(7).format("MM/DD/YYYY");
                $("#iniWeek").val(moment(value, "MM/DD/YYYY").day(1).format("YYYY-MM-DD"));
                $("#endWeek").val(moment(value, "MM/DD/YYYY").day(7).format("YYYY-MM-DD"));
                $("#iniWeek").change();
                $("#weeklyDatePicker").val(firstDate + " - " + lastDate);
                $("#weeklyDatePicker").text(firstDate + " - " + lastDate);
                $("#weeklyDatePicker2").val(firstDate + " - " + lastDate);
                $(this).datetimepicker('close');
            });


            $("#iniWeek").change(function () {
                $("#rowBody").empty();
                $("#rowBody").css('display', 'none');

            });


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

            var table = $('#example').DataTable({
                dom: 'Bfrtip',
                "ajax": {
                    "url": "{{ path('showVPWReportTT',{'idproyectos':idproyectos,'idmodule':10}) }}",
                    "type": "POST",
                    data: function (d) {
                        d.idproveedor = $('#idproveedor').val();
                        d.market = $('#market').val();
                        d.vendor = $('#vendor').val();
                        d.rcm = $('#rcm').val();
                        d.iniWeek = $('#iniWeek').val();
                        d.endWeek = $('#endWeek').val();
                        d.typeDate = $("input[name=typeDate]:checked").val();

                        d.vpwStatus = $('#vpwStatus').val();
                        d.editorUser = $('#editorUser').val();
                    }
                },
                columns: [
                    {"data": "Id", "visible": false, "searchable": false},
                    {"data": "SiteID"},
                    {"data": "ContinuusID", "visible": false, "searchable": false},
                    {"data": "PACEID"},
                    {"data": "FALocation"},
                    {"data": "Technology"},
                    {"data": "Market"},
                    {"data": "VPWType"},
                    {"data": "VPWDate"},
                    {"data": "AuditType"},
                    {"data": "Exception", "visible": false, "searchable": false},
                    {"data": "ExceptionReason", "visible": false, "searchable": false},
                    {"data": "ExceptionRecdDate", "visible": false, "searchable": false},
                    {"data": "ExceptionProcessedDate", "visible": false, "searchable": false},
                    {"data": "PPSP", "visible": false, "searchable": false},
                    {"data": "PPRCM", "visible": false, "searchable": false},
                    {"data": "PPAssignedDate", "visible": false, "searchable": false},
                    {"data": "PPStatus", "visible": false, "searchable": false},
                    {"data": "PPURL", "visible": false, "searchable": false},
                    {"data": "PPPhotosNeeded", "visible": false, "searchable": false},
                    {"data": "VideoTool", "visible": false, "searchable": false},
                    {"data": "Supplier", "visible": false, "searchable": false},
                    {"data": "RemoteCM"},
                    {"data": "VCOPEditor"},
                    {"data": "VCOPURL", "visible": false, "searchable": false},
                    {"data": "VCOPStatus"},
                    {"data": "KalturaStatus", "visible": false, "searchable": false},
                    {"data": "SwiftTracstatus", "visible": false, "searchable": false},
                    {"data": "VCOPPhotosNeeded", "visible": false, "searchable": false},
                    {"data": "VCOPComments", "visible": false, "searchable": false},
                    {"data": "SwiftTracSubmittedDate", "visible": false, "searchable": false},
                    {"data": "VCOPURLDate", "visible": false, "searchable": false},
                    {"data": "VCOPCorrectionsRecdDate", "visible": false, "searchable": false},
                    {"data": "VCOPEditStartDate", "visible": false, "searchable": false},
                    {"data": "VCOPAssignedDate", "visible": false, "searchable": false},
                    {"data": "VQAGSCRecdDate", "visible": false, "searchable": false},
                    {"data": "VQAGSCSubdDate", "visible": false, "searchable": false},
                    {"data": "RQCLStatus", "visible": false, "searchable": false},
                    {"data": "RQCLStatusDate", "visible": false, "searchable": false},
                    {"data": "RQCLComments", "visible": false, "searchable": false},
                    {"data": "ATTSPDeliverables", "visible": false, "searchable": false},
                    {"data": "ATTSPDeliverablesCMApproved", "visible": false, "searchable": false},
                    {"data": "Billable", "visible": false, "searchable": false},
                    {"data": "CASPRPTN", "visible": false, "searchable": false},
                    {"data": "COPComments", "visible": false, "searchable": false},
                    {"data": "COPReviewAssignedDate", "visible": false, "searchable": false},
                    {"data": "COPStatus", "visible": false, "searchable": false},
                    {"data": "COPUploadedBy", "visible": false, "searchable": false},
                    {"data": "EApprovedDate", "visible": false, "searchable": false},
                    {"data": "FilenetUploadDate", "visible": false, "searchable": false},
                    {"data": "NTPDocUploadDate", "visible": false, "searchable": false},
                    {"data": "OriginalOOMID", "visible": false, "searchable": false},
                    {"data": "ReviewComplete", "visible": false, "searchable": false},
                    {"data": "RadioCOPuploadDate", "visible": false, "searchable": false},
                    {"data": "PIMHygieneCOP", "visible": false, "searchable": false},
                    {"data": "AgingSites", "visible": false, "searchable": false},
                    {"data": "ItemType", "visible": false, "searchable": false},
                    {"data": "Path", "visible": false, "searchable": false}
                ],
                lengthMenu: [
                    [25, 50, -1],
                    ['10 rows', '25 rows', '50 rows', 'Show all']
                ],
                buttons: [
                    'excel'
                ]
            });


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

            })

        });

    </script>
    <center>
        <span style="font-size: 32px">VCOP Traker AT&T REPORT</span>
        <br>
    </center>


    <div class="panel panel-info">
        <div class="panel-heading"> FILTERS</div>
        <div class="panel-body" id="avances">
            <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="row">
                    <div class="col-lg-2" style="margin-top: 10px">
                        <div class="btn-group" data-toggle="buttons">

                            <label class="btn btn-default active form-check-label" onclick="yearFunc()">
                                <input class="form-check-input" type="radio" name="typeDate" checked autocomplete="off"
                                       value="Y">Year
                            </label>

                            <label class="btn btn-default form-check-label" onclick="monthFunc()">
                                <input class="form-check-input" type="radio" name="typeDate" autocomplete="off"
                                       value="M">Month
                            </label>

                            <label class="btn btn-default form-check-label" onclick="weekFunc()" id="weekRadio">
                                <input class="form-check-input" type="radio" name="typeDate" autocomplete="off"
                                       onclick="weekFunc()" value="W">Week
                            </label>

                        </div>
                    </div>
                    <div class="col-lg-3" style="margin-top: 10px">
                        <label>VPW Status</label>
                    </div>
                    <div class="col-lg-3" style="margin-top: 10px">
                        <label>Market</label>
                    </div>
                    <div class="col-lg-3" style="margin-top: 10px">
                        <label>Editor</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-2">
                        <input type='text' id="yearInput" placeholder="Select day" class="form-control "
                               value="{{ "now"|date('Y') }}"/>
                        <input type='text' id="monthInput" placeholder="Select day" class="form-control "/>
                        <input type='text' id="weeklyDatePicker" placeholder="Select day" class="form-control "/>
                    </div>
                    <div class="col-lg-3">
                        <select class="form-control" id="vpwStatus">
                            <option></option>
                            <option>NO STARTED</option>
                            <option>ASSIGNED</option>
                            <option>IN PROGRESS</option>
                            <option>VSS/VCOP COMPLETED</option>
                            <option>RCM Action</option>
                            <option>Pending Market</option>
                            <option>In Progress</option>
                            <option>Pending Power Plant</option>
                            <option>Pending SP Photos</option>
                            <option>No VCOP</option>
                            <!--option >
                                Need a checklist, emailed the VCOP team
                            </option>
                            <option >
                                Need photos from the GC, emailed the GC
                            </option>
                            <option >
                                Pending RSAM approval, emailed the assigned RSAM
                            </option>
                            <option >
                                Checklist/full exception finalized by RSAM, emailed the VCOP and sent to the editor
                            </option>
                            <option >Video
                                submitted to AT&T
                            </option>
                            <option >
                                VCOP/Full exception audited and approved by AT&T
                            </option-->
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <select class="form-control" id="market">
                            <option></option>
                            {% for market in markets %}
                                <option>{{ market.CustomerMarket }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-lg-3">
                        <select class="form-control" id="editorUser">
                            <option></option>
                            {% for user in GSCUsers %}
                                <option>{{ user.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

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

                <input type="hidden" id="iniWeek" name="iniWeek" value="{{ "now"|date('Y') }}">
                <input type="hidden" id="endWeek" name="endWeek">
            </div>
        </div>
    </div>

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

        <table id="example" class="display " cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Id</th>
                <th>Site ID</th>
                <th>Continuus ID</th>
                <th>PACE ID</th>
                <th>FA Location</th>
                <th>Technology</th>
                <th>Market</th>
                <th>VPW Type</th>
                <th>VPW Date</th>
                <th>Audit Type</th>
                <th>Exception</th>
                <th>Exception Reason</th>
                <th>Exception Rec'd Date</th>
                <th>Exception Processed Date</th>
                <th>PP SP</th>
                <th>PP RCM</th>
                <th>PP Assigned Date</th>
                <th>PP Status</th>
                <th>PP URL</th>
                <th>PP Photos Needed</th>
                <th>Video Tool</th>
                <th>Supplier</th>
                <th>Remote CM</th>
                <th>VCOP Editor</th>
                <th>VCOP URL</th>
                <th>VCOP Status</th>
                <th>Kaltura Status</th>
                <th>SwiftTrac status</th>
                <th>VCOP Photos Needed</th>
                <th>VCOP Comments</th>
                <th>SwiftTrac Submitted Date</th>
                <th>VCOP URL Date</th>
                <th>VCOP Corrections Rec'd Date</th>
                <th>VCOP Edit Start Date</th>
                <th>VCOP Assigned Date</th>
                <th>VQA GSC Rec'd Date</th>
                <th>VQA GSC Sub'd Date</th>
                <th>RQCL Status</th>
                <th>RQCL Status Date</th>
                <th>RQCL Comments</th>
                <th>AT&T SP Deliverables</th>
                <th>AT&T SP Deliverables CM Approved</th>
                <th>Billable</th>
                <th>CASPR/PTN</th>
                <th>COP Comments</th>
                <th>COP Review Assigned Date</th>
                <th>COP Status</th>
                <th>COP Uploaded By</th>
                <th>E/// Approved Date</th>
                <th>Filenet Upload Date</th>
                <th>NTP Doc Upload Date</th>
                <th>Original OOM ID</th>
                <th>Review Complete?</th>
                <th>Radio COP upload Date</th>
                <th>PIM Hygiene COP</th>
                <th>Aging Sites (# days)</th>
                <th>Item Type</th>
                <th>Path</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 %}