<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<div class="space-y-8">
	<div class="flex items-center justify-between">
		<div>
			<h2 class="text-xl font-semibold text-foreground"><?= lang('create_project'); ?></h2>
			<p class="text-sm text-muted-foreground">Examples of both stacked and horizontal form styles using the new helpers.</p>
		</div>
		<a href="<?= base_url('admin/projects'); ?>" class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow hover:bg-primary/90 transition">
			<?= lang('back'); ?>
		</a>
	</div>

	<!-- Stacked layout -->
	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="p-6 space-y-4">
			<h3 class="text-lg font-semibold text-foreground">Stacked layout</h3>
			<form class="space-y-4">
				<?= form_control('name', 'Project Name', '', 'text', true); ?>
				<?= form_select_group('customer_id', 'Customer', ['' => 'Select', '1' => 'Acme Inc', '2' => 'Globex'], '', true); ?>
				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
					<?= form_datepicker('start_date', 'Start Date', '', true); ?>
					<?= form_datepicker('deadline', 'Deadline', '', true); ?>
				</div>
				<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
					<?= form_timepicker('kickoff_time', 'Kickoff Time'); ?>
					<?= form_colorpicker('accent_color', 'Accent Color', '#4f46e5'); ?>
				</div>
				<?= form_textarea_group('description', 'Description', '', 4, false, [], 'stacked', '', '', false); ?>
				<?= form_editor('notes', 'Notes (rich text)'); ?>
				<?= form_file('attachments[]', 'Attachments'); ?>
				<div class="flex justify-end gap-2 pt-2">
					<button type="button" class="rounded-lg border border-border px-4 py-2 text-sm text-foreground hover:bg-muted transition"><?= lang('cancel'); ?></button>
					<button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow hover:bg-primary/90 transition"><?= lang('save'); ?></button>
				</div>
			</form>
		</div>
	</div>

	<!-- Horizontal layout -->
	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="p-6 space-y-4">
			<h3 class="text-lg font-semibold text-foreground">Horizontal layout</h3>
			<form class="space-y-2">
				<?= form_input_group('code', 'Project Code', 'PRJ-2026-001', 'text', true, [], 'horizontal'); ?>
				<?= form_select_group('owner_id', 'Owner', ['' => 'Select', '1' => 'John Doe', '2' => 'Jane Smith'], '', true, [], 'horizontal'); ?>
				<?= form_input_group('budget', 'Budget', '100000', 'number', false, [], 'horizontal', '$', 'USD'); ?>
				<?= form_datepicker('milestone', 'Next Milestone', '', false, [], 'horizontal'); ?>
				<?= form_timepicker('meeting_time', 'Weekly Meeting', '', false, [], 'horizontal'); ?>
				<?= form_colorpicker('label_color', 'Label Color', '#10b981', false, [], 'horizontal'); ?>
				<?= form_textarea_group('summary', 'Summary', 'High level summary...', 3, false, [], 'horizontal'); ?>
				<?= form_editor('scope', 'Scope Details', '', false, [], 'horizontal'); ?>
				<?= form_file('spec_file', 'Specification File', false, ['class' => 'w-full'], 'horizontal'); ?>
				<div class="flex items-start gap-3 py-2">
					<div class="w-48"></div>
					<div class="flex gap-2">
						<button type="button" class="rounded-lg border border-border px-4 py-2 text-sm text-foreground hover:bg-muted transition"><?= lang('cancel'); ?></button>
						<button type="submit" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white shadow hover:bg-primary/90 transition"><?= lang('save'); ?></button>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
