extends layout_side

block content
    - function datesDiff(s,e) { var a=moment(e,'DD-MM-YYYY');var b=moment(s,'DD-MM-YYYY'); return a.diff(b,'days'); };
    link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.6.1/css/all.css', integrity='sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP', crossorigin='anonymous')
    link(rel='stylesheet', type='text/css', href='https://unpkg.com/lightpick@latest/css/lightpick.css')
    #sickpayModal.modal(tabindex='-1', role='dialog', aria-labelledby='sickpayModalLabel', aria-hidden='true')
      form(method='POST',id='sickpayForm' action='/employee/sickpay_byperson/'+employee._id)
        .modal-dialog(role='document', style='width:620px')
          .modal-content
            .modal-header
              h4#holidayModalLabel.modal-title Táppénz felvétele #{employee.name}
              h4.modal-title(id='Sickpay') 
            .modal-body

              h4 Táppénz időtartama:
              input#sField(name='sField',type=text,readonly, style='display:none;') 
              input#eField(name='eField',type=text,readonly, style='display:none;')
              input.form-control(id='sickpayPicker',name='sickpayPicker',type=text, tabindex='2',readonly,style='background-color:#c9ddfc;') 
              //input(type="text",id="datepicker")
              br                 
            .modal-footer
              button.btn.btn-secondary(type='button', data-dismiss='modal') Mégsem
              button.btn.btn-primary(type='submit') Rendben
    br 
    label#uid(style='display:none;') #{employee._id}
    .container#wrapper(style='width:100%;')
      h2.contHeader(id='month') #{title} 
      br
      #form-group(style='margin-left:80px;width:90%; background-color:#1F2739;')
        
        .row(style='padding-left:10px;')
          .col-sm-2(style='min-width:100px;')
            .form-group(style='min-width:100px;')
              label Kiadott táppénz:
              input.form-control(id='vacationUsed',name='vacationUsed',type=text,readonly,  style='color: white;background-color:#2C3446;width:140px',value=employee.vacationUsed)
          .col-sm-3
            .form-group(style='min-width:100px;')
              a.btn.btn-primary(href='#',data-toggle='modal', data-target='#sickpayModal',style='margin-top:24px;') Táppénz felvétel
              //a.trigger(href='#', data-toggle='modal', data-target='#holidayModal') Új szabadság kiadása  
              |    
              button.btn.btn-default.btn-sm(id='print2',name='print2',type='button',style='margin-top:24px;')
                span.glyphicon.glyphicon-print
                |  Nyomtat 
              |     
              a.btn.btn-success(href='/employee/detailstemp/'+employee._id,style='margin-top:24px;') Vissza          
      br      
      #darktable.container
        table#monthHoursTable.container(style='width:90%;')
          col(width='5%')
          -//col(width='auto')
          col(width='17%')
          col(width='12%')
          col(width='12%')
          -//col(width='5%')
          -//col(width='5%')
          -//col(width='5%')
          thead
            tr
              th
                h1(style='text-align:center') #
              -//  th
              -//    h1 Név
              th
                h1(style='text-align:left') Kezdet                
              th
                h1(style='text-align:left') Lejárat
              th
                h1(style='text-align:left') Napok               
            -// th
            -//   h1(style='text-align:right') Ünnepnapok
            -// th
            -//   h1(style='text-align:right') Státusz
            -// th
            -//   h1(style='text-align:center') Helyszín                
            -// th
            -//   h1(style='text-align:center') Órák
          tbody
            each hd, i in employee.sickpayData
              tr.clickable-clientRow(data-href="/employee/detailstemp/"+employee._id)
                td #{i+1}
                td(style='text-align:left') #{moment(hd.start_date,'DD-MM-YYYY').format('YYYY.MM.DD')}
                td(style='text-align:left') #{moment(hd.end_date,'DD-MM-YYYY').format('YYYY.MM.DD')}
                td(style='text-align:left') #{hd.duration} 
            -//datesDiff(hd.start_date,hd.end_date)}
            -//    td(style='text-align:left') #{wt.vacation}
            -//    td(style='text-align:right') #{wt.weekends}
            -//    td(style='text-align:right') #{wt.redLetterDays}
            -//    td(style='text-align:right') #{wt.workHours}
 
    script(type='text/javascript', src='/bower_components/jquery/dist/jquery.min.js')
    script(type='text/javascript', src='/bower_components/moment/min/moment.min.js')
    script(src='/bower_components/moment/min/moment-with-locales.js')    
    script(type='text/javascript', src='/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js')
    script(src='https://unpkg.com/lightpick@latest/lightpick.js')          
    script(src='/js/workingtime.js')
    script.
      function submitDeviceNumber(a)
      {
        console.log(a);
      }
        $('#sickpayform').on('submit', function(e) {
            e.preventDefault();
            var data =  $(this).serialize();
            $.get('/localLogin', data, function(result) {
                if(result.valid == true)
                {
                    window.location.href = '/profile';
                }
                else
                {
                    $('#loginPopup').html(result);
                }
            });
        });
      $(document).ready(function () {
        //jQuery.noConflict();
        var bodyId = document.getElementById('Sickpay');
        var remaining=bodyId.getAttribute('data-remaining');


        var picker = new Lightpick({ field: document.getElementById('sickpayPicker'),
                                    singleDate: false, 
                                    inline: true,  
                                    numberOfColumns: 2,  
                                    numberOfMonths: 4,
                                    disableWeekends: false,
                                    //minDate: moment(),
                                    maxDays:  remaining,
                                    //disableDates:  [['21.09.2020', '22.09.2020'], ['24.09.2020', '25.09.2020']],
                                    onSelect: function(start, end){
                                    var startField = '';
                                    var endField = '';
                                    startField = start.format('DD.MM.YYYY');
                                    endField = end ? end.format('DD.MM.YYYY') : '...';
                                    document.getElementById('sField').value = startField;
                                    document.getElementById('eField').value = endField;
                                    }
                                    
                                    });

            console.log(remaining);
            $.get('/employee/get_sickpayById/'+document.getElementById('uid').innerHTML, function(result){
            console.log(result);
            picker.setDisableDates(result);

         
        });
        /*$.get('/employee/worktimelist/'+moment().format('YYYY.MM.DD') , function(wtList) { 
          renderWorkingTimesTable(wtList);
        });	*/
        $("#mworkers").click();
        $("#listworktime").addClass("active");
       /* $('tr[data-href]').on("click", function() {
      document.location = $(this).data('href');
      });*/

      });