{% extends "templates/web.html" %}

{% block page_content %}
<div class="container-fluid pdf-merger-page">
	<div class="row">
		<div class="col-12">
			<div class="page-header text-center mb-4">
				<h1><i class="fa fa-file-pdf-o text-danger"></i> PDF Merger</h1>
				<p class="lead text-muted">Upload and merge multiple PDF files</p>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-md-6 mb-4">
			<div class="card h-100">
				<div class="card-header bg-primary text-white">
					<h5 class="mb-0"><i class="fa fa-upload"></i> Upload New PDF</h5>
				</div>
				<div class="card-body">
					<form id="pdf-upload-form" enctype="multipart/form-data">
						<div class="form-group">
							<label for="pdf-file" class="form-label">Select PDF File</label>
							<input type="file" class="form-control" id="pdf-file" accept=".pdf" required>
							<small class="form-text text-muted">Only PDF files are allowed</small>
						</div>
						<button type="submit" class="btn btn-primary btn-block">
							<i class="fa fa-upload"></i> Upload PDF
						</button>
					</form>
				</div>
			</div>
		</div>
		
		<div class="col-md-6 mb-4">
			<div class="card h-100">
				<div class="card-header bg-success text-white">
					<h5 class="mb-0"><i class="fa fa-object-group"></i> Merge PDFs</h5>
				</div>
				<div class="card-body">
					<div class="form-group">
						<label class="form-label">Select PDFs to Merge</label>
						<div id="pdf-selection" style="max-height: 200px; overflow-y: auto;">
							{% for pdf in pdf_uploads %}
							<div class="form-check">
								<input class="form-check-input pdf-checkbox" type="checkbox" value="{{ pdf.name }}" id="pdf-{{ pdf.name }}">
								<label class="form-check-label" for="pdf-{{ pdf.name }}">
									<strong>{{ pdf.file_name or "Unnamed PDF" }}</strong>
									<small class="text-muted d-block">{{ frappe.utils.pretty_date(pdf.upload_date) if pdf.upload_date else "N/A" }}</small>
								</label>
							</div>
							{% endfor %}
						</div>
					</div>
					<button id="merge-btn" class="btn btn-success btn-block" disabled>
						<i class="fa fa-object-group"></i> Merge Selected PDFs
					</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header bg-info text-white">
					<h5 class="mb-0"><i class="fa fa-list"></i> Uploaded PDFs</h5>
				</div>
				<div class="card-body">
					{% if pdf_uploads %}
					<div class="table-responsive">
						<table class="table table-striped table-hover">
							<thead class="thead-dark">
								<tr>
									<th>File Name</th>
									<th>Status</th>
									<th>Upload Date</th>
									<th>Actions</th>
								</tr>
							</thead>
							<tbody>
								{% for pdf in pdf_uploads %}
								<tr>
									<td>
										<strong>{{ pdf.file_name or "Unnamed PDF" }}</strong>
									</td>
									<td>
										<span class="badge badge-{% if pdf.status == 'Completed' %}success{% elif pdf.status == 'Processing' %}warning{% elif pdf.status == 'Error' %}danger{% else %}info{% endif %}">
											{{ pdf.status or 'Uploaded' }}
										</span>
									</td>
									<td>{{ frappe.utils.pretty_date(pdf.upload_date) if pdf.upload_date else "N/A" }}</td>
									<td>
										<a href="/app/pdf-upload/{{ pdf.name }}" class="btn btn-sm btn-outline-primary" target="_blank">
											<i class="fa fa-eye"></i> View
										</a>
										{% if pdf.file %}
										<a href="{{ pdf.file }}" class="btn btn-sm btn-outline-success" target="_blank">
											<i class="fa fa-download"></i> Download
										</a>
										{% endif %}
									</td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
					{% else %}
					<div class="text-center py-5">
						<i class="fa fa-file-pdf-o fa-5x text-muted mb-3"></i>
						<h4 class="text-muted">No PDFs uploaded yet</h4>
						<p class="text-muted">Upload your first PDF to get started!</p>
					</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>

<style>
.pdf-merger-page .card {
	border: none;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.pdf-merger-page .form-check {
	padding: 8px;
	border-radius: 4px;
	margin-bottom: 8px;
}

.pdf-merger-page .form-check:hover {
	background-color: #f8f9fa;
}

.pdf-merger-page .table th {
	border-top: none;
}

.pdf-merger-page .badge {
	font-size: 0.75em;
}
</style>

<script>
$(document).ready(function() {
	// Handle PDF upload form submission
	$('#pdf-upload-form').on('submit', function(e) {
		e.preventDefault();
		
		var fileInput = $('#pdf-file')[0];
		if (fileInput.files.length === 0) {
			frappe.msgprint({
				title: __('Warning'),
				message: __('Please select a PDF file'),
				indicator: 'orange'
			});
			return;
		}
		
		var file = fileInput.files[0];
		if (file.type !== 'application/pdf') {
			frappe.msgprint({
				title: __('Error'),
				message: __('Only PDF files are allowed'),
				indicator: 'red'
			});
			return;
		}
		
		// Show loading state
		var submitBtn = $(this).find('button[type="submit"]');
		var originalText = submitBtn.html();
		submitBtn.html('<i class="fa fa-spinner fa-spin"></i> Uploading...').prop('disabled', true);
		
		// Create form data
		var formData = new FormData();
		formData.append('file', file);
		formData.append('doctype', 'PDF Upload');
		formData.append('docname', 'new');
		
		// Upload file
		$.ajax({
			url: '/api/method/upload_file',
			type: 'POST',
			data: formData,
			processData: false,
			contentType: false,
			success: function(response) {
				if (response.message) {
					// Create PDF Upload document
					frappe.call({
						method: 'frappe.client.insert',
						args: {
							doc: {
								doctype: 'PDF Upload',
								file: response.message.file_url,
								file_name: response.message.file_name
							}
						},
						callback: function(r) {
							if (r.message) {
								frappe.show_alert({
									message: __('PDF uploaded successfully!'),
									indicator: 'green'
								});
								setTimeout(function() {
									location.reload();
								}, 1500);
							}
						}
					});
				}
			},
			error: function() {
				frappe.msgprint({
					title: __('Error'),
					message: __('Failed to upload PDF'),
					indicator: 'red'
				});
			},
			complete: function() {
				// Reset button state
				submitBtn.html(originalText).prop('disabled', false);
			}
		});
	});
	
	// Handle PDF selection for merging
	$('.pdf-checkbox').on('change', function() {
		var checkedBoxes = $('.pdf-checkbox:checked');
		$('#merge-btn').prop('disabled', checkedBoxes.length < 2);
	});
	
	// Handle PDF merge
	$('#merge-btn').on('click', function() {
		var selectedPDFs = [];
		$('.pdf-checkbox:checked').each(function() {
			selectedPDFs.push($(this).val());
		});
		
		if (selectedPDFs.length < 2) {
			frappe.msgprint({
				title: __('Warning'),
				message: __('Please select at least 2 PDFs to merge'),
				indicator: 'orange'
			});
			return;
		}
		
		// Show loading state
		var mergeBtn = $(this);
		var originalText = mergeBtn.html();
		mergeBtn.html('<i class="fa fa-spinner fa-spin"></i> Merging...').prop('disabled', true);
		
		frappe.call({
			method: 'pdf_merger.pdf_merger.doctype.pdf_upload.pdf_upload.merge_pdfs',
			args: { pdf_list: selectedPDFs },
			callback: function(r) {
				if (r.message) {
					frappe.show_alert({
						message: __('PDFs merged successfully!'),
						indicator: 'green'
					});
					setTimeout(function() {
						location.reload();
					}, 1500);
				}
			},
			always: function() {
				// Reset button state
				mergeBtn.html(originalText).prop('disabled', false);
			}
		});
	});
});
</script>
{% endblock %}