{% extends '::base_select2.html.twig' %}
{% block menuTop %}

{% endblock %}

{% block dashboard %}
<style>

    .wrapper{padding-bottom:50px;}
    .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
    .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
    .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
    pre,.well{background:#FFFFFF;}
    .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
    .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 Spinner*/
    .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);}
    }

    .btn-claro {
        color: #fff;
        background-color: #aa0001;
        border-color: #e06a70;

    }

    .bg-claro {
        color: #fff !important;
        background-color: #aa0001 !important;
        background: #aa0001 !important;
    }

    .btn-claro:hover, .btn-claro:focus {
        color: #fcfcfc;
        text-decoration: none;

    }

    .table th{
        font-size: 7pt;
    }
    .table td{
        font-size: 7pt;
    }

    .btn-yellow {
        background-color: #ffff0c;
        color: #000000;
        background-image: -moz-linear-gradient(top, #ecea19, #ecea19);
        background-image: -ms-linear-gradient(top, #ecea19, #ecea19);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ecea19), to(#ecea19));
        background-image: -webkit-linear-gradient(top, #ecea19, #ecea19);
        background-image: -o-linear-gradient(top, #ecea19, #ecea19);
        background-image: linear-gradient(top, #ecea19, #ecea19);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'78cd51, endColorstr='#'5AAD34, GradientType=0);
        border-color: #ecea19 #ffff0c #ecea19;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
    .btn-yellow {
        color: #fff;
        background-color: #FFFF00;
        border-color: #ecea19;
    }

    .col-lg-12{
        padding-left: 5px;
    }
    tr {cursor:pointer}

    .double-scroll {
        width: 100%;
    }
    /*.td-si-accerreo, .td-combus-submin
    {
        text-decoration: underline;
    } */
    .btn-yellow {
        color: #fff;
        background-color: #000000;
        border-color: #ecea19;
    }
    .btn-orange {
        color: #fff;
        background-color: rgb(255, 165, 0) !important;
        border-color: #ecea19;
    }

    .pagination
    {
        width: 100%;
    }

    input[type="search"]{
        display: block;
        width: 100%;
        height: 28px;
        padding: 6px 12px;
        font-size: 12px;
        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;
    }

    input {
        -webkit-appearance: textfield;
        background-color: white;
        -webkit-rtl-ordering: logical;
        cursor: text;
        padding: 0px;
        border-width: 1px;
        border-style: solid;
        border-color: black !important;
        border-image: initial;
    }
    .dataTables_length select {
        width: 60px;
    }
    .dataTables_length label {
        font-weight: normal;
    }
    div.dt-buttons {
        position: relative !important;
        float: right !important;
        margin-right: -5px !important;
    }
    .datepicker {
        z-index: 1600 !important; /* has to be larger than 1050 */
    }
    .bs-datepicker-container { z-index: 3000; }

    .imageCell {
        height: 100px;
        min-width: 100px;
        background-position: center!important;
        background-repeat: no-repeat!important;
        background-size: cover!important;
    }

</style>
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
<link rel="stylesheet" href="{{ asset('select2/css/select2.min.css')}}">
<script src="{{ asset('select2/js/select2.full.min.js') }}"></script>
<script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
<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 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/jszip.min.js') }}"></script>
<script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
<script src="{{ asset('js/jquery.doubleScroll.js') }}"></script>
<script>
    var table;

    $(document).ready(function() {
        loadListaAsp();

        $('#cmbAsp').select2({
            tags: true,
            dropdownParent: $('#modalEditAspEntrega'),
            placeholder: {
                id: '-1',
                text: 'Seleccione o tipee el nombre ASP...'
            },
            allowClear: true,
            createTag: function (params) {
                var term = $.trim(params.term);

                if (term === '') {
                    return null;
                }
                return {
                    id: "0",
                    text: params.term
                }
            }
        });

        $('#cmbAsp').on('select2:clear', function (e) {
            $('#cmbAsp').val(null).trigger('change');
            $('#cmbAsp > option').each(function() {
                if ($(this).text()===$(this).val() || $(this).val()=="0"){
                    $(this).remove();
                    $('#txtAsp').val('');
                    console.log("remove option " + $(this).text() + " VAL(" + $(this).val() + ")")
                }
            });
        });

        $('#cmbAsp').on('select2:select', function (e) {
            var data = e.params.data;
            $('#txtAsp').val(data.text);
        });


        if ( ! $.fn.DataTable.isDataTable( '#example' ) ) {
            createTableDt();
            buildDatatable();
        }else{
            table.ajax.reload();
        }
    });

    $(function () {
        $("#btnSaveContinue").click(function(){
            saveDataAspEntrega('SAVECONTINUE');
        });
        $("#btnSaveExit").click(function(){
            saveDataAspEntrega('SAVEEXIT');
        });

        $('#tbody tr .edit').live('click',function(){
            var id = $(this).data('id');
            var id_asp = $(this).data('id_asp');
            var persona = $(this).data('persona');
            var telefono = $(this).data('telefono');
            var active  = $(this).data('active');
            var idproyectos  = $(this).data('idproyectos');

            resetAspEntregaForm('edit');
            $('#titleModalEditAspEntrega').html('{{'Edit' | trans}}');
            $('#cmbAsp').val(id_asp).trigger('change');
            var data_asp = $('#cmbAsp').select2('data');
            var aspname = data_asp[0].text;

            $('#txtAsp').val(aspname);
            $('#txtAsp').show();
            $('#txtId').val(id);
            $('#txtPersonaEntrega').val(persona);
            $('#txtTelefono').val(telefono);
            $('#cmbActive').val(active);
            $('#modalEditAspEntrega').modal('show');
        });

        $('#tbody tr .delete').live('click',function(){
            var id = $(this).data('id');
            var id_asp = $(this).data('id_asp');
            var asp = $(this).data('asp');
            var persona = $(this).data('persona');
            if (confirm("¿Desea eliminar el registro para [" + asp + " : " + persona + "?")){
                var postUrl = '{{path('saveDataAspEntrega')}}';
                var postData = {
                    op: 'delete',
                    id: id,
                    id_asp: id_asp
                };
                $.isLoading("show");
                $.ajax({
                    type: 'POST',
                    url: postUrl,
                    data: postData,
                    dataType: 'json',
                    global: false,
                    success: function (response) {
                        $.isLoading("hide");
                        switch (response.estatus){
                            case 'Ok':
                                alert('Registro Eliminado!');
                                break;
                            case 'Error':
                                alert(response.mensaje);
                                break;
                        }
                        table.ajax.reload();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $.isLoading("hide");
                    }
                });
            }
        });
    });

    function loadListaAsp(){
        var data = {};
        data['idproyectos']={{ idproyectos }};
        //$.isLoading("hide");
        $("#cmbAsp option").remove();
        $.getJSON('{{path('getListAspPR')}}',data, function (data) {
            var asp  = data.list;
            $("#cmbAsp").append('<option value="-1">Seleccione</option>');
            for (var i = 0; i < asp.length; i++) {
                $("#cmbAsp").append('<option value="'+asp[i]['valor']+'">' +asp[i]['nombre']+ '</option>');
            }
        });
    };

    function resetAspEntregaForm(op){
        var $dialog = $('#modalEditAspEntrega');
        $dialog.find('.has-error').removeClass('has-error');
        $dialog.find('.modal-message').addClass('hidden');
        $('#txtPersonaEntrega').val('');
        $('#txtTelefono').val('');
        $('#cmbActive').val('1');
        $('#txtAsp').val('');
        //$('#cmbAsp').change();
        if (op=='new'){
            $('#txtAsp').hide();
            $('#divAsp').show();
            $('#cmbAsp').val(null).trigger('change');
            $('#btnSaveExit').show();
            $('#btnSaveExit').prop("value", "Grabar");
            $('#btnSaveContinue').show();
        }else{
            $('#divAsp').hide();
            $('#txtAsp').show();
            $('#btnSaveExit').prop("value", "Grabar y Salir");
            $('#btnSaveExit').show();
            $('#btnSaveContinue').hide();
        }
    }

    function toggleBtnSave(onOff){
        $('#btnSaveExit').prop("disabled", !onOff);
        $('#btnSaveContinue').prop("disabled", !onOff);
    }

    function _validateAspEntregaForm() {
        var $dialog = $('#modalEditAspEntrega');
        // Reset previous validation css formatting.
        $dialog.find('.has-error').removeClass('has-error');
        $dialog.find('.modal-message').addClass('hidden');

        try {
            // Check required fields.
            var missingRequiredField = false;
            var data_asp = $('#cmbAsp').select2('data');
            var id_asp = data_asp[0].id;
            var aspname = data_asp[0].text;

            if (aspname.length == 0){
                $('#cmbAsp').closest('.form-group').addClass('has-error');
                missingRequiredField = true;
            }else{
                $dialog.find('.required').each(function () {
                    if ($(this).val() == '' || $(this).val() == null) {
                        $(this).closest('.form-group').addClass('has-error');
                        missingRequiredField = true;
                    }
                });
            }
            if (missingRequiredField) {
                throw 'Complete los campos requeridos.';
            }

            return true;
        } catch (exc) {
            $dialog.find('.modal-message').addClass('alert-danger').text(exc).removeClass('hidden');
            return false;
        }
    }

    function saveDataAspEntrega(origen){
        var $dialog = $('#modalEditAspEntrega');
        var id = parseInt($('#txtId').val());
        var idproyectos = parseInt($('#txtIdProyectos').val());
        var data_asp = $('#cmbAsp').select2('data');
        var id_asp = data_asp[0].id;
        var aspname = data_asp[0].text;
        var txtAsp = $('#txtAsp').val();
        var persona = $('#txtPersonaEntrega').val();
        var telefono = $('#txtTelefono').val();
        var email = $('#txtEmail').val();
        var active = $('#cmbActive').val();
        var op = (id>0) ? 'edit' : 'new';
        var postUrl = '{{path('saveDataAspEntrega')}}';
        var postData = {
            op: op, id: id, idproyectos: idproyectos,
            id_asp: id_asp, aspname: aspname, txtasp: txtAsp, persona: persona, telefono: telefono, email: email, active: active
        };
        console.log(data_asp);
        console.log(postData);
        if (_validateAspEntregaForm()){
            $.isLoading("show");
            toggleBtnSave(false);
            $.ajax({
                type: 'POST',
                url: postUrl,
                data: postData,
                dataType: 'json',
                global: false,
                success: function (response) {
                    switch (response.estatus){
                        case 'Ok':
                            resetAspEntregaForm(op);
                            $dialog.find('.modal-message').
                                    addClass('alert-success').
                                    text('Registro guardado.').removeClass('hidden');
                            table.ajax.reload();
                            $.isLoading("hide");
                            toggleBtnSave(true);
                            if (op=="new"){loadListaAsp();}
                            if (origen =='SAVEEXIT'){
                                $dialog.modal('hide');
                            }
                            break;
                        case 'Error':
                            $.isLoading("hide");
                            toggleBtnSave(true);
                            $dialog.find('.modal-message').
                                    addClass('alert-danger').
                                    text(response.mensaje).removeClass('hidden');
                            break;
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $.isLoading("hide");
                    toggleBtnSave(true);
                    $dialog.find('.modal-message').
                            addClass('alert-danger').
                            text(textStatus).removeClass('hidden');
                }
            });
        }
    }

    function clickNewAsp(){
        resetAspEntregaForm('new');
        $('#txtId').val(0);
        $('#titleModalEditAspEntrega').html('{{'Add ASP' | trans}}');
        $('#modalEditAspEntrega').modal('show');
    }

    function createTableDt(){
        var strHeader = '';
        var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
        strHeader = '<th>Id</th><th>Id Asp</th><th>Id Proyecto</th><th>ASP</th><th>Persona Entrega</th>' +
                '<th>Nro. Teléfono</th><th>Email</th><th>Activo</th><th>IsActive</th><th>Acciones</th>';
        strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody></table>';
        $('#datatable').empty();
        $('#datatable').html(strTable);
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table.column(i).search(this.value).draw();
                }
            } );
        } );
    }

    function buildDatatable(){
        var columnas = [ { "data": "id", visible:false },{ "data": "id_asp", visible:false },
            { "data": "idproyectos", visible:false },{ "data": "asp" }, { "data": "persona_entrega" },
            { "data": "telf_persona" },{ "data": "email" }, { "data": "str_active" }, { "data": "isActive", visible:false }, { "data": null}
        ];
        table = $('#example').DataTable( {
            dom: '<"row" <"col-sm-12 text-right"B>> <"row" <"col-sm-6 "l> <"col-sm-6"f>>rtip',
            scrollY: '40vh',
            scrollX: true,
            scrollCollapse: false,
            scroller: true,
            orderCellsTop: true,
            "ajax": {
                "url": "{{ path('getAspEntregaPR')}}",
                "type": "POST",
                data:  function( d ) {
                    d.idproyectos= {{ idproyectos }}
                }
            },
            columns: columnas,
            columnDefs: [ {
                "targets": -1,
                "data": null,
                "searchable": false,
                "orderable": false,
                "className": 'dt-body-center',
                "processing": true,
                "language": {
                    // Replace the Processing... text with an AJAX-loader
                    "processing": "<div class='table-loading'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "render": function ( data, type, row ) {
                    //return htmlSql;
                    return '<div class="btn-group btn-group-sm"> ' +
                            '<a data-id="' + row['id'] + '" ' +
                            'data-id_asp="' +  row['id_asp'] + '" ' +
                            'data-persona="' +  row['persona_entrega'] + '" ' +
                            'data-telefono="' +  row['telf_persona'] + '" ' +
                            'data-email="' +  row['email'] + '" ' +
                            'data-active="' +  row['isActive'] + '" ' +
                            'data-idproyectos="' +  row['idproyectos'] + '" ' +
                            ' href="javascript:void(0);" class="btn btn-info edit" data-toggle="tooltip" ' +
                            'data-title="Editar" title="Editar" data-container="body">'+
                            '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +

                            '<a data-id="' + row['id'] + '" data-id_asp="' + row['id_asp'] +  '" ' +
                            'data-asp="' + row['asp'] +  '" ' +
                            'data-persona="' + row['persona_entrega'] + '" href="javascript:void(0);" class="btn btn-danger delete" data-toggle="tooltip" ' +
                            'data-title="Eliminar" title="Eliminar" data-container="body">'+
                            '<span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>' +

                            '</div>';
                }
            } ],
            lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
            buttons: [
                {
                    text: '<strong><span class="glyphicon glyphicon-plus"></span> Agregar ASP</strong>',
                    action: function ( e, dt, node, config ) {
                        clickNewAsp();
                    },
                    className: 'bg-primary'
                },
                {
                    extend:'excel',
                    exportOptions: {
                        columns: [ 3,4,5,6 ]
                    },
                    text: '<strong> Excel</strong>',
                    title: '{{"ASP PR" | trans}}',
                    className: 'bg-primary'
                },
            ]
        } );
    }

</script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center">
                <b id="titleReport"><i class="fa fa-file-text-o"></i> GESTIÓN DE ASP</b>
            </h2>
        </div>
    </div>
    <div class="row">
        <div id="datatable" class="col-sm-12">

        </div>
    </div>
</div>

    <div id="modalEditAspEntrega" class="modal fade modal-edit-asp-entrega" tabindex="-1"
         role="dialog" aria-labelledby="editAspEntregaDataLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="editAspEntregaDataLabel">
                        <b><i class="fa fa-upload"></i>&nbsp;&nbsp;<span id="titleModalEditAspEntrega">{{'Edit' | trans}}</span></b>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div class="modal-message alert hidden"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <input id="txtId" type="hidden">
                                <input id="txtIdProyectos" type="hidden" value="{{ idproyectos }}">
                                <label for="cmbAsp" class="control-label">Asp *</label>
                                <div id="divAsp">
                                    <select id="cmbAsp" class=" form-control" style="width: 100%">
                                    </select>
                                </div>
                                <input type="text" id="txtAsp" class="required form-control" maxlength="130">
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="txtPersonaEntrega" class="control-label">Persona Entrega *</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                    </span>
                                    <input type="text" id="txtPersonaEntrega" class="required form-control" maxlength="130">
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12">
                            <div class="form-group">
                                <label for="txtTelefono" class="control-label">Nro. Teléfono *</label>
                                <div class="input-group">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span>
                                    </span>
                                    <input type="tel" id="txtTelefono" class="required form-control" maxlength="20">
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12">
                            <div class="form-group">
                                <label for="txtEmail" class="control-label">Email *</label>
                                <input type="text" id="txtEmail" class="required form-control" maxlength="255">
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="cmbActive" class="control-label">Activo *</label>
                                <select id="cmbActive" class="required form-control input-sm" style="width: 25%">
                                    <option value="1">SI</option>
                                    <option value="0">NO</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btnSaveContinue" type="button" class="btn btn-default">Guardar y Continuar</button>
                    <button id="btnSaveExit" type="button" class="btn btn-primary">Guardar y Salir</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


{% endblock %}
{% block javascripts %}
    <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
    <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
    <!--script src="{{ asset('js/jquery-1.12.4.js') }}"></script-->
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js/jszip.min.js') }}"></script>
    <script src="{{ asset('js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js/buttons.print.min.js') }}"></script>
{% endblock %}