@extends('admin.includes.main')
@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-12">
                <h2 class="page-title menu-head">Add Service</h2>
                <div class="card shadow mb-4">
                    @if (@$service)
                    <form action="{{ route('admin.update_service', ['slug' => $service->slug]) }}" method="POST" enctype="multipart/form-data">
                    @else
                    <form action="{{ route('admin.post_service') }}" method="POST" enctype="multipart/form-data">
                    @endif

                        @csrf
                        <div class="card-body">
                            <div class="row">

                                <div class="col-md-8">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label for="name">Name</label>
                                                <input name="name" value="{{ old('name', @$service->name) }}" required type="text"
                                                    id="name" class="form-control @error('name') is-invalid @enderror">
                                                @error('name')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label for="slug">Slug</label>
                                                <input name="slug" value="{{ old('slug', @$service->slug) }}" required type="text"
                                                    id="slug" class="form-control @error('slug') is-invalid @enderror">
                                                @error('slug')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group mb-3">
                                                <label for="meta_title">Meta Title</label>
                                                <input name="meta_title" value="{{ old('meta_title', @$service->meta_title) }}" required type="text"
                                                    id="meta_title" class="form-control @error('meta_title') is-invalid @enderror">
                                                @error('meta_title')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="meta_description">Meta Description</label>
                                                <textarea class="form-control @error('meta_description') is-invalid @enderror" name="meta_description" id="meta_description" cols="30" rows="10">{{ old('meta_description', @$service->meta_description) }}</textarea>

                                                @error('meta_description')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="meta_keywords">Meta Keywords</label>
                                                <textarea name="meta_keywords" class="form-control  @error('meta_keywords') is-invalid @enderror" name="meta_keywords" id="meta_keywords" cols="30" rows="10">{{ old('meta_keywords', @$service->meta_keywords) }}</textarea>

                                                @error('meta_keywords')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>



                                </div>
                                <div class="col-md-4">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div id="iconPreview">
                                                @if (!empty(@$service->icon))
                                                    <img height="160" src="{{ asset($service->icon) }}" alt="" srcset="">
                                                @endif
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div id="imagePreview">
                                                @if (!empty(@$service->image))
                                                    <img height="160" src="{{ asset($service->image) }}" alt="" srcset="">
                                                @endif
                                            </div>
                                            {{-- <canvas id= "canv1" style="height: 100px;"></canvas> --}}
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="icon">Icon (75x75)</label>
                                                <input type="file" name="icon" multiple="false" ref="iconPreview" class="form-control imageUpload @error('icon') is-invalid @enderror" accept="image/*" id="icon">
                                                @error('icon')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-3">
                                                <label for="image">Image</label>
                                                <input type="file" name="image" multiple="false" ref="imagePreview" class="form-control imageUpload @error('image') is-invalid @enderror" accept="image/*" id="image">
                                                @error('image')
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $message }}</strong>
                                                    </span>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="col-12">
                                    <div class="form-group mb-3">
                                        <label for="short_description">Short Description</label>
                                        <textarea class="form-control tinymce @error('short_description') is-invalid @enderror" name="short_description" id="short_description" cols="30" rows="10">{{ old('short_description', @$service->short_description) }}</textarea>

                                        @error('short_description')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mb-3">
                                        <label for="description">Description</label>
                                        <textarea class="form-control tinymce @error('description') is-invalid @enderror" name="description" id="description" cols="30" rows="10">{{ old('description', @$service->description) }}</textarea>

                                        @error('description')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <input type="submit" value="{{ 'Save' }}" class="btn btn-success float-right">
                                </div>
                            </div>
                        </div>
                    </form>
                </div> <!-- / .card -->

            </div> <!-- .col-12 -->
        </div> <!-- .row -->
    </div>

    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var output = $(input).attr('ref');
                    let img = document.createElement('img');
                    img.src = e.target.result;
                    img.height=160;
                    $('#'+output).html(img);
                    $('#'+output).hide();
                    $('#'+output).fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $(".imageUpload").change(function() {
            readURL(this);
        });
    </script>
@endsection