<?php
/*
* Template Name: Services
*
*/
 ?>

<?php
 if ( !is_ajax() ) :
 get_header();
 endif;

 $id = $_POST['page-id'];
?>

 <div class="services-map__container" id="servicesMapContainer">
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-md-3 col-lg-2 col-sm-offset-0">
        <a href="<?= home_url() ?>" class="tana-logo-alternate">
          <?php
            $logo = get_field( 'page_logotype', $id );
              ?>
          <img class="logo--wider" src="<?= $logo['url'] ?>" alt="<?= $logo['alt'] ?>">
        </a>
      </div>
    </div>
  </div>
  <div class="visible-xs services-map__map-mobile">
    <img src="<?= get_template_directory_uri() ?>/assets/images/services-map-mobile.png" alt="Karta regije" class="img-responsive">
  </div>
  <div class="container">
    <div class="row hidden-xs">
      <div class="col-xs-12">
        <figure id="servicesMap" class="services-map__map-desktop">
          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2240 1263"
            preserveAspectRatio="xMinYMin meet">
            <image width="2220" height="1263" xlink:href="<?= get_template_directory_uri() ?>/assets/images/services-map.png">
            </image>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="slovenia" data-name="Slovenia" xlink:href="#slovenia">
              <text class="services-map__link-text" x="385" y="460">Slovenia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="croatia" data-name="Croatia" xlink:href="#croatia">
              <text class="services-map__link-text" x="420" y="565">Croatia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="bosnia-herzegovina" data-name="Bosnia-Herzegovina" xlink:href="#bosnia-herzegovina">
              <text class="services-map__link-text" x="0" y="670">Bosnia-Herzegovina</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="montenegro" data-name="Montenegro" xlink:href="#montenegro">
              <text class="services-map__link-text" x="250" y="780">Montenegro</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="serbia" data-name="Serbia" xlink:href="#serbia">
              <text class="services-map__link-text" x="1880" y="625">Serbia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="kosovo" data-name="Kosovo" xlink:href="#kosovo">
              <text class="services-map__link-text" x="1880" y="730">Kosovo</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="north macedonia" data-name="North Macedonia" xlink:href="#north-macedonia">
              <text class="services-map__link-text" x="1880" y="840">North Macedonia</text>
            </a>
            <a class="services-map__link" data-open-subpage data-subpage-type="country" data-lowercase="albania" data-name="Albania" xlink:href="#albania">
              <text class="services-map__link-text" x="1880" y="940">Albania</text>
            </a>
          </svg>
        </figure>
      </div>
    </div>
    <div class="row visible-xs">
      <div class="col-xs-12">
        <ul class="list list--unstyled services-map__list">
          <li class="services-map__list-item">
            <a href="#slovenia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Slovenia">Slovenia</a>
          </li>
          <li class="services-map__list-item" data-name="Croatia">
            <a href="#croatia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Croatia">Croatia</a>
          </li>
          <li class="services-map__list-item" data-name="Bosnia-Herzegovina">
            <a href="#bosnia-herzegovina" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Bosnia-Herzegovina">Bosnia-Herzegovina</a>
          </li>
          <li class="services-map__list-item" data-name="Montenegro">
            <a href="#montenegro" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Montenegro">Montenegro</a>
          </li>
          <li class="services-map__list-item" data-name="Serbia">
            <a href="#serbia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Serbia">Serbia</a>
          </li>
          <li class="services-map__list-item" data-name="Kosovo">
            <a href="#kosovo" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Kosovo">Kosovo</a>
          </li>
          <li class="services-map__list-item" data-name="Macedonia">
            <a href="#macedonia" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Macedonia">North Macedonia</a>
          </li>
          <li class="services-map__list-item" data-name="Albania">
            <a href="#albania" class="services-map__link" data-open-subpage data-subpage-type="country" data-name="Albania">Albania</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>


<div class="services" id="servicesList">
  <div class="container">
    <div class="row">
    <?php
      $services = array('patents', 'trade_marks', 'industrial_design', 'copyright', 'litigation', 'domain_names');
      foreach( $services as $service) :
        $info = get_field($service, $id);
        ?>
      <div class="col-xs-12 col-sm-6 col-lg-2">
        <a href="<?= $info['button_linked_page'] ?>" class="service faded" data-open-subpage>
          <h3 class="service__title"><?= $info['title'] ?></h3>
          <p class="service__text"><?= $info['short_description'] ?></p>
        </a>
      </div>
    <?php endforeach; ?>
    </div>
  </div>
</div>


</div>


<?php
  if ( !is_ajax() ) : ?>
  <div class="content-wrapper-second">
  </div>
  <?php get_footer();
  endif;
?>

</div>