<?php if ( ! defined( 'ABSPATH' ) ) { exit; } ?>
<div class="wrap">
	<div class="zacls-action-bar">
		<div class="zacls-action-left">
			<h1 class="zacls-page-title"><?php esc_html_e( 'Login Branding', 'za-creative-login-shield' ); ?></h1>
		</div>
	</div>
	<p class="zacls-page-description"><?php esc_html_e( 'Customize the appearance of your login page.', 'za-creative-login-shield' ); ?></p>

	<form method="post" action="<?php echo esc_url( admin_url( 'admin.php?page=zacls&tab=branding' ) ); ?>">
		<?php wp_nonce_field( 'zacls_admin_nonce', '_wpnonce' ); ?>

		<div class="zacls-section-card">
			<div class="zacls-section-card-header">
				<span class="dashicons dashicons-format-image"></span>
				<h3><?php esc_html_e( 'Logo & Branding', 'za-creative-login-shield' ); ?></h3>
			</div>
			<div class="zacls-section-card-body">
				<table class="form-table">
					<tr>
						<th><label for="zacls_login_logo_image"><?php esc_html_e( 'Logo Image URL', 'za-creative-login-shield' ); ?></label></th>
						<td>
							<input type="url" name="zacls_login_logo_image" id="zacls_login_logo_image" class="regular-text" value="<?php echo esc_attr( get_option( 'zacls_login_logo_image', '' ) ); ?>" placeholder="https://example.com/logo.png">
							<button type="button" class="zacls-btn" id="zacls-upload-logo"><?php esc_html_e( 'Upload Image', 'za-creative-login-shield' ); ?></button>
						</td>
					</tr>
					<tr>
						<th><label for="zacls_login_logo_url"><?php esc_html_e( 'Logo Link URL', 'za-creative-login-shield' ); ?></label></th>
						<td><input type="url" name="zacls_login_logo_url" id="zacls_login_logo_url" class="regular-text" value="<?php echo esc_attr( get_option( 'zacls_login_logo_url', '' ) ); ?>" placeholder="<?php echo esc_url( home_url() ); ?>"></td>
					</tr>
					<tr>
						<th><label for="zacls_login_logo_title"><?php esc_html_e( 'Logo Title', 'za-creative-login-shield' ); ?></label></th>
						<td><input type="text" name="zacls_login_logo_title" id="zacls_login_logo_title" class="regular-text" value="<?php echo esc_attr( get_option( 'zacls_login_logo_title', '' ) ); ?>" placeholder="<?php bloginfo( 'name' ); ?>"></td>
					</tr>
				</table>
			</div>
		</div>

		<div class="zacls-section-card">
			<div class="zacls-section-card-header">
				<span class="dashicons dashicons-art"></span>
				<h3><?php esc_html_e( 'Colors', 'za-creative-login-shield' ); ?></h3>
			</div>
			<div class="zacls-section-card-body">
				<table class="form-table">
					<tr>
						<th><label for="zacls_login_bg_color"><?php esc_html_e( 'Background Color', 'za-creative-login-shield' ); ?></label></th>
						<td><input type="text" name="zacls_login_bg_color" id="zacls_login_bg_color" class="zacls-color-picker" value="<?php echo esc_attr( get_option( 'zacls_login_bg_color', '' ) ); ?>" data-default-color="#f0f0f1"></td>
					</tr>
					<tr>
						<th><label for="zacls_login_form_bg"><?php esc_html_e( 'Form Background', 'za-creative-login-shield' ); ?></label></th>
						<td><input type="text" name="zacls_login_form_bg" id="zacls_login_form_bg" class="zacls-color-picker" value="<?php echo esc_attr( get_option( 'zacls_login_form_bg', '' ) ); ?>" data-default-color="#ffffff"></td>
					</tr>
					<tr>
						<th><label for="zacls_login_text_color"><?php esc_html_e( 'Text Color', 'za-creative-login-shield' ); ?></label></th>
						<td><input type="text" name="zacls_login_text_color" id="zacls_login_text_color" class="zacls-color-picker" value="<?php echo esc_attr( get_option( 'zacls_login_text_color', '' ) ); ?>" data-default-color="#3c434a"></td>
					</tr>
					<tr>
						<th><label for="zacls_login_primary_color"><?php esc_html_e( 'Primary Button Color', 'za-creative-login-shield' ); ?></label></th>
						<td><input type="text" name="zacls_login_primary_color" id="zacls_login_primary_color" class="zacls-color-picker" value="<?php echo esc_attr( get_option( 'zacls_login_primary_color', '' ) ); ?>" data-default-color="#2271b1"></td>
					</tr>
				</table>
			</div>
		</div>

		<div class="zacls-section-card">
			<div class="zacls-section-card-header">
				<span class="dashicons dashicons-editor-code"></span>
				<h3><?php esc_html_e( 'Custom HTML & CSS', 'za-creative-login-shield' ); ?></h3>
			</div>
			<div class="zacls-section-card-body">
				<table class="form-table">
					<tr>
						<th><label for="zacls_login_header_html"><?php esc_html_e( 'Header HTML', 'za-creative-login-shield' ); ?></label></th>
						<td><textarea name="zacls_login_header_html" id="zacls_login_header_html" class="large-text" rows="3"><?php echo esc_textarea( get_option( 'zacls_login_header_html', '' ) ); ?></textarea></td>
					</tr>
					<tr>
						<th><label for="zacls_login_footer_html"><?php esc_html_e( 'Footer HTML', 'za-creative-login-shield' ); ?></label></th>
						<td><textarea name="zacls_login_footer_html" id="zacls_login_footer_html" class="large-text" rows="3"><?php echo esc_textarea( get_option( 'zacls_login_footer_html', '' ) ); ?></textarea></td>
					</tr>
					<tr>
						<th><label for="zacls_login_custom_css"><?php esc_html_e( 'Custom CSS', 'za-creative-login-shield' ); ?></label></th>
						<td><textarea name="zacls_login_custom_css" id="zacls_login_custom_css" class="large-text code" rows="5"><?php echo esc_textarea( get_option( 'zacls_login_custom_css', '' ) ); ?></textarea></td>
					</tr>
				</table>
			</div>
			<div class="zacls-section-card-footer">
				<input type="hidden" name="action" value="zacls_save_branding">
				<button type="submit" class="zacls-btn zacls-btn-primary" name="zacls_save_branding"><?php esc_html_e( 'Save Branding Settings', 'za-creative-login-shield' ); ?></button>
			</div>
		</div>
	</form>
</div>
