<?php
/**
 * Frontend clock in/out widget.
 *
 * @package MerchantKits\AttendanceManager
 *
 * @var array      $employee Employee row.
 * @var array|null $open     Open attendance record, if clocked in.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$is_clocked_in = ! empty( $open );
$show_note     = (bool) get_option( 'mkam_enable_clock_in_note', 0 );
$clock_in_time = $is_clocked_in ? mysql2date( get_option( 'time_format', 'g:i a' ), $open['clock_in'] ) : '';
?>
<div class="mkam-widget mkam-clock <?php echo $is_clocked_in ? 'mkam-widget--active' : ''; ?>"
	data-clock-in="<?php echo esc_attr( $is_clocked_in ? $open['clock_in'] : '' ); ?>">

	<div class="mkam-widget__header">
		<span class="mkam-clock__name"><?php echo esc_html( MKAM_Employee::full_name( $employee ) ); ?></span>
		<span class="mkam-clock__date"><?php echo esc_html( date_i18n( get_option( 'date_format', 'Y-m-d' ) ) ); ?></span>
	</div>

	<div class="mkam-clock__time" id="mkam-live-clock" aria-live="off">--:--:--</div>

	<div class="mkam-clock__status" aria-live="polite">
		<?php if ( $is_clocked_in ) : ?>
			<?php
			/* translators: %s: clock-in time. */
			printf( esc_html__( 'Clocked in at %s', 'merchantkits-attendance-manager' ), '<strong>' . esc_html( $clock_in_time ) . '</strong>' );
			?>
			<div class="mkam-clock__worked" id="mkam-worked-counter"></div>
		<?php else : ?>
			<?php esc_html_e( 'Not clocked in', 'merchantkits-attendance-manager' ); ?>
		<?php endif; ?>
	</div>

	<?php if ( $show_note ) : ?>
		<details class="mkam-clock__note-wrap">
			<summary><?php esc_html_e( 'Add a note', 'merchantkits-attendance-manager' ); ?></summary>
			<textarea class="mkam-clock__note" id="mkam-clock-note" rows="2"></textarea>
		</details>
	<?php endif; ?>

	<input type="hidden" id="mkam-clock-location" value="" />

	<?php if ( $is_clocked_in ) : ?>
		<button type="button" class="mkam-btn mkam-btn--clock-out" id="mkam-clock-action" data-action="clock-out">
			<?php esc_html_e( 'Clock Out', 'merchantkits-attendance-manager' ); ?>
		</button>
	<?php else : ?>
		<button type="button" class="mkam-btn mkam-btn--clock-in" id="mkam-clock-action" data-action="clock-in">
			<?php esc_html_e( 'Clock In', 'merchantkits-attendance-manager' ); ?>
		</button>
	<?php endif; ?>

	<div class="mkam-clock__message" id="mkam-clock-message" role="status" aria-live="polite"></div>
</div>
