@extends('admin/admin_master')
@section('admin')

<style type="text/css">
    
.tags-input-wrapper{
    background: transparent;
    padding: 10px;
    border-radius: 4px;
    max-width: 400px;
    border: 1px solid #ccc
}
.tags-input-wrapper input{
    border: none;
    background: transparent;
    outline: none;
    width: 140px;
    margin-left: 8px;
}
.tags-input-wrapper .tag{
    display: inline-block;
    background-color: #5156be;
    color: white;
    border-radius: 40px;
    padding: 0px 3px 0px 7px;
    margin-right: 5px;
    margin-bottom:5px;
}
.tags-input-wrapper .tag a {
    margin: 0 7px 3px;
    display: inline-block;
    cursor: pointer;
}
</style>

<script src="{{ asset('backend/assets/libs/jquery/jquery.min.js') }}"></script>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">Edit Post</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('all.posts') }}">All Posts</a></li>
                            <li class="breadcrumb-item active">Edit Post</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <form method="post" action="{{ route('update.post') }}" enctype="multipart/form-data" id="myForm">

            @csrf

            <input type="hidden" name="id" value="{{ $post->id }}">

            <div class="row">
                    <div class="col-lg-9 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title text-center">Edit Post</h4>
                            </div>
                            <div class="card-body p-4">
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mt-4 mt-lg-0">

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="tamil_title" class="form-control" id="tamil_title" value="{{ $post->tamil_title }}">
                                                      @error('tamil_title')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <textarea name="post_content" class="form-control textarea-desc" rows="8" id="post_description">{{ $post->post_content }}</textarea>
                                                        </div>
                                                      @error('post_content')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title text-center">Post Details</h4>
                            </div>
                            <div class="card-body p-4">
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mt-4 mt-lg-0">
                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="english_title" class="form-control" id="english_title" value="{{ $post->english_title }}">
                                                      @error('english_title')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <select class="form-select select2" name="post_category" id="post_category" aria-label="Default select example">
                                                            @foreach($categories as $cat)
                                                            <option value="{{ $cat->id }}" {{ $cat->id == $post->post_category ? 'selected' : '' }}>{{ $cat->category_name }}</option>  
                                                            @endforeach     
                                                        </select>
                                                        @error('post_category')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <select class="form-select select2" name="post_sub_category" id="post_sub_category" aria-label="Default select example">
                                                        
                                                        @foreach($sub_categories as $sub_cat)
                                                        <option value="{{ $sub_cat->id }}" {{ $sub_cat->id == $post->post_sub_category ? 'selected' : '' }}>{{ $sub_cat->sub_category_name }}</option>  
                                                        @endforeach      
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <textarea name="post_description_tamil" class="form-control" id="post_description_tamil" placeholder="Post Description in Tamil" rows="10">{{ $post->post_description_tamil }}</textarea>
                                                        @error('post_description_tamil')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <input type="file" name="post_image" id="post_image" class="form-control">
                                                        @error('post_image')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror  
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-lg-3 col-sm-12 text-center">
                                                        <img id="showImage" class="rounded avatar-lg" src="{{ asset($post->post_image) }}" alt="Card image cap">
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 text-center">
                                                        <input type="input" name="post_image_alt" id="post_image_alt" class="form-control" value="{{ $post->post_image_alt }}" placeholder="Image Alt">
                                                        @error('post_image_alt')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror          
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 text-center">
                                                        <input type="input" name="post_image_caption" id="post_image_caption" class="form-control" value="{{ $post->post_image_caption }}">
                                                        @error('post_image_caption')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror          
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>

            <div class="row">
                    <div class="col-lg-9 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title text-center">SEO</h4>
                            </div>
                            <div class="card-body p-4">
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mt-4 mt-lg-0">

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="meta_title" class="form-control" id="meta_title" value="{{ $post->meta_title }}">
                                                      <p>60/<span id="meta_title_count"></span></p>
                                                      @error('meta_title')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                    <textarea name="meta_description" class="form-control" id="meta_description">{{ $post->meta_description }}</textarea>
                                                      <p>160/<span id="meta_desc_count"></span></p>
                                                      @error('meta_description')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                    <textarea name="schema_markup" class="form-control" id="schema_markup" placeholder="Schema Markup">{{ $post->schema_markup }}</textarea>
                                                    </div>
                                                </div>

                                                <div class="row justify-content-end">
                                                    <div class="col-sm-12">
                                                        <div>
                                                            <button type="submit" class="btn btn-primary w-md">Save</button>
                                                        </div>
                                                    </div>
                                                </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>


        </form>
        <!-- End Form Layout -->
    </div>
</div>

<!-- Form Validation -->
<script type="text/javascript">
    $(document).ready(function(){
        $('#myForm').validate({
            rules: { 
                tamil_title: { required : true, },
                english_title: { required : true, },
                post_content: { required : true, },
                post_category: { required : true, },
                post_sub_category: { required : true, },
                post_description_tamil: { required : true, },
                post_image_alt: { required : true, },
                post_image_caption: { required : true, },
                meta_title: { required : true, },
                meta_description: { required : true, },
            },

            messages : { 
                tamil_title: { required : 'Tamil Title is Required', },
                english_title: { required : 'English Title is Required', },
                post_content: { required : 'Post Content is Required', },
                post_category: { required : 'Post Category is Required', },
                post_sub_category: { required : 'Post Sub Category is Required', },
                post_description_tamil: { required : 'Post Description in Tamil is Required', },
                post_image_alt: { required : 'Post Image Alt is Required', },
                post_image_caption: { required : 'Post Image Caption is Required', },
                meta_title: { required : 'Meta Title is Required', },
                meta_description: { required : 'Meta Description is Required', },
            },

            errorElement : 'span',

            errorPlacement: function(error,element){
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
                
            highlight : function(element, errorClass, validClass){
                    $(element).addClass('is-invalid');
            },

            unhighlight : function(element, errorClass, validClass){
                    $(element).removeClass('is-invalid');
            },
        });
    });
</script>

<!-- Get Category Dynamic Dropdown -->
<script type="text/javascript">
    $(function(){
        $(document).on('change','#post_category',function(){
            var category_id = $(this).val();
            $.ajax({
                url:"{{ route('get-sub-category') }}",
                type: "GET",
                data:{category_id:category_id},
                success:function(data){
                    var html = '<option value="">Select Sub Category</option>';
                        html += '<option value="none">None</option>';
                    $.each(data,function(key,v){
                        html += '<option value=" '+v.id+' "> '+v.sub_category_name+'</option>';
                    });
                    $('#post_sub_category').html(html);
                }
            })
        });
    });
</script>

<!-- Image Javascript -->
<script type="text/javascript">
    
    $(document).ready(function(){
        $('#post_image').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    });

</script>

<script type="text/javascript">
$(document).ready(function () { 
    $('#meta_title').keyup(function() {
        var meta_title = $('#meta_title').val().length;
        $("#meta_title_count").text(meta_title);
        if (meta_title > 60) 
        {
            $("#meta_title_count").css("color", "#D50000");
        }
        else
        {
            $("#meta_title_count").css("color", "#04AA6D");   
        }
    });

    $('#meta_description').keyup(function() {
        var meta_desc = $('#meta_description').val().length;
        $("#meta_desc_count").text(meta_desc);
        if(meta_desc > 160) 
        {
            $("#meta_desc_count").css("color", "#D50000");
        }
        else
        {
            $("#meta_desc_count").css("color", "#04AA6D");   
        }
    });
}); 
</script>

<!-- Select 2 -->
<script type="text/javascript">
    $(document).ready(function() {
     $('.select2').select2();
    });
</script>

<!-- Tags Input -->
<script type="text/javascript">
    (function(){

    "use strict"

    
    // Plugin Constructor
    var TagsInput = function(opts){
        this.options = Object.assign(TagsInput.defaults , opts);
        this.init();
    }

    // Initialize the plugin
    TagsInput.prototype.init = function(opts){
        this.options = opts ? Object.assign(this.options, opts) : this.options;

        if(this.initialized)
            this.destroy();
            
        if(!(this.orignal_input = document.getElementById(this.options.selector)) ){
            console.error("tags-input couldn't find an element with the specified ID");
            return this;
        }

        this.arr = [];
        this.wrapper = document.createElement('div');
        this.input = document.createElement('input');
        init(this);
        initEvents(this);

        this.initialized =  true;
        return this;
    }

    // Add Tags
    TagsInput.prototype.addTag = function(string){

        if(this.anyErrors(string))
            return ;

        this.arr.push(string);
        var tagInput = this;

        var tag = document.createElement('span');
        tag.className = this.options.tagClass;
        tag.innerText = string;

        var closeIcon = document.createElement('a');
        closeIcon.innerHTML = '&times;';
        
        // delete the tag when icon is clicked
        closeIcon.addEventListener('click' , function(e){
            e.preventDefault();
            var tag = this.parentNode;

            for(var i =0 ;i < tagInput.wrapper.childNodes.length ; i++){
                if(tagInput.wrapper.childNodes[i] == tag)
                    tagInput.deleteTag(tag , i);
            }
        })


        tag.appendChild(closeIcon);
        this.wrapper.insertBefore(tag , this.input);
        this.orignal_input.value = this.arr.join(',');

        return this;
    }

    // Delete Tags
    TagsInput.prototype.deleteTag = function(tag , i){
        tag.remove();
        this.arr.splice( i , 1);
        this.orignal_input.value =  this.arr.join(',');
        return this;
    }

    // Make sure input string have no error with the plugin
    TagsInput.prototype.anyErrors = function(string){
        if( this.options.max != null && this.arr.length >= this.options.max ){
            console.log('max tags limit reached');
            return true;
        }
        
        if(!this.options.duplicate && this.arr.indexOf(string) != -1 ){
            console.log('duplicate found " '+string+' " ')
            return true;
        }

        return false;
    }

    // Add tags programmatically 
    TagsInput.prototype.addData = function(array){
        var plugin = this;
        
        array.forEach(function(string){
            plugin.addTag(string);
        })
        return this;
    }

    // Get the Input String
    TagsInput.prototype.getInputString = function(){
        return this.arr.join(',');
    }


    // destroy the plugin
    TagsInput.prototype.destroy = function(){
        this.orignal_input.removeAttribute('hidden');

        delete this.orignal_input;
        var self = this;
        
        Object.keys(this).forEach(function(key){
            if(self[key] instanceof HTMLElement)
                self[key].remove();
            
            if(key != 'options')
                delete self[key];
        });

        this.initialized = false;
    }

    // Private function to initialize the tag input plugin
    function init(tags){
        tags.wrapper.append(tags.input);
        tags.wrapper.classList.add(tags.options.wrapperClass);
        tags.orignal_input.setAttribute('hidden' , 'true');
        tags.orignal_input.parentNode.insertBefore(tags.wrapper , tags.orignal_input);
    }

    // initialize the Events
    function initEvents(tags){
        tags.wrapper.addEventListener('click' ,function(){
            tags.input.focus();           
        });
        

        tags.input.addEventListener('keydown' , function(e){
            var str = tags.input.value.trim(); 

            if( !!(~[9 , 13 , 188].indexOf( e.keyCode ))  )
            {
                e.preventDefault();
                tags.input.value = "";
                if(str != "")
                    tags.addTag(str);
            }

        });
    }


    // Set All the Default Values
    TagsInput.defaults = {
        selector : '',
        wrapperClass : 'tags-input-wrapper',
        tagClass : 'tag',
        max : null,
        duplicate: false
    }

    window.TagsInput = TagsInput;

})();

 var tagInput1 = new TagsInput({
            selector: 'tag-input1',
            duplicate : false,
            max : 10
        });
        tagInput1.addData([])
    
</script>

@endsection