<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<?php do_action( 'noesia_swa_appointments_before_content' ); ?>

<div class="noesia-swa-card noesia-swa-card--span2">
	<div class="noesia-swa-card-header">
		<div>
			<div class="noesia-swa-kicker"><?php esc_html_e( 'APPOINTMENTS', 'noesia-smart-waiter' ); ?></div>
			<h3>
				<span class="dashicons dashicons-calendar-alt" aria-hidden="true"></span>
				<?php esc_html_e( 'Appointments', 'noesia-smart-waiter' ); ?>
			</h3>
			<p class="noesia-swa-muted">
				<?php esc_html_e( 'Fast scheduling with a monthly calendar, day list, and status flags.', 'noesia-smart-waiter' ); ?>
			</p>
		</div>

		<?php do_action( 'noesia_swa_appointments_form_after' ); ?>
	</div>
</div>

<?php do_action( 'noesia_swa_appointments_after_content' ); ?>

<div class="noesia-swa-card noesia-swa-card--span2 noesia-swa-appt-shell">
	<div class="noesia-swa-card-header">
		<div class="noesia-swa-appt-toolbar">

			<button
				type="button"
				class="button"
				id="noesia-swa-appt-prev"
				aria-label="<?php esc_attr_e( 'Previous month', 'noesia-smart-waiter' ); ?>"
			>&larr;</button>

			<div class="noesia-swa-appt-month" id="noesia-swa-appt-month-label">—</div>

			<button
				type="button"
				class="button"
				id="noesia-swa-appt-next"
				aria-label="<?php esc_attr_e( 'Next month', 'noesia-smart-waiter' ); ?>"
			>&rarr;</button>

			<button type="button" class="button" id="noesia-swa-appt-today">
				<?php esc_html_e( 'Today', 'noesia-smart-waiter' ); ?>
			</button>

			<div class="noesia-swa-appt-view-switch" role="tablist" aria-label="<?php esc_attr_e( 'Appointment views', 'noesia-smart-waiter' ); ?>">
				<button
					type="button"
					class="button is-active"
					id="noesia-swa-appt-view-month"
					data-noesia-swa-appt-view="month"
					role="tab"
					aria-selected="true"
				>
					<?php esc_html_e( 'Month', 'noesia-smart-waiter' ); ?>
				</button>

				<button
					type="button"
					class="button"
					id="noesia-swa-appt-view-week"
					data-noesia-swa-appt-view="week"
					role="tab"
					aria-selected="false"
				>
					<?php esc_html_e( 'Week', 'noesia-smart-waiter' ); ?>
				</button>

				<button
					type="button"
					class="button"
					id="noesia-swa-appt-view-agenda"
					data-noesia-swa-appt-view="agenda"
					role="tab"
					aria-selected="false"
				>
					<?php esc_html_e( 'Agenda', 'noesia-smart-waiter' ); ?>
				</button>
			</div>

			<button type="button" class="button button-primary" id="noesia-swa-appt-new">
				<?php esc_html_e( 'New Appointment', 'noesia-smart-waiter' ); ?>
			</button>
		</div>

		<div class="noesia-swa-appt-legend" aria-label="<?php esc_attr_e( 'Appointment color legend', 'noesia-smart-waiter' ); ?>">
			<span class="noesia-swa-appt-legend-item is-scheduled">
				<span class="noesia-swa-appt-legend-dot" aria-hidden="true"></span>
				<?php esc_html_e( 'Scheduled', 'noesia-smart-waiter' ); ?>
			</span>

			<span class="noesia-swa-appt-legend-item is-flagged">
				<span class="noesia-swa-appt-legend-dot" aria-hidden="true"></span>
				<?php esc_html_e( 'Overdue / No-Show', 'noesia-smart-waiter' ); ?>
			</span>
		</div>
	</div>

	<div class="noesia-swa-appt-layout">
		<div class="noesia-swa-appt-calendar-wrap">

			<div
				class="noesia-swa-appt-panel is-active"
				id="noesia-swa-appt-panel-month"
				data-noesia-swa-appt-panel="month"
			>
				<div class="noesia-swa-appt-weekdays" aria-hidden="true">
					<div><?php esc_html_e( 'Mon', 'noesia-smart-waiter' ); ?></div>
					<div><?php esc_html_e( 'Tue', 'noesia-smart-waiter' ); ?></div>
					<div><?php esc_html_e( 'Wed', 'noesia-smart-waiter' ); ?></div>
					<div><?php esc_html_e( 'Thu', 'noesia-smart-waiter' ); ?></div>
					<div><?php esc_html_e( 'Fri', 'noesia-smart-waiter' ); ?></div>
					<div><?php esc_html_e( 'Sat', 'noesia-smart-waiter' ); ?></div>
					<div><?php esc_html_e( 'Sun', 'noesia-smart-waiter' ); ?></div>
				</div>

				<div
					class="noesia-swa-appt-calendar"
					id="noesia-swa-appt-calendar"
					role="grid"
					aria-label="<?php esc_attr_e( 'Monthly calendar', 'noesia-smart-waiter' ); ?>"
				></div>
			</div>

			<div
				class="noesia-swa-appt-panel"
				id="noesia-swa-appt-panel-week"
				data-noesia-swa-appt-panel="week"
				hidden
			>
				<div class="noesia-swa-appt-week-grid" id="noesia-swa-appt-week-grid"></div>
			</div>

			<div
				class="noesia-swa-appt-panel"
				id="noesia-swa-appt-panel-agenda"
				data-noesia-swa-appt-panel="agenda"
				hidden
			>
				<div class="noesia-swa-appt-agenda-list" id="noesia-swa-appt-agenda-list"></div>
			</div>
		</div>

		<div class="noesia-swa-appt-daypanel">
			<div class="noesia-swa-appt-dayhead">
				<h3 class="noesia-swa-h3" id="noesia-swa-appt-day-title">—</h3>
				<div class="noesia-swa-appt-daymeta" id="noesia-swa-appt-day-meta"></div>
			</div>

			<div class="noesia-swa-appt-daylist" id="noesia-swa-appt-day-list"></div>
		</div>
	</div>
</div>

<div class="noesia-swa-modal" id="noesia-swa-appt-modal" aria-hidden="true">
	<div class="noesia-swa-modal-backdrop" data-noesia-swa-appt-modal-close="1"></div>

	<div class="noesia-swa-modal-panel" role="dialog" aria-modal="true" aria-labelledby="noesia-swa-appt-modal-title">
		<div class="noesia-swa-modal-head">
			<h3 class="noesia-swa-h3" id="noesia-swa-appt-modal-title"><?php esc_html_e( 'New Appointment', 'noesia-smart-waiter' ); ?></h3>
			<button
				type="button"
				class="button"
				data-noesia-swa-appt-modal-close="1"
				aria-label="<?php esc_attr_e( 'Close', 'noesia-smart-waiter' ); ?>"
			>×</button>
		</div>

		<?php do_action( 'noesia_swa_appointments_form_before' ); ?>

		<div class="noesia-swa-form" id="noesia-swa-appt-form" role="form">
			<input type="hidden" id="noesia-swa-appt-id" value="" />

			<div class="noesia-swa-section-grid">
				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-date"><?php esc_html_e( 'Date', 'noesia-smart-waiter' ); ?></label>
					<input type="date" id="noesia-swa-appt-date" />
				</div>

				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-status"><?php esc_html_e( 'Status', 'noesia-smart-waiter' ); ?></label>
					<select id="noesia-swa-appt-status">
						<option value="scheduled"><?php esc_html_e( 'Scheduled', 'noesia-smart-waiter' ); ?></option>
						<option value="urgent"><?php esc_html_e( 'Urgent', 'noesia-smart-waiter' ); ?></option>
						<option value="completed"><?php esc_html_e( 'Completed', 'noesia-smart-waiter' ); ?></option>
						<option value="cancelled"><?php esc_html_e( 'Cancelled', 'noesia-smart-waiter' ); ?></option>
						<option value="no_show"><?php esc_html_e( 'No-Show', 'noesia-smart-waiter' ); ?></option>
					</select>
				</div>
			</div>

			<div class="noesia-swa-section-grid">
				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-start"><?php esc_html_e( 'Start Time', 'noesia-smart-waiter' ); ?></label>
					<input type="time" id="noesia-swa-appt-start" />
				</div>

				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-end"><?php esc_html_e( 'End Time', 'noesia-smart-waiter' ); ?></label>
					<input type="time" id="noesia-swa-appt-end" />
				</div>
			</div>

			<div class="noesia-swa-section-grid">
				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-guest-name"><?php esc_html_e( 'Guest Name', 'noesia-smart-waiter' ); ?></label>
					<input type="text" id="noesia-swa-appt-guest-name" placeholder="<?php esc_attr_e( 'e.g. Alex Morgan', 'noesia-smart-waiter' ); ?>" />
				</div>

				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-guest-phone"><?php esc_html_e( 'Phone', 'noesia-smart-waiter' ); ?></label>
					<input type="text" id="noesia-swa-appt-guest-phone" placeholder="<?php esc_attr_e( '+30 …', 'noesia-smart-waiter' ); ?>" />
				</div>
			</div>

			<div class="noesia-swa-section-grid">
				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-guest-email"><?php esc_html_e( 'Email', 'noesia-smart-waiter' ); ?></label>
					<input type="email" id="noesia-swa-appt-guest-email" placeholder="<?php esc_attr_e( 'name@example.com', 'noesia-smart-waiter' ); ?>" />
				</div>

				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-reason"><?php esc_html_e( 'Booking Purpose', 'noesia-smart-waiter' ); ?></label>
					<input type="text" id="noesia-swa-appt-reason" placeholder="<?php esc_attr_e( 'Reservation / meeting / VIP service…', 'noesia-smart-waiter' ); ?>" />
				</div>
			</div>

			<div class="noesia-swa-section-grid">
				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-party-size"><?php esc_html_e( 'Guests / Covers', 'noesia-smart-waiter' ); ?></label>
					<input
						type="number"
						id="noesia-swa-appt-party-size"
						min="1"
						max="9999"
						step="1"
						placeholder="<?php esc_attr_e( 'e.g. 2', 'noesia-smart-waiter' ); ?>"
					/>
				</div>

				<div class="noesia-swa-card">
					<label for="noesia-swa-appt-location"><?php esc_html_e( 'Table / Area', 'noesia-smart-waiter' ); ?></label>
					<input type="text" id="noesia-swa-appt-location" placeholder="<?php esc_attr_e( 'Table 5 / Terrace / Private Room', 'noesia-smart-waiter' ); ?>" />
				</div>
			</div>

			<div class="noesia-swa-card">
				<label for="noesia-swa-appt-notes"><?php esc_html_e( 'Notes', 'noesia-smart-waiter' ); ?></label>
				<textarea id="noesia-swa-appt-notes" rows="3" placeholder="<?php esc_attr_e( 'Optional appointment notes…', 'noesia-smart-waiter' ); ?>"></textarea>
			</div>

			<div class="noesia-swa-modal-actions">
				<div>
					<button type="button" class="button noesia-swa-is-hidden" id="noesia-swa-appt-delete">
						<?php esc_html_e( 'Delete Appointment', 'noesia-smart-waiter' ); ?>
					</button>
				</div>

				<div class="noesia-swa-actions-right">
					<button type="button" class="button" data-noesia-swa-appt-modal-close="1">
						<?php esc_html_e( 'Cancel', 'noesia-smart-waiter' ); ?>
					</button>

					<button type="button" class="button button-primary" id="noesia-swa-appt-save">
						<?php esc_html_e( 'Save Appointment', 'noesia-smart-waiter' ); ?>
					</button>
				</div>
			</div>

			<div class="noesia-swa-form-msg" id="noesia-swa-appt-msg" aria-live="polite"></div>
		</div>
	</div>
</div>