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

$p_id         = $args['p_id'] ?? '';
$current_step = $args['current_step'] ?? '';
$redirect_url = $args['redirect_url'] ?? '';

$description = ! empty( $p_id ) ? gigneo_post_meta( $p_id, '_gigneo_pm_description' ) : '';
$faqs        = ! empty( $p_id ) ? gigneo_post_meta( $p_id, '_gigneo_pm_faqs' ) : array();

$disable_cities       = gigneo_option( '_gigneo_ts_disable_cities' );
$country_state_list   = gigneo_countries_with_states( 'active' );
$country_state_cities = gigneo_country_state_cities();

$template_args = array(
	'p_id'                 => $p_id,
	'disable_cities'       => $disable_cities,
	'country_state_list'   => $country_state_list,
	'country_state_cities' => $country_state_cities,
);
?>
<div id="gn-service-edit-details" class="gn-service-edit-step gn-service-edit-details <?php echo esc_attr( 'details' !== $current_step ? ' d-none' : '' ); ?>">
	<div class="row gy-4">
		<div class="col-lg-8 col-xl-9 order-2 order-lg-1">
			<form id="gn-service-form-details" class="gn-main gn-service-edit-form">
				<div class="gn-edit-service-section">
					<div class="gn-body">
						<div class="gn-form-fields">
							<div class="gn-form-field gn-wysiwyg-editor-two">
								<label for="gn-description" class="gn-required-field-label">
									<?php echo esc_html__( 'Description', 'gigneo' ); ?>
								</label>
								<?php
								wp_editor(
									wp_kses_post( $description ),
									'gn-description',
									array(
										'textarea_name' => 'description',
										'media_buttons' => false,
										'quicktags'     => false,
										'textarea_rows' => 10,
										'editor_class'  => 'gn-wp-editor gn-required-field',
										'tinymce'       => array(
											'toolbar1' => 'bold italic bullist numlist link unlink',
											'toolbar2' => '',
											'plugins'  => 'lists link',
											'directionality' => is_rtl() ? 'rtl' : 'ltr',
											'forced_root_block' => false,
											'force_br_newlines' => true,
											'force_p_newlines' => false,
											'convert_newlines_to_brs' => true,
											'valid_elements' => 'strong/b,em/i,ul,ol,li,a[href|target],br,hr,p,pre',
											'invalid_elements' => 'h1,h2,h3,h4,h5,h6,img',
											'content_style' => 'body { font-size: 14px; background-color: transparent; font-family: var(--gigneo-primary-font,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji) }',
										),
									)
								);
								?>
							</div>
						</div>
					</div>
				</div>
				<?php gigneo_load_template( 'dashboard/service/parts/edit/delivery', false, $template_args ); ?>
				<?php gigneo_load_template( 'dashboard/service/parts/edit/locations', false, $template_args ); ?>
				<div class="gn-edit-service-section">
					<div class="gn-head">
						<div class="gn-heading-area">
							<h3 class="gn-title"><?php echo esc_html__( 'Frequently asked questions', 'gigneo' ); ?></h3>
							<p class="gn-description"><?php echo esc_html__( 'Add questions to clarify client doubts and reduce repeated inquiries.', 'gigneo' ); ?></p>
						</div>
						<div class="gn-actions">
							<button type="button" class="gn-link gn-link-primary gn-add-faq">
								<i class="hi hi-plus" aria-hidden="true"></i>
								<?php echo esc_html__( 'Add a question', 'gigneo' ); ?>
							</button>
						</div>
					</div>
					<div class="gn-body">
						<div class="gn-faqs">
							<?php
							if ( ! empty( $faqs ) ) {
								foreach ( $faqs as $index => $faq ) {
									?>
									<div id="gn-faq-<?php echo esc_attr( $index ); ?>" class="gn-faq">
										<div class="gn-form-fields">
											<div class="gn-form-field">
												<label class="gn-required-field-label"
														for="gn-question-<?php echo esc_attr( $index ); ?>"><?php echo esc_html__( 'Question', 'gigneo' ); ?> </label>
												<button type="button" class="gn-btn gn-remove-faq"
														data-gn-remove-faq-id="<?php echo esc_attr( $index ); ?>"
														data-gn-faq-id="<?php echo esc_attr( $index ); ?>"><i
															class="hi hi-trash" aria-hidden="true"></i>
													<?php echo esc_html__( 'Remove', 'gigneo' ); ?>
												</button>
												<input id="gn-question-<?php echo esc_attr( $index ); ?>"
														class="gn-required-field" type="text"
														name="faqs[<?php echo esc_attr( $index ); ?>][question]"
														autocomplete="off"
														value="<?php echo esc_html( $faq['question'] ?? '' ); ?>">
											</div>
											<div class="gn-form-field">
												<label class="gn-required-field-label"
														for="gn-faq-answer-<?php echo esc_attr( $index ); ?>"><?php echo esc_html__( 'Answer', 'gigneo' ); ?> </label>
												<textarea id="gn-faq-answer-<?php echo esc_attr( $index ); ?>"
															class="gn-required-field gn-textarea-counter"
															name="faqs[<?php echo esc_attr( $index ); ?>][answer]"
															autocomplete="off" rows="5"
															placeholder="<?php echo esc_attr__( 'Enter description here', 'gigneo' ); ?>"><?php echo esc_html( $faq['answer'] ?? '' ); ?></textarea>
											</div>
										</div>
									</div>
									<?php
								}
							}
							?>
						</div>
					</div>
				</div>
				<div class="gn-edit-service-footer gn-actions">
					<button type="button" data-gn-step="details" data-gn-type="draft" data-gn-redirect-url="<?php echo esc_url( $redirect_url ); ?>" class="gn-btn gn-btn-outline-grey gn-service-save"><?php echo esc_html__( 'Save as draft', 'gigneo' ); ?></button>
					<button type="button" data-gn-step="details" data-gn-prev-step="pricing" class="gn-btn gn-btn-outline-grey gn-service-back">
						<?php echo esc_html__( 'Back', 'gigneo' ); ?>
					</button>
					<button type="button" data-gn-step="details" data-gn-type="continue" data-gn-next-step="media" class="gn-btn gn-btn-primary gn-service-save">
						<?php echo esc_html__( 'Save & continue', 'gigneo' ); ?>
					</button>
				</div>
			</form>
		</div>
		<div class="col-lg-4 col-xl-3 order-1 order-lg-2">
			<div class="gn-aside">
				<div class="gn-aside-content">
					<h4 class="gn-title"><?php echo esc_html__( 'Service details:', 'gigneo' ); ?></h4>
					<div class="gn-aside-body">
						<p class="gn-description"><?php echo esc_html__( 'Describe your service clearly to outline the process, deliverables, and expectations.', 'gigneo' ); ?></p>
						<p class="gn-description"><?php echo esc_html__( 'Add your location to help clients find region-specific services.', 'gigneo' ); ?></p>
						<p class="gn-description"><?php echo esc_html__( 'Answer common questions to clarify client doubts and reduce repeated inquiries.', 'gigneo' ); ?></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--Edit Location Modal-->
	<div id="gn-edit-service-location" class="gn-modal-wrapper gn-service-location-modal">
		<div class="gn-modal-dialog">
			<div class="gn-modal-content">
				<div class="gn-modal-info">
					<div class="gn-modal-header">
						<h4 class="gn-title"><?php echo esc_html__( 'Location', 'gigneo' ); ?></h4>
						<p class="gn-description"><?php echo esc_html__( 'Specify your location to help clients find regin-relevant services.', 'gigneo' ); ?></p>
						<button type="button" data-gn-modal-close="gn-edit-service-location" class="gn-modal-close">
							<i class="hi hi-x-mark" aria-hidden="true"></i>
						</button>
					</div>
					<form id="gn-save-service-location-form" class="gn-theme-form gn-save-service-location-form">
						<div class="gn-modal-body gn-custom-scrollbar">
							<fieldset class="gn-form-fields">
								<div class="row g-4">
									<div class="col-md-6">
										<div class="gn-form-field gn-select2">
											<label for="gn-country-state" class="gn-required-field-label"><?php echo esc_html__( 'Country / State', 'gigneo' ); ?></label>
											<select id="gn-country-state" name="country_state" class="gn-required-field">
												<?php foreach ( $country_state_list as $key => $country_state ) { ?>
													<option value="<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $country_state ); ?></option>
												<?php } ?>
											</select>
										</div>
									</div>
									<?php if ( ! $disable_cities ) { ?>
										<div class="col-md-6">
											<div class="gn-form-field gn-select2">
												<label for="gn-city"><?php echo esc_html__( 'City', 'gigneo' ); ?></label>
												<select id="gn-city" name="city" placeholder="<?php echo esc_html__( 'None', 'gigneo' ); ?>"></select>
											</div>
										</div>
									<?php } ?>
									<div class="col-md-6">
										<div class="gn-form-field">
											<label for="gn-zip-code" class="gn-required-field-label"><?php echo esc_html__( 'Postcode / ZIP', 'gigneo' ); ?></label>
											<input id="gn-zip-code" type="text" class="gn-required-field" name="zip_code" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Enter postcode or ZIP', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-<?php echo esc_attr( ! $disable_cities ? '6' : '12' ); ?>">
										<div class="gn-form-field">
											<label for="gn-area"><?php echo esc_html__( 'Area', 'gigneo' ); ?></label>
											<input id="gn-area" type="text" name="area" autocomplete="off" value="" placeholder="<?php echo esc_attr__( 'Block / Sector / Town', 'gigneo' ); ?>">
										</div>
									</div>
									<div class="col-md-12">
										<div class="gn-form-field">
											<label for="gn-address" class="gn-required-field-label"><?php echo esc_html__( 'Address', 'gigneo' ); ?></label>
											<textarea id="gn-address" class="gn-required-field" name="friendly_address" autocomplete="off" rows="5" placeholder="<?php echo esc_attr__( 'Enter friendly address', 'gigneo' ); ?>"></textarea>
										</div>
									</div>
								</div>
							</fieldset>
						</div>
						<div class="gn-modal-footer">
							<input type="hidden" name="location_id" value="">
							<button type="button" class="gn-btn gn-btn-outline-grey" data-gn-modal-close="gn-edit-service-location"><?php echo esc_html__( 'Close', 'gigneo' ); ?></button>
							<button type="submit" class="gn-btn gn-btn-primary"><?php echo esc_html__( 'Save', 'gigneo' ); ?></button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<!--Faq-->
<script type="text/template" id="tmpl-gn-faq">
	<div id="gn-faq-{{data.index}}" class="gn-faq">
		<div class="gn-form-fields">
			<div class="gn-form-field">
				<label class="gn-required-field-label" for="gn-question-{{data.index}}"><?php echo esc_html__( 'Question', 'gigneo' ); ?></label>
				<button type="button" class="gn-btn gn-remove-faq" data-gn-remove-faq-id="{{data.index}}" data-gn-faq-id="{{data.index}}"><i class="hi hi-trash" aria-hidden="true"></i>
					<?php echo esc_html__( 'Remove', 'gigneo' ); ?>
				</button>
				<input id="gn-question-{{data.index}}" class="gn-required-field" type="text" name="faqs[{{data.index}}][question]" autocomplete="off" value="">
			</div>
			<div class="gn-form-field">
				<label class="gn-required-field-label" for="gn-faq-answer-{{data.index}}"><?php echo esc_html__( 'Answer', 'gigneo' ); ?></label>
				<textarea id="gn-faq-answer-{{data.index}}" class="gn-required-field gn-textarea-counter" name="faqs[{{data.index}}][answer]" autocomplete="off" rows="5" placeholder="<?php echo esc_attr__( 'Enter description here', 'gigneo' ); ?>"></textarea>
			</div>
		</div>
	</div>
</script>
