<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
$qrcdr_patterns_lib = qrcdr_patterns()->get_patterns();
$qrcdr_patterns = $qrcdr_patterns_lib['patterns'];
$qrcdr_markers = $qrcdr_patterns_lib['markers'];
?>
<div class="accordion-body row">
	<div class="col-12">
		<label><?php esc_html_e( 'Pattern', 'qrcdr' ); ?></label>
	</div>
	<div class="col-12 mb-2 qrcdr-wrapselecta">
		<div class="qrcdr-styleselecta" data-bs-toggle="buttons">
			<div class="qrcdr-scrolling-nav-component">
				<div class="qrcdr-scrolling-nav-wrapper">

					<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-left" aria-label="Prev">
						<?php qrcdr_icons()->the_icon( 'ui', 'chevron-left' ); ?>
					</button>

					<div class="qrcdr-scrolling-nav">
						<div class="d-flex flex-nowrap">
						<?php
						$qrcdr_count = 0;
						foreach ( $qrcdr_patterns as $qrcdr_marker => $qrcdr_values ) {
							$qrcdr_count++;
							if ( isset( $qrcdr_values['preview'] ) ) {
								?>
								<input type="radio" name="pattern" value="<?php echo esc_attr( $qrcdr_marker ); ?>"<?php checked( 'default' == $qrcdr_marker ); ?> class="btn-check" id="qrcdr-pattern-<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
								<label class="btn rounded-0 p-2" for="qrcdr-pattern-<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
									<svg width="38" height="38" viewBox="0 0 6 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<?php qrcdr_patterns()->filtered_path( $qrcdr_values['preview'] ); ?>
									</svg>
								</label>
								<?php
							}
						}
						?>
						</div>
					</div>
					<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-right" aria-label="Next">
						<?php qrcdr_icons()->the_icon( 'ui', 'chevron-right' ); ?>
					</button>
				</div>
			</div>
		 </div>
	</div>
	<div class="col-12">
		<label><?php esc_html_e( 'Marker border', 'qrcdr' ); ?></label>
	</div>
	<div class="col-12 mb-2 qrcdr-wrapselecta">
		<div class="qrcdr-styleselecta" data-bs-toggle="buttons">
			<div class="qrcdr-scrolling-nav-component">
				<div class="qrcdr-scrolling-nav-wrapper">
					<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-left" aria-label="Prev">
						<?php qrcdr_icons()->the_icon( 'ui', 'chevron-left' ); ?>
					</button>
					<div class="qrcdr-scrolling-nav">
						<div class="d-flex flex-nowrap">
						<?php
						$qrcdr_count = 0;

						foreach ( $qrcdr_markers as $qrcdr_marker => $qrcdr_values ) {
							$qrcdr_count++;
							?>
								<input type="radio" name="marker_out" value="<?php echo esc_attr( $qrcdr_marker ); ?>"<?php checked( 'default' == $qrcdr_marker ); ?> class="btn-check" id="qrcdr-marker-<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
								<label class="btn rounded-0 p-2" for="qrcdr-marker-<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
									<svg width="32" height="32" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<?php qrcdr_patterns()->filtered_path( $qrcdr_values['path'] ); ?>
									</svg>
								</label>
								<?php
						}
						?>
						</div>
					</div>
					<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-right" aria-label="Next">
						<?php qrcdr_icons()->the_icon( 'ui', 'chevron-right' ); ?>
					</button>
				</div>
			</div>
		</div>
	</div>
	<div class="col-12">
		<label><?php esc_html_e( 'Marker center', 'qrcdr' ); ?></label>
	</div>
	<div class="col-12 qrcdr-wrapselecta">
		<div class="qrcdr-styleselecta d-inline-block-NO" data-bs-toggle="buttons">
			<div class="qrcdr-scrolling-nav-component">
				<div class="qrcdr-scrolling-nav-wrapper">
					<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-left" aria-label="Prev">
						<?php qrcdr_icons()->the_icon( 'ui', 'chevron-left' ); ?>
					</button>
					<div class="qrcdr-scrolling-nav">
						<div class="d-flex flex-nowrap">
						<?php
						$qrcdr_count = 0;
						foreach ( $qrcdr_patterns as $qrcdr_marker => $qrcdr_values ) {
							$qrcdr_count++;
							if ( isset( $qrcdr_values['marker'] ) && true === $qrcdr_values['marker'] ) {
								?>
								<input type="radio" name="marker_in" value="<?php echo esc_attr( $qrcdr_marker ); ?>"<?php checked( 'default' == $qrcdr_marker ); ?> class="btn-check" id="qrcdr-markerin-<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
								<label class="btn rounded-0 p-2" for="qrcdr-markerin-<?php echo esc_attr( $qrcdr_count ); ?>-id-<?php echo esc_attr( $form_id ); ?>">
									<svg width="14" height="14" viewBox="0 0 6 6" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
										<?php qrcdr_patterns()->filtered_path( $qrcdr_values['path'] ); ?>
									</svg>
								</label>
								<?php
							}
						}
						?>
						</div>
					</div>
					<button class="btn btn-glass qrcdr-scroll-btn qrcdr-scroll-btn-right" aria-label="Next">
						<?php qrcdr_icons()->the_icon( 'ui', 'chevron-right' ); ?>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="accordion-body">
	<div class="row">
		<div class="col-12">
			<div data-qrcdr-target=".collapse-markers-bg-<?php echo esc_attr( $form_id ); ?>" data-qrcdr-toggle="collapse">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['markers_color'] ); ?>
			</div>
		</div>
	</div>

	<div class="qrcdr-collapse collapse-markers-bg-<?php echo esc_attr( $form_id ); ?>">
		<div class="qrcdr-collapse-inner">
			<div class="row">
				<div class="col-sm-6">
					<div class="mb-3">
						<label><?php esc_html_e( 'Marker border', 'qrcdr' ); ?></label>
						<div class="d-flex">
							<div class="d-flex px-3 align-items-center">
								<?php qrcdr_icons()->the_icon( 'ui', 'eye_out' ); ?>
							</div>
							<?php qrcdr_renderer()->the_input( $feature['inputs']['marker_out_color'] ); ?>
						</div>
					</div>

					<div class="mb-3">
						<label><?php esc_html_e( 'Marker center', 'qrcdr' ); ?></label>
						<div class="d-flex">
							<div class="d-flex px-3 align-items-center">
								<?php qrcdr_icons()->the_icon( 'ui', 'eye_in' ); ?>
							</div>
							<?php qrcdr_renderer()->the_input( $feature['inputs']['marker_in_color'] ); ?>
						</div>
					</div>
				</div>

				<div class="col-sm-6">
					<div class="qrcdr-collapse collapse-different-markers-bg-<?php echo esc_attr( $form_id ); ?>">
						<div class="qrcdr-collapse-inner">
							<div class="mb-3">
								<label><?php esc_html_e( 'Top Right', 'qrcdr' ); ?></label>
								<div class="d-flex">
									<div class="d-flex px-3 align-items-center">
										<?php qrcdr_icons()->the_icon( 'ui', 'eye_out' ); ?>
									</div>
									<?php qrcdr_renderer()->the_input( $feature['inputs']['marker_top_right_outline'] ); ?>
								</div>
							</div>
							<div class="mb-3">
								<label><?php esc_html_e( 'Top Right', 'qrcdr' ); ?></label>
								<div class="d-flex">
									<div class="d-flex px-3 align-items-center">
										<?php qrcdr_icons()->the_icon( 'ui', 'eye_in' ); ?>
									</div>
									<?php qrcdr_renderer()->the_input( $feature['inputs']['marker_top_right_center'] ); ?>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div data-qrcdr-toggle="collapse" data-qrcdr-target=".collapse-different-markers-bg-<?php echo esc_attr( $form_id ); ?>">
						<?php qrcdr_renderer()->the_input( $feature['inputs']['different_markers_color'] ); ?>
					</div>
				</div>
			</div>

			<div class="qrcdr-collapse collapse-different-markers-bg-<?php echo esc_attr( $form_id ); ?>">
				<div class="qrcdr-collapse-inner">
					<div class="row">
						<div class="col-sm-6">
							<div class="mb-3">
								<label><?php esc_html_e( 'Bottom Left', 'qrcdr' ); ?></label>
								<div class="d-flex">
									<div class="d-flex px-3 align-items-center">
										<?php qrcdr_icons()->the_icon( 'ui', 'eye_out' ); ?>
									</div>
									<?php qrcdr_renderer()->the_input( $feature['inputs']['marker_bottom_left_outline'] ); ?>
								</div>
							</div>
							<div class="mb-3">
								<label><?php esc_html_e( 'Bottom Left', 'qrcdr' ); ?></label>
								<div class="d-flex">
									<div class="d-flex px-3 align-items-center">
										<?php qrcdr_icons()->the_icon( 'ui', 'eye_in' ); ?>
									</div>
									<?php qrcdr_renderer()->the_input( $feature['inputs']['marker_bottom_left_center'] ); ?>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
