<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="<?php echo base_url();?>/public/assets/js/jquery.validate.min.js"></script>
<style>
.error {
  color: red;
  font-weight: bold;
  text-decoration: none;
}
</style>
<div class="content-wrapper">
            <!-- Main content -->
	<section class="content pt-3">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="card card-outline card-primary">
						<div class="card-header">
							<div class="d-flex align-items-center">
								
								<div>
									<h3 class="card-title">Edit Template</h3>
								</div>
							</div>
						</div>
						<form id="user_form" name="user_form" class="valid" method="post" action="<?php echo base_url();?>setting/updateTemplate" >
					    <input type="hidden" name="content" id="content">
						<input type="hidden" name="id" value="<?php echo $item_data[0]['id'];?>">
							<div class="card-body">
							<div class="row">
								<div class="form-group row">
									<label class="col-sm-12 col-form-label"><font color="red"><h5>Please dont remove keyword between % sign</h5></font></label>
								</div>
							</div>
							<div class="row">
								<div class="col-md-8">
									<div class="form-group row">
										<label class="col-md-3 col-form-label">Template Name</label>
										<div class="col-md-9">
											<input type="text" class="form-control" name="item_name" placeholder="Enter Item" value="<?php echo $item_data[0]['template_name'];?>">
										</div>
									</div>
									<div class="form-group row">
										<label class="col-md-3 col-form-label">Template Content</label>
										<div class="col-md-9">
											 <div id="editor-container"><?php echo $item_data[0]['template_description'];?></div>
										</div>
									</div>
								
								
							  <input type="submit" class="btn btn-primary btn-outline-primary" value="Save item">
							  <a href="<?php echo base_url();?>setting/emailTemplates" class="btn btn-light">Cancel</a>
							</form>
								</div>
							</div>
					</div>
				</div>
			</div><!-- /.container-fluid -->
	</section>
	<!-- /.content -->
</div>
 <script>
$(document).ready(function () {
	// Initialize the validation
	$('#company_form').validate({
		rules: {
			company_name: {
				required: true,
			},
		},
		messages: {
			company_name: {
				required: "Please enter Company Name",
				
			},
			
		},
		submitHandler: function (form) {
			form.submit(); // Submit the form
		},
	});
});


</script>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
	#editor-container {
	  height: 300px;
	}
</style>
<div class="main-panel">
    <div class="content-wrapper">
		<div class="col-md-12 grid-margin stretch-card">
			<div class="card">
				<div class="card-body">
				<h4 class="card-title">Email Template</h4>
					<form id="user_form" name="user_form" class="valid" method="post" action="<?php echo base_url();?>setting/updateTemplate" >
					    <input type="hidden" name="content" id="content">
						<input type="hidden" name="id" value="<?php echo $item_data[0]['id'];?>">
						<div class="form-group row">
							<label class="col-sm-3 col-form-label"><font color="red"><h5>Please dont remove keyword between % sign</h5></font></label>
						</div>
						<div class="form-group row">
							<label class="col-sm-2 col-form-label">Template Name</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="item_name" placeholder="Enter Item" value="<?php echo $item_data[0]['template_name'];?>">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-sm-2 col-form-label">Template Content</label>
							<div class="col-sm-10">
								 <div id="editor-container"><?php echo $item_data[0]['template_description'];?></div>
							</div>
						</div>
					  <input type="submit" class="btn btn-primary btn-outline-primary" value="Save item">
					  <a href="<?php echo base_url();?>setting/emailTemplates" class="btn btn-light">Cancel</a>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
  <script>
    // Initialize Quill editor
    const quill = new Quill('#editor-container', {
      theme: 'snow', // Specify theme
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],        // Toggle buttons
          ['blockquote', 'code-block'],

          [{ 'header': 1 }, { 'header': 2 }],               // Custom button values
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          [{ 'script': 'sub'}, { 'script': 'super' }],      // Superscript/Subscript
          [{ 'indent': '-1'}, { 'indent': '+1' }],          // Indent
          [{ 'direction': 'rtl' }],                         // Text direction

          [{ 'size': ['small', false, 'large', 'huge'] }],  // Custom dropdown
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

          [{ 'color': [] }, { 'background': [] }],          // Dropdown with defaults
          [{ 'font': [] }],
          [{ 'align': [] }],

          ['clean']                                         // Remove formatting
        ]
      }
    });
  </script>
  <script>	
    // Update hidden input on form submission
    document.querySelector('form').addEventListener('submit', function () {
        const content = quill.root.innerHTML; // Quill's content as HTML
        document.getElementById('content').value = content; // Assign it to hidden input
    });
</script>