<?php
echo message_box('success');
echo message_box('error');

$legend_modules = array(
	array('toggle' => 'project_on_calendar', 'color' => 'project_color', 'label' => lang('project')),
	array('toggle' => 'milestone_on_calendar', 'color' => 'milestone_color', 'label' => lang('milestone')),
	array('toggle' => 'tasks_on_calendar', 'color' => 'tasks_color', 'label' => lang('tasks')),
	array('toggle' => 'bugs_on_calendar', 'color' => 'bugs_color', 'label' => lang('bugs')),
	array('toggle' => 'invoice_on_calendar', 'color' => 'invoice_color', 'label' => lang('invoice')),
	array('toggle' => 'payments_on_calendar', 'color' => 'payments_color', 'label' => lang('payments')),
	array('toggle' => 'estimate_on_calendar', 'color' => 'estimate_color', 'label' => lang('estimate')),
	array('toggle' => 'opportunities_on_calendar', 'color' => 'opportunities_color', 'label' => lang('opportunities')),
	array('toggle' => 'leads_on_calendar', 'color' => 'leads_color', 'label' => lang('leads')),
	array('toggle' => 'goal_tracking_on_calendar', 'color' => 'goal_tracking_color', 'label' => lang('goal_tracking')),
	array('toggle' => 'holiday_on_calendar', 'color' => null, 'label' => lang('holiday'), 'fixed' => '#f59e0b'),
	array('toggle' => 'absent_on_calendar', 'color' => 'absent_color', 'label' => lang('absent')),
	array('toggle' => 'on_leave_on_calendar', 'color' => 'on_leave_color', 'label' => lang('on_leave')),
);

$filter_modules = array(
	array('toggle' => 'project_on_calendar', 'value' => 'projects', 'label' => lang('project')),
	array('toggle' => 'milestone_on_calendar', 'value' => 'milestones', 'label' => lang('milestone')),
	array('toggle' => 'tasks_on_calendar', 'value' => 'tasks', 'label' => lang('tasks')),
	array('toggle' => 'bugs_on_calendar', 'value' => 'bugs', 'label' => lang('bugs')),
	array('toggle' => 'invoice_on_calendar', 'value' => 'invoices', 'label' => lang('invoice')),
	array('toggle' => 'payments_on_calendar', 'value' => 'payments', 'label' => lang('payments')),
	array('toggle' => 'estimate_on_calendar', 'value' => 'estimates', 'label' => lang('estimate')),
	array('toggle' => 'opportunities_on_calendar', 'value' => 'opportunities', 'label' => lang('opportunities')),
	array('toggle' => 'leads_on_calendar', 'value' => 'leads', 'label' => lang('leads')),
	array('toggle' => 'goal_tracking_on_calendar', 'value' => 'goal', 'label' => lang('goal_tracking')),
	array('toggle' => 'holiday_on_calendar', 'value' => 'holiday', 'label' => lang('holiday')),
	array('toggle' => 'absent_on_calendar', 'value' => 'absent', 'label' => lang('absent')),
	array('toggle' => 'on_leave_on_calendar', 'value' => 'on_leave', 'label' => lang('on_leave')),
);
?>

<style type="text/css">
	.calendar-toolbar-card {
		background:
			radial-gradient(1200px 300px at 8% -10%, rgba(99, 102, 241, 0.12), transparent 42%),
			radial-gradient(900px 260px at 90% 0%, rgba(14, 165, 233, 0.09), transparent 40%),
			hsl(var(--card));
	}

	.calendar-legend-chip {
		border: 1px solid hsl(var(--border));
		background: hsl(var(--background));
	}

	.dark .calendar-legend-chip {
		background: hsl(var(--muted) / 0.22);
	}

	.calendar-view-switch .cal-view-active {
		background: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		box-shadow: 0 10px 22px -16px rgba(79, 70, 229, 0.9);
	}

	.calendar-dialog {
		background: hsl(var(--card));
		border: 1px solid hsl(var(--border));
	}

	.calendar-event-modal {
		max-height: min(88vh, 960px);
	}

	.calendar-event-modal__body {
		max-height: calc(88vh - 9.5rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
</style>

<div class="space-y-5">
	<div class="calendar-toolbar-card rounded-2xl border border-border px-5 py-5 shadow-sm md:px-4">
		<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
			<div class="space-y-1 shrink-0">				
				<h1 class="text-2xl font-semibold text-foreground" data-cal-title></h1>				
			</div>

			<div class="flex flex-wrap items-center gap-2">

				<button type="button" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-background text-foreground hover:bg-muted" data-cal-prev>
					<i data-lucide="chevron-left" class="h-4 w-4"></i>
				</button>
				<button type="button" class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-background text-foreground hover:bg-muted" data-cal-next>
					<i data-lucide="chevron-right" class="h-4 w-4"></i>
				</button>
				<button type="button" class="inline-flex h-9 items-center justify-center rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground hover:bg-muted" data-cal-today>
					<?= lang('today') ?>
				</button>
				<?php if (can_action('71', 'created')) { ?>
					<button type="button" class="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-3 text-xs font-semibold text-primary-foreground hover:bg-primary/90" data-cal-create>
						<i data-lucide="plus" class="h-4 w-4"></i>
						<?= lang('new_event') ?>
					</button>
				<?php } ?>
				<div class="calendar-view-switch inline-flex items-center rounded-lg border border-border bg-background p-1 text-xs font-semibold">
					<button type="button" class="rounded-md px-3 py-1.5 text-foreground transition hover:bg-muted" data-cal-view="month">Month</button>
					<button type="button" class="rounded-md px-3 py-1.5 text-foreground transition hover:bg-muted" data-cal-view="week">Week</button>
					<button type="button" class="rounded-md px-3 py-1.5 text-foreground transition hover:bg-muted" data-cal-view="day">Day</button>
				</div>

				<?php if (admin_head()) { ?>
					<?= btn_modal(
						'admin/calendar/calendar_settings',
						lang('settings'),
						lang('calendar_settings'),
						'lg',
						'settings',
						array(
							'class' => 'inline-flex h-9 items-center gap-2 rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground hover:bg-muted'
						)
					); ?>
				<?php } ?>
					<div class="ml-auto">
						<?php
						$calendar_filter_options = array('all' => lang('all'));
						foreach ($filter_modules as $module) {
							if (config_item($module['toggle']) == 'on') {
								$calendar_filter_options[$module['value']] = $module['label'];
							}
						}
						echo form_select_group(
							'calendar_filter',
							lang('filter'),
							$calendar_filter_options,
							!empty($searchType) ? $searchType : 'all',
							false,
							array(
								'id' => 'calendar_filter',
								'data-events-url' => base_url('admin/calendar/events_json/'),
								'data-history-url' => base_url('admin/calendar/index/search/'),
								'class' => 'h-9 min-w-[220px]'
							),
							'',
							'',
							'horizontal'

						);
						?>
					</div>
			</div>
		</div>
	</div>

	<div class="rounded-2xl border border-border bg-card p-4 shadow-sm md:p-5">
		<div class="mb-4 flex flex-col gap-3 border-b border-border pb-4">
			<div class="flex flex-wrap items-center gap-2">
				<?php foreach ($legend_modules as $module) { ?>
					<?php if (config_item($module['toggle']) == 'on') { ?>
						<?php $chip_color = !empty($module['fixed']) ? $module['fixed'] : config_item($module['color']); ?>
						<span class="calendar-legend-chip inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-medium text-foreground">
							<span class="h-2 w-2 rounded-full" style="background: <?= $chip_color ?>"></span>
							<?= $module['label'] ?>
						</span>
					<?php } ?>
				<?php } ?>
			</div>
			<p class="inline-flex items-center gap-2 text-xs text-muted-foreground">
				<i data-lucide="mouse-pointer-click" class="h-3.5 w-3.5"></i>
				Single click a date to view events. Double click a date to create a new event.
			</p>
		</div>

		<?php $this->load->view("admin/calendar/my_calendar"); ?>
	</div>
</div>

<div id="calendar_event_modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4">
	<div class="calendar-dialog calendar-event-modal flex w-full max-w-xl flex-col overflow-hidden rounded-2xl shadow-xl">
		<div class="flex items-center justify-between border-b border-border px-5 py-3">
			<div>
				<h4 class="text-base font-semibold text-foreground" id="calendar_event_title"><?= lang('events') ?></h4>
				<p class="text-xs text-muted-foreground" id="calendar_event_subtitle"></p>
			</div>
			<button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground" data-cal-modal-close>
				<i data-lucide="x" class="h-4 w-4"></i>
			</button>
		</div>
		<div class="calendar-event-modal__body p-5">
			<div id="calendar_event_list" class="space-y-3"></div>
			<div id="calendar_event_empty" class="text-sm text-muted-foreground hidden"><?= lang('no_data') ?></div>
		</div>
		<div class="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
			<?php if (can_action('71', 'created')) { ?>
				<button type="button" class="inline-flex h-9 items-center gap-2 rounded-lg bg-primary px-3 text-xs font-semibold text-primary-foreground hover:bg-primary/90" data-cal-modal-create>
					<i data-lucide="plus" class="h-4 w-4"></i>
					<?= lang('new_event') ?>
				</button>
			<?php } ?>
			<button type="button" class="inline-flex h-9 items-center rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground hover:bg-muted" data-cal-modal-close>
				<?= lang('close') ?>
			</button>
		</div>
	</div>
</div>

<?php if (can_action('71', 'created')) { ?>
	<div id="calendar_create_modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/40 p-4">
		<div class="calendar-dialog w-full max-w-2xl rounded-2xl shadow-xl">
			<div class="flex items-center justify-between border-b border-border px-5 py-3">
				<div>
					<h4 class="text-base font-semibold text-foreground"><?= lang('new_event') ?></h4>
					<p class="text-xs text-muted-foreground" id="calendar_create_subtitle"></p>
				</div>
				<button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground" data-cal-create-close>
					<i data-lucide="x" class="h-4 w-4"></i>
				</button>
			</div>
			<?= form_open('admin/holiday/save_holiday', array('class' => 'p-5 space-y-4')) ?>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				<div class="md:col-span-2">
					<?= form_input_group('event_name', lang('event_name'), '', 'text', true); ?>
				</div>
				<div>
					<?= form_datepicker('start_date', lang('start_date'), '', true, array('data-max' => '#end_date', 'data-auto-close' => 'true')); ?>
				</div>
				<div>
					<?= form_datepicker('end_date', lang('end_date'), '', true, array('data-min' => '#start_date', 'data-auto-close' => 'true')); ?>
				</div>
				<div class="md:col-span-2">
					<?= form_textarea_group('description', lang('description'), '', 3, false); ?>
				</div>
				<div>
					<?= form_input_group('location', lang('location')); ?>
				</div>
				<div>
					<?= form_colorpicker('color', lang('color'), '#6366f1', false, array('id' => 'calendar_create_color')); ?>
				</div>
			</div>
			<div class="flex items-center justify-end gap-2 border-t border-border pt-4">
				<button type="button" class="inline-flex h-9 items-center rounded-lg border border-border bg-background px-3 text-xs font-semibold text-foreground hover:bg-muted" data-cal-create-close><?= lang('close') ?></button>
				<button type="submit" class="inline-flex h-9 items-center rounded-lg bg-primary px-3 text-xs font-semibold text-primary-foreground hover:bg-primary/90"><?= lang('save') ?></button>
			</div>
			<?= form_close() ?>
		</div>
	</div>
<?php } ?>
