<?php
/**
 * TAB: CARRIERS — InPost carrier info and map legend
 *
 * Options saved:
 *   ps_show_legend       — "yes" | "no"
 *   ps_show_point_types  — "yes" | "no"
 *
 * @package ParcelSelector
 * @since   3.3.6
 */

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

if ( ! function_exists( 'parcselect_tab_carriers' ) ) {
function parcselect_tab_carriers() {
	$t = parcselect_admin_i18n();

	// ── Current settings ─────────────────────────────────────────────────────
	$show_legend = get_option( 'parcselect_show_legend', 'yes' );
	$show_types  = get_option( 'parcselect_show_point_types', 'yes' );
	?>

	<div class="parcelselector-section">
		<h2>🚚 <?php echo esc_html( $t['car_title'] ?? 'Carriers' ); ?></h2>
		<p class="description"><?php echo esc_html__( 'The free version displays InPost Paczkomaty pickup points in Poland on the checkout map.', 'parcel-selector' ); ?></p>
	</div>

	<form action="options.php" method="post">
		<input type="hidden" name="ps_save_group" value="parcselect_carriers_group">
		<?php settings_fields( 'parcselect_carriers_group' ); ?>

		<!-- ═══ INPOST CARRIER CARD ═══ -->
		<div class="parcelselector-card" style="border-top:4px solid #FECC01;margin-bottom:28px;max-width:420px;">
			<div style="display:flex;align-items:center;gap:14px;">
				<div style="width:52px;height:52px;background:#FECC01;border-radius:50%;
					display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;">
					<img src="<?php echo esc_url( PARCSELECT_PLUGIN_URL . 'assets/Speditors/InPost.png' ); ?>"
						style="width:32px;height:32px;object-fit:contain;display:block;max-width:none;" alt="InPost">
				</div>
				<div>
					<div style="font-size:16px;font-weight:800;color:var(--ps-text);">InPost</div>
					<div style="font-size:12px;color:var(--ps-text-dim);margin-top:2px;">
						<?php echo esc_html__( 'Paczkomaty — Poland', 'parcel-selector' ); ?>
					</div>
				</div>
				<div style="margin-left:auto;">
					<span style="background:#16a34a;color:#fff;font-size:11px;font-weight:700;
						padding:3px 10px;border-radius:100px;letter-spacing:.5px;">
						<?php echo esc_html__( 'Enabled', 'parcel-selector' ); ?>
					</span>
				</div>
			</div>
		</div>

		<!-- ═══ LEGEND TOGGLE ═══ -->
		<div class="parcelselector-card" style="margin-bottom:28px;">
			<h3 style="margin-top:0;font-weight:700;color:var(--ps-text);font-size:15px;">
				🗺️ <?php echo esc_html( $t['car_legend_title'] ?? 'Map Legend' ); ?>
			</h3>
			<p style="color:var(--ps-text-dim);font-size:13px;margin-bottom:18px;line-height:1.5;">
				<?php echo esc_html( $t['car_legend_desc'] ?? 'Show an info box on the map that explains what each carrier color means and how locations are grouped.' ); ?>
			</p>

			<div style="display:flex;flex-direction:column;gap:14px;">
				<label style="display:flex;align-items:center;gap:14px;cursor:pointer;">
					<div class="ps-toggle-wrap" onclick="parcselectToggleLegend(this)">
						<input type="checkbox" name="ps_show_legend" value="yes" id="ps-legend-toggle"
							<?php checked( $show_legend, 'yes' ); ?> style="display:none;">
						<div class="ps-toggle" id="ps-legend-track"
							style="width:48px;height:26px;border-radius:13px;
							background:<?php echo esc_attr( 'yes' === $show_legend ? '#22c55e' : 'var(--ps-slate-300)' ); ?>;
							position:relative;transition:background .2s ease;">
							<div style="position:absolute;top:3px;
								left:<?php echo esc_attr( 'yes' === $show_legend ? '25px' : '3px' ); ?>;
								width:20px;height:20px;border-radius:50%;background:#fff;
								transition:left .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.25);"
								id="ps-legend-knob"></div>
						</div>
					</div>
					<span style="font-size:14px;font-weight:600;color:var(--ps-text);">
						<?php echo esc_html( $t['car_show_legend'] ?? 'Show legend on map' ); ?>
					</span>
					<span id="ps-legend-status"
						style="font-size:12px;font-weight:700;color:<?php echo esc_attr( 'yes' === $show_legend ? '#22c55e' : 'var(--ps-text-dim)' ); ?>;">
						<?php echo 'yes' === $show_legend ? esc_html__( 'Visible', 'parcel-selector' ) : esc_html__( 'Hidden', 'parcel-selector' ); ?>
					</span>
				</label>

				<label style="display:flex;align-items:center;gap:14px;cursor:pointer;">
					<div class="ps-toggle-wrap" onclick="var cb=this.querySelector('input');cb.checked=!cb.checked;var tr=this.querySelector('.ps-toggle');tr.style.background=cb.checked?'#22c55e':'var(--ps-slate-300)';tr.querySelector('div').style.left=cb.checked?'25px':'3px';var st=this.parentNode.querySelector('.ps-types-status');st.textContent=cb.checked?'<?php echo esc_js( __( 'Visible', 'parcel-selector' ) ); ?>':'<?php echo esc_js( __( 'Hidden', 'parcel-selector' ) ); ?>';st.style.color=cb.checked?'#22c55e':'var(--ps-text-dim)';">
						<input type="checkbox" name="ps_show_point_types" value="yes"
							<?php checked( $show_types, 'yes' ); ?> style="display:none;">
						<div class="ps-toggle"
							style="width:48px;height:26px;border-radius:13px;
							background:<?php echo esc_attr( 'yes' === $show_types ? '#22c55e' : 'var(--ps-slate-300)' ); ?>;
							position:relative;transition:background .2s ease;">
							<div style="position:absolute;top:3px;
								left:<?php echo esc_attr( 'yes' === $show_types ? '25px' : '3px' ); ?>;
								width:20px;height:20px;border-radius:50%;background:#fff;
								transition:left .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.25);"></div>
						</div>
					</div>
					<span style="font-size:14px;font-weight:600;color:var(--ps-text);">
						<?php echo esc_html__( 'Show point types in legend (Locker / Shop / Other)', 'parcel-selector' ); ?>
					</span>
					<span class="ps-types-status"
						style="font-size:12px;font-weight:700;color:<?php echo esc_attr( 'yes' === $show_types ? '#22c55e' : 'var(--ps-text-dim)' ); ?>;">
						<?php echo 'yes' === $show_types ? esc_html__( 'Visible', 'parcel-selector' ) : esc_html__( 'Hidden', 'parcel-selector' ); ?>
					</span>
				</label>
			</div>
		</div>

		<?php submit_button( $t['save_changes'] ?? 'Save Changes' ); ?>
	</form>

	<!-- Cross-tab navigation -->
	<div style="margin-top:32px;padding:16px 20px;background:#f5f3ff;border:1px solid #e9d5ff;border-radius:10px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
		<span style="font-size:13px;color:#6b21a8;font-weight:600;">
			<?php echo esc_html__( 'Next step: configure checkout widget behavior', 'parcel-selector' ); ?>
		</span>
		<a href="<?php echo esc_url( admin_url( 'admin.php?page=parcelselector-settings&tab=behavior' ) ); ?>"
		   style="display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:#7c3aed;color:#fff;border-radius:8px;text-decoration:none;font-size:13px;font-weight:700;">
			<?php echo esc_html__( 'Checkout', 'parcel-selector' ); ?> &rarr;
		</a>
	</div>

	<?php
	wp_localize_script( 'parcselect-admin-premium-js', 'parcselectCarriersVars', array(
		'i18n' => array(
			'visible' => __( 'Visible', 'parcel-selector' ),
			'hidden'  => __( 'Hidden', 'parcel-selector' ),
		),
	) );

	wp_add_inline_script( 'parcselect-admin-premium-js', '
	window.parcselectToggleLegend = function(wrap) {
		var chk    = document.getElementById("ps-legend-toggle");
		var track  = document.getElementById("ps-legend-track");
		var knob   = document.getElementById("ps-legend-knob");
		var status = document.getElementById("ps-legend-status");
		chk.checked = !chk.checked;
		var on = chk.checked;
		track.style.background = on ? "#22c55e" : "var(--ps-slate-300)";
		knob.style.left        = on ? "25px" : "3px";
		status.textContent     = on ? parcselectCarriersVars.i18n.visible : parcselectCarriersVars.i18n.hidden;
		status.style.color     = on ? "#22c55e" : "var(--ps-text-dim)";
	};
	' );
}
}
