<?php
/**
 * Tab: Dashboard Builder — Free
 *
 * Visual block editor for the WordPress dashboard.
 * Replaces the old widget-manager tab entirely.
 * Layout is saved via AJAX (not the Settings API form).
 * When enabled, all default WP widgets are suppressed and the
 * custom layout is rendered instead.
 *
 * @package Panelra
 */

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

$pnlrdb_layout     = Pnlrdb_Dashboard_Builder::get_layout();
$pnlrdb_block_types = Pnlrdb_Dashboard_Builder::get_block_types();
$pnlrdb_templates    = Pnlrdb_Dashboard_Builder::get_dashboard_templates();
$pnlrdb_all_roles  = get_editable_roles();
$pnlrdb_is_enabled = ! empty( $pnlrdb_layout['enabled'] );

// Assets for this tab are enqueued via Pnlrdb_Admin::enqueue_assets().
?>

<div id="ap773-builder" data-layout="<?php echo esc_attr( wp_json_encode( $pnlrdb_layout ) ); ?>">

<!-- ================================================================
     TOP BAR
================================================================ -->
<div class="ap773-builder-topbar">
	<div class="ap773-builder-topbar-left">
		<h2 class="ap773-section-title" style="margin:0">
			<?php esc_html_e( 'Dashboard Builder', 'panelra-dashboard-builder' ); ?>
		</h2>
		<p class="ap773-section-desc" style="margin:4px 0 0">
			<?php esc_html_e( 'Build a fully custom dashboard. Drag blocks from the left panel onto the canvas.', 'panelra-dashboard-builder' ); ?>
		</p>
	</div>
	<div class="ap773-builder-topbar-right">
		<?php if ( $pnlrdb_is_enabled ) : ?>
		<a href="<?php echo esc_url( add_query_arg( 'ap773_preview', '1', admin_url( 'index.php' ) ) ); ?>"
		   target="_blank" rel="noopener noreferrer"
		   class="ap773-btn ap773-btn--secondary"
		   style="display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;text-decoration:none">
			<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
			<?php esc_html_e( 'Preview dashboard', 'panelra-dashboard-builder' ); ?>
		</a>
		<?php endif; ?>
		<label class="ap773-toggle-row">
			<span class="ap773-label"><?php esc_html_e( 'Enable custom dashboard', 'panelra-dashboard-builder' ); ?></span>
			<label class="ap773-toggle">
				<input type="checkbox" id="ap773-builder-enabled" <?php checked( $pnlrdb_is_enabled ); ?>>
				<span class="ap773-toggle-slider"></span>
			</label>
		</label>
	</div>
</div>

<!-- Global options bar -->
<div class="ap773-builder-opts" id="ap773-builder-opts" style="<?php echo $pnlrdb_is_enabled ? '' : 'opacity:.5;pointer-events:none;'; ?>">
	<label class="ap773-checkbox-item">
		<input type="checkbox" id="ap773-opt-hide-wp" <?php checked( ! empty( $pnlrdb_layout['hide_wp'] ) ); ?>>
		<?php esc_html_e( 'Hide all default WordPress widgets', 'panelra-dashboard-builder' ); ?>
	</label>
	<label class="ap773-checkbox-item">
		<input type="checkbox" id="ap773-opt-hide-screen" <?php checked( ! empty( $pnlrdb_layout['hide_screen_opts'] ) ); ?>>
		<?php esc_html_e( 'Hide "Screen Options" button', 'panelra-dashboard-builder' ); ?>
	</label>
	<label class="ap773-checkbox-item">
		<input type="checkbox" id="ap773-opt-hide-help" <?php checked( ! empty( $pnlrdb_layout['hide_help'] ) ); ?>>
		<?php esc_html_e( 'Hide "Help" button', 'panelra-dashboard-builder' ); ?>
	</label>
	<label class="ap773-checkbox-item">
	<input type="checkbox" id="ap773-opt-hide-notices" <?php checked( ! empty( $pnlrdb_layout['hide_notices'] ) ); ?>>
	<?php esc_html_e( 'Hide all admin notices', 'panelra-dashboard-builder' ); ?>
	</label>
	<label class="ap773-checkbox-item">
		<input type="checkbox" id="ap773-opt-hide-title" <?php checked( ! empty( $pnlrdb_layout['hide_title'] ) ); ?>>
		<?php esc_html_e( 'Hide Dashboard Title', 'panelra-dashboard-builder' ); ?>
	</label>

	<!-- Role visibility preview filter -->
	<div style="margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b">
		<span title="<?php esc_attr_e( 'Simulate how the dashboard looks for a specific user role. Sections set as role-restricted will be faded out if hidden for the selected role.', 'panelra-dashboard-builder' ); ?>" style="display:flex;align-items:center;gap:5px;cursor:help">
			<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
			<?php esc_html_e( 'Role visibility preview:', 'panelra-dashboard-builder' ); ?>
		</span>
		<select id="ap773-role-preview" class="ap773-select" style="font-size:12px;padding:4px 8px;height:auto;">
			<option value="all"><?php esc_html_e( 'All roles', 'panelra-dashboard-builder' ); ?></option>
			<?php foreach ( $pnlrdb_all_roles as $pnlrdb_slug => $pnlrdb_info ) : ?>
				<option value="<?php echo esc_attr( $pnlrdb_slug ); ?>"><?php echo esc_html( $pnlrdb_info['name'] ); ?></option>
			<?php endforeach; ?>
		</select>
	</div>
</div>


<!-- Dashboard templates -->
<div class="ap773-template-panel" id="ap773-template-panel">
	<div class="ap773-template-head">
		<div>
			<h3><?php esc_html_e( 'Dashboard Templates', 'panelra-dashboard-builder' ); ?></h3>
			<p><?php esc_html_e( 'Install a ready-made dashboard with one click, then customize every section and block in the builder.', 'panelra-dashboard-builder' ); ?></p>
		</div>
		<span class="ap773-template-badge"><?php esc_html_e( 'New in 1.1.0', 'panelra-dashboard-builder' ); ?></span>
	</div>
	<div class="ap773-template-grid" style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;width:100%;">
		<?php foreach ( $pnlrdb_templates as $pnlrdb_template ) : ?>
			<div class="ap773-template-card ap773-template-card--<?php echo esc_attr( $pnlrdb_template['accent'] ?? 'blue' ); ?>">
				<div class="ap773-template-preview">
					<span class="ap773-template-icon"><?php echo esc_html( $pnlrdb_template['icon'] ?? '⬡' ); ?></span>
					<div class="ap773-template-lines">
						<span></span><span></span><span></span>
					</div>
				</div>
				<div class="ap773-template-body">
					<span class="ap773-template-eyebrow"><?php echo esc_html( $pnlrdb_template['eyebrow'] ?? '' ); ?></span>
					<h4><?php echo esc_html( $pnlrdb_template['name'] ?? '' ); ?></h4>
					<p><?php echo esc_html( $pnlrdb_template['description'] ?? '' ); ?></p>
					<div class="ap773-template-best"><strong><?php esc_html_e( 'Best for:', 'panelra-dashboard-builder' ); ?></strong> <?php echo esc_html( $pnlrdb_template['best_for'] ?? '' ); ?></div>
					<button type="button" class="ap773-btn ap773-btn--primary ap773-use-template" data-template-id="<?php echo esc_attr( $pnlrdb_template['id'] ?? '' ); ?>">
						<?php esc_html_e( 'Use this template', 'panelra-dashboard-builder' ); ?>
					</button>
				</div>
			</div>
		<?php endforeach; ?>
	</div>
</div>

<!-- Role preview active banner -->
<div id="ap773-role-preview-banner" style="display:none;margin-bottom:10px;padding:10px 14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;font-size:12px;color:#92400e;align-items:center;gap:8px;">
	<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
	<span><?php esc_html_e( 'Role preview active — viewing as:', 'panelra-dashboard-builder' ); ?> <strong class="ap773-rpb-role"></strong> &mdash; <?php esc_html_e( 'Faded sections are hidden for this role.', 'panelra-dashboard-builder' ); ?></span>
	<button type="button" onclick="$('#ap773-role-preview').val('all').trigger('change')" style="margin-left:auto;background:none;border:none;cursor:pointer;color:#92400e;font-size:11px;text-decoration:underline;font-family:inherit;padding:0"><?php esc_html_e( 'Reset', 'panelra-dashboard-builder' ); ?></button>
</div>

<!-- ================================================================
     MAIN BUILDER LAYOUT: sidebar | canvas | inspector
================================================================ -->
<div class="ap773-builder-shell" id="ap773-builder-shell" style="<?php echo $pnlrdb_is_enabled ? '' : 'opacity:.45;pointer-events:none;'; ?>">

	<!-- ---- BLOCK LIBRARY ---- -->
	<div class="ap773-bl-sidebar">

		<?php
		$pnlrdb_categories = array(
			'content' => __( 'Content', 'panelra-dashboard-builder' ),
			'media'   => __( 'Media', 'panelra-dashboard-builder' ),
			'widget'  => __( 'Widgets', 'panelra-dashboard-builder' ),
		);
		$pnlrdb_by_cat = array();
		foreach ( $pnlrdb_block_types as $pnlrdb_slug => $pnlrdb_def ) {
			$pnlrdb_cat = $pnlrdb_def['category'] ?? 'content';
			$pnlrdb_by_cat[ $pnlrdb_cat ][] = array_merge( $pnlrdb_def, array( 'slug' => $pnlrdb_slug ) );
		}
		?>

		<?php foreach ( $pnlrdb_categories as $pnlrdb_cat_slug => $pnlrdb_cat_label ) : ?>
			<?php if ( empty( $pnlrdb_by_cat[ $pnlrdb_cat_slug ] ) ) { continue; } ?>
			<div class="ap773-bl-cat"><?php echo esc_html( $pnlrdb_cat_label ); ?></div>
			<?php foreach ( $pnlrdb_by_cat[ $pnlrdb_cat_slug ] as $pnlrdb_block_def ) : ?>
				<div class="ap773-bl-block"
				     draggable="true"
				     data-block-type="<?php echo esc_attr( $pnlrdb_block_def['slug'] ); ?>"
				     data-block-label="<?php echo esc_attr( $pnlrdb_block_def['label'] ); ?>"
				     title="<?php echo esc_attr( $pnlrdb_block_def['label'] ); ?>">
					<span class="ap773-bl-icon ap773-bl-icon--<?php echo esc_attr( $pnlrdb_block_def['slug'] ); ?>">
						<?php echo wp_kses( $pnlrdb_block_def['icon'], array( 'svg' => array( 'width' => true, 'height' => true, 'viewBox' => true, 'fill' => true, 'xmlns' => true, 'stroke' => true, 'stroke-width' => true, 'stroke-linecap' => true, 'stroke-linejoin' => true ), 'rect' => array( 'x' => true, 'y' => true, 'width' => true, 'height' => true, 'rx' => true ), 'path' => array( 'd' => true ), 'circle' => array( 'cx' => true, 'cy' => true, 'r' => true ), 'line' => array( 'x1' => true, 'y1' => true, 'x2' => true, 'y2' => true ), 'polyline' => array( 'points' => true ) ) ); ?>
					</span>
					<span class="ap773-bl-label"><?php echo esc_html( $pnlrdb_block_def['label'] ); ?></span>
					<?php if ( ! empty( $pnlrdb_block_def['pro'] ) ) : ?>
						<span class="ap773-pro-badge-sm">PRO</span>
					<?php endif; ?>
				</div>
			<?php endforeach; ?>
			<div class="ap773-bl-sep"></div>
		<?php endforeach; ?>

		<!-- Add section button -->
		<button type="button" class="ap773-bl-add-section" id="ap773-add-section">
			<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
			<?php esc_html_e( 'Add section', 'panelra-dashboard-builder' ); ?>
		</button>
	</div>

	<!-- ---- CANVAS ---- -->
	<div class="ap773-bl-canvas" id="ap773-canvas">

		<div id="ap773-canvas-empty" class="ap773-canvas-empty" style="<?php echo empty( $pnlrdb_layout['sections'] ) ? '' : 'display:none;'; ?>">
			<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="color:#cbd5e1"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M12 8v8M8 12h8"/></svg>
			<p><?php esc_html_e( 'Click "Add section" or drag a block here to start building.', 'panelra-dashboard-builder' ); ?></p>
		</div>

		<div id="ap773-sections-root">
			<!-- Sections are rendered by JS from the layout data -->
		</div>

	</div>

	<!-- ---- INSPECTOR ---- -->
	<div class="ap773-bl-inspector" id="ap773-inspector" style="display:none;">
		<div class="ap773-insp-header">
			<span id="ap773-insp-title" class="ap773-insp-title"><?php esc_html_e( 'Block settings', 'panelra-dashboard-builder' ); ?></span>
			<button type="button" class="ap773-insp-close" id="ap773-insp-close" title="<?php esc_attr_e( 'Close', 'panelra-dashboard-builder' ); ?>">
				<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
			</button>
		</div>
		<div id="ap773-insp-body" class="ap773-insp-body"></div>
	</div>

</div><!-- /.ap773-builder-shell -->

<!-- Save bar -->
<div class="ap773-builder-savebar">
	<span id="ap773-save-status" class="ap773-save-status"></span>
	<button type="button" class="ap773-btn ap773-btn--primary" id="ap773-save-btn">
		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
		<?php esc_html_e( 'Save layout', 'panelra-dashboard-builder' ); ?>
	</button>
</div>

</div><!-- /#ap773-builder -->






