Default page

View File Name : new_blog.blade.php

@extends('layouts.app')

@section('content')
   <div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed main-content-narrow">
            <!--sidebar-->
            @include('layouts.sidebar')
            <!-- END Sidebar -->
            <!-- Top navbar -->
            @include('layouts.top_navbar')
            <!-- End Top Navbar-->

            <!-- Main Container -->
            <main id="main-container">
                <!-- Hero -->
                <div class="bg-body-light">
                    <div class="content content-full">
                        <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                            <h1 class="flex-sm-fill h3 my-2"> Blog </h1>
                            <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                                <ol class="breadcrumb breadcrumb-alt mb-0">
                                    <li class="breadcrumb-item">Blog</li>
                                    <li class="breadcrumb-item" aria-current="page">
                                        <a class="link-fx" href="">New</a>
                                    </li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
                <!-- END Hero -->
                      <!-- Page Content -->
                <div class="content p-0">
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <!-- Original -->
                <div class="row">
                    <div class="w-100">
                         <!-- The Modal -->

                            <!-- Modal Header -->
                                <div class="modal-header w-100">
                                    <h4 class="modal-title">New Blog</h4>
                                    <a href="{{route('blogs.create')}}" class="btn btn-primary btn-sm"> New Blog</a>
                                </div>

                                <!-- Modal body -->
                                <div class="modal-body">
                                    <form action="{{route('blogs.store')}}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-group">
                                            <label >Title</label>
                                            <input type="text" class="form-control" name="title" value="{{old('title')}}" required>
                                        </div>
                                        <div class="form-group">
                                            <label >Date</label>
                                            <input type="date" class="form-control" name="date" value="{{old('date')}}" required>
                                        </div>
                                        <div class="form-group">
                                            <label >Content</label>
                                            <!-- <input type="text" class="form-control" name="content" value="" required> -->
                                            <textarea cols="80" rows="10" class="form-control" id="content" name="content">{{old('content')}}</textarea>
                                            <script type="text/javascript">
                                            CKEDITOR.replace( 'content' );
                                            </script>
                                        </div>
                                        <div class="form-group">
                                            <label>Image</label>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input @error('cropped_image') is-invalid @enderror" id="image" name="image" accept="image/*" required onchange="readURL(this);">
                                                <label class="custom-file-label" for="image">Choose file</label>
                                            </div>
                                        </div>
                                        @error('cropped_image')
                                            <div class="alert alert-danger">{{ $message }}</div>
                                        @enderror
                                        <div class="form-group crop mb-5">
                                                <img id="blah" src="#" name="crop_image" alt="your image"/>
                                                <input name="cropped_image" type="hidden" required id="cropped_image" />
                                                <div id="cropped_result"></div>
                                                <button type="button" id="crop_button" class="mt-5 mb-5 btn btn-primary">Crop</button>
                                                <button type="button" id="reset" class="mt-5 mb-5 btn btn-danger">Reset</button>
                                        </div>
                                </div>
                                <div class="modal-footer">
                                    <a href="{{route('blogs.list')}}" class="btn btn-secondary" >Close</a>
                                    <button type="submit" class="btn btn-primary">Save changes</button>
                                </div>
                                </form>
                                </div>
                            </div>
                        </div>
                            <!-- END Original -->
                        </div>
                        <!-- END Page Content -->
                        </main>
                        <!-- END Main Container -->
                    </div>
                    <!-- END Page Container -->
            @endsection
            @section('script')
            <script>
                $('.crop').hide();
                $('#reset').hide();
                function readURL(input) {
                if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $('.crop').show();
                $('#blah').attr('src', e.target.result)
                };
                reader.readAsDataURL(input.files[0]);
                setTimeout(initCropper, 1000);
                }
                }
                function initCropper(){
                var image = document.getElementById('blah');
                var cropper = new Cropper(image, {
                aspectRatio: 730/411,
                crop: function(e) {
                }
                });
                document.getElementById('crop_button').addEventListener('click', function(){
                var imgurl =  cropper.getCroppedCanvas().toDataURL();
                var img = document.createElement("img");
                img.src = imgurl;
                img.style.cssText = "width:500px;height:350px;margin: 2rem;";
                document.getElementById("cropped_result").appendChild(img);
                $('#cropped_image').val(imgurl);
                $('#reset').show();
                $('#crop_button').hide();

                document.getElementById('reset').addEventListener('click', function(){
                    document.getElementById("cropped_result").appendChild(img).remove();
                    $('#reset').hide();
                    $('#crop_button').show();
                });

                });

                }

            </script>
            @endsection