<?php
/**
 * Load admin view for Form Customer SMS Notification.
 *
 * @package miniorange-sms-order-notification-otp-verification/notifications/formsmsnotification/views/smsnotifications
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

$mowc_tags = array();
if ( isset( $mowc_sms_settings->available_tags ) && is_string( $mowc_sms_settings->available_tags ) ) {
	$mowc_tags = explode( ',', $mowc_sms_settings->available_tags );
	$mowc_tags = array_map( 'trim', $mowc_tags );
	$mowc_tags = array_filter( $mowc_tags );
}

$mowc_tag_icon = '
	<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
		<g>
			<path d="M15.712 10.0555C15.2239 10.5437 14.4324 10.5437 13.9442 10.0555Z" fill="#28303F"></path>
		</g>
	</svg>
';

$mowc_crown_icon = '
	<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
		<g>
			<path d="M4.23104 18.3765Z" stroke="black"></path>
		</g>
	</svg>
';

echo '
	<div>
		<div class="mt-mowc-3 flex flex-col gap-mowc-6">
			<div class="w-full flex">
				<div class="flex-1">
					<h5 class="mowc-title flex items-center gap-mowc-2">
						' . esc_html__( 'Phone Field Name', 'miniorange-sms-order-notification-otp-verification' ) . '
					</h5>
					<p class="mowc-caption mt-mowc-2">' .
						sprintf(
							/* translators: 1: Phone field name, 2: Form title */
							esc_html__( 'Enter the %1$s of your %2$s', 'miniorange-sms-order-notification-otp-verification' ),
							esc_html( isset( $mowc_sms_settings->phone_input ) ? $mowc_sms_settings->phone_input : '' ),
							esc_html( isset( $mowc_sms_settings->title ) ? $mowc_sms_settings->title : '' )
						) .
					'</p>
				</div>
				<div class="flex-1 flex flex-wrap">
					<input
						type="text"
						name="' . esc_attr( $mowc_recipient_tag ) . '"
						id="' . esc_attr( $mowc_recipient_tag ) . '"
						value="' . esc_attr( $mowc_recipient_value ) . '"
						class="w-full mowc-input"
						placeholder="' . esc_html__( 'Enter the Name of Phone Number Field.', 'miniorange-sms-order-notification-otp-verification' ) . '"
					/>
				</div>
			</div>

			<div class="w-full flex">
				<div class="flex-1">
					<h5 class="mowc-title">SMS Template</h5>
					<p class="mowc-caption mt-mowc-2">' .
						esc_html( isset( $mowc_sms_settings->page_description ) ? $mowc_sms_settings->page_description : '' ) .
					'</p>
				</div>
				<div class="flex-1">
					<textarea
						id="' . esc_attr( $mowc_textarea_tag ) . '"
						class="mowc-textarea mowc_remaining_characters w-full"
						name="' . esc_attr( $mowc_textarea_tag ) . '"
						placeholder="' . esc_attr( isset( $mowc_sms_settings->default_sms_body ) ? $mowc_sms_settings->default_sms_body : '' ) . '"
					>' .
						esc_textarea( isset( $mowc_sms_settings->sms_body ) ? $mowc_sms_settings->sms_body : '' ) .
					'</textarea>
					<span id="characters" class="flex-1">' .
						esc_html__( 'Remaining Characters:', 'miniorange-sms-order-notification-otp-verification' ) .
						' <span id="remaining_' . esc_attr( $mowc_textarea_tag ) . '"></span>
					</span>
				</div>
			</div>

			<div class="w-full flex">
				<div class="flex-1">
					<h5 class="mowc-title flex items-center gap-mowc-2">' .
						wp_kses(
							$mowc_tag_icon,
							array(
								'svg'  => array(
									'width'   => true,
									'height'  => true,
									'viewbox' => true,
									'fill'    => true,
								),
								'g'    => array(),
								'path' => array(
									'd'    => true,
									'fill' => true,
								),
							)
						) .
						' ' . esc_html__( 'Replaceable Tags', 'miniorange-sms-order-notification-otp-verification' ) .
					'</h5>
				</div>
				<div class="flex-1 mowc-tags-section">';

if ( is_array( $mowc_tags ) ) {
	foreach ( $mowc_tags as $mowc_val ) {
		if ( is_string( $mowc_val ) ) {
			echo '<div class="mowc-tag bg-slate-100">' . esc_html( $mowc_val ) . '</div>';
		}
	}
}

echo '
				</div>
			</div>
		</div>
	</div>';
