extends layout

block content
  .mainContainer
    link(rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.css')
    link(rel='stylesheet' href='/bower_components/bootstrap-select/dist/css/bootstrap-select.css')
    link(rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css')
    link(rel='stylesheet', type='text/css', href='https://unpkg.com/lightpick@latest/css/lightpick.css')
    style.
      .badge-success {
        background-color: #468847;
      }
      .badge-success:hover {
        background-color: #356635;
      }
      .padFix{
          padding-top:8px;
      }      
      .table-wrapper {
        max-height: 600px;
        overflow: auto;
        display:inline-block;
      } 
    include Modals/modal_oilChangeNew
    include Modals/modal_timingReplacementNew
    #refuelModal.modal(tabindex='-1', role='dialog', aria-labelledby='refuelModalLabel', aria-hidden='true')
      form(method='POST',id='refuelForm' data-toggle="validator" role="form" action='/vehicles/api/refueling/')
        .modal-dialog(role='document', style='width:620px')
          .modal-content
            .modal-header
              h4#refuelModalLabel.modal-title Üzemanyag tankolás

            .modal-body
              //h4 Tankolás időpontja:
              //input#dateField(name='dateField',type=text,readonly) 
              //input#eField(name='eField',type=text,readonly, style='display:none;')
              #form-group
                label.form-label(for='refuelPicker') Tankolás időpontja
                .input-group
                  input.form-control(id='refuelPicker',required,placeholder='Tankolás időpontja',name='refuelPicker',type=text, tabindex='2',readonly,style='background-color:#c9ddfc;') 
                  span.input-group-addon
                    span.glyphicon.glyphicon-calendar
              br
              .row
                .col-sm-8
                  #form-group
                    input#vehicleIdF.form-control(name='vehicleIdF',type=text,required, readonly,style='display:none;')
                    label.form-label(for='select-country') Rendszám
                    select#select-country.form-control(required,data-live-search='true')
                      option.selected.disabled(data-tokens='') Válasszon járművet               
                .col-sm-4
                  #form-group
                    label.form-label(for='kmcounter') Km óra állás
                    input#kmcounter.form-control(name='kmcounter',required,pattern="^[0-9]+$" , type=number,placeholder='Km óra állás')    
              br
              .row
                .col-sm-4
                  #form-group
                    label.form-label(for='fueledqty') Tankolt mennyiség (l)
                    input.form-control#fueledqty(name='fueledqty',required,pattern="^[0-9]{0,3}+$" ,type=number,placeholder='Tankolt mennyiség')   
                .col-sm-4     
                  #form-group
                    label.form-label(for='fueledqty') Összeg(HUF)
                    input.form-control#fueledHUF(name='fueledHUF',required,pattern="^[0-9]+$" ,type=number,placeholder='Fizetett összeg')                                       
              br  
                         
            .modal-footer
              button.btn.btn-secondary(type='button', data-dismiss='modal') Mégsem
              button.btn.btn-primary(type='submit') Rendben

    #form-group
      .btn-toolbar
        if (user.canAdd.work)          
          a.btn.btn-success.col-sm-2(type='button',href='/work/add',value='Új munka felvétele') 
            i.fa.fa-plus.fa-lg.fa-fw
            |  Új munka felvétele               

        if(rot)         
          a.btn.btn-primary.col-sm-1(type='button',href='/employee/WTALL',value='Könyvelésre') Könyvelésre   
          a.btn.btn-primary.col-sm-21(type='button',href='/employee/WTALL2',value='Jelenléti személyenként') Jelenléti személyenként                
          a.btn.btn-primary.col-sm-1(type='button',disabled,href='/employee/tst',value='TST') TST    

          a.btn.btn-primary.col-sm-1(type='button',href='/gantt',value='Idővonal') Idővonal
          a.btn.btn-warning.col-sm-1(type='button',href='#',data-toggle='modal', data-target='#refuelModal') Tankolás
          button.btn.btn-primary(data-toggle='modal',data-target='#oilChangeNewModal',title='Olajcsere felvitele',style='width:40px;',type='button')
            i.fa.fa-tint
          button.btn.btn-primary(data-toggle='modal',data-target='#timingReplacementNewModal',title='Vezérlés csere',style='width:40px;',type='button')
            i.fa.fa-cogs         
          a.btn.btn-primary.col-sm-1(id='print',name='print',type='button')
            span.glyphicon.glyphicon-print(aria-hidden='true')
            |  Nyomtat       
        .dropdown
          a.dpd.btn.btn-primary.dropdown-toggle.col-sm-1(id='dpd',type='button', data-toggle='dropdown', value='',style="margin-left: 4px")
            i.fa.fa-filter.fa-lg.fa-fw
            | Szűrés 
            span.caret
          ul.dropdown-menu
            li
              a(href='#' ,data-value='2017') 2017            
            li
              a(href='#',data-value='2018') 2018            
            li
              a(href='#',data-value='2019') 2019
            li
              a(href='#',data-value='2020') 2020
            li
              a(href='#',data-value='2021') 2021 
            li
              a(href='#',data-value='2022') 2022
            li
              a(href='#',data-value='2023') 2023   
            li
              a(href='#',data-value='2024') 2024                                                            
            li
              a(href='#',data-value='') Mind             
          //.input-group
            input.form-control(type='text', id='findWork' placeholder='Keresés...')
            .input-group-btn
              button.btn.btn-default(type='submit')
                i.glyphicon.glyphicon-search                      
    body
      br
      .panel.panel-primary
        .panel-heading
          .row
            .col-sm-6
              h3.panel-title.padfix #{title}
              span.badge #{works.length}
            .col-sm-6
              .input-group
                input.form-control(type='text'  id='findWork' value='' placeholder="Keresés...")
                .input-group-btn
                  button.btn.btn-success
                    i.glyphicon.glyphicon-search   
                            
        .panel-body
              h2#results
              .col-12.col-xs-12.col-sm-12.col-lg-12
                .table-responsive.table-wrapper
                  table.table.table-striped
                    col(width='1%')
                    col(width='1%')
                    col(width='auto')
                    col(width='auto')
                    //-col(width='5%')
                    col(width='5%')
                    col(width='5%')
                    col(width='5%')
                    col(width='3%')
                    col(width='3%')
                    col(width='5%')
                    col(width='5%')
                    thead
                      tr
                        th #
                        th 
                        th(style='text-align:left') Megrendelő
                        th Megnevezés
                        //-th(style='text-align:center') File
                        th(style='text-align:center') Létrehozva
                        th(style='text-align:center') Státusz
                        th(style='text-align:left') M.SZ.
                        th(style='text-align:center') Órák
                        th(style='text-align:center') Műhely
                        th(style='text-align:center') PO szám
                        th(style='text-align:left') Ber.
                    tbody(id='workTable',style='overflow-y: auto;')
                      each work, i in works
                        tr
                          td #{i+1}
                          if (work.enaploTemplate)
                            td 
                              img(src='enaplo.png', width='16px', height='16px',style='text-align:center;vertical-align: middle',data-original-title='Enapló köteles' data-toggle='tooltip' data-placement='bottom' data-container='body')
                          else 
                            td
                          td(style='text-align:left; vertical-align:middle;font-size: 9px;font-weight: bold;') #{work.megrendelo || "-"}
                          td(style='vertical-align:middle') 
                            a(href="/work/"+work._id)= work.title
                          //-td(style='text-align:center;vertical-align:middle')
                            if (work.filesCM.length>0)
                              span.badge.badge-success #{work.filesCM.length}
                            else
                              span.badge #{work.filesCM.length}                          
                          td(style='text-align:center;vertical-align:middle') #{moment(work.workDate).format("YYYY.MM.DD")}
                          if (work.state==='Opened')
                            td(style='text-align:center;vertical-align:middle; color:green') 
                               i.fa.fa-unlock
                          else
                            if (work.state==='Closed')
                              td(style='text-align:center;vertical-align:middle; color:red')
                                i.fa.fa-lock
                            else
                              td(style='text-align:center;vertical-align:middle') 

                          td(style='text-align:left;vertical-align:middle') #{work.workNumber}
                          td(style='text-align:center;vertical-align:middle')
                            if (work.wc>0)
                              span.badge.badge-success #{work.wc}
                            else
                              span.badge #{work.wc}
                          td(style='text-align:center;vertical-align:middle')                              
                            if (work.wrc>0)  
                              span.badge(style="background-color: DodgerBlue !important") #{work.wrc}
                            else
                              span.badge #{work.wrc}
                          td(style='text-align:center;vertical-align:middle') #{work.poNumber}
                          td(style='text-align:left;vertical-align:middle')
                            if (work.devicesArray.length>0)
                              span.badge.badge-success #{work.devicesArray.length} 
                            else 
                              span.badge #{work.devicesArray.length} 
    script(src='/bower_components/jquery/dist/jquery.js')
    script(type='text/javascript',src='/build/pdfmake.js')
    script(type='text/javascript',src='/build/vfs_fonts.js')
    script(type='text/javascript', src='/bower_components/moment/min/moment.min.js')
    script(type='text/javascript', src='/bower_components/bootstrap-select/dist/js/bootstrap-select.min.js')
    script(src='https://unpkg.com/lightpick@latest/lightpick.js')
    script.
          (() => {
        'use strict'

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        const forms = document.querySelectorAll('.needs-validation')

        // Loop over them and prevent submission
        Array.from(forms).forEach(form => {
          form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }

            form.classList.add('was-validated')
          }, false)
        })
      })()

           /*   $('#refuelModal').on('submit', function(e) {
            e.preventDefault();
            var data =  $(this).serialize();
            $.post('/vehicles/api/refueling/', data, function(result) {
                if(result.valid == true)
                {
                    window.location.href = '/profile';
                }
                else
                {
                    $('#loginPopup').html(result);
                }
            });
        });*/
                $('#refuelModal').on('shown', function () {
              $(this).find('form').trigger('reset');
          })
                  var showErrorSuccess = function(element, status, message) {
          if (status === false) {
            element.next().removeClass('hidden')//.parent().addClass('has-error');
            element.parent().addClass('has-error');
            element.parent().next().text(message)
            return false;
          }
          element.next().addClass('hidden')//.parent().removeClass('has-error').addClass('has-success');
          element.parent().removeClass('has-error');
        };
          $(function () {
            //$('#refuelForm').validator()
          $('#select-country').on('click',function() {
            console.log($(this).val())
            $('#vehicleIdF').val($(this).val())
          })
          $('#select-country').empty();
          $('#select-country').append('<option selected disabled data-tokens=""'+'"> Válasszon járművet</option>');
              $.get('/vehicles/api/getVehicles',function(data)
                {
                  data.forEach((element)=>{
                    console.log(element.vehicle_id+' '+element.name)
                    $('#select-country').append('<option value="'+element._id+'">'+element.vehicle_id+' '+element.name+'</option>');
                    })

                    //$('.selectpicker').selectpicker('refresh');
                   // $('#select-country').data-style="btn-info",
                }
              )
              var picker = new Lightpick({ field: document.getElementById('refuelPicker'),
                                    singleDate: true, 
                                    inline: false,  
                                    //numberOfColumns: 2,  
                                    //numberOfMonths: 4,
                                    format: 'YYYY.MM.DD',
                                    disableWeekends: false,
                                    //minDate: moment(),
                                    //maxDays:  remaining,
                                    //disableDates:  [['21.09.2020', '22.09.2020'], ['24.09.2020', '25.09.2020']],
                                   /*onSelect: function(date){
                                      document.getElementById('dateField').value = Date.parse(date);
                                      
                                    }*/
                                    /*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;
                                    }*/
                                    
                                    });
                                    });
          $(function(){
            $("[data-toggle='tooltip']").tooltip();
            $("#findWork").on("keyup", function() {
              var yr=$("#dpd").val();
              var cond=$(this).val();
               var parameters = { year: yr, condition: cond };
               console.log(parameters);
              $.get( '/filter',parameters, function(data) {

                var wTable=document.getElementById("workTable");
                    wTable.innerHTML=data;
          
                
              }); 
            });
            $(".dropdown-menu li a").click(function(){
              $(this).parents(".dropdown").find('.dpd').html($(this).text() + ' <span class="caret"></span>');
              $(this).parents(".dropdown").find('.dpd').val($(this).data('value'));
              //console.log($(this).data('value'));
              var cond=$("#findWork").val();
              var yr=$("#dpd").val();
              var parameters = { year: yr,condition: cond };
              $.get( '/filter',parameters, function(data) {
                //console.log(data);
                $('#workTable').empty();
                var wTable=document.getElementById("workTable");
                    wTable.innerHTML=data;
          
                //}                 
              });              
            });
            
        // Lista nyomtatása
      $("#print").click(function(ev) {
        
        isLoaded=false;
              $(this).parents(".dropdown").find('.dpd').html($(this).text() + ' <span class="caret"></span>');
              $(this).parents(".dropdown").find('.dpd').val($(this).data('value'));
              //console.log($(this).data('value'));
              var cond=$("#findWork").val();
              var yr=$("#dpd").val();
              var parameters = { year: yr,condition: cond };
            $.get('/print',parameters , function(data) {

              if (!isLoaded)
              {	isLoaded=true;
              
                //console.log(data); 
                pdfMake.createPdf(data).open();
              }
            });

      });

      });