extends layout

block content
  .container
    link(rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.css')
    link(href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', rel='stylesheet')
    link(rel='stylesheet', type='text/css', href='https://unpkg.com/lightpick@latest/css/lightpick.css')
    link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.14.2/sweetalert2.css" integrity="sha512-TG239kA30BXeGpy+HpJei+qfJcKo8V9HKpe8UWuVdpk49NGUe86EDhmdXkCxMqD5gSlkLLi6YQ9SbNp+yRa9xQ==" crossorigin="anonymous" referrerpolicy="no-referrer")
    include Modals/modal_workReportNew
    style(type="text/css").


          .clickable{
              cursor: pointer;   
          }
    h4#dummy       
    #form-group
      form(id="myForm",name="myForm",method='get', action='/work/generateXML/')
        .panel.panel-warning
            .panel-heading
                .row
                    .col-md-9
                        h4 #{title}
                        h5#wn #{workTitle}
                        h6#wid(style="display:none") #{workId}
                        h6#uid(style="display:none") #{user._id}
                        h4#ddates(style="display:none") #{dates}
            .panel-body
                form#form-1
                    .row
                        .table-responsive
                            table#workReportTable.table.table-striped
                                
                                col(width='5%')
                                col(width='auto')
                                col(width='15%')
                                col(width='15%')
                                thead
                                    tr
                                        
                                        th(style='text-align:left') #
                                        th(style='text-align:left') Munkavégzés leírása
                                        th(style='text-align:left') Résztvevők
                                        th(style='text-align:left') Művelet


                                tbody
            .panel-footer
                .col-sm-3
                    .input-group
                        span#basic-addon1.input-group-addon
                            i.fa.fa-calendar.fa-lg.fa-fw             
                        input.form-control( readonly, placeholder="Válasszon dátumot!", id='dpNewWorkReport',   type=text)                 
                

                .btn-toolbar

                    button.btn.btn-primary(data-toggle='modal', data-wn=workId,data-title=workTitle, data-target='#workReportNewModal',data-headertitle='Műhely munkavégzés',type='button')
                        i.fa.fa-plus.fa-lg.fa-fw
                        |  Bejegyzés hozzáadása   
                    button#btnSave.btn.btn-primary(data-toggle='modal', disabled, type='button')
                        i.fa.fa-save.fa-lg.fa-fw
                        |  Mentés 
                    a.btn.btn-success(href='/work/'+workId)
                        i.fa.fa-home.fa-lg.fa-fw
                        |  Vissza                                                    
        br
      
    script(src='/bower_components/jquery/dist/jquery.js')
    script(src='/js/work_utils.js')
    script(type='text/javascript', src='/bower_components/moment/min/moment.min.js')
    script(type='text/javascript',src='/build/pdfmake.js')
    script(type='text/javascript',src='/build/vfs_fonts.js')
    script(src='https://unpkg.com/lightpick@latest/lightpick.js')
    script(src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.14.2/sweetalert2.min.js" integrity="sha512-nD7/PXl2UD6bAYMJVKTLhr7qwnWVvoyqk8/WMzedDKMiQbaNXT3EUPzLYbLUHCLWqAZoXO37aVCtCKmAxZfqGw==" crossorigin="anonymous" referrerpolicy="no-referrer")
    script.
        $(document).ready(function () {
            //var dummy=document.getElementById('dummy').textContent
            var wn = document.getElementById ('wn').textContent;
            var wid = document.getElementById ('wid').textContent;
            var uid = document.getElementById ('uid').textContent;            
                 dummy=   {
            // Napi jelentés
                workId:wid,
                date: new Date(),
                foremanId: uid,
                workTitle: wn,
                workFlow: [],
            }      
            document.getElementById('dummy').textContent=JSON.stringify(dummy)

            document.getElementById('sendData').addEventListener('click', function(a) {
                console.log("Jacica")
                var dummy=document.getElementById('dummy').textContent
                var t=JSON.parse(dummy);
                var newRow= ""
                $.each(t.workFlow,function(i,item){
                const rows=item.employeeList.length
               newRow= `<tr>` +
                `<td rowspan="${rows}">${i}</td>`+
                `<td rowspan="${rows}" >${item.Title}</td>`
                $.each(item.employeeList,function(idx,employee){
     

                if (idx==0){
                    newRow+=`<td>${employee.name}</td>`+
                `<td><button>Edit</button></td>`
                newRow+= `</tr>`
                } else 
                {
                newRow+=`<tr><td>${employee.name}</td>`+
                `<td><button>Edit</button></td></tr>`
                }

                })

                })

            $('#workReportTable > tbody:last-child').append (newRow);
                    if (document.getElementById('dummy').textContent.length && document.getElementById('dpNewWorkReport').value.length)
                    {
                        document.getElementById('btnSave').disabled=false
                    }
            })
            document.getElementById('btnSave').addEventListener('click', function(a) {
                const da=JSON.parse(document.getElementById('dummy').textContent)
                const dt=document.getElementById('dpNewWorkReport').value
            if (!da.workFlow.length)
            {
                alert("Adjon hozzá valamit!")
                return
            }
            if (!dt.length)
            {
                alert("Válasszon Dátumot!")
                return
            } 
            da.date=dt 
            console.log(da)
            
            // Adatok mentése szerverre
                    const response =  fetch('/workreportSave', {
                    method: 'POST',
                    headers: {
                                "Content-Type": "application/json",
                            },
                    body: JSON.stringify(da)
                    })
                    .then(response => response.json())
                    .then(data => {
                    //console.log(data)
                    if (!data.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
                                });  
                                window.location.href = "/work/"+da.workId;
                                
                        }   else 
                        {
                                Swal.fire({
                                position: "top-end",
                                icon: "error",
                                title: data.message,
                                showConfirmButton: false,
                                timer: 1500,
                                backdrop: false
                                });
                        }                    
 
                    })
                    .catch(error => console.error('Error:', error));            
            });
        })
        const dd=JSON.parse(document.getElementById('ddates').textContent)
        var picker = new Lightpick({ field: document.getElementById('dpNewWorkReport'),
                singleDate: true, 
                inline: false,  
                //numberOfColumns: 2,  
                //numberOfMonths: 2,
                disableDates: dd,
                format: 'YYYY.MM.DD',
                disableWeekends: false,
                maxDate: moment(),
                onSelect: function(date){
                    selectedDate=date
                    const da=JSON.parse(document.getElementById('dummy').textContent).workFlow.length
                
                    if (da )
                    {
                        document.getElementById('btnSave').disabled=false
                    }
                }
                    });