// Adding Meta container admin shop_order pages - Thêm hộp meta vào trang shop_order.
add_action( 'add_meta_boxes', 'prefix_add_meta_boxes' );
function prefix_add_meta_boxes() {
add_meta_box( 'prefix_other_fields', __('Trạng thái Checkin','woocommerce'), 'prefix_add_other_fields_for_packaging', 'shop_order', 'side', 'core' );
}

function prefix_add_other_fields_for_packaging() {
global $post;
$meta_field_data = get_post_meta( $post->ID, '_checkin_field_slug', true );
if ($meta_field_data === 'checked-in') {
$meta_field_data = 'Đã Check-in';
$background_color = '#79c302'; // set green background color
} else {
$meta_field_data = ''; // reset meta field data to empty string
$background_color = '#ebebeb'; // set gray background color
}
$button_text = empty( $meta_field_data ) ? __( 'Vào Check-in', 'woocommerce' ) : __( 'Hủy Check-in', 'woocommerce' );
echo '<input type="hidden" name="prefix_other_meta_field_nonce" value="' . wp_create_nonce( 'prefix_other_meta_field_nonce' ) . '">
<p class="prefix-field">
<label for="prefix-checkin-field">' . __('', 'woocommerce' ) . '</label>
<input type="text" id="prefix-checkin-field" placeholder="Chưa Checkin" name="checkin_field_name" value="' . esc_attr( $meta_field_data ) . '" readonly style="text-align: center; background-color: ' . $background_color . ';">
<button type="button" class="prefix-checkin-button">' . $button_text . '</button>
</p>';
}

// Save the data of the Meta field
add_action( 'save_post', 'prefix_save_wc_order_other_fields', 10, 1 );
function prefix_save_wc_order_other_fields( $post_id ) {
    // We need to verify this with the proper authorization (security stuff).
    // Check if our nonce is set.
    if ( ! isset( $_POST['prefix_other_meta_field_nonce'] ) ) {
        return $post_id;
    }

    $nonce = $_POST['prefix_other_meta_field_nonce'];

    //Verify that the nonce is valid.
    if ( ! wp_verify_nonce( $nonce, 'prefix_other_meta_field_nonce' ) ) {
        return $post_id;
    }

    // If this is an autosave, our form has not been submitted, so we don't want to do anything.
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }

    // Check the user's permissions.
    if ( 'page' == $_POST['post_type'] ) {
        if ( ! current_user_can( 'edit_page', $post_id ) ) {
            return $post_id;
        }
    } else {
        if ( ! current_user_can( 'edit_post', $post_id ) ) {
            return $post_id;
        }
    }
	
	// Sanitize user input and update the meta field in the database.
	$meta_field_data = isset( $_POST[ 'checkin_field_name' ] ) ? sanitize_text_field( $_POST[ 'checkin_field_name' ] ) : '';

	// Update the meta field in the database
	update_post_meta( $post_id, '_checkin_field_slug', $meta_field_data );
}

// Add Button.
function prefix_add_custom_js() {
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/checkin-button.js', array('jquery'), '', true );
}
add_action( 'admin_enqueue_scripts', 'prefix_add_custom_js' );

function prefix_add_custom_styles() {
    wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/styles/order-page.css' );
}
add_action( 'admin_enqueue_scripts', 'prefix_add_custom_styles' );

jQuery(document).ready(function($) {
    $('.prefix-checkin-button').click(function() {
        var $input = $(this).prev('input');
        var hasValue = $input.val() !== '';
        $input.val(hasValue ? '' : 'checked-in');
        $(this).text(hasValue ? 'Vào Check-in' : 'Hủy Check-in');

        // Trigger save function
        $('form#post').submit();
    });
});

.prefix-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1rem;
}

.prefix-field label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.prefix-field input[type="text"] {
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: white !important;
  padding: 0.5rem;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  width: 100%;
}

.prefix-checkin-button {
  background-color: #007cba;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
  width: 100%;
}

.prefix-checkin-button:hover {
  background-color: #005c8a;
}

.prefix-field input[type=text] {
    background-color: gray;
    color: #fff;
}

.prefix-field input[type=text][value="checked-in"] {
    background-color: green;
}

/* START CSS for order list style */
/* Button Style */
button.update-custom-field {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

/* Hover effect */
button.update-custom-field:hover {
  background-color: #3e8e41;
}

/* END CSS for order list style */

// Handle the custom field update
add_action( 'wp_ajax_update_custom_field', 'update_custom_field' );
add_action( 'wp_ajax_nopriv_update_custom_field', 'update_custom_field' );
function update_custom_field() {
    if ( isset( $_POST['order_id'] ) && isset( $_POST['custom_field_value'] ) ) {
        $order_id = intval( $_POST['order_id'] );
        $custom_field_value = sanitize_text_field( $_POST['custom_field_value'] );
        update_post_meta( $order_id, '_checkin_field_slug', $custom_field_value );
		
        wp_die();
    }
}