{% extends 'base.html.twig' %}
{% block title %}Author Panel - Novamar Insurance México{% endblock %}
{% block stylesheets %}	
{{ parent() }}
{{encore_entry_link_tags('mainCSS')}}
{{encore_entry_link_tags('blogPanelCSS')}}
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
 <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
 <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
<style>
#quill-editor{
	min-height: 400px;
    margin-bottom: 20px;
	background:white;
}

.ql-font-arial {
  font-family: 'Arial', sans-serif;
}
.ql-font-courier {
  font-family: 'Courier New', monospace;
}
.ql-font-roboto {
  font-family: 'Roboto';
}
.ql-font-times {
  font-family: 'Times New Roman', serif;
}
.blog-table tr:nth-child(odd) {
    background-color: #f2f2f2; 
}
</style>
{% endblock %}
{% block body %}
	{{ include("blog/nav_menu.html.twig", {option:'articles'}) }}
<div id="main" data-post-slug="">
	<div class="container mt-4 posts">
		<div class="row">
			<div class="col-3">
				<h2>Blog Panel</h2>				
			</div>
			<div class="col-2">
				<button class="btn btn-success btn-blog-options" id="addPost"  @click="newPost()"><i class="fas fa-plus"></i> New post</button>
			</div>
			<div class="col-7 text-end">
				<label class="badge bg-info badge-blog">
					<strong>[[author]]</strong> | 
					<strong>[[email]]</strong>
				</label>				
				<label class="badge bg-danger badge-blog">				
					{# <a href="{{ url('blog_author_logout') }}" class="text-white">
    					Log out	    				
    				</a> #}
    			</label>	    		
			</div>
		</div>		
		<hr class="mt-2">
		<label>Page:</label>
		<select  id ="filterType" v-model="filterType">
					<option value="NI">NI</option>
					<option value="NIM">NIM</option>
		</select>
		<div class="row">
			<div class="col-12  table-responsive">
				
				<table class="table table-striped blog-table" id="postsList">
					<thead>
						<tr>
							<td style="width:40%" >Article</td>
							<td style="width:20%;">Publication date</td>
							<td style="width:10%;">Status</td>
							<td style="width:10%;"></td>
							<td style="width:10%;"></td>
						</tr>					
					</thead>
					<tbody >
						<tr v-for="post in allPosts" :key="post.id">
							<td  style="width:40%;">[[post.title]]</td>
							<td style="width:20%;">[[post.public_date  | formatDate('MMMM dd, yyyy') ]]</td>
							<td style="width:10%;">[[post.status]]</td>
							<td style="width:10%;">
								<button class="btn btn-success btn-blog-options" @click="editPost(post.id)">
									<i class="fa fa-pencil"></i>
								</button>
							</td>
							<td style="width:10%;">
								<a :href="generatePostUrl(post.slug, post.id)" class="btn btn-info btn-blog-options" target="_blank">
									<i class="fa fa-external-link"></i>
								</a>
							</td>							
						</tr>	
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<div class="container mt-4 editor d-none">
		<div class="row">
			<div class="col-3">
				<h2 id="h2Editor">New Post</h2>
			</div>			
			<div class="col-9 text-end">
				<button class="btn btn-danger btn-blog-options"   @click="btnCancel()">Back</button>
				<button class="btn btn-success btn-blog-options" id="btnSaveUpdatePost" @click="savePost()">Save</button>
			</div>			
		</div>		
		<div class="row blog-editor">
			<div class="col-12 formPostGroup pt-1">
				<form class="form" id="formPost">
					<div class="row">
					    <div class="col-6">
				    		<div class="form-group">
								<label for="publicDatePost">Publication date</label>
								<input type="text" name="publicDatePost" id="publicDatePost" class="form-control" placeholder="mm/dd/yyyy">
							</div>
					   	</div>
					</div>
					<div class="row">
					    <div class="col-6">
					    	<div class="form-group">
								<label for="titlePost">Post title</label>
								<input type="text" name="titlePost" id="titlePost" class="form-control">
							</div>
					    </div>
					    <div class="col-6">
					    	<div class="form-group">
								<label for="linkPost">Link - <small>Descriptive name, Separed-whit-hyphens</small></label>
								<input type="text" name="linkPost" id="linkPost" class="form-control">
							</div>
					    </div>					    
					</div>
					<div class="row">
						<div class="col-12">							
							<label>Tag list</label>							
							<div class="input-group mb-2" >
								<select name="tagsPost" id="tagsPost" class="form-control me-2" >				    				
									<option v-for="tag in allTags" :key="tag.id" :value="tag.id">[[tag.tag]]</option>		    				
					    		</select>					    		
					    		<button class="btn btn-info btn-blog-options me-2" id="btnAddTag" @click="addTag()" type="button">
					    			<i class="fas fa-arrow-down"></i> Add
					    		</button>
					    		<button class="btn btn-info btn-blog-options" id="btnCreateTag" @click="createTag()" type="button">
					    			<i class="fas fa-plus"></i> Create
					    		</button>
							</div>												    	
					    </div>
					    <div class="col-12">
					    	<div class="form-group">					    		
								<table class="table table-striped blog-table">
									<thead>
										<tr>
											<td>Added tags</td>
											<td ></td>
										</tr>
										
									</thead>
									<tbody id="tagsPostTable">
									</tbody>
								</table>								
							</div>
						</div>
					    <div class="col-12">
					    	<div class="form-group">
								<label for="shortDescriptionPost">Short description</label>
								<textarea name="shortDescriptionPost" id="shortDescriptionPost" class="form-control" rows="4"></textarea> 
							</div>
					    </div>
					    <div class="col-4">
					    	<div class="form-group">
								<label for="statusPost">Status</label>
								<select name="statusPost" id="statusPost" class="form-control">
									<option value="">Select..</option>
									<option value="Active">Active</option>
									<option value="Inactive">Inactive</option>
								</select>
							</div>
					    </div>
					    <div class="col-4">
							<label for="categoryPost">Category</label>
					    	<div class="input-group">
								<select name="categoryPost" id="categoryPost" class="form-control me-2" >
									<option v-for="category in allCategories" :key="category.id" :value="category.id">[[category.name]]</option>			    		
								</select>
					    		<button class="btn btn-info btn-blog-options" @click="btnCreateCategory()" type="button">
					    			<i class="fas fa-plus"></i> Create
					    		</button>
							</div>
					    </div>
						<div class="col-4">
					    	<div class="form-group">
								<label for="metaDescription">Meta description</label>
								<input type="text" name="metaDescription" id="metaDescription" class="form-control">
							</div>
					    </div>	
					    <div class="col-4">
					    	<label for="headerPost">Header image</label>
					    	<div class="input-group mb-2">					    		
								<input type="file" name="headerPost" id="headerPost" class="form-control me-2">
					    		<button type="button" class="btn btn-info btn-blog-options" data-bs-toggle="modal" data-bs-target="#modalImgHeader">
									<i class="fa fa-picture-o"></i> View
								</button>
							</div>												    						    	
					    </div>				
					    <div class="col-4">
					    	<div class="form-group">
								<label for="headerAltPost">Header Alt</label>
								<input type="text" name="headerAltPost" id="headerAltPost" class="form-control">
							</div>
					    </div>	    
					    <div class="col-4">
					    	<div class="form-group">
								<label for="headerTitlePost">Header Title</label>
								<input type="text" name="headerTitlePost" id="headerTitlePost" class="form-control">
							</div>
					    </div>
						<label> Description</label>
						<div id="quill-editor"></div>
						{# <button @click="saveQuill" class="btn btn-info" type="button">save Description</button> #}
					</div>	
					<input type="hidden" name="uniqueCode" id="uniqueCode" value="{{uniqueCode}}">
					<input type="hidden" name="contentHtmlPost" id="contentHtmlPost">					
				</form>		
			</div>	
			<hr class="mt-2 mb-2">			
		</div>
	</div>
	<div id="contentBlogNim" class="container contentBlogNim d-none">
		<div id="description" contenteditable="true" @input="updateDescription" v-html="postMx.description">
	</div>
	</div>		
	<div class="modal fade" tabindex="-1" role="dialog" id="modalImgHeader">
		<div class="modal-dialog" role="document" style="width:auto;">
			<div class="modal-content">				
				<div class="modal-body">
					<img src="" id="headerPostPreview" class="img-fluid">
				</div>				
			</div>
		</div>
	</div>				
	<div class="modal fade" tabindex="-1" role="dialog" id="modalTag">
		<div class="modal-dialog" role="document" style="width:auto;">
			<div class="modal-content">				
				<div class="modal-header">
					<h5 class="modal-title" id="modalTagTitle">Create [[Title]]</h5>
					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label>[[Title]] name</label>
						<input type="text" id="tagName" class="form-control">
					</div>
				</div>				
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary mb-0 btn-blog-options" @click="btnSaveTagCategory()">Create</button>
				</div>
			</div>			
		</div>
	</div>				
	<div class="modal fade" tabindex="-1" role="dialog" id="modalBlock">
		<div class="modal-dialog" role="document" style="min-width:800px;">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="modalBlockTitle">Add block</h5>												
					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<form id="formBlock">
						<div class="form-group" id="typeBlockGroup">
							<label for="typeBlock">Type</label>
							<select id="typeBlock" class="form-control">
								<option value="title">Title</option>
								<option value="subtitle">Subtitle</option>
								<option value="paragraph">Paragraph</option>
								<option value="list">List</option>
								<option value="image">Image</option>
								{# <option value="html">html</option> #}
							</select>
						</div>
						<div id="contentBlockGroup">
							<div id="addLinkControls">
								<label for="contentBlock">Add link</label>
								<div class="input-group mb-2">
									<input type="text" id="linkName" class="form-control" placeholder="Name">
									<input type="text" id="linkUrl" class="form-control" placeholder="Url">
						    		<button class="btn btn-info btn-blog-options" id="btnAddLink" type="button">
						    			<i class="fas fa-code"></i> Add
						    		</button>
								</div>																		
							</div>
							<div class="form-group">
								<label for="btnSetBoldText">Style text (Select and apply)</label><br>
								<button class="btn btn-default" id="btnSetBoldText" type="button"><i class="fas fa-bold"></i></button>
								<button class="btn btn-default" id="btnSetItalicText" type="button"><i class="fas fa-italic"></i></button>								
							</div>
							<div class="form-group">								
								<label for="contentBlock">Content</label>
								<textarea id="contentBlock" class="form-control" placeholder="Paste your text"></textarea>
							</div>							
						</div>						
						<div id="imageBlockGroup">
							<div class="form-group">
								<label for="fileBlock">Image</label>
								<input type="file" id="fileBlock" class="form-control">
							</div>
							<div class="form-group">
								<label for="nameImageBlock">Name file | <small>Descriptive name, Separed-whit-hyphens</small></label>
								<input type="text" id="nameImageBlock" class="form-control">									
								<input type="hidden" name="currentIdBlock" id="currentIdBlock" value="">
							</div>
							<div class="form-group">
								<label for="altImageBlock">Alt | <small>Description in case fail the download image</small></label>
								<input type="text" id="altImageBlock" class="form-control">
							</div>
							<div class="form-group">
								<label for="titleImageBlock">Title of image</label>
								<input type="text" id="titleImageBlock" class="form-control">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary mb-0 btn-blog-options" id="btnModalBlock" @click="btnModalBlock">Add</button>
				</div>
			</div>
		</div>
	</div>
</div>	
{% endblock %}
{% block javascripts %}
	 <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<script type="text/javascript" src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
	 {% if app.environment != 'dev' %}    
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
    {% else %}
    <script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
    {% endif %}

	<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" defer></script>
    {{ encore_entry_script_tags('blogJS') }}
<script  type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

{% endblock %}