@extends('layouts.app')
@section('title',config('setting.site_name').' - Blog Add')
@section('content') 

<div class="content">
	
	<!-- Start Content-->
	<div class="container-fluid">
		
		<!-- start page title -->
		<div class="row">
			<div class="col-12">
				<div class="page-title-box">
					<div class="page-title-right">
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item"><a href="javascript: void(0);">{{config('setting.site_name')}}</a></li>
							<li class="breadcrumb-item active">Blog Add</li>
						</ol>
					</div>
					<h4 class="page-title">Blog Add</h4>
				</div>
			</div>
		</div>     
		<div class="row">
			<div class="col-md-12">
				<div class="card-box"> 
					<form action="{{route('blog.store')}}" method="post" enctype="multipart/form-data">
					@csrf
						<div class="form-row">
							<div class="form-group col-md-12">
								<label for="inputEmail4" class="col-form-label">Title</label>
								<input type="text" class="form-control" id="title" name="title" placeholder="title" required>
							</div>
							<div class="form-group col-md-6">
								<label for="inputEmail4" class="col-form-label">Slug</label>
								<input type="text" class="form-control" id="slug" name="slug" placeholder="Slug" required>
							</div>
							<div class="form-group col-md-6">
								<label for="inputPassword4" class="col-form-label">Image</label>
								<input type="file" class="form-control" id="image" name="image" required>
							</div>
						</div>
						<div class="form-group">
							<label for="inputAddress" class="col-form-label">Html Description</label>
							<textarea class="form-control" id="description" name="description" required></textarea>
						</div>
						<div class="form-row">
							<div class="form-group col-md-6">
								<label for="inputEmail4" class="col-form-label">Meta Title</label>
								<input type="text" class="form-control" id="meta_title" name="meta_title" placeholder="Meta Title" >
							</div>
							<div class="form-group col-md-6">
								<label for="inputEmail4" class="col-form-label">Meta Keyword</label> 
								<input id="meta_keyword" name="meta_keyword" class="form-control" multiple data-role="tagsinput" required>  
							</div>
							<div class="form-group col-md-6">
								<label for="inputEmail4" class="col-form-label">Meta Description</label> 
								<textarea class="form-control" id="meta_description" name="meta_description" placeholder="Meta Description" required></textarea>
							</div> 
							<div class="form-group col-md-6">
								<label for="inputState" class="col-form-label">Status</label>
								<select id="status" name="status" class="form-control select2"> 
									<option value="1">Active</option>
									<option value="0">In-Active</option>
								</select>
							</div>
						</div>
						<button type="submit" class="btn btn-primary">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</div> <!-- end container-fluid -->
	
</div> <!-- end content -->

@endsection  
@push('js') 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
<script>
	$(document).ready(function() {
		$('#description').summernote({
			height: 300, // set editor height
			minHeight: null, // set minimum height of editor
			maxHeight: null, // set maximum height of editor
			focus: true // set focus to editable area after initializing summernote
		});
		
		$('#title').keyup(function() 
		{
			var title = $(this).val();
			var slug = title.toLowerCase().replace(/\s+/g, '-');;
			$('#slug').val(slug);	
		});
	});
</script>
@endpush