@extends('layouts.admin')
@section('content-title')
	{{ __('articles.new Article') }}
@endsection
@section('content-breadcrumbs')
	{{ Breadcrumbs::render('admin.articles.create')}}
@endsection
@section('css')
	<link rel="stylesheet" href="/assets/plugins/trumbowyg/ui/trumbowyg.min.css">
	<link href="/assets/plugins/jquery.filer/css/jquery.filer.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" />
	<style type="text/css">
		/* Upload File */
		.custom-file-label{
			font-size: 1rem; 
			color: #747d86;
			font-weight: 400;
		}
		.custom-file-label::after {
			content: '{{__("events.Browse")}}';
		}
		/* Image Preview  */
		#img-upload{
			width: auto;
			height: 150px;
		}
		/* Select2 Categories */
		.select2 {
			width: 100% !important;
		}
		.select2-container--default .select2-selection--multiple .select2-selection__choice {
			background-color: #0f9df7;
			border-color:  #0f9df7;
			color: white;
			padding-bottom: 4px;
			font-weight: 700;
		}
		.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
			color: white;
		}
		/* Save button */
		#my-btn {
			padding-top: 4px;
		}
	</style>
@endsection
@section('content')
<div class="card-box tilebox-one noradius">
	<h2 class="page-header">{{ __('articles.new Article') }}</h2>
	{!!Form::open()->locale('articles')->post()->multipart()->route('admin.article.store')!!}
	<div class="row mb-3">
		<div class="col-sm-6">
			{!!Form::text('title', 'Title')->placeholder(__('articles.Title'))!!}
		</div>
	</div>
	<div class="row mb-3">
		<div class="col-sm-6">
			<label for="article-image">{{ __('articles.Article Image') }}</label>
			<div id="article-image" class="input-group">          
				<div class="custom-file">
					<span class="btn-file">
						{!!Form::file('photo')->attrs(['class' => 'custom-file-input', 'aria-describedby' => 'inputGroupFileAddon01'])->id("inputGroupFile01")!!}
						<label class="custom-file-label" for="inputGroupFile01">{{ __('articles.Edit file') }}</label>
					</span>
				</div>
			</div>              
		</div>
	</div>
	<div class="row mb-3">      
		<div class="col-sm-5 pl-3">
			<img id='img-upload'/>
		</div>
	</div>
	<div class="row mb-3">
		<div class="col-sm-12">
			{!!Form::textarea('shortDecs', 'shortDecs')->placeholder(__('articles.Short Description'))!!}
		</div>
	</div>
	<div class="row mb-3">
		<div class="col-sm-12">
			{!!Form::textarea('corp', 'Body')->attrs(['class' => 'editor'])->placeholder(__('articles.Body'))!!}
		</div>
	</div>
	<div class="row mb-3">
		<div class="col-sm-6">
			<div class="form-group">
				<label for="categories">{{ __('articles.Select categories') }}</label>
				<select name="categories_id[]" id="categories" class="form-control" multiple="multiple">
				@foreach($categories as $key => $category)
					<option value="{{ $category->id }}">{{ $category->category_name }}</option>
				@endforeach
				</select>
			</div>
		</div> 
	</div>
	<div class="row mb-3">
		<div class="col-sm-4">
			{!!Form::submit('Save')->id('my-btn')!!}
		</div>
	</div>
	{!!Form::close()!!}
</div>
@endsection
@section('js')
<script src="/assets/plugins/trumbowyg/trumbowyg.min.js"></script>
{{-- Select2 --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$(document).ready(function () {
	//TextArea Editor
	'use strict';
	$('.editor').trumbowyg({
		svgPath: "/assets/plugins/trumbowyg/ui/icons.svg"
	});
	//Upload File JS
	$(document).on('change', '.btn-file :file', function() {
	var input = $(this),
		label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
		input.trigger('fileselect', [label]);
	});

	function readURL(input) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			
			reader.onload = function (e) {
				$('#img-upload').attr('src', e.target.result);
			}
			
			reader.readAsDataURL(input.files[0]);
		}
	}

	$("#inputGroupFile01").change(function(){
		readURL(this);
	});
	// 

	//Select2
	$('#categories').select2({
		placeholder : '{{ __("articles.Please select category")}}',
		tags: true,
	});
});
</script>
@endsection