<?php global $post, $thepostid; ?>
	<div id="wc_lotery_answers-tb" class="" >
			<?php
			
				
				woocommerce_wp_textarea_input( array(
						'id'          => '_rpwoo_question',
						'label'       => __( 'Question', 'raffle-play-woo' ),
						'desc_tip'    => true,
						'description' => __( 'Ask user a question.', 'raffle-play-woo' )
					) 
				);

			?>
		<div class="lotery_answers_wrapper wc-metaboxes answers">
			<?php
				// Product answers - taxonomies and custom, ordered, with visibility and variation answers set
				$answers = maybe_unserialize( get_post_meta( $thepostid, '_rpwoo_answers', true ) );
				// Output All Set answers
				
				if ( ! empty( $answers ) ) {
					foreach ($answers as $answer_key => $answer) {
						$metabox_class = array();
						include( 'product_admin_answers.php');
					}
				}
			?>
		</div>
		<div class="toolbar">
			<button type="button" class="button add_rpwoo_answer"><?php esc_html_e( 'Add Answer', 'raffle-play-woo' ); ?></button>
		</div>
	</div>

	<script>
(function( $) {
    $( document ).ready( function (){
     
        $('.add_rpwoo_answer').on('click', function() {
           
            let key = $('input.rpwoo_answer.input_text').length + 1;
            let answerFields = `
                    <div class="woocommerce_rpwoo_answer_box wc-metabox closed form-field" rel="">
                    <div class="woocommerce_answer_data" style='padding:10px;'>
                        <table cellpadding="0" cellspacing="0" width="100%">
                            <tbody>
                                <tr style='margin: 10px;'>
                                    <td>
                                        <input type="text" class="rpwoo_answer input_text" name="rpwoo_answer[${key}]" size="20" value="" data-answer-id="${key}" />
                                    </td>
                                    <td class="remove-answer"><a href="javascript::;" class="remove_row delete">Remove</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
            $('.lotery_answers_wrapper ').append(answerFields);
        });


        $("#_raffle_use_answers").on('change', function() {
            if (this.checked) {
                $('#wc_lotery_answers-tb').slideDown('fast');
                $("#_rpwoo_question").prop('required', true);
                $('.form-field._rpwoo_only_true_answers_field').show();
            } else {
                $('#wc_lotery_answers-tb').slideUp('fast');
                $("#_rpwoo_question").prop('required', false);
                $('.form-field._rpwoo_only_true_answers_field').hide();
            }
        });


        if (typeof $('#_raffle_use_answers') !== 'undefined' && $('#_raffle_use_answers').is(':checked')) {
            $('#wc_lotery_answers-tb').show();
            $('.form-field._rpwoo_only_true_answers_field').show();
            $("#_rpwoo_question").prop('required', true);
        }else{
            $('#wc_lotery_answers-tb').hide();
            $('.form-field._rpwoo_only_true_answers_field').hide();
            $("#_rpwoo_question").prop('required', false);
        }
    });

    $(document).on('click','.woocommerce_answer_data .remove_row',function(e){
		e.preventDefault();
		$(this).parent().closest('div.woocommerce_answer_data').remove(); 
    });

})(jQuery);

</script>