att-consent/admin/views/settings-scripts.php

<?php
/**
 * Custom Scripts tab.
 *
 * @package ATT_Consent
 * @var array $settings Current settings.
 */

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

$scripts = ATT_Consent_Scripts_Manager::get_all_scripts();
?>
<div class="att-cc-scripts-wrap">
	<h2>
		<?php esc_html_e( 'Custom Scripts', 'att-consent' ); ?>
		<button type="button" class="page-title-action" id="att-cc-add-script">
			<?php esc_html_e( 'Add New Script', 'att-consent' ); ?>
		</button>
	</h2>

	<p><?php esc_html_e( 'Add custom JavaScript snippets that will only execute after the visitor consents to the relevant category. This is useful for conversion pixels, chat widgets, and other third-party scripts.', 'att-consent' ); ?></p>

	<!-- Scripts list -->
	<table class="wp-list-table widefat fixed striped" id="att-cc-scripts-table">
		<thead>
			<tr>
				<th class="column-name"><?php esc_html_e( 'Name', 'att-consent' ); ?></th>
				<th class="column-category"><?php esc_html_e( 'Category', 'att-consent' ); ?></th>
				<th class="column-placement"><?php esc_html_e( 'Placement', 'att-consent' ); ?></th>
				<th class="column-priority"><?php esc_html_e( 'Priority', 'att-consent' ); ?></th>
				<th class="column-status"><?php esc_html_e( 'Status', 'att-consent' ); ?></th>
				<th class="column-actions"><?php esc_html_e( 'Actions', 'att-consent' ); ?></th>
			</tr>
		</thead>
		<tbody id="att-cc-scripts-list">
			<?php if ( empty( $scripts ) ) : ?>
				<tr class="att-cc-no-scripts">
					<td colspan="6"><?php esc_html_e( 'No custom scripts added yet.', 'att-consent' ); ?></td>
				</tr>
			<?php else : ?>
				<?php foreach ( $scripts as $script ) : ?>
					<tr data-id="<?php echo esc_attr( $script['id'] ); ?>">
						<td class="column-name"><?php echo esc_html( $script['name'] ); ?></td>
						<td class="column-category"><span class="att-cc-badge att-cc-badge--<?php echo esc_attr( $script['category'] ); ?>"><?php echo esc_html( ucfirst( $script['category'] ) ); ?></span></td>
						<td class="column-placement"><?php echo esc_html( ucfirst( $script['placement'] ) ); ?></td>
						<td class="column-priority"><?php echo esc_html( $script['priority'] ); ?></td>
						<td class="column-status">
							<span class="att-cc-status att-cc-status--<?php echo esc_attr( $script['status'] ); ?>">
								<?php echo esc_html( ucfirst( $script['status'] ) ); ?>
							</span>
						</td>
						<td class="column-actions">
							<button type="button" class="button button-small att-cc-edit-script" data-id="<?php echo esc_attr( $script['id'] ); ?>">
								<?php esc_html_e( 'Edit', 'att-consent' ); ?>
							</button>
							<button type="button" class="button button-small button-link-delete att-cc-delete-script" data-id="<?php echo esc_attr( $script['id'] ); ?>">
								<?php esc_html_e( 'Delete', 'att-consent' ); ?>
							</button>
						</td>
					</tr>
				<?php endforeach; ?>
			<?php endif; ?>
		</tbody>
	</table>

	<!-- Add/Edit modal -->
	<div id="att-cc-script-modal" class="att-cc-modal" style="display:none;">
		<div class="att-cc-modal__overlay"></div>
		<div class="att-cc-modal__content">
			<h2 id="att-cc-script-modal-title"><?php esc_html_e( 'Add Script', 'att-consent' ); ?></h2>
			<form id="att-cc-script-form">
				<input type="hidden" name="script_id" id="att-cc-script-id" value="">

				<table class="form-table">
					<tr>
						<th><label for="att-cc-script-name"><?php esc_html_e( 'Name', 'att-consent' ); ?></label></th>
						<td><input type="text" id="att-cc-script-name" name="name" class="regular-text" required></td>
					</tr>
					<tr>
						<th><label for="att-cc-script-category"><?php esc_html_e( 'Category', 'att-consent' ); ?></label></th>
						<td>
							<select id="att-cc-script-category" name="category">
								<option value="functional"><?php esc_html_e( 'Functional', 'att-consent' ); ?></option>
								<option value="analytics" selected><?php esc_html_e( 'Analytics', 'att-consent' ); ?></option>
								<option value="marketing"><?php esc_html_e( 'Marketing', 'att-consent' ); ?></option>
							</select>
							<p class="description"><?php esc_html_e( 'The script will only execute after the visitor consents to this category.', 'att-consent' ); ?></p>
						</td>
					</tr>
					<tr>
						<th><label for="att-cc-script-placement"><?php esc_html_e( 'Placement', 'att-consent' ); ?></label></th>
						<td>
							<select id="att-cc-script-placement" name="placement">
								<option value="head"><?php esc_html_e( 'Head', 'att-consent' ); ?></option>
								<option value="footer"><?php esc_html_e( 'Footer', 'att-consent' ); ?></option>
							</select>
						</td>
					</tr>
					<tr>
						<th><label for="att-cc-script-priority"><?php esc_html_e( 'Priority', 'att-consent' ); ?></label></th>
						<td>
							<input type="number" id="att-cc-script-priority" name="priority" value="10" min="1" max="100" class="small-text">
							<p class="description"><?php esc_html_e( 'Lower numbers execute first.', 'att-consent' ); ?></p>
						</td>
					</tr>
					<tr>
						<th><label for="att-cc-script-status"><?php esc_html_e( 'Status', 'att-consent' ); ?></label></th>
						<td>
							<select id="att-cc-script-status" name="status">
								<option value="active"><?php esc_html_e( 'Active', 'att-consent' ); ?></option>
								<option value="inactive"><?php esc_html_e( 'Inactive', 'att-consent' ); ?></option>
							</select>
						</td>
					</tr>
					<tr>
						<th><label for="att-cc-script-snippet"><?php esc_html_e( 'Script Code', 'att-consent' ); ?></label></th>
						<td>
							<textarea id="att-cc-script-snippet" name="snippet" rows="10" class="large-text code" placeholder="<script>&#10;// Your code here&#10;</script>"></textarea>
							<p class="description"><?php esc_html_e( 'Include the full script tag(s). This code will be injected into the page after consent is given for the selected category.', 'att-consent' ); ?></p>
						</td>
					</tr>
				</table>

				<div class="att-cc-modal__actions">
					<button type="submit" class="button button-primary"><?php esc_html_e( 'Save Script', 'att-consent' ); ?></button>
					<button type="button" class="button att-cc-close-modal"><?php esc_html_e( 'Cancel', 'att-consent' ); ?></button>
				</div>
			</form>
		</div>
	</div>
</div>