<?php
get_template_part('parts/mapa_mieszkan');

$type = $args['data']['type'];
if ($type == "home") {
  $img = get_field('image_home', 'options');
  $svg = get_field('svg_home', 'options');
}

if ($type == "offer") {
  $img = get_field('image_offer', 'options');
  $svg = get_field('svg_offer', 'options');
}
?>

<img src="<?php echo $img ?>" class="main-img-mobile" />

<div class="section_container">
  <div id="budynek-svg" class="budynek-svg<?php if ($type == "offer"): ?> budynek-svg-offer<?php endif; ?>"
    style="background-image: url('<?php echo $img ?>')">
    <div id="svg-area">
      <?php echo $svg ?>
    </div>

    <div class="speech_bubble" id="speech_bubble">
      <div class="speech_bubble__building" id="speech_bubble_building"></div>
      <div class="speech_bubble__levvel"><span id="speech_bubble_levvel"></span></div>
      <div class="speech_bubble__status">
        <div class="speech_bubble__col">
          <div class="speech_bubble__row">
            <strong class="speech_bubble__free" id="speech_bubble_free"></strong>
            <span>Wolne</span>
          </div>
          <div class="speech_bubble__row">
            <strong class="speech_bubble__reserved" id="speech_bubble_reserved"></strong>
            <span>Zarezerwowane</span>
          </div>
          <div class="speech_bubble__row">
            <strong class="speech_bubble__sold" id="speech_bubble_sold"></strong>
            <span>Sprzedane</span>
          </div>
        </div>
      </div>
      <div class="speech_bubble__svg">
        <div class="speech_bubble__svgc" id="speech_bubble__svg-C">
          <svg viewBox="0 0 22 65" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_570_36)">
              <path
                d="M0.567742 0H22V5.55867H20.1548L20.0916 10.698H13.9097V15.2523H14.6903V65H6.95484V60.8662H0.496774V53.0268H0V5.48799H0.567742V0Z" />
            </g>
          </svg>
        </div>
        <div class="speech_bubble__svgd" id="speech_bubble__svg-D">
          <svg viewBox="0 0 67 50" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M66.5175 0H0V7.73481H2.27469V16.3674H32.6039V15.884H47.9064V22.5829H46.8724V50H57.4877V40.4696H61.7613V39.2265H67L66.5175 0Z" />
          </svg>
        </div>
        <div class="speech_bubble__svge" id="speech_bubble__svg-E">
          <svg viewBox="0 0 51 53" xmlns="http://www.w3.org/2000/svg">
            <g clip-path="url(#clip0_570_38)">
              <path
                d="M0 27.8321V53H10.7987V45.641H14.434V44.2555H18.1761V39.3492H21.9182V37.7496H25.7673V32.5251H29.7224V31.1379H33.3576V26.0192H37.2075V24.6338H41.0566V19.6208H44.7978V18.2354H48.5409V14.6088H51V0H32.6101V13.8632H25.3396V20.6872H17.4277V27.8321H0Z" />
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <div class="level-search-row">
    <div class="level-search-col level-search-col1">
      <div id="level-svg" class="budynek-svg" style="display: none">
        <div class="level_legend">
          <dl>
            <dt><span class="free"></span></dt>
            <dd>wolne</dd>
          </dl>
          <dl>
            <dt><span class="reserved"></span></dt>
            <dd>zarezerwowane</dd>
          </dl>
          <dl>
            <dt><span class="sold"></span></dt>
            <dd>sprzedane</dd>
          </dl>
        </div>

        <?php /* <div id="level_close"><i class="fa-solid fa-arrow-up"></i></div */ ?>

        <div id="level-svg-area"></div>
      </div>

      <div id="search_prev"></div>
      <div class="apartment-table"></div>
    </div>

    <div class="level-search-col level-search-col2">
      <?php get_template_part('parts/search'); ?>

      <div id="level-legend" class="levelegend">
        <div class="levelegend__area">
          <div class="levelegend__col levelegend--col1">
            <div class="levelegend__block levelegend__block1">
              Budynek <strong id="levelegend_building">D</strong>
            </div>
            <div class="levelegend__block levelegend__block2">
              <span id="levelegend_level">Piętro 4</span>
            </div>
          </div>
          <div class="levelegend__col levelegend--col2">
            <div class="levelegend__block">
              <span>Wolne</span> <strong id="levelegend_free">10</strong>
            </div>
            <div class="levelegend__block">
              <span>zarezerwowane</span> <strong id="levelegend_reserved">5</strong>
            </div>
            <div class="levelegend__block">
              <span>sprzedane</span> <strong id="levelegend_sold">5</strong>
            </div>
          </div>
        </div>
        <div class="levelegend__image"></div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {
    convertMap();
    calcTable();
    clickSvg();

    const floatingDiv = document.getElementById('speech_bubble');

    document.addEventListener('mousemove', function (e) {
      floatingDiv.style.left = e.clientX + 'px';
      floatingDiv.style.top = e.clientY + 'px';
    });
  });
</script>