0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
$m_bottom = $J::defined( $margin, 'bottom' ) ? $J::get( $margin, 'bottom' ) : 15;
return $visibility_style . ' margin: ' . $J::str( $J::get( $margin, 'top' ) ) . 'px ' . $J::str( $J::get( $margin, 'right' ) ) . 'px ' . $J::str( $m_bottom ) . 'px ' . $J::str( $J::get( $margin, 'left' ) ) . 'px;';
}
/** `padding: ${fieldPadding.top}px ...` (fieldPadding = field.padding || zeros). */
protected function datetime_padding( $field ) {
$J = 'WPVFB_JS';
$p = $J::or_( $J::get( $field, 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
return 'padding: ' . $J::str( $J::get( $p, 'top' ) ) . 'px ' . $J::str( $J::get( $p, 'right' ) ) . 'px ' . $J::str( $J::get( $p, 'bottom' ) ) . 'px ' . $J::str( $J::get( $p, 'left' ) ) . 'px;';
}
/** onfocus/onblur/onmouseover/onmouseout border-color handlers. */
protected function datetime_handlers( $focus, $border, $hover ) {
$fb = $this->a( $focus );
$ib = $this->a( $border );
$hb = $this->a( $hover );
return 'data-wpvfb-border="' . $fb . '|' . $ib . '|' . $hb . '"';
}
/** Label block shared by time/name/date (hardcoded red asterisk span, as in the TS). */
protected function datetime_label( $field, $gs, $default_name ) {
$J = 'WPVFB_JS';
$f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
$g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };
if ( 'none' === $g( 'labelPlacement' ) || 'hidden' === $f( 'labelVisibility' ) ) {
return '';
}
$label_font_size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
$label_lh_value = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) ) ? $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) : $J::or_( $g( 'labelLineHeight' ), $g( 'lineHeight' ), 1.5 );
$label_line_height = ( is_int( $label_lh_value ) || is_float( $label_lh_value ) ) ? $J::str( $label_lh_value ) . 'px' : $label_lh_value;
$label_font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
$label_font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );
$left = 'left' === $g( 'labelPlacement' );
$lm_bottom = $J::defined( $field, 'labelMargin.bottom' ) ? $f( 'labelMargin.bottom' ) : 10;
return '';
}
/** Description shared by time/name/date/html. */
protected function datetime_description( $field, $gs, $where, $desc_color ) {
$J = 'WPVFB_JS';
if ( $where !== $J::get( $gs, 'descriptionPlacement' ) || ! $J::truthy( $J::get( $field, 'description' ) ) ) {
return '';
}
return '
' . $this->t( $J::get( $field, 'description' ) ) . '
';
}
/** Absolutely positioned field icon . */
protected function datetime_icon( $field, $icon_position, $icon_color, $left_css, $right_css, $top ) {
return '';
}
/** String.prototype.replace(string, string): first occurrence only. */
protected function datetime_replace_first( $search, $replace, $subject ) {
$pos = strpos( $subject, $search );
return false === $pos ? $subject : substr_replace( $subject, $replace, $pos, strlen( $search ) );
}
protected function datetime_should_hide( $field ) {
$J = 'WPVFB_JS';
$v = $J::get( $field, 'visibility' );
return 'hidden' === $v || 'administrative' === $v || ( $J::truthy( $J::get( $field, 'enableConditionalLogic' ) ) && ! $J::truthy( $J::get( $field, 'conditionalLogicMet' ) ) );
}
// ------------------------------------------------------------------
/** renderTimeField — route.ts lines 5337-5561 */
public function render_time_field( $field, $gs ) {
$J = 'WPVFB_JS';
$f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
$g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };
$visibility_style = $this->datetime_should_hide( $field ) ? 'display: none;' : '';
$custom_class = $J::truthy( $f( 'cssClassName' ) ) ? ' ' . $J::str( $f( 'cssClassName' ) ) : '';
$label_class = 'left' === $g( 'labelPlacement' ) ? 'flex items-start space-x-4 w-full' : 'flex flex-col';
$input_border_color = $J::or_( $f( 'inputBorderColor' ), $g( 'inputBorderColor' ), '#D1D5DB' );
$hover_border_color = $J::or_( $f( 'hoverBorderColor' ), $g( 'hoverBorderColor' ), '#6B7280' );
$focus_border_color = $J::or_( $f( 'focusBorderColor' ), $g( 'focusBorderColor' ), '#3B82F6' );
$input_background_color = $J::or_( $f( 'inputBackgroundColor' ), $g( 'inputBackgroundColor' ), '#F9FAFB' );
$placeholder_text_color = $J::or_( $f( 'placeholderTextColor' ), $g( 'placeholderTextColor' ), '#9CA3AF' );
$description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );
$text_color = $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ), '#000000' );
$time_format = $J::or_( $f( 'timeFormat' ), '12hour' );
$is12 = '12hour' === $time_format;
$has_icon = $J::truthy( $f( 'fieldIcon' ) ) && 'none' !== $f( 'fieldIcon' );
$icon_position = $J::or_( $f( 'iconPosition' ), 'left' );
$icon_color = $J::or_( $f( 'iconColor' ), '#6B7280' );
$hour_placeholder = $J::or_( $f( 'subfields.hour.placeholder' ), 'HH' );
$minute_placeholder = $J::or_( $f( 'subfields.minute.placeholder' ), 'MM' );
$hour_value = $f( 'defaultValues.hour' ); // `?? undefined`: nullish → omitted
$minute_value = $f( 'defaultValues.minute' );
$ampm_value = $is12 ? $J::or_( $f( 'defaultValues.ampm' ), '' ) : '';
$input_styles = '
background-color: ' . $J::str( $input_background_color ) . ';
border-color: ' . $J::str( $input_border_color ) . ';
border-width: ' . $J::str( $J::or_( $g( 'inputSettings.borderWidth' ), 1 ) ) . 'px;
border-radius: ' . $J::str( $J::or_( $g( 'inputSettings.borderRadius' ), 4 ) ) . 'px;
border-style: solid !important;
font-family: inherit !important;
color: ' . $J::str( $text_color ) . ';
font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
line-height: ' . $J::str( $g( 'lineHeight' ) ) . 'px;
letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;
padding: 8px;
transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
text-align: center;
width: 100%;
';
$id_css = $this->css( $f( 'id' ) );
$ph = $this->css( $placeholder_text_color );
$placeholder_styles = '
input[id^="' . $id_css . '"]::placeholder {
color: ' . $ph . ' !important;
opacity: 1;
}
input[id^="' . $id_css . '"]:-ms-input-placeholder {
color: ' . $ph . ' !important;
}
input[id^="' . $id_css . '"]::-ms-input-placeholder {
color: ' . $ph . ' !important;
}
';
$width = $J::str( $J::or_( $f( 'width' ), '100%' ) );
$time_grid_styles = '
display: grid;
grid-template-columns: ' . ( $is12 ? '1fr auto 1fr 1fr' : '1fr auto 1fr' ) . ';
gap: 8px;
align-items: center;
width: ' . ( $has_icon ? 'calc(' . $width . ' - 24px)' : $width ) . ';
' . ( $has_icon ? 'margin-left: 24px;' : '' ) . '
';
$handlers = $this->datetime_handlers( $focus_border_color, $input_border_color, $hover_border_color );
$required_attr = $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '';
$id = $J::str( $f( 'id' ) );
$hour_input_html = '
';
$colon_html = '
:
';
$minute_input_html = '
';
$ampm_input_html = $is12 ? '
' : '';
$time_input_html = '
' . ( $has_icon ? $this->datetime_icon( $field, $icon_position, $icon_color, 'left: 0;', 'right: 0;', '50%' ) : '' ) . '
' . $hour_input_html . '
' . $colon_html . '
' . $minute_input_html . '
' . $ampm_input_html . '
' . $this->add_inline_css( $placeholder_styles ) . '
' . $this->datetime_label( $field, $gs, 'Time' ) . '
' . $this->datetime_description( $field, $gs, 'above', $description_color ) . '
' . $time_input_html . '
' . $this->datetime_description( $field, $gs, 'below', $description_color ) . '
' . $this->add_inline_css( $html_content_styles ) . '
' . $label_html . '
' . $this->h( $J::or_( $f( 'htmlContent' ), '
Enter your HTML content
' ) ) . '
' . $this->datetime_description( $field, $gs, 'below', $description_color ) . '
' . $this->t( $f( 'description' ) ) . '
';
};
$heading_html = 'hidden' !== $f( 'labelVisibility' )
? '<' . $heading_tag . ' style="' . $this->a( $heading_styles ) . '">
' . $this->t( $J::or_( $f( 'name' ), 'Section Heading' ) ) . '
'
: '';
return '
' . $desc( 'above' ) . '
' . $heading_html . '
' . $desc( 'below' ) . '
' . $icon_html . '
' . $sub_label( $key, $label_default ) . '
';
};
$subfields_html = '';
if ( $J::truthy( $f( 'subfields.prefix.isVisible' ) ) ) {
$subfields_html .= '
' . $icon_html . '
' . $sub_label( 'prefix', 'Prefix' ) . '
';
}
$subfields_html .= $text_input( 'first', 'First Name', 'First' );
$subfields_html .= $text_input( 'middle', 'Middle', 'Middle' );
$subfields_html .= $text_input( 'last', 'Last Name', 'Last' );
$subfields_html .= $text_input( 'suffix', 'Suffix', 'Suffix' );
return '
' . $this->add_inline_css( $placeholder_styles ) . '
' . $this->datetime_label( $field, $gs, 'Name' ) . '
' . $this->datetime_description( $field, $gs, 'above', $description_color ) . '
' . $this->add_inline_css( $name_field_responsive_styles ) . '
' . $subfields_html . '
' . $this->datetime_description( $field, $gs, 'below', $description_color ) . '
' . $icon_outside . '
' . $parts_html . '
' . ( $has_icon ? $this->datetime_icon( $field, $icon_position, $icon_color, 'left: 12px;', 'right: 12px;', '50%' ) : '' ) . '
' . ( 'no-icon' !== $f( 'datePickerIcon' )
? ''
: '' ) . '
' . ( $booking ? '
Select Available Timeslot:
' : '' ) . '
';
// Date dropdown
$months = array( 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' );
$current_year = (int) gmdate( 'Y' );
$selects_html = '';
foreach ( $placeholders as $part ) {
$key = $part_key( $part );
$dv = $default_for( $key );
$sel = function ( $v ) use ( $dv ) {
return ( is_string( $dv ) && $dv === (string) $v ) ? 'selected' : '';
};
$options = '';
if ( 'month' === $key ) {
for ( $m = 0; $m < 12; $m++ ) {
$options .= '';
}
} elseif ( 'day' === $key ) {
for ( $d = 0; $d < 31; $d++ ) {
$options .= '';
}
} else {
for ( $i = 0; $i < 100; $i++ ) {
$yr = $current_year - $i;
$options .= '';
}
}
$selects_html .= '
';
}
// The TS leaves the outer .relative div unclosed here; kept as-is for parity.
$date_dropdown_html = '
' . $icon_outside . '
' . $selects_html . '
';
$date_input_html = 'date-field' === $date_input_type
? $date_field_html
: ( 'date-picker' === $date_input_type ? $date_picker_html : $date_dropdown_html );
return '
' . $this->add_inline_css( $placeholder_styles . ( 'date-picker' === $date_input_type ? $date_picker_styles : '' ) ) . '
' . $this->datetime_label( $field, $gs, 'Date Field' ) . '
' . $this->datetime_description( $field, $gs, 'above', $description_color ) . '
' . $date_input_html . '
' . $this->datetime_description( $field, $gs, 'below', $description_color ) . '
';
}
}