<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">  
  <link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css"/> 
  
  <script type="text/javascript" src="JS/jquery-3.3.1.min.js" charset="UTF-8"></script>
  <script src="JS/bootstrap.min.js"></script>
   <script type="text/javascript" src="JS/datatables.min.js"></script>
  <script type="text/javascript" src="JS/jquery-ui.min.js" charset="UTF-8"></script>
  <link rel="stylesheet" type="text/css" href="CSS/datatables.min.css"/>

 
  <link rel="stylesheet" type="text/css" href="CSS/jquery-ui.min.css">
  <script type="text/javascript" src="JS/moment-locale.min.js"></script>
  <script type="text/javascript" src="JS/datetime-moment.js"></script>
  <link rel="stylesheet" type="text/css" href="CSS/style.css">

<style>
  .fk, .funk {
    background-color: goldenrod;
    border-radius: 6px;
    padding: 1px 15px;
  }
  table td{
    padding: 4px !important;
    line-height:1;
    vertical-align: middle !important;
  }   
  table th {
    padding: 4px !important;
    vertical-align: middle !important;
  }
  
  div.dataTables_scrollBody > #sasa > #st {
    visibility: hidden;
  }   
  div.dataTables_scrollBody{
    margin-top: -12px;
  }
</style>
</head>
<body>
<div id="uc" style="width:100%; height:100%; left:0; top:0; position:fixed; background-color:#FFF;">
    <h1>Molim pričekajte</h1>
</div>

<div id="glavni" >
<h1>Plaćanje računa</h1> <br />
<div class='table-responsive nonprint' style="width:96%; margin:auto;min-height:400px;min-width: 900px;">
<table  id='sasa' class='table table-striped  table-hover dataTables_scrollBody' style='cellspacing: 0;padding:0px;width:100%;font-size:12px;'>
<thead id="st" style="display; none;">
<tr style="background: lightgreen;">
<th style="width:3em;">Br.</th>
<th>OIB</th>
<th>Naziv</th>
<th>Mjesto</th>
<th >PTT</th>
<th>Datum</th>                                             
<th>Iznos</th>
<th>Opis</th>
<th>Ekonomska klasifikacija</th>
<th>Funkcionalna klasifikacija</th>
</tr>
<tr style="display1: none;background: lightgreen;">
<th class="srch0"></th>
<th class="srch1"></th>
<th class="srch2"></th>
<th class="srch3"></th>
<th class="srch4"></th>
<th class="srch5"></th>
<th class="srch6"></th>
<th class="srch7"></th>
<th class="srch8"></th>
<th class="srch9"></th>
</tr>
</thead>
<tbody>
<?php
  // 26014726772 
  date_default_timezone_set ( 'Europe/Zagreb' ); 
  include 'ajax/ajax.php';
  //$dbh = new PDO('mysql:host=localhost;dbname=test', 'root', '', array( PDO::ATTR_PERSISTENT => false,PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
  $stmt = $dbh->prepare("SELECT * from proracun_data  where KLA >'' order by ispl desc");
  $stmt->execute(); 
  $no=1;
  while($row = $stmt->fetch(PDO::FETCH_ASSOC)){ 
    echo "<tr><td  style='text-align: right;'>$no</td>\n"; 
    echo "<td>$row[oib]</td>\n";
    $tmp = trim($row['naziv1']).trim($row['naziv2']);
    echo "<td>".$tmp."</td>\n";
    echo "<td>$row[mjesto]</td>\n";
    echo "<td>$row[ptt]</td>\n"; 
    $tmp = date('d.m.Y', strtotime($row['ispl'])); 
    echo "<td>$tmp</td>\n";
   
    echo "<td style='text-align: right;'>$row[iznos_d]</td>\n";                    
    $tmp =  $row['opis'];
    echo "<td>$tmp</td>\n";
    $tmp=  substr($row['AKON'],0,4);
    echo "<td style='text-align: center;'><span class='fk' konto='$tmp'>$tmp</span></td>\n";
    echo "<td style='text-align: center;'><span class='funk' konto='$row[KLA]'>$row[KLA]</span></td></tr>\n";   
    $no++;
  }
?>
</tbody>
</table>
</div>
<div id="uputa" style="background-color:#CCC;padding-left:6px;">
  Polje traži iznad tablice pretražuje sva polja u tablici od bilo kojeg mjesta.<br />
  Polja ispod naziva trže u pojedinom stupcu i to od početka, ali omogučuju zamjenske znakove i to '*' zamjenjuje bilo koji niz znakova (uključujući i prazan) dok '?' zamjenjuje bilo koji znak (jedan).
</div>
<div id="fk_dialog" style="display:none;">
  <table>
    <tr> 
      <tr>
      <td id="f_konto0" style="text-align:right;vertical-align: top;">4</td>
      <td style="vertical-align: top;"> - </td>
      <td id="f_opis0">op4</td>
    </tr>
      <td id="f_konto1" valign="top" style="text-align:right;vertical-align: top;">1</td>
      <td style="vertical-align: top;"> - </td>
      <td id="f_opis1">op1</td>
    </tr>
    <tr>
      <td id="f_konto2" style="text-align:right;vertical-align: top;">2</td>
      <td style="vertical-align: top;"> - </td>
      <td id="f_opis2">op2</td>
    </tr>             
    <tr>
      <td id="f_konto3" style="text-align:right;vertical-align: top;">3</td>
      <td style="vertical-align: top;"> - </td>
      <td id="f_opis3">op3</td>
    </tr>
  </table>
</div>

<div id="funk_dialog" style="display:none;">
  <table>
    <tr> 
      <tr>
      <td id="funk0" style="text-align:right;vertical-align: top;">0</td>
      <td style="vertical-align: top;"> - </td>
      <td id="funk_opis0">op0</td>
    </tr>
      <td id="funk1" valign="top" style="text-align:right;vertical-align: top;">1</td>
      <td style="vertical-align: top;"> - </td>
      <td id="funk_opis1">op1</td>
    </tr>
    <tr>
      <td id="funk2" style="text-align:right;vertical-align: top;">2</td>
      <td style="vertical-align: top;"> - </td>
      <td id="funk_opis2">op2</td>
    </tr>             
  </table>
</div>

<script>
 $('.fk').click(function(){  //var i = 0;$('#f_konto'+i).html('sasa');
  $.ajax({   
    method: 'POST',             // metoda kojom se šalju podaci
    url:		'ajax/ajax.php',   // primatelj podataka   
    dataType: "json",
    data:		{"typ" : "eko_kl", 'konto': $(this).attr('konto') },     // U phpu se u varijabli $_POST['sql'] nalazi sadržaj varijable sql
		success:	function(r){ //alert(r);               
      for(var i = 0; i < 4; i++){   //alert($('td#f_konto'.i));
        $('#f_konto'+i).html(r[i]['konto']);
        $('td#f_opis'+i).text(r[i]['opis']); 
      }     
      $('#fk_dialog').dialog({
      title: "Ekonomska klasifikacija",
      width: 400,
      height: 400,
      show: true,
      modal: true,
      closeOnMaskClick: false ,
      buttons:
        [
            
            {             //drugi
                text: "OK",
                click: function () {  
                    $(this).dialog("close");
                    
                }
            },
          
        ]
    }); 
    },
    error: function (jqXHR, exception) {
      var msg = '';
      if (jqXHR.status === 0) {
      msg = 'Not connect.\n Verify Network.';
      } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
      } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
      } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
      } else if (exception === 'timeout') {
        msg = 'Time out error.';
      } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
      } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
      }    
      alert(msg);
    }
  });
    
  });       
        
 $('.funk').click(function(){  //var i = 0;$('#f_konto'+i).html('sasa');
  $.ajax({   
    method: 'POST',             // metoda kojom se šalju podaci
    url:		'ajax/ajax.php',   // primatelj podataka   
    dataType: "json",
    data:		{"typ" : "fun_kl", 'konto': $(this).attr('konto') },     // U phpu se u varijabli $_POST['sql'] nalazi sadržaj varijable sql
		success:	function(r){ //alert(r);               
      for(var i = 0; i < 3; i++){   //alert($('td#f_konto'.i));
        $('#funk'+i).html(r[i]['konto']);
        $('#funk_opis'+i).text(r[i]['opis']); 
      }     
      $('#funk_dialog').dialog({
      title: "Funkcijska klasifikacija",
      width: 400,
      height: 400,
      show: true,
      modal: true,
      closeOnMaskClick: false ,
      buttons:
        [
            
            {             //drugi
                text: "OK",
                click: function () {  
                    $(this).dialog("close");
                    
                }
            },
          
        ]
    }); 
    },
    error: function (jqXHR, exception) {
      var msg = '';
      if (jqXHR.status === 0) {
      msg = 'Not connect.\n Verify Network.';
      } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
      } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
      } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
      } else if (exception === 'timeout') {
        msg = 'Time out error.';
      } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
      } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
      }    
      alert(msg);
    }
  });
    
  });
$(document).ready(function(){
//oradate('DD.MM,YYYY HH:mm');
    
    $.fn.dataTable.moment('DD.MM.YYYY');
 /*   $('#sasa thead tr').clone(true).appendTo( '#sasa thead' );
    $('#sasa thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Pretraži '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );        */
    var table = $('#sasa').DataTable({
      dom: "lftip",
      pageLength: 25,
      orderCellsTop: true, 
      fixedHeader: true, 
      lengthMenu: [ 13, 25, 50, 200, 500,1000 ],
      scrollY: '70%',
      scrollx: false, 
      //"orderCellsTop": true,
  
      "order": [],
      columnDefs: [
            {
                "targets": [ 0 ],
                "ordering": false,
                "visible": true, 
                "searchable": true
            },
      ],

      language: {
        emptyTable:   	'Nema podataka',
				info:         	'Od _START_. do _END_. od _TOTAL_ podataka.',
				infoEmpty:    	'Ništa nije nađeno.',
				infoFiltered: 	'(od ukupno _MAX_ podataka.)',
				infoPostFix:  	'',
				thousands:  	'.',
				lengthMenu:   	'_MENU_ Podataka  postranici',
				loadingRecords:	'Učitavam...',
				processing:   	'Obrađujem...',
				search:       	'Traži',
				zeroRecords:  	'Keine Einträge vorhanden.',
				paginate: {
					first:    	'Prva',
					previous: 	'Nazad',
					next:     	'Naprijed',
					last:     	'Zadnja'
				},
      },
      initComplete: function () {  
        var co = 0; 
          this.api().columns().every( function () {
            var column = this; 
            var colind = this.index();   
            var vid='100%'; 
            var select = $('<input type="text" style="color:#000;width:'+vid+';"></input>')
              .appendTo( $('.srch'+colind).empty() )
                .on( 'keyup', function () {
                  var val = $.fn.dataTable.util.escapeRegex($(this).val());    
                  val = val.replace(/\\\*/g, '.*'); 
                  val = val.replace(/\\\?/g, '.');
                  column.search( val ? '^'+val : '', true, false ).draw();
              });         
          });
       // $('.dataTables_scrollBody thead tr').css({visibility:'collapse'});

      },
    });  
    table.draw(); 
    $('#uc').css('display', 'none');
    //$('#glavni').css('display', 'block');
});
</script>
</body>
</html>