<?php
if ( $field->type === 'creditcard'  ) { 
	
	$all_spans = $dom->getElementsByTagName( 'span' );

	foreach ( $all_spans as $span ) {
		$span_classes = $span->getAttribute( 'class' );

		// card number and card holder name
		if ( strpos( $span_classes, 'ginput_full' ) !== false && strpos( $span_classes, 'ginput_cardextras' ) === false ) {
			
			$span->setAttribute( 'class', $span->getAttribute( 'class' ) . ' mdc-text-field stla_material_large' );

			//create container div
			$container_div = $dom->createElement('div');
			$container_div->setAttribute( 'class', 'mdc-text-field stla_material_large' );
			$container_div->setAttribute('data-mdc-auto-init', 'MDCTextField');
			$span->appendChild( $container_div );

			

			$all_inputs = $span->getElementsByTagName( 'input' );

			foreach( $all_inputs as $input ) {
				$input->setAttribute( 'class', $input->getAttribute( 'class' ) . ' mdc-text-field__input' );
				$container_div->appendChild( $input );
			}

			$all_labels = $span->getElementsByTagName( 'label' );

			foreach( $all_labels as $label ) {
				$label->setAttribute( 'class', $label->getAttribute( 'class' ) . ' mdc-floating-label' );
				$container_div->appendChild( $label );
			}


			// move card images to out of span
			$divs = $span->getElementsByTagName( 'div' );

			foreach( $divs as $div ) {
				$div_classes = $div->getAttribute( 'class' );
				if (strpos($div_classes, 'gform_card_icon_container') !== false) {

					
					$span->parentNode->insertBefore( $div, $span );
				}
			}

			//create a new div
			$bottom_line_div = $dom->createElement('div');
			$bottom_line_div->setAttribute('class', 'mdc-line-ripple');
			$container_div->appendChild( $bottom_line_div);

		}

		// Expiration date
		if ( strpos( $span_classes, 'ginput_card_expiration_container' ) !== false  ) {
				
			//$span->setAttribute( 'class', $span->getAttribute( 'class' ) . ' mdc-select' );

			//create container div
			$all_selects = $span->getElementsByTagName( 'select' );

			// Month
			if( isset( $all_selects[0] ) ) {
				$container_div_month = $dom->createElement('div');
				$container_div_month->setAttribute( 'class', 'mdc-select' );

				$all_selects[0]->setAttribute( 'class', $all_selects[0]->getAttribute( 'class' ) . ' mdc-select__native-control' );
				//create a new div
				$bottom_line_div = $dom->createElement('div');
				$bottom_line_div->setAttribute('class', 'mdc-line-ripple');
				$span->appendChild( $bottom_line_div );

			}
			$container_div_month->appendChild( $all_selects[0] );
			$span->appendChild( $container_div_month );
			$container_div_month->appendChild( $bottom_line_div );

			$all_selects = $span->getElementsByTagName( 'select' );

			// Year
			if( isset( $all_selects[0] ) ) {
				$container_div_year = $dom->createElement('div');
				$container_div_year->setAttribute( 'class', 'mdc-select' );
				$all_selects[0]->setAttribute( 'class', $all_selects[0]->getAttribute( 'class' ) . ' mdc-select__native-control' );
				$bottom_line_div = $dom->createElement('div');
				$bottom_line_div->setAttribute('class', 'mdc-line-ripple');
				$span->appendChild( $bottom_line_div );
			}

				$container_div_year->appendChild( $all_selects[0] );
				$span->appendChild( $container_div_year );
				$container_div_year->appendChild( $bottom_line_div );

				$all_labels = $span->getElementsByTagName( 'label' );

				foreach( $all_labels as $label ) {
					$span->appendChild( $label );
				}


		}	

		// Security Code
		if ( strpos( $span_classes, 'ginput_cardinfo_right' ) !== false  ) {
				
			// $span->setAttribute( 'class', $span->getAttribute( 'class' ) . ' mdc-text-field' );
			// $span->setAttribute('data-mdc-auto-init', 'MDCTextField');

			$container_div = $dom->createElement('div');
			$container_div->setAttribute( 'class', 'mdc-text-field stla_material_medium' );
			$container_div->setAttribute('data-mdc-auto-init', 'MDCTextField');
			$span->appendChild( $container_div );
			

			//create container div
			$all_inputs = $span->getElementsByTagName( 'input' ); 

			foreach( $all_inputs as $input ) {
				$input->setAttribute( 'class', $input->getAttribute( 'class' ) . ' mdc-text-field__input' );
				$container_div->appendChild( $input );
			}

			$all_labels = $span->getElementsByTagName( 'label' );

			foreach( $all_labels as $label ) {
				$label->setAttribute( 'class', $label->getAttribute( 'class' ) . ' mdc-floating-label' );
				$container_div->appendChild( $label );
			}

			//create a new div
			$bottom_line_div = $dom->createElement('div');
			$bottom_line_div->setAttribute('class', 'mdc-line-ripple');
			$container_div->appendChild( $bottom_line_div );

			// move icon to bottom
			$icon_spans = $span->getElementsByTagName( 'span' );

			foreach( $icon_spans as $icon_span ) {
				$icon_span_class = $icon_span->getAttribute( 'class' );

				if ( strpos( $icon_span_class, 'ginput_card_security_code_icon' ) !== false  ) {
					$span->appendChild( $icon_span );
				}
				
			}
			
		}

	}

	

	$content = utf8_decode( $dom->saveHTML( $dom->documentElement ) );
}