<?php
/**
 * Contact Form Block - Frontend Render
 *
 * @package PufferGo
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$attrs          = $attributes ?? array();
$title          = isset( $attrs['title'] ) ? $attrs['title'] : 'Contact Us';
$subtitle       = isset( $attrs['subtitle'] ) ? $attrs['subtitle'] : '';
$fields         = isset( $attrs['fields'] ) && is_array( $attrs['fields'] ) ? $attrs['fields'] : array();
$button_text    = ! empty( $attrs['buttonText'] ) ? $attrs['buttonText'] : 'Submit';
$success_msg    = isset( $attrs['successMessage'] ) ? $attrs['successMessage'] : '';
$success_url    = isset( $attrs['successUrl'] ) ? $attrs['successUrl'] : '/thank-you';

// Fallback to default fields if empty
if ( empty( $fields ) ) {
	$fields = array(
		array( 'name' => 'name',    'label' => 'Your Name', 'required' => true ),
		array( 'name' => 'email',   'label' => 'Email',     'required' => true ),
		array( 'name' => 'phone',   'label' => 'Phone',     'required' => false ),
		array( 'name' => 'message', 'label' => 'Message',   'required' => true ),
	);
}

$form_attrs = 'data-pg-submit="contact"';
if ( $success_msg ) {
	$form_attrs .= ' data-pg-success-text="' . esc_attr( $success_msg ) . '"';
}
if ( $success_url ) {
	$form_attrs .= ' data-pg-success-url="' . esc_attr( $success_url ) . '"';
}

$wrapper_attributes = get_block_wrapper_attributes();
?>
<div <?php echo $wrapper_attributes; ?>>
	<section class="bg-white">
		<div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
			<?php if ( $title ) : ?>
			<div class="text-center mb-12">
				<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"><?php echo esc_html( $title ); ?></h2>
				<?php if ( $subtitle ) : ?>
				<p class="mt-4 text-lg text-gray-500"><?php echo esc_html( $subtitle ); ?></p>
				<?php endif; ?>
			</div>
			<?php endif; ?>

			<form <?php echo $form_attrs; ?> class="bg-gray-50 rounded-2xl p-8 sm:p-12">
				<div class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-6">
				<?php foreach ( $fields as $field ) :
					$name     = isset( $field['name'] ) ? sanitize_key( $field['name'] ) : '';
					$label    = isset( $field['label'] ) ? $field['label'] : $name;
					$required = ! empty( $field['required'] );
					$is_message = ( 'message' === $name );
					$is_email   = ( 'email' === $name );
					$input_type = $is_email ? 'email' : 'text';
					$input_class = 'mt-2 block w-full rounded-md border-0 py-2.5 px-3.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6';
				?>
					<div class="<?php echo $is_message ? 'sm:col-span-2' : ''; ?>">
						<label for="pg-cf-<?php echo esc_attr( $name ); ?>" class="block text-sm font-medium text-gray-700">
							<?php echo esc_html( $label ); ?><?php if ( $required ) : ?> *<?php endif; ?>
						</label>
						<?php if ( $is_message ) : ?>
						<textarea name="<?php echo esc_attr( $name ); ?>" id="pg-cf-<?php echo esc_attr( $name ); ?>" rows="5" <?php echo $required ? 'required' : ''; ?> class="<?php echo esc_attr( $input_class . ' resize-none' ); ?>" placeholder="<?php echo esc_attr( $label ); ?>"></textarea>
						<?php else : ?>
						<input type="<?php echo esc_attr( $input_type ); ?>" name="<?php echo esc_attr( $name ); ?>" id="pg-cf-<?php echo esc_attr( $name ); ?>" <?php echo $required ? 'required' : ''; ?> class="<?php echo esc_attr( $input_class ); ?>" placeholder="<?php echo esc_attr( $label ); ?>">
						<?php endif; ?>
					</div>
				<?php endforeach; ?>
				</div>

				<div class="mt-8">
					<button type="submit" class="w-full inline-flex justify-center items-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">
						<span><?php echo esc_html( $button_text ); ?></span>
						<svg class="ml-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
						</svg>
					</button>
					<div data-pg-form-status class="mt-4 text-sm text-center"></div>
				</div>
			</form>
		</div>
	</section>
</div>
