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

{% block dashboard %}
    <style>

        .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
            });

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

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

                    }else{
                        $("#showVSSReportRCMUSA").load('{{ path('showVSSReportRCMUSAMonthAndYear',{'idproyectos':idproyectos}) }}',{$iniDate: $("#iniWeek").val(),
                            $endDate:$("#endWeek").val(), $iduser:$("#iduser").val(), $network: $("#network").val(), $site: $("#sites").val(),
                            $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");
                }
            })


                })
                </script>

    <div class="col-lg-12  table-bordered" >

        <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>Network Code</label>
            </div>
            <div class="col-lg-2" style="margin-top: 10px">
                <label>Site</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>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">
                    <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="network">
                    <option></option>
                    {% for network in networks %}
                        <option>{{ network.networkcode }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-lg-2">
                <input type="text" class="form-control" id="sites">
            </div>
            <div class="col-lg-2">
                <select  class="js-example-basic-single" id="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="market">
                    <option></option>
                    {% for market in markets %}
                        <option>{{ market.ericssonMarket }}</option>
                    {% endfor %}
                </select>
            </div>

        </div>

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

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