<div class="container">
    <div class="row">
        <div class="cs-space-20 d-md-none"></div>
        <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>ESEA</h4>
                            </div>
                        </div>
                    </div>
                    <div class="body-lateral-menu">
                      <?php foreach ($esea_categories as $x => $category) {
                        if($_GET["active"] == $x){
                            foreach ($category["esea_sub_crb_cat"] as $key => $value) {
                              if($value["esea_title"] == $_GET["son"]) {
                                $desc_cat2 = $value["esea_desc"];
                                $maintitle = $value["esea_title"];
                              }
                            }
                        }
                      ?>
                        <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-" . $x ?>" role="button" aria-expanded="false" aria-controls="<?php echo "op-" . $x ?>">
                              <?php if(!empty($category["esea_sub_crb_cat"])) : ?>
                                <p>+</p>
                              <?php else: ?>
                                <p>-</p>
                              <?php endif; ?>
                            </a>
                          </div>
                          <div class="col-10 col-md-9">
                              <h3 class="<?php echo ($x == $_GET['active'] && empty($category["esea_sub_crb_cat"])) ? 'active' : 'active-noborder' ?>" aria-expanded="false" aria-controls="<?php echo $category["esea_title"]; ?>">
                                <?php echo $category["esea_title"]; ?>
                              </h3>
                          </div>
                        </div>
                        <div class="multi-collapse row collapse <?php echo ($x == $_GET['active']) ? 'show' : '' ?> collapse-info" id="<?php echo "op-" . $x ?>">
                          <div class="col-2 col-md-3"></div>
                          <div class="col-10 col-md-9">
                            <?php if(! empty($category["esea_sub_crb_cat"])) : ?>
                            <ul>
                              <?php $count = 0;?>
                              <?php foreach ($category["esea_sub_crb_cat"] as $k => $last_child): ?>
                                  <li class="<?php echo ($last_child["esea_title"] == $_GET["son"]) ? 'active' : '' ?>">
                                    <a href="<?php echo get_permalink($pageID); ?>/?scid=<?php echo $x ?>&active=<?php echo $x; ?>&son=<?php echo $last_child["esea_title"]; ?>&subject=<?php echo $_GET["subject"]; ?>">
                                      <?php echo $last_child["esea_title"]; ?>
                                    </a>
                                  </li>
                            <?php
                            $count = $count + 1;
                          endforeach; ?>
                            </ul>
                          <?php endif; ?>
                          </div>
                        </div>
                      <?php
                      }?>
                    </div>
                </div>
                 <div class="cs-space-20"></div>
                <div class="row">
                     <div class="col-12 col-md-12">
                                  <h3>Realizar nueva consulta</h3>
                              </div>
                              <div class="cs-space-20"></div>
                  <form id="params-form" class="tab-content col-12 d-none d-md-block" method="POST">
                                                    <div class="row parameters">
                                                        <div class="col-12 col-md-12">
                                                            <div class="params-box">
                                                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                                    <li class="nav-item">
                                                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pill-country" role="tab" aria-controls="pill-country" aria-selected="true">Pais</a>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-region" role="tab" aria-controls="pills-profile" aria-selected="false">Regiones</a>
                                                                    </li>
                                                                </ul>
                                                                <div class="tab-content" id="pills-tabContent">
                                                                    <div class="tab-pane fade show active box-content-emfa" id="pill-country" role="tabpanel" aria-labelledby="pills-home-tab">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country0" name="country[]" value="3">
                                                                            <label class="custom-control-label" for="country0">Costa Rica</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country1" name="country[]" value="13">
                                                                            <label class="custom-control-label" for="country1">El Salvador</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country2" name="country[]" value="50">
                                                                            <label class="custom-control-label" for="country2">Guatemala</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country3" name="country[]" value="17">
                                                                            <label class="custom-control-label" for="country3">Honduras</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country4" name="country[]" value="4">
                                                                            <label class="custom-control-label" for="country4">Nicaragua</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country5" name="country[]" value="52">
                                                                            <label class="custom-control-label" for="country5">República Dominicana</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country6" name="country[]" value="161">
                                                                            <label class="custom-control-label" for="country6">Panamá</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pill-region" role="tabpanel" aria-labelledby="IPC-more-tab">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country7" name="country[]" value="95">
                                                                            <label class="custom-control-label" for="country7">CA</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country8" name="country[]" value="56">
                                                                            <label class="custom-control-label" for="country8">CARD</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country9" name="country[]" value="78">
                                                                            <label class="custom-control-label" for="country9">CAPARD</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- <div class="options-wrapper options-country-wrapper">
                          </div> -->
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-12">
                                                            <div class="params-box">
                                                                <div class="box-header">
                                                                    <h3>Años</h3>
                                                                </div>
                                                                <div class="box-content js-custom-emfa-years emfa-years">
                                                                </div>
                                                                <div class="button-box">
                                                                    <button type="button" class="btn btn-primary all js-take-all">Seleccionar todo</button>
                                                                    <button type="button" class="btn btn-primary not-all js-remove-all">Eliminar todo</button>
                                                                </div>
                                                                <div class="options-wrapper options-fe-wrapper js-custom-wrapper">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-12">
                                                            <div class="params-box">
                                                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                                    <li class="nav-item">
                                                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pill-mes" role="tab" aria-controls="pill-mes" aria-selected="true">Meses</a>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-per" role="tab" aria-controls="pills-per" aria-selected="false">Periodos</a>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-anual" role="tab" aria-controls="pills-anual" aria-selected="false">Anual</a>
                                                                    </li>
                                                                </ul>
                                                                <div class="tab-content" id="pills-tabContent">
                                                                    <div class="tab-pane fade show active box-content-emfa" id="pill-mes" role="tabpanel" aria-labelledby="pill-mes">
                                                                        <div class="box-content esea-sidebar">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout1" name="mouths[]" value="1">
                                                                                <label class="custom-control-label" for="mout1">Enero</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout2" name="mouths[]" value="2">
                                                                                <label class="custom-control-label" for="mout2">Febrero</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout3" name="mouths[]" value="3">
                                                                                <label class="custom-control-label" for="mout3">Marzo</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout4" name="mouths[]" value="4">
                                                                                <label class="custom-control-label" for="mout4">Abril</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout5" name="mouths[]" value="5">
                                                                                <label class="custom-control-label" for="mout5">Mayo</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout6" name="mouths[]" value="6">
                                                                                <label class="custom-control-label" for="mout6">Junio</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout7" name="mouths[]" value="7">
                                                                                <label class="custom-control-label" for="mout7">Julio</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout8" name="mouths[]" value="8">
                                                                                <label class="custom-control-label" for="mout8">Agosto</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout9" name="mouths[]" value="9">
                                                                                <label class="custom-control-label" for="mout9">Setiembre</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout10" name="mouths[]" value="10">
                                                                                <label class="custom-control-label" for="mout10">Octubre</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout11" name="mouths[]" value="11">
                                                                                <label class="custom-control-label" for="mout11">Noviembre</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout12" name="mouths[]" value="12">
                                                                                <label class="custom-control-label" for="mout12">Diciembre</label>
                                                                            </div>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="button" class="btn btn-primary all js-take-all-tabs">Seleccionar todo</button>
                                                                            <button type="button" class="btn btn-primary not-all RemoveAll js-remove-all">Eliminar todo</button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pill-per" role="tabpanel" aria-labelledby="pills-per">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perI" name="peri[]" value="I">
                                                                            <label class="custom-control-label" for="perI">I</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perII" name="peri[]" value="II">
                                                                            <label class="custom-control-label" for="perII">II</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perIII" name="peri[]" value="III">
                                                                            <label class="custom-control-label" for="perIII">III</label>
                                                                        </div>
                                                                         <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perIV" name="peri[]" value="IV">
                                                                            <label class="custom-control-label" for="perIV">IV</label>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="button" class="btn btn-primary all js-take-all-tabs">Seleccionar todo</button>
                                                                            <button type="button" class="btn btn-primary not-all RemoveAll js-remove-all">Eliminar todo</button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pill-anual" role="tabpanel" aria-labelledby="pills-anual">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="an" name="mouths[]" value="Anual">
                                                                            <label class="custom-control-label" for="an">Anual</label>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="button" class="btn btn-primary all js-take-all-tabs">Seleccionar todo</button>
                                                                            <button type="button" class="btn btn-primary not-all RemoveAll js-remove-all">Eliminar todo</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         <?php 
                                                          $subject = $category["esea_api"];
                                                          $ss = $this->api->esea_get_params($subject); 
                                                        ?>
                                                        <div class="col-12 send-params">
                                                            <button id="send" type="submit" data-chartid="<?php echo $_GET["chartid"]; ?>" data-subject="<?php echo $_GET["subject"]; ?>" data-active="<?php echo $_GET["active"]; ?>" data-epid="<?php echo $_GET["epID"]; ?>" data-restpage="<?php echo get_permalink($resultpageID); ?>" name="Submit" class="btn btn-primary w-100 esea">Realizar nueva consulta</button>
                                                        </div>
                                                    </div>
                                                </form>
                </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">
                    <?php echo $desc_cat2; ?>
                </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 graph-maxWidth max-width-esea">
                    <div class="header-graphic">
                        <?php
              foreach ($esea_categories as $key => $category) {
                if($_GET["active"] == $key){
                  foreach ($category["esea_sub_crb_cat"] as $key => $value) {
                    if($_GET["son"] == $value["esea_title"]){
                      $metaemail = $value["esea_emailmeta"];
                      $metadesc = $value["esea_descmeta"];
                      $metalc = $value["esea_alccmeta"];
                      $metcar = $value["esea_carmeta"];
                      $metunidad = $value["esea_unidadmeta"];
                      $metpermeta = $value["esea_permeta"];
                      $metoport = $value["esea_opormeta"];
                      $metarev = $value["esea_revmeta"];
                      $metafu = $value["esea_fumeta"];
                      $metaacc = $value["esea_accmeta"];
                      $metanot = $value["esea_notmeta"];
                      $commeta = $value["esea_commeta"];
                      $calregmeta = $value["esea_calregmeta"];
                      $reddatafumetameta = $value["esea_reddatafumeta"];
                      $notes = $value["esea_tablenotes"];
                      $metaact = $value["esea_actualizacionemeta"];
                      $pdfneta = $value["esea_pdfmeta"];
                    }
                  }
                }
              }
               ?>
                            <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 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-30"></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="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">
                                                    <?php var_dump($all_data); ?>
                                                    <div class="table-wrapper esea-wrapper test2">
                                                        <table class="esea-table table-results">
                                                            <thead>
                                                                <tr>
                                                                    <th colspan="2"></th>
                                                                    <?php foreach($periodos as $per): ?>
                                                                        <th>
                                                                            <?php echo $per ?>
                                                                        </th>
                                                                        <?php endforeach ?>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <?php foreach($vars as $var): ?>
                                                                    <tr>
                                                                        <td colspan="2" class="date">
                                                                            <?php echo $var ?>
                                                                        </td>

                                                                        <?php foreach($periodos as $per): ?>
                                                                            <td>
                                                                                <?php echo isset($data[$per][$var]) ? round($data[$per][$var], 2) : '-' ?>
                                                                            </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>
                             <form id="params-form" class="tab-content col-12 d-block d-md-none" method="POST">
                                                    <div class="row parameters">
                                                        <div class="col-12 col-md-12">
                                                            <div class="params-box">
                                                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                                    <li class="nav-item">
                                                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pill-country" role="tab" aria-controls="pill-country" aria-selected="true">Pais</a>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-region" role="tab" aria-controls="pills-profile" aria-selected="false">Regiones</a>
                                                                    </li>
                                                                </ul>
                                                                <div class="tab-content" id="pills-tabContent">
                                                                    <div class="tab-pane fade show active box-content-emfa" id="pill-country" role="tabpanel" aria-labelledby="pills-home-tab">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country0" name="country[]" value="3">
                                                                            <label class="custom-control-label" for="country0">Costa Rica</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country1" name="country[]" value="13">
                                                                            <label class="custom-control-label" for="country1">El Salvador</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country2" name="country[]" value="50">
                                                                            <label class="custom-control-label" for="country2">Guatemala</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country3" name="country[]" value="17">
                                                                            <label class="custom-control-label" for="country3">Honduras</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country4" name="country[]" value="4">
                                                                            <label class="custom-control-label" for="country4">Nicaragua</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country5" name="country[]" value="52">
                                                                            <label class="custom-control-label" for="country5">República Dominicana</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country6" name="country[]" value="161">
                                                                            <label class="custom-control-label" for="country6">Panamá</label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pill-region" role="tabpanel" aria-labelledby="IPC-more-tab">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country7" name="country[]" value="95">
                                                                            <label class="custom-control-label" for="country7">CA</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country8" name="country[]" value="56">
                                                                            <label class="custom-control-label" for="country8">CARD</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="radio" class="custom-control-input" id="country9" name="country[]" value="78">
                                                                            <label class="custom-control-label" for="country9">CAPARD</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- <div class="options-wrapper options-country-wrapper">
                          </div> -->
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-12">
                                                            <div class="params-box">
                                                                <div class="box-header">
                                                                    <h3>Años</h3>
                                                                </div>
                                                                <div class="box-content js-custom-emfa-years emfa-years">
                                                                </div>
                                                                <div class="button-box">
                                                                    <button type="button" class="btn btn-primary all js-take-all">Seleccionar todo</button>
                                                                    <button type="button" class="btn btn-primary not-all js-remove-all">Eliminar todo</button>
                                                                </div>
                                                                <div class="options-wrapper options-fe-wrapper js-custom-wrapper">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-12 col-md-12">
                                                            <div class="params-box">
                                                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                                    <li class="nav-item">
                                                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pill-mes" role="tab" aria-controls="pill-mes" aria-selected="true">Meses</a>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-per" role="tab" aria-controls="pills-per" aria-selected="false">Periodos</a>
                                                                    </li>
                                                                    <li class="nav-item">
                                                                        <a class="nav-link" id="IPC-more-tab" data-toggle="pill" href="#pill-anual" role="tab" aria-controls="pills-anual" aria-selected="false">Anual</a>
                                                                    </li>
                                                                </ul>
                                                                <div class="tab-content" id="pills-tabContent">
                                                                    <div class="tab-pane fade show active box-content-emfa" id="pill-mes" role="tabpanel" aria-labelledby="pill-mes">
                                                                        <div class="box-content esea-sidebar">
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout1" name="mouths[]" value="1">
                                                                                <label class="custom-control-label" for="mout1">Enero</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout2" name="mouths[]" value="2">
                                                                                <label class="custom-control-label" for="mout2">Febrero</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout3" name="mouths[]" value="3">
                                                                                <label class="custom-control-label" for="mout3">Marzo</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout4" name="mouths[]" value="4">
                                                                                <label class="custom-control-label" for="mout4">Abril</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout5" name="mouths[]" value="5">
                                                                                <label class="custom-control-label" for="mout5">Mayo</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout6" name="mouths[]" value="6">
                                                                                <label class="custom-control-label" for="mout6">Junio</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout7" name="mouths[]" value="7">
                                                                                <label class="custom-control-label" for="mout7">Julio</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout8" name="mouths[]" value="8">
                                                                                <label class="custom-control-label" for="mout8">Agosto</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout9" name="mouths[]" value="9">
                                                                                <label class="custom-control-label" for="mout9">Setiembre</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout10" name="mouths[]" value="10">
                                                                                <label class="custom-control-label" for="mout10">Octubre</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout11" name="mouths[]" value="11">
                                                                                <label class="custom-control-label" for="mout11">Noviembre</label>
                                                                            </div>
                                                                            <div class="custom-control custom-checkbox">
                                                                                <input type="checkbox" class="custom-control-input radio-mou" id="mout12" name="mouths[]" value="12">
                                                                                <label class="custom-control-label" for="mout12">Diciembre</label>
                                                                            </div>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="button" class="btn btn-primary all js-take-all-tabs">Seleccionar todo</button>
                                                                            <button type="button" class="btn btn-primary not-all RemoveAll js-remove-all">Eliminar todo</button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pill-per" role="tabpanel" aria-labelledby="pills-per">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perI" name="peri[]" value="I">
                                                                            <label class="custom-control-label" for="perI">I</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perII" name="peri[]" value="II">
                                                                            <label class="custom-control-label" for="perII">II</label>
                                                                        </div>
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perIII" name="peri[]" value="III">
                                                                            <label class="custom-control-label" for="perIII">III</label>
                                                                        </div>
                                                                         <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="perIV" name="peri[]" value="IV">
                                                                            <label class="custom-control-label" for="perIV">IV</label>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="button" class="btn btn-primary all js-take-all-tabs">Seleccionar todo</button>
                                                                            <button type="button" class="btn btn-primary not-all RemoveAll js-remove-all">Eliminar todo</button>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pill-anual" role="tabpanel" aria-labelledby="pills-anual">
                                                                        <div class="custom-control custom-checkbox">
                                                                            <input type="checkbox" class="custom-control-input" id="an" name="mouths[]" value="Anual">
                                                                            <label class="custom-control-label" for="an">Anual</label>
                                                                        </div>
                                                                        <div class="button-box">
                                                                            <button type="button" class="btn btn-primary all js-take-all-tabs">Seleccionar todo</button>
                                                                            <button type="button" class="btn btn-primary not-all RemoveAll js-remove-all">Eliminar todo</button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                         <?php 
                                                          $subject = $category["esea_api"];
                                                          $ss = $this->api->esea_get_params($subject); 
                                                        ?>
                                                        <div class="col-12 send-params">
                                                            <button id="send" type="submit" data-chartid="<?php echo $_GET["chartid"]; ?>" data-subject="<?php echo $_GET["subject"]; ?>" data-active="<?php echo $_GET["active"]; ?>" data-epid="<?php echo $_GET["epID"]; ?>" data-restpage="<?php echo get_permalink($resultpageID); ?>" name="Submit" class="btn btn-primary w-100 esea">Realizar nueva consulta</button>
                                                        </div>
                                                    </div>
                                                </form>
                    </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>
