{% extends 'dashboard_layout.html' %}
{% block content %}
{% load static %}
<div  class="loader">
	<img src="{% static 'loaders/ajax-loader.gif'  %}" />
</div>
<div class="row py-5 px-4">
	<div class="col-md-12 mx-auto">
		<!-- Profile widget -->
		<div class="bg-white shadow rounded overflow-hidden">
			<div class="px-4 mt-5 py-3">
				
				<div class="p-4 table-responsive rounded TabColor shadow-sm bg-light">
					<div class="details-head"><p class="heading">Study Schedule :</p></div>
					<table class="table">
						<tbody>
						 <tr  >
							<th  width="300">User Name </th>
							<td> {{schedule.userId.firstName}} {{schedule.userId.lastName}} </td> 
						</tr>
						<tr>
							<th  width="300">Payment Status </th>
							<td> 
								{% if schedule.payment_status is not none %}
									{% if schedule.payment_status == True %}
										Successful
									{% else %}
										Pending
									{% endif %}
								{% else %} 
								N.A. 
								{% endif %}
							</td> 
						</tr>
						<tr>
							<th  width="300">Download Excel </th>
							<td>
								<button type="button" class="btn btn-primary" onclick="downloadJson(`{{schedule.excelUrl}}`)">Download</button>
							</td>
							
						</tr>
						<tr>
							<th  width="300">Input Criteria </th>
							<td> 
								{% if schedule.inputCriteria is not none %}
								<button type="button" class="btn btn-info" onclick="viewList('Input Criteria',{{schedule.inputCriteria}})" >View
								</button> 
								{% else %} 
								N.A. 
								{% endif %}
							</td> 
						</tr>
						<tr>
							<th  width="300">Schdeule Plan Details </th>
							<td> 
								{% if schedule.inputCriteria is not none %}
								<button type="button" class="btn btn-info" onclick="viewList('Schdeule Plan Details',{{schedule.schedulePlanDetails}})" >View
								</button>  
								{% else %} 
									N.A. 
								{% endif %}
							</td> 
						</tr>

						<tr>
							<th  width="300">Every Three Modules </th>
							<td>  
								{% if schedule.inputCriteria is not none %}
								<button type="button" class="btn btn-info" onclick="viewJson('Every Three Modules',{{schedule.everyThreeModule}})" >View
								</button>  
								{% else %} 
									N.A. 
								{% endif %}
							</td> 
						</tr>

						<!-- <tr>
							<th  width="300">Mock Exam Details </th>
							<td>  
								{% if schedule.mockExamDetails is not none %}
								<button type="button" class="btn btn-info" onclick="viewJson('Mock Exam Details',{{schedule.mockExamDetails}})" >View
								</button> 
								{% else %} 
									N.A. 
								{% endif %} 
							</td> 
						</tr> -->
						
						<tr>
							<th  width="300">Pre Study Rediness Schdeule </th>
							<td>  
								{% if schedule.preStudyRedinessScheduleDetails is not none %}
								<button type="button" class="btn btn-info" onclick="viewJson('Pre Study Rediness Schdeule',{{schedule.preStudyRedinessScheduleDetails}})" >View
								</button>  
								{% else %} 
									N.A. 
								{% endif %} 
							</td> 
						</tr>

						<!-- <tr>
							<th  width="300">Total Rediness Time </th>
							<td>  
								{% if schedule.totalRedinessTime is not none %}
								<button type="button" class="btn btn-info" onclick="viewJson('Total Rediness Time',{{schedule.totalRedinessTime}})" >View
								</button>  
								{% else %} 
									N.A. 
								{% endif %} 
							</td> 
						</tr> -->

						<tr>
							<th  width="300">Suggested Final Review </th>
							<td>  
								{% if schedule.suggestedFinalReview is not none %}
								<button type="button" class="btn btn-info" onclick="viewJson('Suggested Final Review',{{schedule.suggestedFinalReview}})" >View
								</button> 
								{% else %} 
									N.A. 
								{% endif %}  
							</td> 
						</tr>
						
						<tr>
							<th  width="300">Topics List </th>
							<td>  
								{% if schedule.topicsList is not none %}
								<button type="button" class="btn btn-info" onclick="viewTopicsList('Topics List',{{schedule.topicsList}})" >View
								</button> 
								{% else %} 
									N.A. 
								{% endif %}  
							</td> 
						</tr>
						<tr>
							<th  width="300">Evening Review </th>
							<td>  
								{% if schedule.eveningReview is not none %}
								<button type="button" class="btn btn-info" onclick="viewJson('Evening Review',{{schedule.eveningReview}})" >View
								</button>  
								{% else %} 
									N.A. 
								{% endif %} 
							</td> 
						</tr>

						<tr>
							<th  width="300">Schdeule Plan Details </th>
							<td>  
								{% if schedule.schedulePlanDetails is not none %}
								<button type="button" class="btn btn-info" onclick="viewList('Schdeule Plan Details',{{schedule.schedulePlanDetails}})" >View
								</button>  
								{% else %} 
									N.A. 
								{% endif %} 
							</td> 
						</tr>

						<tr>
							<th  width="300">Rebase Hours </th>
							<td> 
								{% if schedule.rebaseHours is not none %}
								{{schedule.rebaseHours}}
								{% else %} 
									N.A. 
								{% endif %}
							</td> 
						</tr>
						
						<tr>
							<th  width="300">Created At </th>
							<td> {{schedule.createdAt}}
							</td> 
						</tr>
						</tbody>
					</table>
				   
				</div>
			</div>
		</div>
	</div>
</div>
<div class="modal mt-5" id="viewJson" tabindex="-1" role="dialog" aria-labelledby="view-json" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content" style=" margin:auto; color:black; ">
			<div class="modal-header">
				<h3 class="modal-title" id="view-json">View Json</h3>
				<button type="button" class="close" data-dismiss="modal" onclick="closeModal()" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</div>
			<div class="modal-body py-2 ps-4 d-flex align-items-center text-dark" style="height: auto; max-height: 700px;">
				<div class="detail-table h-100 w-100" id="json-div" style="max-height: 700px; overflow-y: auto;">
				
				</div>
				<image  id="json-loader" src="{% static 'img/spinner-loader.gif' %}" style="width: 35px;height: 35px;margin-left: 7px; display: none;"></image>
								      	
			</div>
		</div>
	</div>
</div>
<script>
	$('.loader').hide();
	function viewJson(heading,content){
		try{
			$('#viewJson').show();
			$('#json-loader').hide();
			console.log(typeof(content))
			$('#view-json').html(heading);
			if(content != 'None'){
				$('#json-div').html('<pre style="max-height: 680px; overflow: auto; width: 100%; white-space: pre-wrap;">'+pretifyJson(content)+'</pre>');
			}
			else{
				$('#json-div').html('<p style="max-height:680px; height:auto">not available.</p>');
			}
		}
		catch(err){
			console.error('Error in view json :::: ',err)
		}
	}
	function viewTopicsList(heading,content){
		console.log("Received content array: ", content);
		try{
			$('#viewJson').show();
			$('#json-loader').hide();
			console.log(typeof(content))
			$('#view-json').html(heading);
			if(content != 'None'){
				let html = '<ul>';

				// Loop through each object in the array
				content.forEach((item, i) => {
					// Get the first key of each object
					const heading = Object.keys(item)[0];
					console.log("heading ", heading)
					html += `<li>Topic ${i+1} - ${heading}</li><hr>`;
				});

				html += '</ul>';

				// Display the list in your desired element
				$('#json-div').html(html);
			}
			else{
				$('#json-div').html('<p style="max-height:680px; height:auto">not available.</p>');
			}
		}
		catch(err){
			console.error('Error in view json :::: ',err)
		}
	}

	function viewList(heading, content) {
		console.log("Received heading and content: ", heading, content);
		try {
			$('#viewJson').show();
			$('#json-loader').hide();
			$('#view-json').html(heading);

			if (content !== 'None') {
				// Create a list of key-value pairs from the content object
				let html = '<ul>';
				for (const [key, value] of Object.entries(content)) {
					html += `<li><strong>${key.replace(/_/g, ' ')}:</strong> ${value}</li><hr>`;
				}
				html += '</ul>';

				$('#json-div').html(html);
			} else {
				$('#json-div').html('<p style="max-height:680px; height:auto">Not available.</p>');
			}
		} catch (err) {
			console.error('Error in view json:', err);
		}
	}

	function closeModal(){
		$('#viewJson').hide()
	}
	function pretifyJson(jsonString){
		try{
		const jsonObject = JSON.parse(JSON.stringify(jsonString));
		console.log('jsonObject =====',jsonObject)
		// Prettifying JSON with indentation of 4 spaces
		const prettyJsonString = JSON.stringify(jsonObject, null, 4);
		return prettyJsonString;
		}
		catch(err){
			console.error('Error in pretifyJson :::: ',err)
		}
	}
	function downloadJson(filename) {
		console.log('download ...')
            // Replace 'path_to_your_csv_file.csv' with the actual path to your CSV file
			const app_url = '{{app_url}}'
            const csvFileUrl = app_url + filename;
			console.log(csvFileUrl)

            fetch(csvFileUrl)
                .then(response => response.blob())
                .then(blob => {
                    // Create a link element
                    const link = document.createElement('a');
                    link.href = window.URL.createObjectURL(blob);
                
					link.setAttribute('download', `${filename}.xlsx`); // Specify file name here
		
					document.body.appendChild(link);
					link.click();
		
					link.remove();
                })
                .catch(error => {
                    console.error('Error downloading the CSV file:', error);
                });
        }

</script>
{% endblock %}