{% extends 'base.html.twig' %}
{% block title %}Author Panel - Novamar Insurance México{% endblock %}
{% block metas %}
	<meta name="robots" content="noindex,nofollow" /> 
	
{% endblock %}
{% block css %}	
{# {{encore_entry_link_tags('blog')}} #}
{{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">
<style type="text/css">
@media (max-width: 920px) {
    .blog-table {
		width: 850px!important;
    }
}
</style>
{% endblock %}
{% block body %}
<div id="main" data-post-slug="{{ url('blog_home') }}">
	<div class="container mt-4 posts">
		<div class="row">
			<div class="col-3">
				<h2>Author 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">
		<div class="row">
			<div class="col-12  table-responsive">
				<table class="table table-striped blog-table" id="postsList" :data="posts">
					<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 posts" :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 tags" :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 categories" :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>	    
					</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 class="container editor d-none blog-panel-post">		
		<div class="row">						
			<div class="col-xl-1 col-lg-1 col-md-12 col-sm-12 col-xs-12">
			</div>
			<div class="col-xl-10 col-lg-10 col-md-12 col-sm-12 col-xs-12">
				<div class="row" id="blocks">
					<h2 class="mb-0 p-2">Post design are empty, add a block</h2>
				</div>				
			</div>
			<div class="col-xl-1 col-lg-1 col-md-12 col-sm-12 col-xs-12">
			</div>
		</div>		
	</div>	
	<div class="fixedBottomControls editor d-none">
		<div class="row">
		    <div class="col-2">
		    </div>
		    <div class="col-8">
				<form class="form d-flex">
					<div class="form-group me-2">
						<button class="btn btn-primary btn-blog w-100" id="btnAddBlock" @click="btnAddBlock" type="button">
							<i class="fas fa-th"></i> Add block
						</button>
					</div>
					<div class="form-group me-2">
						<button class="btn btn-light btn-blog-options w-100" id="btnAdjustPanel" type="button">
							<i class="fas fa-arrows-alt"></i> Expand
						</button>
					</div>
					<div class="d-flex align-items-center editorBlockControls text-start d-none me-2">
						<label for="editorWidth" class="me-1">Width</label>
						<input type="number" value="0" id="editorWidth" class="form-control">	
					</div>
					<div class="d-flex align-items-center editorBlockControls text-start d-none me-2">
						<label for="editorAlign" class="me-1">Align</label>
						<select id="editorAlign" class="form-control">
							<option value="left">Left</option>
							<option value="center">Center</option>
							<option value="right">Right</option>							
						</select>
					</div>					
					<div class="form-group editorBlockControls d-none me-2">
						<button class="btn btn-success btn-blog-options w-100" id="btnEditBlock" type="button">
							<i class="far fa-edit"></i> Edit
						</button>
					</div>
					<div class="form-group editorBlockControls d-none me-2">
						<button class="btn btn-danger btn-blog-options w-100" id="btnRemoveBlock" type="button">
							<i class="fas fa-ban"></i> Remove
						</button>
					</div>
					<div class="form-group editorBlockControls d-none me-2">
						<button class="btn btn-info btn-blog-options w-100" id="btnMoveUpBlock" type="button">
							<i class="fas fa-arrow-up"></i> Move up
						</button>
					</div>
					<div class="form-group editorBlockControls d-none">
						<button class="btn btn-info btn-blog-options w-100" id="btnModeDownBlock" type="button">
							<i class="fas fa-arrow-down"></i> Move down
						</button>
					</div>					
				</form>		
			</div>
		</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 javascript %}
	 <!-- 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('blogAuthJS') }}
<script>
</script>
{% endblock %}