<?= message_box('success') ?>
<?= message_box('error') ?>
<?php
$proposal_id = $proposals_info->proposals_id;
$proposal_url = base_url() . 'frontend/proposals/' . url_encode($proposal_id);

if ($proposals_info->module == 'client') {
	$client_info = $this->proposal_model->check_by(array('client_id' => $proposals_info->module_id), 'tbl_client');
	$currency = $this->proposal_model->client_currency_symbol($proposals_info->module_id);
	$client_lang = !empty($client_info->language) ? $client_info->language : config_item('language');
} elseif ($proposals_info->module == 'leads') {
	$client_info = $this->proposal_model->check_by(array('leads_id' => $proposals_info->module_id), 'tbl_leads');
	$client_info->name = $client_info->lead_name;
	$client_info->zipcode = null;
	$client_lang = 'english';
	$currency = $this->proposal_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
} else {
	$client_info = null;
	$client_lang = 'english';
	$currency = $this->proposal_model->check_by(array('code' => config_item('default_currency')), 'tbl_currencies');
}

unset($this->lang->is_loaded[5]);
$language_info = $this->lang->load('sales_lang', $client_lang, true, false, '', true);

$status_value = strtolower((string) ($proposals_info->status ?? ''));
$status_label = !empty($proposals_info->status_label) ? $proposals_info->status_label : lang($proposals_info->status);
$currency_symbol = is_object($currency) && !empty($currency->symbol) ? $currency->symbol : (is_string($currency) ? $currency : default_currency());

$overdue_days = 0;
$overdue_message = '';
if (safe_strtotime($proposals_info->due_date) < safe_strtotime(date('Y-m-d')) && $proposals_info->status == 'draft') {
	$start = safe_strtotime(date('Y-m-d'));
	$end = safe_strtotime($proposals_info->due_date);
	$overdue_days = ceil(abs($end - $start) / 86400);
	$overdue_message = 'This proposal expired on ' . display_date($proposals_info->due_date) . ' and is currently overdue by ' . $overdue_days . ' days.';
}

$all_items = $this->proposal_model->ordered_items_by_id($proposal_id);

if (!empty($client_info)) {
	$client_name = $client_info->name;
	$address = $client_info->address;
	$city = $client_info->city;
	$zipcode = $client_info->zipcode;
	$country = $client_info->country;
	$phone = $client_info->phone;
	$vat = $client_info->vat ?? '';
} else {
	$client_name = '-';
	$address = '-';
	$city = '-';
	$zipcode = '-';
	$country = '-';
	$phone = '-';
	$vat = '';
}

$custom_fields = custom_form_label(11, $proposal_id);
$custom_field_markup = '';
if (!empty($custom_fields)) {
	foreach ($custom_fields as $c_label => $v_fields) {
		if (!empty($v_fields)) {
			$custom_field_markup .= '<span class="proposal-chip">' . html_escape($c_label) . ': ' . html_escape($v_fields) . '</span>';
		}
	}
}

$subtotal = $this->proposal_model->proposal_calculation('proposal_cost', $proposal_id);
$discount = $this->proposal_model->proposal_calculation('discount', $proposal_id);
$total = $this->proposal_model->proposal_calculation('total', $proposal_id);
$tax_info = json_decode($proposals_info->total_tax);
$tax_rows = array();
if (!empty($tax_info) && !empty($tax_info->tax_name) && is_array($tax_info->tax_name)) {
	foreach ($tax_info->tax_name as $i => $raw_tax) {
		$tax = explode('|', $raw_tax);
		$tax_rows[] = array(
			'label' => $tax[0] ?? '',
			'percent' => $tax[1] ?? '',
			'value' => !empty($tax_info->total_tax[$i]) ? $tax_info->total_tax[$i] : 0,
		);
	}
}
?>

<style>
	.proposal-page {
		--bg: #f3f6fb;
		--card: #ffffff;
		--text: #172033;
		--muted: #6b7280;
		--line: #dfe6f1;
		--line-2: #e9eef6;
		--primary: #5648f5;
		--primary-2: #3b82f6;
		--danger-bg: #fde8ea;
		--danger: #e11d48;
		--shadow: 0 20px 55px rgba(16, 24, 40, 0.08);
		max-width: 100%;
		background: var(--bg);
		padding: 14px 10px 26px;
		color: var(--text);
		font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	.proposal-shell {
		max-width: 1060px;
		margin: 0 auto;
	}

	.proposal-topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 4px 8px 10px;
	}

	.proposal-topbar__title {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.proposal-topbar__ref {
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.02em;
		line-height: 1.1;
		color: #0f172a;
	}

	.proposal-topbar__sub {
		font-size: 11px;
		font-weight: 700;
		color: var(--danger);
	}

	.proposal-topbar__actions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.proposal-top-btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 34px;
		padding: 0 13px;
		border: 1px solid #d4d9e4;
		border-radius: 8px;
		background: #ffffff;
		color: #334155;
		font-size: 12px;
		font-weight: 700;
		text-decoration: none;
		transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
		box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02);
	}

	.proposal-top-btn:hover {
		background: #f8fafc;
		border-color: #cfd7e6;
		transform: translateY(-1px);
	}

	.proposal-top-btn--primary {
		background: var(--primary);
		border-color: var(--primary);
		color: #fff;
		box-shadow: 0 8px 22px rgba(86, 72, 245, 0.22);
	}

	.proposal-top-btn--primary:hover {
		background: #4538ef;
		border-color: #4538ef;
	}

	.proposal-page-card {
		background: var(--card);
		border: 1px solid var(--line);
		border-radius: 14px;
		box-shadow: var(--shadow);
		overflow: hidden;
	}

	.proposal-alert {
		padding: 11px 16px;
		background: #fff1f3;
		border-bottom: 1px solid #f4cdd4;
		color: var(--danger);
		font-size: 12px;
		font-weight: 700;
		text-align: center;
	}

	.proposal-paper {
		padding: 34px 42px 22px;
	}

	.proposal-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 18px;
	}

	.proposal-brand {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.proposal-brand__mark {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: 10px;
		background: linear-gradient(135deg, #5b5ef2 0%, #4f46e5 100%);
		color: #fff;
		font-size: 15px;
		font-weight: 800;
	}

	.proposal-brand__name {
		font-size: 24px;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.04em;
		color: #2b3a70;
	}

	.proposal-heading {
		text-align: right;
	}

	.proposal-heading__label {
		font-size: 32px;
		font-weight: 900;
		line-height: 0.95;
		letter-spacing: -0.05em;
		color: #0f172a;
	}

	.proposal-heading__ref {
		margin-top: 6px;
		font-size: 16px;
		font-weight: 800;
		color: #64748b;
	}

	.proposal-metrics {
		margin-top: 32px;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		border: 1px solid var(--line-2);
		border-radius: 12px;
		overflow: hidden;
		background: #f8fafc;
	}

	.proposal-metric {
		padding: 16px 18px 14px;
		border-right: 1px solid var(--line-2);
		background: #f9fbfe;
	}

	.proposal-metric:last-child {
		border-right: 0;
	}

	.proposal-metric__label {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: #9aa6b8;
	}

	.proposal-metric__value {
		margin-top: 8px;
		font-size: 13px;
		font-weight: 800;
		color: #0f172a;
	}

	.proposal-metric__value--accent {
		color: #4f46e5;
		font-size: 17px;
	}

	.proposal-divider {
		margin-top: 28px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}

	.proposal-block__label {
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: #9aa6b8;
		margin-bottom: 12px;
	}

	.proposal-party__name {
		font-size: 16px;
		font-weight: 800;
		color: #0f172a;
	}

	.proposal-party__sub {
		margin-top: 6px;
		font-size: 13px;
		line-height: 1.6;
		color: #475569;
	}

	.proposal-address {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.6;
		color: #64748b;
	}

	.proposal-custom {
		margin-top: 12px;
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	.proposal-chip {
		display: inline-flex;
		align-items: center;
		padding: 7px 10px;
		border-radius: 999px;
		background: #eef2ff;
		border: 1px solid #d9dff9;
		color: #4338ca;
		font-size: 12px;
		font-weight: 700;
	}

	.proposal-items {
		margin-top: 34px;
	}

	.proposal-table {
		width: 100%;
		border-collapse: collapse;
	}

	.proposal-table thead th {
		padding: 10px 0 12px;
		border-bottom: 1px solid #0f172a;
		font-size: 11px;
		font-weight: 800;
		text-align: left;
		color: #0f172a;
	}

	.proposal-table thead th:nth-child(3),
	.proposal-table thead th:nth-child(4),
	.proposal-table thead th:nth-child(5),
	.proposal-table thead th:nth-child(6) {
		text-align: right;
	}

	.proposal-table tbody td {
		padding: 14px 0 12px;
		border-bottom: 0;
		vertical-align: top;
		font-size: 13px;
		color: #0f172a;
	}

	.proposal-table__index {
		width: 24px;
		font-size: 11px;
		color: #475569;
	}

	.proposal-item__name {
		font-size: 13px;
		font-weight: 800;
		color: #0f172a;
	}

	.proposal-item__desc {
		margin-top: 4px;
		font-size: 11px;
		line-height: 1.6;
		color: #64748b;
	}

	.proposal-table__qty,
	.proposal-table__price,
	.proposal-table__tax,
	.proposal-table__total {
		text-align: right;
		white-space: nowrap;
	}

	.proposal-totals {
		margin-top: 22px;
		display: flex;
		justify-content: flex-end;
	}

	.proposal-totals__panel {
		width: min(100%, 300px);
	}

	.proposal-totals__row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 5px 0;
		font-size: 13px;
		color: #475569;
	}

	.proposal-totals__row strong {
		color: #0f172a;
	}

	.proposal-totals__line {
		height: 1px;
		background: #0f172a;
		margin: 4px 0 8px;
	}

	.proposal-totals__grand {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-top: 2px;
		font-size: 13px;
		font-weight: 800;
		color: #0f172a;
	}

	.proposal-totals__grand strong {
		font-size: 15px;
		color: #4f46e5;
	}

	.proposal-bottom {
		margin-top: 28px;
		padding-top: 18px;
		border-top: 1px solid #e7ecf3;
		display: grid;
		grid-template-columns: 1.2fr 1fr;
		gap: 28px;
	}

	.proposal-footer-block__title {
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: #0f172a;
		margin-bottom: 8px;
	}

	.proposal-footer-block__text {
		font-size: 12px;
		line-height: 1.7;
		color: #64748b;
	}

	.proposal-footer {
		padding: 8px 42px 14px;
		border-top: 1px solid #edf2f8;
		font-size: 10px;
		color: #94a3b8;
		text-align: center;
	}

	.proposal-url {
		width: 1px;
		height: 1px;
		border: 0;
		padding: 0;
		opacity: 0;
		position: absolute;
		left: -9999px;
	}

	@media (max-width: 900px) {
		.proposal-header,
		.proposal-divider,
		.proposal-bottom {
			grid-template-columns: 1fr;
		}

		.proposal-header {
			display: grid;
		}

		.proposal-heading {
			text-align: left;
		}

		.proposal-metrics {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (max-width: 720px) {
		.proposal-topbar {
			flex-direction: column;
			align-items: flex-start;
		}

		.proposal-paper {
			padding: 22px 16px 18px;
		}

		.proposal-metrics {
			grid-template-columns: 1fr;
		}

		.proposal-metric {
			border-right: 0;
			border-bottom: 1px solid var(--line-2);
		}

		.proposal-metric:last-child {
			border-bottom: 0;
		}

		.proposal-heading__label {
			font-size: 24px;
		}

		.proposal-brand__name {
			font-size: 20px;
		}

		.proposal-footer {
			padding: 8px 16px 12px;
		}
	}
</style>

<div class="proposal-page">
	<div class="proposal-shell">
		<div class="proposal-topbar">
			<div class="proposal-topbar__title">
				<div class="proposal-topbar__ref"><?= html_escape($proposals_info->reference_no) ?></div>
				<div class="proposal-topbar__sub">Overdue by <?= (int) $overdue_days ?> Days</div>
			</div>

			<div class="proposal-topbar__actions">
				<button type="button" data-copy-target="#proposal-url" class="proposal-top-btn">
					<i data-lucide="copy" class="h-3.5 w-3.5"></i>
					Copy URL
				</button>
				<button type="button" onclick="window.print()" class="proposal-top-btn">
					<i data-lucide="printer" class="h-3.5 w-3.5"></i>
					Print
				</button>
				<a href="<?= base_url() ?>frontend/pdf_proposals/<?= $proposal_id ?>" class="proposal-top-btn">
					<i data-lucide="file-text" class="h-3.5 w-3.5"></i>
					PDF
				</a>
				<?php if ($proposals_info->status != 'accepted') { ?>
					<a href="<?= base_url() ?>client/proposals/change_status/declined/<?= $proposal_id ?>" class="proposal-top-btn">
						<i data-lucide="x" class="h-3.5 w-3.5"></i>
						Decline
					</a>
					<a href="<?= base_url() ?>client/proposals/change_status/accepted/<?= $proposal_id ?>" class="proposal-top-btn proposal-top-btn--primary">
						<i data-lucide="check" class="h-3.5 w-3.5"></i>
						Accept Proposal
					</a>
				<?php } ?>
			</div>
		</div>

		<div class="proposal-page-card">
			<div class="proposal-alert">This proposal expired on <?= display_date($proposals_info->due_date) ?> and is currently overdue by <?= (int) $overdue_days ?> days.</div>
			<div class="proposal-paper" id="sales_details">
				<div class="proposal-header">
					<div class="proposal-brand">
						<div class="proposal-brand__mark">Z</div>
						<div class="proposal-brand__name">ZiscoERP</div>
					</div>
					<div class="proposal-heading">
						<div class="proposal-heading__label"><?= lang('proposal') ?></div>
						<div class="proposal-heading__ref"># <?= html_escape($proposals_info->reference_no) ?></div>
					</div>
				</div>

				<div class="proposal-metrics">
					<div class="proposal-metric">
						<div class="proposal-metric__label"><?= lang('date') ?> issued</div>
						<div class="proposal-metric__value"><?= display_date($proposals_info->proposal_date) ?></div>
					</div>
					<div class="proposal-metric">
						<div class="proposal-metric__label">Valid until</div>
						<div class="proposal-metric__value" style="color:#ef4444;"><?= display_date($proposals_info->due_date) ?></div>
					</div>
					<div class="proposal-metric">
						<div class="proposal-metric__label"><?= lang('sales') ?> <?= lang('agent') ?></div>
						<div class="proposal-metric__value"><?= html_escape(fullname($proposals_info->user_id)) ?></div>
					</div>
					<div class="proposal-metric">
						<div class="proposal-metric__label">Amount Due</div>
						<div class="proposal-metric__value proposal-metric__value--accent"><?= display_money($total, $currency_symbol) ?></div>
					</div>
				</div>

				<div class="proposal-divider">
					<div>
						<div class="proposal-block__label">From</div>
						<div class="proposal-party__name"><?= html_escape(config_item('company_legal_name_' . $client_lang) ? config_item('company_legal_name_' . $client_lang) : config_item('company_legal_name')) ?></div>
						<div class="proposal-party__sub"><?= html_escape(config_item('company_legal_name')) ?></div>
						<div class="proposal-address">
							<div><?= html_escape(config_item('company_address_' . $client_lang) ? config_item('company_address_' . $client_lang) : config_item('company_address')) ?></div>
							<div><?= html_escape((config_item('company_city_' . $client_lang) ? config_item('company_city_' . $client_lang) : config_item('company_city')) . ', ' . config_item('company_zip_code')) ?></div>
							<div><?= html_escape(config_item('company_country_' . $client_lang) ? config_item('company_country_' . $client_lang) : config_item('company_country')) ?></div>
							<?php if (!empty(config_item('company_phone'))) { ?><div><?= lang('phone') ?>: <?= html_escape(config_item('company_phone')) ?></div><?php } ?>
						</div>
					</div>

					<div>
						<div class="proposal-block__label">Prepared for</div>
						<div class="proposal-party__name"><?= html_escape($client_name) ?></div>
						<div class="proposal-address">
							<div>Client Address <?= html_escape(trim($proposals_info->module_id)) ?></div>
							<div><?= html_escape($address) ?></div>
							<div><?= html_escape(trim($city . ', ' . $zipcode)) ?></div>
							<div><?= html_escape($country) ?></div>
							<?php if (!empty($phone)) { ?><div><?= lang('phone') ?>: <?= html_escape($phone) ?></div><?php } ?>
						</div>
					</div>
				</div>

				<?php if (!empty($custom_field_markup)) { ?>
					<div class="proposal-custom">
						<?= $custom_field_markup ?>
					</div>
				<?php } ?>

				<div class="proposal-items">
					<table class="proposal-table">
						<thead>
							<tr>
								<th style="width:26px;">#</th>
								<th>Description</th>
								<th>Qty</th>
								<th>Price</th>
								<th>Tax</th>
								<th>Total</th>
							</tr>
						</thead>
						<tbody>
							<?php if (!empty($all_items)) : ?>
								<?php foreach ($all_items as $index => $item) : ?>
									<?php
									$item_name = !empty($item->item_name) ? $item->item_name : $item->item_desc;
									$item_taxes = array();
									if (!empty($item->item_tax_name)) {
										$decoded_taxes = json_decode($item->item_tax_name);
										if (is_array($decoded_taxes)) {
											foreach ($decoded_taxes as $raw_tax) {
												$tax = explode('|', $raw_tax);
												$item_taxes[] = array('label' => $tax[0] ?? '', 'percent' => $tax[1] ?? '');
											}
										}
									}
									?>
									<tr>
										<td class="proposal-table__index"><?= $index + 1 ?></td>
										<td>
											<div class="proposal-item__name"><?= html_escape($item_name) ?></div>
											<div class="proposal-item__desc"><?= nl2br(html_escape($item->item_desc)) ?></div>
										</td>
										<td class="proposal-table__qty"><?= html_escape($item->quantity . ' ' . $item->unit) ?></td>
										<td class="proposal-table__price"><?= display_money($item->unit_cost, $currency_symbol) ?></td>
										<td class="proposal-table__tax">
											<?php if (!empty($item_taxes)) : ?>
												<?php foreach ($item_taxes as $tax) : ?>
													<div><?= html_escape($tax['label']) ?> (<?= html_escape($tax['percent']) ?>%)</div>
												<?php endforeach; ?>
											<?php else : ?>
												-
											<?php endif; ?>
										</td>
										<td class="proposal-table__total" style="font-weight:800;"><?= display_money($item->total_cost, $currency_symbol) ?></td>
									</tr>
								<?php endforeach; ?>
							<?php else : ?>
								<tr>
									<td colspan="6" style="text-align:center; padding:24px 0; color:#64748b;">No items found.</td>
								</tr>
							<?php endif; ?>
						</tbody>
					</table>
				</div>

				<div class="proposal-totals">
					<div class="proposal-totals__panel">
						<div class="proposal-totals__row"><span>Sub Total</span><strong><?= display_money($subtotal, $currency_symbol) ?></strong></div>
						<?php if (!empty($discount) && $discount > 0) { ?>
							<div class="proposal-totals__row"><span>Discount</span><strong>-<?= display_money($discount, $currency_symbol) ?></strong></div>
						<?php } ?>
						<?php if (!empty($tax_rows)) { ?>
							<?php foreach ($tax_rows as $tax_row) { ?>
								<div class="proposal-totals__row"><span><?= html_escape($tax_row['label']) ?> (<?= html_escape($tax_row['percent']) ?>%)</span><strong><?= display_money($tax_row['value'], $currency_symbol) ?></strong></div>
							<?php } ?>
						<?php } ?>
						<?php if (!empty($proposals_info->adjustment)) { ?>
							<div class="proposal-totals__row"><span>Adjustment</span><strong><?= display_money($proposals_info->adjustment, $currency_symbol) ?></strong></div>
						<?php } ?>
						<div class="proposal-totals__line"></div>
						<div class="proposal-totals__grand"><span>TOTAL</span><strong><?= display_money($total, $currency_symbol) ?></strong></div>
					</div>
				</div>

				<div class="proposal-bottom">
					<div>
						<div class="proposal-footer-block__title">Terms and Conditions</div>
						<div class="proposal-footer-block__text"><?= html_escape($proposals_info->notes) ?></div>
					</div>
					<div>
						<div class="proposal-footer-block__title">Proposal Notes</div>
						<div class="proposal-footer-block__text">Proposal notes 260. If you have any questions regarding this proposal, please contact John Doe.</div>
					</div>
				</div>
			</div>
			<div class="proposal-footer">© <?= date('Y') ?> Uniquecoder. All rights reserved. Generated by ZiscoERP.</div>
		</div>

		<input id="proposal-url" type="text" value="<?= html_escape($proposal_url) ?>" class="proposal-url" readonly>
	</div>
</div>

<script>
	document.addEventListener('click', function(event) {
		var button = event.target.closest('[data-copy-target]');
		if (!button) return;
		var target = button.getAttribute('data-copy-target');
		var input = document.querySelector(target);
		if (!input) return;
		input.select();
		input.setSelectionRange(0, 99999);
		try {
			document.execCommand('copy');
		} catch (err) {}
	});
</script>
