@extends('admin.layouts.main')

@section('title', 'Edit Post')

@section('menu', 'Post')

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/metronic/plugins/custom/summernote/summernote-lite.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/metronic/plugins/custom/summernote/custom-summernote.css') }}">
@endpush

@section('content')
<!--begin::Container-->
<div id="kt_content_container" class="app-container container-fluid">
    <form id="form-create-post" method="post" action="{{ route('admin.post.update', $post->id) }}" enctype="multipart/form-data" autocomplete="off">
        @csrf
        <div class="card card-flush">
            <div class="card-header">
                <h3 class="card-title">Edit Post</h3>
            </div>
            <div class="card-body py-5 px-10">

                <div class="mb-5">
                    <label class="form-label" for="title">Judul<span class="text-danger ms-1">*</span></label>
                    <input type="text" class="form-control" name="title" id="title" placeholder="Masukkan judul" value="{{ old('title', $post->title) }}" required>
                    @if ($errors->has('title'))
                        <span class="error">{{ $errors->first('title') }}</span>
                    @endif
                </div>

                <div class="row">
                    <div class="col-lg-9 col-sm-12">
                        <div class="mb-5">
                            <label class="form-label" for="status">Status<span class="text-danger ms-1">*</span></label>
                            <x-select-post-published-status name="status" id="status" value="{{ $post->status }}" />
                            @if ($errors->has('status'))
                                <span class="error">{{ $errors->first('status') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="mb-5">
                            <label class="form-label" for="category-id">Kategori<span class="text-danger ms-1">*</span></label>
                            <x-select-post-category name="category_id" id="category-id" postCategoryId="{{ $post->category_id }}" />
                            @if ($errors->has('category_id'))
                                <span class="error">{{ $errors->first('category_id') }}</span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mb-5">
                    <label class="form-label" for="content">Konten<span class="text-danger ms-1">*</span></label>
                    <textarea name="content" id="content" class="editor" required>{!! old('content', $post->content) !!}</textarea>
                    <span class="error-content"></span>
                    @if ($errors->has('content'))
                        <span class="error">{{ $errors->first('content') }}</span>
                    @endif
                </div>

                <div class="row">
                    <div class="col-lg-4 col-md-8 col-sm-12">
                        <div class="mb-5">
                            <label class="form-label" for="main_image">
                                Thumbnail
                                <span>
                                    <i class="fa-solid fa-info-circle ms-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Gambar maksimal berukuran 2 MB dengan format JPG, JPEG, atau PNG" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-dismiss-="click"></i>
                                </span>
                                <span class="text-danger ms-1">*</span>
                            </label>
                            <br>
                            <img src="{{ ($post->thumbnail) ? asset($post->thumbnail) : 'https://cdn4.wpbeginner.com/wp-content/uploads/2017/08/fallbackthumbnail.png' }}" class="rounded img-thumbnail text-center" style="max-height:15rem;" id="propic">
                            <input type="file" class="form-control mt-2" name="thumbnail" id="thumbnail" accept="image/*">
                            @if ($errors->has('thumbnail'))
                                <span class="error">{{ $errors->first('thumbnail') }}</span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card-footer px-10">
                    <div class="float-end">
                        <a class="btn btn-secondary me-1" href="{{ route('admin.post.index') }}">Kembali/Batal</a>
                        <button type="submit" class="btn btn-primary ms-2">Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<!--end::Container-->
@endsection

@push('js')
<!-- Asset -->
<script src="{{ asset('assets/metronic/plugins/custom/ckeditor/ckeditor-classic.bundle.js') }}"></script>
<script src="{{ asset('assets/metronic/plugins/custom/summernote/summernote-lite.js') }}"></script>
<!-- Asset -->

<!-- Main Script -->
<script>
    $(document).ready( function () {
        /* Set Nav-Link Active */
        $('#menu-item-posts').addClass('here show');
        $('#menu-link-posts').addClass('active');

        /* Summernote */
        $('#content').summernote({
            height: 350, // set editor height
            minHeight: null, // set minimum height of editor
            maxHeight: null, // set maximum height of editor
            focus: false // set focus to editable area after initializing summernote
        });;

        /* Thumbnail Event Listener */
        $('#thumbnail').on('change', function(){
            var filedata = this.files[0];
            var imgtype = filedata.type;
            var match = ['image/jpg', 'image/jpeg', 'image/png'];
            if (!(filedata.type==match[0]||filedata.type==match[1]||filedata.type==match[2])) {
                $(this).val('');
                alertError('Error', 'Format gambar salah');
            }else if(filedata.size > (2097152)){
                $(this).val('');
                alertError('Error', 'Ukuran gambar maksimal 2 MB')
            }else{
                var reader=new FileReader();
                reader.onload=function(ev){
                    $('#propic').attr('src', ev.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            }
        });

        /* Select2 on Change Listener */
        $('.form-select').on('change', function(){
            $(this).valid();
        });
    });
</script>
<!-- Main Script -->

<!-- Validation -->
<script>
    $(document).ready(function() {
        /* Add custom method */
        jQuery.validator.addMethod("title", function(value, element) {
            return this.optional(element) || /^[A-Za-z0-9\s\-_,\.;:()]+$/i.test(value);
        });

        /* Create room type validation */
        $("#form-create-post").validate({
            ignore: [],
            rules: {
                title: {
                    required: true,
                    minlength: 5,
                    maxlength: 100,
                    title: true,
                },
                category_id: {
                    required: true
                },
                content: {
                    required: true,
                    minlength: 10,
                },
                status: {
                    required: true,
                }
            },
            messages: {
                title: {
                    required: "Judul tidak boleh kosong",
                    minlength: "Judul minimal 5 karakter",
                    maxlength: "Judul maksimal 100 karakter",
                    title: "Judul hanya boleh mengandung huruf, angka, spasi, dan simbol -_,.;:()"
                },
                category_id: {
                    required: "Kategori tidak boleh kosong"
                },
                content: {
                    required: "Konten tidak boleh kosong",
                    minlength: "Konten minimal 10 karakter"
                },
                status: {
                    required: "Status tidak boleh kosong"
                }
            },
            errorPlacement: function (error, element) {
                if(element.hasClass('form-select') && element.next('.select2-container').length) {
                    error.insertAfter(element.next('.select2-container'));
                }else if(element.attr('name') === 'content'){
                    error.insertAfter('.error-content');
                }
                else {
                    error.insertAfter(element);
                }
            }
        });
    });
</script>
<!-- Validation -->
@endpush