<x-app-layout>
    @section('title')
        Pages Create
    @endsection
    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">
        @can('Page access')
            <a href="{{ route('admin.pages.index') }}" class="btn btn-primary"><i class="fas fa-plus" aria-hidden="true"></i>
                Pages Listing
            </a>
        @endcan
    </h1>

    <!-- DataTales Example -->
    <form action="{{ route('admin.pages.store') }}" method="post" enctype="multipart/form-data" role="form" novalidate class="needs-validation">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="title" class="mb-0">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" required/>
                            @error('title')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="content" class="mb-0">Content <span class="text-danger">*</span></label>
                            <textarea name="content" id="content" class="summernote"></textarea>
                        </div>
                    </div>
                </div>

                <div class="card shadow mb-4">
                    <div class="card-body">
                        <div class="form-group">
                            <label for="meta_title" class="mb-0">Meta Title <span class="text-danger">*</span></label>
                            <input type="text" name="meta_title" class="form-control" />
                        </div>

                        <div class="form-group">
                            <label for="meta_description" class="mb-0">Meta Description <span class="text-danger">*</span></label>
                            <textarea name="meta_description" id="meta_description" class="form-control" rows="4" cols="4"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="content" class="mb-0">Keywords <span class="text-danger">*</span></label>
                            <textarea name="meta_keywords" id="meta_keywords" class="form-control" rows="4" cols="4"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="meta_image" class="mb-0">Meta Image <span class="text-danger">*</span></label>
                            <input type="file" name="meta_image" id="meta_image" class="form-control mb-2">

                            <div style="display: none" id="showimage">
                                <img id="metaimagePrev" class="img-fulid" width="120px" height="120px" style="border: 1px dotted #000" src="#">
                            </div>
                        </div>

                        <div class="justify-content-end row">
                            <button class="btn btn-primary btn-lg">Save</button>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </form>

    @section('script')
    <script>
        $(document).ready(()=>{

          // Meta Image Image
          $('#meta_image').change(function(){
            const file = this.files[0];
            console.log(file);
            if (file){
              let reader = new FileReader();
              reader.onload = function(event){
                console.log(event.target.result);
                $('#metaimagePrev').attr('src', event.target.result);
                $('#showimage').css('display','block');
              }
              reader.readAsDataURL(file);
            }
          });

        });

        $('document').ready(function() {
            $('textarea').each(function() {
                $(this).val($(this).val().trim());
            });
        });

    </script>
    @endsection

</x-app-layout>
