<?php 
error_reporting(error_reporting() & ~E_DEPRECATED);
include 'db-conn.php'; 

$stmt = $pdo->query("SELECT * FROM ukupno_istarska ORDER BY postotak DESC");
$ukupni_rezultati = $stmt->fetchAll();


$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">
   <style>
    body {
      margin: 0;
      font-family: 'Open Sans', sans-serif;
        max-width: 100%;
  overflow-x: hidden;

    }

    .mainWrapper {
       width: 100%;
  max-width: 1320px;
      height: 295px;
      display: flex;
      flex-direction: row;
      background-color: #fff;
      box-shadow: 0 1px 5px rgba(0,0,0,0.2);
      overflow: hidden;
      box-sizing: border-box;
      padding: 20px;
    }

    .leftPane {
      flex: 1 1 25%;
      padding-right: 20px;
      font-size: 16px;
      color: #222;
      display: flex;
      align-items: center;
       overflow:hidden;
    }

    .rightPane {
      flex: 3 1 75%;
      overflow:hidden;
    }

    .party-summary ul {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 16px;
      color: #333;
    }

    .party-summary li {
      margin-bottom: 14px;
    }

    .chart-bar-container {
      width: 100%;
      background-color: #ddd;
      border-radius: 2px;
      position: relative;
      height: 38px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      box-sizing: border-box;
    }

    .chart-label {
  position: absolute;
  z-index: 2;
  font-weight: bold;
  font-size: 13px;
  color: #FFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 0px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

    .chart-bar-fill {
      height: 100%;
      border-radius: 2px 0 0 2px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
    }

    .chart-bar-red { background-color: #e03131; }
    .chart-bar-blue { background-color: #2b50a1; }
    .chart-bar-green { background-color: #9dd292; }
    .chart-bar-purple { background-color: #6b4fa1; }
    .chart-bar-grey { background-color: #999; }
    .chart-bar-akcijamladih { background-color: #ff9800; }
    .chart-bar-nlborisamiletića { background-color: #607d8b; }



    .left-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.election-year {
  font-size: 65px;
  font-weight: 800;
  line-height: 1;
  color: #000;
}

.election-title {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: 0.5px;
  color: #000;
}

.election-type {
  font-size: 19px;
  font-weight: 400;
  color: #222;
}

.election-main {
  font-size: 20px;
  font-weight: 800;
  color: #111;
}

.election-status .processed {
  margin-top: 10px;
  font-size: 13px;
  font-weight: bold;
  color: #000;
}

.election-status .updated {
  font-size: 12px;
  color: #333;
}

.live-wrapper {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
      margin-left: 5px;
}

.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e03131;
  animation: pulse 1.2s infinite;
  box-shadow: 0 0 6px rgba(224, 49, 49, 0.6);
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

.live-text .live {
  font-size: 13px;
  font-weight: bold;
  color: #000;
  line-height: 1.1;
}

.live-text .source {
  font-size: 11px;
  color: #555;
  line-height: 1.1;
}

.live-text-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.live-text-link:hover .live {
  text-decoration: none;
}


 @media (max-width: 768px) {
  .mainWrapper {
    flex-direction: column;
    height: auto;
    padding: 15px;
  }

  .leftPane, .rightPane {
    flex: 1 1 100%;
    padding: 0;
    margin-bottom: 20px;
  }

  .leftPane {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .election-year {
    font-size: 42px;
    text-align: center;
  }

  .election-title {
    text-align: center;
  }

  .election-type {
    font-size: 16px;
  }

  .election-main {
    font-size: 18px;
  }

  .election-status {
    text-align: center;
  }

  .election-status .processed,
  .election-status .updated {
    font-size: 12px;
  }

  .live-wrapper {
    justify-content: center;
    margin-top: 12px;
  }

 .chart-bar-container {
  height: auto;
  min-height: 28px;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 6px;
}

.chart-label {
  position: relative;
  font-size: 12px;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  padding-left: 0;
  margin-bottom: 4px;
  color: #111;
  text-shadow: none;
  z-index: auto;
}

.chart-bar-fill {
  position: relative;
  height: 8px;
  border-radius: 4px;
  width: 100%;
}

  .party-summary ul {
    padding: 0 5px;
  }

  .party-summary li {
    margin-bottom: 12px;
  }

}

.chart-percentage {
  font-size: 13px;
  font-weight: bold;
  margin-top: 4px;
  color: #333;
}
  </style>
</head>
<body>

<div class="mainWrapper">



<div class="leftPane">
  <div class="left-content">
    <div class="election-year">2025.</div>
    <div class="election-title">
      <span class="election-type">ISTARSKA ŽUPANIJA</span><br>
      <span class="election-main">REZULTATI LOKALNIH IZBORA</span>
    </div>
    <div class="election-status">
      <div class="processed">Obrađeno <?= number_format($info['obradeno'], 2, ',', '') ?>% glasačkih listića.</div>
      <div class="updated">POSLJEDNJA IZMJENA: <?= date('H:i', strtotime($info['vrijeme'])) ?> sati, 
    dana <?= date('d.m.Y.', strtotime($info['datum'])) ?></div>
    </div>

 <div class="live-wrapper">
      <div class="live-dot"></div>
     <a href="https://istrain.hr/lokalni-izbori/vijesti/682a2c1cbea0f/istrain-uzivo-donosi-rezultate-izbora/vijest" target="_blank" class="live-text-link">
  <div class="live-text">
    <div class="live">REZULTATI UŽIVO</div>
    <div class="source">PODATKE OSIGURAVA: APIS IT D.O.O.</div>
  </div>
</a>
    </div>


  </div>
</div>











  <div class="rightPane">
    <div class="party-summary">
      <ul>
        <?php foreach ($ukupni_rezultati as $red): ?>
          <?php
            $stranka = $red['stranka'];
            $postotak = number_format($red['postotak'], 1, ',', '');
            $postotakRaw = str_replace(',', '.', $postotak);
            $glasovi = number_format($red['broj_glasova'], 0, ',', '.');

            $klasa = 'grey';
            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';
            } elseif (str_contains($stranka, 'Akcija mladih')) {
                $klasa = 'akcijamladih';
            } elseif (str_contains($stranka, 'NL Borisa')) {
                $klasa = 'nlborisamiletića';
            }

            $labelText = htmlspecialchars($stranka) . ' – ' . $postotak . '%';
          ?>
          <li>
            <div class="chart-bar-container">
              <div class="chart-label"><?= $labelText ?></div>
              <div class="chart-bar-fill chart-bar-<?= $klasa ?>" style="width: <?= $postotakRaw ?>%"></div>
            </div>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>
  </div>
</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}%`);
      }
    });
  });



});



</script>