<!-- 📢 Important Notice for Employers -->
<div id="chartInfoCard" class="alert alert-info shadow-sm rounded" style="position: relative;">
  <div class="d-flex justify-content-between flex-wrap align-items-start gap-2">
    <div class="flex-grow-1">
      <h5 class="mb-2">
        <i class="glyphicon glyphicon-info-sign text-primary"></i>
        <strong> Important Notice</strong>
      </h5>
      <p class="mb-1 small">
        Welcome, and thank you for registering as an employer on our Jobseeker platform! To ensure a smooth experience for both you and job seekers, please take a moment to review the following important details:
      </p>
      <p class="mb-0 small text-dark"><strong>🏢 Employer Business Name:</strong> To maintain clarity and trust, your registered employer name should match your actual business name. This name will appear on all job advertisements linked to your account. Using a different name may cause confusion for job seekers browsing your listings.</p>
	  <p class="mb-0 small text-dark"><strong>👥 Username:</strong> Choose a username that your team can easily remember and use. Ideally, this should be a simple version or abbreviation of your business name. For example: Samoa Commercial Bank might use scb. A clear, shared username helps streamline job posting, especially if multiple staff will manage listings. 🛡️ Tip: For account security, always create strong passwords using a mix of uppercase/lowercase letters, numbers, and symbols.</p>
	  <p class="mb-0 small text-dark"><strong>📞 Contact Person:</strong> This is the main point of contact for your business. The name, mobile number, and email you provide here will be used by our administration team for any communication. These details will also appear on job listings so job seekers can contact you directly. You can update this information at any time.</p>
	  <p class="mb-0 small text-dark"><strong>📍 Business Address:</strong> Please provide your business’s physical location — preferably your head office or main branch. This helps us maintain accurate records and improve communication between your business and our platform.</p>
	  <p class="mb-0 small text-dark"><strong>🏭 Industrial Area:</strong> Selecting the correct industrial area ensures that job alerts reach the right job seekers who are subscribed to those industries. This helps attract the most suitable candidates for your vacancies.</p>
	<br><p class="mb-0 small text-dark"><strong>🟩Faafetai </strong>If you need assistance or have questions, feel free to contact us. Thank you for being part of our employment network! <br><br><– MCIL Jobseeker Administration Team </p>
	</div>
	
	
	<p><p>

    <!-- 📦 Export Buttons -->
      <div class="text-end" style="min-width: 200px;">
 <!--     <button class="btn btn-primary btn-sm mb-1" onclick="downloadChartPNG()">📥 PNG</button> -->
 <!--    <button class="btn btn-success btn-sm mb-1" onclick="downloadChartPDF()">📄 PDF</button> -->
 <!--     <button class="btn btn-outline-secondary btn-sm mb-1" onclick="copyTotalToClipboard()">📋 Copy Total</button> -->
 <!--     <button class="btn btn-warning btn-sm mb-1" onclick="exportChartCSV()">📊 Export CSV</button> -->
      <button class="btn btn-link btn-sm text-danger" onclick="toggleChartNote()">✖ Hide</button>
    </div>
  </div>
</div>

<!-- 🔄 Show Button -->
<div id="showChartNoteBtn" class="text-center mb-3" style="display: none;">
  <button class="btn btn-outline-primary btn-sm" onclick="toggleChartNote()">📢 Important Notice for Employers</button>
</div>

<!-- 🧩 Dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<!-- 🧠 Export & Toggle Logic -->
<script>
function toggleChartNote() {
  const card = document.getElementById("chartInfoCard");
  const showBtn = document.getElementById("showChartNoteBtn");
  const isVisible = card.style.display !== "none";
  card.style.display = isVisible ? "none" : "block";
  showBtn.style.display = isVisible ? "block" : "none";
}

function downloadChartPNG() {
  const chartCanvas = document.querySelector("canvas");
  html2canvas(chartCanvas).then(canvas => {
    const link = document.createElement("a");
    link.download = "helpdesk_chart.png";
    link.href = canvas.toDataURL();
    link.click();
  });
}

function downloadChartPDF() {
  const chartCanvas = document.querySelector("canvas");
  html2canvas(chartCanvas).then(canvas => {
    const { jsPDF } = window.jspdf;
    const pdf = new jsPDF();
    const imgData = canvas.toDataURL("image/png");
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, "PNG", 0, 10, pdfWidth, pdfHeight);
    pdf.save("helpdesk_chart.pdf");
  });
}

function copyTotalToClipboard() {
  const labels = window.myChart?.data?.labels || [];
  const data = window.myChart?.data?.datasets?.[0]?.data || [];
  const total = data.reduce((a, b) => a + b, 0);
  navigator.clipboard.writeText(`Total Tickets: ${total}`).then(() => {
    alert("Total copied to clipboard: " + total);
  });
}

function exportChartCSV() {
  const chart = window.myChart;
  if (!chart) return alert("Chart not loaded");

  const rows = [["Division", "Total", "Percentage"]];
  const data = chart.data.datasets[0].data;
  const labels = chart.data.labels;
  const total = data.reduce((a, b) => a + b, 0);

  labels.forEach((label, i) => {
    const val = data[i];
    const percent = ((val / total) * 100).toFixed(1);
    rows.push([label, val, percent + "%"]);
  });

  const csv = rows.map(r => r.join(",")).join("\n");
  const blob = new Blob([csv], { type: "text/csv" });
  const link = document.createElement("a");
  link.download = "chart_data.csv";
  link.href = URL.createObjectURL(blob);
  link.click();
}
</script>