
<div class="container-fluid">
    <div>
        <h3>Create New article</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="#">Home</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#">Blogs</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Create New article</li>
            </ol>
        </nav>
    </div>
    <!-- Vertical Layout -->
    <div class="row">
        <div class="col-lg-8 col-md-8">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Create New article</h6>
                    <div class="add-settings-alert"></div>
                    <form class="add-settings" method="POST">
                        <label for="type">Category</label>
                        <select class="form-control show-tick chosen-select" id="category" name="category">
                            <?php
                            $wo['blog_categories'] = Dataset::blog_categories();
                            foreach ($wo['blog_categories'] as $wo['category_key'] => $wo['category']) {
                            ?>
                                <option value="<?php echo $wo['category_key'];?>"><?php echo $wo['category'];?></option>
                            <?php }?>
                        </select>
                        <div class="clearfix"></div><br>

                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Title</label>
                                <input type="text" id="title" name="title" class="form-control">
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Description</label>
                                <input type="text" id="description" name="description" class="form-control">
                                
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="form-group form-float">
                            <div class="form-line"><div class="clearfix"></div>
                                <br>
                                <label class="form-label">Content (HTML allowed)</small></label>
                                <textarea name="content" id="content" class="form-control" cols="30" rows="5"></textarea>
                            </div>
                        </div>

                        <div class="clearfix"></div>
						<div class="form-group form-float">
							  <div class="form-line focused">
								<label class="form-label">Thumbnail File <small>only: .jpg,.jpeg,.png,.gif allowed</small></label>
								<div class="btn-file d-flex align-items-center">
									<input type="file" id="thumbnail" accept="image/x-png, image/gif, image/jpeg" name="thumbnail" class="hidden">
									<div class="mr-2 change-file-ico">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M16.5,6V17.5A4,4 0 0,1 12.5,21.5A4,4 0 0,1 8.5,17.5V5A2.5,2.5 0 0,1 11,2.5A2.5,2.5 0 0,1 13.5,5V15.5A1,1 0 0,1 12.5,16.5A1,1 0 0,1 11.5,15.5V6H10V15.5A2.5,2.5 0 0,0 12.5,18A2.5,2.5 0 0,0 15,15.5V5A4,4 0 0,0 11,1A4,4 0 0,0 7,5V17.5A5.5,5.5 0 0,0 12.5,23A5.5,5.5 0 0,0 18,17.5V6H16.5Z"></path></svg>
									</div>
									<div class="full-width">
										<b id="wowonder-icon-name">Choose Thumbnail File</b>
									</div>
								</div>
							  </div>
						  </div>

                        <div class="clearfix"></div>
                        <div class="form-group form-float">
                            <div class="form-line">
                                <label class="form-label">Tags</label>
                                <input type="text" id="tags" name="tags" class="form-control">
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <br>

                        <input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
                        <button type="submit" class="btn btn-primary m-t-15 waves-effect">Create</button>
                        <a class="btn btn-info m-t-15 waves-effect waves-light" href="<?php echo Wo_LoadAdminLinkSettings('manage-success-stories'); ?>">Cancel</a>
                    </form>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- #END# Vertical Layout -->
	
	<style type="text/css">
	.btn-file { position: relative; overflow: hidden;cursor: pointer;}
	.btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; opacity: 0; outline: none; background: #fff; cursor: inherit; display: block; }
	.change-file-ico {min-width: 36px;}
	.change-file-ico svg {border-radius: 50%;background: rgb(163 53 150 / 15%);color: #a33596;padding: 7px;width: 36px;height: 36px;}
	.full-width {width: 100%;}
	#wowonder-icon-name {font-weight: normal;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}
</style>

<script>
	$("#thumbnail").change(function () {
		var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
		$("#wowonder-icon-name").text(filename);
    });

        $(function() {

            tinymce.init({
                selector: '#content',
                height: 270,
                entity_encoding : "raw",
                paste_data_images: true,
                image_advtab: true,
                toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                toolbar2: "print preview media | forecolor backcolor",
                plugins: [
                    "advlist autolink lists link image charmap print preview hr anchor pagebreak",
                    "searchreplace wordcount visualblocks visualchars code fullscreen",
                    "insertdatetime media nonbreaking save table contextmenu directionality",
                    "template paste textcolor colorpicker textpattern"
                ],
            });


            var form_add_settings = $('form.add-settings');
            form_add_settings.ajaxForm({
                url: Wo_Ajax_Requests_File() + '?f=admin_setting&s=add_new_blog_article&p=add-new-article',
                beforeSend: function() {
                    form_add_settings.find('.btn-primary').text('Please wait..');
                },
                beforeSubmit : function(arr, $form, options){
                    //arr.splice(0, 1);
                    tinymce.get("content").setContent(tinymce.activeEditor.getContent());
                    document.getElementById("content").value=tinymce.activeEditor.getContent();
                    arr.push({name:'content', value:btoa(unescape(encodeURIComponent($('#content').val())))});
                    arr.push({name:'category', value:$('#category').val()})
                },
                success: function(data) {
                    if (data.status == 200) {
                        $("html, body").animate({ scrollTop: 0 }, "slow");
                        $('.add-settings-alert').html('<div class="alert alert-success"><i class="fa fa-check"></i> Blog article added successfully</div>');
                        setTimeout(function () {
                            window.location.href = '<?php echo Wo_LoadAdminLinkSettings('manage-articles'); ?>';
                        }, 1000);
                    } else if (data.status == 400) {
                        $('.add-settings-alert').html('<div class="alert alert-danger">'+data.message+'</div>');
                        setTimeout(function () {
                            $('.add-settings-alert').empty();
                        }, 2000);
                    }
                    form_add_settings.find('.btn-primary').text('Create');
                }
            });
        });
    </script>