@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">Update Page</h2>
                <div class="card shadow mb-4">

                    <form action="{{ route('admin.update_page', ['key' => @$page->page_key]) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <div id="imagePreview">
                                        @if (!empty(@$page->image))
                                            <img height="160" src="{{ asset($page->image) }}" alt="" srcset="">
                                        @endif
                                    </div>
                                    <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 class="col-md-12">
                                    <div class="form-group mb-3">
                                        <label for="meta_title">Meta Title</label>
                                        <input name="meta_title" value="{{ old('meta_title', @$page->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', @$page->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('keywords', @$page->meta_keywords) }}</textarea>

                                        @error('meta_keywords')
                                            <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