
<?php 
error_reporting(error_reporting() & ~E_DEPRECATED);


include 'db-conn.php'; 

$grad = $_GET['grad'];

// Dohvati kandidate po gradovima
$stmt3 = $pdo->prepare("SELECT * FROM gradovi where grad = '$grad'");
$stmt3->execute();
$gradovi_svi = $stmt3->fetchAll();

// Grupiraj po gradovima
$gradovi_grupirani = [];
foreach ($gradovi_svi as $red) {
    $grad = $red['grad'];
    if (!isset($gradovi_grupirani[$grad])) {
        $gradovi_grupirani[$grad] = [];
    }
    $gradovi_grupirani[$grad][] = $red;
}




$stmt5 = $pdo->query("SELECT * FROM info_podaci ORDER BY azurirano_at DESC LIMIT 1");
$info = $stmt5->fetch();

$mjeseci = [
  1 => 'siječnja', 2 => 'veljače', 3 => 'ožujka', 4 => 'travnja',
  5 => 'svibnja', 6 => 'lipnja', 7 => 'srpnja', 8 => 'kolovoza',
  9 => 'rujna', 10 => 'listopada', 11 => 'studenoga', 12 => 'prosinca'
];
$datum = strtotime($info['datum']);
$dan = date('j', $datum);
$mjesec = $mjeseci[(int)date('n', $datum)];
$godina = date('Y', $datum);


?>



<!DOCTYPE html>
<html lang="hr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($info['naslov'] ?? 'Rezultati lokalnih izbora - Istarska županija 2025.') ?></title>
  <link rel="stylesheet" href="styles.css?v=3">
  <link rel="stylesheet" href="responsive.css?v=3" media="screen and (max-width: 991px)">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
  <div class="main-wrapper" style='padding:10px!important;'>

    <div class="content">
   



   


      <div class="right-panel">


         
 <div class="city-group">
            



<?php foreach ($gradovi_grupirani as $grad => $kandidati): ?>
  <?php $special_class = (count($kandidati) === 1) ? ' special-one' : ''; ?>
  <div class="city<?= $special_class ?>">
    <p class="city-name<?= $special_class ? ' special-one' : '' ?>"><?= htmlspecialchars($grad) ?></p>
    <?php foreach ($kandidati as $kandidat): ?>
      <?php
        $ime = htmlspecialchars($kandidat['kandidat']);
        $stranka = htmlspecialchars($kandidat['stranka']);
      
$glasova = intval($kandidat['broj_glasova'] ?? 0);
$postotak = floatval($kandidat['postotak'] ?? 0);

// Ako postotak nije postavljen ili je 0.00, pokušaj izračun
if (empty($postotak) && $glasova > 0) {
  $total_glasova = array_sum(array_map(fn($k) => intval($k['broj_glasova'] ?? 0), $kandidati));
  $postotak = $total_glasova > 0 ? ($glasova / $total_glasova * 100) : 0;
}

$prikazani_postotak = number_format($postotak, 1, ',', '');
$width = str_replace(',', '.', $prikazani_postotak);







        // automatski odabir boje po ključnim riječima u stranci
        $klasa = 'grey'; // default
        if (str_contains($stranka, 'SDP')) {
          $klasa = 'red';
        } elseif (str_contains($stranka, 'HDZ')) {
          $klasa = 'blue';
        } elseif (str_contains($stranka, 'IDS')) {
          $klasa = 'green';
        } elseif (str_contains($stranka, 'Možemo')) {
          $klasa = 'purple';
        } elseif (str_contains($stranka, 'Nezavisn')) {
          $klasa = 'grey';
        }
      ?>
      <div class="candidate<?= $special_class ?>">
        <span class="name"><?= $ime ?></span>
        <span class="affiliation"> (<?= $stranka ?>)</span>
        <div class="chart-bar-container">
      <div class="chart-bar-fill chart-bar-<?= $klasa ?>" style="width: <?= $width ?>%"></div>

        </div>
    <div class="chart-result-line">
  <span class="chart-percentage"><?= $prikazani_postotak ?>%</span>
  <span class="chart-votes">– <?= number_format($glasova, 0, ',', '.') ?> glasova</span>
</div>

      </div>
    <?php endforeach; ?>
  </div>
<?php endforeach; ?>
  </div>
</div>
</div>

        


  <footer class="footer">
  <p>
    Zadnji podaci ažurirani u <?= date('H:i', strtotime($info['vrijeme'])) ?> sati, 
    dana <?= date('d.m.Y.', strtotime($info['datum'])) ?>, obrađeno 
    <?= number_format($info['obradeno'], 2, ',', '') ?>% glasačkih listića.
  </p>
<p class="watermark">
  Infografika by 
  <a href="https://ionix.hr" target="_blank" class="ionix-link">IONIX ENGINEERING LTD</a>
</p>

</footer>

  </div>
</body>
</html>




<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  $('.chart-bar-fill').each(function () {
    const $bar = $(this);
    const $percentageLabel = $bar.closest('.candidate').find('.chart-percentage');

    // Dohvati izvorni % iz style atributa
    const style = $bar.attr('style');
    const match = style.match(/width:\s*([\d.]+)%/);
    if (!match) return;

    const targetPercent = parseFloat(match[1]);

    // Resetiraj početno stanje
    $bar.css('width', '0%');
    $percentageLabel.text('0%');

    // Pokreni animaciju
    $({ percent: 0 }).animate({ percent: targetPercent }, {
      duration: 1500,
      step: function (now) {
        const rounded = now.toFixed(1);
        $bar.css('width', `${rounded}%`);
        $percentageLabel.text(`${rounded}%`);
      },
      complete: function () {
        $bar.css('width', `${targetPercent}%`);
        $percentageLabel.text(`${targetPercent}%`);
      }
    });
  });



});


function toggleExpand(button) {
  const container = button.closest('.expand-btn-wrapper').previousElementSibling;
  container.classList.toggle('expanded');
  button.textContent = container.classList.contains('expanded') ? 'Sakrij sve kandidate Pule' : 'Prikaži sve kandidate Pule';
}

</script>

