
<div class="container">
<div class="row">
  <div class="cs-space-20 d-md-none"></div>
  <?php
  foreach ($categories as $key => $category) {
    if($category['title'] == $current_parent) {
      $childs = $category["sub_crb_cat"];
      if($key == intval($_GET['cid'])){
          $current_img  = $category["crb_cat_photo"];
      }
        foreach ($childs as $scid => $child) {
          if($child["title"] == $_GET['son']){
            if(! empty($child["sub_sub_crb_cat"])) {
              foreach ($child["sub_sub_crb_cat"] as $k => $vv) {
                  if($key == intval($_GET['cid']) && $scid == intval($_GET['scid']) && $k == intval($_GET['scsid']) && $_GET['son'] == $child["title"]) {
                    $desc_cat1 = $vv["desc"];
                    $desc_cat2 = $desc_cat1;
                  }else {
                      $desc_cat2 = $child["desc"];
                  }
              }
            }else {
              $desc_cat2 = $child["desc"];
            }
          }
          if($scid == intval($_GET['scid'])){
            $extra1 = $child["extra1"];
            $ex_2 = $child["extra2"];
            $ex_tit1 = $child["extra1tit"];
            $ex_tit2 = $child["extra2tit"];
          }
        }
    }
  }
  ?>
  <div class="cs-space-20 d-md-none"></div>
</div>
</div>
<div class="d-none d-md-block cs-space-40"></div>
<section id="single-params">
  <div class="container">
    <div class="row">
      <div class="col-12 col-md-3">
        <div class="lateral-menu">
          <div class="header-lateral-menu">
            <div class="row">
              <div class="col-4 d-flex align-items-center">
                <img class="logo" src="<?php echo $current_img; ?>">
              </div>
              <div class="col-8">
                <h4>EMFA</h4>
              </div>
            </div>
          </div>
          <div class="body-lateral-menu">
            <?php foreach ($emfa_categories as $x => $category) {
              if($_GET["active"] == $x){
                $maintitle = $category["emfa_title"];
                $desc_cat2 = $category["emfa_desc"];
              }

              //$maintitle = $category["emfa_title"];
              // if($_GET["active"] == $x){
              //   $desc_cat2 = $category["emfa_desc"];
              // }
            ?>
              <div class="row">
                <div class="align-items-end col-2 col-md-3 d-flex flex-column">
                  <a class="more " data-toggle="collapse" href="#<?php echo "op-" . $scid ?>" role="button" aria-expanded="false" aria-controls="<?php echo "op-" . $scid ?>">
                    <?php if(!empty($child['sub_sub_crb_cat'])) : ?>
                      <p>+</p>
                    <?php else: ?>
                      <p>-</p>
                    <?php endif; ?>
                  </a>
                </div>
                <div class="col-10 col-md-9">
                  <a href="<?php echo get_permalink($paramsID); ?>/?api=<?php echo $category["emfa_api"]; ?>&active=<?php echo $x; ?>">
                    <h3 class="<?php echo ($x == $_GET['active']) ? 'active' : '' ?>" aria-expanded="false" aria-controls="<?php echo $child_title; ?>">
                      <?php echo $category["emfa_title"]; ?>
                    </h3>
                  </a>
                </div>
              </div>
              <div class="multi-collapse row collapse <?php echo ($scid == $_GET['scid']) ? 'show' : '' ?> collapse-info" id="<?php echo "op-" . $scid ?>">
                <div class="col-2 col-md-3"></div>
                <div class="col-10 col-md-9">
                  <?php if(! empty($child['sub_sub_crb_cat'])) : ?>
                  <ul>
                    <?php $count = 0; ?>
                    <?php foreach ($child['sub_sub_crb_cat'] as $k => $last_child):?>
                      <?php if(isset($_GET['list'])): ?>
                        <?php if($count == 0 && $_GET['son'] == $child["title"]) {
                          $maintitle = $last_child["title"];
                          $desc_cat1 = $last_child["desc"];
                        } ?>
                        <li class="<?php echo ($count == 0 && $_GET['son'] == $child["title"]) ? 'active' : '' ?>">
                          <a class="js-ids1" href="<?php echo get_permalink($pageID); ?>/?scsid=<?php echo $count; ?>&cid=<?php echo $cid ?>&scid=<?php echo $scid ?>&data=<?php echo $last_child['api_title'] ?>&parent=<?php echo $current_parent; ?>&son=<?php echo $child['title'] ?>" data-scsid="<?php echo $count; ?>"><?php echo $subcat['title'] ?>
                            <?php echo $last_child["title"]; ?>
                          </a>
                        </li>
                      <?php else: ?>
                        <li class="<?php echo ($cid == $_GET['cid'] && $scid == $_GET['scid'] && $k == $_GET['scsid'] && isset($_GET['scsid'])) ? 'active' : '' ?>">
                          <a class="js-ids1" href="<?php echo get_permalink($pageID); ?>/?scsid=<?php echo $count; ?>&cid=<?php echo $cid ?>&scid=<?php echo $scid ?>&data=<?php echo $last_child['api_title'] ?>&parent=<?php echo $current_parent; ?>&son=<?php echo $child['title'] ?>" data-scsid="<?php echo $count; ?>"><?php echo $subcat['title'] ?>
                            <?php echo $last_child["title"]; ?>
                          </a>
                        </li>
                      <?php endif; ?>
                  <?php
                  $count = $count + 1;
                endforeach; ?>
                  </ul>
                <?php endif; ?>
                </div>
              </div>
            <?php
            }?>
          </div>
        </div>
      </div>
        <div class="cs-space-20 d-md-none"></div>
        <div class="col-12 col-md-9" id="parameters">
          <h2><?php echo $maintitle; ?></h2>
          <div class="d-none d-md-block cs-space-10"></div>
           <p class="params-p">
                    <pre class="params-p"><?php echo $desc_cat2; ?></pre>
                </p>
          <div class="cs-space-20 d-md-none"></div>
          <div class="d-none d-md-block cs-space-40"></div>
          <div class="graphic-container">
            <div class="header-graphic">
              <?php
              foreach ($emfa_categories as $key => $category) {
                if($_GET["active"] == $key) {
                  $metaemail = $category['emfa_crb_emfameta'][3]["emfa_emailmeta"];
                  $metadesc = $category['emfa_crb_emfameta'][3]["emfa_descmeta"];
                  $metalc = $category['emfa_crb_emfameta'][3]["emfa_alccmeta"];
                  $metcar = $category['emfa_crb_emfameta'][3]["emfa_carmeta"];
                  $metunidad = $category['emfa_crb_emfameta'][3]["emfa_unidadmeta"];
                  $metpermeta = $category['emfa_crb_emfameta'][3]["emfa_permeta"];
                  $metoport = $category['emfa_crb_emfameta'][3]["emfa_opormeta"];
                  $metarev = $category['emfa_crb_emfameta'][3]["emfa_revmeta"];
                  $metafu = $category['emfa_crb_emfameta'][3]["emfa_fumeta"];
                  $metaacc = $category['emfa_crb_emfameta'][3]["emfa_accmeta"];
                  $metanot = $category['emfa_crb_emfameta'][3]["emfa_notmeta"];
                  $commeta = $category['emfa_crb_emfameta'][3]["emfa_commeta"];
                  $calregmeta = $category['emfa_crb_emfameta'][3]["emfa_calregmeta"];
                  $reddatafumetameta = $category['emfa_crb_emfameta'][3]["emfa_reddatafumeta"];
                  $notes = $category['emfa_crb_emfameta'][3]["emfa_tablenotes"];
                  $pdfneta = $category['emfa_crb_emfameta'][3]["emfa_pdfmeta"];
                  $metaact = $category['emfa_crb_emfameta'][3]["emfa_actualizacionemeta"];
                }
              }
               ?>
              <div class="container">
                <div class="row">
                  <div class="col-6 col-md-3 col-md-3 col-space-down">
                      <button class="btn btn-primary hBack" type="button">Volver</button>
                  </div>
                  <div class="col-6 col-md-3 col-md-3 col-space-down">
                    <div class="graphic-box">
                      <img src="<?php echo get_template_directory_uri(); ?>/src/images/131972@2x.png" alt="">
                      <h5>Exportar</h5>
                      <div class="arrow-down"></div>
                      <div class="dropdown js-hover-dropdown" id="js-downland">
                        <ul>
                          <li id="txt" ><a href="#" >Txt</a></li>
                          <li id="csv" ><a href="#">csv</a></li>
                          <li id="ex" ><a href="#">Excel</a></li>
                        </ul>
                         <span style="height: 38px;padding-left: 20px;display: flex;align-items: center;background: #f2f2f2;color: black;font-weight: bold;" id="dre">Json</span>

                      </div>
                    </div>
                  </div>
                  <!-- <div class="col-6 col-md-3 col-md-3 col-space-down">
                    <div class="graphic-box">
                      <img src="<?php echo get_template_directory_uri(); ?>/src/images/1170718-copy@2x.png" alt="">
                      <h5>Graficar</h5>
                      <div class="arrow-down"></div>
                      <div class="dropdown js-hover-dropdown">
                        <ul>
                          <li class="js-showtab"><a href="#" id="line">Lineal</a></li>
                          <li class="js-showtab"><a href="#" id="bar">Barra</a></li>
                        </ul>
                      </div>
                    </div>
                  </div> -->
                  <div class="col-6 col-md-3 col-md-3 col-space-down">
                    <div class="graphic-box share-box-wrapper js-share-box-wrapper">
                      <div class="graphic-box-helper"></div>
                      <img src="<?php echo get_template_directory_uri(); ?>/src/images/149722@2x.png" alt="">
                      <h5>Compartir</h5>
                      <div class="arrow-down js-arrowToex"></div>
                      <div class="share-box">
                        <div class="social">
                          <?php $actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
                          $fac_link = urldecode($actual_link);
                          ?>
                          <a target="_blank" href="https://www.facebook.com/sharer.php?cid=<?php echo $_GET['scsid']; ?>&u=<?=urlencode($actual_link)?>"><img src="<?php echo get_template_directory_uri(); ?>/src/images/face-ico@2x.png" alt=""></a>
                          <a target="_blank" href="https://twitter.com/intent/tweet?url=<?=urlencode($actual_link)?>"><img src="<?php echo get_template_directory_uri(); ?>/src/images/twi-ico@2x.png" alt=""></a>
                          <a target="_blank" href="mailto:?subject=SECMCA DATOS: Resultado de <?php echo $_GET['son']; ?> ( <?php echo $maintitle ?> ) &amp;body=resultado de <?php echo $maintitle ?>-><?=urlencode($actual_link)?>"><img src="<?php echo get_template_directory_uri(); ?>/src/images/mail-ico@2x.png" alt=""></a>
                        </div>
                        <div class="share-link">
                          <p class="text-link">Compartir link</p>
                          <div class="copy">
                            <img src="<?php echo get_template_directory_uri(); ?>/src/images/link@2x.png" alt="">
                            <button onclick="copyLink()"  style="background: transparent;
                              height: 31px;width: 43px;font-size: 11px;border: none;">Copiar</buxtton>
                          </div>
                        </div>
                        <div class="box-link">
                          <p><input type="text" value="<?php echo $actual_link; ?>" id="myInput" readonly style="background: transparent;border: none;"></p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-6 col-md-3 col-md-3 col-space-down boxx">
                    <div class="graphic-box graphic-blue-box">
                      <div class="circle-wrapper">
                        <div class="circle-info">i</div>
                        <h5>Metadatos</h5>
                      </div>
                      <div class="arrow"></div>
                    </div>
                    <div class="white-box">
                      <div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
                        <div class="card">
                          <div class="card-header" role="tab" id="headingOne1">
                            <a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
                              aria-controls="collapseOne1">
                              <h5 class="mb-0 d-flex justify-content-between">
                                Contacto <i class="fas fa-angle-down rotate-icon"></i>
                              </h5>
                            </a>
                          </div>
                          <div id="collapseOne1" class="collapse show contact-table" role="tabpanel" aria-labelledby="headingOne1"
                            data-parent="#accordionEx">
                            <div class="card-body fixed-card">
                              <div class="row">
                                <div class="col-12 col-md-12 col-wrapper-contact">
                                  <div class="row">
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p>Contacto</p>
                                    </div>
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p><pre><?php echo $metaemail; ?></pre></p>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p>Fecha de actualización de los metadatos</p>
                                    </div>
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p><pre><?php echo $metaact; ?></pre></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card">
                          <div class="card-header" role="tab" id="headingTwo2">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
                              aria-expanded="false" aria-controls="collapseTwo2">
                              <h5 class="mb-0 d-flex justify-content-between">
                                Características de los datos <i class="fas fa-angle-down rotate-icon"></i>
                              </h5>
                            </a>
                          </div>
                          <div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
                            data-parent="#accordionEx">
                            <div class="card-body">
                              <div class="col-12 col-md-12 col-wrapper-contact">
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p>Descripción</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metadesc; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p>Alcance Cobertura y desagregaciones</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metalc; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center col-wrapper-contact">
                                    <p>Características</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metcar; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center col-wrapper-contact">
                                    <p>Unidad de medida</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metunidad; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center col-wrapper-contact">
                                    <p>Periodicidad</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metpermeta; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p>Oportunidad</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metoport; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p>Revisión</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metarev; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p>Fuente primaria de información</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metafu; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p>Acceso a los datos</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metaacc; ?></pre></p>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-12 col-md-6 d-flex p-4 justify-content-center">
                                    <p>Notas por país</p>
                                  </div>
                                  <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                    <p><pre><?php echo $metanot; ?></pre></p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="card">
                          <div class="card-header" role="tab" id="headingThree3">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
                              aria-expanded="false" aria-controls="collapseThree3">
                              <h5 class="mb-0 d-flex justify-content-between">
                                Comparación entre países y cálculo regional <i class="fas fa-angle-down rotate-icon"></i>
                              </h5>
                            </a>
                          </div>
                          <div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
                            data-parent="#accordionEx">
                            <div class="card-body">
                              <div class="row">
                                <div class="col-12 col-md-12 col-wrapper-contact">
                                  <div class="row">
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p>Comparabilidad regional</p>
                                    </div>
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p><?php echo $commeta; ?></p>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-12 col-md-6 d-flex p-4 justify-content-center">
                                      <p>Cálculo regional</p>
                                    </div>
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p><?php echo $calregmeta; ?></p>
                                    </div>
                                  </div>
                                  <div class="row">
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p>Fuente datos regionales</p>
                                    </div>
                                    <div class="col-12 col-md-6 d-flex align-items-center justify-content-center">
                                      <p><?php echo $reddatafumetameta; ?></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="downland-meta">
                          <a href="<?php echo wp_get_attachment_url( $pdfneta ); ?>" download>
                            <div class="button">
                              <img src="<?php echo get_template_directory_uri(); ?>/src/images/131972@2x.png" alt="">
                              <span>Exportar</span>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="d-none d-md-block cs-space-40"></div>
                <div class="row">
                  <div class="col-12">
                    <div class="space"></div>
                  </div>
                </div>
                <div class="d-none d-md-block cs-space-30"></div>
                <div class="row">
                  <div class="col-md-8">
                    <!-- <h3>Resultado de la consulta</h3> -->
                  </div>
                  <div class="col-md-4 d-flex align-items-center justify-content-end">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                      <!-- <li class="nav-item js-nav-mode js-cuadro">
                        <a class="nav-link active active-mode d-flex align-items-center justify-content-center" id="pills-table-emfa-tab" data-toggle="pill" href="#pills-table-emfa" role="tab" aria-controls="pills-table-emfa" aria-selected="true"><p>Cuadro</p></a>
                      </li> -->
                    </ul>
                  </div>
                </div>
                <!-- <div class="d-none d-md-block cs-space-30"></div> -->
                <div class="row">
                  <div class="graphic w-100">
                    <div class="tab-content" id="pills-tabContent">
                      <div class="tab-pane fade show active" id="pills-table-emfa" role="tabpanel" aria-labelledby="pills-table-emfa-tab">
                        <div class="wraper-tadiv">
                            <div class="table-wrapper">
                                <table class="emfa-table table-results search-table">
                                	<thead>
                                    <tr style="text-align: left!important; border:none!important;">
                                      <th colspan="7" style="border: none!important;text-align: left!important;padding: 0;"><p style="font-weight: bold;">Secretaría Ejecutiva del Consejo Monetario Centroamericano</p></th>
                                    </tr>
                                    <tr style="border: none!important;">
                                      <th colspan="7" style="border: none!important;text-align: left!important;padding: 0;"><p style="font-weight: bold;"><?php echo $maintitle; ?> - Balance OSD ME</p></th>
                                    </tr>
                                    <tr style="border: none!important;">
                                      <th colspan="7" style="border: none!important;text-align: left!important;padding: 0;"><p style="font-weight: bold;">Datos presentados en millones de moneda nacional</p></th>
                                    </tr>
                                    <tr style="border: none!important;">
                                      <th colspan="7" style="border: none!important;text-align: left!important;padding: 0;"><p style="font-weight: bold;">Datos para <span data-country="<?php echo $_GET["country"];  ?>"class="js-country"></span></p></th>
                                    </tr>
                                		<tr class="tableizer-firstrow">
                                            <th colspan="2"></th>
                                            <th colspan="4">Billetes y monedas y depósitos</th>
                                            <th colspan="5">Valores distintos de acciones</th>
                                            <th colspan="8">Préstamos</th>
                                            <th colspan="1">Otros activos</th>
                                            <th colspan="1">Total activos</th>
                                        </tr>
                                		<tr>
                                			<th colspan="2">Año/Mes</th>
                                			<?php foreach($vars as $var): ?>
                                			<th><?php echo $var ?></th>
                                			<?php endforeach ?>
                                		</tr>
                                	</thead>
                                	<tbody>
                                		<?php foreach($periodos as $periodo): ?>
                                		<tr>
                                			<td colspan="2" class="date"><?php echo $periodo ?></td>

                                			<?php foreach($vars as $var): 
                                        ?>
                                				<td><?php echo isset($data[$periodo][$var]) ? round($data[$periodo][$var], 2) : 'NA' ?></td>
                                			<?php endforeach ?>

                                		</tr>
                                		<?php endforeach ?>

                                	</tbody>
                                </table>
                              </div>
                              </div>
                            <div class="table-notes">
                            <div class="d-none d-md-block cs-space-20"></div>
                            <?php if($notes): ?>
                            <h2 class="mb-2">Notas</h2>
                            <pre style="width: 97%;"><?php echo $notes; ?></pre>
                          <?php endif; ?>
                            <div class="d-none d-md-block cs-space-20"></div>
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</section>
<div class="d-none d-md-block cs-space-40"></div>
 <?php $json_string = json_encode($data); ?>


<script>

    function downloadJSON(data, filename) {
    const jsonString = JSON.stringify(data);
    const downloadLink = document.createElement("a");
    downloadLink.setAttribute("href", "data:text/json;charset=utf-8," + encodeURIComponent(jsonString));
    downloadLink.setAttribute("download", filename);
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    }

    var objeto_js = JSON.parse('<?php echo $json_string; ?>');

    document.getElementById("dre").addEventListener('click', function(e){
        e.preventDefault();
    console.log("err");
    downloadJSON(objeto_js, "data.json");
    });

</script>


