<?php
$uri = $this->uri->segment(3);
$page = 'diagnostic_excel_format';
//echo $uri;exit;
?>


<!-- Content wrapper -->
<div class="content-wrapper">
  <!-- Content -->

  <div class="container-xxl flex-grow-1 container-p-y">
	<!-- Users List Table -->

	<div class="card">
	  <div class="card-header border-bottom">
		<!-- <h5 class="card-title mb-3">Search Filter</h5> -->
		<!-- Button trigger modal -->
		<div class="w3-sidebar w3-bar-block w3-card w3-animate-right" style="display:none;right:0;"
		  id="rightMenu">
		  <button style="margin: auto; margin-right:0;" onclick="closeRightMenu()"
			class="w3-bar-item w3-button w3-large">
			<span>&times;</span></button>
		</div>

		<div
		  style="display: flex;justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; ">

		  <h3>Diagnostic Packages Excel Format</h3>
		  
		 
            
            <div class="d-flex justify-content-end flex-wrap gap-2 mt-3 mb-3">
                <button class="btn btn-primary px-3" id="exportCsvBtn">
                    <i class="fa fa-download me-1"></i> Download XLSX File
                </button>
            </div>



		</div>
		<style>
		  option {
			background-color: #fff !important;
			color: #000 !important;
			text-align: left !important;
		  }

		  .w3-sidebar {
			height: 100%;
			width: 400px;
			background-color: #fff;
			position: fixed !important;
			top: 0px;
			z-index: 2076 !important;
			overflow: auto;
		  }

		  .w3-bar-block .w3-bar-item {
			width: auto;
			display: block;
			border: none;
			white-space: normal;
			float: none;
			outline: 0;
		  }

		  @media(max-width:500px) {
			.btn-primary {
			  width: 100%;

			}
		  }
		</style>

	  </div>

<!-- Include Font Awesome for icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">


<style>

/* Style for the control buttons in the table */
td.dt-control {
    text-align: center; /* Center the icon */
    cursor: pointer;    /* Make the icon clickable */
    font-size: 1.2rem;  /* Adjust icon size */
    color: #007bff;     /* Primary color (Bootstrap default) */
}

td.dt-control i {
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Change color on hover */
td.dt-control:hover i {
    color: #0056b3; /* Darker blue on hover */
}

/* Animate when switching between + and - */
tr.shown td.dt-control i {
    transform: rotate(180deg); /* Flip the minus icon for a smooth effect */
    color: #dc3545; /* Change to a danger (red) color for better visibility */
}

    tr.shown {
    background-color: #f9f9f9; /* Highlight rows when expanded */
}


/* Toggle switch container */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

/* Hide the default checkbox */
.switch input {
    display: none;
}

/* Slider (background and knob) */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: '';
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* When checked */
input:checked + .slider {
    background-color: #4caf50;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

/* Container for the details */
.p-3 {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
}

/* Styling for the action buttons */
button {
    margin-right: 10px; /* Space between buttons */
}

button i {
    margin-right: 5px; /* Space between icon and button text */
}

/* Button customization */
.btn {
    font-size: 14px;
    font-weight: bold;
    padding: 5px 15px;
    display: inline-flex;
    align-items: center;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Image styling */
.img {
    border-radius: 50%;
    border: 2px solid #ddd;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Styling for strong labels */
strong {
    display: inline-block;
    width: 120px;
    font-weight: bold;
    color: #333;
}

/* Layout for labels and values */
.p-3 strong {
    margin-bottom: 5px;
}

.p-3 {
    line-height: 1.6;
}

/* Responsive design: Ensure it looks good on smaller screens */
@media (max-width: 768px) {
    .p-3 {
        padding: 15px;
    }

    .btn {
        font-size: 12px;
        padding: 4px 10px;
    }

    .p-3 strong {
        width: auto; /* Allow labels to adjust on smaller screens */
    }
}

</style>

    
  </div>
</div>
<!-- / Content -->

    
 
  <!-- Csv file download  -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

  <script>
  document.getElementById("exportCsvBtn").addEventListener("click", function () {
    // Define header row
    const headers = [
      "Main Test Name",      // only characters; duplicate not allowed
      "Report Hours",        // only number
      "Fasting",             // yes/no
      "1P",                  // must be > 0
      "1P Disc",             // must be > 0
      "2P",                  // must be > 0
      "2P Disc",             // must be > 0
      "3P",                  // must be > 0
      "3P Disc",             // must be > 0
      "4P",                  // must be > 0
      "4P Disc",             // must be > 0
      "5P",                  // must be > 0
      "5P Disc",             // must be > 0
      "Test Name",           // required
      "Sub Test 1",          // optional
      "Sub Test 2",          // optional
      "Sub Test 3"           // optional
    ];

    // Define sample row (you can modify it as needed)
    const sampleRow = [
      "Diabetes Panel(duplicate values are not inserted)",   // Only letters
      "24(insert only numbers)",               // Only number
      "yes(insert only yes/no)",              // yes or no
      "500(value must be greater than 0)",              // > 0
      "450(value must be greater than 0)",              // > 0
      "900(value must be greater than 0)",              // > 0
      "850(value must be greater than 0)",              // > 0
      "1300(value must be greater than 0)",             // > 0
      "1250(value must be greater than 0)",             // > 0
      "1700(value must be greater than 0)",             // > 0
      "1650(value must be greater than 0)",             // > 0
      "2100(value must be greater than 0)",             // > 0
      "2000(value must be greater than 0)",             // > 0
      "Glucose Test",     // Required
      "Fasting",          // Optional
      "Postprandial",     // Optional
      ""                  // Optional
    ];

    // Create worksheet and workbook
    const ws_data = [headers, sampleRow];
    const ws = XLSX.utils.aoa_to_sheet(ws_data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Diagnostic Format");

    // Trigger download
    XLSX.writeFile(wb, "Diagnostic_Format.xlsx");
  });
</script>



