<?php
/**
 * Template Name: Commercial Properties Page Template
 * Template Post Type: page
 *
 * @package thehoot
 */

get_header(); ?>

  <div id="primary">
    <div class="row">
      <div class="col-12 col-md-8">

    <?php
  $property_page_title = get_field('property_page_title');
    $property_page_content = get_field('property_page_content');
    if ($property_page_title) : ?>

      <h1><?php echo esc_html($property_page_title); ?></h1>

      <?php endif; ?>
        <?php
if ($property_page_content) : ?>
          <?php echo wp_kses_post($property_page_content); ?>
            <?php endif; ?>

              <div class="row">
                <?php

$args = array(
  'post_type'=>'property-listing',
  'posts_per_page' => -1,
  'tax_query' => array(
        array(
            'taxonomy' => 'property_type',
            'field' => 'slug',
            'terms' => 'commercial',
        )
    )
);

$loop = new WP_Query($args);
if ($loop->have_posts()) {
    while ($loop->have_posts()) : $loop->the_post();

    $property_owner = get_field('property_owner');
    $property_image = get_field('property_image');
    $property_rate = get_field('property_rate');
    $property_description = get_field('property_description');
    $property_address = get_field('property_address');
    $property_link = get_field('property_link'); ?>

                  <div class="col-12 col-xl-6 mt-4">
                    <div class="property-listing">

                      <h2><?php echo(get_the_title()); ?></h2>

                      <p class="cs-entry__title-line"><span><?php echo esc_html($property_owner); ?></span></p>

                      <p>
                        <?php echo esc_html($property_location); ?>
                      </p>

                      <p><strong><?php echo esc_html($property_rate); ?></strong></p>

                      <?php echo wp_kses_post(mb_strimwidth($property_description, 0, 50, )); ?>...

                      <div class="modal fade" id="ex<?php the_ID(); ?>" tabindex="-1" aria-labelledby="ex<?php the_ID(); ?>ModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                          <div class="modal-content">
                            <div class="modal-header">
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                              <h2><?php echo  esc_html(get_the_title()); ?></h2>

                              <p>
                                <?php echo esc_html($property_name); ?>
                              </p>

                              <p>
                                <?php echo esc_html($property_address); ?>
                              </p>

                              <p>
                                <?php echo esc_html($property_owner); ?>
                              </p>

                              <p><strong><?php echo esc_html($property_rate); ?></strong></p>

                              <img class="mb-3 img-fluid" src="<?php echo $property_image['url']; ?>" alt="<?php echo $property_image['alt']; ?>"/>

                              <?php echo wp_kses_post($property_description); ?>

                                <?php if ($property_link) : ?>

                                  <a class="btn btn-primary" href="<?php echo $property_link['url']; ?>" target="<?php echo $property_link['target']; ?>">

                                    <?php echo $property_link['title']; ?>

                                  </a>

                                  <?php endif ; ?>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#ex<?php the_ID(); ?>">
                          See all details
                      </button>

                        <p class="small">Posted -

                          <?php echo get_the_date('H:i - d/m/Y'); ?>

                        </p>
                    </div>
                  </div>

                  <?php  endwhile;
}
     wp_reset_postdata();
     ?>
              </div>
            </div>

            <div class="col-12 col-md-4">
    <section>
      <div class="showcase">

        <?php

  $post_object = get_field('showcase_a_property');

  if( $post_object ):

  	// override $post
          global $post;
  	$post = $post_object;
  	setup_postdata( $post );

    $showcase_property_owner = get_field('property_owner');
    $showcase_property_image = get_field('property_image');
    $showcase_property_rate = get_field('property_rate');
    $showcase_property_description = get_field('property_description');
    $showcase_property_address = get_field('property_address');
    $showcase_property_link = get_field('property_link');

  	?>
      <div>
        <h3><?php the_title(); ?></h3>
        <p>
          <?php echo esc_html($showcase_property_owner);?>
        </p>

        <p>
          <?php echo esc_html($showcase_property_address);?>
        </p>

       <p><strong><?php echo esc_html($showcase_property_rate);?></strong></p>

        <img class="mb-3 img-fluid" src="<?php echo $showcase_property_image['url']; ?>" alt="<?php echo $showcase_property_image['alt']; ?>"/>

        <?php echo wp_kses_post($showcase_property_description);?>

            <a class="btn btn-black" href="<?php echo $showcase_property_link['url']; ?>" target="<?php echo $showcase_showcase_property_link['target']; ?>">

              <?php echo $showcase_property_link['title']; ?>

            </a>


      </div>
      <?php wp_reset_postdata(); ?>
  <?php endif; ?>

      </div>
    </section>
  </div>
</div>
</div>

  <?php get_footer(); ?>

  <style media="screen">

    .modal-dialog{
    overflow-y: initial !important
    }

    .btn-primary {
      background-color: #f4dc31;
      margin-bottom: 15px;
    }

    .btn-black {
        background-color: #000;
        color: #fff !important;;

    }

      .property-listing {
      border: 1px solid #ededed;
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 10px;
    }

    .property-listing h2 {
      font-size: 25px;
    }

    .showcase {
      background: #f4dc31;
      border-radius: 20px;
      color: #000;
      padding: 15px;
      z-index: 0;
      position: relative;
      }

    .showcase a {
      color: #000;
    }

    .showcase h3 {
      font-size: 20px;
    }

    .apply-link {
      background: #000;
      color: #fff;
      display: block;
      padding: 10px;
      font-weight: 900;
      margin-bottom: 15px;
    }

    .apply-link:hover {
      color: #9d9d9d;
    }

    .cs-entry__title-line span {
      font-weight: 900;
    }

    @media(max-width: 768px) {

      .modal-link {
        margin-bottom: 90px;
        display: block;
      }
    }
  </style>
  <script type="text/javascript">
  jQuery(window).on('shown.bs.modal', function() {
  jQuery('.showcase').css({'position': 'relative',
  'z-index': '-1'});
  });
  </script>
