@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 Image</h3>
                    <div class="block-options">
                        <a href="{{route('image.list')}}" class="btn btn-sm btn-alt-primary">
                            <i class="fa fa-list mr-5"></i>Service Image List
                        </a>
                    </div>
                </div>
                <div class="block-content">
                    <form action="{{route('image.store')}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                        	<div class="col-md-12 pt-3">
                                <label class="col-12" for="editor">Service Name: <span class="text-danger">*</span></label>
                                <div class="col-lg-12">
                                    <select class="form-control" name="concern_id" required>
                                    	<option value="">Select one</option>
                                    	@foreach($concerns as $concern)
                                    	<option value="{{$concern->id}}">{{$concern->concern_name}}</option>
                                    	@endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12 col-12 pt-3">
                                <label class="col-12">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.png" height="200" width="250" alt="product" /><br>
                                </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]);
        }
    }
</script>
@endsection