@extends('layouts.master')
@section('content')
<link href="{{ asset('css/careerTemplateEdit.css') }}" rel="stylesheet">
<div class="setting_admin">
    <div class="heading">
        <img src="{{asset('images/settings_admin.png')}}" alt="" />
        <h1>Settings: Administation</h1>
    </div>
</div>
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-body">
            <h2 class="note">Edit Template: {{$templateName}}</h2>
			<p>
                Top, Left, and Footer is HTML code used in the body of every page, and CSS is the CSS code
                included in every page.<br /><br />
                Some fields have special keywords which are used to position some kind of content. For example,
                the Left area has links to other pages in the template, and the 'body: search results' area
                can include a keyword which gets replaced with a table of search results or job openings.
                A button is included on these areas to insert the associated keywords.<br />
			</p>
               
				
            </div>
			<div class="margin" style="margin-top:10px;">
				<form method="post" action="{{route('settings.careerTemplateStore')}}">
                    @csrf
                    <input type="hidden" name="templateName" value="{{$templateName}}">
						@foreach($template as $name=>$data)
						<p class="accordion">{{$name}}</p>
						<div class="panel" style="margin:10px;">
							@if($name == 'Header')
								 <input type="button" class="btn btn-primary marginButton" value="Insert Menu Options" onclick="addToTextArea(this);" id="{{md5($name)}}">
							@endif
							@if($name != 'CSS')
								<input type="button" class="btn btn-primary marginButton" value="Insert Site Name" onclick="addToSiteName(this);" id="{{md5($name)}}">		
							@endif
							@if($name == 'Content - Main')
								 <input type="button" class="btn btn-primary marginButton" value="Insert number of Open Positions" onclick="addToNoOfPositions(this);" id="{{md5($name)}}">
							@endif
							@if($name == 'Content - Search Results')
								 <input type="button" class="btn btn-primary marginButton" value="Insert number of Search Results" onclick="addToNoSearchResult(this);" id="{{md5($name)}}">
							 
								  <input type="button" class="btn btn-primary marginButton" value="Insert Search Results Table" onclick="addToNoSearchResultsTable(this);" id="{{md5($name)}}">
							@endif
							
							@if($name == 'Content - Job Details')
								 <input type="button" class="btn btn-primary marginButton" value="Insert apply to job link" onclick="addToApplyJobLink(this);" id="{{md5($name)}}">
									
								 <select id="jobdetailsselect" class="opt">
									<option value="<title>">Job Title</option>
									<option value="<type>">Type</option>
									<option value="<city>">City</option>
									<option value="<state>">State</option>
									<option value="<openings>">Openings</option>
									<!--<option value="<rate>">Max Rate</option>
									<option value="<salary>">Salary</option>-->
									<option value="<created>">Date Created</option>
									<!--<option value="<daysOld>">Days Old</option> -->
									<option value="<recruiter>">Recruiter</option>
									<option value="<companyName>">Company Name</option>
									<!--<option value="<contactName>">Contact Name</option>
									<option value="<contactPhone>">Contact Phone</option>
									<option value="<contactEmail>">Contact E-Mail</option>-->
									<option value="<description>">Description</option>
									@foreach($extraFieldsJobData as $ef) 
										<option value="<extraField->"></option>
									@endforeach 
								</select>
								 <input type="button" class="btn btn-primary marginButton" value="Insert job details element" onclick="InsertJobDetailElement(this);" id="{{md5($name)}}">
							@endif
							@if($name == 'Content - Apply for Position')
								 <input type="button" class="btn btn-primary marginButton" value="Insert Job Title" onclick="addToJobTitle(this);" id="{{md5($name)}}">
								
								<select id="jobapplyselect" class="opt">
									<option value="<input-firstName>">First Name *</option>
									<option value="<input-lastName>">Last Name *</option>
									<option value="<input-address>">Address Line</option>
									<option value="<input-city>">City</option>
									<option value="<input-state>">State</option>
									<option value="<input-zip>">Zip Code</option>
									<option value="<input-phone>">Phone Number (Work)</option>
									<option value="<input-phone-home>">Phone Number (Home)</option>
									<option value="<input-email>">E-Mail Address *</option>
									<option value="<input-email2>">E-Mail Address 2</option>
									<option value="<input-source>">Source</option>
									<option value="<input-employer>">Current Employer</option>
									<option value="<input-emailconfirm>">Retype E-Mail Address (optional)</option>
									<option value="<input-resumeUpload>">Resume Upload</option>
									<option value="<input-keySkills>">Key Skills</option>
									<option value="<input-extraNotes>">Extra Notes</option>
									@foreach($extraFieldsCandidateData as $ef) 
										<option value="<extraField->"></option>
									@endforeach 
								</select>
								 <input type="button" class="btn btn-primary marginButton" value="Insert job application field" onclick="InsertJobApplicationField(this);" id="{{md5($name)}}">
							@endif
							@if($name == 'Content - Thanks for your Submission')
								 <input type="button" class="btn btn-primary marginButton" value="Insert back to job details link" onclick="addToBackJobDetailsLink(this);" id="{{md5($name)}}">
							@endif
							@if($name == 'CSS')
								  <select id="jobdetailcsssselect" class="opt">
										<option value="body\n{\n}">Page Body</option>
										<option value=".inputBoxName\n{\n}">First Name, Last Name input boxes</option>
										<option value=".inputBoxArea\n{\n}">Large input boxes (notes)</option>
										<option value=".inputBoxFile\n{\n}">File upload box</option>
										<option value=".inputBoxNormal\n{\n}">All other input boxes (E-Mail)</option>
										<option value="table.sortable\n{\nborder-collapse: collapse;\nempty-cells: show;\n}\ntr.rowHeading\n{\n}\ntr.oddTableRow\n{\n}\ntr.evenTableRow\n{\n}\na.sortheader:hover,\na.sortheader:link,\na.sortheader:visited\n{\n}">Search Results Table</option>
									</select>
									 <input type="button" class="btn btn-primary marginButton" value="Insert css class definition" onclick="InsertCssClassDefinition(this);" id="{{md5($name)}}">
									
							@endif
							
						  <textarea name="{{md5($name)}}" id="my-textarea-{{md5($name)}}" class="vancy1" style="width:100%">{{$data}}</textarea>
						</div>
						@endforeach
					
					 <div class="submitButton" style="margin:20px;">
						<button type="submit" class="btn btn-primary" style="width:125px;">Save</button>
					 </div>
				</form>
			</div>
        </div>
    </div>
</section> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
.accordion {
  background-color: #D3D3D3;
 
  cursor: pointer;
  padding: 18px;
  width: 97%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  color:white;
  margin:20px 20px;
}

.active, .accordion:hover {
  background-color: #5A5A5A; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.marginButton { margin:10px;}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
	
  });
}

const addToTextArea = function (data) {
	
	var id = data.id;
	
	text_to_add = '<a-LinkMain>Main Page</a><br /><a-ListAll>List All Jobs</a><br />';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
};

// Insert Site name
const addToSiteName = function (data) {
	
	var id = data.id;
	
	text_to_add = 'Site-Name';
    TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
};
// Insert No Of position short code
const addToNoOfPositions = function (data) {
	
	var id = data.id;
	
	text_to_add = '<numberOfOpenPositions>';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};

// Insert No of search results

const addToNoSearchResult = function (data) {
	
	var id = data.id;
	
	text_to_add = '<numberOfSearchResults>';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};
// Insert No of search results Table

const addToNoSearchResultsTable = function (data) {
	
	var id = data.id;
	
	text_to_add = '<searchResultsTable>';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};
// Insert to apply job link

const addToApplyJobLink = function (data) {
	
	var id = data.id;
	
	text_to_add = '<a-applyToJob>Apply to Job</a>';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};
// Insert to back job details link

const addToBackJobDetailsLink = function (data) {
	
	var id = data.id;
	
	text_to_add = '<a-jobDetails>Job Details</a>';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};

// Insert to apply job link

const InsertJobDetailElement = function (data) {
	
	var id = data.id;
	var conceptName = $('#jobdetailsselect').find(":selected").val();
	text_to_add = conceptName;
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};
// Insert css class definition

const InsertCssClassDefinition = function (data) {
	
	var id = data.id;
	var conceptName = $('#jobdetailcsssselect').find(":selected").val();
	 conceptName = conceptName.split("\\n").join("\n");
	
	text_to_add = conceptName;
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};

// Insert job title

const addToJobTitle = function (data) {
	
	var id = data.id;
	text_to_add = '<title>';
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};
// Insert job application fields

const InsertJobApplicationField = function (data) {
	
	var id = data.id;
	var conceptName = $('#jobapplyselect').find(":selected").val();
	text_to_add = conceptName;
	TextAreaId = "my-textarea-"+id;
	CommonTextAreaScript(text_to_add,TextAreaId);
 
};


function CommonTextAreaScript(text_to_add,TextAreaId)
{
  let textarea = document.getElementById(TextAreaId);
  let start_position = textarea.selectionStart;
  let end_position = textarea.selectionEnd;

  textarea.value = `${textarea.value.substring(
    0,
    start_position
  )}${text_to_add}${textarea.value.substring(
    end_position,
    textarea.value.length
  )}`;
	
}
</script>   
@endsection