@extends('layout.master')
@section('content')

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
	<div class="container-xxl" id="kt_content_container">

		@include('app.settings.header')
		
		<div class="card mb-5 mb-xl-10" id="kt_profile_details_view">
			<div class="card-header">
				<div class="card-title m-0">
					<h3 class="fw-bold m-0">{{ $selectedTemplate->name }}</h3>
				</div>
			</div>
			<div class="card-body p-9">
				<div class="row mb-7">
						<div class="col-lg-5">
							<form action="" id="mail_template_form">
								<input type="hidden" name="template" value="{{ $selectedTemplate->id }}" id="template_id">

								<ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
									@foreach($languages as $language)
										@if($loop->first)
											<input type="hidden" name="language" value="{{ $language->id }}" id="language">
										@endif

										<li class="nav-item nav-item-lang @if($loop->first)selected_language @endif" data-id="{{ $language->id }}" data-name="{{ $language->short_name }}">
												<a class="nav-link @if($loop->first)active @endif" data-bs-toggle="tab" href="#lang_content_{{ $language->id }}">{{ $language->short_name }}</a>
										</li>
									@endforeach
								</ul>

								<div class="tab-content" id="myTabContent">
									@foreach($languages as $language)
										<div class="tab-pane fade @if($loop->first)show active @endif" id="lang_content_{{ $language->id }}" role="tabpanel">

											@if($loop->first)
												<div class="mb-5">
													<div class="row">
														<div class="col-lg-12 mb-5">
															<label for="exampleFormControlInput1" class="required form-label">Mail Teması:</label>
															<select name="mail_design" class="form-control mail-design-changed" id="design_id">
																@foreach($templateDesigns as $design)
																	<option value="{{ $design->id }}">{{ $design->name }}</option>
																@endforeach
															</select>
														</div>

														<div id="agent-theme-logo" style="display: none;">
															<div class="col-lg-12 mb-5">
																<label for="exampleFormControlInput1" class="required form-label">Logo:</label>
																<input type="file" name="logo" class="form-control input-lg"/>
															</div>
														</div>

														<div id="agent-theme-color" style="display: none;">
															<div class="col-lg-12">
																<label for="exampleFormControlInput1" class="required form-label">Şablon Rengi:</label>
																<input id="cp1" type="color" name="design_color" class="form-control input-lg color-picker" value=""/>
															</div>
														</div>
													</div>
												</div>
											@endif

											<div class="mb-5">
													<label for="exampleFormControlInput1" class="required form-label">Mail Konusu:</label>
													<input type="text" name="subject[{{ $language->id }}]" class="form-control form-control-solid" placeholder="Mail Konusu"/>
											</div>

											@for ($i = 1; $i < $selectedTemplate->field; $i++)
												<div class="mb-5">
														<label for="exampleFormControlInput1" class="required form-label">Alan {{ $i }}:</label>
														<textarea name="value[{{ $language->short_name }}][]" class="form-control mail-field" rows="2"></textarea>
												</div>
											@endfor

										</div>
									@endforeach
								</div>
							</form>
						</div>

						<div class="col-lg-7">
							<div id="template-content"></div>
						</div>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Bu sayfaya ait css dosyaları -->
@section('css')
	<link href="{{ URL::to('app/css/bootstrap-colorpicker.css') }}" rel="stylesheet" type="text/css" />
	<style>
		.color-picker{height: 43.56px;}
	</style>
@endsection

<!-- Bu sayfaya ait js dosyaları -->
@section('js')

<script>
	$(function() {
		$(".nav-item-lang").click(function() {
			$(".selected_language").removeClass('selected_language')
			$(this).addClass('selected_language')

			var lang_id = $('.selected_language').data('id')
			$("#language").val(lang_id)

			edit_design()
		});

		// $(".mail-field").keypress(function() {
		// 	setTimeout(function(){ 
		// 		console.log("başarılı");
		// 	}, 3000);
		// });

		function delay(callback, ms) {
			var timer = 0;
			return function() {
				var context = this, args = arguments;
				clearTimeout(timer);
				timer = setTimeout(function () {
					callback.apply(context, args);
				}, ms || 0);
			};
		}

		$('.mail-field').on('keyup', delay(function (e) {
			edit_design()
		}, 1000));

		

		$('.mail-design-changed').on('change', function(){
			const val = $(this).val()
			if(val == 1){
				$('#agent-theme-color').hide()
				$('#agent-theme-logo').hide()
			} else {
				$('#agent-theme-color').show()
				$('#agent-theme-logo').show()
			}
			//agent-theme-color
			edit_design()
		});

		//Hangi şablonda?
		//Hangi dizaynda?
		//Hangi dilde

		edit_design() //Sayfa yüklenince bir kez çalıştır.

		function edit_design(){
			const template_id 	= $('#template_id').val();
			const design_id 		= $('#design_id').val();
			const language_id 	= $('.selected_language').attr('data-id');

			// console.log("Template:", template_id)
			// console.log("Design:", design_id)
			// console.log("Language:", language_id)

			//$("#template-content").html("");

			var form_data = $("#mail_template_form").serialize();
			$.ajax({
					type: "POST",
					url: "{{ route('setting.edit_mail_template') }}",
					data: form_data,
					//dataType: "json",
					success: function(result) {
						//console.log("test:", result)
						$("#template-content").html(result);
					}
			});
		}
	});
</script>



<script src="{{ URL::to('app/js/bootstrap-colorpicker.min.js') }}"></script>

<script>
  // $(function () {
  //   $('#cp1').colorpicker();
  // });
</script>
@endsection

@endsection