<?php

/**
 * "BpSzazOtven" megvalósító sablon fájl hagyományos változata
 */

global $post;
if (post_password_required($post)) :
  echo get_the_password_form();
  die();
endif;
$enable_gallery = true;
$current_user = wp_get_current_user();
function word_count($string, $limit)
{
  $words = explode(' ', $string);
  return implode(' ', array_slice($words, 0, $limit));
}
$image = (has_post_thumbnail()) ?
  wp_get_attachment_url(get_post_thumbnail_id($post_id = '')) :
  get_template_directory_uri() . '/library/images/bg/AS_BP_Margitsziget_20160119_0298.jpg';
get_header(); ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,400&display=swap" rel="stylesheet">
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/library/fonts/CambayDevanagari-Bold.eot" as="font" crossorigin="anonymous" />
<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/library/fonts/CambayDevanagari-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bpszo.css?v62" type="text/css" media="all">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/flickity.css" type="text/css" media="all">
<script script src="<?php echo get_template_directory_uri(); ?>/library/js/flickity.pkgd.js"></script>

<div id="bpszo_header_sm" class="hidden-md hidden-lg hidden-xl">
  <img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/budapest_150_fejlec.png" alt="Budapest 150">
</div>
<div id="bpszo_header" class="hidden-xs hidden-sm">
  <div id="bp150logo_wrap"></div>
  <div id="bp150logo"><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/bpszo_logo.svg" alt="" class="src"></div>
  <div id="szoa_wrap">
    <div id="szoa_bg"></div>
    <div class="szoa_particles_left absolute" style=""><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/prtcls_left.svg"></div>
    <div class="szoa_particles_right absolute" style=""><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/prtcls_right.svg"></div>

    <div class="szoa_shape_circle_big szoa_teal_stripes absolute" style="top:435px;left:200px;transform:rotate(128deg)"></div>
    <div class="szoa_shape_circle_big szoa_white_stripes absolute" style="top:150px;right:30%;transform:rotate(128deg)"></div>
    <div class="szoa_shape_circle_big absolute" style="top:430px;left:205px;background-color:var(--purple)"></div>
    <div class="szoa_cimer absolute" style="">
      <img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/cimer.svg" alt="">
      <div class="szoa_title" style="">
        <h1>Boldog<br>Szülinapot,<br>Budapest!</h1>
      </div>
    </div>


    <div class="szoa_torta absolute" style="top: 90px; right: 17%;z-index:0;">
      <div class="szoa_shape_circle_big szoa_red_stripes absolute ascale adelay2" style="transform: rotate(128deg);top: -3px;right: -18px;z-index: 0;position: absolute;"></div>
      <div class="szoa_shape_circle_big absolute ascale adelay1" style="top: -9px;right: -18px;background-color:var(--lightteal);z-index: 0;position: absolute;"></div>
      <img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/tortatorta.png" class="awiggle1" style="z-index: 3; position: absolute;top: 0;">

    </div>
    <div class="szoa_szalag1 absolute" style="top:0; left: 0;"><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/szalag1.svg"></div>
    <div class="szoa_szalag2 absolute" style="top:0; left: 2vw;"><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/szalag2.svg"></div>
    <div class="szoa_szalag3 absolute" style="top:0; left: 4vw;"><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/szalag3.svg"></div>
    <div class="szoa_szalag4 absolute" style="top:0; left: 6vw;"><img src="<?php echo get_template_directory_uri(); ?>/library/images/bpszo/szalag4.svg"></div>


  </div>
</div>

<?php if (!empty(get_field("fejlec_alatti_szoveg_a_bovitett"))) : ?>
  <div class="bpszo_belowheadrow row">
    <div class="container">
      <div class="bpszo_belowheadcont heightcut visible-xs visible-sm">
        <?php echo get_field("fejlec_alatti_szoveg_a"); ?>
        <?php if (!empty(get_field("fejlec_alatti_szoveg_a_bovitett"))) :
          echo get_field("fejlec_alatti_szoveg_a_bovitett");
        endif; ?>
        <?php echo get_field("fejlec_alatti_szoveg_b"); ?>
        <?php if (!empty(get_field("fejlec_alatti_szoveg_b_bovitett"))) :
          echo get_field("fejlec_alatti_szoveg_b_bovitett");
        endif; ?>
      </div>
      <div class="col-md-12 readmore-xs-container hidden-md hidden-lg hidden-xl">
        <div class="visible-xs visible-sm block-xs-readmore block-xs-readmore-closed"><span style="top: 4px;left: 1px;" class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></div>
      </div>
      <div class="bpszo_belowheadcont visible-md visible-lg visible-xl">
        <div class="col-md-6 whitebg">
          <?php echo get_field("fejlec_alatti_szoveg_a"); ?>
        </div>
        <div class="col-md-6 whitebg">
          <?php echo get_field("fejlec_alatti_szoveg_b"); ?>
        </div>

      </div>
    </div>
  </div>
<?php endif; ?>

<?php // if (user_can($current_user, 'administrator') || user_can($current_user, 'editor')) { 
?>
<div class="bpszo_bottomrow_mitkivansz row">
  <div class="container">
    <div class="col-md-12 thumb mitkivansz hidden-sm hidden-xs">
      <a href="<?php echo get_field('also_blokk_kep_url'); ?>">
        <img src="<?php echo get_field('also_blokk_kep'); ?>" alt="">
        <button class="btn btn-lg btn-yellow btn-kivanok"><?php echo get_field('also_blokk_kep_szoveg'); ?></button>
      </a>
    </div>
    <div class="col-md-12 thumb mitkivansz hidden-md hidden-lg hidden-xl">
      <a href="<?php echo get_field('also_blokk_kep_url'); ?>">
        <img src="<?php echo get_field('also_blokk_kep_mobil'); ?>" alt="">
      </a>
    </div>
  </div>
</div>
<?php // } 
?>


<div class="bpszo_youtube row">
  <div class="container">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" width="560" height="315" src="https://www.youtube.com/embed/W2cgdD0PH88" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>

</div>


<div class="bpszo_midrow row" data-filterstyle="default">
  <div id="content">

    <div class="">
      <?php

      $eselyid = 874;
      $get_esely_cat = get_category($eselyid);
      $esely_args = array('post_type' => 'budapest150', 'orderby' => 'sorrend', 'order' => 'ASC');
      $esely_subcats = get_categories($esely_args);
      $eventdates = array(
        'day1' => array(
          'name' => 'Péntek',
          'slug' => '2022-11-04'
        ),
        'day2' => array(
          'name' => 'Szombat',
          'slug' => '2022-11-05'
        ),
        'day3' => array(
          'name' => 'Vasárnap',
          'slug' => '2022-11-06'
        )
      );


      function count_catposts($get_cat_count)
      {
        $total = 0;
        $ccats = get_categories(array('parent' => $get_cat_count, 'post_type' => 'budapest150'));
        foreach ($ccats as $ccat) {
          $total += $ccat->category_count;
        }
        return $total;
      }


      $bp150_args = [
        'post_type'           => 'budapest150',
        'post_status'         => 'publish',
        'password'            => '',
        'posts_per_page'      => 300,
        'offset'        => 0,
        'nopaging'  => true,
        'meta_query' => array(
          'relation' => 'OR',
          array(
            'key' => 'sorrend',
            'compare' => 'EXISTS', // works!
          ),
          array(
            'key' => 'sorrend',
            'compare' => 'NOT EXISTS', // works!
          ),

        ),
        'orderby'      => 'meta_value',
        //    'order_by'            => 'date',
        'order'               => 'ASC',
      ];
      $qry_bp150posts = new WP_Query($bp150_args);


      ?>

      <div id="tiles">
        <div id="bp150_filter" class="button-group filter-button-group">
          <div class="container filterlogo">
            <h2>Programok</h2>
          </div>
        </div>

        <div class="container grid-wrap">
          <div id="grid-content" class="grid-content">
            <?php

            while ($qry_bp150posts->have_posts()) : $qry_bp150posts->the_post();
              $articleImage = (has_post_thumbnail()) ? wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail')[0] : false;
              $category       = new stdClass();
              $category->slug = '';
              $category->name = '';
              $categories     = wp_get_post_terms($post->ID, 'category');
              if (!is_wp_error($categories) && count($categories) > 0) {
                /* @var \WP_Term $category */
                $category = array_values($categories)[0];
              }
              get_field('date');
            ?>
              <div class="bpszogrid-item grid-item makebutton <?php echo the_field('date'); ?> <?php echo the_field('tipus'); ?>" id="item<?php echo $post->ID; ?>" data-postid="<?php echo $post->ID; ?>" data-eventdate="<?php echo the_field('date'); ?>">
                <div class="bpszogrid-content">
                  <?php if ($articleImage) : ?>
                    <div class="thumb">
                      <img class="leadImage" src="<?php the_post_thumbnail_url('bones-downscaled-780');; ?>" alt="<?php echo get_the_title(); ?>">
                    </div>
                  <?php endif; ?>
                  <div class="item-header">
                    <h4 class="title">
                      <?php the_title(); ?>
                      <?php echo '<h6>' . get_field('alcim') . '</h6>'; ?>
                      <h6><?php echo get_field('date'); ?> <?php echo get_field('time_from'); ?></h6>
                    </h4>
                  </div>
                </div>
              </div>
            <?php
            endwhile;
            wp_reset_query();
            ?>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>



<!-- Button trigger modal -->
<div class="modal fade" id="modalarticle" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <button type="button" class="btn btn-lg btn-primary btn-enbp visible-xs" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
      </button>
      <div class="modal-body" id="fullpost">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lg btn-primary btn-enbp" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
        </button>
      </div>
    </div>
  </div>
</div>

<div id="scrolltop" style="display:none;position: fixed;bottom: 3%;right: 2%;background: rgb(21 52 106);color: rgb(255 255 255);border-radius: 50%;padding: 8px 12px;cursor: pointer;">
  <span class="glyphicon glyphicon-menu-up" aria-hidden="true">
  </span>
</div>




<div class="modal fade modal_block_a" id="modal_block_a" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn btn-lg btn-primary fixed-left" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
        </button>
        <h2 class="modal-block-heading"><?php echo get_field("blokk_a_fejlec"); ?></h2>

      </div>
      <div class="modal-body">
        <?php echo get_field("blokk_a_hosszu"); ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade modal_block_b" id="modal_block_b" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn btn-lg btn-primary fixed-left" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
        </button>
        <h2 class="modal-block-heading"><?php echo get_field("blokk_b_fejlec"); ?></h2>

      </div>
      <div class="modal-body">
        <?php echo get_field("blokk_b_hosszu"); ?>
        <div class="modal-footer">
          <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade modal_block_c" id="modal_block_c" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn btn-lg btn-primary fixed-left" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
        </button>
        <h2 class="modal-block-heading"><?php echo get_field("blokk_c_fejlec"); ?></h2>

      </div>
      <div class="modal-body">
        <?php echo get_field("blokk_c_hosszu"); ?>
        <div class="modal-footer">
          <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Vissza"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"> </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<?php get_footer(); ?>
<script>
  jQuery(document).ready(function($) {
    <?php if (!empty(get_field("fejlec_alatti_szoveg_a_bovitett")) || !empty(get_field("fejlec_alatti_szoveg_b_bovitett"))) : ?>
      $('.block-ab-readmore').on('click touchend', function() {
        if ($(this).hasClass('block-ab-readmore-closed')) {
          $('.block-a-readmore, .block-b-readmore').fadeIn();
          $(this).removeClass('block-ab-readmore-closed');
          $(this).addClass('block-ab-readmore-opened');
        } else {
          $('.block-a-readmore, .block-b-readmore').fadeOut();
          $(this).removeClass('block-ab-readmore-opened');
          $(this).addClass('block-ab-readmore-closed');
        }
      });
    <?php endif; ?>

    $('.block-xs-readmore').on('click touchend', function() {
      if ($('.bpszo_belowheadcont').hasClass('heightcut')) {
        $('.bpszo_belowheadcont').removeClass('heightcut');
        $('.bpszo_belowheadcont').addClass('heightcut-off');
        $(this).removeClass('block-xs-readmore-closed');
        $(this).addClass('block-xs-readmore-opened');
      } else {
        $("html, body").animate({
          scrollTop: $('html').offset().top
        }, 0);
        $('.bpszo_belowheadcont').removeClass('heightcut-off');
        $('.bpszo_belowheadcont').addClass('heightcut');
        $(this).removeClass('block-xs-readmore-opened');
        $(this).addClass('block-xs-readmore-closed');
      }
    });

    function resizeGridItem(item) {
      grid = document.getElementsByClassName("grid-content")[0];
      rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows'));
      rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
      rowSpan = Math.ceil((item.querySelector('.bpszogrid-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
      item.style.gridRowEnd = "span " + rowSpan;
    }

    function resizeAllGridItems() {
      allItems = document.getElementsByClassName("bpszogrid-item");
      for (x = 0; x < allItems.length; x++) {
        resizeGridItem(allItems[x]);
      }
    }

    function resizeInstance(instance) {
      item = instance.elements[0];
      resizeGridItem(item);
    }

    window.onload = resizeAllGridItems();
    window.addEventListener("resize", resizeAllGridItems);

    allItems = document.getElementsByClassName("bpszogrid-item");
    for (x = 0; x < allItems.length; x++) {
      imagesLoaded(allItems[x], resizeInstance);
    }

    /*
    $grid = $("#grid-content");
    $grid.isotope({
      masonry: {
        columnWidth: 360,
        gutter: 25,
        isFitWidth: true
      },
      itemSelector: ".grid-item",
      transitionDuration: "0.2s"
    });
    */
    $('.mindcat').addClass('active');

    $('.cat_item img, .cat_item span, .showall span').on('click', function() {

      $('.filter-button-group').hide();
      var mainfilterValue = $(this).attr('data-mainfilter');
      window.history.replaceState(null, null, mainfilterValue.substring(1, mainfilterValue.length));
      sessionStorage.setItem("mainfilter", mainfilterValue.substring(1, mainfilterValue.length));
      $('.bpszo_midrow').attr({
        "data-filterstyle": sessionStorage.getItem('mainfilter')
      });
      getAll = $(mainfilterValue + ' .mindcat').attr('data-filter');
      /*
      $.when($('#cats').fadeOut(200)).done(function() {
          
                  if (!getAll) {
                    $grid.isotope({
                      filter: '*',
                      sortBy: 'random'
                    });
                    $.when($('#mindFilter').fadeIn(200)).done(function() {
                      $("html, body").animate({
                        scrollTop: $('#content').offset().top - 60
                      }, 200);
                    });
                  } else {
                    $grid.isotope({
                      filter: getAll
                    });
          
          $.when($(mainfilterValue).fadeIn(200)).done(function() {
            $("html, body").animate({
              scrollTop: $('#content').offset().top - 60
            }, 200);
          });
        }
        */

      $(window).bind('scroll', function() {
        if ($(window).scrollTop() >= $('#grid-content').offset().top + 560 - window.innerHeight) {
          $('#scrolltop').fadeIn();
        } else {
          $('#scrolltop').fadeOut();
        }
      });

    }); // when

  }); // click funkcio
  $('.filter-button-group').on('click', 'div.btn, span', function() {
    var filterValue = $(this).attr('data-filter');
    if (!$(this).hasClass("mindcat") && !$(this).hasClass("visszacat")) {
      window.history.replaceState(null, null, "?szures=" + filterValue.substring(1, filterValue.length));
    }
    /*
    $grid.isotope({
      filter: filterValue
    });
    */
  });
  $('.mindcat').on('click', function() {
    window.history.replaceState(null, null, '?');
  });

  $('#scrolltop').on('click', function() {
    $("html, body").animate({
      scrollTop: $('#content').offset().top - 60
    }, 200);
  });
  var qsRegex;
  var $quicksearch = $('#quicksearch').keyup(debounce(function() {
    $('.filter-button-group .btn').removeClass('active');
    $('.mindcat').addClass('active');
    qsRegex = new RegExp($quicksearch.val(), 'gi');
    window.history.replaceState(null, null, '?kereses=' + $quicksearch.val());
    /*
    $grid.isotope({
      filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
        return searchResult;

      }
    });
    */
  }));


  $('.bpszogrid-item, .grid-item').on('click', function() {
    var post_maincat = sessionStorage.getItem('mainfilter');
    var post_id = $(this).data('postid');
    jQuery.ajax({
      type: 'POST',
      url: ajaxurl,
      dataType: 'html',
      data: {
        'action': 'load_post_content',
        'the_ID': post_id,
        'get_title': true
      },
      beforeSend: function() {
        var fokat = $('.bpszo_midrow').attr('data-filterstyle');
        window.history.replaceState(null, null, '?esemeny=' + post_id);
        $('#modalarticle').attr({
          'data-modal-maincat': post_maincat
        }).modal('toggle');
        $('#fullpost').html('<div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>');
      },
      success: function(response) {

        var cikk = response;
        var bpszoimg = $($.parseHTML(cikk)).filter('.bpszo-cikk-img');
        var bpszocontent = $($.parseHTML(cikk)).filter('.bpszo-cikk-content');
        $('.modal-head').html(bpszoimg);
        $('.modal-body').html(bpszocontent);

        // console.log('ajax success state');
      },
      error: function(xhr) {
        console.log(xhr);
        $('#fullpost').html('<div class="alert alert-info"><h3>Váratlan hiba történt.</h3><p>Kérjük, frissítse az oldalt, vagy próbálja később!</p></div>');
      }
    });
  });

  $(document.body).on('hidden.bs.modal', function() {
    $('.modal-head, .modal-body').html('');
    window.history.replaceState(null, null, '?');
    /*
    $grid.isotope();
    */
  });
  /*
      $grid.isotope();
    });
    */

  function debounce(fn, threshold) {
    var timeout;
    threshold = threshold || 100;
    return function debounced() {
      clearTimeout(timeout);
      var args = arguments;
      var _this = this;

      function delayed() {
        fn.apply(_this, args);
      }
      timeout = setTimeout(delayed, threshold);
    };
  }

  $('.filter-button-group .btn').on('click', function() {
    $('.filter-button-group .btn').removeClass('active');
    $(this).addClass('active');
    $('#quicksearch').val('');
  });
  <?php if (isset($_GET['szures'])) { ?>
    jQuery(window).load(function() {
      $('.btn[data-filter=".<?php echo $_GET['szures']; ?>"]').trigger('click');
    });
  <?php } ?>
  <?php if (isset($_GET['esemeny'])) { ?>
    jQuery(window).load(function() {
      $('.grid-item[data-postid="<?php echo $_GET['esemeny']; ?>"]').trigger('click');
    });
  <?php } ?>
  <?php if (isset($_GET['kereses'])) { ?>
    jQuery(window).ready(function() {
      $('#quicksearch').val('<?php echo $_GET['kereses']; ?>');
    })
    jQuery(window).load(function() {
      scrollTop: $('#grid-content').offset().top - 60
      $quicksearch = $('#quicksearch').val();
      var qsRegex;
      qsRegex = new RegExp('<?php echo $_GET['kereses']; ?>', 'gi');
      /*
            $grid.isotope({
              filter: function() {
                var $this = $(this);
                var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
                return searchResult;
              }
            });
      */
    });
  <?php } ?>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js" integrity="sha512-Zq2BOxyhvnRFXu0+WE6ojpZLOU2jdnqbrM1hmVdGzyeCa1DgM3X5Q4A/Is9xA1IkbUeDd7755dNNI/PzSf2Pew==" crossorigin="anonymous">
</script>