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

extract( wp_parse_args( $settings, [
        
    // form
    'form' => '',
    'layout' => 'inline',
    'align' => 'center',

    // input style
    'input_border_width' => '',
    'input_border_radius' => '',
    'input_text_color' => '',
    'input_background' => '',
    'input_border_color' => '',
    'input_focus_text_color' => '',
    'input_focus_background' => '',
    'input_focus_border_color' => '',

    // button style
    'button_border_radius' => '',
    'button_color' => '',
    'button_background' => '',
    'button_hover_color' => '',
    'button_hover_background' => '',

    'extra_class' => '',
] ) );

// form ID is mandatory
if ( ! $form ) return;

// class
$class = [ 'fox-form', 'fox-subscribe-form', 'fox-mailchimp-form' ];
$class[] = $extra_class;

// layout
if ( 'stack' != $layout ) $layout = 'inline';
$class[] = 'form-' . $layout;

// align
if ( 'left' != $align && 'right' != $align ) $align = 'center';
$class[] = 'align-' . $align;

$id = uniqid( 'form-' );

// CSS
$css_all = [];
$css = [];

$inputs = 'input[type="text"], input[type="email"], input[type="number"], input[type="url"], input:not([type])';
$buttons = 'input[type="button"], input[type="submit"], button';
$inputs = explode( ',', $inputs );
$buttons = explode( ',', $buttons );

$input_selector = [];
$input_focus_selector = [];
$button_selector = [];
$button_hover_selector = [];

foreach ( $inputs as $input ) {
    $input_selector[] = '#' . $id . ' ' . $input;
    $input_focus_selector[] = '#'. $id . ' ' . $input . ':focus';
}
$input_selector = join( ',', $input_selector );
$input_focus_selector = join( ',', $input_focus_selector );

foreach ( $buttons as $button ) {
    $button_selector[] = '#' . $id . ' ' . $button;
    $button_hover_selector[] = '#' . $id . ' ' . $button . ':hover';
}
$button_selector = join( ',', $button_selector );
$button_hover_selector = join( ',', $button_hover_selector );

/**
 * input style
 */
if ( '' != $input_border_width ) {
    if ( is_numeric( $input_border_width ) ) $input_border_width .= 'px';
    $css[] = 'border-width:' . $input_border_width;
}
if ( '' != $input_border_radius ) {
    if ( is_numeric( $input_border_radius ) ) $input_border_radius .= 'px';
    $css[] = 'border-radius:' . $input_border_radius;
}
if ( '' != $input_text_size ) {
    if ( is_numeric( $input_text_size ) ) $input_text_size .= 'px';
    $css[] = 'font-size:' . $input_text_size;
}
if ( '' != $input_text_color ) {
    $css[] = 'color:' . $input_text_color;
}
if ( '' != $input_background ) {
    $css[] = 'background:' . $input_background;
}
if ( '' != $input_border_color ) {
    $css[] = 'border-color:' . $input_border_color;
}

if ( ! empty( $css ) ) {
    $css_all[] = $input_selector . '{' . join( ';', $css ). '}';
}

/**
 * input focus
 */
$css = [];
if ( '' != $input_focus_text_color ) {
    $css[] = 'color:' . $input_focus_text_color;
}
if ( '' != $input_focus_background ) {
    $css[] = 'background:' . $input_focus_background;
}
if ( '' != $input_focus_border_color ) {
    $css[] = 'border-color:' . $input_focus_border_color;
}

if ( ! empty( $css ) ) {
    $css_all[] = $input_focus_selector . '{' . join( ';', $css ). '}';
}

/**
 * button style
 */
$css = [];
if ( '' != $button_border_radius ) {
    if ( is_numeric( $button_border_radius ) ) $button_border_radius .= 'px';
    $css[] = 'border-radius:' . $button_border_radius;
}
if ( '' != $button_text_size ) {
    if ( is_numeric( $button_text_size ) ) $button_text_size .= 'px';
    $css[] = 'font-size:' . $button_text_size;
}
if ( '' != $button_color ) {
    $css[] = 'color:' . $button_color;
}
if ( '' != $button_background ) {
    $css[] = 'background:' . $button_background;
}
if ( ! empty( $css ) ) {
    $css_all[] = $button_selector . '{' . join( ';', $css ). '}';
}

/**
 * button hover style
 */
$css = [];
if ( '' != $button_hover_color ) {
    $css[] = 'color:' . $button_hover_color;
}
if ( '' != $button_hover_background ) {
    $css[] = 'background:' . $button_hover_background;
}
if ( ! empty( $css ) ) {
    $css_all[] = $button_hover_selector . '{' . join( ';', $css ). '}';
}

?>

<?php if ( ! empty( $css_all ) ) { ?>
<style>
<?php echo join( '', $css_all ); ?>
</style>
<?php } ?>

<div class="<?php echo esc_attr( join( ' ', $class ) ); ?>" id="<?php echo esc_attr( $id ); ?>">

<div class="form-inner">

    <?php echo do_shortcode( '[mc4wp_form id="' . esc_attr( $form ) . '"]' ); ?>

</div><!-- .form-inner -->

</div><!-- .fox-form -->