<?php
/*
Template Name: Notice
*/
get_header();
?>

<?php
    // Start the loop.
    while ( have_posts() ) : the_post();
?>

    <main id="main">
        <section></section>

        <section class="pb-0">

            <div class="container gallery" data-aos="fade-up">

                <div class="section-title">
                    <h2 class="title-text"><?php the_title(); ?></h2>
                </div>

                <?php
                    // check for rows (parent repeater)
                    if( have_rows('notice_list') ): ?>
                        
                        <?php 
                            // loop through rows (parent repeater)
                            while( have_rows('notice_list') ): the_row(); 

                            $notice_title = get_sub_field('notice_title');
                        ?>  
                        
                            <div class="cars-brand">
                                <h4><?php echo $notice_title; ?></h4>
                            </div>
                                
                            <?php 
                                // check for rows (sub repeater)
                                if( have_rows('notice_image_list') ): ?>
                                    
                                    <div class="row">
                                    
                                        <?php 

                                            // loop through rows (sub repeater)
                                            while( have_rows('notice_image_list') ): the_row();

                                            $notice_item_title = get_sub_field('notice_item_title');
                                            $notice_image = get_sub_field('notice_image');
                                        ?>
                                            
                                            <div class="col-sm-4">                                                
                                                <div class="car-box">
                                                    <p class="noticeTitle"><?php echo $notice_item_title; ?></p>
                                                    <div class="image-box">
                                                    <a href="<?php echo $notice_image; ?>" class="big"><img src="<?php echo $notice_image; ?>"></a>                                                
                                                    </div>                                            
                                                </div>
                                            </div>

                                        <?php endwhile; ?>

                                    </div>
                                
                            <?php endif; //if( get_sub_field('items') ): ?>                                

                        <?php endwhile; // while( has_sub_field('to-do_lists') ): ?>
                    
                <?php endif; // if( get_field('to-do_lists') ): ?>

            </div>

        </section>

    </main>

<?php
    // End of the loop.
    endwhile;
?>

<?php
get_footer();
?>

<link href="<?php bloginfo('template_url'); ?>/assets/css/simplelightbox.min.css" rel="stylesheet" type="text/css">
<link href="<?php bloginfo('template_url'); ?>/assets/css/demo.css" rel="stylesheet" type="text/css">

<script src="<?php bloginfo('template_url'); ?>/assets/js/jquery-3.4.1.js"></script>
<!-- For Gallery-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/assets/js/simple-lightbox.js"></script>
<!-- For Gallery-->

<script>
	$(function(){
		var $gallery = $('.gallery a').simpleLightbox();

		$gallery.on('show.simplelightbox', function(){
			console.log('Requested for showing');
		})
		.on('shown.simplelightbox', function(){
			console.log('Shown');
		})
		.on('close.simplelightbox', function(){
			console.log('Requested for closing');
		})
		.on('closed.simplelightbox', function(){
			console.log('Closed');
		})
		.on('change.simplelightbox', function(){
			console.log('Requested for change');
		})
		.on('next.simplelightbox', function(){
			console.log('Requested for next');
		})
		.on('prev.simplelightbox', function(){
			console.log('Requested for prev');
		})
		.on('nextImageLoaded.simplelightbox', function(){
			console.log('Next image loaded');
		})
		.on('prevImageLoaded.simplelightbox', function(){
			console.log('Prev image loaded');
		})
		.on('changed.simplelightbox', function(){
			console.log('Image changed');
		})
		.on('nextDone.simplelightbox', function(){
			console.log('Image changed to next');
		})
		.on('prevDone.simplelightbox', function(){
			console.log('Image changed to prev');
		})
		.on('error.simplelightbox', function(e){
			console.log('No image found, go to the next/prev');
			console.log(e);
		});
	});
</script>