<?php


#tour gallery frontend

/* Enqueue Glightbox https://github.com/biati-digital/glightbox */


function get_tour_gallery( $atts ) {

	global $post;
	$photos_query = get_post_meta( $post->ID, 'gallery_data', true );

	$forcount = has_post_thumbnail( $post->ID ) ? 1 : 0;

	if($photos_query) {
		$arrq = $photos_query['image_id'];
		$countas = ' with--'.(sizeof($arrq) + $forcount);
	}

	$content = '<div class="tour-gallery'.$countas.'">';

	$forcount = has_post_thumbnail( $post->ID ) ? 1 : 0;

	if ( $forcount == 1 ) {

		$content .= '<div class="tour_img image--1">';

		$tour_thumbnail_url = get_the_post_thumbnail_url( $post->ID, array( 1900, 1000) );

		$content .= '<a id="tour-image-1" href="'.$tour_thumbnail_url.'" class="glightbox">'.get_the_post_thumbnail( $post->ID, array( 600, 600) ).'</a>';
		$content .= '</div>';
	}

	if($photos_query) {

		$arr = $photos_query['image_id'];

		$counted = sizeof($arr);

		for( $i=0; $i<$counted; $i++ ){

			$add = ( $forcount == 1 ) ? 0 : 1;

			$display = $i>(2+$add) ? ' nodisplay' : '';
			$imcount = $i>(2+$add) ? '' : ' image--'.$i+1+$forcount;

			$content .= '<div class="tour_img'.$imcount.$display.'">';
			$content .= '<a id="tour-image-'.$imcount.'" href="'.wp_get_attachment_image_url( $arr[$i], array( 1900, 1000) ).'" class="glightbox"><img class="gallery-img" src="'.wp_get_attachment_image_url( $arr[$i], array(600, 600) ).'" alt=""/></a>';
			$content .= '</div>';
		}

		if ($counted>3) {

			if ( $forcount == 1 ) $counted = $counted+1; 

				$content .= '<div class="photo-collage__show-all"><button onclick="document.getElementById(&#39;tour-image-1&#39;).click()">Показать все изображения: '.$counted.'</button></div>';
			
		}

		

	}

	$content .= '</div>';
	return $content;

}

add_shortcode( 'tour-gallery', 'get_tour_gallery' );

# tour gallery backend
# https://github.com/demirdoven/image-gallery-for-cpt-or-post-in-wordpress

function property_gallery_add_metabox(){
	add_meta_box(
		'post_custom_gallery',
		'Изображения',
		'property_gallery_metabox_callback',
		'excursion', // Change post type name
		'normal',
		'high'
	);
}
add_action( 'admin_init', 'property_gallery_add_metabox' );

function property_gallery_metabox_callback(){
	wp_nonce_field( basename(__FILE__), 'sample_nonce' );
	global $post;
	$gallery_data = get_post_meta( $post->ID, 'gallery_data', true );
	?>
	<div id="gallery_wrapper">
		<div id="img_box_container">
		<?php 
		if ( isset( $gallery_data['image_url'] ) ){
			for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ ){
			?>
			<div class="gallery_single_row dolu">
			  <div class="gallery_area image_container ">
				<img class="gallery_img_img" src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="55" width="55" onclick="open_media_uploader_image_this(this)"/>
				<input type="hidden"
						 class="meta_image_url"
						 name="gallery[image_url][]"
						 value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>"
				  />
				  <input type="hidden"
						 class="meta_image_id"
						 name="gallery[image_id][]"
						 value="<?php esc_html_e( $gallery_data['image_id'][$i] ); ?>"
				  />
			  </div>
			  <div class="gallery_area">
				<span class="button remove" onclick="remove_img(this)" title="Убрать"/><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width='1em' height='1em' fill='red'><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg></span>
			  </div>
			  <div class="clear" />
			</div> 
			</div>
			<?php
			}
		}
		?>
		</div>
		<div style="display:none" id="master_box">
			<div class="gallery_single_row">
				<div class="gallery_area image_container" onclick="open_media_uploader_image(this)">
					<input class="meta_image_url" value="" type="hidden" name="gallery[image_url][]" />
					<input class="meta_image_id" value="" type="hidden" name="gallery[image_id][]" />
				</div> 
				<div class="gallery_area"> 
					<span class="button remove" onclick="remove_img(this)" title="Убрать"/><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width='1em' height='1em' fill='red'><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg></span>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div id="add_gallery_single_row">
		  <input class="button add" type="button" value="+" onclick="open_media_uploader_image_plus();" title="Добавить фото"/>
		</div>
	</div>
	<?php
}

function property_gallery_styles_scripts(){
    global $post;
    if( 'excursion' != $post->post_type )
        return;
    ?>  
    <style type="text/css">
	.gallery_area {
		float:right;
	}
	.image_container {
		float:left!important;
		width: 100px;
		background: url('https://i.hizliresim.com/dOJ6qL.png');
		height: 100px;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 3px;
		cursor: pointer;
	}
	.image_container img{
		height: 100px;
		width: 100px;
		border-radius: 3px;
	}
	.clear {
		clear:both;
	}
	#gallery_wrapper {
		width: 100%;
		height: auto;
		position: relative;
		display: inline-block;
	}
	#gallery_wrapper input[type=text] {
		width:300px;
	}
	#gallery_wrapper .gallery_single_row {
		float: left;
		display:inline-block;
		width: 100px;
		position: relative;
		margin-right: 8px;
		margin-bottom: 20px;
	}
	.dolu {
		display: inline-block!important;
	}
	#gallery_wrapper label {
		padding:0 6px;
	}
	.button.remove {
		color: #f1f1f1;
		position: absolute;
		border: none;
		top: 5px;
		right: 5px;
		font-size: 1.2em;
		background: white;
    line-height: 1.5em;
    min-height: auto;
    display: flex;
    padding: 2px;
    box-shadow: 1px 1px 3px 0px #535353;
    border-radius: 99px;

	}
	.button.remove:hover {
		padding: 3px;
		box-shadow: 1px 1px 8px 0px #535353;
		top: 4px;
		right: 4px;
	}
	.button.add {
		background: #c3c2c2;
		color: #ffffff;
		border: none;
		box-shadow: none;
		width: 100px;
		height: 100px;
		line-height: 100px;
		font-size: 4em;
	}
	.button.add:hover, .button.add:focus {
		background: #e2e2e2;
		box-shadow: none;
		color: #0f88c1;
		border: none;
	}
    </style>

    <script type="text/javascript">
        function remove_img(value) {
            var parent=jQuery(value).parent().parent();
            parent.remove();
        }
		var media_uploader = null;
		function open_media_uploader_image(obj){
			media_uploader = wp.media({
				frame:    "post", 
				state:    "insert", 
				multiple: false
			});
			media_uploader.on("insert", function(){
				var json = media_uploader.state().get("selection").first().toJSON();
				var image_url = json.url;
				var image_id = json.id;
				var html = '<img class="gallery_img_img" src="'+image_url+'" height="55" width="55" onclick="open_media_uploader_image_this(this)"/>';
				console.log('image_url ' + image_url);
				console.log('id ' + image_id);
				jQuery(obj).append(html);
				jQuery(obj).find('.meta_image_url').val(image_url);
				jQuery(obj).find('.meta_image_id').val(image_id);
			});
			media_uploader.open();
		}
		function open_media_uploader_image_this(obj){
			media_uploader = wp.media({
				frame:    "post", 
				state:    "insert", 
				multiple: false
			});
			media_uploader.on("insert", function(){
				var json = media_uploader.state().get("selection").first().toJSON();
				var image_url = json.url;
				var image_id = json.id;
				console.log('image_url ' + image_url);
				console.log('id ' + image_id);
				jQuery(obj).attr('src',image_url);
				jQuery(obj).siblings('.meta_image_url').val(image_url);
				jQuery(obj).siblings('.meta_image_id').val(image_id);
			});
			media_uploader.open();
		}

		function open_media_uploader_image_plus(){
			media_uploader = wp.media({
				frame:    "post", 
				state:    "insert", 
				multiple: true 
			});
			media_uploader.on("insert", function(){

				var length = media_uploader.state().get("selection").length;
				var images = media_uploader.state().get("selection").models;

				for(var i = 0; i < length; i++){
					var image_url = images[i].changed.url;
					var image_id = images[i].id;
					var box = jQuery('#master_box').html();
					jQuery(box).appendTo('#img_box_container');
					var element = jQuery('#img_box_container .gallery_single_row:last-child').find('.image_container');
					var html = '<img class="gallery_img_img" src="'+image_url+'" height="55" width="55" onclick="open_media_uploader_image_this(this)"/>';
					element.append(html);
					element.find('.meta_image_url').val(image_url);
					element.find('.meta_image_id').val(image_id);
					//console.log('image_url ' + image_url);
					//console.log('image_id ' + image_id);
				//console.log('images ' +  images[i].sizes.thumbnail.url );
					//console.log('images ' + JSON.stringify(images[i]) );
					//console.log(Object.entries(images[i]));
	

				}
			});
			media_uploader.open();
		}
		jQuery(function() {
            jQuery("#img_box_container").sortable(); // Activate jQuery UI sortable feature
        });
    </script>
    <?php
}
add_action( 'admin_head-post.php', 'property_gallery_styles_scripts' );
add_action( 'admin_head-post-new.php', 'property_gallery_styles_scripts' );

function property_gallery_save( $post_id ) {
		if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
			return;
		}
		$is_autosave = wp_is_post_autosave( $post_id );
		$is_revision = wp_is_post_revision( $post_id );
		$is_valid_nonce = ( isset( $_POST[ 'sample_nonce' ] ) && wp_verify_nonce( $_POST[ 'sample_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
		
		if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
				return;
		}
		if ( ! current_user_can( 'edit_post', $post_id ) ) {
			return;
		}

		// Correct post type
		if ( 'excursion' != $_POST['post_type'] ) // here you can set the post type name
			return;
	 
		if ( $_POST['gallery'] ){
			
			// Build array for saving post meta
			$gallery_data = array();
			for ($i = 0; $i < count( $_POST['gallery']['image_url'] ); $i++ ){
				if ( '' != $_POST['gallery']['image_url'][$i]){
					$gallery_data['image_url'][]  = $_POST['gallery']['image_url'][ $i ];
				}
			}
			for ($i = 0; $i < count( $_POST['gallery']['image_id'] ); $i++ ){
				if ( '' != $_POST['gallery']['image_id'][$i]){
					$gallery_data['image_id'][]  = $_POST['gallery']['image_id'][ $i ];
				}
			}
	 
			if ( $gallery_data ) 
				update_post_meta( $post_id, 'gallery_data', $gallery_data );
			else 
				delete_post_meta( $post_id, 'gallery_data' );
		} 
		// Nothing received, all fields are empty, delete option
		else{
			delete_post_meta( $post_id, 'gallery_data' );
		}
}
add_action( 'save_post', 'property_gallery_save' );