<link href="<?php echo base_url('assets/css/ai-setting.css'); ?>" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url('my-assets/css/ai_chat.css'); ?>" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="<?php echo base_url() ?>my-assets/js/admin_js/ai_chat.js" type="text/javascript"></script>

<div class="ai_setting_container">
	<!-- Section Heading -->
	<div class="section_head">
		<p class="heading">AI Business Analyst</p>
		<div class="" id="downloadBtnWrap">
			<button id="downloadPdfBtn" class="btn_download">
				<svg width="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
					<path
						d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 242.7-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7 288 32zM64 352c-35.3 0-64 28.7-64 64l0 32c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-32c0-35.3-28.7-64-64-64l-101.5 0-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352 64 352zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z" />
				</svg> Download PDF</button>
		</div>
	</div>

	<div class="ai_chat_container">
		<!-- Ask AI -->
		<div class="ai_chat_wrapper">
			<form id="aiChatForm" class="form_container">
				<!-- Select Report Type -->
				<div class="input_label">
					<label class="label_name">Select Report Type</label>
					
					<select multiple class="form-control" name="report_type[]" id="report_type">
					</select>

					<div class="add_new_type_section">
						<!-- Add Button -->
						<button type="button" class="btn_add_new_type">
							<svg width="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
								<path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32v144H48c-17.7 0-32 14.3-32 32s14.3 32 32 32h144v144c0 17.7 14.3 32 32 32s32-14.3 32-32V288h144c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z" />
							</svg> Add New Type
						</button>

						<!-- Remove Button with Cross Icon -->
						<button type="button" class="btn_remove_type">
							<svg width="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
								<path d="M231 256l107-107c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L186 210.7 79 103.7C66.5 91.2 46.2 91.2 33.7 103.7s-12.5 32.8 0 45.3L140.7 256 33.7 363c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L186 301.3l107 107c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L231 256z" />
							</svg> Remove Type
						</button>
					</div>

				</div>
				<!-- <div id="reportTypeList"></div> -->


				<div class="selected_items" id="selectedItemsContainer"></div>

				<!-- ********** Selected items (END) *********** -->

				<!-- Date Section -->

				<div class="data_range">
					<label class="label_name" for="">Select Date</label>
					<div class="input_section_content">
						<input class="input_section" id="myDateRangeInput" type="text" name="daterange" placeholder="Select Date" />
						<svg class="calender_icon" width="14" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
							viewBox="0 0 448 512">
							<path
								d="M128 0c17.7 0 32 14.3 32 32l0 32 128 0 0-32c0-17.7 14.3-32 32-32s32 14.3 32 32l0 32 48 0c26.5 0 48 21.5 48 48l0 48L0 160l0-48C0 85.5 21.5 64 48 64l48 0 0-32c0-17.7 14.3-32 32-32zM0 192l448 0 0 272c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 192zm64 80l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm128 0l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM64 400l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zm112 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16z" />
						</svg>
					</div>
					<input type="hidden" name="date_from" id="date_from">
					<input type="hidden" name="date_to" id="date_to">
				</div>
				<!-- Commands -->
				<div class="input_label">
					<label class="label_name" for="">Your Question / Command</label>
					<textarea name="user_input" class="input_section" rows="6" placeholder="Ask something about your report..."></textarea>
				</div>


				<div class="text-right">
					<button type="submit" class="btn_submit">Generate</button>
				</div>

			</form>
			<div style="margin-top: 15px;">
				<button id="toggleInstructions" class="btn_toggle">📌 Instructions</button>
				<button id="toggleExample" class="btn_toggle">💡 Example</button>
			</div>

			<div id="instructionsBox" class="instructions-box" style="display: none;">
				<h4>📌 User Instructions</h4>
				<ul>
					<li>Please first go to the AI Settings page and enter your credentials.</li>
					<li>If you don't have an API key, please purchase one from OpenAI.</li>
					<li>Include report types like: <em>sales, purchase, stock, chart, table_summary</em>.</li>
					<li>For chart display, ensure the report type is set to <em>chart</em>.</li>
					<li>For table report display, ensure the report type is set to <em>table_summary</em>.</li>
					<li>Provide clear and meaningful instructions or commands.</li>
				</ul>
			</div>

			<div class="example-box" id="exampleBox" style="display: none; margin-top: 15px; background: #1e88e5; color: #fff; padding: 10px; border-radius: 8px;">
				<strong>📌 Example Prompt:</strong>
				<p id="examplePromptText" style="margin: 6px 0;">Generate a sales and stock summary report with table format for the last 30 days.</p>
				<button type="button" id="copyExampleBtn" style="background: #fff; color: #1e88e5; border: none; padding: 6px 12px; border-radius: 5px; font-weight: bold; cursor: pointer;">
					Copy & Paste
				</button>
			</div>


		</div>
		<!-- AI Chat Report  -->
		<div class="ai_chat_report">
			<div id="pdfContent">
				<div id="aiResponseBox">
					<h5 class="section_titles">AI Business Analysis Report</h5>

					<div id="aiResponseContent" style="white-space: pre-wrap; margin-top:18px;"></div>
					<div id="demoResponse" style="display:none; margin-top:18px;">
						<h4 style="text-align:center; color:gray;">📌 Demo AI Business Report</h4>

						<div class="insights-text">
							<p>Below is a sample AI-generated business insight combining sales, purchases, stock, and recommended actions:</p>

							<table class="table table-bordered">
								<thead>
									<tr>
										<th>Product</th>
										<th>Sales</th>
										<th>Purchases</th>
										<th>Stock</th>
										<th>Remarks</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Product A</td>
										<td>120</td>
										<td>80</td>
										<td>40</td>
										<td>Stock running low. Consider reorder.</td>
									</tr>
									<tr>
										<td>Product B</td>
										<td>150</td>
										<td>100</td>
										<td>50</td>
										<td>Good balance. Monitor demand trends.</td>
									</tr>
									<tr>
										<td>Product C</td>
										<td>90</td>
										<td>110</td>
										<td>80</td>
										<td>Healthy stock. Sales promotion recommended.</td>
									</tr>
									<tr>
										<td>Product D</td>
										<td>200</td>
										<td>150</td>
										<td>50</td>
										<td>High sales. Urgent restock advised.</td>
									</tr>
								</tbody>
							</table>

							<h5>📈 AI Insights:</h5>
							<ul>
								<li>🔥 <b>Product D</b> is in high demand – consider priority restocking.</li>
								<li>✅ <b>Product C</b> has excess stock – launch discounts to boost sales.</li>
								<li>📊 Monitor overall purchase-to-sales ratio to optimize cash flow.</li>
								<li>⚠️ Review vendor pricing for better purchase margins.</li>
							</ul>

							<p style="font-style: italic; color: gray;">This is a demo response. Actual AI-generated insights will vary based on your real sales and stock data.</p>
						</div>
					</div> 



					<canvas id="summaryChart"></canvas>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- Add New Type Modal -->
<div id="addReportTypeModal" class="modal_ai">
	<div class="modal_overlay"></div>
	<div class="modal_content_ai">
		<p class="modal_heading">Add New Report Type</p>

		<input class="input_section" type="text" id="new_report_type" placeholder="Enter new type name" />

		<div class="modal_actions">
			<button id="saveReportType" class="btn_save">Save</button>
			<button id="closeModalBtn" class="btn_cancel">Cancel</button>
		</div>
	</div>
</div>

<!-- Remove Type Modal -->
<div id="removeReportTypeModal" class="modal_ai">
	<div class="modal_overlay"></div>
	<div class="modal_content_ai">
		<p class="modal_heading">Remove Report Types</p>

		<div id="removeTypeList">
			<!-- এখানে লোড হবে টাইপগুলো -->
		</div>

		<div class="modal_actions">
			<button id="closeRemoveModalBtn" class="btn_cancel">Close</button>
		</div>
	</div>
</div>









<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<script>
    const BASE_URL = "<?= base_url() ?>";
</script>
<script src="<?= base_url('my-assets/js/admin_js/ai_chat.js') ?>"></script>

