extends layout_vehicles

block content
    style.
      .fc-daygrid-event {
        white-space: normal !important;
        align-items: normal !important;
      }    
      .table-image {
          td, th {
            vertical-align: middle;
          }
        }
    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' href='/bower_components/bootstrap/dist/css/bootstrap.min.css')
    link(href='/bower_components/bootstrap-toggle/css/bootstrap-toggle.min.css', rel='stylesheet', type='text/css')
    link(href='https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/css/bootstrap-switch-button.min.css' rel='stylesheet')
    //-link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css')
    
    include Modals/modal_settings
    include Modals/modal_fuelingInfo
    include Modals/modal_oilChange
    include Modals/modal_oilChangeNew
    include Modals/modal_map
    include Modals/modal_timingReplacementNew
    include Modals/modal_timingReplacements   
    #vehicleModal.fade.modal(tabindex='-1', role='dialog', aria-labelledby='vehicleModalLabel', aria-hidden='true')
      //-form(method='GET',id='holidayForm' action='/employee/holidays_byperson/')
      .modal-dialog(role='document', style='width:720px')
        .modal-content
          .modal-header.bg-primary(style="background: Primary")
            h4#vehicleId.modal-title A
          .modal-body
            #calendar(style="background-color: white")
                //-iframe(width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&height=600&hl=en&q=47.5121667,21.6454722+(My%20Business%20Name)&t=k&z=18&ie=UTF8&iwloc=B&output=embed")
                //-iframe(src='https://www.google.com/maps/embed?pb=!1d90.40409584970706!2d23.749000170125925' width='100%' height='450' frameborder='0' style='border:0' allowfullscreen='')
            br                 
          .modal-footer
            button.btn.btn-primary(type='button', data-dismiss='modal') Bezár
            
            //-button.btn.btn-primary(type='submit') Rendben

    #vehicleEditModal.fade.modal(tabindex='-1', role='dialog', aria-labelledby='vehicleEditModalLabel', aria-hidden='true')
      //-form(method='GET',id='holidayForm' action='/employee/holidays_byperson/')
      .modal-dialog(role='document', style='width:720px')
        .modal-content
          .modal-header#fuelingHeader.bg-primary(style="background: Primary")
            h4#vehicleId.modal-title A
          .modal-body
            .row 
              .col-sm-6
                .form-group
                  label.form-label(for='editVehicleName' style="color: black !important") Megnevezés:
                  input#editVehicleName.form-control(name='editVehicleName',type=text, autofocus,tabindex='1', readonly=false,width='1000')
              .col-sm-3
                .form-group           
                  label.form-label(for='editVehicleId') Rendszám:
                  input#editVehicleId.form-control(name='editVehicleId',type=text, tabindex='3', readonly=false)               
              .col-sm-3
                .form-group           
                  label.form-label(for='editVehiclePersons') Személyek száma:
                  input#editVehiclePersons.form-control(name='editVehiclePersons',type=number, tabindex='2', readonly=false, value= 1) 
            br      

            br
            .row
              .col-sm-6
                .form-group
                  label.form-label(for='editOilChange') Olajcsere intervallum:
                  input#editOilChange.form-control(name='editOilChange',type=number, tabindex='4', readonly=false,required=true)
                  p.help-block.hidden Please enter a name 3 characters or more.  
              .col-sm-6
                .form-group           
                  label.form-label(for='editLastOilChange') Legutóbbi Olajcsere:
                  input#editLastOilChange.form-control(name='editLastOilChange',type=number, tabindex='4', readonly,required=true) 
                  p.help-block.hidden Please enter a name 3 characters or more.  
              .col-sm-6   
            #form-group
              br
              label.form-label(for='fasz') Láthatóság:
              br
              input#fasz(type='checkbox' data-width=94 data-height=35 data-toggle='switchbutton' checked='' data-onlabel="Látható" data-offlabel="Rejtett" data-onstyle="success" data-offstyle="danger")
              //-input#mobilePortalAccessEnabled(type='checkbox',name='mobilePortalAccessEnabled',data-onstyle="primary",value='on', data-offstyle="default", data-toggle='toggle',data-on="Be", data-off="Ki")
            br                        
            br                 
          .modal-footer
            button.btn.btn-primary(type='button', data-dismiss='modal') 
              i.fa.fa-arrow-left
              |  | Bezár
            button#editSave.btn.btn-primary(type='button') 
              i.fa.fa-save
              |  | Mentés            
    .container#main(style='width:100%;')
      h2.contHeader #{title}
      #darktable.container
        table#vehicleTable(style='width:100%;')
          col(width='5%')
          col(width='15%')
          col(width='8%')
          col(width='10%')
          col(width='6%')
          col(width='6%')
          col(width='6%')
          col(width='6%')
          col(width='8%')          
          col(width='auto')
          col(width='8%')

          thead
            tr
              th
                h1(style='text-align:center') #
              th
                h1 Megnevezés
              th
                h1(style='text-align:left') Személyek
              th
                h1(style='text-align:left') Rendszám
              th
                h1(style='text-align:center') Pozíciók
              th
                h1(style='text-align:center') Tankolások              
              th
                h1(style='text-align:center') Olajcsere
              th
                h1(style='text-align:center') Vezérlés                
              th
                h1(style='text-align:center') Esedékes Olajcsere                
              th 
                h1(style='text-align:center') Utolsó pozíció
              th 
                h1(style='text-align:center') Szekeszt                
       
          tbody
            each vehicle, i in Vehicles
              if(vehicle.visible==true || showAll==true)
                tr 
                  //-.clickable-clientRow(data-id=vehicle._id, data-vid=vehicle.vehicle_id,data-name=vehicle.name,data-toggle='modal', data-target='#vehicleModal') 
                  //-data-href="/vehicles/details/"+vehicle._id,
                  td #{i+1}
                  td(style='text-align:left') #{vehicle.name}
                  td(style='text-align:center') #{vehicle.persons}
                  td(style='text-align:left') #{vehicle.vehicle_id}
                  td(style='text-align:center')
                     button.btn.btn-primary(data-id=vehicle._id, data-vid=vehicle.vehicle_id,data-name=vehicle.name,data-toggle='modal', data-target='#vehicleModal',style='width:40px;',type='button')
                      span.glyphicon.glyphicon-map-marker(aria-hidden='true')   
                  td(style='text-align:center')
                     button.btn.btn-primary(data-id=vehicle._id, data-vid=vehicle.vehicle_id,data-name=vehicle.name,data-toggle='modal', data-target='#fuelingModal',style='width:40px;',type='button')
                      i.fa.fa-gas-pump                    
                  td(style='text-align:center')
                    button.btn.btn-primary(data-id=vehicle._id, data-vid=vehicle.vehicle_id,data-name=vehicle.name,data-toggle='modal', data-target='#oilChangeModal',style='width:40px;',type='button')
                      i.fa.fa-tint 
                  td(style='text-align:center')
                    button.btn.btn-primary(data-id=vehicle._id, data-vid=vehicle.vehicle_id,data-name=vehicle.name,data-toggle='modal', data-target='#timingReplaceModal',style='width:40px;',type='button')
                      i.fa.fa-cogs                       
                  td(style='text-align:center') #{vehicle.oilChangeRemainingKm} km
                  if (vehicle.lastCity.length>0) 
                    td(style='text-align:center; font-size: 12px') #{lastPos=vehicle.lastCity.at(-1).city}  #{moment(vehicle.lastCity.at(-1).timestamp).format("YYYY.MM.DD HH:mm")}
                  else 
                    td(style='text-align:center') -
                  td(style='text-align:center')
                    button.btn.btn-success(data-id=vehicle._id, data-vid=vehicle.vehicle_id,data-name=vehicle.name,data-toggle='modal', data-target='#vehicleEditModal',style='width:40px;',type='button')
                      i.fa.fa-edit
    //-script(type='text/javascript', src='/bower_components/bootstrap-toggle/js/bootstrap-toggle.min.js')
    script(src='https://cdn.jsdelivr.net/gh/gitbrent/bootstrap-switch-button@1.1.0/dist/bootstrap-switch-button.min.js')

    script.
      $(document).ready(function () {
      // Get current page name
      const currentUrl = window.location.href;
      var page = currentUrl.split("/").pop();
      if (page==='viewAll')
      {
        $("#vehicle").addClass("collapse in")
        $("#vehiclelistAll").addClass("active");
      }
      if (page==='view')
      {
        $("#vehicle").addClass("collapse in")
        $("#vehiclelist").addClass("active");
      }      
          function isNumber(str) {
            if (typeof str != "string") return false // we only process strings!  
            const ret= !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
                  !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
                  return ret
          }      
        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');
        };

      //$(document).ready(function() {        
        function specialValidation(value, validator) {
            // Determine the numbers which are generated in captchaOperation
            var items = $('#otherField').txt();
            return value == sum;
        };

      //})
          $('tr[data-href]').on("click", function() {
          document.location = $(this).data('href');
          });

           // Szerkesztés modal
           $(document).on('show.bs.modal','#vehicleEditModal', function () {
            //$('#vehicleEditModal').on('show.bs.modal', function () {
            // console.log('PICSA!');
            //$(document).on('show.bs.modal','#vehicleEditModal', function () {
              var getIdFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-id')//$(event.target).closest('tr').data('id');
              var getVidFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-vid');//$(event.target).closest('tr').data('vid');
              var getVnameFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-name');//$(event.target).closest('tr').data('name');
              //$('.modal-backdrop').css('background', 'red');
              //$("#fuelingHeader").html(getIdFromRow); 
              $(this).find('#vehicleId').html($('<b> Szerkesztés: '+ getVnameFromRow  + '</b> <b style="float:right">'+getVidFromRow+'</b>' ))
              $.get('/vehicles/api/getVehicle/'+getIdFromRow,function(data)
                {
                  $('#editVehicleName').val(data.name);
                  $('#editVehiclePersons').val(data.persons);
                  $('#editVehicleId').val(data.vehicle_id);
                  $('#editOilChange').val(data.oilChangeInterval);
                  $('#editLastOilChange').val(data.oilChangeLastVal);
                  $('#vehicleId').val(getIdFromRow);
                  if (data.visible)
                  {
                      document.getElementById('fasz').switchButton('on')
                  }
                  else 
                  {
                    document.getElementById('fasz').switchButton('off')
                  }
                  //$('#mobilePortalAccessEnabled').val(1);
                });
           })  
           // Mentés 
            $( "#editSave" ).click(function() {
              event.preventDefault();
                const editVehicleName =  $('#editVehicleName').val();
                const editVehiclePersons = $('#editVehiclePersons').val();
                const editVehicleId = $('#editVehicleId').val();
                const editOilChange = $('#editOilChange').val();
                const editLastOilChange = $('#editLastOilChange').val();
                const visible = document.getElementById('fasz').checked;
                const editId = $('#vehicleId').val();
                var lastOilChange=0;
                var oilChangeInterval=0;
                     
                 
                $.get('/vehicles/api/getVehicle/'+editId,function(data,status)
                  {
                    if (status=='success')
                     {
                    //$('#editVehicleName').val(data.name);
                    //$('#editVehiclePersons').val(data.persons);
                   // $('#editVehicleId').val(data.vehicle_id);
                    oilChangeInterval=data.oilChangeInterval
                    lastOilChange=data.oilChangeLast;
                    //$('#oilChangeLast').val(data.oilChangeLast);
                                
                      if (editOilChange.length < 4) {
                        return showErrorSuccess($('#editOilChange'), false, 'Legalláb 4 karakter!');
                      }
                      if (!isNumber(editOilChange)){
                        return showErrorSuccess($('#editOilChange'), false, 'Kérem számokat adjon meg!');
                      }     
                      if (!isNumber(editLastOilChange)){
                        return showErrorSuccess($('#editLastOilChange'), false, 'Kérem számokat adjon meg!');
                      }                            
                      if (editLastOilChange<=lastOilChange.kilometer) {
                        return showErrorSuccess($('#editLastOilChange'), false, 'Az olajcsere óra állása nem lehet kisebb, mint az előző!');
                      }
                     }
                          
                     showErrorSuccess($('#editOilChange'));    
                     showErrorSuccess($('#editLastOilChange'));  
                      // disable button
                      $(this).prop("disabled", true);
                      // add spinner to button
                      $(this).html('<i class="fa fa-circle-o-notch fa-spin"></i> Várjon!');  
                       var th=$(this); 
                    $.post( "/vehicles/api/updateVehicle/"+editId, { visible: visible,
                                                                      Name: editVehicleName, 
                                                                      persons: editVehiclePersons ,
                                                                      vehicleId:editVehicleId,
                                                                      oilChangeInterval:editOilChange,
                                                                      oilChangeLast:editLastOilChange})
                      .done(function( data ) {
                        // enable 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()
                        $('#vehicleEditModal').hide();
                      }).fail(function(xhr,status,error){
                        alert( "Data Loaded: " + xhr.responseText );
                      })
                  }) 
            });    
 
          // Pozíció Modal
        $('#vehicleModal').on('show.bs.modal', function () {
              var getIdFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-id')//$(event.target).closest('tr').data('id');
              var getVidFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-vid');//$(event.target).closest('tr').data('vid');
              var getVnameFromRow = $(event)[0].currentTarget.activeElement.getAttribute('data-name');//$(event.target).closest('tr').data('name');
              //
              //$('#vehicleModal').modal('hide');
            //make your ajax call populate items or what even you need
            var t=this;
            $(this).find('#vehicleId').html($('<b> Jármű pozíciói: '+ getVnameFromRow  + '</b> <b style="float:right">'+getVidFromRow+'</b>' ))
            //console.log(getIdFromRow);
            $.ajax({
              url: "/vehicles/getvehicle/"+getIdFromRow,
              type: 'GET',
              dataType: 'json', // added data type
              success: function(res) {
                  //console.log(res.at(-1).title);
                // alert(res.at(-1).title);
              
              var calendarEl = document.getElementById('calendar');
              var calendar = new FullCalendar.Calendar(calendarEl, {
              //themeSystem: 'bootstrap',
              initialView: 'dayGridMonth',
              locale: 'hu',
              firstDay: 1,
              //initialEvents: res,
              events:res,
              weekNumbers: true,
              themeSystem: 'default',
                eventClick: function(info) {
                //alert('Event: ' + info.event.title+info.event.id+' '+info.event.extendedProps.lat+' '+info.event.extendedProps.lon);
                window.open("https://www.google.com/maps/search/?api=1&query="+info.event.extendedProps.lat+","+info.event.extendedProps.lon);//+" target=\"_blank\" rel=\"noopener noreferrer\">"+loc.arriveLoc+"</a>"+" - ";')
                //$('#mapModal').modal('show'); 
                // change the border color just for fun
                info.el.style.borderColor = 'red';
              }
              });
              
               calendar.render();
               
              }
            });            
          });
      });