@extends('layouts.app')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/vendor/summernote/summernote-bs4.css') }}">
@endsection

@section('content')	   
		   <!-- .page -->
          <div class="page">
            <!-- .page-inner -->
            <div class="page-inner">
              <!-- .page-title-bar -->
              <header class="page-title-bar">
                <!-- .breadcrumb -->
                <nav aria-label="breadcrumb">
                  <ol class="breadcrumb">
                    <li class="breadcrumb-item active">
                      <a href="\">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Dashboard') }}</a>
					  <a href="\emails">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Email Templates') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto"> {{ $email->templatename }}</h1>
                </div>
                <!-- /title and toolbar -->
              </header>
              <!-- /.page-title-bar -->
              <!-- .page-section -->
              <div class="page-section">
                <!-- .card -->
                <section class="card card-fluid">
                  <!-- .card-header -->
                  <header class="card-header">
                    <!-- .nav-tabs -->
                    <ul class="nav nav-tabs card-header-tabs">
                      <li class="nav-item">
                        <a class="nav-link" role="tab" data-toggle="tab" href="#myemailtemplate">{{ __('Details') }}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link active show" role="tab" data-toggle="tab" href="#myemailcontent">{{ __('Content') }}</a>
                      </li>
                    </ul>
                    <!-- /.nav-tabs -->
                  </header>
                  <!-- /.card-header -->
                  <!-- .card-body -->
                  <div class="card-body">
				  
				  	<div class="tab-content">
					
						<div role="tabpanel" class="tab-pane" id="myemailtemplate">
							<form method="POST" action="/emails/{{ $email->id }}">
								{{ csrf_field() }}
								{{ method_field('PATCH') }}
               	        			<!-- .form-group -->
                       			<div class="form-group">
                          			<label for="name">{{ __('Name') }}</label>
                          			<input type="text" class="form-control" id="name" name="name" value="{{ $email->templatename }}" required="">
                        			</div>
                       			<!-- /.form-group -->
                        			<!-- .form-group -->
                        			<div class="form-group">
                          			<label for="locale">{{ __('Default Language') }}</label>
                         			<select class="custom-select" id="locale" name="locale" required="">
										@foreach ($languages as $language)
                            					<option value="{{ $language->locale }}" @if ($email->default_locale === $language->locale ) selected @endif > {{ $language->language }} </option>
                          				@endforeach
									</select>
                        			</div>
								<!-- /.form-group -->
                        			<div class="form-group">                        
									<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                       			 </div>
                       			<!-- .form-group -->
							</form>
						</div>
   						
						<div role="tabpanel" class="tab-pane active" id="myemailcontent">
							<form method="POST" action="/emails/content/{{ $email->id }}">
							{{ csrf_field() }}
                  				<div class="row">
                    					<div class="col-sm-12 col-md-10">
										<p> &nbsp </p>
									</div>								
                    					<div class="col-sm-12 col-md-2">
										<!-- .form-group -->
                        					<div class="form-group">
                          					<label for="locale">{{ __('Language') }}</label>
                         					<select class="custom-select" id="localeselector" name="locale" required="">
												@foreach ($languages as $language)
		                            					<option value="{{ $language->locale }}" @if ($email->default_locale === $language->locale ) selected @endif > {{ $language->language }} </option>
		                          				@endforeach
                          					</select>
                        					</div>
                       					<!-- /.form-group -->
									</div>
								</div>
               	        			@foreach ($languages as $language)
									@php
										$content = $mycontent->firstWhere('locale', $language->locale);
									@endphp
									@if ($email->default_locale === $language->locale)
										<div id="{{ $language->locale }}" class="showlocale">
									@else
										<div id="{{ $language->locale }}" class="hidelocale">
									@endif
											<!-- .form-group -->
		                       				<div class="form-group">
		                          				<label for="subject">{{ __('Subject') }}</label>
												<input type="text" class="form-control" id="subject" name="{{ $language->locale }}-subject" @if ($content!==null) value="{{ $content->subject }}" @endif >
		                        				</div>
		                       				<!-- /.form-group -->
											<!-- .card -->
                							<label for="{{ $language->locale }}-body">{{ __('Body') }}</label>
											<section class="card card-fluid">
                  								<span style="font-family: 'Verdana';">
													<textarea id="{{ $language->locale }}-body" name="{{ $language->locale }}-body">@if ($content!==null) {{ $content->body }} @endif</textarea>
												</span>
                							</section>
                							<!-- /.card -->
										</div>
                        			@endforeach
								<!-- .form-group -->
                        		
                        		<div class="form-group">                        
            						<button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                       			</div>
									
                       			<!-- .form-group -->
							</form>
						</div>

					  </div>
 					  <!-- /.tab-content -->
				  </div>
                  <!-- /.card-body -->
                </section>
                <!-- /.card -->
              </div>
              <!-- /.page-section -->
            </div>
            <!-- /.page-inner -->
          </div>
          <!-- /.page -->
@endsection

@push('scripts')
    <script src="{{ asset('assets/vendor/summernote/summernote-bs4.min.js') }}"></script>
	<script>
		$(document).ready(function () {

			$('#localeselector').change(function(){
				$('.hidelocale').hide();
				$('.showlocale').hide();
				$('#' + $(this).val()).show();
			});
	
			var NameButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{name}',
		        container: 'body',
		        tooltip: '{{ __('Insert User Name') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{name}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };

			var FirstNameButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{firstname}',
		        container: 'body',
		        tooltip: '{{ __('Insert User First Name') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{firstname}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };

		    var AccountLinkButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{link}',
		        container: 'body',
		        tooltip: '{{ __('Insert Link') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{link}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };

		    var FacilitatorNameButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{facilitatorname}',
		        container: 'body',
		        tooltip: '{{ __('Insert Facilitator name') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{facilitatorname}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };

		    var FacilitatorEmailButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{facilitatoremail}',
		        container: 'body',
		        tooltip: '{{ __('Insert Facilitator email') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{facilitatoremail}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };

		    var SessionNameButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{sessionname}',
		        container: 'body',
		        tooltip: '{{ __('Insert Session name') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{sessionname}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };

		    var SessionDateButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{sessiondate}',
		        container: 'body',
		        tooltip: '{{ __('Insert Session date') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{sessiondate}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };			

		    var SessionDeadlineDateButton = function (context) {
		        var ui = $.summernote.ui;
		        var button = ui.button({
		        className: 'note-btn-bold',
		        contents: '{sessiondeadlinedate}',
		        container: 'body',
		        tooltip: '{{ __('Insert Session deadline date') }}',
		        click: function () {
		                context.invoke('editor.insertText', '{sessiondeadlinedate}');
		            }
		    });
		        return button.render();   // return button as jquery object
		    };
	
			@foreach ($languages as $language)			
				$('#{{ $language->locale }}-body').summernote({
      				followingToolbar: false,
      				placeholder: 'Write here...',
   		   			height: 250,
      				 toolbar: [
                    ['style', ['fontname', 'fontsize', 'color', 'bold', 'italic', 'underline', 'clear']],
                    ['Paragraph style', ['style', 'ol', 'ul', 'paragraph', 'height']],
                    ['Insert', ['picture', 'link', 'table', 'hr']],
                    ['Misc', ['fullscreen', 'codeview', 'undo', 'redo', 'help']],
                    ['mybutton', ['name', 'firstname']],
                    ['mybutton', ['accountlink', 'facilitatorname', 'facilitatoremail']],
                    ['mybutton', ['sessionname', 'sessiondate']],
                    ['mybutton', ['sessiondeadlinedate']]
	                ],
	                buttons: {
						name: NameButton,
						firstname: FirstNameButton,
	                    accountlink: AccountLinkButton,
						facilitatorname: FacilitatorNameButton,
						facilitatoremail: FacilitatorEmailButton,
						sessionname: SessionNameButton,
						sessiondate: SessionDateButton,
						sessiondeadlinedate: SessionDeadlineDateButton
	                },
					callbacks: {
        					// fix broken checkbox on link modal
        					onInit: function onInit(e) {
        		  				var editor = $(e.editor);
        	  					editor.find('.custom-control-description').addClass('custom-control-label d-block').parent().removeAttr('for');
        					}
      				}
    				});
			@endforeach

	});
	
	</script>
@endpush