<!DOCTYPE html>
<html>
<%- include partial/head.ejs %>
  <body>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5fplFpd1KiS4bXqllt9v-KKp5bJH-oNE"></script>
    <div class="container-fluid" id="container">
      <div class="row row-offcanvas row-offcanvas-left">
<%- include partial/stranski-menu.ejs %>
        <div class="container-fluid main col-sm-12">
          <div class="page-header">
            <h1>Transakcije med subjektoma <%= subjekt[0].naziv %> in <%= subjektZS[0].popolnoime.replace('\&amp;','\&') %></h1>
          </div>
<%- include partial/iskalnik.ejs %>
          <div class="card-deck-wrapper">
            <div class="card-deck">
              <div class="card">
                <div class="card-img-top" id="basicMap2" style="height:400px;"></div>
                <div class="card-body">
                  <h5><%= subjekt[0].naziv %></h5>
                  <small>
                    <label>Naslov:</label> <%= subjekt[0].naslov %>, <%= subjekt[0].postna_stevilka %> <%= subjekt[0].posta %> |
                    <label>Matična številka:</label> <%= subjekt[0].maticna %> |
                    <label>Šifra proračunskega uporabnika:</label> <%= subjekt[0].sifra_pu %> |
                    <label>Davčna številka:</label> <%= subjekt[0].davcna %> |
                    <label>Občina:</label> <%= subjekt[0].obcina %>
                  </small>
                </div>
              </div>
              <div class="card">
                <div class="card-img-top" id="basicMap1" style="height:400px;"></div>
                <div class="card-body">
                  <h5><%= subjektZS[0].popolnoime.replace('\&amp;','\&') %></h5>
                  <small>
                    <label>Oblika:</label> <%= subjektZS[0].oblika %> |
                    <label>Naslov:</label> <%= subjektZS[0].ulica %> <%= subjektZS[0].hs %><%= subjektZS[0].dodatek %>, <%= subjektZS[0].po %> <%= subjektZS[0].posta %> |
                    <label>Občina:</label> <%= subjektZS[0].obcina %> |
                    <label>Upravna enota:</label> <%= subjektZS[0].upravnaenota %> |
                    <label>Regija:</label> <%= subjektZS[0].regija %> |
                    <label>Naselje:</label> <%= subjektZS[0].naselje %> |
                    <label>Matična številka:</label> <%= subjektZS[0].ma %> |
                    <label>Davčna številka:</label> <%= subjektZS[0].davcna %>
                  </small>
                </div>
              </div>
            </div>
          </div>
          <% if(lokacijaJS.length > 0) { %>
          <script>
            var iconFeatures=[];
            var iconFeature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.transform([
                <%= lokacijaJS[0].longitude %>,
                <%= lokacijaJS[0].latitude %>
              ],
              'EPSG:4326',     
              'EPSG:3857')),
              name: 'Null Island',
              population: 4000,
              rainfall: 500
            });
            iconFeatures.push(iconFeature);
            var vectorSource = new ol.source.Vector({
              features: iconFeatures //add an array of features
            });
            var iconStyle = new ol.style.Style({
              image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: '/images/icon.png'
              }))
            });
            var vectorLayer = new ol.layer.Vector({
              source: vectorSource,
              style: iconStyle
            });

            var map = new ol.Map({
              target: 'basicMap2',
              layers: [
                new ol.layer.Tile({
                  source: new ol.source.OSM()
                }),
              ],
              view: new ol.View({
                center: new ol.geom.Point([<%= lokacijaJS[0].longitude %>, <%= lokacijaJS[0].latitude %>])
                  .transform('EPSG:4326', 'EPSG:3857').getCoordinates(),
                zoom: 16
              })
            })
            map.addLayer(vectorLayer)
          </script>
          <% } else { %>
          <script type="text/javascript">
            var address2 = '<%= subjekt[0].naslov %>, <%= subjekt[0].postna_stevilka %> <%= subjekt[0].posta %>';
            var map2 = new google.maps.Map(document.getElementById('basicMap2'), { 
              mapTypeId: google.maps.MapTypeId.TERRAIN,
                zoom: 16
            });
            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({
              'address': address2
            }, 
            function(results, status) {
              if(status == google.maps.GeocoderStatus.OK) {
                new google.maps.Marker({
                  position: results[0].geometry.location,
                    map: map2
                });
                map2.setCenter(results[0].geometry.location);
                var xhttp = new XMLHttpRequest();
                xhttp.open("POST", "/ajax", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send("davcna="+<%= subjekt[0].davcna%>+"&location="+results[0].geometry.location);
              }
            });
          </script>
          <% } %>

          <% if(lokacijaZS.length > 0) { %>
          <script>
            var iconFeatures=[];
            var iconFeature = new ol.Feature({
              geometry: new ol.geom.Point(ol.proj.transform([<%= lokacijaZS[0].longitude %>, <%= lokacijaZS[0].latitude %>], 'EPSG:4326',     
                'EPSG:3857')),
              name: 'Null Island',
              population: 4000,
              rainfall: 500
            });
            iconFeatures.push(iconFeature);
            var vectorSource = new ol.source.Vector({
              features: iconFeatures //add an array of features
            });
            var iconStyle = new ol.style.Style({
              image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: '/images/icon.png'
              }))
            });
            var vectorLayer = new ol.layer.Vector({
              source: vectorSource,
              style: iconStyle
            });
            var map = new ol.Map({
              target: 'basicMap1',
              layers: [
                new ol.layer.Tile({
                  source: new ol.source.OSM()
                }),
              ],
              view: new ol.View({
                center: new ol.geom.Point([<%= lokacijaZS[0].longitude %>, <%= lokacijaZS[0].latitude %>])
                  .transform('EPSG:4326', 'EPSG:3857').getCoordinates(),
                zoom: 16
              })
            })
            map.addLayer(vectorLayer)
          </script>
                
          <% } else { %>
          <script type="text/javascript">
            var address1 = '<%= subjektZS[0].ulica %> <%= subjektZS[0].hs %><%= subjektZS[0].dodatek || '' %>, <%= subjektZS[0].po %>, <%= subjektZS[0].posta %>';
            var map1 = new google.maps.Map(document.getElementById('basicMap1'), { 
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              zoom: 16
            });
            var geocoder1 = new google.maps.Geocoder();
            geocoder1.geocode({
              'address': address1
            }, 
            function(results, status) {
              if(status == google.maps.GeocoderStatus.OK) {
                new google.maps.Marker({
                  position: results[0].geometry.location,
                  map: map1
                });
                map1.setCenter(results[0].geometry.location);
                var xhttp = new XMLHttpRequest();
                xhttp.open("POST", "/ajax", true);
                xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xhttp.send("davcna="+<%= subjektZS[0].davcna%>+"&location="+results[0].geometry.location);
              }
            });
          </script> 
          <% } %>
          <% if(transakcije.length > 31) { %>
          <h2>Transakcije</h2>
          <% } else { %>
          <h2>Mesečne transakcije <small><a href="/razmerje/<%= sifrapu+'/'+davcna %>">Nazaj na letni pregled</a></small></h2>
          <% } %>
          <div id="transakcije-graf"><canvas id="canvas" height="150" width="600"></canvas></div>
          <table class="table table-striped" id="transakcije">
            <thead class="thead-inverse">
              <tr>
                <th>Datum transakcije</th>
                <th>Naziv plačnika</th>
                <th>Naziv prejemnika</th>
                <th>Znesek transakcije</th>
                <th>Transakcijski račun</th>
                <th>Namen transakcije</th>
              </tr>
            </thead>
          </table>
          <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li class="nav-item"><a class="nav-link active" href="#dolzniki" aria-controls="dolzniki" role="tab" data-toggle="tab">Davčne obveznosti</a></li>
              <li class="nav-item"><a class="nav-link" href="#omejitve" aria-controls="omejitve" role="tab" data-toggle="tab">Omejitve poslovanja</a></li>
              <li class="nav-item"><a class="nav-link" href="#dutb" aria-controls="dutb" role="tab" data-toggle="tab">Slabi krediti</a></li>
              <li class="nav-item"><a class="nav-link" href="#krsitveomejitev" aria-controls="krsitveomejitev" role="tab" data-toggle="tab">Sumi kršitev omejitev poslovanja</a></li>
              <li class="nav-item"><a class="nav-link" href="#narocila" aria-controls="narocila" role="tab" data-toggle="tab">Naročila</a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
              <div role="tabpanel" class="tab-pane active" id="dolzniki">
                <div class="card">
                  <div class="card-body">
<%- include partial/dolzniki.ejs%>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="omejitve">
                <div class="card">
                  <div class="card-body">
<%- include partial/omejitve-razmerje.ejs %>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="dutb">
                <div class="card">
                  <div class="card-body">
<%- include partial/dutb.ejs %>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="krsitveomejitev">
                <div class="card">
                  <div class="card-body">
<%- include partial/krsitveomejitev.ejs %>
                  </div>
                </div>
              </div>
              <div role="tabpanel" class="tab-pane" id="narocila">
                <div class="card">
                  <div class="card-body">
<%- include partial/narocila-razmerje.ejs %>
                  </div>
                </div>
              </div>
            </div>
          </div>      
<%- include partial/barchart.ejs %>    
        </div>
      </div>
    </div> <!-- /container -->
    <script>
      $(document).ready(function() {
        $.ajaxSetup({ 
          cache: true 
        });
        $('#transakcije').DataTable({
          "ajax": {
            <% if(obdobje == "vse") { %>
            "url": "/api/getujp/organ/<%= sifrapu %>/podj/<%= davcna %>",
            <% } else { %>
            "url": "/api/getujp/organ/<%= sifrapu %>/podj/<%= davcna %>/mesec/<%= obdobje %>",
            <% } %>
            "cache": "true"
          },
          "columnDefs": [
            { className: "dt-right", "targets": [ 0, 3, 4 ] }
          ],
          "bSort": false,
          "columns": [
            {"data": "datum"},
            {"data": "naziv_js"},
            {"data": "naziv_zs"},
            {"data": "znesek_transakcije"},
            {"data": "racun_v_dobro"},
            {"data": "namen"},
          ],
          "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            $('td:eq(1)', nRow).html('<a href="/organ/' + aData.sifra_pu + '">' +
                aData.naziv_js + '</a>');
            $('td:eq(2)', nRow).html('<a href="/podj/' + aData.davcna_stevilka + '">' +
                aData.naziv_zs + '</a>');
            $('td:eq(3)', nRow).html(parseFloat(aData.znesek_transakcije).format(2, 3, '.', ',') + '&nbsp;€');
            return nRow;
          },
          language: {
            decimal:        ",",
            thousands:      ".",
            processing:     "Obdelava v teku...",
            search:         "Išči:",
            lengthMenu:     "Prikaži _MENU_ elementov",
            info:           "Elementi od _START_ do _END_ od skupaj _TOTAL_ elementov",
            infoEmpty:      "Ni elementov za prikaz",
            infoFiltered:   "(filtrirano od _MAX_ elementov)",
            infoPostFix:    "",
            loadingRecords: "Rezultati se nalagajo ...",
            zeroRecords:    "Noben element ne ustreza",
            emptyTable:     "Ni podatkov za prikaz",
            paginate: {
              first:      "Prva",
              previous:   "&lt;",
              next:       "&gt;",
              last:       "Zadnja"
            },
            aria: {
              sortAscending:  ": razvrsti naraščajoče",
              sortDescending: ": razvrsti padajoče"
            }
          }
        });
      });
          
    </script>
<%- include partial/eof.ejs %>
  </body>
</html>
