link(rel='stylesheet', type='text/css', href='https://unpkg.com/lightpick@latest/css/lightpick.css')
#oilChangeNewModal.fade.modal(tabindex='-1', 
    role='dialog', 
    aria-labelledby='oilChangeModalLabel', 
    aria-hidden='true',

    )
  //-form(method='GET',id='holidayForm' action='/employee/holidays_byperson/')
  .modal-dialog(role='document', style='width:720px')
    .modal-content
      .modal-header#oilChangeHeader.bg-primary(style="background: Primary")
        h4#vehicleIdoc.modal-title A
      .modal-body(style='background-color:#4f5b69')
        .container(style='width:100%;')
            .form-group
              label.form-label(for='oilChangePicker') Olaj csere időpontja
              .input-group
                input.form-control(id='oilChangePicker',required,placeholder='Olaj csere időpontja',name='oilChangePicker',type=text, tabindex='2',readonly,style='background-color:#c9ddfc;') 
                span.input-group-addon
                  span.glyphicon.glyphicon-calendar 
            br
            .row
              .col-sm-6
                .form-group
                  input#vehicleId.form-control(name='vehicleId',type=text,readonly,required, style='display:none;')
                  label.form-label(for='select-vehicle') Rendszám
                  select#select-vehicle.form-control(required,data-live-search='true')
                    option.selected.disabled(data-tokens='') Válasszon járművet               
              .col-sm-6
                .form-group
                  label.form-label(for='select-vehicle') Kilométeróra állás
                  .input-group
                    span.input-group-addon.transparent
                      span.glyphicon.glyphicon-dashboard
                    input#oilChangeKilometer.form-control(name="oilChangeKilometer" placeholder='Óra állás olajcsere után' min=0 type='number')
                  p.help-block.hidden Please enter a name 3 characters or more.            
         
            
      .modal-footer(style="background-color: #2C3446")
          button.btn.btn-primary(type='button', data-dismiss='modal') 
            i.fa.fa-arrow-left
            |  | Bezár
          button#oilChangeSave.btn.btn-primary(type='button' ) 
            i.fa.fa-save
            |  | Mentés 
    script(src='/bower_components/jquery/dist/jquery.js')            
    script(type='text/javascript', src='/bower_components/moment/min/moment.min.js')
    script(src='https://unpkg.com/lightpick@latest/lightpick.js')
    
script.
        //- Olajcsere modal
        $('#oilChangeNewModal').on('show.bs.modal', function () {
          var getIdFromRow = $('#vehicleId').val()
          if (getIdFromRow) // Ha kaptunk Id-t Kiválasztjuk a listából!
          {
            $.get('/vehicles/api/getVehicle/'+getIdFromRow,function(data)
            {
              $('#vehicleIdoc').html($('<b> Olaj csere: '+ data.name  + '</b> <b style="float:right">'+data.vehicle_id+'</b>' ))
              $('#select-vehicle').val(getIdFromRow);
              $('#select-vehicle').attr('disabled',true)
            })  
          }
          else 
          {
            $('#select-vehicle').attr('disabled',false)
          }
          $(this).find('form').trigger('reset');
          $(this).find('#vehicleIdoc').html($('<b>Olaj csere hozzáadás</b> <b style="float:right">'+'</b>' ))
        //- Mentés 
        })
        $( "#oilChangeSave" ).click(function() {

            event.preventDefault();
            //-validate name
            var th=$(this);
            var oilChangeKilometer = $('#oilChangeKilometer').val();
            var oilChangeLast=$('#oilChangeLast').val();
            var oilChangeDate=picker.getDate();
            const editId = $('#select-vehicle').val();
            if (oilChangeKilometer.length < 4) {
              return showErrorSuccess($('#oilChangeKilometer'), false, 'Legalláb 4 karakter!');
            }
            if (oilChangeKilometer<=oilChangeLast) {
              return showErrorSuccess($('#oilChangeKilometer'), false, 'Az olajcsere óra állása nem lehet kisebb, mint az előző!');
            }  
                //- disable button
            $(this).prop("disabled", true);
            //- add spinner to button
            $(this).html('<i class="fa fa-circle-o-notch fa-spin"></i> Várjon!');                     
            showErrorSuccess($('#oilChangeKilometer'));
            $.post( "/vehicles/api/oilchangeVehicle/"+editId, { oilChangeLast:oilChangeKilometer,oilChangeDate:oilChangeDate.toISOString()})
            .done(function( data ) {
                                    // disable button
              th.prop("disabled", false);
              // add spinner to buttoni.fa.fa-save
              th.html('<i class="fa fa-save"></i> Mentés'); 
              $('.modal-backdrop').remove()
              $('#oilChangeNewModal').hide();

            }).fail(function(xhr,status,error){
              alert( "Hiba: " + xhr.responseText );
                                                  // disable button
              th.prop("disabled", false);
              // add spinner to buttoni.fa.fa-save
              th.html('<i class="fa fa-save"></i> Mentés'); 
            })

        }); 
          $('#select-vehicle').empty();
          $('#select-vehicle').on('change',function() {
          var id=$(this).val();
         
          $.get('/vehicles/api/getVehicle/'+id,function(data)
            {
              $('#vehicleIdoc').html($('<b> Olaj csere: '+ data.name  + '</b> <b style="float:right">'+data.vehicle_id+'</b>' ))
            })  
        });
          $('#select-vehicle').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-vehicle').append('<option value="'+element._id+'">'+element.vehicle_id+' '+element.name+'</option>');
                    })
                }
              )        
    var picker = new Lightpick({ field: document.getElementById('oilChangePicker'),
                        singleDate: true, 
                        inline: false,  
                        //numberOfColumns: 2,  
                        //numberOfMonths: 4,
                        format: 'YYYY.MM.DD',
                        disableWeekends: false,
                        maxDate: moment(),
                        //maxDays:  remaining,
                        //disableDates:  [['21.09.2020', '22.09.2020'], ['24.09.2020', '25.09.2020']],

                        
                        });