@extends('adminlte::page')

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


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

    </div>
@stop


@section('content')
    <div class="row">
        <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="card box-primary">
  
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" enctype="multipart/form-data" method="POST" action="{{ route('blog.update',$blog->id) }}">
                    @method('PATCH')
                    @csrf
                    <div class="card-body">
                        <div class="form-group">
                            <label>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']}}" {{($blog->blog_category_id==$category['id'])?'selected':''}}>{{$category['name']}}</option>
                                @endforeach
                            </select>
                        </div>
						
						<div class="form-group">
							@php $relCategories = explode(',', $blog->related_blog_category_id); @endphp
                            <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']}}" {{in_array($category['id'],$relCategories)?'selected':''}}>{{$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']}}" {{($blog->to_country_id==$country['id'])?'selected':''}}>{{$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']}}" {{($blog->from_country_id==$country['id'])?'selected':''}}>{{$country['name']}}</option>
                                @endforeach
                            </select>
                        </div>
						
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" value="{{$blog->title}}" name="title"
                                   placeholder="Title">
                        </div>

                        <div class="form-group">
                            <label>Slug</label>
                            <input type="text" class="form-control" name="slug" placeholder="Slug"
                                   value="{{$blog->slug}}" required>
                        </div>

                        <div class="form-group">

                            <div class="input_fields_wrap">
                                <!-- <button type="button" class="add_field_button">Add More Fields</button> -->
                                {{-- @foreach ($blog->blogImages as $indexKey => $blogImg)
                                $blog->blogImages[0]->alt_text
                                    <div class="col-md-12" id="blog-img-{{$blogImg->blog_id}}">
                                        <img 
                                            width="50" 
                                            src="{{ $front_url.'/img_blog/'.$blogImg->image }}" 
                                            onError="this.onerror=null;this.src='{{ asset('img/no-image.png') }}';"
                                        />
                                        <input value="{{$blogImg->order}}" type="text" class="col-md-3" name="blog_img[0][order]" placeholder="Order">
                                        <input value="{{$blogImg->alt_text}}" type="text" class="col-md-3" name="blog_img[0][alt_text]" placeholder="Alternate Text">
                                        <!-- <a href="javascript:void(0);" class="delete-blog-img" data-id="{{$blogImg->blog_id}}">Delete</a> -->
                                    </div>
                                @endforeach
                                <input type="file" class="col-md-3" name="blog_img[0][img]">
                                @foreach ($blog->blogImages as $indexKey =>$blogImg)
                                    <div class="col-md-12" id="blog-img-{{$blogImg->blog_id}}">
                                        <img width="50" src="{{config('app.front_url').$blogImg->image}}"/>
                                        <input value="{{$blogImg->order}}" type="text" class="col-md-3" name="blog_img[{{$indexKey}}][order]" placeholder="Order">

                                        <input value="{{$blogImg->alt_text}}" type="text" class="col-md-3" name="blog_img[{{$indexKey}}][alt_text]" placeholder="Alternate Text">
                                        <a href="javascript:void(0);" class="delete-blog-img"
                                           data-id="{{$blogImg->blog_id}}">Delete</a>
                                    </div>
                                @endforeach--}}
                                <div class="col-md-12"@if(isset($blog->blogImages[0])) id="blog-img-{{$blog->blogImages[0]->blog_id}}" @endif>
                                    @if(isset($blog->blogImages[0]))<img 
                                        id="previewImage" 
                                        width="50" 
                                        src="{{ $front_url.'img_blog/'.$blog->blogImages[0]->image }}" 
                                        onError="this.onerror=null;this.src='{{ asset('img/no-image.png') }}';"
                                    />@endif
                                    <input 
                                        type="file" 
                                        class="col-md-3" 
                                        name="blog_img[0][img]" 
                                        onchange="previewSelectedImage(this)"
                                    >
                                    <input @if(isset($blog->blogImages[0])) value="{{$blog->blogImages[0]->order}}" @endif type="text" class="col-md-3" name="blog_img[0][order]" placeholder="Order">
                                    <input @if(isset($blog->blogImages[0])) value="{{$blog->blogImages[0]->alt_text}}" @endif 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">{{$blog->content}}</textarea>
                        </div>
												
						<div class="form-group">
                            <label>Meta Title</label>
                            <input type="text" class="form-control" value="{{$blog->meta_title}}" name="meta_title" placeholder="Meta Title">
                        </div>

                        <div class="form-group">
                            <label>Meta Key</label>
                            <input type="text" class="form-control" value="{{$blog->meta_key}}" name="meta_key" placeholder="Meta Key">
                        </div>

                        <div class="form-group">
                            <label>Meta Description</label>
                            <input type="text" class="form-control" value="{{$blog->meta_description}}" name="meta_description" placeholder="Meta Description">
                        </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">
                            
                            <input type="hidden" name="blog_id" value="{{ $blog->id }}">
                            
                            <div id="faq-items-container">
                                @foreach ($faqs as $index => $faq)
                                    <div class="faq-item">
                                        <div class="form-group">
                                            <label for="question">Question {{ $index + 1 }}.</label>
                                            <input type="text" name="questions[]" class="form-control" placeholder="Question..." value="{{ $faq->question }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="answer">Answer</label>
                                            <input type="text" name="answers[]" class="form-control" placeholder="Answer..." value="{{ $faq->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><br/>
                                @endforeach
                            </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>
						
						@if(empty($blog->fb_publish_id))
						{{--<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>--}}
						@endif
						
						@if(empty($blog->insta_publish_id))
						{{--<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>--}}
						@endif
						
						
						
						
                        <div class="form-group">
                            <label>Blog Visibility</label>
                            <input id="switch" class="switch-chk-input" name="status"
                                   type="checkbox" {{($blog->status)?'checked':''}}>
                            <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" {{($blog->is_published)?'checked':''}}>
                            <label for="switch" class="switch-chk"></label>
                        </div>
                        <div class="row">
                          
                            @if($blog->related_blog_category_id == 3 || $blog->related_blog_category_id == 16)
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Redirection Visa</label>
                                            <select name="redirection_visa" id="redirection_id" class="form-control">
                                                <option value="">--select--</option>
                                                @foreach($visas as $visa)
                                                    <option value="{{$visa->id}}" {{($blog->redirection_id == $visa->id) ? 'selected' : ''}}>{{$visa->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label>Addtional Redirection Visa</label>
                                            <select name="add_redirection_visa" id="add_redirection_id" class="form-control">
                                                <option value="">--select--</option>
                                                @foreach($add_visas  as $add_visa)
                                                    <option value="{{$add_visa->id}}" {{($blog->redirection_id == $add_visa->id) ? 'selected' : ''}}>{{$add_visa->title}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                            </div>
                            @else
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Redirection Service</label>
                                        <select name="redirection_id" id="redirection_id" class="form-control select2">
                                            <option value="">--select--</option>
                                            @foreach($services as $service)
                                                <option value="{{$service->id}}" {{($blog->redirection_id == $service->id) ? 'selected' : ''}}>{{$service->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label>Additional Redirection Service</label>
                                        <select name="add_redirection_id" id="add_redirection_id" class="form-control">
                                            <option value="">--select--</option>
                                            @foreach($add_services as $add_service)
                                                <option value="{{$add_service->id}}" {{($blog->redirection_id == $add_service->id) ? 'selected' : ''}}>{{$add_service->title}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            @endif
                        </div>
												
						<div class="form-group">
                            <label>Date Added</label>
                            <input type="text" class="form-control date-picker" name="date_added" placeholder="Date Added" value="{{$blog->date_added}}" required>
                        </div>

                    <div class="form-group">
                        <label for="related_services">Related Blogs</label>
                        <select name="related_blogs[]" id="related_blogs" class="form-control" multiple>
                            @foreach($category_blogs as $b)
                                <option value="{{ $b->id }}" {{ in_array($b->id, explode(',',$blog->related_blogs) ?? []) ? 'selected' : '' }}>
                                    {{ $b->title }}
                                </option>
                            @endforeach
                        </select>
                    </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 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 src="https://cdn.tiny.cloud/1/3qf9xg4v18lj5lod7796irb1f87026w00nmw7o5knt3ketr2/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>


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

			});
			
			
			/**************Tinymce**********/
			tinymce.init({
				selector: 'textarea#content',
                entity_encoding: 'raw', 
                charset: 'utf-8',
				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 |' +'charmap'
				],
				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 = parseInt('{{count($blog->blogImages)}}'); //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--;
            });


            $('.delete-blog-img').click(function () {
                var id = $(this).data('id');
                $.ajax({
                    type: 'POST',
                    url: "{{route('blog.blogImgDelete')}}",
                    data: {'_token': $('input[name=_token]').val(), id: id},
                    dataType: "json",
                    success: function (resultData) {
                        $('#blog-img-' + id).remove(); 
                    }
                });
            });
			
			$('#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(); // Update the numbering after removal
            }
        };

        // Function to update FAQ numbering
        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}.`;
                }
            });
        }

        function previewSelectedImage(input) {
        // Check if a file is selected
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                // Load the file and set the preview image source
                reader.onload = function (e) {
                    const previewImage = document.getElementById('previewImage');
                    previewImage.src = e.target.result; // Update the src attribute
                };
                // Read the selected file
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>


<script>
        $(document).ready(function() {
        $('.select2').select2();
            $("#heading_name").select2({
                // placeholder: "Blog Status",
                allowClear: true,
                minimumResultsForSearch: -1
            });

            $('#related_blogs').select2({
                placeholder: "Select Related Blogs"
            });
        });
    </script>
@stop
@stop