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

{% block menuTop %}
    <div class="col-lg-12 col-xs-12">
        <div>

            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

        </div>


    </div>
{% endblock %}
{% block dashboard %}
    <style>


        /* 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;
        }

        .js-example-basic-single {
            width: 100%;
        }

        .js-example-basic-single .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }

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

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

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

        }

        $(function () {
            $("#yearInput").css('display', '');
            $("#monthInput").css('display', 'none');
            $("#weeklyDatePicker").css('display', 'none');
            $(".sinceDate").css('display', 'none');
            $(".toDate").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"
            });
            $("#sinceDate, #toDate").datetimepicker({
                format: 'YYYY-MM-DD'
            });
            $("#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');
            });


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

                value = $("#sinceDate").val();
                $("#iniWeek").val(value);
                $(this).datetimepicker('close');
            });
            $('#toDate').on('dp.change', function (e) {
                // console.log(e);

                value = $("#toDate").val();
                $("#endWeek").val(value);
                $(this).datetimepicker('close');
            });


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

            });


            $(".js-example-basic-single").select2({
                placeholder: "Select one...",
                allowClear: true
            });

            $("#btnShowVSSReport").click(function () {
                vpw = 0;
                vss = 0;

                if ($("#vpw").is(':checked')) {
                    vpw = 1;
                }
                if ($("#vss").is(':checked')) {
                    vss = 1;
                }
                if (vpw == 0 && vss == 0) {
                    swal("Error", "It has to choose one of type (VSS or VPW)!", "error");
                    return false;

                }

                if ($("#iniWeek").val() != '') {
                    $("#cargar").css('display', '');
                    $("#showVSSReportRCMUSA").empty();
                    $("#showVSSReportRCMUSA").load('{{ path('showVSSReportRCMADMINUSA',{'idproyectos':idproyectos}) }}', {
                        $iniDate: $("#iniWeek").val(),
                        $endDate: $("#endWeek").val(),
                        $iduser: $("#iduser").val(),
                        $network: $("#network").val(),
                        $site: $("#sites").val(),
                        $vss: vss,
                        $vpw: vpw,
                        $customer: $("#customer").val(),
                        $market: $("#market").val(),
                        $typeDate: $("input[name=typeDate]:checked").val()
                    }, function () {

                        $("#cargar").css('display', 'none');
                    })

                } else {

                    swal("Error", "It has to pick up a date!", "error");
                }
            })


        })
        function validaQualityReportForm() {
            if ($("#iniWeek").val() == '') {
                swal("Error", "It has to pick up a date!", "error");
                return false;

            }

        }
    </script>
    <form id="formQuality" method="post" action="{{ path('generateInBldExcel',{'idproyectos':idproyectos}) }}"
          onsubmit="return validaQualityReportForm()">

        <div class="col-lg-12  table-bordered">
            <br>
            <center><h1>In Building Report</h1></center>
            <br>

            <div class="row">
                <div class="col-lg-1" id="parametros2" style="margin-top: 5px">
                    <label>TYPE:</label>
                </div>
                <div class="col-lg-3" id="parametros2" style="margin-top: 5px">
                    <label for="vpw" class="btn btn-default">VPW <input type="checkbox" name="vpw" checked id="vpw"
                                                                        div="VPW" class="badgebox" value="1"><span
                                class="badge">&check;</span></label>


                    <label for="vss" class="btn btn-default">VSS <input type="checkbox" name="vss" checked id="vss"
                                                                        div="VSS" class="badgebox" value="1"><span
                                class="badge">&check;</span></label>


                </div>

                {% if is_granted('ROLE_CONTROL_CASOS_5') %}
                    <div class="col-lg-2" style="margin-top: 10px">
                        <label>RCM</label>
                    </div>
                {% endif %}
                {% if is_granted('ROLE_CONTROL_CASOS_5') %}
                    <div class="col-lg-2">
                        <select class="js-example-basic-single" id="iduser" name="iduser">
                            <option></option>
                            {% for user in users %}
                                <option value="{{ user.idUser }}">{{ user.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                {% else %}
                    <input type="hidden" id="iduser" value="{{ app.user.idUser }}" class="form-control">
                {% endif %}

                <div class="col-lg-2" style="margin-top: 10px">
                    <label>Supplier</label>
                </div>
                <div class="col-lg-2">
                    <select class="js-example-basic-single" id="vendor" name="vendor">
                        <option></option>
                        {% for vendor in vendors %}
                            <option>{{ vendor.vendor }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-4" 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>

                        <label class="btn btn-default form-check-label" onclick="rangeFunc()" id="weekRadio">
                            <input class="form-check-input" type="radio" name="typeDate" autocomplete="off"
                                   onclick="rangeFunc()" value="R">Range Date
                        </label>

                    </div>
                </div>
                <div class="col-lg-2" style="margin-top: 10px">
                    <label>Crew Lead</label>
                </div>
                <div class="col-lg-2" style="margin-top: 10px">
                    <label>Customer:</label>
                </div>
                <div class="col-lg-2" style="margin-top: 10px">
                    <label>Region</label>
                </div>
                <div class="col-lg-2" style="margin-top: 10px">
                    <label>Market</label>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4">
                    <input type='text' id="yearInput" placeholder="Select day" class="form-control "/>
                    <input type='text' id="monthInput" placeholder="Select day" class="form-control "/>
                    <input type='text' id="weeklyDatePicker" placeholder="Select day" class="form-control "/>

                    <div class="col-lg-2 sinceDate"><label>Since:</label></div>
                    <div class="col-lg-10 sinceDate"><input type='text' id="sinceDate" placeholder="Select day"
                                                            class="form-control "/></div>
                    <div class="col-lg-2 toDate"><label>To:</label></div>
                    <div class="col-lg-10 toDate"><input type='text' id="toDate" placeholder="Select day"
                                                         class="form-control "/></div>
                </div>
                <div class="col-lg-2">
                    <select class="js-example-basic-single" id="solicitante" name="solicitante">
                        <option></option>
                        {% for usersExternal in usersExternals %}
                            <option>{{ usersExternal.solicitante }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2">
                    <select class="js-example-basic-single" id="customer" name="customer">
                        <option></option>
                        {% for customer in customers %}
                            <option>{{ customer.customer }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2">
                    <select class="js-example-basic-single" id="region" name="region">
                        <option></option>
                        {% for region in regions %}
                            <option>{{ region.customerRegion }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-lg-2">
                    <select class="js-example-basic-single" id="market" name="market">
                        <option></option>
                        {% for market in markets %}
                            <option>{{ market.customerMarket }}</option>
                        {% endfor %}
                    </select>
                </div>

            </div>
            <br>

            <div class="row" style="padding-bottom: 10px">
                <div class="col-lg-2 col-lg-offset-5" id="DateDemo">
                    <button class="btn btn-info" id="btnGenerateReport" type="submit">Generate Report</button>
                    <input type="hidden" id="iniWeek" name="iniWeek">
                    <input type="hidden" id="endWeek" name="endWeek">
                </div>

            </div>
        </div>
    </form>
    <div class="row" id="showVSSReportRCMUSA" style="margin-top: 130px">
    </div>
{% endblock %}