<?php

if ( ! function_exists( 'porto_get_red_from_hexcolor' ) ) {
	function porto_get_red_from_hexcolor( $hex ) {
		$hex = str_replace( '#', '', $hex );
		return hexdec( strlen( $hex ) == 3 ? substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) : substr( $hex, 0, 2 ) );
	}
}
if ( ! function_exists( 'porto_get_green_from_hexcolor' ) ) {
	function porto_get_green_from_hexcolor( $hex ) {
		$hex = str_replace( '#', '', $hex );
		return hexdec( strlen( $hex ) == 3 ? substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) : substr( $hex, 2, 2 ) );
	}
}
if ( ! function_exists( 'porto_get_blue_from_hexcolor' ) ) {
	function porto_get_blue_from_hexcolor( $hex ) {
		$hex = str_replace( '#', '', $hex );
		return hexdec( strlen( $hex ) == 3 ? substr( $hex, 2, 1 ) . substr( $hex, 2, 1 ) : substr( $hex, 4, 2 ) );
	}
}

extract(
	shortcode_atts(
		array(
			'btn_img'              => '',
			'init_extra_class'     => '',
			'modal_contain'        => 'html',
			'youtube__url'         => '',
			'vimeo_url'            => '',
			'modal_on'             => 'onload',
			'modal_onload_timeout' => '',
			'modal_on_selector'    => '',
			'modal_style'          => 'mfp-fade',
			'overlay_bg_color'     => '',
			'overlay_bg_opacity'   => 80,
			'el_class'             => '',
		),
		$atts,
		'porto_modal'
	)
);
$html = $style = $modal_class = $modal_data_class = $uniq = $overlay_bg = $header_style = '';

$overlay_bg_opacity = ( $overlay_bg_opacity / 100 );
$overlay_bg         = '';
if ( $overlay_bg_color ) {
	if ( strlen( $overlay_bg_color ) <= 7 ) {
		$overlay_bg = 'rgba(' . esc_js( porto_get_red_from_hexcolor( $overlay_bg_color ) ) . ',' . esc_js( porto_get_green_from_hexcolor( $overlay_bg_color ) ) . ',' . esc_js( porto_get_blue_from_hexcolor( $overlay_bg_color ) ) . ',' . esc_js( $overlay_bg_opacity ) . ')';
	} else {
		$overlay_bg = esc_js( $overlay_bg_color );
	}

	$overlay_bg = 'background-color:' . $overlay_bg . ';';
}

if ( $overlay_bg ) {
	$porto_modal_inline_style  = '';
	$porto_modal_inline_style .= '<style>';
	$porto_modal_inline_style .= '.mfp-bg.mfp-fade, .mfp-bg.my-mfp-zoom-in { ' . $overlay_bg . ' }';
	$porto_modal_inline_style .= '</style>';
	$html                     .= $porto_modal_inline_style;
}

$html .= '<div class="porto-modal-input-wrapper ' . esc_attr( $init_extra_class ) . '">';

if ( 'youtube' == $modal_contain || 'vimeo' == $modal_contain ) {
	$trigger_id   = isset( $atts[ $modal_contain . '_url' ] ) ? $atts[ $modal_contain . '_url' ] : '';
	$content_type = 'iframe';
} else {
	$modal_array = array();
	if ( ! empty( $atts['modal_wd_sz'] ) ) {
		$modal_array['width'] = $atts['modal_wd_sz'];
	}
	if ( ! empty( $atts['content'] ) ) {
		$modal_array['content'] = substr( $atts['content'], 0, 20 );
	}
	$trigger_id   = 'porto-modal-' . hash( 'md5',  json_encode( $modal_array ) );
	$content_type = 'inline';
}

if ( ! empty( $atts['modal_wd_sz'] ) && ( 'html' == $modal_contain || '' == $modal_contain ) ) {
	$saved_value       = str_replace( '``', '"', $atts['modal_wd_sz'] );
	$responsive_values = json_decode( $saved_value, true );
	if ( ! empty( $responsive_values['xl'] ) || ( isset( $responsive_values['xl'] ) && '0' === $responsive_values['xl'] ) ) {
		$saved_value = $responsive_values['xl'];
	} else {
		$saved_value = '';
	}
	if ( ! empty( $saved_value ) ) {
		$inline_style = '#' . $trigger_id . '{margin-left: auto; margin-right: auto;width:100%;max-width:' . $saved_value . ( ! empty( $responsive_values['unit'] ) ? $responsive_values['unit'] : 'px' ) . '}';
		$html .= '<style>';
		$html .= $inline_style;
		$html .= '</style>';
	}

}

if ( 'image' == $modal_on && $btn_img ) {
	$alt_text = '';
	if ( is_numeric( $btn_img ) ) {
		$img      = wp_get_attachment_image_src( $btn_img, 'full' );
		$alt_text = get_post_meta( $btn_img, '_wp_attachment_image_alt', true );
	} else if ( is_array( $btn_img ) && ! empty( $btn_img['id'] ) ) {
		$img = wp_get_attachment_image_src( $btn_img['id'], 'full' );
		$alt_text = get_post_meta( $btn_img['id'], '_wp_attachment_image_alt', true );
	} else if ( is_array( $btn_img ) && ! empty( $btn_img['url'] ) ) {
		$img = $btn_img['url'];
		if ( ! empty( $btn_img['alt'] ) ) {
			$alt_text = $btn_img['alt'];
		}
	}
	
	if ( isset( $img ) && is_array( $img ) ) {
		$html    .= '<img src="' . esc_url( $img[0] ) . '" alt="' . esc_attr( $alt_text ) . '" data-trigger-id="' . esc_attr( $trigger_id ) . '" data-type="' . $content_type . '" class="porto-modal-trigger img-responsive" width="' . esc_attr( $img[1] ) . '" height="' . esc_attr( $img[2] ) . '" data-overlay-class="' . esc_attr( $modal_style ) . '" />';
	} else {
		$html    .= '<img src="' . esc_url( $img ) . '" alt="' . esc_attr( $alt_text ) . '" data-trigger-id="' . esc_attr( $trigger_id ) . '" data-type="' . $content_type . '" class="porto-modal-trigger img-responsive" data-overlay-class="' . esc_attr( $modal_style ) . '" />';
	}
} elseif ( 'onload' == $modal_on && ( ! isset( $_COOKIE['porto_modal_disable_onload'] ) || ! $_COOKIE['porto_modal_disable_onload'] ) ) {
	$html .= '<div data-trigger-id="' . esc_attr( $trigger_id ) . '" data-type="' . $content_type . '" class="porto-modal-trigger porto-onload" data-overlay-class="' . esc_attr( $modal_style ) . '"' . ( $modal_onload_timeout ? ' data-timeout="' . ( (float) $modal_onload_timeout * 1000 ) . '"' : '' ) . '></div>';
} elseif ( 'custom-selector' == $modal_on && $modal_on_selector ) {
	$html .= '<script>
	( function() {
		var porto_init_modal = function() {
			var selector = "' . esc_js( $modal_on_selector ) . '",
				$selector = jQuery(selector);
			$selector.addClass("porto-modal-trigger");
			$selector.attr("data-trigger-id", "' . esc_js( $trigger_id ) . '");
			$selector.attr("data-type", "' . esc_js( $content_type ) . '");
			$selector.attr("data-overlay-class", "' . esc_js( $modal_style ) . '");
		};

		if ( window.jQuery && jQuery("' . esc_js( $modal_on_selector ) . '").length ) {
			porto_init_modal();
		} else {
			document.addEventListener( "DOMContentLoaded", porto_init_modal );
		}
	} )();
	</script>';
}


$html .= '</div>';

// modal box

$html         .= '<div id="' . esc_attr( $trigger_id ) . '" class="mfp-hide' . ( 'my-mfp-zoom-in' === $modal_style ? ' zoom-anim-dialog' : '' ) . ' ' . esc_attr( $el_class ) . '">';
	$html     .= '<div class="porto-modal-content">';
		$html .= do_shortcode( $content );
	$html     .= '</div>';
$html         .= '</div>';

echo porto_filter_output( $html );
