#jkvkabelModal.modal(tabindex='-1', role='dialog', aria-labelledby='jkvkabelModalLabel')
    //-form(method='GET',id='holidayForm' action='/employee/holidays_byperson/')
    .modal-dialog(role='document', style='width:1000px;')
        .modal-content
            .modal-header#jkvkabelHeader.bg-primary(style="background: Primary")
                h4#headertitle
                
            .modal-body(style='background-color:#5f6b79')
                
                form#kabelform
                    #form-group
                    input#wn(name='wn',style='display:none')
                    input#userid(name='userid',style='display:none', value=user._id)
                    input#id(name='id',style='display:none')
                    input#modify(name='modify',style='display:none')
                    .row
                        .col-sm-12 
                            label(for="megrendelo",style='color: white') Megrendelő:
                            input.form-control(id='megrendelo',  name='megrendelo', required, minlength="6", type=text, autofocus, readonly=false,style='')
                    hr   
                    .row
                        .col-sm-12 
                            label(for="targy",style='color: white') A vizsgálat tárgya:
                            input.form-control(id='targy',name='targy', required, minlength="6",type=text, autofocus, readonly=false,style='')    
                    hr                              
                    .row
                        .col-sm-3
                            label(for="tipus",style='color: white') Típus:
                            input.form-control(id='tipus', name='tipus', required, minlength="6",type=text, autofocus, readonly=false,style='')  
                        .col-sm-2
                            label(for="keresztmetszet",style='color: white') Keresztmetszet:
                            input.form-control(id='keresztmetszet', name='keresztmetszet', required, minlength="6",type=text, autofocus, readonly=false,style='')                     
                        .col-sm-3
                            label(for="feszultseg",style='color: white') Névleges feszültség:
                            select.form-control(id='feszultseg', name='feszultseg',required,data-live-search='true')
                                option.selected.disabled(data-tokens='') Válasszon!                                        
                                option(value='10') 6/10kV
                                option(value='20') 12/20kV
                                option(value='30') 18/30kV                            
                                option(value='36') 20/36kV                            
                        .col-sm-2
                            label(for="hossz",style='color: white') Hossz:
                            input.form-control(id='hossz',name='hossz', required, minlength="1",type=text, autofocus, readonly=false,style='')  
                    br
                    .row 
                        .col-sm-12
                            label(style='color: white') Lefektetés helye:
                            input.form-control(id='nyomvonal',name='nyomvonal',type=text, autofocus, readonly=false,style='')                                                               
                    br   
                    button#submit.btn.btn-primary(type='submit' ) Rendben           
            .modal-footer(style="background-color: #2C3446")

        
                  
                button#fmodalClose.btn.btn-primary(type='button', data-dismiss='modal') Bezár
                
            script(src='/bower_components/jquery/dist/jquery.min.js')
            //-script(src='/bower_components/bootstrap-validator/dist/validator.min.js')
script.

            $(document).on('show.bs.modal','#jkvkabelModal', function () {
                const form = document.getElementById('kabelform');
                form.reset();
              var articletitle = $(event)[0].currentTarget.activeElement.getAttribute('data-title')
              var megrendelo = $(event)[0].currentTarget.activeElement.getAttribute('data-megrendelo')
              var tipus = $(event)[0].currentTarget.activeElement.getAttribute('data-tipus')
              var keresztmetszet = $(event)[0].currentTarget.activeElement.getAttribute('data-keresztmetszet')
              var hossz = $(event)[0].currentTarget.activeElement.getAttribute('data-hossz')
              var nyomvonal = $(event)[0].currentTarget.activeElement.getAttribute('data-nyomvonal')
              var feszultseg = $(event)[0].currentTarget.activeElement.getAttribute('data-feszultseg')
              //var modify = $(event)[0].currentTarget.activeElement.getAttribute('data-modify')
              var title = $(event)[0].currentTarget.activeElement.getAttribute('data-headertitle')
              var articleNumber = $(event)[0].currentTarget.activeElement.getAttribute('data-sn')
              var articleWorkNumber = $(event)[0].currentTarget.activeElement.getAttribute('data-wn')
              var articleId = $(event)[0].currentTarget.activeElement.getAttribute('data-aid')
              var editId = $(event)[0].currentTarget.activeElement.getAttribute('data-id')
              $('#targy').val(articletitle);
              $('#headertitle').text(title);
              $('#id').val(articleId);
              $('#wn').val(articleWorkNumber);
              console.log(modify)
              if (megrendelo)
              {
                $('#megrendelo').val(megrendelo);
              }
              if (tipus)
              {
                $('#tipus').val(tipus);
              }
              if (keresztmetszet)
              {
                $('#keresztmetszet').val(keresztmetszet);
              }
              if (hossz)
              {
                $('#hossz').val(hossz);
              }
              if (nyomvonal)
              {
                $('#nyomvonal').val(nyomvonal);
              }
              if (feszultseg)
              {
                $('#feszultseg').val(feszultseg);
              }
              $('#modify').val(editId);
           })  

           const form = document.getElementById('kabelform');           
           //form.validator().on('submit', async function (e) {
           form.addEventListener('submit', async event => {
            event.preventDefault();
            const formData = new FormData(form);
            const plainFormData = Object.fromEntries(formData.entries());
            const formDataJsonString = JSON.stringify(plainFormData);             
  
            var url='/articles/savekabelcerts'
            if (plainFormData.modify)
            {
                url='/articles/modifykabelcerts'
            }         
            const response = await fetch(url, {
            method: 'POST',
            headers: {
                        "Content-Type": "application/json",
                      },
            body: formDataJsonString
            });
           
            const data = await response.json();
 
                if (!response.ok) 
                {
                            Swal.fire('Error', '', 'error')
                }
                if (data.response="OK")
                {
                        Swal.fire({
                        position: "top-end",
                        icon: "success",
                        title: data.message,
                        showConfirmButton: false,
                        timer: 1500,
                        backdrop: false
                        });  
                        refreshCerts(data.id) 
                }   else 
                {
                        Swal.fire({
                        position: "top-end",
                        icon: "error",
                        title: data.message,
                        showConfirmButton: false,
                        timer: 1500,
                        backdrop: false
                        });
                } 
                $('#jkvkabelModal').modal('hide');//.modal('toggle');
                $('.modal').removeClass('in');
                $('.modal').attr("aria-hidden","true");
                $('.modal').css("display", "none");
                $('.modal-backdrop').remove();
                $('body').removeClass('modal-open');                    
                $('.modal-backdrop').remove()  
            });

            $(document).ready(function () {
              

            });