<?php

declare(strict_types=1);

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

$is_modal = ! empty( $_GET['rc_modal'] );
$modal_arg = $is_modal ? array( 'rc_modal' => '1' ) : array();
?>
<div class="wrap">
	<h1 class="wp-heading-inline"><?php esc_html_e( 'Restaurant Costing - Areas', 'restaurant-costing' ); ?></h1>
	<div class="rc-version">v<?php echo esc_html( RC_VERSION ); ?></div>
	<button type="button" class="page-title-action" id="rc-add-area-btn"><?php esc_html_e( 'Add Area', 'restaurant-costing' ); ?></button>
	<hr class="wp-header-end">

	<table class="wp-list-table widefat fixed striped rc-areas-table rc-table-rounded">
		<thead>
			<tr>
				<th class="rc-col-narrow"><?php esc_html_e( 'Sort Order', 'restaurant-costing' ); ?></th>
				<th><?php esc_html_e( 'Area Name', 'restaurant-costing' ); ?></th>
				<th><?php esc_html_e( 'Actions', 'restaurant-costing' ); ?></th>
			</tr>
		</thead>
		<tbody>
			<?php if ( empty( $items ) ) : ?>
				<tr><td colspan="3"><?php esc_html_e( 'No areas defined yet. Add one above.', 'restaurant-costing' ); ?></td></tr>
			<?php else : ?>
				<?php foreach ( $items as $item ) : ?>
					<tr>
						<td class="rc-col-narrow"><?php echo (int) ( $item->sort_order ?? 0 ); ?></td>
						<td><strong><?php echo esc_html( (string) ( $item->name ?? '' ) ); ?></strong></td>
						<td class="rc-actions-cell">
							<a href="#" class="button rc-action-btn rc-action-btn-sm rc-edit-area" data-id="<?php echo (int) $item->id; ?>" data-name="<?php echo esc_attr( (string) ( $item->name ?? '' ) ); ?>" title="<?php esc_attr_e( 'Edit', 'restaurant-costing' ); ?>"><?php esc_html_e( 'Edit', 'restaurant-costing' ); ?></a>
							<a href="<?php echo esc_url( wp_nonce_url( add_query_arg( array_merge( array( 'action' => 'rc_move_area', 'id' => (int) $item->id, 'dir' => 'up' ), $modal_arg ), admin_url( 'admin-post.php' ) ), 'rc_move_area_' . (int) $item->id ) ); ?>" class="button rc-action-btn rc-action-btn-sm" title="<?php esc_attr_e( 'Move Up', 'restaurant-costing' ); ?>">&#9650;</a>
							<a href="<?php echo esc_url( wp_nonce_url( add_query_arg( array_merge( array( 'action' => 'rc_move_area', 'id' => (int) $item->id, 'dir' => 'down' ), $modal_arg ), admin_url( 'admin-post.php' ) ), 'rc_move_area_' . (int) $item->id ) ); ?>" class="button rc-action-btn rc-action-btn-sm" title="<?php esc_attr_e( 'Move Down', 'restaurant-costing' ); ?>">&#9660;</a>
							<a href="<?php echo esc_url( wp_nonce_url( add_query_arg( array_merge( array( 'action' => 'rc_delete_area', 'id' => (int) $item->id ), $modal_arg ), admin_url( 'admin-post.php' ) ), 'rc_delete_area_' . (int) $item->id ) ); ?>" class="button rc-action-btn rc-action-btn-sm rc-action-btn-danger rc-confirm-area-delete" title="<?php esc_attr_e( 'Delete', 'restaurant-costing' ); ?>">&#10005;</a>
						</td>
					</tr>
				<?php endforeach; ?>
			<?php endif; ?>
		</tbody>
	</table>

	<div id="rc-area-modal" class="rc-modal" role="dialog" aria-modal="true" hidden>
		<div class="rc-modal-backdrop" tabindex="-1"></div>
		<div class="rc-modal-dialog rc-modal-dialog-sm">
			<header class="rc-modal-header">
				<h2 id="rc-area-modal-title"><?php esc_html_e( 'Area', 'restaurant-costing' ); ?></h2>
				<button type="button" class="rc-modal-close" aria-label="Close">&times;</button>
			</header>
			<form id="rc-area-modal-form" method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
				<?php wp_nonce_field( 'rc_save_area' ); ?>
				<input type="hidden" name="action" value="rc_save_area" />
				<?php if ( $is_modal ) : ?>
					<input type="hidden" name="rc_modal" value="1" />
				<?php endif; ?>
				<input type="hidden" id="rc-area-id" name="id" value="" />
				<input type="hidden" id="rc-area-add-new" name="add_new" value="" />
				<div class="rc-modal-body">
					<table class="form-table">
						<tr>
							<th scope="row"><label for="rc-area-name"><?php esc_html_e( 'Area Name', 'restaurant-costing' ); ?></label></th>
							<td><input type="text" id="rc-area-name" name="name" class="rc-w-100" required /></td>
						</tr>
					</table>
				</div>
				<footer class="rc-modal-footer rc-flex rc-gap-6 rc-flex-wrap">
					<button type="submit" class="button button-primary rc-save-close"><?php esc_html_e( 'Save and Close', 'restaurant-costing' ); ?></button>
					<button type="submit" class="button rc-save-add"><?php esc_html_e( 'Save and Add New', 'restaurant-costing' ); ?></button>
					<button type="button" class="button rc-modal-cancel rc-ml-auto"><?php esc_html_e( 'Close', 'restaurant-costing' ); ?></button>
				</footer>
			</form>
		</div>
	</div>
</div>

<script>
(function ($) {
	'use strict';
	$(function () {
		var urlParams = new URLSearchParams(window.location.search);
		if (urlParams.get('rc_add_new') === '1') {
			$('#rc-add-area-btn').trigger('click');
		}
	});
})(jQuery);
</script>

<style>
.rc-areas-table.striped tbody tr:nth-child(odd) { background-color: #fff; }
.rc-areas-table.striped tbody tr:nth-child(even) { background-color: #ececec; }
.rc-areas-table .rc-col-narrow { width: 80px; text-align: center; }
<?php if ( $is_modal ) : ?>
#adminmenumain, #wpadminbar, #wpfooter { display: none !important; }
html.wp-toolbar { padding-top: 0 !important; }
#wpcontent, #wpbody-content { margin-left: 0 !important; padding-left: 0 !important; }
#wpbody-content { padding-bottom: 0 !important; }
body { background: #fff; }
.wrap { margin: 16px; }
.rc-version { display: none; }
<?php endif; ?>
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
	if (typeof rcConfirm === 'undefined') return;
	document.querySelectorAll('.rc-confirm-area-delete').forEach(function (el) {
		el.addEventListener('click', function (e) {
			e.preventDefault();
			var href = this.getAttribute('href');
			rcConfirm('<?php echo esc_js( __( 'Delete this area?', 'restaurant-costing' ) ); ?>', function (ok) {
				if (ok) window.location.href = href;
			});
		});
	});
});
</script>
