{% 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 stylesheets %}
    <link rel="stylesheet" href="{{ asset('datatables/css/dataTables.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/buttons.bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{ asset('datatables/css/select.bootstrap.min.css')}}">
    <style>  #ui-datepicker-div {
            z-index: 9999999;
        }

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


    </style>

    <style>



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

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

        .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-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);}
        }
        table {
            font-size: 11px;
            border: none !important;
        }
        table tr {
            font-weight: normal;
        }
    </style>
{% endblock %}

{% block dashboard %}
    <script>
        $(function() {
            $("#vpwCheck").click(function () {
                    $(".datatimeVPW, .datatimeVPW2").css('display', '');
                $(".TCM").css('display', 'none');
                $(".RCM").css('display', '');
                $(".remotePunch").css('display', '');
                //$("#supervisores").val('');
                //$("#supervisores").change();


            });
        });
        function VSSOpc(){
            $(".datatimeVPW").css('display', 'none');
            $(".datatimeVPW2").css('display', '');
            $(".RCM").css('display', '');
            $(".TCM").css('display', 'none');
            $(".remotePunch").css('display', 'none');
            //$("#supervisores").val('');
            //$("#supervisores").change();


        }
        function ACGOpc(){
            $(".datatimeVPW, .datatimeVPW2").css('display', 'none');
            $(".RCM").css('display', 'none');
            $(".TCM").css('display', '');
            $("#supervisores").val('');
            $("#supervisores").change();


        }

    </script>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4">
                <ul class="list-inline">
                    <li>
                        <h1 class="text-muted"><i class="fa fa-globe text-primary"></i>  Región: MANA</h1>
                    </li>
                </ul>
            </div>
            <div class="col-lg-8" style="margin-top: 20px">
                <div class="btn-group nopadding" data-toggle="buttons">
                    <label class="btn btn-default active" for="vssCheck"onclick="VSSOpc()">
                        <input  type="radio"   id="vssCheck"  checked="true" value="0"  name="opc"> VSS
                    </label>
                    <label class="btn btn-default  " id="vpwCheck">
                        <input type="radio"  name="opc" value="1"   > VCOP/VPW
                    </label>

                    <div class="remotePunch" style="display: none">
                        <label for="activeCustomer" class="btn btn-default"><span id="label">Remote Punch</span>
                            <input type="checkbox" id="remotePunch" valueText="1" class="badgebox activeCustomer"><span
                                    class="badge">&check;</span></label>
                    </div>


                </div>



            </div>
        </div>
    
        <div class="row">
            <div class="col-lg-4">
                <select class="form-control" id="supervisores">
                    <option value="">{{ 'ticketDetail.selectsupervisor' | trans }}</option>
                    {% for supervisor in supervisores %}
                        <option value="{{ supervisor.idUser }}" class="{{ supervisor.cargo }}">{{ supervisor.nombre }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-lg-6 col-lg-offset-2">
                <div class="row">
                    <div class="col-lg-4">
                        <label>Select Vendors</label>
                    </div>
                    <div class="col-lg-8">
                        <select  id="vendors" multiple class="js-example-tokenizer"  name="vendor[]">
                            <option></option>
                        </select>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-6 datatimeVPW" style="display: none">
                        <input placeholder="INSERT DATE" id="dateAssign" class="form-control datetimepicker1" data-date-format="YYYY-MM-DD">
                    </div>

                    <div class="col-lg-6 datatimeVPW" style="display: none">
                        <input placeholder="INSERT TIME" id="timeAssign" class="form-control datetimepicker1" data-date-format="HH:mm">

                    </div>

                </div>
                <div class="row">
                    <div class="col-lg-6 datatimeVPW2" style=" ">
                        <label>Time Scheduler (Minutes)</label>
                        <input placeholder="SCHEDULER TIME" id="timeScheduler" class="form-control">
                    </div>
                    <div class="col-lg-6 datatimeVPW2" style=" ">
                        <label>Crew Lead</label>
                        <div class="input-group table-bordered">
                        <select class="js-example-tokenizer" id="crewLead">
                            <option value=""></option>
                            {% for external in usersExternals %}
                            <option value="{{ external.idsolicitante }}">{{ external.solicitante }}</option>
                            {% endfor %}
                        </select> {% if is_granted('ROLE_COORDINADOR') or is_granted("ROLE_CONTROL_CASOS_3") %}
                                <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" id="btnModalUserExternal"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="col-lg-6 " style="padding: 0px">

                            <label>
                                Add {{ 'ticketDetail.modal.cc' | trans }}
                            </label>

                            <div class="input-group table-bordered">
                                <input class="form-control" id="emailNuevoCausas">
                                    <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" id="emailAddCausas"><i
                                            class="fa fa-plus" aria-hidden="true"></i></button>
                            </span>

                            </div>
                            <select id="emailCC" class="js-example-tokenizer" multiple name="emailCC[]">
                                <option></option>
                            </select>
                        </div>
                        <div class="col-lg-6 ">
                            <div class="col-lg-12" style="padding: 0px">
                                <label>SPPM</label>

                                <div class="input-group table-bordered">
                                    <select class="js-example-tokenizer" id="sppmAssign">
                                        <option value=""></option>
                                        {% for external in usersExternalsSPPM %}
                                            <option value="{{ external.idsolicitante }}">{{ external.solicitante }}</option>
                                        {% endfor %}
                                    </select> {% if is_granted('ROLE_COORDINADOR') or is_granted("ROLE_CONTROL_CASOS_3") %}
                                        <span class="input-group-btn">
                                <button class="btn btn-primary" type="button" id="btnModalUserExternalSPPM"><i
                                            class="fa fa-pencil" aria-hidden="true"></i></button>
                            </span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="col-lg-6 col-lg-offset-3" style="margin-top: 15px; ">
                                    <div style="text-align: center">
                                        <button class="btn btn-success"
                                                id="save">{{ 'ticketDetail.assign' | trans | upper }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    </div>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-lg-5" id="supervisoresAsig"></div>
            <div class="col-lg-7" id="ticketsSemana">
                <table id="main_table" class="table table-condensed table-bordered nowrap" width="100%">
                    <thead class="bg-primary">
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th>
                        <th></th> 
                    </thead>     
                    <tbody></tbody>        
                </table> 
            </div>
        </div>
    </div>



    <!----------------------------------------- MODAL SHOWNEW CREW LEAD --------------------------------------------------->




    <div class="modal fade" id="modalCrewLead" tabindex="-1" role="dialog" aria-labelledby="modalCrewLead">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                    <h2 class="modal-title text-center">NEW CREW LEAD</h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <label>NAME</label>
                            <input class="form-control" id="crewLeadName">
                        </div>
                        <div class="col-lg-12">
                            <label>EMAIL</label>
                            <input class="form-control" id="crewLeadEmail">
                        </div>
                        <div class="col-lg-12">
                            <label>PHONE NUMBER</label>
                            <input class="form-control" id="crewLeadPhone">
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                    <button id="saveNewCrewLead" type="button" class="btn btn-primary">Save</button>
                    <!--   <button id="saveRepuesto" type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
        </div>
    </div>


    <!----------------------------------------- MODAL SHOW  SPPM --------------------------------------------------->

    <div class="modal fade" id="modalUserExternalSPPM" tabindex="-1" role="dialog"
         aria-labelledby="modalUserExternalSPPM">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>

                    <h2 class="modal-title text-center">SPPM LIST</h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <button class="btn btn-success pull-right" id="btnModalSPPM"><i class="fa fa-plus"
                                                                                            aria-hidden="true"></i>
                                Create SPPM
                            </button>
                        </div>
                        <div class="col-lg-12" style="margin-top: 10px">
                            <select class="js-example-basic-single" id="userExternalAddSPPM">
                                <option></option>
                                {% for userExternal in usersExternalsSPPM %}
                                    <option value="{{ userExternal.idsolicitante }}"
                                            name="{{ userExternal.solicitante }}"
                                            phone="{{ userExternal.telefono }}" email="{{ userExternal.email }}"
                                            nameCrewLead="{{ userExternal.solicitante }}">{{ userExternal.solicitante }}</option>
                                {% endfor %}
                            </select>


                        </div>
                    </div>
                    <div class="showDataSPPM row">
                        <div class="col-lg-12">
                            <label>Name:</label>
                            <input class="form-control" id="nameCrewLeadSPPM">
                        </div>
                        <div class="col-lg-12">
                            <label>Phone:</label>
                            <input class="form-control" id="phoneSPPM">
                        </div>
                        <div class=" col-lg-12">
                            <label>Email:</label>
                            <input class="form-control" id="emailSPPM">
                        </div>

                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">{{ 'monitorii.close' | trans }}</button>
                    <button id="saveSPPM" type="button" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalSPPM" tabindex="-1" role="dialog" aria-labelledby="modalSPPM">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>

                    <h2 class="modal-title text-center">NEW SPPM</h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <label>NAME</label>
                            <input class="form-control" id="SPPMName">
                        </div>
                        <div class="col-lg-12">
                            <label>EMAIL</label>
                            <input class="form-control" id="SPPMEmail">
                        </div>
                        <div class="col-lg-12">
                            <label>PHONE NUMBER</label>
                            <input class="form-control" id="SPPMPhone">
                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">{{ 'monitorii.close' | trans }}</button>
                    <button id="saveNewSPPM" type="button" class="btn btn-primary">Save</button>
                    <!--   <button id="saveRepuesto" type="button" class="btn btn-primary">Save changes</button>-->
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('datatables/moment.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
    <script src="{{ asset('datatables/js/dataTables.select.min.js') }}"></script>
    <script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
    <script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script>
            
        var translation = {
            'SITIO ID' : '{{ 'CODIGO' | trans }}',
            'SITIO' : '{{ 'SITIO' | trans }}',
            'REGION' : '{{ 'Region' | trans }}',
            'FECHA INICIO PLAN' : '{{ 'monitor.plandate' | trans }}',
            'FECHA INICIO REAL' : '{{ 'FECHA INICIO' | trans }}',
            'RSC' : '{{ 'CSR' | trans }}',
            'EN PROCESO' : '{{ 'EN PROCESO' | trans }}',
            'SUSPENDIDOS' : '{{ 'SUSPENDIDOS' | trans }}',
            'ASIGNADOS' : '{{ 'ticketDetail.assignment' | trans }}',
            'ESTADO SH' : '{{ 'ESTADO SH' | trans }}',
            'ASIGNADO PWM' : '{{ 'ASIGNADO PWM' | trans }}',
            'ASIGNADO SH' : '{{ 'ASIGNADO SH' | trans }}',
        };

        function validateEmail(email) {

            var re = /\S+@\S+\.\S+/;
            return re.test(email);
        }

        $(function() {
            //$("#emailCC").select2();


            $("#emailAddCausas").click(function () {
                var emailNuevo = ($("#emailNuevoCausas").val()).replace(/ /g, '');
                var coma = ',';
                //alert(emailNuevo);
                arrayEmail = emailNuevo.split(',');
                //alert(Array.isArray(arrayEmail));
                if (arrayEmail.length < 2) {
                    //alert('no es array con ,');

                    arrayEmail = emailNuevo.split(';');
                }


                for (i = 0; i < arrayEmail.length; i++) {
                    if (validateEmail(arrayEmail[i]) && arrayEmail[i] != "") {
                        addOption = "<option selected value='" + arrayEmail[i] + "'>" + arrayEmail[i] + "</option>";

                        $("#emailCC").append(addOption);
                        $("#emailCC").change();

                        // $("#" + selectEmail).val($("#" + selectEmail).val() + coma + emailNuevo);
                    }

                }

                $("#emailNuevoCausas").val("");
                return false;
            });



            $("#btnModalSPPM").click(function () {
                $("#modalSPPM").modal();
            });


            $("#saveNewSPPM").click(function () {
                name = $("#SPPMName").val();
                phone = $("#SPPMPhone").val();
                email = $("#SPPMEmail").val();
                if (name == "") {
                    sweetAlert("Oops...", "It is missing the crew lead's name", "error");
                    return false;
                }
                if (email == "") {
                    sweetAlert("Oops...", "It is missing the  crew lead's email", "error");
                    return false;
                }
                if (phone == "") {
                    sweetAlert("Oops...", "It is missing the  crew lead's phone", "error");
                    return false;
                }
                $.ajax({
                    type: 'POST',
                    url: '{{ path('saveNewSPPM', {'idproyectos': idproyectos, 'idticket':0}) }}',
                    data: {$name: name, $phone: phone, $email: email}
                }).done(function (json) {
                    //jQuery.parseJSON(json);
                    solicitantes1 = jQuery.parseJSON(json.solicitantes);
                    //solicitantes = json.solicitantes;
                    tr = "<option><option>";
                    for (i = 0; i < solicitantes1.length; i++) {
                        tr += "<option value='" + solicitantes1[i].idsolicitante + "' name='" + solicitantes1[i].solicitante + "' phone='" + solicitantes1[i].telefono + "' email='" + solicitantes1[i].email + "'  nameCrewLead='" + solicitantes1[i].solicitante + "'>" + solicitantes1[i].solicitante + "</option>";
                    }
                    $("#sppmAssign").empty();
                    $("#sppmAssign").val('');
                    $("#sppmAssign").change();
                    $("#sppmAssign").append(tr)

                    console.log(json);
                    $("#modalSPPM").modal('hide');
                })
            });


            $("#saveNewCrewLead").click(function () {
                name = $("#crewLeadName").val();
                phone = $("#crewLeadPhone").val();
                email = $("#crewLeadEmail").val();
                if(name==""){
                    sweetAlert("Oops...", "It is missing the crew lead's name", "error");
                    return false;
                }
                if(email==""){
                    sweetAlert("Oops...", "It is missing the  crew lead's email", "error");
                    return false;
                }
                if(phone==""){
                    sweetAlert("Oops...", "It is missing the  crew lead's phone", "error");
                    return false;
                }
                $.ajax({
                    type:'POST',
                    url:'{{ path('saveNewCrewLead', {'idproyectos': idproyectos, 'idticket':0}) }}',
                    data: {$name: name, $phone:phone, $email:email}
                }).done(function (json) {
                    //jQuery.parseJSON(json);
                    solicitantes1 = jQuery.parseJSON(json.solicitantes);
                    //solicitantes = json.solicitantes;
                    tr = "";
                    for (i=0; i< solicitantes1.length; i++) {
                        tr += "<option value='"+solicitantes1[i].idsolicitante+"' name='"+solicitantes1[i].solicitante+"' phone='"+solicitantes1[i].telefono+"' email='"+solicitantes1[i].email+"'>"+solicitantes1[i].solicitante+"</option>";
                    }
                    //$("#crewLeadShowName").text(name);
                    //$("#crewLeadShowPhone").text(phone);
                    $("#crewLead").empty();
                    $("#crewLead").val('');
                    $("#crewLead").change();
                    $("#crewLead").append(tr)

                    //console.log(json);
                    $("#modalCrewLead").modal('hide');
                })
            });


            $("#saveSPPM").click(function () {
                //name = $("#userExternalAddSPPM").attr('name');
                phone = $("#phoneSPPM").val();
                email = $("#emailSPPM").val();
                name = $("#nameCrewLeadSPPM").val();
                idsolicitante = $("#userExternalAddSPPM").val();

                if (idsolicitante == "") {
                    sweetAlert("Oops...", "It is missing select to crew lead", "error");
                    return false;
                } else {

                    $.ajax({
                        type: 'POST',
                        url: '{{ path('saveNewSPPM',{'idproyectos':idproyectos, 'idticket':0}) }}',
                        data: {$idsolicitante: idsolicitante, $name: name, $phone: phone, $email: email}
                    }).done(function (json) {
                        //jQuery.parseJSON(json);
                        solicitantes1 = jQuery.parseJSON(json.solicitantes);
                        //solicitantes = json.solicitantes;
                        tr = "";
                        for (i = 0; i < solicitantes1.length; i++) {
                            tr += "<option value='" + solicitantes1[i].idsolicitante + "' name='" + solicitantes1[i].solicitante + "' phone='" + solicitantes1[i].telefono + "' email='" + solicitantes1[i].email + "'>" + solicitantes1[i].solicitante + "</option>";
                        }
                        //$("#crewLeadShowName").text(name);
                        //$("#crewLeadShowPhone").text(phone);
                        $("#sppmAssign").empty();
                        $("#sppmAssign").val('');
                        $("#sppmAssign").change();
                        $("#sppmAssign").append(tr)

                    });
                }

            });

            $("#btnModalUserExternal").click(function () {
                $("#modalCrewLead").modal();
            });

            $("#btnModalUserExternalSPPM").click(function () {
                $("#modalUserExternalSPPM").modal();
            });


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

            var nowDate = new Date();
            var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);

            today.setDate(today.getDate() - 2);
            $('.datetimepicker1').datetimepicker({
                minDate: today});
                
            var asignacion = [],
                supevisores,
                $supervisores = $("#supervisores"),
                    $vpwCheck = $("#vpwCheck");

            getData();

            $supervisores.change(function() {

                $(this).parent().removeClass('has-error');
                $('#supervisoresAsig').find('tr').removeClass('success');
                $("#" + $(this).val()).addClass('success');
            });

            $("#save").click(function() {
                vpw = $("input[name='opc']:checked").val();
                emailCC = $("#emailCC").val();
                if ($("#remotePunch").prop("checked")) {
                    remotePunch = 1;
                } else {
                    remotePunch = 0;
                }

                if(vpw == 1 ){
                    if($("#crewLead").val()== ''){
                        swal(
                                'Oops...',
                                'Have to choose a crew lead!',
                                'error'
                        )
                        return false;
                    }
                    if($("#timeScheduler").val()== ''){
                        swal(
                                'Oops...',
                                'Have to insert Time Scheduler!',
                                'error'
                        )
                        return false;
                    }
                    if(vpw == 1){
                        if($("#dateAssign").val()== ''){
                            swal(
                                    'Oops...',
                                    'Have to insert the Date!',
                                    'error'
                            )
                            return false;
                        }
                        if($("#timeAssign").val()== ''){
                            swal(
                                    'Oops...',
                                    'Have to insert the Time!',
                                    'error'
                            )
                            return false;
                        }

                    }

                }

                if (asignacion.length == 0) return false;

                var aux = [],
                    t = $(this).prop('disabled', true),
                    header = Object.keys(asignacion);

                for (var i = 0; i < header.length; i++) {

                    aux.push(asignacion[header[i]]);
                }

                
                $.post(
                    "{{ path('asignacionTicketPwmUSA') }}",
                    { tickets: JSON.stringify(aux),
                        $vpwCheck: vpw,
                        $dateAssign: $("#dateAssign").val() ,
                        $timeAssign: $("#timeAssign").val(),
                        $idvendors: $("#vendors").val(),
                        $timeScheduler: $("#timeScheduler").val(),
                        $crewLead: $("#crewLead").val(),
                        $emailCC: $("#emailCC").val(),
                        $sppm: $("#sppmAssign").val(),
                        $remotePunch: remotePunch

                    },
                    function(data) {
                        $("#vendors").val('');
                        $("#crewLead").val('');
                        $("#sppmAssign").val('');
                        $("#vendors").change();
                        $("#crewLead").change();
                        $("#sppmAssign").change();
                        $("#timeAssign").val('')
                        $("#dateAssign").val('')
                        $("#timeScheduler").val('')

                        asignacion = [];
                        getData();
                        t.prop('disabled', false);
                        $supervisores.val('');
                    }, 
                'json');
            });

            function getData() {
                
                $.isLoading({text:"Loading"});

                $.getJSON(
                    '{{path('getAsignacionGenUSA', {'idproyectos':idproyectos, 'idmodule':idmodule})}}',
                    function (data) {

                        supevisores = data.supervisores;
                        
                        var sites = data.sites,
                            supevisoresTable = createTable(supevisores,['ID'], false),
                            $table = $('#main_table'),
                            checkEvent = function() {
                                asignacion = []

                                var t    = $(this),
                                    r    = table.row(t.closest('tr')),
                                    tckt = r.data().ticket;
                                $(".col-check").prop('checked',false);
                                $(".col-check").parent().parent().parent().removeClass('odd');
                                $(".col-check").parent().parent().parent().removeClass('selected');
                                $(".col-check").parent().parent().parent().addClass('even');
                                t.prop('checked', true);


                                $("#vendors").empty();
                                $("#vendors").change();
                                if ($supervisores.val() == '') {



                                    $supervisores.focus().parent().addClass('has-error');
                                    t.prop('checked', false);
                                    return false;                                                                        
                                }

                                if ( t.is(':checked') ) {
                                    $.isLoading({text:"Loading"});
                                    $.post(
                                            "{{ path('findVendorDallas') }}",
                                            {
                                                $ticket: tckt
                                            },
                                            function(data){
                                                var obj = jQuery.parseJSON(data);
                                                opc = "";
                                                for(a=0; a<obj.length; a++){
                                                    opc += "<option value='"+obj[a].idticket+"' selected>"+obj[a].vendor+"</option>";
                                                }
                                                $("#vendors").empty();
                                                $("#vendors").append(opc);
                                                $("#vendors").change();

                                                $.isLoading("hide");


                                            }
                                    );
                                    r.select();
                                    handleSelection(tckt, 'select');

                                } else { 

                                    if ($supervisores.val() == getUserByTicket(tckt)) {

                                        r.deselect();
                                        handleSelection(tckt, 'deselect');
                                    } else {

                                        t.prop('checked', true);
                                    }
                                }
                            };
                  
                        $("#supervisoresAsig").empty().append(translate(translation,supevisoresTable));
                        
                        if (sites.length == 0) return false;

                        if (typeof table === 'undefined') {

                            table = $table.DataTable({
                                data: sites,
                                pageLength: -1,
                                columns: [
                                    { data: null, orderable: false, defaultContent: '<div class="checkbox"><input class="col-check" type="checkbox" name="radio"></div>' },
                                    { data: 'NETWORK ELEMENT', title: 'NETWORK ELEMENT' },
                                    { data: 'customer', title: 'CUSTOMER'},
                                    { data: 'PROYECTO', title: 'PROJECT NAME' },
                                    { data: 'FECHA INICIO PLAN', title: 'START DATE FORECAST' },
                                    { data: 'ticket', visible: false },
                                ],
                                lengthMenu: [ [  -1 ], [  'Todos' ] ]
                            });

                            $table.find('tbody').on('click', '.col-check', checkEvent);
                        } else {

                            table.clear();
                            table.rows.add(sites).draw();
                            $table.find('tbody').on('click', '.col-check', checkEvent);
                        }
                        
                        $.isLoading("hide");
                    }
                );
            }

            function getUserByTicket(ticket) {

                var header = Object.keys(asignacion);

                for (var i = 0; i < header.length; i++) {
                    
                    var tckts = asignacion[header[i]].tickets;
                    
                    for (var j = 0; j < tckts.length; j++) {
                      
                        if (tckts[j] == ticket) {

                            return header[i]; 
                        }
                    }
                }

                return false;
            }

            function handleSelection(ticket, event) {

                var user = $supervisores.val(),
                    key  = 0;

                if (user == '') return false;

                for (var i = 0; i < supevisores.length; i++) {

                    if (supevisores[i]['ID'] == user) {

                        key = i;
                        break;
                    }
                }

                if (event == 'select') {

                    if (typeof asignacion[user] === "undefined") {

                        asignacion[user] = {'ID': user, tickets:[ticket]};
                    } else {

                        asignacion[user]['tickets'].push(ticket);
                    }
                    
                    supevisores[key]["ASIGNADOS"] = parseInt(supevisores[key]["ASIGNADOS"]) + 1;
                } else {

                    var header = Object.keys(asignacion),
                        idxDelete = -1;

                    for (var i = 0; i < header.length; i++) {
                            
                        for (var j = 0; j < asignacion[header[i]]['tickets'].length; j++) {

                            if (asignacion[header[i]]['tickets'][j] == ticket && getUserByTicket(ticket) == user) {
                                
                                asignacion[header[i]]['tickets'].splice(j, 1);
                                supevisores[key]["ASIGNADOS"] = parseInt(supevisores[key]["ASIGNADOS"]) - 1;
                            }
                        }

                        if (asignacion[header[i]]['tickets'].length == 0) {
                            
                            idxDelete = asignacion.indexOf(asignacion[header[i]]);
                        }
                    }

                    if (idxDelete > -1) asignacion.splice(idxDelete, 1);
                }
                
                supevisoresTable = createTable(supevisores,['ID'],false);
                $("#supervisoresAsig").empty().append(translate(translation,supevisoresTable));
                $("#" + user).addClass('success');

                console.log(asignacion);
            }    
        });

        function createTable(monitor, hide, check, total, nombreColTotal) {

            if (typeof monitor[0] === 'undefined') return false;

            var header = Object.keys(monitor[0]),
                table = '<table class="table table-bordered table-condensed table-responsive"><thead><tr class="bg-primary">';

            for (var j = 0; j < header.length; j++) {

                if (hide.indexOf(header[j]) === -1) {
                    table += "<th class='text-center'>" + header[j] + "</th>"
                }

                if (check && j ==0) {
                    table += "<th class='text-center'>" + " " + "</th>"
                }
            }

            table += "</tr></thead>";

            for (var i = 0; i < monitor.length; i++) {
                
                table += "<tr " + "id=" + monitor[i][header[0]] + ">";

                for (var j = 0; j < header.length; j++) {
                    if ( hide.indexOf(header[j]) === -1) {
                        table += "<td>" + monitor[i][header[j]] + "</td>";
                    }

                    if (check && j== 0){

                        table += "<td>"+ "<input type='checkbox' class='checkup' user='" + monitor[i][header[1]] + "'ticket='" + monitor[i][header[0]] + "'/>"+"</td>";
                    }
                }

                table += "</tr>";

                if(typeof total !== "undefined") {

                    if (i == monitor.length - 1) {

                        var headerTotal = Object.keys(total);
                        table += '<tr><td>' + nombreColTotal +'</td>';

                        for(var x=0; x<headerTotal.length;x++){
                            table += '<td>';
                            table += total[headerTotal[x]];

                            table += '</td>';

                        }
                        table += '</tr>';
                    }
                }
            }
            table += "</table>";

            return table;
        }

        function translate(translation, table) {
        
            var translationHeader = Object.keys(translation);
        
            for(var i = 0; i< translationHeader.length;i++){

                table = table.replace(translationHeader[i],translation[translationHeader[i]]);
            }

            return table;
        }

    </script>
{% endblock %}