<?php
$settings = $this->get_settings_for_display();

extract( wp_parse_args( $settings, [
    'padding_mode' => 'no',
    'ratio' => '4:3',
    'ratio_custom' => '',
    'background_image' => [],
    'hover_image' => [],
]) );

$cl = [ 'el-tile' ];

$height_div = '';

if ( 'yes' == $padding_mode ) {
    
    $cl[] = 'padding-mode';
    
} else {
    
    $cl[] = 'ratio-mode';

    /* ratio
    --------------------------- */
    $quote_style = '';
    $height_div = '<div class="height-element"></div>';
    if ( 'custom' == $ratio ) {
        $get_wh = explode( ':', $ratio_custom );
        $get_wh = array_map( 'absint', $get_wh );
        if ( 2 == count( $get_wh) ) {
            $w = $get_wh[0];
            $h = $get_wh[1];
            if ( $w > 0 && $h > 0 ) {
                $quote = $h/$w;
                if ( $quote > 0.1 && $quote < 10 ) {
                    $quote_style = ' style="padding-bottom:' . ( $quote * 100 ) . '%;"';
                } 
            }
        }
        if ( $quote_style ) {
            $cl[] = 'ratio-custom';
            $height_div = '<div class="height-element"' . $quote_style. '></div>';
        } else {
            $ratio = '4:3';
        }
    }
    if ( ! $quote_style ) {
        $ratio_cl = str_replace( ':', '-', $ratio );
        $cl[] = 'tile-' . $ratio_cl ;
    }
    
}

/* align
--------------------------- */
if ( $valign != 'top' && $valign != 'bottom' ) {
    $valign = 'middle';
}
$cl[] = 'valign-' . $valign;

/* hover effect
--------------------------- */
if ( in_array( $hover_effect, [ 'zoom', 'shift', 'image' ] ) ) {
    $cl[] = 'hover-' . $hover_effect;
}

/* final
--------------------------- */
$cl = join( ' ', $cl );
?>

<div class="<?php echo esc_attr( $cl ); ?>">
    
    <?php if ( $link[ 'url' ] ) {
        $this->add_link_attributes( 'wrap_link', $link ); ?>
        <a class="wrap-link" <?php $this->print_render_attribute_string( 'wrap_link' ); ?>></a>
    <?php } ?>
    
    <div class="bg-element">

        <?php if ( ! empty( $background_image[ 'id'] ) ) { ?>
        <div class="bg-image">
            <?php \Elementor\Group_Control_Image_Size::print_attachment_image_html( $settings, 'background_image', 'background_image' ); ?>
        </div>
        <?php } ?>
        
        <?php if ( 'image' == $hover_effect ) { ?>
        
            <?php if ( ! empty( $hover_image[ 'id'] ) ) { ?>
            <div class="bg-image bg-image-hover">
                <?php \Elementor\Group_Control_Image_Size::print_attachment_image_html( $settings, 'hover_image', 'hover_image' ); ?>
            </div>
            <?php } ?>
        
        <?php } ?>
        
        <div class="tile-overlay"></div>

        <?php echo $height_div; ?>

    </div><!-- .bg-element -->
    
    <div class="tile-content">

        <div class="tile-content-inner">
        
            <?php if ( $title ) { ?>
            <h2 class="tile-title"><?php echo $title; ?></h2>
            <?php } ?>

            <?php if ( $subtitle ) { ?>
            <div class="tile-subtitle"><?php echo do_shortcode( $subtitle ); ?></div>
            <?php } ?>
            
        </div><!-- .tile-contnet-inner -->
    
    </div><!-- .tile-content -->
    
</div>