@extends('template.template')
@section('title','Blog')
@section('main')

@foreach($blog as $b)
<div class="main">
	<h2><strong>Tambah Blog</strong></h2>
	<hr><br>
	<div class="data-content">
		<form action="{{ route('blogupdate') }}" method="post" enctype="multipart/form-data">
			@csrf
			<div class="float-start col-lg-9 col-md-8 col-12 border">
				<div class="p-2">
					<div class="form-group">
						<input type="hidden" name="id_blog" class="form-control" value="{{$b->id}}">
						<label><strong>Edit Blog</strong></label>
						<input type="text" name="judul_blog" class="form-control" value="{{$b->judul}}" required>
					</div>
					<hr class="m-2">
					<div class="form-group">
						<label><strong>Content</strong></label>
						<textarea style="min-height: 100vh;" id="ckeditor" class="ckeditor" required name="content">{{ $b->content }}</textarea>
					</div>	
					<div class="form-group">
						<input type="submit" value="Simpan" class="form-control black mt-2">
					</div>	
				</div>
			</div>
			<div class="float-start col-lg-3 col-md-4 col-12 border">
				<div class="p-2">
					<div class="form-group">
						<label><strong>Author</strong></label>
						<input type="text" name="author" class="form-control" value="{{$b->author}}" required>
					</div>
					<hr class="m-1">
					<div class="form-group">
						<label><strong>Tanggal Dibuat</strong></label>
						<input type="datetime-local" name="created_at" class="form-control" required value="{{$b->change}}">
					</div>
					<hr class="m-1">
					<div class="form-group">
						<img src="{{ asset('mystyle/image/blog/'.$b->featured_image) }}" class="w-100" id="image">
						<label><strong>Featured Image</strong></label>
						<input type="file" id="featured" name="featured" class="form-control">
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</form>
	</div>
</div>
@endforeach

<script type="text/javascript">
	let icon = document.getElementById('featured')
	let imagefet = document.getElementById('image')

	icon.addEventListener('change', function () {
        gambar(this);
    })

    function gambar(a) {
        if (a.files && a.files[0]) {     
            var reader = new FileReader();    
            reader.onload = function (e) {
                imagefet.src=e.target.result;
            }    
            reader.readAsDataURL(a.files[0]);
        }
    }
</script>
@endsection