@extends('layouts.main')

@section('container')
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ $card_title }}</h3>
                </div>

                <!-- /.card-header -->
                <form method="POST" cemes="form" cemes-redirect="api" action="{{ $post_url }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group col-12 mb-0 ">
                                    <label for="upload_news_thumbs">Foto Thumbnail</label>
                                    <div id="upload_news_thumbs"
                                        style="background-color:rgb(219, 219, 219); overflow:hidden;max-height: 260px;aspect-ratio: 16/9; width: auto;"
                                        class="d-flex justify-content-center align-items-center mx-auto">

                                        <img src="{{ isset($res) ? $res->banner_url : \StorageUrl::defaultImageNotAvailable() }}"
                                            id="output" style="height: 100%; width: 100% object-fit:contain">
                                            <input type="hidden" name="banner" id="filename"
                                            value="{{ old('banner', isset($res) ? $res->banner : '') }}">                                            
                                    </div>
                                    <input type="file" hidden name="news_thumb" id="news_thumb"
                                        onchange="uploadSingle(event)" accept=".jpg,.jpeg,.png" data-input-name="banner"
                                        data-upload-container="#upload_news_thumbs"
                                        data-upload-url="{{ route('v2.upload', 'news_thumbnail') }}">
                                    <button type="button" class="btn btn-sm btn-block btn-primary"
                                        onclick="$('#news_thumb').trigger('click')">Upload Thumbnail</button>
                                </div>
                              
                                <div class="form-group">
                                    <label class="col-form-label">Judul</label>
                                    <input type="text" class="form-control @error('title') is-invalid  @enderror"
                                        name="title" id="title"
                                        value="{{ old('title', isset($res) ? $res->title : '') }}">
                                    @error('title')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label">Slug</label>
                                    <input type="text" class="form-control @error('slug') is-invalid  @enderror"
                                        name="slug" id="slug"
                                        value="{{ old('slug', isset($res) ? $res->slug : '') }}">
                                    @error('slug')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label">Publish</label>
                                    <input type="datetime-local" name="published_at" value="{{ $res->published_at ?? null }}"
                                        class="form-control">
                                    @error('published_at')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>


                                <div class="form-group">
                                    <label class="col-form-label">Category</label>
                                    <select type="date" name="blog_category_id"
                                        class="form-control">
                                        @foreach ($categories as $c)
                                        {{-- <option value="{{$c->id}}">{{$c->name}}</option> --}}
                                        <option value="{{ $c->id }}"
                                        @if ((isset($res) ? $res->blog_category_id : '') == $c->id) selected="selected" @endif>
                                        {{ $c->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('published_at')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>


                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="excerpt" class="col-form-lable">Rangkuman</label>
                                    <textarea name="excerpt" id="excerpt" cols="30" rows="5" class="form-control">{{ $res->excerpt }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label class="col-form-label">Konten</label>
                                    <textarea type="text" class="form-control @error('content') is-invalid  @enderror" id="content" name="content"
                                        rows="20">{{ old('content', isset($res) ? html_entity_decode($res->content) : '') }}</textarea>
                                    @error('content')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- /.card-body -->
                    <div class="card-footer">
                        <button type="submit" class="btn btn-primary float-right">Simpan</button>
                        <a href="{{ route('admin.blog.post.index') }}" class="btn btn-default">Batal</a>
                    </div>

                </form>
            </div>
            <!-- /.card -->

        </div>
    </div>
@endsection



@section('javascript')
    <!-- Summernote -->
    <script src="{{ asset('assets') }}/plugins/summernote/summernote-bs4.min.js"></script>

    <script>
        $(document).ready(function() {
            $("#title").keyup(e => {
                $el = $(e.target)
                generateSlug($el.val(), "#slug")
            })

            function generateSlug(text, target) {
                let $t = $(target)
                text = string_to_slug(text)
                $t.val(text)
            }

            function string_to_slug(str) {
                str = str.replace(/^\s+|\s+$/g, ''); // trim
                str = str.toLowerCase();

                // remove accents, swap ñ for n, etc
                var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
                var to = "aaaaeeeeiiiioooouuuunc------";
                for (var i = 0, l = from.length; i < l; i++) {
                    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
                }

                str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
                    .replace(/\s+/g, '-') // collapse whitespace and replace by -
                    .replace(/-+/g, '-'); // collapse dashes

                return str;
            }


            $('#content').summernote({
                height: 400,
                toolbar: [
                    // [groupName, [list of button]]
                    ['style', ['bold', 'italic', 'underline', 'clear']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['fontsize', ['fontsize']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['height', ['height']]
                ]
            })

            // kosongkan image
            // $('#filename').val("");
            $('#userfile').val("");
            // $('#img_thumbnail').attr("src","{{ asset('assets/images/image_not_available.png') }}");
        })
    </script>
@endsection