@extends('adminlte::page')

@section('title', 'Blog Add')


@section('content_header')
    <div class="row mb-2">
        <div class="col-sm-6 col-6">
            <h1>Add Blog</h1>
        </div>

    </div>
@stop


@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <div class="card">
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('blog.store',['draftId'=>Request::get('draftId')]) }}">
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label>Blog Category</label>
                            <select class="form-control" name="blog_category_id" required>
                                <option value="">Select Blog Category</option>
                                @foreach($blogCategories as $category)
                                    <option value="{{$category['id']}}">{{$category['name']}}</option>
                                @endforeach
                            </select>
                        </div>
						
						<div class="form-group">
                            <label>Related Categories</label>
                            <select class="form-control" name="related_blog_category_id[]" multiple> 
                                <option value="">Select Related Category</option>
                                @foreach($blogCategories as $category)
                                    <option value="{{$category['id']}}">{{$category['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>To Country</label>
                            <select class="form-control" name="to_country_id">
                                <option value="">Select Country</option>
                                @foreach($countries as $country)
                                    <option value="{{$country['id']}}">{{$country['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>From Country</label>
                            <select class="form-control" name="from_country_id">
                                <option value="">Select Country</option>
                                @foreach($countries as $country)
                                    <option value="{{$country['id']}}">{{$country['name']}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" name="title" placeholder="Title"
                                   value="{{ !empty(old('title'))?old('title'):(!empty($decoded['title'])?$decoded['title']:'') }}" required>
                        </div>

                        <div class="form-group">
                            <label>Slug</label>
                            <input type="text" class="form-control" name="slug" placeholder="Slug"
                                   value="{{ !empty(old('slug'))?old('slug'):(!empty($decoded['title'])?str_replace(' ','-',$decoded['title']):'') }}" required>
                        </div>

                        <div class="form-group">

                            <div class="input_fields_wrap">
                                <!-- <button class="add_field_button">Add More Fields</button> -->
                                <div class="col-md-12">
                                    <input type="file" class="col-md-3" name="blog_img[0][img]">
                                    <input type="text" class="col-md-3" name="blog_img[0][order]" placeholder="Order">
                                    <input type="text" class="col-md-3" name="blog_img[0][alt_text]" placeholder="Alternate Text">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Content</label>
                            <textarea name="content" id="content" required>{{ !empty(old('content'))?old('content'):'' }}</textarea>
                        </div>
												
						<div class="form-group">
                            <label>Meta Title</label>
                            <input type="text" class="form-control" name="meta_title" placeholder="Meta Title"
                                   value="{{ old('meta_title') }}" required>
                        </div>

                        <div class="form-group">
                            <label>Meta Key</label>
                            <input type="text" class="form-control" name="meta_key" placeholder="Meta Key"
                                   value="{{ old('meta_key') }}" required>
                        </div>

                        <div class="form-group">
                            <label>Meta Description</label>
                            <input type="text" class="form-control" name="meta_description" placeholder="Meta Description"
                                   value="{{ old('meta_description') }}" required>
                        </div>

                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-6"> <h3 class="text-bold bg-dark bg-gradient rounded text-dark text-center py-2 my-5"> FAQ's </h3></div>
                        </div>
                        
                        <div id="faq-section">
                            <div class="faq-item">
                                <div class="form-group">
                                    <label for="question">Question 1.</label>
                                    <input type="text" name="questions[]" class="form-control"  placeholder="Question...">
                                </div>
                                <div class="form-group">
                                    <label for="answer">Answer</label>
                                    <input type="text" name="answers[]" class="form-control"  placeholder="Answer...">
                                </div>
                                <button type="button" class="btn btn-danger remove-faq-btn float-md-right" onclick="removeFaq(this)"><i class="fas fa-trash"></i> Remove FAQ</button><br/><br/>
                            </div>
                        </div>

                        <div class="text-center mb-5">
                            <button type="button" class=" btn btn-primary" onclick="addFaq()"><i class="fas fa-plus"></i> Add More FAQ's</button>
                        </div>
						
						<div class="form-group">
                            <label>Post On Facebook</label>

                            <input id="chk_facebook" class="switch-chk-input" name="chk_facebook" type="checkbox">
                            <label for="chk_facebook" class="switch-chk"></label>
                        </div>
						
						{{--<div class="form-group facebook_title" style="display:none">
                            <label>Facebook Caption</label>
							
							<textarea class="form-control" name="facebook_title" placeholder="Facebook Caption">{{ old('facebook_title') }}</textarea>
                        </div>--}}
						
						
						{{--<div class="form-group">
                            <label>Post On Instagram</label>

                            <input id="chk_insta" class="switch-chk-input" name="chk_insta" type="checkbox" >
                            <label for="chk_insta" class="switch-chk"></label>
                        </div>
						<div class="form-group instagram_caption" style="display:none;">
                            <label>Instagram Caption</label>
								   
							<textarea class="form-control" name="instagram_caption" placeholder="Instagram Caption">{{ old('instagram_caption') }}</textarea>
                        </div> --}}

                        <div class="form-group">
                            <label>Blog Visibility</label>
                            <input id="switch" class="switch-chk-input" name="status" type="checkbox" required>
                            <label for="switch" class="switch-chk"></label>
                        </div>

                        <div class="form-group">
                            <label>Publish</label>
                            <input id="switch" class="switch-chk-input" name="is_published" type="checkbox" required>
                            <label for="switch" class="switch-chk"></label>
                        </div>
						
						<div class="form-group">
                            <label>Date Added</label>
                            <input type="text" class="form-control date-picker" name="date_added" placeholder="Date Added"
                                   value="{{ old('date_added') }}" required>
                        </div>
						
                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">Submit</button> 
                    </div>
                    </div>
                    <!-- /.box-body -->

               
                </form>
            </div>
            <!-- /.box -->
        </div>
    </div>
@section('js')
{{--<script src="https://savedaughters.com/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
<script src="https://savedaughters.com/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>--}}
<script src="https://cdn.tiny.cloud/1/3qf9xg4v18lj5lod7796irb1f87026w00nmw7o5knt3ketr2/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script>
        //$('textarea').ckeditor({extraPlugins: 'uploadimage'});
        /*CKEDITOR.replace('content', {
            filebrowserUploadUrl: "{{route('ckeditor.upload', ['_token' => csrf_token() ])}}",
            filebrowserUploadMethod: 'form',
			//allowedContent:true
        });*/
		
		$('.date-picker').daterangepicker({
			"singleDatePicker": true,
			locale: {
				format: 'YYYY-MM-DD'
			}

		});
		
        $(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**********/
			
			
			
			
			
			
			
			
			
            var max_fields = 10; //maximum input boxes allowed
            var wrapper = $(".input_fields_wrap"); //Fields wrapper
            var add_button = $(".add_field_button"); //Add button ID

            var x = 1; //initlal text box count
            $(add_button).click(function (e) { //on add input button click
                e.preventDefault();
                if (x < max_fields) { //max input box allowed
                    //text box increment
                    $(wrapper).append('<div class="col-md-12"><input type="file" class="col-md-3" name="blog_img[' + x + '][img]"><input type="text" class="col-md-3" name="blog_img[' + x + '][order]" placeholder="Order"><input type="text" class="col-md-3" name="blog_img[' + x + '][alt_text]" placeholder="Alternate Text"><a href="javascript:void(0);" class="remove_field">Remove</a></div>'); //add input box
                    x++;
                }
            });

            $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
                e.preventDefault();
                $(this).parent('div').remove();
                x--;
            });
			
			
			$('#chk_facebook').change(function() {
				if(this.checked) {
					$('.facebook_title').show();
				}else{
					$('.facebook_title').hide();
				}
			});
			
			$('#chk_insta').change(function() {
				if(this.checked) {
					$('.instagram_caption').show();
				}else{
					$('.instagram_caption').hide();
				}
			});
        });


        window.addFaq = function() {
            const faqSection = document.getElementById('faq-section');
            const faqCount = faqSection.getElementsByClassName('faq-item').length + 1;
            const newFaq = `
                <div class="faq-item">
                    <div class="form-group">
                        <label for="question">Question ${faqCount}.</label>
                        <input type="text" name="questions[]" class="form-control" placeholder="Question...">
                    </div>
                    <div class="form-group">
                        <label for="answer">Answer</label>
                        <input type="text" name="answers[]" class="form-control" placeholder="Answer...">
                    </div>
                    <button type="button" class="btn btn-danger remove-faq-btn float-md-right" onclick="removeFaq(this)"><i class="fas fa-trash"></i> Remove FAQ</button><br/><br/>
                </div>`;
            faqSection.insertAdjacentHTML('beforeend', newFaq);
        };

        window.removeFaq = function(btn) {
            const faqItem = btn.closest('.faq-item');
            if (confirm("Are you sure you want to delete this FAQ?")) {
                faqItem.remove();
                updateFaqNumbers();
            }
        };


        function updateFaqNumbers() {
            const faqItems = document.querySelectorAll('.faq-item');
            faqItems.forEach((item, index) => {
                const questionLabel = item.querySelector('label[for="question"]');
                if (questionLabel) {
                    questionLabel.innerHTML = `Question ${index + 1}.`;
                }
            });
        }
    </script>
@stop
@stop