<?php get_header(); ?>
<?php
    while ( have_posts() ) : the_post();

    $cat = get_the_category();
    $cat_id = $cat[0]->term_id;
    $images = get_option('taxonomy_image_plugin'); // get the taxonomy images array
    if( array_key_exists( $cat_id, $images ) ) { // check if term has an image
        $category_image = wp_get_attachment_image_src( $images[$cat_id], 'full' ); // if it does, echo that image
    }
    $category_color = get_term_meta( $cat_id , 'category_color', true );

    $url_exploded = explode('/', parse_url(get_the_permalink(), PHP_URL_PATH));
    $parent_category = 'category-'.$url_exploded[1];
?>

<?php if(($category_image)||($category_color)): ?>
<style>
    <?php if($category_image): ?>
        #post-header {
            background-image: url(<?php echo $category_image[0]; ?>);
            background-size: cover;
        }
            <?php if($category_color): ?>
            #post-content .post-content > p:first-of-type::first-letter {
                color: <?php echo $category_color; ?>;
            }
            #post-content .post-content blockquote {
                color: <?php echo $category_color; ?>;
            }
            #sidebar .related-posts .related-posts-title {
                border-bottom-color: <?php echo $category_color; ?>;
            }
        <?php endif; ?>
    <?php endif; ?>
</style>
<?php endif; ?>

<main role="main" class="l-flex <?php echo $parent_category ?>">
    <div id="post-header">
        <div class="l-container l-flex">
            <div class="post-header-container">
                <?php echo do_shortcode('[breadcrumb]'); ?>
                <h1 class="post-title"><?php the_title(); ?></h1> 
            </div>
        </div>
    </div>
    <div id="content-wrapper" class="l-container l-flex">
        <section id="post-content">
            <article <?php post_class('l-flex'); ?> id="post-<?php the_ID(); ?>">
                <?php
                    $gallery = get_field('gallery_post');
                    $n = count($gallery);
                    if($gallery){
                        if($n > 1){
                ?>
                <div id="post-slider" class="swiper-container">
                    <div class="swiper-wrapper">
                <?php
                            foreach($gallery as $img){
                                $url = $img["image_gallery_post"]['url'];
                                $alt = $img["image_gallery_post"]['alt'];
                                $title = $img["image_gallery_post"]['title'];
                                $width = $img["image_gallery_post"]['width'];
                                $height = $img["image_gallery_post"]['height'];
                                if($width > $height){
                ?>
                        <div class="swiper-slide">
                            <figure class="slide">
                                <img class="slide-img" src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
                            </figure>
                        </div>
                <?php
                                }
                            }
                ?>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-prev"><i class="icon-arrow-left"></i></div>
                    <div class="swiper-button-next"><i class="icon-arrow-right"></i></div>
                </div>
                <?php if(get_field('image_credit')): ?>
                    <div class="img-credits"><?php the_field('image_credit') ?></div>
                <?php endif; ?>
                <?php
                        }
                        else{
                            $url = $gallery[0]["image_gallery_post"]['url'];
                            $alt = $gallery[0]["image_gallery_post"]['alt'];
                            $title = $gallery[0]["image_gallery_post"]['title'];
                            $width = $gallery[0]["image_gallery_post"]['width'];
                            $height = $gallery[0]["image_gallery_post"]['height'];
                            if($width > $height){
                ?>
                    <figure class="post-img">
                        <img class="slide-img" src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
                        <?php if(get_field('image_credit')): ?>
                            <figcaption class="img-credits"><?php the_field('image_credit') ?></figcaption>
                        <?php endif; ?>
                    </figure>
                <?php
                            }
                        }
                    }
                    elseif(has_post_thumbnail()){
                        if(has_post_video()){
                ?>
                <figure class="post-img">
                    <?php the_post_thumbnail(); ?>
                    <?php if(get_field('image_credit')): ?>
                        <figcaption class="img-credits"><?php the_field('image_credit') ?></figcaption>
                    <?php endif; ?>
                </figure>
                <?php
                        }
                        else{
                            $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->id), 'post-thumbnail');
                            if(($image[1] > 600) && ($image[1] > $image[2])):
                ?>
                <figure class="post-img">
                    <?php the_post_thumbnail(); ?>
                    <?php if(get_field('image_credit')): ?>
                        <figcaption class="img-credits"><?php the_field('image_credit') ?></figcaption>
                    <?php endif; ?>
                </figure>
                <?php
                            endif;
                        }
                    }
                ?>
                <div class="post-sharing">
                    <?php echo do_shortcode('[wp_social_sharing social_options="facebook, twitter,linkedin" facebook_text="" twitter_text="" linkedin_text="" icon_order="f,t,l"]'); ?>
                </div>
                <div class="post-data">
                    <!--<span class="post-author"><?php // the_author(); ?></span>-->

                    <span class="post-date"><?php the_date(); ?></span>
                </div>
                <h2 class="post-excerpt">
                    <?php echo get_the_excerpt(); ?>
                </h2>
                <div class="html-template custom-post-content">
    <?php  $new_field_data =  get_field('new_field_data');
    $i = 1;
    $data =array();
    foreach($new_field_data as $f_data){
       if($f_data['content_type'] == 'Slider'){ ?>
             <section class="slider-box owl-carousel slider-video">
                <?php foreach($f_data['slider'] as $f_slider){ ?>
                
                         <?php  if($f_slider['slider_type'] == 'Image'){?>
                                    <div class="item" style="background-image:url('<?php echo $f_slider['slider_image'];?>')"></div>
                            <?php }else if($f_slider['slider_type'] == 'Video'){?>
                                    <div class="item-video"><a class="owl-video" href="<?php echo $f_slider['slide_video'];?>"></a></div>
                            <?php }  ?>
              <?php  } ?>
           </section>
        <?php   }else if ($f_data['content_type'] == 'Media') {

            if($f_data['media'] == 'Image'){?>
                <?php if($f_data['image_width'] == 'full'){ ?>
                     <section class="slider-box owl-carousel slider-video">
                     <div class="item" style="background-image:url('<?php echo $f_data['image'];?>')"></div>
                      </section> 
                <?php }else if($f_data['image_width'] == 'half'){?>
                            <section class="slider-with-content">
                                <div class="SC-img-wrap img-<?php echo $f_data['image_position'];?>">
                                    <div class="img-item" style="background-image:url('<?php echo $f_data['image'];?>')"></div>
                                </div>
                                <p><?php echo $f_data['side_description'];?></p>        
                            </section>
               <?php } ?>
        <?php }else if($f_data['media'] == 'Video'){ ?>
       
          <section class="slider-box owl-carousel slider-video">
            <div class="item-video"><a class="owl-video" href="<?php echo $f_data['video'];?>"></a></div>
          </section> 
         <?php } ?>

        <?php  }else if($f_data['content_type'] == 'Description'){?>
             
    <section class="column-content cont-1col">
                 <div class="cont-col">
                    <p><?php echo  $f_data['colume1']; ?></p>        
                </div>
                <?php if($f_data['description'] == 'Col2' || $f_data['description'] == 'Col3'){?>
                 <div class="cont-col">
                    <p><?php echo  $f_data['colume2']; ?></p>        
                </div>
                <?php } ?>
                <?php if($f_data['description'] == 'Col3'){?>
                 <div class="cont-col">
                    <p><?php echo  $f_data['colume3']; ?></p>        
                </div>
                <?php } ?>
            </section>

             <?php }

         

        $i++;
    }
 
     ?>
   
</div>
                
               <div class="post-tags">
                    <?php the_tags('', ''); ?>
                </div>
                <div class="post-sharing post-sharing-after">
                    <?php echo do_shortcode('[wp_social_sharing social_options="facebook, twitter,linkedin" facebook_text="" twitter_text="" linkedin_text="" icon_order="f,t,l"]'); ?>
                </div>
            </article>
            <?php endwhile; ?>
        </section>
        <?php get_sidebar(); ?>
    </div>
</main>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/owl.carousel.min.js"></script>
<script>

$(document).ready(function(){
    $(".slider-img").owlCarousel({
        items:1,
        nav:true,
        
    });
    $(".slider-video").owlCarousel({
        items:1,
        videoHeight: 420,
        center:true,
        video:true
        //merge:true,
        //loop:true,
        //margin:10,        
        //videoWidth: false, 
        
    });
});
</script>

<?php get_footer(); ?>