{% extends 'admin\\baseadmin.html.twig' %}
{% block content%}
    <!--START PAGE CONTENT -->
    <section class="page-content container-fluid">
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card">
                    <div class="card-header">
                        <ul class="actions top-right">
                            <li><a href="javascript:void(0)" data-q-action="card-expand"><i class="icon dripicons-expand-2"></i></a></li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered datatable-init" style="width:100%">
                                <thead>
                                    <tr>
                                        <th style="width:30px" class="no-sort tableactions"><input class="js-dataTableCB" type="checkbox" value="all"></th>
                                        <th>{{value|trans({},'domains')}}</th>
                                        <th style="width:150px">{{'languages'|trans({},'studio')}}</th>
                                        <th style="width:100px">{{'status'|trans({},'domains')}}</th>
                                        <th style="width:100px" class="no-sort tableactions" width>{{'actions'|trans({},'studio')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <a class="btn btn-secondary" href="/{{ app.request.getLocale() }}/admin/domains" role="button">{{'back'|trans({},'configs')}} </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bd-example-modal" id="js-importModal" tabindex="-1" role="dialog"  aria-hidden="true">
            <div class="modal-dialog modal modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Importar</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="zmdi zmdi-close"></span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="js-importBusy" class="row" style="display:none;">
                            <div class="col-4"></div>
                            <div class="col-4 preloader pl-xxl pls-primary">
                                <svg class="pl-circular" viewBox="25 25 50 50">
                                    <circle class="plc-path" cx="50" cy="50" r="20"></circle>
                                </svg>
                            </div>
                            <div class="col-4"></div>
                        </div>
                        <div id="js-importForm">
                            <div class="row" style="padding:1rem;">
                                <label>Escolher ficheiro</label>
                                <div class="custom-file">
                                    <input type="file" id="js-importFile" class="custom-file-input"><label class="custom-file-label"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="js-importBtn" class="btn btn-primary">{{'confirm'|trans({},'studio')}}</button>
                        <button class="btn btn-secondary" data-dismiss="modal">{{'cancel'|trans({},'studio')}}</button>
                    </div>
                </div>
            </div>
        </div>

    </section>
{% include '/components/deleteModal.html.twig' with { 
    'url': path('domains_delete_value', {'domain':domain.id}),
    'title': "delete"|trans({},"studio"),
    'body': "delete_msg"|trans({},"studio"),
    'btCancel': "cancel"|trans({},"studio"),
    'btConfirm': "confirm"|trans({},"studio")
    } %}
{% endblock %}
{% block javascripts %}
{{parent()}}
    <script>
    	{% include '/components/deleteModal.js.twig' %}   
        var config={
            processing: true,
            serverSide: true,
            stateSave: true,
            stateDuration: -1,
            ajax: "{{ path('admin_domains_list_values',{'domain':domain.id}) }}",
            language: {
                "sEmptyTable": "{{'emptytable'|trans({},'studio')}}",
                "sLoadingRecords": "{{'loadingrecords'|trans({},'studio')}}",
                "sProcessing": "{{'processing'|trans({},'studio')}}",
                "sLengthMenu": "{{'showmenulength'|trans({},'studio')}}",
                "sZeroRecords":  "{{'zerorecords'|trans({},'studio')}}",
                "sSearch": "{{'searchlabel'|trans({},'studio')}}",
                "sInfo":   "{{'infostart'|trans({},'studio')}}",
                "sInfoFiltered": "{{'infofiltered'|trans({},'studio')}}",
                "sInfoEmpty":    "{{'infoempty'|trans({},'studio')}}",
                "oPaginate": {
                    "sFirst":    "{{'first'|trans({},'studio')}}",
                    "sPrevious": "{{'previous'|trans({},'studio')}}",
                    "sNext":     "{{'next'|trans({},'studio')}}",
                    "sLast":     "{{'last'|trans({},'studio')}}"
                },
            },
            columns: [
                { data: 'id', "orderable": false, render: (data,type,row,meta) => {
                    if(row.deletable)
                    {
                        return '<input style="margin:auto;" class="form-check-input js-dataTableCB" type="checkbox" value="'+data+'" name="ids[]" >';
                    }
                    else
                    {
                        return '';
                    }
                }},
                { data: 'value' },
                { data: 'langs', "orderable": false, render: (data,type,row,meta) => {
                    let html = '';
                    data.forEach((item) => {
                        let classe;
                        if(item.isTranslated){
                            classe = "badge badge-pill badge-success";
                        }else{
                            classe = "badge badge-pill badge-secondary";
                        }
                        html += '<span style="margin-left:3px;" class="'+classe+'">'+item.languageCode.toUpperCase()+'</span>'
                    });
                    return html;
                } },
                { data: 'status', "orderable": false },
                { data: 'actions', "orderable": false,
                  render: function (data,type,row,meta){
                      var result='';
                      jQuery.each(data,function(index,item){
                            cssclass="";
                            itemfunction="";
                          switch (item.type){
                              case "edit":
                                cssclass='edit';
                                result+='<a href="'+item.url+'"><i class="la la-'+cssclass+'" '+itemfunction+'></i></a>'
                                break;
                               case "delete":
                                // if (row.deletable)
                                //  {
                                    cssclass='trash';
                                    result+='<a href="#" onclick="toogleDeleteModal(\''+item.id+'\'); return false;"><i class="la la-'+cssclass+'" '+itemfunction+'></i></a>'
                                //  }
                                break;
                          }
                      });
                      return result; 
                  } }
            ],
            "order": [[ 1, "asc" ]],            
            "initComplete": () => {
                const rows = $(".datatable-init").find('tbody').find('tr');
                $(".datatable-init").find('tbody').find('tr').each((row) => {
                    let cell = $(rows[row]).find('td')[3];
                    $(cell).css('pointer-events','none');
                })
                $('.js-dataTableCB').on('change',(e) => {
                    handleCheckBoxChange(e);
                });
            },
            columnDefs: [
                {
                    className: "tableactions", 
                    "targets": [ "tableactions" ],
                    orderable:false,
                    "targets": [ "tableactions" ]
                }
            ]
        };
        $(document).ready(() => {
            $('.js-export').on('click',(e) => {
                e.preventDefault();
                window.open("/{{app.request.getLocale()}}/domains_values/export/{{domain.id}}");
            });
            $('.js-import').on('click',(e) => {
                e.preventDefault();
                $('#js-importModal').modal('show');
            });
            $('#js-importBtn').on('click',(e) => {
                const file = document.getElementById('js-importFile').files[0];
                if(file){
                    setLoading(true);
                    let formData = new FormData();
                    formData.append('file',file);
                    formData.append('domain_id',"{{domain.id}}");
                    $.ajax({
                        url: "/{{app.request.getLocale()}}/domains_values/import/{{domain.id}}",
                        method: 'POST',
                        processData: false, 
                        contentType: false, 
                        cache: false,
                        data: formData
                    }).done((data) => {
                        $('#js-importModal').modal('hide');
                        if(data.errors.length > 0){
                            $('#js-importSuccessCount').html(data.count - data.errors.length);
                            let html = '';
                            data.errors.forEach((item) => {
                                html += '<tr><td>'+item.cause+'</td><td>'+item.excelRow+'</td></tr>'
                            });
                            $('#js-ImportErrorLog').html(html);
                            $('#js-importErrorCount').html(data.errors.length);
                            $('#js-importResultsModal').modal('show');
                        }else{
                            Swal.fire({
                                title: 'Sucesso',
                                text: data.count+" valores de domínios importados com sucesso !",
                            })
                        }
                        $(".datatable-init").data("datatable").ajax.reload();
                        setLoading(false);
                    }).fail((error) => {
                        setLoading(false);
                    })
                }
            });
        });

        function setLoading(isBusy){
            if(isBusy){
                $('#js-importBusy').show();
                $('#js-importForm').hide();
                $('#js-importBtn').prop('disabled',true);
            }else{
                $('#js-importBusy').hide();
                $('#js-importForm').show();
                $('#js-importBtn').prop('disabled',false);
            }
        }
    </script>
{% endblock %}