<?php
/**
 * Tutor dashboard profile header
 *
 * @package Tutor\Templates
 * @author Themeum <support@themeum.com>
 * @link https://themeum.com
 * @since 4.0.0
 *
 * These variables are inherited from parent templates:
 * template: templates/dashboard/account/settings.php
 *
 * @var string $back_url
 */

defined( 'ABSPATH' ) || exit;

use TUTOR\Icon;
use Tutor\Components\Badge;
use Tutor\Components\Button;
use Tutor\Components\Constants\Size;
use Tutor\Components\Constants\Variant;

?>
<div class="tutor-profile-header">
	<div 
		x-data="{ 
			windowWidth: window.innerWidth,
			isDirty: {}
		}"
		class="tutor-account-container tutor-flex tutor-items-center tutor-justify-between">
		<div 
			class="tutor-profile-header-left tutor-flex tutor-items-center"
			@resize.window="windowWidth = window.innerWidth"
			@tutor-form-state-change.document="if ($event.detail.id === `tutor-${activeTab}-form`) isDirty[$event.detail.id] = $event.detail.isDirty"
			:style="{ width: isDirty[`tutor-${activeTab}-form`] ? 'auto' : 'calc(100% - 36px)' }"
		>
			<?php
			Button::make()
				->label( __( 'Back', 'tutor' ) )
				->variant( Variant::GHOST )
				->size( Size::X_SMALL )
				->icon( Icon::LEFT, 'left', 20 )
				->tag( 'a' )
				->icon_only()
				->flip_rtl()
				->attr( 'href', esc_url( $back_url ) )
				->render();
			?>
			<h4 
				class="tutor-profile-header-title tutor-text-h4 tutor-font-semibold tutor-ml-4 tutor-my-none"
				x-text="windowWidth <= 768 ? (activeTab === 'none' ? '<?php esc_html_e( 'Settings', 'tutor' ); ?>' : tabs.find(tab => tab.id == activeTab).label) : '<?php esc_html_e( 'Settings', 'tutor' ); ?>'"
			></h4>

			<?php
			Badge::make()
				->variant( Variant::SECONDARY )
				->rounded()
				->label( __( 'Unsaved changes', 'tutor' ) )
				->attr( 'x-show', 'activeTab !== "none" && isDirty[`tutor-${activeTab}-form`]' )
				->attr( 'x-cloak', '' )
				->attr( 'class', 'tutor-ml-5 tutor-md-hidden' )
				->render();
			?>
		</div>
		<div class="tutor-profile-header-right tutor-flex tutor-items-center">
			<div x-show="activeTab !== 'none' && isDirty[`tutor-${activeTab}-form`]" x-cloak>
				<?php
				Button::make()
					->label( __( 'Discard', 'tutor' ) )
					->variant( Variant::SECONDARY )
					->size( Size::X_SMALL )
					->attr( 'type', 'button' )
					->attr( '@click', 'TutorCore.form.reset(`tutor-${activeTab}-form`)' )
					->render();

				Button::make()
					->label( __( 'Save', 'tutor' ) )
					->size( Size::X_SMALL )
					->attr( 'type', 'submit' )
					->attr( 'class', 'tutor-ml-4' )
					->attr( 'x-bind:form', 'activeTab === "none" ? "" : `tutor-${activeTab}-form`' )
					->attr( ':class', '{ \'tutor-btn-loading\': saveBillingInfoMutation?.isPending || saveWithdrawMethodMutation?.isPending || updateProfileMutation?.isPending || saveSocialProfileMutation?.isPending || handleUpdateNotification?.isPending || savePreferencesMutation?.isPending }' )
					->render();
				?>
			</div>
			<div 
				class="tutor-profile-header-close tutor-md-hidden"
				x-show="!isDirty[`tutor-${activeTab}-form`]"
			>
				<?php
				Button::make()
					->label( __( 'Close', 'tutor' ) )
					->variant( Variant::GHOST )
					->icon( Icon::CROSS, 'left', 20 )
					->icon_only()
					->size( Size::X_SMALL )
					->attr( 'type', 'button' )
					->attr( '@click', 'handleClose()' )
					->render();
				?>
			</div>
			<div 
				class="tutor-profile-header-close tutor-hidden tutor-md-flex"
				x-show="activeTab === 'none' || !isDirty[`tutor-${activeTab}-form`]"
			>
				<?php
				Button::make()
					->label( __( 'Close', 'tutor' ) )
					->variant( Variant::GHOST )
					->icon( Icon::CROSS, 'left', 20 )
					->icon_only()
					->size( Size::X_SMALL )
					->attr( 'type', 'button' )
					->attr( '@click', 'handleClose()' )
					->render();
				?>
			</div>
		</div>
	</div>
</div>
