@extends('dashboard::master')
{{--
    Autor: Giovanni López O.
    @gmlo_89
--}}
@section('head')
	
@stop

@section('content')
	<header>
		<h1 class="module-title"><span class="glyphicon glyphicon-align-left"></span>{{ $title }} <small>{{ $category->title }}</small></h1>
    </header>
    {{ Alert::render() }}
    <div class="row btn-bar">
    	<div class="btn-group pull-left">
			<a href="{{ url('admin/articles/'.$category->id) }}" class="btn btn-default">{{ trans('dashboard::label.go_back') }}</a>
		</div>
		<button tyle="button" data-click="submit" data-target="#frmPrincipal" class="btn btn-info pull-right">{{ trans('dashboard::label.save') }}</button>
    </div>
   
    {{ Form::model($article, $formOptions) }}
    	<div class="panel panel-default">
			<div class="panel-heading"><span class="glyphicon glyphicon-th-list"></span> {{ trans('articles::label.module_name') }}</div>
			<div class="panel-body">
				<div class="form-group">
					<label for="inputTitle" class="col-sm-2 control-label">{{ trans('articles::label.title') }}</label>
					<div class="col-sm-10">
						{{ Form::text('title', null, 
									array(
										"class" 		=> "form-control required",
										"id" 			=> "inputTitle",
										"placeholder"	=> trans('articles::label.title')
								)) }}
					</div>
				</div>


				<!-- Nav tabs -->
			    <ul class="nav nav-tabs">
			    	<li class="active"><a href="#content" data-toggle="tab">{{ trans('articles::label.content') }}</a></li>
			    	<li><a href="#publishing" data-toggle="tab">{{ trans('articles::label.publishing') }}</a></li>
			    	<li><a href="#galleries" data-toggle="tab">{{ trans('articles::galleries.gallery') }}</a></li>
			    </ul>

			    <!-- Tab panes -->
			    <div class="tab-content">
			    	<div class="tab-pane active" id="content">
			    		<div class="row">
			    			<div class="col-md-8">
			    				<div class="form-group">
									{{ Form::textarea('full_text', null, 
										array(
											"class" 		=> "form-control editor-html",
											"id" 			=> "exampleInputContent"
									)) }}
								</div>
			    			</div>
			    			<div class="col-md-4">
			    				
			    				<div class="form-group">
			    					<label for="exampleIntroText">{{ trans('articles::label.intro_text') }}</label>
									{{ Form::textarea('intro_text', null, 
										array(
											"class" 		=> "form-control",
											"id" 			=> "exampleIntroText",
											"rows"			=> 2
									)) }}
								</div>
				    			
			    				<div class="form-group">
									<label for="exampleIntroImage">{{ trans('articles::label.intro_image') }}</label>
									@if(!empty($article->intro_image))
										<div class="row">
											<div class="col-md-3">
												<img class="img-responsive" src="{{ asset($article->intro_image) }}">
											</div>
											<div class="col-md-9">
												<div class="checkbox">
													<label>
														<input name="change-intro-image" type="checkbox"> {{ trans('articles::label.change_image') }}
													</label>
												</div>
												<a class="fancybox" href="{{ asset($article->intro_image) }}"> <span class="glyphicon glyphicon-zoom-in"></span> {{ trans('articles::label.show_image') }}</a>
											</div>
										</div>
									@endif
									{{ Form::file('intro_image') }}
								</div>
								<div class="form-group hide">
									<label for="exampleIntroImage">{{ trans('articles::label.large_image') }}</label>
									@if(!empty($article->large_image))
										<div class="row">
											<div class="col-md-3">
												<img class="img-responsive" src="{{ asset($article->large_image) }}">
											</div>
											<div class="col-md-9">
												<div class="checkbox">
													<label>
														<input name="change-large-image" type="checkbox"> {{ trans('articles::label.change_image') }}
													</label>
												</div>
												<a class="fancybox" href="{{ asset($article->large_image) }}"> <span class="glyphicon glyphicon-zoom-in"></span> {{ trans('articles::label.show_image') }}</a>
											</div>
										</div>
									@endif
									{{ Form::file('large_image') }}
								</div>
								{{ Form::hidden('category_id', $category->id) }}
								<div class="form-group">
									<label for="exampleInputState">{{ trans('articles::label.state') }}</label>
									{{ Form::select('state', $states, null, 
										array(
											"class" => 	"form-control",
											"id" 	=>	"exampleInputState"
										)) 
									}}
								</div>
								<div class="form-group hide">
									<label for="exampleInputLanguage">{{ trans('articles::label.language') }}</label>
									{{ Form::select('language', $languages, null, 
										array(
											"class" => 	"form-control",
											"id" 	=>	"exampleInputLanguage"
										)) 
									}}
								</div>
								@if($article->exists)
					    			<div class="form-group">
				    					<button type="button" id="btnDeleteArticle" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span> {{ trans('articles::label.delete_article') }}</button>
						    		</div>
					    		@endif
			    			</div>
			    		</div>
			    	</div>
			    	<div class="tab-pane" id="publishing">
			    		<div class="row">
			    			<div class="col-md-6">
			    				<div class="form-group">
									<label for="inputCreatedDate" class="col-sm-4 control-label">{{ trans('articles::label.created_date') }}</label>
									<div class="col-sm-8">
										<div class="input-group">
											<input name="created" type="text" 
											value="{{ $article->created->timestamp <= 0 ? '' : date('Y-m-d', $article->created->timestamp) }}" class="form-control" id="inputCreatedDate" data-provide="datepicker"
												data-date-format="yyyy-mm-dd" data-date-autoclose="true" >
											
									        <span class="input-group-addon glyphicon glyphicon-calendar"></span>
									    </div>
									</div>
								</div>
			    				<div class="form-group">
									<label for="inputStartPublishing" class="col-sm-4 control-label">{{ trans('articles::label.start_publishing') }}</label>
									<div class="col-sm-8">
										<div class="input-group">
											<input name="publish_up" type="text" 
											value="{{ (!$article->exists or $article->publish_up->timestamp <= 0) ? '' : date('Y-m-d', $article->publish_up->timestamp) }}" class="form-control" id="inputStartPublishing" data-provide="datepicker"
												data-date-format="yyyy-mm-dd" data-date-autoclose="true" >
									        <span class="input-group-addon glyphicon glyphicon-calendar"></span>
									    </div>
									</div>
								</div>
								<div class="form-group">
									<label for="inputFinishPublishing" class="col-sm-4 control-label">{{ trans('articles::label.finish_publishing') }}</label>
									<div class="col-sm-8">
										<div class="input-group">
											<input name="publish_down" type="text" 
											value="{{ (!$article->exists or $article->publish_down->timestamp <= 0) ? '' : date('Y-m-d', $article->publish_down->timestamp) }}" class="form-control" id="inputFinishPublishing" data-provide="datepicker"
												data-date-format="yyyy-mm-dd" data-date-autoclose="true" >
											
											<span class="input-group-addon glyphicon glyphicon-calendar"></span>
									    </div>
									</div>
								</div>
								<div class="form-group">
									<label for="inputCreatedBy" class="col-sm-4 control-label">{{ trans('articles::label.created_by') }}</label>
									<div class="col-sm-8">
										<div class="input-group">
											{{ Form::hidden('created_by', null, 
												array(
													"class" 		=> "",
													"id" 			=> "IDCreatedBy"
											)) }}
											{{ Form::text('name_created_by', null, 
												array(
													"class" 		=> "form-control required",
													"id" 			=> "inputCreatedBy"
											)) }}
											<span class="input-group-btn">
												<button class="btn btn-default" data-toggle="modal" data-target="#modalSelectUser" type="button"><span class="glyphicon glyphicon-user"></span></button>
											</span>
										</div>
										
									</div>
								</div>
								<div class="form-group">
									<label for="inputCreatedByAlias" class="col-sm-4 control-label">{{ trans('articles::label.created_by_alias') }}</label>
									<div class="col-sm-8">
										{{ Form::text('created_by_alias', null, 
											array(
												"class" 		=> "form-control ",
												"id" 			=> "inputCreatedByAlias"
										)) }}
									</div>
								</div>
			    			</div>
			    			<div class="col-md-6">
			    				<div class="form-group">
									<label for="inputMetaDescription" class="col-sm-2 control-label">{{ trans('articles::label.meta_description') }}</label>
									<div class="col-sm-10">
										{{ Form::textarea('metadesc', null, 
											array(
												"class" 		=> "form-control ",
												"id" 			=> "inputMetaDescription",
												"rows"			=> 3
										)) }}
									</div>
								</div>
								<div class="form-group">
									<label for="inputMetaKeywords" class="col-sm-2 control-label">{{ trans('articles::label.meta_keywords') }}</label>
									<div class="col-sm-10">
										{{ Form::textarea('metakey', null, 
											array(
												"class" 		=> "form-control ",
												"id" 			=> "inputMetaKeywords",
												"rows"			=> 3
										)) }}
									</div>
								</div>
			    			</div>
			    		</div>
			    	</div>
			    	<div class="tab-pane" id="galleries">
			    		<div class="row">
			    			<div class="col-md-12">
			    				<div class="well">
				    				<legend>{{ trans('articles::galleries.add_new') }}</legend>
				    				<div class="form-group">
										<label for="inputGalleryTitle" class="col-sm-2 control-label">{{ trans('articles::galleries.title') }}</label>
										<div class="col-sm-10">
											<input type="text" name="_galleryItemTitle" class="form-control" id="inputGalleryTitle">
										</div>
									</div>
									<div class="form-group">
										<label for="inputGalleryType" class="col-sm-2 control-label">{{ trans('articles::galleries.type') }}</label>
										<div class="col-sm-10">
											{{ Form::select('_galleryItemType', $galleryTypes, null, 
												array(
													"class" => 	"form-control",
													"id" 	=>	"inputGalleryType"
												)) 
											}}
										</div>
									</div>
									<div class="form-group video" >
										<label for="inputVideoID" class="col-sm-2 control-label">{{ trans('articles::galleries.video_id') }}</label>
										<div class="col-sm-10">
											<input type="text" name="_galleryItemVideoID" class="form-control" id="inputVideoID">
										</div>
									</div>
									<div class="form-group image">
										<label for="inputVideoID" class="col-sm-2 control-label">{{ trans('articles::galleries.image') }}</label>
										<div class="col-sm-10">
											<div class="input-group">
												<input type="text" name="_galleryItemImage" id="inputGalleryImage" readonly class="form-control">
												<span class="input-group-btn">
													<button id="btnSelectImage" class="btn btn-default" type="button">{{ trans('articles::galleries.select_image') }}</button>
												</span>
											</div>
										</div>
									</div>
									<div class="form-group">
										<div class="col-sm-offset-2 col-sm-10">
											<button type="button" id="btnAddGalleryItem" class="btn btn-primary">{{ trans('articles::galleries.add') }} <span class="glyphicon glyphicon-arrow-down"></span></button>
										</div>
									</div>
								</div>
								<div class="well">
									<table id="galleryTable" class="table table-bordered">
										<thead>
											<tr>
												<th width="40px"></th>
												<th>{{ trans('articles::galleries.title') }}</th>
												<th width="120px">{{ trans('articles::galleries.preview') }}</th>
											</tr>
										</thead>
										<tbody>
											@foreach ($gallery_items as $item)
												<tr>
													<td>
														<button type="button" title="delete item" class="delete_gallery_item btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
													</td>
													<td>
														{{ $item->title }}
														<input type="hidden" name="galleryItemTitle[]" value="{{ $item->title }}" >
														<input type="hidden" name="galleryItemType[]" value="{{ $item->type }}" >
														<input type="hidden" name="galleryItemResource[]" value="{{ $item->resource }}">
													</td>
													<td>
														@if($item->type == 'image')
															<a href="{{ $item->url }}" class="fancybox">
														@else
															<a href="{{ $item->url }}" target="_blank">
														@endif
															<img src="{{ $item->image }}" width="100px" >
														</a>
													</td>
												</tr>
											@endforeach
										</tbody>
									</table>
								</div>
			    			</div>
			    		</div>
			    	</div>
			    </div>
			</div>
		</div>
	    
	</form>
	<!-- Modal - Seleccionar usuario -->
	<div class="modal fade" id="modalSelectUser" tabindex="-1" role="dialog" aria-labelledby="modalSelectUserLabel" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="modalSelectUserLabel">{{ trans('users::label.select_user') }}</h4>
				</div>
				<div class="modal-body">
					<table class="table table-hover table-bordered" id="tablaUsers">
						<thead>
							<tr>
								<th>{{ trans('users::label.username') }}</th>
								<th>{{ trans('users::label.name') }}</th>
								<th>{{ trans('users::label.email') }}</th>
								<th>{{ trans('users::label.status') }}</th>
							</tr>
						</thead>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">{{ trans('dashboard::label.cancel') }}</button>
				</div>
			</div>
		</div>
	</div>
@stop

@section('scripts')
	{{ JavaScript::makeVar('msg_confirm_delete', trans('articles::message.confirm_delete_article')) }}
	{{ JavaScript::makeVar('msg_confirm_delete_item', trans('articles::galleries.confirm_delete_item')) }}
	<script>
		// Para eliminar un usuario se muestra un cuadro de dialogo
		$('#btnDeleteArticle').click(function(event) {
			bootbox.confirm(inncore.msg_confirm_delete, function(result) {
				if(result)
				{
					$("#frmPrincipal input, #frmPrincipal textarea, #frmPrincipal select").rules("remove");
					$("#frmPrincipal input[name='_method']").val("DELETE");
					$("#frmPrincipal").submit();
				}
			});
		});
		



		$('#frmPrincipal').validate();


		// Seleccionar un usuario
		$('#tablaUsers').dataTable({
	    	"oLanguage": {
	    		"sUrl": inncore.lang_dir+"datatables.txt"
	    	},
	    	"bProcessing": true,
	        "bServerSide": true,
	        "sAjaxSource": "/admin/users/tabla-ajax"
	    }).on('click', 'td:not(.dataTables_empty)', function(event) {
			var id = $(this).parent().find('input.id').val();
			
			$('#IDCreatedBy').val(id);
			
			
			$('#inputCreatedBy').val($(this).parent().find('.text_val').text());
			$('#modalSelectUser').modal('hide');
		});
		
		$('#inputGalleryType').change(function(event) {
			selectGalleryType();			
		});

		selectGalleryType();

		function selectGalleryType()
		{
			if($('#inputGalleryType option:selected').val() == 'video') {
				$('.form-group.video').removeClass('hide');
				$('.form-group.image').addClass('hide');
			}
			else {
				$('.form-group.image').removeClass('hide');
				$('.form-group.video').addClass('hide');
			}
		}


		$('#btnAddGalleryItem').click(function(event) {
			var title 	= $('#inputGalleryTitle').val();
			var type 	= $('#inputGalleryType').val(); 
			var strType 	= $('#inputGalleryType').text(); 
			var resource = $('#inputGalleryImage').val();
			if(type == 'video') {
				resource = $('#inputVideoID').val();
			}
			var image, url, fancyclass;

			if(type == 'image') {
				image 	= resource;
				url 	= resource;
				fancyclass = 'fancybox';
			}
			else {
				image 	= 'http://img.youtube.com/vi/'+resource+'/0.jpg';
				url 	= 'https://www.youtube.com/watch?v='+resource;
				fancyclass = '" target="_blank';
			}

			var row = '<tr>'+
						'<td><button type="button" title="delete item" class="delete_gallery_item btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button></td>'+
						'<td>'+
							title+
							'<input type="hidden" name="galleryItemTitle[]" value="'+title+'" >'+
							'<input type="hidden" name="galleryItemType[]" value="'+type+'" >'+
							'<input type="hidden" name="galleryItemResource[]" value="'+resource+'" >'+
						'</td>'+
						'<td><a href="'+url+'" class="'+fancyclass+' "><img src="'+image+'" width="100px" ></a></td>'+
					'</tr>';
			$('#galleryTable tbody').append(row);

			addDeleteItemEvent();


			$('#galleries.tab-pane input[type="text"]').val('');
		});

		addDeleteItemEvent();


		function addDeleteItemEvent()
		{
			$('.delete_gallery_item').unbind("click");
			$('.delete_gallery_item').click(function(event) {
				var row = $(this).parent().parent();
				bootbox.confirm(inncore.msg_confirm_delete_item, function(result) {
					if(result)
					{
						row.remove();
					}
				});
			});
		}


		var dialog;
		$('#btnSelectImage').click(function () {
			tinymce.activeEditor.windowManager.open({
			    file: '/elfinder/tinymce',// use an absolute path!
			    title: 'elFinder 2.0',
			    width: 900,
			    height: 450,
			    resizable: 'yes'
			  }, {
			    setUrl: function (url) {
			      $('#inputGalleryImage').val(url);
			    }
			});
		});


		$(document).ready(function() {
		    
		});
	</script>

@stop