@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="\tips">
                        <i class="breadcrumb-icon fa fa-angle-left mr-2"></i>{{ __('Tips') }}</a>
                    </li>
                  </ol>
                </nav>
                <!-- /.breadcrumb -->
                <!-- title and toolbar -->
                <div class="d-md-flex align-items-md-start">
                  <h1 class="page-title mr-sm-auto"> {{ $tip->tipname }}</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="#mytip">{{ __('Details') }}</a>
                      </li>
					  <li class="nav-item">
                        <a class="nav-link active show" role="tab" data-toggle="tab" href="#mytipcontent">{{ __('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="mytip">
							<form method="POST" action="/tips/{{ $tip->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="{{ $tip->tipname }}" required="">
                        		</div>
                       			<!-- /.form-group -->
                       			<p> &nbsp </p>
                       			
                       			<!-- .form-group -->
                                <div class="form-group">
        							<div class="custom-control custom-control-inline custom-radio">
        								<input type="radio" class="custom-control-input" name="colour" id="rd1" value=1 @if ($perspective) checked @endif>
        								<label class="custom-control-label" for="rd1">{{ __('Colour specific') }}</label>
        							</div>
        							<div class="custom-control custom-control-inline custom-radio">
        								<input type="radio" class="custom-control-input" name="colour" id="rd2" value=0 @if (!$perspective) checked @endif>
        								<label class="custom-control-label" for="rd2">{{ __('General') }}</label>
        							</div>
                                </div>
                                <!-- /.form-group -->
                        
                                <div class="colourspecific" id="colourspecific">
                                    <div class="table-responsive">
                                        <!-- .table -->
                                        <table class="table table-sm mb-0">
                                          <!-- thead -->
                                          <thead class="thead-">
                                            <tr>
                                              <th style="min-width:100px">{{ __('Perspective') }}</th>
                                              @foreach ($colours as $key=>$colour)
                                                <th>{{ $colour }}</th>
                                              @endforeach
                                            </tr>
                                          </thead><!-- /thead -->
                                          <!-- tbody -->
                                          <tbody>
                                            <!-- tr -->
                                            <tr>
                                              <td>{{ __('User') }} {{ __('Acceptance') }}</td>
                                              @foreach ($colours as $key=>$colour)
                                                <td>&nbsp&nbsp
                                                    <!-- .form-group -->
                                                    <div class="custom-control custom-control-inline custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" name="colourselfacc[]" id="colourselfacc-{{ $key }}" value="{{ $key }}" @if ($selfacc[$key] == 1) checked @endif>
                                                        <label class="custom-control-label" for="colourselfacc-{{ $key }}"> </label>
                                                    </div>
                                                    <!-- /form-group -->
                                                </td>
                                              @endforeach
                                            </tr><!-- /tr -->
                                            <!-- tr -->
                                            <tr>
                                              <td>{{ __('User') }} {{ __('Rejection') }}</td>
                                              @foreach ($colours as $key=>$colour)
                                                <td>&nbsp&nbsp
                                                    <!-- .form-group -->
                                                    <div class="custom-control custom-control-inline custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" name="colourselfrej[]" id="colourselfrej-{{ $key }}" value="{{ $key }}" @if ($selfrej[$key] == 1) checked @endif>
                                                        <label class="custom-control-label" for="colourselfrej-{{ $key }}"> </label>
                                                    </div>
                                                    <!-- /form-group -->
                                                </td>
                                              @endforeach
                                            </tr><!-- /tr -->
                                            <!-- tr -->
                                            <tr>
                                              <td>{{ __('Team/other person') }} {{ __('Acceptance') }}</td>
                                              @foreach ($colours as $key=>$colour)
                                                <td>&nbsp&nbsp
                                                    <!-- .form-group -->
                                                    <div class="custom-control custom-control-inline custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" name="colourotheracc[]" id="colourotheracc-{{ $key }}" value="{{ $key }}" @if ($otheracc[$key] == 1) checked @endif>
                                                        <label class="custom-control-label" for="colourotheracc-{{ $key }}"> </label>
                                                    </div>
                                                    <!-- /form-group -->
                                                </td>
                                              @endforeach
                                            </tr><!-- /tr -->
                                            <!-- tr -->
                                            <tr>
                                              <td>{{ __('Team/other person') }} {{ __('Rejection') }}</td>
                                              @foreach ($colours as $key=>$colour)
                                                <td>&nbsp&nbsp
                                                    <!-- .form-group -->
                                                    <div class="custom-control custom-control-inline custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" name="colourotherrej[]" id="colourotherrej-{{ $key }}" value="{{ $key }}" @if ($otherrej[$key] == 1) checked @endif>
                                                        <label class="custom-control-label" for="colourotherrej-{{ $key }}"> </label>
                                                    </div>
                                                    <!-- /form-group -->
                                                </td>
                                              @endforeach
                                            </tr><!-- /tr -->
                                          </tbody><!-- /tbody -->
                                        </table><!-- /.table -->
                                    </div>
                                </div>
                       			<p> &nbsp </p>
                                <!-- .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="mytipcontent">
							<form method="POST" action="/tips/content/{{ $tip->id }}" enctype="multipart/form-data">
							    {{ csrf_field() }}
							    {{ method_field('PATCH') }}
                  				<div class="row">
                					<div class="col-sm-12 col-md-9">
                    					<div class="row">
                        					<div class="col-sm-10 col-md-10">

                                                <div class="fileinput-button" id="image-preview">
                                                    <div class="fileinput-button-label">{{ __('Change image') }}</div>
                                                    <input id="fileupload-tip" type="file" name="tip">
                                                </div>
                                                <p class="card-text">
                                                    <small>JPG, GIF, PNG &lt; 2 MB.</small>
                                                </p><br>
                        
                                            
                                            
                                            
                                            
    
        									</div>								
                        					<div class="col-sm-2 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 ($lang === $language->locale ) selected @endif > {{ $language->language }} </option>
            	                          				@endforeach
                                  					</select>
                            					</div>
                           					    <!-- /.form-group -->
        									</div>
        								</div>
        								<div class="row">
        								    <div class="col-sm-12 col-md-12">
                               	        		@foreach ($languages as $language)
                									@php
                										$content = $mycontent->firstWhere('locale', $language->locale);
                									@endphp
                									@if ($lang === $language->locale)
                									<div id="edit-{{ $language->locale }}" class="showlocale">
                									@else
                									<div id="edit-{{ $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">{{ __('Tip') }}</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 -->
                                       		</div>
    									</div>
    								</div>
									<div class="col-sm-12 col-md-3">
									    @foreach ($languages as $language)
        									@php
        										$content = $mycontent->firstWhere('locale', $language->locale);
        									@endphp
        									@if ($lang === $language->locale)
        									<div id="show-{{ $language->locale }}" class="showlocale">
        									@else
        									<div id="show-{{ $language->locale }}" class="hidelocale">
        									@endif
                                                <div class="card card-figure">
                                                  <!-- .card-figure -->
                                                  <figure class="figure">
                                                    <img class="img-fluid" src="{{ $tiplink }}" alt="Tip image"> 
                                                    <!-- .figure-caption -->
                                                    <figcaption class="figure-caption">
                                                      <br>
                                                      <h6 class="figure-title">@if ($content!==null) {{ $content->subject }} @endif</h6>
                                                      <br>
                        	                          <p class="text-muted mb-0">@if ($content!==null) {!! $content->body !!} @endif</p>
                                                    </figcaption><!-- /.figure-caption -->
                                                  </figure><!-- /.card-figure -->
                                                </div>


                                                
                        	               </div>   
                    	               @endforeach
									</div>
							</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 type="text/javascript" src="{{ asset('assets/javascript/jquery.uploadPreview.min.js') }}"></script>
	<script>
		$(document).ready(function () {

			$('#localeselector').change(function(){
				$('.hidelocale').hide();
				$('.showlocale').hide();
				$('#edit-' + $(this).val()).show();
				$('#show-' + $(this).val()).show();
			});
			
			$.uploadPreview({
    		    input_field: "#fileupload-tip",   // Default: .image-upload
    		    preview_box: "#image-preview",  // Default: .image-preview
    		    label_field: "#image-label",    // Default: .image-label
    		    label_default: "Choose File",   // Default: Choose File
    		    label_selected: "Change File",  // Default: Change File
    		    no_label: true                 // Default: false
    		  });
    		  
			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 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
		    };
	
			@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', ['facilitatorname', 'facilitatoremail']]
	                ],
	                buttons: {
						name: NameButton,
						firstname: FirstNameButton,
						facilitatorname: FacilitatorNameButton,
						facilitatoremail: FacilitatorEmailButton
	                },
					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
		    
		    if($('#rd2').is(':checked')) { 
               $(".colourspecific").fadeOut('slow');
            }
            
		});
	    
	    $('body').on('change','input[type="radio"]',function () {
            if($('#rd1').is(':checked')) { 
               $(".colourspecific").fadeIn('slow');
            } else {
                $(".colourspecific").fadeOut('slow');               
            }
        });
	    
	</script>
@endpush