<?php
include_once 'db.php';

// Estatísticas
$sql = "SELECT
    (SELECT COUNT(DISTINCT id_entrada) FROM entrada) AS total_clientes,
    (SELECT COUNT(*) FROM entrada A LEFT JOIN licenca B ON B.id_entrada=A.id_entrada WHERE A.status IN(4,5)) AS total_licencas,
    (SELECT COUNT(*) FROM entrada A LEFT JOIN auditoria B ON B.id_entrada=A.id_entrada WHERE B.status=1) AS total_auditados,
    (SELECT COUNT(*) FROM entrada A INNER JOIN ponto_situacao B ON A.id_entrada=B.id_entrada WHERE B.estado='Aprovado') AS total_aprovados,
    (SELECT COUNT(*) FROM fiscalizacao WHERE valor_multa IS NOT NULL AND valor_multa!='') AS total_multas,
    (SELECT COUNT(*) FROM fiscalizacao) AS total_fiscalizados,
    (SELECT COUNT(*) FROM contrabalancos WHERE
        ((status1='actualizar' AND status2='actualizar') OR (status1='aprovado' OR status2='aprovado') OR
        (status1='actualizar' AND status2!=0) OR (status2='actualizar' AND status1!=0))) AS total_contrabalancos,
    (SELECT COUNT(*) FROM contrabalancos WHERE tipo_biodiversidade='Ecossistema') AS total_ecossistemas,
    (SELECT COUNT(*) FROM contrabalancos WHERE tipo_biodiversidade LIKE '%Espécie%') AS total_especies
FROM dual";

$result = $conn->query($sql);
$stats  = $result ? $result->fetch_assoc() : [];
$s = array_merge([
    'total_clientes'=>0,'total_licencas'=>0,'total_auditados'=>0,'total_aprovados'=>0,
    'total_multas'=>0,'total_fiscalizados'=>0,'total_contrabalancos'=>0,
    'total_ecossistemas'=>0,'total_especies'=>0
], $stats ?: []);

$anos = $conn->query("SELECT DISTINCT ano FROM entrada ORDER BY ano DESC");
?>
<?php include 'header1.php'; ?>
<body>

<?php
// Modais de Estatísticas — array simplificado
$modais = [
    ['id'=>'estatisticasModal',          'titulo'=>'Estatísticas de Projectos Recebidos',                          'filtro'=>'anoFiltroRecebidos',    'charts'=>['piechart','piechart1']],
    ['id'=>'estatisticasAprovadosModal', 'titulo'=>'Estatísticas de Projectos Aprovados',                         'filtro'=>'anoFiltroAprovados',    'charts'=>['aprovado','aprovado1']],
    ['id'=>'estatisticasLicencasModal',  'titulo'=>'Estatísticas de Licenças Emitidas',                           'filtro'=>'anoFiltroLicencas',     'charts'=>['licenca','licenca1']],
    ['id'=>'estatisticasAuditadasModal', 'titulo'=>'Estatísticas de Projectos Auditados',                         'filtro'=>'anoFiltroAuditadas',    'charts'=>['auditadas','auditadas1']],
    ['id'=>'estatisticasMultasModal',    'titulo'=>'Estatísticas de Multas Emitidas',                              'filtro'=>'anoFiltroMultas',       'charts'=>['multas','multas1']],
    ['id'=>'estatisticasFiscalizadosModal','titulo'=>'Estatísticas de Projectos Fiscalizados',                     'filtro'=>'anoFiltroFiscalizados', 'charts'=>['fiscalizados','fiscalizados1']],
    ['id'=>'estatisticasContrabalancosModal','titulo'=>'Estatísticas de Projectos com Contrabalanços',             'filtro'=>'anoFiltroContrabalancos','charts'=>['contrabalancos','contrabalancos1']],
    ['id'=>'estatisticasEcossistemaModal','titulo'=>'Biodiversidade — Ecossistemas',                               'filtro'=>'anoFiltroEcossistema',  'charts'=>['ecossistema','ecossistema1']],
    ['id'=>'estatisticasEspecieModal',   'titulo'=>'Biodiversidade — Espécies',                                    'filtro'=>'anoFiltroEspecie',      'charts'=>['especie','especie1']],
];
foreach ($modais as $m): ?>
<div class="modal fade" id="<?= $m['id'] ?>" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content border-0 rounded-xl overflow-hidden">
      <div class="modal-header sgla-modal-header">
        <h5 class="modal-title"><i class="bi bi-bar-chart-fill me-2"></i><?= $m['titulo'] ?></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body p-4">
        <div class="row mb-4">
          <div class="col-md-4">
            <label class="form-label fw-600 small text-muted text-uppercase">Filtrar por Ano</label>
            <select id="<?= $m['filtro'] ?>" class="form-select">
              <option value="">Todos os Anos</option>
              <?php $anos->data_seek(0); while($r=$anos->fetch_assoc()): ?>
              <option value="<?= $r['ano'] ?>"><?= $r['ano'] ?></option>
              <?php endwhile; ?>
            </select>
          </div>
        </div>
        <div class="row g-3">
          <?php foreach ($m['charts'] as $c): ?>
          <div class="col-lg-6 col-md-12">
            <div class="border rounded-xl p-2 bg-light">
              <div id="<?= $c ?>" style="height:380px;"></div>
            </div>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endforeach; ?>

<!-- Spinner & Topbar -->
<?php include 'header2.php'; ?>

<!-- Navbar & Carousel -->
<div class="container-fluid position-relative p-0">
  <?php include 'header.php'; ?>

  <div id="header-carousel" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <div class="carousel-inner">
      <?php
      $slides = [
        ['img'=>'https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=85','sub'=>'Seja Bem-Vindo ao','title'=>'Sistema de Gestão de Licenciamento Ambiental','btn'=>'Conecte-se ao SGLA','href'=>'#'],
        ['img'=>'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?w=1920&q=85','sub'=>'Transparência Pública','title'=>'Consultas Públicas Ambientais','btn'=>'Ver Consultas','href'=>'consulta_publica.php'],
        ['img'=>'https://images.unsplash.com/photo-1504701954957-2010ec3bcec1?w=1920&q=85','sub'=>'Serviços Online','title'=>'Licenciamento Ambiental Digital','btn'=>'Saiba Mais','href'=>'documento_aia.php'],
        ['img'=>'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=1920&q=85','sub'=>'Dados e Relatórios','title'=>'Estatísticas e Transparência','btn'=>'Ver Estatísticas','href'=>'#stats'],
      ];
      foreach ($slides as $i => $sl):
      ?>
      <div class="carousel-item <?= $i===0?'active':'' ?>">
        <img class="w-100" src="<?= $sl['img'] ?>" alt="<?= $sl['title'] ?>">
        <div class="carousel-caption">
          <div class="p-3" style="max-width:800px;">
            <h5 class="animated slideInDown mb-2"><?= $sl['sub'] ?></h5>
            <h3 class="animated zoomIn mb-4"><?= $sl['title'] ?></h3>
            <a href="<?= $sl['href'] ?>" class="btn btn-sgla px-4 py-2 animated slideInLeft">
              <?= $sl['btn'] ?> <i class="bi bi-arrow-right ms-1"></i>
            </a>
            <?php if($i === 0): ?>
            <a href="<?= site_url('auth/registo'); ?>"
               class="btn px-4 py-2 animated slideInLeft ms-2"
               style="background:rgba(255,255,255,.15);
                      border:2px solid rgba(255,255,255,.70);
                      color:#fff;font-weight:700;
                      border-radius:10px;backdrop-filter:blur(8px);
                      transition:all .25s ease;"
               onmouseover="this.style.background='rgba(255,255,255,.28)'"
               onmouseout="this.style.background='rgba(255,255,255,.15)'">
              <i class="fas fa-user-plus me-1"></i> Registar Empresa
            </a>
            <?php endif; ?>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#header-carousel" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
    </button>
  </div>
</div>

<!-- Faixa tricolor MAAP -->
<div class="maap-tricolor-bar"></div>

<!-- Facts Bar -->
<div class="container-fluid px-4 px-lg-5 mb-5">
  <div class="container">
    <div class="facts-bar">
      <div class="row g-4">
        <?php
        $facts = [
          ['icon'=>'bi-folder2-open','label'=>'Projectos','value'=>$s['total_clientes'],'cls'=>'fc-verde'],
          ['icon'=>'bi-award','label'=>'Licenças Emitidas','value'=>$s['total_licencas'],'cls'=>'fc-terra'],
          ['icon'=>'bi-search','label'=>'Fiscalizados','value'=>$s['total_fiscalizados'],'cls'=>'fc-azul'],
        ];
        foreach ($facts as $f): ?>
        <div class="col-lg-4 col-md-6">
          <div class="fact-card <?= $f['cls'] ?> wow zoomIn">
            <div class="fact-icon"><i class="bi <?= $f['icon'] ?>"></i></div>
            <div class="fact-info">
              <h5><?= $f['label'] ?></h5>
              <h2 data-toggle="counter-up"><?= $f['value'] ?></h2>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>
</div>

<!-- About -->
<div class="container-fluid py-5 wow fadeInUp">
  <div class="container">
    <div class="row g-5 align-items-center">
      <div class="col-lg-7">
        <span class="section-label">Sobre Nós</span>
        <h2 class="section-heading">Licenciamento Ambiental</h2>
        <div class="section-divider left"></div>

        <div class="accordion" id="aboutAccordion">
          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGeral" aria-expanded="true">
                <i class="bi bi-info-circle me-2"></i> Geral
              </button>
            </h2>
            <div id="collapseGeral" class="accordion-collapse collapse show" data-bs-parent="#aboutAccordion">
              <div class="accordion-body">
                <p>O Processo de Licenciamento Ambiental inicia no Serviço Provincial do Ambiente, onde será implantado o projecto ou na Direcção Nacional do Ambiente, quando o projecto abrange mais de uma província, com a submissão pelo proponente da actividade, da Instrução de Processo de acordo com o Artigo 7 do Regulamento sobre o Processo de Avaliação do Impacto Ambiental, aprovado pelo Decreto 54/2015, de 31 de Dezembro.</p>
                <h6 class="fw-bold mt-3 text-green">Categorias</h6>
                <ul>
                  <li><strong>Categoria A+</strong> — EIA com supervisão por revisores independentes.</li>
                  <li><strong>Categoria A</strong> — Estudo de Impacto Ambiental (EIA).</li>
                  <li><strong>Categoria B</strong> — Estudo Ambiental Simplificado (EAS).</li>
                  <li><strong>Categoria C</strong> — Boas Práticas de Gestão Ambiental.</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTipos">
                <i class="bi bi-card-list me-2"></i> Tipos de Licença
              </button>
            </h2>
            <div id="collapseTipos" class="accordion-collapse collapse" data-bs-parent="#aboutAccordion">
              <div class="accordion-body">
                <h6 class="fw-bold text-green">Licença Provisória</h6>
                <ul><li>Emitida após aprovação do EPDA e TdR para AIA.</li><li>Válida por 2 anos (não renovável).</li><li>Serve para mobilização de investimento.</li></ul>
                <h6 class="fw-bold text-green mt-3">Licença de Instalação</h6>
                <ul><li>Inclui Plano de Reassentamento (PR), se necessário.</li><li>Válida por 2 anos, renovável.</li></ul>
                <h6 class="fw-bold text-green mt-3">Licença de Operação</h6>
                <ul><li>Emitida após verificação do cumprimento do REIA.</li><li>Válida por 5 anos, renovável.</li></ul>
              </div>
            </div>
          </div>

          <div class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTaxas">
                <i class="bi bi-cash-coin me-2"></i> Taxas Aplicáveis
              </button>
            </h2>
            <div id="collapseTaxas" class="accordion-collapse collapse" data-bs-parent="#aboutAccordion">
              <div class="accordion-body">
                <p>A submissão da instrução de processo carece de pagamento de:</p>
                <ul>
                  <li><strong>1.000,00 MT</strong> — processos gerais.</li>
                  <li><strong>10.000,00 MT</strong> — projectos de Hidrocarbonetos.</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-5">
        <div class="about-img wow zoomIn" data-wow-delay="0.3s">
          <img src="img/Legal-framework-1.jpeg" alt="Licenciamento Ambiental">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Estatísticas Básicas -->
<div id="stats" class="container-fluid py-5 wow fadeInUp" style="background:linear-gradient(rgba(36,87,26,.72),rgba(0,0,0,.65)),url('https://images.unsplash.com/photo-1501854140801-50d01698950b?w=1920&q=85') center/cover no-repeat;">
  <div class="container py-4">
    <div class="text-center mb-5">
      <span class="section-label" style="color:var(--maap-green-50);">Estatísticas Básicas</span>
      <h2 class="section-heading text-white">Número de Projectos em Todo o País</h2>
      <div class="section-divider"></div>
    </div>

    <?php
    $stat_cards = [
      ['icon'=>'fa-folder-open',    'label'=>'Projectos Recebidos',         'key'=>'total_clientes',       'modal'=>'estatisticasModal',              'cor'=>'verde'],
      ['icon'=>'fa-thumbs-up',      'label'=>'Projectos Aprovados',         'key'=>'total_aprovados',      'modal'=>'estatisticasAprovadosModal',     'cor'=>'azul'],
      ['icon'=>'fa-certificate',    'label'=>'Licenças Emitidas',           'key'=>'total_licencas',       'modal'=>'estatisticasLicencasModal',      'cor'=>'terra'],
      ['icon'=>'fa-check-circle',   'label'=>'Projectos Auditados',         'key'=>'total_auditados',      'modal'=>'estatisticasAuditadasModal',     'cor'=>'verde'],
      ['icon'=>'fa-search',         'label'=>'Projectos Fiscalizados',      'key'=>'total_fiscalizados',   'modal'=>'estatisticasFiscalizadosModal',  'cor'=>'azul'],
      ['icon'=>'fa-gavel',          'label'=>'Multas Emitidas',             'key'=>'total_multas',         'modal'=>'estatisticasMultasModal',        'cor'=>'terra'],
      ['icon'=>'fa-exchange-alt',   'label'=>'Projectos com Contrabalanços','key'=>'total_contrabalancos', 'modal'=>'estatisticasContrabalancosModal','cor'=>'verde'],
      ['icon'=>'fa-leaf',           'label'=>'Biodiversidade — Ecossistemas','key'=>'total_ecossistemas',  'modal'=>'estatisticasEcossistemaModal',   'cor'=>'terra'],
      ['icon'=>'fa-paw',            'label'=>'Biodiversidade — Espécies',   'key'=>'total_especies',       'modal'=>'estatisticasEspecieModal',       'cor'=>'azul'],
    ];
    ?>
    <div class="row g-4">
      <?php foreach ($stat_cards as $sc): ?>
      <div class="col-lg-4 col-md-6 wow zoomIn">
        <div class="stat-card sc-<?= $sc['cor'] ?>">
          <div class="stat-icon si-<?= $sc['cor'] ?>"><i class="fa <?= $sc['icon'] ?>"></i></div>
          <h4><?= $sc['label'] ?></h4>
          <h2 data-toggle="counter-up"><?= $s[$sc['key']] ?></h2>
          <button class="btn-stat" data-bs-toggle="modal" data-bs-target="#<?= $sc['modal'] ?>">
            <i class="bi bi-bar-chart me-1"></i> Ver Estatísticas
          </button>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>

<!-- ── Registo de Proponente CTA ── -->
<div class="container-fluid py-5 wow fadeInUp">
  <div class="container">
    <div class="row align-items-center g-4 p-4"
         style="background:linear-gradient(135deg,var(--v800,#24571A) 0%,var(--v500,#45752E) 50%,var(--a500,#085090) 100%);
                border-radius:20px;
                box-shadow:0 8px 40px rgba(36,87,26,.25);">
      <div class="col-lg-7">
        <div style="color:rgba(255,255,255,.70);font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.5rem;">
          <i class="fas fa-leaf me-1" style="color:#B8D99A;"></i> Novo no SGLA?
        </div>
        <h3 style="color:#fff;font-weight:800;font-size:1.5rem;margin-bottom:.6rem;line-height:1.25;">
          Registe a sua Empresa como Proponente
        </h3>
        <p style="color:rgba(255,255,255,.70);font-size:.82rem;line-height:1.7;margin:0;max-width:480px;">
          Empresas e entidades que pretendam submeter projectos de Avaliação de Impacto Ambiental
          devem criar uma conta de proponente. O registo é gratuito e leva menos de 5 minutos.
        </p>
      </div>
      <div class="col-lg-5 text-lg-end">
        <a href="#" data-bs-toggle="modal" data-bs-target="#modalRegisto"
           class="btn px-5 py-3 me-2 mb-2"
           style="background:#fff;color:var(--v800,#24571A);font-weight:700;
                  border-radius:12px;font-size:.84rem;
                  box-shadow:0 4px 18px rgba(0,0,0,.18);
                  border:none;transition:all .25s ease;display:inline-flex;align-items:center;gap:.4rem;"
           onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 28px rgba(0,0,0,.22)'"
           onmouseout="this.style.transform='';this.style.boxShadow='0 4px 18px rgba(0,0,0,.18)'">
          <i class="fas fa-user-plus"></i> Criar Conta de Proponente
        </a>
        <a href="admin/login"
           class="btn px-4 py-3 mb-2"
           style="background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.40);
                  color:#fff;font-weight:600;border-radius:12px;font-size:.80rem;
                  transition:all .25s ease;display:inline-flex;align-items:center;gap:.4rem;"
           onmouseover="this.style.background='rgba(255,255,255,.20)'"
           onmouseout="this.style.background='rgba(255,255,255,.12)'">
          <i class="fas fa-sign-in-alt"></i> Já tenho conta
        </a>
        <div style="margin-top:.7rem;font-size:.62rem;color:rgba(255,255,255,.45);text-align:right;">
          <i class="fas fa-shield-alt me-1"></i> Acesso seguro &mdash; Registo gratuito
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Parceiros -->
<div class="container-fluid py-5 wow fadeInUp vendor-section-bg">
  <div class="container">
    <div class="text-center mb-4">
      <span class="section-label">Os Nossos Parceiros</span>
      <h2 class="section-heading">Intervenientes</h2>
      <div class="section-divider"></div>
    </div>
    <div class="owl-carousel vendor-carousel">
      <img src="img/UNEP-WCMC.png" alt="UNEP-WCMC">
      <img src="img/Short-GEF.jpg" alt="GEF">
      <img src="img/logo-moz (2).png" alt="Governo de Moçambique">
      <img src="img/AQUALogo.jpg" alt="AQUA">
      <img src="img/wcs.jpg" alt="WCS">
    </div>
  </div>
</div>

<?php include 'footer.php'; ?>

<script>
google.charts.load('current', {'packages': ['corechart']});

function drawChart(id, data, title, pieHole) {
    if (!document.getElementById(id)) return;
    // Filtra entradas com valor zero para não poluir o gráfico
    var filtered = data.filter(function(d){ return d[1] > 0; });
    if (!filtered.length) {
        document.getElementById(id).innerHTML =
            '<div class="d-flex align-items-center justify-content-center h-100 text-muted">' +
            '<i class="bi bi-bar-chart me-2"></i>Sem dados para o período seleccionado</div>';
        return;
    }
    var dt = google.visualization.arrayToDataTable([['Categoria','Total']].concat(filtered));
    new google.visualization.PieChart(document.getElementById(id)).draw(dt, {
        title: title,
        pieHole: pieHole || 0,
        chartArea: {width:'88%', height:'78%'},
        legend: {position:'bottom', textStyle:{fontSize:11}},
        titleTextStyle: {fontSize:13, bold:true, color:'#145c38'},
        colors: ['#45752E','#2090C8','#B87B42','#75A636','#1070A8','#956030',
                 '#24571A','#085090','#7A4E26','#8FC96B','#55AEDD','#D4A97A']
    });
}

function loadStats(endpoint, cfg, ano) {
    $.getJSON(endpoint, {ano: ano||''})
     .done(function(data) {
        if (!data || data.error) return;
        // google.charts.load já chamado — se API pronta, desenha imediatamente
        if (typeof google.visualization !== 'undefined') {
            if(cfg.c1) drawChart(cfg.c1, Object.entries(data.categorias), cfg.t1);
            if(cfg.c2) drawChart(cfg.c2, Object.entries(data.atividades), cfg.t2, .4);
        } else {
            google.charts.setOnLoadCallback(function() {
                if(cfg.c1) drawChart(cfg.c1, Object.entries(data.categorias), cfg.t1);
                if(cfg.c2) drawChart(cfg.c2, Object.entries(data.atividades), cfg.t2, .4);
            });
        }
     })
     .fail(function(){ console.warn('Erro ao carregar estatísticas:', endpoint); });
}

var modalConfigs = {
    'estatisticasModal':           {ep:'detalhes_projectos.php',                c1:'piechart',     t1:'Por Categoria', c2:'piechart1',     t2:'Por Actividade', f:'anoFiltroRecebidos'},
    'estatisticasAprovadosModal':  {ep:'detalhes_projectos_aprovados.php',      c1:'aprovado',     t1:'Por Categoria', c2:'aprovado1',     t2:'Por Actividade', f:'anoFiltroAprovados'},
    'estatisticasLicencasModal':   {ep:'detalhes_licencas.php',                 c1:'licenca',      t1:'Por Categoria', c2:'licenca1',      t2:'Por Actividade', f:'anoFiltroLicencas'},
    'estatisticasAuditadasModal':  {ep:'detalhes_auditadas.php',                c1:'auditadas',    t1:'Por Categoria', c2:'auditadas1',    t2:'Por Actividade', f:'anoFiltroAuditadas'},
    'estatisticasMultasModal':     {ep:'detalhes_multas.php',                   c1:'multas',       t1:'Por Categoria', c2:'multas1',       t2:'Por Actividade', f:'anoFiltroMultas'},
    'estatisticasFiscalizadosModal':{ep:'detalhes_fiscalizados.php',            c1:'fiscalizados', t1:'Por Categoria', c2:'fiscalizados1', t2:'Por Actividade', f:'anoFiltroFiscalizados'},
    'estatisticasContrabalancosModal':{ep:'detalhes_contrabalancos.php',        c1:'contrabalancos',t1:'Por Categoria',c2:'contrabalancos1',t2:'Por Actividade',f:'anoFiltroContrabalancos'},
    'estatisticasEcossistemaModal':{ep:'detalhes_contrabalancos_ecosistema.php',c1:'ecossistema',  t1:'Por Categoria', c2:'ecossistema1',  t2:'Por Actividade', f:'anoFiltroEcossistema'},
    'estatisticasEspecieModal':    {ep:'detalhes_contrabalancos_especie.php',   c1:'especie',      t1:'Por Categoria', c2:'especie1',      t2:'Por Actividade', f:'anoFiltroEspecie'},
};

$.each(modalConfigs, function(id, cfg) {
    $('#'+id).on('shown.bs.modal', function() { loadStats(cfg.ep, cfg); });
    $('#'+cfg.f).on('change', function() { loadStats(cfg.ep, cfg, $(this).val()); });
});
</script>

</body>
</html>
