@extends('layouts.master')
@section('title', $title) 
@section('content')
<!--link href="{{ asset('css/Setting_Admin.css') }}" rel="stylesheet"-->
<link rel="stylesheet" href="{{ asset('css/E-MailTemplates.css') }} " />
	 
	<div class="color"> 
          <div class="box">
            <div class="first-box">
                <div class="main_block">
                    <img src="{{ asset('images/email_temp.png') }}"  />
					<p><b>E-Mail Templates</b></p>
                </div>
            </div>
			<div class="ajaxSearchResults" id="singleQuickActionMenu" align="left" onclick="toggleVisibility()">
			</div>
			<div id="popupMask">&nbsp;</div>
			
            <div class="second-box"> 
                <div class="main_block" style="margin-right: 25px;">
                    <img onclick="AddNewTemplate();" src="{{ asset('images/email_template.png')}}" style="height: 26px;cursor: pointer;" />
              <p><b>Add a Template</b></p>
                </div>
          </div> 
          </div>
          <div class="d-flex">
            <div class="vancy">
              <label><b>Template</b></label>
              <div id="selectorSpan">
                <select class="custom-select mr-sm-2 vancy1" id="titleSelect" onclick="showTemplate(this.value);" style="font-size: 17px;border-radius: 8px;    height: 49px !important;" > 
				  @foreach($EmailTemplates as $data)
					<option value="{{$data['id']}}">{{$data['title']}}</option>
				@endforeach
                </select>
              </div>
			  @foreach($EmailTemplates as $data)
				<span id="templateTitleSpan{{$data['id']}}" style="display:none;">
					  <input type="text" class="vancy1" name="templateName{{$data['id']}}" id="templateName{{$data['id']}}" value="{{$data['title']}}">  
				</span>
				@endforeach 
            </div>
          </div>
		      </div> 
    <!--div class="setting_admin">
        <section class="content">
            <div class="block_one">
            </div>
            <div class="block_two">
				<h1>E-Mail Templates</h1>
				<div class="block_two_outerContainer">
						
					<div class="ajaxSearchResults" id="singleQuickActionMenu" align="left" onclick="toggleVisibility()">
						</div>
						<div id="popupMask">&nbsp;</div>
						<div id="main" class="mainBarColor" style="width:100%">
 

							<div id="contents">

           

            <table class="searchTable">
                <tr>
                    <td>
                        <input class="btn" type="button" value="Add a Template" onclick="AddNewTemplate();">
                    </td>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td style="width:210px;">
                                    <div style="font-weight:bold;">
                                        Template:
                                    </div>
                                </td>
                                <td>
                                    <span id="selectorSpan">
                                        <select id="titleSelect" class="vancy1" onclick="showTemplate(this.value);">
											@foreach($EmailTemplates as $data)
												<option value="{{$data['id']}}">{{$data['title']}}</option>
											@endforeach
										</select>
                                    </span>
									@foreach($EmailTemplates as $data)
                                    <span id="templateTitleSpan{{$data['id']}}" style="display:none;">
                                          <input type="text" class="vancy1" name="templateName{{$data['id']}}" id="templateName{{$data['id']}}" value="{{$data['title']}}">  
								    </span>
                                    @endforeach                                   
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
				<?php// foreach($EmailTemplates as $data) { ?>
					<form action="{{route('settings.updateTemplate')}}" method="post" id="form">
					<input type="hidden" name="postback" value="postback" />
					<input type="hidden" name="templateID"  value="" />
					<table id="editTable" class="editTable" width="850" >
						
						<tr>
							<td class="tdVertical" style="width:150px;">
								Message:
							</td>
							<td class="tdData">
								<table>
                                                                                                
						<tr style="vertical-align:top;">
							<td>
								<textarea class="inputbox" name="messageText"  id="messageText" style="width:450px; height:280px;" onclick="document.getElementById('selectorSpan').style.display='none'; document.getElementById('templateTitleSpan').style.display='';" ></textarea>
								<input type="hidden" name="messageTextOrigional" id="messageTextOrigional" value="">
								<br /><br />
								<input type="checkbox" name="useThisTemplate" id="useThisTemplate" checked onclick="if (this.checked) {document.getElementById('messageText').disabled=false;} else {document.getElementById('messageText').disabled=true;} document.getElementById('selectorSpan').style.display='none'; document.getElementById('templateTitleSpan').style.display='';"> Use this Template / Feature<br />
							</td>
							<td style="text-align: center;">
							<div style="font-weight:bold;">Insert Formatting:</div>
								<input type="button" class="button" style="width:235px;" value="Bold" onclick="insertAtCursor(document.getElementById('messageText'),  '<B></B>');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Italics" onclick="insertAtCursor(document.getElementById('messageText'),  '<I></I>');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Underline" onclick="insertAtCursor(document.getElementById('messageText'),  '<U></U>');"><br />                                                        <br />
								<div style="font-weight:bold;">Insert Mail Merge Fields:</div>
                                                                                                                          <input type="button" class="button" style="width:235px;" value="Current Date/Time" onclick="insertAtCursor(document.getElementById('messageText'),  '%DATETIME%');"><br />                                                            <input type="button" class="button" style="width:235px;" value="Site Name" onclick="insertAtCursor(document.getElementById('messageText'),  '%SITENAME%');"><br />                                                            <input type="button" class="button" style="width:235px;" value="Recruiter/Current User Name" onclick="insertAtCursor(document.getElementById('messageText'),  '%USERFULLNAME%');"><br />                                                            <input type="button" class="button" style="width:235px;" value="Recruiter/Current User E-Mail Link" onclick="insertAtCursor(document.getElementById('messageText'),  '%USERMAIL%');"><br />                                                        
                                                                                                                <input type="button" class="button" style="width:235px;" value="Previous Candidate Status" onclick="insertAtCursor(document.getElementById('messageText'),  '%CANDPREVSTATUS%');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Current Candidate Status" onclick="insertAtCursor(document.getElementById('messageText'),  '%CANDSTATUS%');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Candidate Owner" onclick="insertAtCursor(document.getElementById('messageText'),  '%CANDOWNER%');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Candidate First Name" onclick="insertAtCursor(document.getElementById('messageText'),  '%CANDFIRSTNAME%');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Candidate Full Name" onclick="insertAtCursor(document.getElementById('messageText'),  '%CANDFULLNAME%');"><br />                                                        
 <input type="button" class="button" style="width:235px;" value="Job Order Title" onclick="insertAtCursor(document.getElementById('messageText'),  '%JBODTITLE%');"><br />                                                        <input type="button" class="button" style="width:235px;" value="Job Order Company" onclick="insertAtCursor(document.getElementById('messageText'),  '%JBODCLIENT%');"><br />                                        </td>
									</tr>
									 <tr>
										<td><input type="checkbox" name="send_attachment" @if($data['send_attachment'] == 1) checked @endif />Send Attachment</td>   
									</tr>
								</table>
							 </td>
						</tr>
						<tr>
							<td class="tdVertical" style="width:150px;">
							</td>
							<td>
								<input type="button" class="button btn" value="Save Template" onclick="submitForm();">
								<input type="reset" class="button btn" value="Reset Template" onclick="document.getElementById('selectorSpan').style.display=''; document.getElementById('templateTitleSpan').style.display='none'; document.getElementById('messageText').disabled=false;">
							</td>
						</tr>
					</table>
				</form>
                                              
					
					</td>
                </tr>
            </table>
        </div>
	</div>


				 </div>
			</div>
        </section>
    </div--> 
	
@endsection
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
			 <script type="text/javascript">
			  var AddNewEmailTemplate = "{{ route('settings.AddNewEmailTemplate')}}"; 
			  var updateTemplate = "{{ route('settings.updateTemplate')}}"; 
                $(document).ready(function() { 
                    $("select option:last").attr("selected", "selected");
                    showLastTemplate();
                });
                function showTemplate(templateID)
                {
					
					                   
                    document.getElementById('editTable' + templateID).style.display = '';
                }
                function showLastTemplate()
                {
                     						document.getElementById('editTable' + ).style.display = '';
                }
                function insertAtCursor(myField, myValue)
                {
                    if (document.selection)
                    {
                        myField.focus();
                        sel = document.selection.createRange();
                        sel.text = myValue;
                    }
                    else if (myField.selectionStart || myField.selectionStart == 0)
                    {
                        var startPos = myField.selectionStart;
                        var endPos = myField.selectionEnd;
                        myField.value = myField.value.substring(0, startPos)
                            + myValue
                            + myField.value.substring(endPos, myField.value.length);
                    }
                    else
                    {
                        myField.value += myValue;
                    }
                }
				function AddNewTemplate()
				{
					$.ajax({
                        type:'POST',
                        url: AddNewEmailTemplate,
                        data: { _token: csrfToken},
                        dataType: 'json',
                        success: function(response){
                            window.location.reload();
                        },
                        error: function(response){
							 window.location.reload();
                        }
                    });
					return false;
					
				}
				
				function submitForm(id)
				{
					var templateName = $('#templateName'+id).val();
					
					
					$.ajax({
                        type:'POST',
                        url: updateTemplate,
                        data: {templateName:templateName,formData:$('#form'+id).serialize(), _token: csrfToken},
                        dataType: 'json',
                        success: function(response){
                            window.location.reload();
                        },
                        error: function(response){
							 window.location.reload();
                        }
                    });
					return false;
					
				}
            </script>
			<style>
			
			input.btn{
					font-size: 18px;
				    width: 145px;
					height: 46px;
					margin: 11px 43px;
					border-radius: 16px;
					background-color: #6610f2;
					color: white;
					border-color: transparent;
			}
			 
			.btn:hover{
				
				color:white!important;
			}
			.main_under { 
				margin-bottom: 27px;
				margin-top: 23px;
			}
			
			 .vancy1{
				display: flex;
				align-items: center;
				justify-content: space-between !important;
				border-radius: 10px;
				width: 451px;
				font-size: 14px;
				font-family: sans-serif;
				padding: 0 20px;
				height: 38px;
				border-color: #becfda;
				
			}
			.first-box p{width:auto !important;}
			</style>