<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>
<div class="accordion-body mb-2 custom-background">
	<div class="row">

		<div class="col-sm-6">
			<div class="mb-3">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['backcolor'] ); ?>
			</div>

			<?php qrcdr_renderer()->the_input( $feature['inputs']['transparent'] ); ?>
		</div>

		<div class="col-sm-6">
			<div class="mb-3">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['frontcolor'] ); ?>
			</div>

			<div data-qrcdr-toggle="collapse" data-qrcdr-target="#collapse-gradient-<?php echo esc_attr( $form_id ); ?>">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['gradient'] ); ?>
			</div>

			<div class="qrcdr-collapse" id="collapse-gradient-<?php echo esc_attr( $form_id ); ?>">
				<div class="qrcdr-collapse-inner">
					<?php qrcdr_renderer()->the_input( $feature['inputs']['gradient_color'] ); ?>
					<?php qrcdr_renderer()->the_input( $feature['inputs']['radial'] ); ?>
				</div>
			</div>
		</div>

		<div class="col-12">
			<div data-qrcdr-toggle="collapse" data-qrcdr-target="#collapse-image-bg-<?php echo esc_attr( $form_id ); ?>">
				<?php qrcdr_renderer()->the_input( $feature['inputs']['transparent_code'] ); ?>
			</div>
		</div>
	</div>
	<div class="qrcdr-collapse" id="collapse-image-bg-<?php echo esc_attr( $form_id ); ?>">
		<div class="qrcdr-collapse-inner">
			<div class="row qrcdr-image-crop">
				<div class="col-md-6">
					<input type="file" class="qrcdr-image-input nopreview" accept="image/*">
					<input class="qrcdr-bg-image" type="hidden" name="bg_image">
					<div class="qrcdr-select-image-btn d-flex align-items-center justify-content-center position-relative border mb-3">
						<img role="button" width="150px" src='<?php echo esc_url( plugin_dir_url( dirname( __DIR__ ) ) . 'images/upload.svg' ); ?>'/>
						<button type="button" class="btn btn-primary btn-sm rounded-0 qrcdr-remove-bg-image d-none position-absolute top-0 start-0">
							<?php qrcdr_icons()->the_icon( 'ui', 'x' ); ?>
						</button>
					</div>
					<?php qrcdr_renderer()->the_input( $feature['inputs']['negative_qr'] ); ?>
				</div>
				<div class="col-md-6">
					<div>
						<div class="qrcdr-image-editor d-none"></div>
					</div>
					<div class="d-grid col-8 mx-auto">
						<button type="button" class="btn btn-primary qrcdr-export-bg-image d-none">
							<?php qrcdr_icons()->the_icon( 'ui', 'check' ) . ' ' . esc_html__( 'Set background', 'qrcdr' ); ?>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>