@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->filename_url : \StorageUrl::defaultImageNotAvailable() }}" id="output" style="height: 100%; width: 100% object-fit:contain">
                                    <input type="hidden" name="filename" id="filename" value="{{ old('filename', isset($res) ? $res->filename : '') }}">
                                </div>
                                <input type="file" hidden name="news_thumb" id="news_thumb" onchange="uploadSingle(event)"
                                    accept=".jpg,.jpeg,.png" data-input-name="filename" 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 Artikel</label>
                                <input type="text" class="form-control @error('title') is-invalid  @enderror" name="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">Status</label>
                                <select name="is_publish" class="form-control  @error('is_publish') is-invalid  @enderror">
                                    <option value="1" @if (old('is_publish', isset($res) ? $res->is_publish : '') == '1') selected="selected" @endif>Tayang</option>
                                    <option value="0" @if (old('is_publish', isset($res) ? $res->is_publish : '') == '0') selected="selected" @endif>Tidak Tayang</option>
                                </select>
                                @error('is_publish')
                                    <small class="form-text text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                        </div>
                        <div class="col-md-6">

                            <div class="form-group">
                                <label class="col-form-label">Description</label>
                                <textarea type="text" class="form-control @error('description') is-invalid  @enderror"
                                id="description" name="description" rows="20">{{ old('description', isset($res) ? html_entity_decode($res->description) : '') }}</textarea>
                                @error('description')
                                    <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.news.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>
$(function () {

    $('#description').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