@extends('adminlte::page')

@section('title', 'Edit Travel Guide Card')

@section('content_header')
	<div class="">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
				<li class="breadcrumb-item text-bold"><a href="{{ route('admin.travel-guide.overview.index',[$page_type,$country_id]) }}">{{$page->name}}</a></li>
				<li class="breadcrumb-item text-bold"><a href="{{ route('admin.travel-guide.cluster.index',[$country_id, $page_type])}}"> Card List</a></li>
				<li class="breadcrumb-item active text-bold" aria-current="page">Edit Card</li>
			</ol>
		</nav>
	</div>
    <div class="row mb-2">
        <div class="col-sm-6 col-6">
            <h1>Edit Card</h1>
        </div>
    </div>
@stop


@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card box-primary">
      
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST"
                      action="{{ route('admin.travel-guide.cluster.update',[$country_id, $page_type, $cluster->id]) }}">
                   
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" name="title" placeholder="Title"
                                   value="{{ (empty(old('title')))?$cluster->title:old('title') }}" required>
                        </div>
						
						<div class="form-group">
                            <label>Tags</label>
                            <select class="form-control" id="tags" name="tags[]" multiple="multiple">
								@if(!empty($tags))
									@php
										$selectedTags = explode(',', $cluster->tags);
									@endphp
									@foreach($tags as $key=>$value)
										<option value="{{$key}}" {{ in_array($key, $selectedTags) ? 'selected' : '' }}>{{$value}}</option>
									@endforeach
								@endif
							</select>
                        </div>
						
						<div class="form-group">
                            <label>Image</label>
                            <input type="file" class="form-control" name="image" >
                        </div>
						@if(!empty($cluster->image))
							<div class="image-box">
								<img src="{{ $front_url.'travel_guide/image/'.$cluster->image }}" style="height: 25px;">
							</div>
						@endif
						
						<div class="form-group">
                            <label>Description</label>
							<textarea class="form-control tinymce-editor" name="description" placeholder="Write Here..." rows="7" cols="100" id="content" >{{ old('description', @$cluster['description']) }}</textarea>
						</div>
                        
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                    <!-- /.box-body -->
             
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@stop
@section('css')
<style>
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff;
    color: #fff;
    border: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
}
</style>
@stop

@section('js')
	
	<script src="https://cdn.tiny.cloud/1/3qf9xg4v18lj5lod7796irb1f87026w00nmw7o5knt3ketr2/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>
    <script>
    $('#tags').select2();    
$(document).ready(function () {
    /**************Tinymce**********/
			tinymce.init({
				selector: 'textarea#content',
				height: 800,
				setup: function (editor) {
					editor.on('init change', function () {
						editor.save();
					});
				},
				browser_spellcheck: true,
				plugins: [
					'advlist', 'accordion', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
					'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code','advcode', 'fullscreen', 'insertdatetime',
					'media', 'table', 'advtable', 'emoticons', 'help', 'quickbars', 'directionality', 'codesample' , 'imagetools','editimage','autosave','nonbreaking','lists','checklist','casechange','permanentpen','tableofcontents'
				],
				toolbar: [
					'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
					'rotateleft rotateright | bullist numlist outdent indent | link image | ' +
					'print preview media fullscreen | forecolor backcolor emoticons | help | ' +
					'ltr rtl | quickimage quicktable quicklink | code codesample restoredraft |' + 'checklist |'  + 'casechange |'  + 'permanentpen |' + 'tableofcontents |'
				],
				image_caption: true,
                autosave_interval: '0s',
                autosave_restore_when_empty: false,
				menu: {
					favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' }
				},
				
				menubar: 'favs file edit view insert format tools table help',
				image_title: true,
				automatic_uploads: true,
				file_picker_types: 'image',
				convert_urls:true,
				relative_urls:false,
				remove_script_host:false,
			 
				images_upload_url: '{{ route('ckeditor.upload', ['_token' => csrf_token() ]) }}',
				file_picker_callback: (cb, value, meta) => {
					const input = document.createElement('input');
					input.setAttribute('type', 'file');
					input.setAttribute('accept', 'image/*');

					input.addEventListener('change', (e) => {
						const file = e.target.files[0];
						const reader = new FileReader();
						reader.addEventListener('load', () => {
							const id = 'blobid' + (new Date()).getTime();
							const blobCache = tinymce.activeEditor.editorUpload.blobCache;
							const base64 = reader.result.split(',')[1];
							const blobInfo = blobCache.create(id, file, base64);
							blobCache.add(blobInfo);
							cb(blobInfo.blobUri(), { title: file.name });
						});
						reader.readAsDataURL(file);
					});

					input.click();
				},
				
				extended_valid_elements: 'script[src|async|defer|type|charset]',
				valid_children: '+body[script]',
				// Optional: Adding schema to ensure these elements are supported
				schema: 'html5'
			});
			/**************Tinymce**********/
        });
    </script>  
@stop