				@if($errors->any())
					<div class="alert alert-danger">
						<ul class="mb-0">
							@foreach($errors->all() as $error)
								<li>{{ $error }}</li>
							@endforeach
						</ul>
					</div>
				@endif
<div class="modal fade" id="newWorkflowModal" tabindex="-1" aria-labelledby="newWorkflowModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content shadow rounded-4 border-0">
			<div class="modal-header bg-primary bg-gradient rounded-top-4 d-flex align-items-center justify-content-between">
				<h5 class="modal-title text-white mb-0" id="newWorkflowModalLabel">Create New Workflow</h5>
				<button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<form action="{{ route('workflow.document.store') }}" method="POST" enctype="multipart/form-data">
				@csrf
				<div class="modal-body">
					<div class="mb-3">
						<label for="title" class="form-label">Title</label>
						<input type="text" name="title" id="title" class="form-control" required>
					</div>
					<div class="mb-3">
						<label for="description" class="form-label">Description</label>
						<textarea name="description" id="description" class="form-control"></textarea>
					</div>
					  <!-- Metadata Section -->
					  <div class="card border-light mb-3">
						  <div class="card-header bg-light">
							  <h6 class="card-title mb-0">
								  <i class="ri-price-tag-3-line me-1"></i>File Metadata
							  </h6>
						  </div>
						  <div class="card-body">
							  <div id="metadataContainer">
								  <div class="metadata-row mb-3">
									  <div class="row g-2">
										  <div class="col-md-5">
											  <label class="form-label">Meta Tag</label>
											  <select class="form-select" name="meta_tags[]" onchange="updateMetaValuePlaceholder(this)">
												  <option value="">Select a metadata tag</option>
												  <optgroup label="Document Categories">
													  <option value="Document Type">Document Type</option>
													  <option value="Category">Category</option>
													  <option value="Classification">Classification</option>
													  <option value="Version">Version</option>
												  </optgroup>
												  <optgroup label="Business Information">
													  <option value="Department">Department</option>
													  <option value="Project">Project</option>
													  <option value="Client">Client</option>
													  <option value="Contract">Contract</option>
													  <option value="Budget Code">Budget Code</option>
												  </optgroup>
												  <optgroup label="Status & Priority">
													  <option value="Status">Status</option>
													  <option value="Priority">Priority</option>
													  <option value="Approval Status">Approval Status</option>
													  <option value="Review Status">Review Status</option>
												  </optgroup>
												  <optgroup label="People & Roles">
													  <option value="Author">Author</option>
													  <option value="Reviewer">Reviewer</option>
													  <option value="Approver">Approver</option>
													  <option value="Owner">Owner</option>
												  </optgroup>
												  <optgroup label="Dates & Timeline">
													  <option value="Due Date">Due Date</option>
													  <option value="Created Date">Created Date</option>
													  <option value="Modified Date">Modified Date</option>
													  <option value="Expiry Date">Expiry Date</option>
												  </optgroup>
												  <optgroup label="Technical">
													  <option value="File Format">File Format</option>
													  <option value="Language">Language</option>
													  <option value="Source System">Source System</option>
													  <option value="Backup Location">Backup Location</option>
												  </optgroup>
												  <optgroup label="Custom">
													  <option value="Custom">Custom (Type your own)</option>
												  </optgroup>
											  </select>
											  <input type="text" class="form-control mt-2 d-none" name="custom_meta_tags[]" placeholder="Enter custom metadata tag">
										  </div>
										  <div class="col-md-5">
											  <label class="form-label">Meta Value</label>
											  <input type="text" class="form-control meta-value-input" name="meta_values[]" placeholder="Enter the value for this tag">
											  <div class="form-text meta-value-help">Enter the specific value for the selected metadata tag</div>
										  </div>
										  <div class="col-md-2 d-flex align-items-end">
											  <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeMetadataRow(this)" style="display: none;">
												  <i class="ri-delete-bin-line"></i>
											  </button>
										  </div>
									  </div>
								  </div>
							  </div>
							  <button type="button" class="btn btn-outline-primary btn-sm" onclick="addMetadataRow()">
								  <i class="ri-add-line me-1"></i>Add Another Tag
							  </button>
						  </div>
					  </div>

					  <div class="mb-3">
						  <div class="form-check">
							  <input class="form-check-input" type="checkbox" id="overwriteFiles" name="overwrite">
							  <label class="form-check-label" for="overwriteFiles">
								  Overwrite existing files with the same name
							  </label>
						  </div>
					  </div>
<script>
function addMetadataRow() {
	const container = document.getElementById('metadataContainer');
	const row = container.querySelector('.metadata-row');
	const newRow = row.cloneNode(true);
	newRow.querySelectorAll('input, select').forEach(el => {
		if (el.type === 'text') el.value = '';
		if (el.tagName === 'SELECT') el.selectedIndex = 0;
	});
	newRow.querySelector('button').style.display = '';
	container.appendChild(newRow);
}
function removeMetadataRow(btn) {
	const row = btn.closest('.metadata-row');
	row.remove();
}
function updateMetaValuePlaceholder(select) {
	const customInput = select.parentElement.querySelector('input[name="custom_meta_tags[]"]');
	if (select.value === 'Custom') {
		customInput.classList.remove('d-none');
		customInput.required = true;
	} else {
		customInput.classList.add('d-none');
		customInput.required = false;
	}
}
</script>
					<div class="mb-3">
						<label for="file" class="form-label">Upload File</label>
						<input type="file" name="file" id="file" class="form-control">
					</div>
					<div class="mb-3">
						<label for="workflow_select" class="form-label">Select Workflow</label>
						<select name="workflow_select" id="workflow_select" class="form-select">
							@foreach($allWorkflows as $wf)
								<option value="{{ $wf->id }}">{{ $wf->name }}</option>
							@endforeach
						</select>
					</div>
					<div class="form-check mb-3">
						<input class="form-check-input" type="checkbox" name="start_immediately" id="start_immediately" checked>
						<label class="form-check-label" for="start_immediately">
							Start Workflow Immediately?
						</label>
					</div>
				</div>
				<div class="modal-footer bg-light rounded-bottom-4">
					<button type="submit" class="btn btn-primary text-white">Create</button>
					<button type="button" class="btn btn-secondary text-white" data-bs-dismiss="modal">Cancel</button>
					
				</div>
</form>
<style>
	/* Custom modal width for extra large screens */
	@media (min-width: 1200px) {
		#newWorkflowModal .modal-lg {
			max-width: 900px;
		}
	}
	#newWorkflowModal .modal-content {
		background: #fff;
		border-radius: 1.25rem;
		border: none;
	}
	#newWorkflowModal .modal-header {
		border-bottom: 1px solid #e9ecef;
	}
	#newWorkflowModal .modal-footer {
		border-top: 1px solid #e9ecef;
	}
</style>
			</form>
		</div>
	</div>
</div>

