<script src="<?php echo LoadAdminLink('plugins/tinymce/js/tinymce/tinymce.min.js'); ?>"></script>
<div class="ma_page_content">
    <div class="ma_pc_inner">
        <div class="container">
            <h2 class="home_widget_title"><span>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17,14H19V17H22V19H19V22H17V19H14V17H17V14M20,11V8H4V11H20M13,13V14.68C12.37,15.63 12,16.77 12,18C12,19.09 12.29,20.12 12.8,21H4A2,2 0 0,1 2,19V3L3.67,4.67L5.33,3L7,4.67L8.67,3L10.33,4.67L12,3L13.67,4.67L15.33,3L17,4.67L18.67,3L20.33,4.67L22,3V13.5C20.93,12.58 19.53,12 18,12C16.77,12 15.63,12.37 14.68,13H13M11,19V13H4V19H11Z"></path></svg></span> {{LANG create_new_article}}
            </h2>
            <form class="form pp_store_upload pp_create_blog" method="POST" id="upload_store_image">
                <div class="content">
					<div class="form-group mat_input">
						<label class="col-md-12" for="title">{{LANG title}}</label>
						<div class="col-md-12">
							<input type="text" name="title" id="title" autofocus="" value="">
						</div>
					</div>
					<div class="form-group mat_input">
						<label class="col-md-12" for="description">{{LANG description}}</label>
						<div class="col-md-12">
							<textarea id="description" name="description" rows="3"></textarea>
						</div>
					</div>
					<div class="form-group mat_input">
						<label class="col-md-12" for="category">{{LANG category}}</label>
						<div class="col-md-12">
							<select name="category" id="category">
                                <option value="" selected disabled>{{LANG category}}</option>
                                <?php
                                    $store_categories = blog_categories();
                                    foreach ($store_categories as $key => $category) {
                                        echo '<option value="'.$key.'">'.$category.'</option>';
                                    }
                                ?>
                            </select>
						</div>
					</div>
					<div class="form-group mat_input">
						<label class="col-md-12" for="content">{{LANG article}}</label>
						<div class="col-md-12">
							<textarea id="content" name="content" rows="8" placeholder="{{LANG article}}"></textarea>
						</div>
					</div>
					<div class="form-group mat_input">
						<label class="col-md-12">{{LANG Upload Photo}}</label>
						<div class="col-md-12">
							<div class="fak_image">
								<div id="user_image"></div>
								<div class="upload_fk_image" onclick="document.getElementById('user-photo').click(); return false">
									<div class="upload_fk_image_content">
										<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /></svg> {{LANG Upload Photo}}
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group mat_input">
						<label class="col-md-12">{{LANG tags}}</label>
						<div class="col-md-12">
							<textarea name="tags" rows="1" placeholder="{{LANG tags}}"></textarea>
						</div>
					</div>
					<div class="last-sett-btn modal-footer">
						<button type="submit" class="btn btn-primary btn-mat">{{LANG publish}}</button>
					</div>
					<input type="hidden" name="hash_id" value="<?php echo createMainSession();?>">
					<input type="file" name="thumbnail" class="hidden" id="user-photo" accept="image/x-png,image/jpg,image/jpeg">
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(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"
            ],
        });
    });
    $(document).ready(function($) {
        $("#user-photo").change(function (event) {
            $("#user_image").html("<img src='" + window.URL.createObjectURL(this.files[0]) + "' alt='Picture' width='100%'>")
        });

        var form_add_settings = $('form#upload_store_image');
        form_add_settings.ajaxForm({
            url: '{{CONFIG ajax_url}}/ap/add_new_blog_article',
            type: 'POST',
            dataType: 'json',
            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) {
                $("html, body").animate({ scrollTop: 0 }, "slow");
                swal({
                    title: '{{LANG Success}}',
                    text: data.message,
                    type: 'success',
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'OK',
                    buttonsStyling: true,
                    confirmButtonClass: 'btn btn-success',
                }).then(
                    function () {
                        swal.close();
                    });

                //form_add_settings.find('.pp_load_loader').removeClass('loadingg');
                form_add_settings.find('button[type="submit"]').removeAttr('disabled');
                if (data.status == 200) {
                    setTimeout(function () {
                        window.location = '{{CONFIG site_url}}/blogs';
                    },3000);
                }
                else if (data.status == 400) {
                    alert(data.message);
                    // $.toast(data.message,{
                    //     duration: 5000,
                    //     type: 'error',
                    //     align: 'bottom',
                    //     singleton: true
                    // });
                }
                form_add_settings.find('.btn-primary').text('{{LANG save}}');
            }
        });
    });
</script>