@extends('backend.layouts.app')
@section('content')
<div class="container">
    <div class="row justify">
        <div class="col-xl-10 single-filed">
            <div class="block">
                <div class="block-header block-header-default">
                    <h3 class="block-title">Add Service</h3>
                    <div class="block-options">
                        <a href="{{route('service.list')}}" class="btn btn-sm btn-alt-primary">
                            <i class="fa fa-list mr-5"></i>Service List
                        </a>
                    </div>
                </div>
                <div class="block-content">
                    <form action="{{route('service.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-12" for="editor">Priority: </label>
                                    <div class="col-lg-12">
                                        <input type="number" min="0" name="priority" class="form-control" placeholder="Enter Priority">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-12">
                                <div class="form-group row">
                                    <div class="col-12">
                                        <label for="mega-lastname">Service Title <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-lg" name="title" required placeholder="Enter Service Title..">
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-md-6 col-12">
                                <div class="form-group row">
                                    <div class="col-12">
                                        <label for="mega-lastname">Meta Keyword </label>
                                        <input type="text" class="form-control form-control-lg" name="keyword" placeholder="Enter Meta Keyword..">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="form-group row">
                                    <div class="col-12">
                                        <label for="mega-lastname">Meta Description </label>
                                        <input type="text" class="form-control form-control-lg" name="description" placeholder="Enter Meta Description..">
                                    </div>
                                </div>
                            </div> -->
                            <div class="col-md-12 col-12">
                                <div class="form-group row">
                                    <div class="col-12">
                                        <label class="col-12" for="editor">Service Short Details: <span class="text-danger">*</span></label>
                                        <textarea name="short_details" rows="5" class="form-control" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-12">
                                <div class="form-group row">
                                    <div class="col-12">
                                        <label class="col-12" for="editor">Service Details: <span class="text-danger">*</span></label>
                                        <textarea name="details" id="summernote" class="form-control" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-md-6 col-12">
                                <div class="form-group row">
                                    <label class="col-12">Icon Logo <span class="text-danger">*</span></label>
                                    <div class="col-lg-12">
                                        <input type='file' class="form-group" name="logo" onchange="readURL2(this);" />
                                        <img id="blah2" src="/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.svg" height="200" width="250" alt="service" /><br>
                                    </div>    
                                </div>
                            </div> -->
                            <div class="col-md-6 col-12">
                                <div class="form-group row">
                                    <label class="col-12">Feature Image <span class="text-danger">*</span></label>
                                    <div class="col-lg-12">
                                        <input type='file' class="form-group" name="image" onchange="readURL(this);" />
                                        <img id="blah" src="/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.svg" height="200" width="250" alt="service" /><br>
                                    </div>    
                                </div>
                            </div>
                            <!-- <div class="col-md-12 col-12">
                                <div class="form-group row">
                                    <label class="col-12">Background Image <span class="text-danger">*</span></label>
                                    <div class="col-lg-12">
                                        <input type='file' class="form-group" name="bg_image" onchange="readURL3(this);" />
                                        <img id="blah3" src="/asset/backend_asset/assets/media/photos/file-image-svgrepo-com.svg" height="200" width="250" alt="service" /><br>
                                    </div>    
                                </div>
                            </div> -->
                        </div>

                        <div class="form-group row">
                            <div class="col-12 text-right">
                                <button type="submit" class="btn btn-alt-primary">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah')
                    .attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    function readURL2(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah2')
                    .attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    function readURL3(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#blah3')
                    .attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>
@endsection