<?php
 

//add_action( 'admin_init', 'add_gallery_image_post' );
//add_action( 'admin_head-post.php', 'gallery_image_print_scripts' );
//add_action( 'admin_head-post-new.php', 'gallery_image_print_scripts' );
//add_action( 'save_post', 'gallery_image_updates', 10, 2 );
function add_gallery_image_post() {
    add_meta_box(
        'post_gallery', 
        'Gallery Image Uploader',
        'gallery_screenshots_image',
        'post',
        'normal',
        'default'
    );
}
/**
 * Print the Meta Box content
 */
function gallery_screenshots_image() {
    global $post, $wpdb, $gets_data;
    $gallery_data = get_post_meta( $post->ID, 'gallery_data', true );  
	$images_GP			= get_post_meta( $post->ID, 'wp_images_GP', true );
	?>
	
	<style>p.flip {margin: 0px;padding: 5px;text-align: center;background: #2271b1;border: solid 1px #fff;color:white;}div.panel {width: 100%;height: auto;display: none;}</style>
	
	<noscript>
    <center>
	<?php if($images_GP){ ?>
	<p><strong style="text-transform:uppercase!important;color:#2271b1">Here for Default Screenshoots Poster from Googleplay, you can't add or remove this<br> but you can copy this link image url for you insert</strong></p> 
	<?php } else { ?>
	<p><strong style="text-transform:uppercase!important;color:#2271b1">Add your link image url here</strong></p> 
	<?php } ?>	
	</center>  

	<?php if($images_GP){?>
	  
	<style>
	* {padding: 0;margin: 0;box-sizing: border-box;}.grid_gallery {display: grid;grid-gap: 8px;grid-template-columns: repeat(2, 1fr);grid-auto-rows: 30vw;list-style: none;}.grid_gallery li:nth-child(30n + 9) {grid-column: 1 / -1;grid-row: span 2;}.grid_gallery figure, .grid_gallery img {width: 100%;height: 100%;}.grid_gallery img {-o-object-fit: cover;object-fit: cover;background: #f5f3f4;box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);}@media (min-width: 850px) {.grid_gallery {grid-gap: 24px;grid-template-columns: repeat(5, 1fr);grid-auto-rows: 12vw;}.grid_gallery li {--row-step: calc(4 * var(--n));}.grid_gallery li:nth-child(30n + 1) {grid-column: 1;grid-row: calc(1 + var(--row-step)) / span 2;}.grid_gallery li:nth-child(30n + 2) {grid-column: 2 / span 2;grid-row: calc(1 + var(--row-step)) / span 2;}.grid_gallery li:nth-child(30n + 3) {grid-column: 4;grid-row: calc(1 + var(--row-step));}.grid_gallery li:nth-child(30n + 4) {grid-column: 5;grid-row: calc(1 + var(--row-step));}.grid_gallery li:nth-child(30n + 5) {grid-column: 4;grid-row: calc(2 + var(--row-step));}.grid_gallery li:nth-child(30n + 6) {grid-column: 5;grid-row: calc(2 + var(--row-step)) / span 2;}.grid_gallery li:nth-child(30n + 7) {grid-column: 2;grid-row: calc(3 + var(--row-step));}.grid_gallery li:nth-child(30n + 8) {grid-column: 1;grid-row: calc(3 + var(--row-step));}.grid_gallery li:nth-child(30n + 9) {grid-column: 3 / span 2;grid-row: calc(3 + var(--row-step)) / span 2;}.grid_gallery li:nth-child(30n + 10) {grid-column: 1 / span 2;grid-row: calc(4 + var(--row-step));}.grid_gallery li:nth-child(30n + 30) {grid-column: 5;grid-row: calc(4 + var(--row-step));}}
	</style>

 
	<ul class="grid_gallery"> 

	<?php
	foreach ( (array) $images_GP as $key => $img ) {
	?>
	<li style="--n: 0;">
    <figure>
	<a href="<?php echo $img; ?>" target="_blank"><img src="<?php echo $img; ?>" ></a> 
    </figure>
	</li> 
	<?php } ?>
  
	</ul>  
	<?php } ?>
	</noscript>
	
	<p style="text-align: center;"><strong style="text-transform:uppercase!important;color:#2271b1">Add your link image url here</strong></p> 
	
	<div id="dynamic_form" >
	
    <div id="field_wrap">
    <?php 
    if ( isset( $gallery_data['image_url'] ) ) {
    for( $i = 0; $i < count( $gallery_data['image_url'] ); $i++ )  {  
	?>
     
    
    <div class="field_row">
    <div class="field_left">
    <div class="form_field">
	<noscript>
	<label>Image URL</label>
    <input type="text" class="meta_image_url" name="gallery[image_url][]" value="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" />
	</noscript>
    <textarea class="meta_image_url" name="gallery[image_url][]" rows="3" cols="65"><?php _e( $gallery_data['image_url'][$i] ); ?></textarea>
    </div>
    </div> 
	
    <div class="field_right image_wrap">
    <img src="<?php esc_html_e( $gallery_data['image_url'][$i] ); ?>" height="60" width="60" />
    </div>
    <div class="field_right">
    <input class="button" type="button" value="Choose Image" onclick="add_image(this)" /><br />
    <input class="button" type="button" value="Remove Image" onclick="remove_field(this)" />
    </div>
    <div class="clear"></div> 
    </div> 
    <?php } } ?>
	
    <div id="kolombaru"></div> 
	
    
    <div style="display:none" id="master-row">
    
    <div class="field_row">
    <div class="field_left">
    <div class="form_field">
	<noscript>
    <label style="display:none">Image URL</label> 
    <input class="meta_image_url" placeholder="Paste Your link image here or Choose Image" value="" type="text" name="gallery[image_url][]" />
	</noscript>
    <textarea class="meta_image_url" name="gallery[image_url][]" rows="3" cols="65" placeholder="Paste Your link image here or Choose Image" ></textarea>
    </div>
    </div>
	 
    <div class="field_right image_wrap">
    <img src="<?php echo EX_THEMES_URI.'/assets/img/sparks.gif'; ?>" height="60" width="60" />
	</div> 
    <div class="field_right"> 
    <input class="button" type="button" value="Choose Image" onclick="add_image(this)" /><br />
    <input class="button" type="button" value="Remove Image" onclick="remove_field(this)" /> 
    </div> 
    <div class="clear"></div> 
	
    </div>
    </div>
	
    
    <div id="add_field_row" style="padding: 0 10px;">
	<span style="color: #2271b1;text-decoration: underline;cursor: pointer;line-height: 40px;" onclick="add_field_row();" >Add New Image</span>
    <!---<input class="button" type="button" value="Add New Image" onclick="add_field_row();" />-->
 
    </div>
    </div>
	</div>
 
 

<?php
}
/**
 * Print styles and scripts
 */
function gallery_image_print_scripts() { 
    global $post;
    if( 'post' != $post->post_type ) 
        return;
    ?>  
    
    <style type="text/css">
	.field_left {float:left;}.field_right {float:right; margin: 2px;}.clear {clear:both;}#dynamic_form {width:auto;}#dynamic_form input[type=text] {width:400px;}#dynamic_form .field_row {border-bottom: 1px dashed darkgray;margin-bottom:10px;padding:10px;}#dynamic_form label {padding:0 6px;}
    </style>
    <script type="text/javascript">
        function add_image(obj) {
            var parent      = jQuery(obj).parent().parent('div.field_row');
            var inputField  = jQuery(parent).find(".meta_image_url");
            tb_show('', 'media-upload.php?TB_iframe=true');
            window.send_to_editor = function(html) {
                var url     = jQuery(html).find('img').attr('src');
                inputField.val(url);
                jQuery(parent)
                .find("div.image_wrap").html('<img src="'+url+'" height="60" width="60" />');
                // inputField.closest('p').prev('.awdMetaImage').html('<img height=120 width=120 src="'+url+'"/><p>URL: '+ url + '</p>'); 
                tb_remove();
            };
            return false;  
        }
        function remove_field(obj) {
            var parent  = jQuery(obj).parent().parent();
            //console.log(parent)
            parent.remove();
        }
        function add_field_row() {
            var row     = jQuery('#master-row').html();
            jQuery(row).appendTo('#kolombaru');
        }
    </script>
    <?php
}
/**
 * Save post action, process fields
 */
function gallery_image_updates( $post_id, $post_object ) { 
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )  
        return; 
    if ( 'revision' == $post_object->post_type )
        return; 
    //if ( !wp_verify_nonce( $_POST['noncename_so_exthemes_devs'], plugin_basename( __FILE__ ) ) )
        //return; 
    //if ( 'post' != $_POST['post_type'] ) // here you can set post type name
        //return;
    if ( $_POST['gallery'] ) { 
        $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 ];
            }
        }
        if ( $gallery_data ) 
            update_post_meta( $post_id, 'gallery_data', $gallery_data );
        else 
            delete_post_meta( $post_id, 'gallery_data' );
    } else {
        delete_post_meta( $post_id, 'gallery_data' );
    }
}
