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

<?= message_box('success'); ?>
<?= message_box('error'); ?>

<?php
$is_edit = !empty($project_info);
$project_no = $is_edit
	? $project_info->project_no
	: ((empty(config_item('projects_number_format')) ? config_item('projects_prefix') : '') . $this->items_model->generate_projects_number());
$project_name = $is_edit ? $project_info->project_name : '';
$start_date = !empty($project_info->start_date) ? date('Y-m-d', safe_strtotime($project_info->start_date)) : '';
$end_date = !empty($project_info->end_date) ? date('Y-m-d', safe_strtotime($project_info->end_date)) : '';
$billing_type = $is_edit ? $project_info->billing_type : '';
$project_cost = $is_edit ? $project_info->project_cost : '';
$hourly_rate = $is_edit ? $project_info->hourly_rate : '';
$demo_url = $is_edit ? $project_info->demo_url : '';
$description = $is_edit ? $project_info->description : '';

$billing_options = array(
	'fixed_rate' => lang('fixed_rate'),
	'project_hours' => lang('only') . ' ' . lang('project_hours'),
	'tasks_hours' => lang('only') . ' ' . lang('tasks_hours'),
	'tasks_and_project_hours' => lang('tasks_and_project_hours'),
);

$custom_project_id = $is_edit ? $project_info->project_id : null;
?>

<div class="space-y-4">
	<div class="rounded-2xl border border-border bg-card shadow-sm">
		<div class="flex flex-col gap-3 border-b border-border px-5 py-4 md:flex-row md:items-center md:justify-between">
			<div>
				<h2 class="text-xl font-semibold text-foreground"><?= $is_edit ? lang('update_project') : lang('new_project') ?></h2>
				<p class="mt-1 text-sm text-muted-foreground"><?= lang('project') ?></p>
			</div>
			<a href="<?= base_url('client/projects') ?>" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-foreground hover:bg-muted">
				<i data-lucide="list" class="h-4 w-4"></i>
				<?= lang('all_project') ?>
			</a>
		</div>

		<form method="post" data-parsley-validate="" novalidate=""
			action="<?php echo base_url(); ?>client/projects/saved_project/<?php
																			if (!empty($project_info)) {
																				echo $project_info->project_id;
																			}
																			?>" enctype="multipart/form-data" class="space-y-6 p-5">
			<div class="grid grid-cols-1 gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
				<div class="space-y-6">
					<section class="space-y-4">
						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
							<?= form_input_group('project_no', lang('project_no'), $project_no, 'text', true, array('readonly' => true)); ?>
							<?= form_input_group('project_name', lang('project_name'), $project_name, 'text', true, array('placeholder' => lang('project_name'))); ?>
						</div>

						<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
							<?= form_datepicker('start_date', lang('start_date'), $start_date, true, array('data-date-format' => config_item('date_picker_format'))); ?>
							<?= form_datepicker('end_date', lang('end_date'), $end_date, true, array('data-date-format' => config_item('date_picker_format'))); ?>
						</div>
					</section>

					<section class="space-y-4">
						<div class="grid grid-cols-1 gap-4 lg:grid-cols-4">
							<?= form_select_group('billing_type', lang('billing_type'), $billing_options, $billing_type, true, array('id' => 'billing_type')); ?>
							<div id="fixed_rate_wrap">
								<?= form_input_group('project_cost', lang('fixed_price'), $project_cost, 'text', false, array('data-parsley-type' => 'number', 'placeholder' => '50')); ?>
							</div>
							<div id="hourly_rate_wrap">
								<?= form_input_group('hourly_rate', lang('project_hourly_rate'), $hourly_rate, 'text', false, array('data-parsley-type' => 'number', 'placeholder' => '50')); ?>
							</div>
							<?= form_input_group('demo_url', lang('demo_url'), $demo_url, 'text', false, array('placeholder' => 'http://www.demourl.com')); ?>
						</div>
						<div id="billing_note" class="text-xs font-medium text-muted-foreground"></div>
					</section>

					<section class="space-y-4">
						<?= form_editor('description', lang('description'), $description, false); ?>
					</section>
				</div>

				<aside class="space-y-4 xl:border-l xl:border-border xl:pl-6">
					<h3 class="text-sm font-semibold text-foreground"><?= lang('custom_fields') ?></h3>
					<div class="space-y-4">
						<?= custom_form_Fields(4, $custom_project_id); ?>
					</div>
				</aside>
			</div>

			<div class="flex flex-col-reverse gap-2 border-t border-border pt-5 sm:flex-row sm:items-center sm:justify-end">
				<a href="<?= base_url('client/projects'); ?>" class="inline-flex items-center justify-center rounded-lg border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground hover:bg-muted">
					<?= lang('cancel') ?>
				</a>
				<button type="submit" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white shadow hover:bg-primary/90 transition">
					<i data-lucide="save" class="h-4 w-4"></i>
					<?= $is_edit ? lang('updates') : lang('new_project') ?>
				</button>
			</div>
		</form>
	</div>
</div>

<script type="text/javascript">
	(function() {
		var billingSelect = document.getElementById('billing_type');
		var fixedRateWrap = document.getElementById('fixed_rate_wrap');
		var hourlyRateWrap = document.getElementById('hourly_rate_wrap');
		var billingNote = document.getElementById('billing_note');

		function setVisible(el, visible) {
			if (!el) {
				return;
			}
			el.style.display = visible ? '' : 'none';
		}

		function setDisabled(selector, disabled) {
			var field = document.querySelector(selector);
			if (!field) {
				return;
			}
			if (disabled) {
				field.setAttribute('disabled', 'disabled');
			} else {
				field.removeAttribute('disabled');
			}
		}

		function updateBillingUi(val) {
			if (val === 'fixed_rate') {
				setVisible(fixedRateWrap, true);
				setVisible(hourlyRateWrap, false);
				setDisabled('[name="project_cost"]', false);
				setDisabled('[name="hourly_rate"]', true);
				if (billingNote) {
					billingNote.textContent = '';
				}
				return;
			}

			if (val === 'tasks_hours') {
				setVisible(fixedRateWrap, false);
				setVisible(hourlyRateWrap, false);
				setDisabled('[name="project_cost"]', true);
				setDisabled('[name="hourly_rate"]', true);
				if (billingNote) {
					billingNote.textContent = '<?= lang('based_on_hourly_rate') ?>';
				}
				return;
			}

			setVisible(fixedRateWrap, false);
			setVisible(hourlyRateWrap, true);
			setDisabled('[name="project_cost"]', true);
			setDisabled('[name="hourly_rate"]', false);
			if (billingNote) {
				billingNote.textContent = val === 'project_hours' ? '' : '<?= lang('based_on_hourly_rate') ?>';
			}
		}

		if (!billingSelect) {
			return;
		}

		updateBillingUi(billingSelect.value);
		billingSelect.addEventListener('change', function() {
			updateBillingUi(billingSelect.value);
		});
	})();
</script>
