{% extends '::base.html.twig' %}
{% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">
            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
        </div>
    </div>
{%endblock %} 

{% block dashboard %}
    <div class="container" style="margin: 7% 5% 5% 5%">


        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">CREW PARAMETERS</h3>
            </div>
            <div class="panel-body">
                {{ form_start(form) }}
                <div class="col-lg-4">

                    <div class="form-group">

                        <label for="" class="col-lg-4 control-label">{{form_label(form.cluster)}}</label>

                        <div class="col-lg-8 col-xs-9">

                            {{form_widget(form.cluster)}}
                        </div>


                    </div>

                </div> 
                <div class="col-lg-4">

                    <div class="form-group">

                        <label for="" class="col-lg-4 control-label">{{form_label(form.SubCluster)}}</label>

                        <div class="col-lg-8 col-xs-9">

                            {{form_widget(form.SubCluster)}}
                        </div>


                    </div>

                </div> 
                <div class="col-lg-4">

                    <div class="form-group">

                        <label for="" class="col-lg-4 control-label">{{form_label(form.Country)}}</label>

                        <div class="col-lg-8 col-xs-9">

                            {{form_widget(form.Country)}}
                        </div>


                    </div>

                </div> 
                <div class="col-lg-4">

                    <div class="form-group">

                        <label for="" class="col-lg-4 control-label">{{form_label(form.Project)}}</label>

                        <div class="col-lg-8 col-xs-9">

                            {{form_widget(form.Project)}}
                        </div>


                    </div>

                </div> 
                <div class="col-lg-4">

                    <div class="form-group">

                        <label for="" class="col-lg-4 control-label">{{form_label(form.LeadTime_Min)}}</label>

                        <div class="col-lg-8 col-xs-9">

                            {{form_widget(form.LeadTime_Min)}}
                        </div>


                    </div>

                </div> 
                <div class="col-lg-4">

                    <div class="form-group">

                        <label for="" class="col-lg-4 control-label">{{form_label(form.LeadTime_Max)}}</label>

                        <div class="col-lg-8 col-xs-9">

                            {{form_widget(form.LeadTime_Max)}}
                        </div>


                    </div>

                </div> 
               
                {{ form_end(form) }}
            </div>
        </div>



    </div>
    
    <div id="report">
    </div>

    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>  
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>   
    <script>
                $('.ajaxChange').change(function () {

                    var opc = {
                        "url": $(this).attr('role-path'),
                        "element": $(this).attr('element'),
                        "data": $(this).val(),
                        "key": $(this).attr("id"),
                        "subelement": $(this).attr('subelement'),
                        "subelementField": $(this).attr('subelementField')
                    };

                    //console.log(opc.key);
                    var json = {};
                    json[opc.key] = opc.data;

                    // console.log(json.idimputable);
                    $.ajax({
                        url: opc.url,
                        data: json,
                        beforeSend: function () {

                            $("#" + opc.element).after('<img class="loading" width="16" src="{{asset('loadings/spin.GIF')}}" />');
                        }


                    }).done(function (data) {

                        $("#" + opc.element).find('option:not("option[value=""]")').remove();
                        $("#" + opc.subelement).find('option').remove();
                        $(".loading").hide();
                        var keys = Object.keys(data[0]);
                        var id;
                        var name;
                        $.each(data, function (index, value) {


                            id = value.id === undefined ? value[keys[0]] : value.id;
                            name = value.name === undefined ? value[keys[1]] : value.name;


                            $("#" + opc.element).append('<option value=' + "'" + id + "'" + '>' + name + '</option>');

                            if (opc.subelement !== undefined) {

                                $("#" + opc.subelement).append('<option value=' + "'" + value[opc.subelementField] + "'" + '>' + value[opc.subelementField] + '</option>');

                            }



                        });


                    });
                });


                $('form[name="crewReport"]').ajaxForm({
                    beforeSubmit: function (formData, jqForm, options) {

                        $("#cargar").show();
                        //console.log($("#suministro_suministrobundle_recibopagodetalle_reciboPago").val());
                    },
                    error: function (error) {


                        $("#cargar").hide();

                        swal(error.statusText, "Please Contact The Administrator Sever", "error");
                    },
                    success: function (responseText, statusText, xhr, $form) {

                        $("#cargar").hide();
                        // $("#report").remove();
                        // console.log(responseText);
                        $("#report").html(responseText);
                    }


                });
                $('.numeric').numeric();
                onClick = "$('#CrewReportTable').tableExport({type:'pdf',escape:'false'});"
    </script>   
    <style>
        #report {

            overflow-y:scroll;
        }
    </style>
{%endblock %}