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

{% 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');
            $("#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-basic-single").select2({
                placeholder: "Select one...",
                allowClear: true
            });

            $("#btnGenerateReport").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();
                    $("#showSitesInHoldUSA").load('{{ path('showSitesInHoldUSA',{'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('generateQualityReport',{'idproyectos':idproyectos}) }}" onsubmit="return validaQualityReportForm()">

    <div class="col-lg-12  table-bordered" >
        <br>
        <center><h1>Sites in Hold 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>
        </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>
            {% if is_granted('ROLE_CONTROL_CASOS_5') %}
                <div class="col-lg-2" style="margin-top: 10px">
                    <label>RCM</label>
                </div>
            {% endif %}
            <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>Supplier</label>
            </div>
            <div class="col-lg-2" style="margin-top: 10px">
                <label>Market</label>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2" >
                <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>
            {% 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">
                <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="vendor" name="vendor">
                    <option></option>
                    {% for vendor in vendors %}
                        <option>{{ vendor.vendor }}</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.EricssonMarket }}</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="button">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="showSitesInHoldUSA" style="margin-top: 130px">
    </div>
{% endblock %}