<?php
class tdm_block_image_info_box extends td_block {

	protected $shortcode_atts = array(); //the atts used for rendering the current block
	private $unique_block_class;

    /**
     * Disable loop block features. This block does not use a loop and it dosn't need to run a query.
     */
    function __construct() {
        parent::disable_loop_block_features();
    }

	public function get_custom_css() {

        $compiled_css = '';

		// $unique_block_class - the unique class that is on the block. use this to target the specific instance via css
        $in_composer = td_util::tdc_is_live_editor_iframe() || td_util::tdc_is_live_editor_ajax();
        $in_element = td_global::get_in_element();
        $unique_block_class_prefix = '';
        if( $in_element || $in_composer ) {
            $unique_block_class_prefix = 'tdc-row .';

            if( $in_element && $in_composer ) {
                $unique_block_class_prefix = 'tdc-row-composer .';
            }
        }
        $unique_block_class = $unique_block_class_prefix . $this->block_uid;

        $raw_css =
			"<style>
                /* @style_general_image_info_box */
                .tdm_block_image_info_box .tdm-col {
                  width: 100%;
                }
                .tdm_block_image_info_box .tdm-image-wrap {
                  overflow: hidden;
                  position: relative;
                  color: #fff;
                }
                .tdm_block_image_info_box .tdm-image-box {
                  height: 300px;
                  display: block;
                  background-size: cover;
                  background-position: center;
                }
                .tdm_block_image_info_box .tdm-image-box:before {
                  content: '';
                  -webkit-transition: all 0.3s;
                  transition: all 0.3s;
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
                .tdm_block_image_info_box .tdm-title-md {
                  font-weight: 600;
                  color: #fff;
                  margin: 0;
                }
                .tdm_block_image_info_box .tdm-image-description {
                  position: absolute;
                  top: 0 !important;
                  padding: 6% 7%;
                  width: 100%;
                  pointer-events: none;
                }
                @media (max-width: 767px) {
                  .tdm_block_image_info_box .tdm-image-description {
                    padding: 20px;
                  }
                }
                .tdm_block_image_info_box .tdm-image-description p {
                  font-family: var(--td_default_google_font_2, 'Roboto', sans-serif);
                  font-size: 16px;
                  line-height: 24px;
                }
                @media (min-width: 1019px) and (max-width: 1140px) {
                  .tdm_block_image_info_box .tdm-image-description p {
                    font-size: 14px;
                    line-height: 20px;
                  }
                }
                @media (min-width: 768px) and (max-width: 1018px) {
                  .tdm_block_image_info_box .tdm-image-description p {
                    font-size: 14px;
                    line-height: 20px;
                  }
                }
                .tdm_block_image_info_box .tdm-image-description p:last-of-type {
                  margin-bottom: 0;
                }
                .tdm_block_image_info_box .tdm-image-meta {
                  -webkit-transition: all 0.3s;
                  transition: all 0.3s;
                  position: absolute;
                  margin-right: 30px;
                  margin-top: 15px;
                }
                .tdm_block_image_info_box .tds-button {
                  margin-top: 25px;
                  pointer-events: all;
                }
                .tdm_block_image_info_box .tdm-image-border {
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                  z-index: 1;
                }
                .tdm_block_image_info_box .tdm-image-border span {
                  display: inline-block;
                  width: 33.3333%;
                  float: left;
                  height: 4px;
                }
                .tdm_block_image_info_box .tdm-image-border .tdm-image-border0 {
                  opacity: 0.8;
                }
                .tdm_block_image_info_box .tdm-image-border .tdm-image-border1 {
                  opacity: 0.6;
                }
                .tdm_block_image_info_box .tdm-image-border .tdm-image-border2 {
                  opacity: 0.4;
                }
                .tdm_block_image_info_box.td-image-info-box-style-1.tdm-content-vert-center .tdm-image-description {
                  top: 50% !important;
                  transform: translateY(-50%);
                }
                .tdm_block_image_info_box.td-image-info-box-style-1.tdm-content-vert-bottom .tdm-image-description {
                  top: auto !important;
                  bottom: 0;
                }
                .tdm_block_image_info_box.td-image-info-box-style-1 .tdm-image-description {
                  display: table;
                }
                .tdm_block_image_info_box.td-image-info-box-style-1 .tdm-image-meta {
                  position: relative;
                  margin-right: 0;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-meta {
                  bottom: 20px;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-description {
                  bottom: 0;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tds-button {
                  position: absolute;
                  margin-top: 40px;
                  width: 100%;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-sm-used .tdm-image-meta {
                  -webkit-transform: translateY(-45px);
                  transform: translateY(-45px);
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-sm-used .tds-button {
                  margin-top: 10px;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-md-used .tdm-image-meta {
                  -webkit-transform: translateY(-65px);
                  transform: translateY(-65px);
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-md-used .tds-button {
                  margin-top: 14px;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-lg-used .tdm-image-meta {
                  -webkit-transform: translateY(-87px);
                  transform: translateY(-87px);
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-lg-used .tds-button {
                  margin-top: 23px;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-xlg-used .tdm-image-meta {
                  -webkit-transform: translateY(-112px);
                  transform: translateY(-112px);
                }
                .tdm_block_image_info_box.td-image-info-box-style-2 .tdm-image-wrap:hover.tdm-btn-xlg-used .tds-button {
                  margin-top: 23px;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2.tdm-content-horiz-center .tdm-image-meta {
                  left: 7%;
                  right: 7%;
                  margin-right: 0;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2.tdm-content-horiz-center .tds-button {
                  left: 50%;
                  -webkit-transform: translateX(-50%);
                  transform: translateX(-50%);
                }
                .tdm_block_image_info_box.td-image-info-box-style-2.tdm-content-horiz-right .tdm-image-meta {
                  right: 7%;
                  margin-right: 0;
                  margin-left: 20px;
                }
                .tdm_block_image_info_box.td-image-info-box-style-2.tdm-content-horiz-right .tds-button {
                  right: 0;
                }

                
                /* @box_height */
                .$unique_block_class .tdm-image-box {
                    @box_height
                }

				/* @background_solid */
				.$unique_block_class .td-block-row .tdm-image-box:before {
					background-color: @background_solid;
				}
				/* @background_gradient */
				.$unique_block_class .td-block-row .tdm-image-box:before {
					@background_gradient
				}
                /* @box_title_color */
                body .$unique_block_class .tdm-title-md {
					color: @box_title_color;
                }
                /* @box_description_color */
                .$unique_block_class .tdm-image-description p {
					color: @box_description_color;
                }

                /* @box_border */
                .$unique_block_class .tdm-image-border span {
					background-color: @box_border;
                }

                /* @hover_background_solid */
				.$unique_block_class:hover .td-block-row .tdm-image-box:before {
					background-color: @hover_background_solid;
				}
				/* @hover_background_gradient */
				.$unique_block_class:hover .td-block-row .tdm-image-box:before {
					@hover_background_gradient
				}
                /* @hover_box_title_color */
                .$unique_block_class:hover .tdm-title-md {
					color: @hover_box_title_color;
                }
                /* @hover_box_description_color */
                .$unique_block_class:hover .tdm-image-description p {
					color: @hover_box_description_color;
                }

                /* @hover_box_border */
                .$unique_block_class:hover .tdm-image-border span {
					background-color: @hover_box_border;
                }



				/* @f_title */
				.$unique_block_class .tdm-title-md {
					@f_title
				}
				/* @f_descr */
				.$unique_block_class .tdm-image-description p {
					@f_descr
				}
			</style>";


        $td_css_res_compiler = new td_css_res_compiler( $raw_css );
        $td_css_res_compiler->load_settings( __CLASS__ . '::cssMedia', $this->shortcode_atts);

        $compiled_css .= $td_css_res_compiler->compile_css();
		return $compiled_css;
	}

    /**
     * Callback pe media
     *
     * @param $responsive_context td_res_context
     * @param $atts
     */
    static function cssMedia( $res_ctx ) {

        $res_ctx->load_settings_raw( 'style_general_image_info_box', 1 );

        // box height
        $box_height = $res_ctx->get_shortcode_att( 'box_height' );
        if( $box_height != '' ) {
            if ( is_numeric( $box_height ) ) {
                $res_ctx->load_settings_raw( 'box_height',  'height: ' . $box_height . 'px;' );
            } else if( strpos( $box_height, '%') == true ) {
                $res_ctx->load_settings_raw( 'box_height',  'height: auto; padding-bottom: ' . $box_height . ';' );
            }
        }



        /*-- BACKGROUND -- */
        // overlay color
        $res_ctx->load_color_settings( 'box_overlay', 'background_solid', 'background_gradient', '', '');

        // overlay hover color
        $res_ctx->load_color_settings( 'hover_box_overlay', 'hover_background_solid', 'hover_background_gradient', '', '');



        /*-- TITLE -- */
        // title color
        $res_ctx->load_settings_raw( 'box_title_color', $res_ctx->get_shortcode_att( 'box_title_color' ) );

        // title hover color
        $res_ctx->load_settings_raw( 'hover_box_title_color', $res_ctx->get_shortcode_att( 'hover_box_title_color' ) );



        /*-- DESCRIPTION -- */
        // description color
        $res_ctx->load_settings_raw( 'box_description_color', $res_ctx->get_shortcode_att( 'box_description_color' ) );

        // description hover color
        $res_ctx->load_settings_raw( 'hover_box_description_color', $res_ctx->get_shortcode_att( 'hover_box_description_color' ) );



        /*-- BORDER -- */
        // border color
        $res_ctx->load_settings_raw( 'box_border', $res_ctx->get_shortcode_att( 'box_border' ) );

        // border hover color
        $res_ctx->load_settings_raw( 'hover_box_border', $res_ctx->get_shortcode_att( 'hover_box_border' ) );



        /*-- FONTS -- */
        $res_ctx->load_font_settings( 'f_title' );
        $res_ctx->load_font_settings( 'f_descr' );

    }



    function render($atts, $content = null) {
        parent::render($atts);

        // $unique_block_class - the unique class that is on the block. use this to target the specific instance via css
        $this->unique_block_class = $this->block_uid;

        $this->shortcode_atts = shortcode_atts(
            array_merge(
                td_api_multi_purpose::get_mapped_atts( __CLASS__ ),
                td_api_style::get_style_group_params( 'tds_button' ))
            , $atts);

        $box_style = $this->get_shortcode_att( 'box_style' );
        $box_content_align_horizontal = $this->get_shortcode_att( 'box_content_align_horizontal' );
        $box_content_align_vertical = $this->get_shortcode_att( 'box_content_align_vertical' );

        $box_title = $this->get_shortcode_att( 'box_title' );
        $box_description = rawurldecode( base64_decode( strip_tags( $this->get_shortcode_att( 'box_description' ) ) ) );
        $box_custom_url = $this->get_shortcode_att( 'box_custom_url' );
        $box_open_in_new_window = $this->get_shortcode_att( 'box_open_in_new_window' );
        $box_image = $this->get_shortcode_att( 'box_image' );
        $box_image_external_url = trim( (string) $this->get_shortcode_att( 'box_image_external_url' ) );
        $button_text = $this->get_shortcode_att( 'button_text' );
        $btn_size = $this->get_shortcode_att( 'button_size' );

        $raw_box_image = $this->get_shortcode_att( 'box_image' );
        $box_image = is_string( $raw_box_image ) ? trim( html_entity_decode( $raw_box_image ) ) : $raw_box_image;

        $image_url = '';

        if ( $box_image_external_url !== '' && filter_var( $box_image_external_url, FILTER_VALIDATE_URL ) ) {
            $image_url = $box_image_external_url;
        } elseif ( is_numeric( $box_image ) && (int) $box_image > 0 ) {
            $image_url = tdc_util::get_image_or_placeholder( $box_image );
        } elseif ( is_string( $box_image ) && filter_var( $box_image, FILTER_VALIDATE_URL ) ) {
            $image_url = $box_image;
        } else {
            $image_url = tdc_util::get_image_or_placeholder( '' );
        }

        if ( empty( $image_url ) ) {
            $image_url = tdc_util::get_image_or_placeholder( '' );
        }

        // additional classes
        $additional_classes = array();

        // content align horizontal
        if ( ! empty( $box_content_align_horizontal ) ) {
            $additional_classes[] = 'tdm-' . $box_content_align_horizontal;
        }

        // content align vertical
        if( ! empty( $box_content_align_vertical ) ) {
            $additional_classes[] = 'tdm-' . $box_content_align_vertical;
        }

        // box style
        if ( ! empty( $box_style ) ) {
            $additional_classes[] = 'td-image-info-box-' . $box_style;
        } else {
            $additional_classes[] = 'td-image-info-box-style-1';
        }

        $buffy = '';
        $buffy .= '<div class="tdm_block ' . $this->get_block_classes($additional_classes) . ' tdm-mobile-full" ' . $this->get_block_html_atts() . '>';

        //get the block css
        $buffy .= $this->get_block_css();

        $buffy .= '<div class="td-block-width">';
        $buffy .= '<div class="td-block-row">';
        $buffy .= '<div class="td-block-span12 tdm-col">';

        $target = '';
        $no_custom_url = 'a';
        $with_button = '';

        if ( '' !== $box_open_in_new_window ) { $target = ' target="_blank" '; }
        if ( '' !== $button_text ) { $with_button = 'tdm-with-button ' . $btn_size . '-used'; }

        $link_data = 'href="' . $box_custom_url . '" ' . $target . ' rel="bookmark" title="' . $box_title . '"';

        if ( '' == $box_custom_url ) {
            $no_custom_url = 'div';
            $link_data = '';
        }

        // hide button if no URL
        $hide_button_no_url = $this->get_shortcode_att( 'button_hide_no_url' );
        $button_url = td_util::get_custom_field_value_from_string($this->get_shortcode_att('button_url'));
        $button_url = td_util::get_cloud_tpl_var_value_from_string( $button_url );

        $button_hide = '';
        if ( $hide_button_no_url == 'yes' && $button_url == '') {
            $button_hide = 'hide';
        }

        $buffy .= '<div class="tdm-image-wrap ' . $with_button . '">';
        $buffy .= '<div class="tdm-image-border"><span class="tdm-image-border0"></span><span class="tdm-image-border1"></span><span class="tdm-image-border2"></span></div>';
        $buffy .= '<' . $no_custom_url . ' class="tdm-image-box" style="background-image: url(\'' . esc_url( $image_url ) . '\');" ' . $link_data . '></' . $no_custom_url . '>';
        $buffy .= '<div class="tdm-image-description">';
        $buffy .= '<h3 class="tdm-title-md">' . $box_title . '</h3>';
        $buffy .= '<div class="tdm-image-meta">';
        $buffy .= '<p>' . $box_description . '</p>';

        // Button
        if ( (! empty( $button_text ) || ! empty( $button_icon )) && $button_hide !== 'hide' ) {
            $tds_button = $this->get_shortcode_att('tds_button');
            if ( empty( $tds_button ) ) {
                $tds_button = td_util::get_option( 'tds_button', 'tds_button1' );
            }
            $tds_button_instance = new $tds_button( $this->shortcode_atts, '', $this->unique_block_class );
            $buffy .= $tds_button_instance->render();
        }
        $buffy .= '</div>';
        $buffy .= '</div>';
        $buffy .= '</div>';
        $buffy .= '</div>';
        $buffy .= '<div class="clearfix"></div>';
        $buffy .= '</div>';
        $buffy .= '</div>';
        $buffy .= '</div>'; // tdm_block

        return $buffy;
    }
}