{{-- example/content --}}

{{-- breadcrumb --}}
@component('breadcrumb_component', [
// form config here
'page_name' => $page_name,
'slug' => $slug,
'url' => $url
])
{{-- slot --}}
@endcomponent

<div class="card-content-default" style="margin: 0rem 0rem 1rem 0rem; padding: 0rem 1rem 1rem 1rem; box-shadow: 0 3px 8px 0 rgba(0, 0, 0);">
    {{-- caption --}}
        {{-- top content --}}
        @component('widget.shortcut_component', [
            // form config here
            'shortcut' => $shortcut,
        ])
        {{-- slot --}}
        @endcomponent
    {{-- end caption --}}
</div>
    

<div class="card-content-default" style="margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 1rem 1rem; box-shadow: 0 3px 8px 0 rgba(0, 0, 0);">

    {{-- don't add slash div in here! --}}

    <div class="container">
        <div class="row">

            {{-- left layout main menu --}}

            <div class="col-12 col-md-8">

                <div style="margin: 1rem 0rem 0rem 0rem; padding: 1rem 0rem 0rem 0rem;">
                    <h2 class="postheader">
                        <div id="my-content-title"></div>
                    </h2>

                    <div class="row">
                        <div class="mobile-responsive border-right">
                            <div class="col-sm">
                                <div class="card-body">
                                    <time datetime="#" class="icon">
                                        <strong>
                                            <div id="article-month"></div>
                                        </strong>
                                        <span>
                                            <div id="article-date"></div>
                                        </span>
                                    </time>
                                </div>
                            </div>
                        </div>
                        <div class="col-md">
                            <div class="card-body">
                                <div class="author">
                                    <div id="my-author"></div>
                                </div>
                            </div>
                            <div class="card-body border-bottom">
                                <div class="content-article app-content content">
                                    <div id="my-content"></div>
                                </div>

                                {{-- video player widget --}}
                                <div id="video-widget"></div>

                            </div>

                            <button type="button" class="btn-back-small btn-back shadow mr-1 mb-1">
                                <a href="{{ url('/') }}" style="color: #ffffff;">@lang('article.Kembali')</a>
                            </button>
                        </div>
                    </div>
                </div>
                {{-- end start edit example from here --}}
            </div>

            @component('widget_component', [
            // form config here
            'links' => $links,
            'visits' => $visits,
            'activities' => $activities,
            ])
            {{-- slot --}}
            @endcomponent

        </div>

@push('script-after-global')
<script>

    // title
    // content

    axios({
        method: 'get',
        url: '{{ url('api/article/'.$url) }}',
    }).then((res) => {
        const { data } = res.data;

        // article
            // id
            // title
            // content
            // author
            // published
            // author
            // created_at

        // output
        document.getElementById('my-content-title').innerHTML = data.article.title;
        document.getElementById('my-content').innerHTML = data.article.content;
        document.getElementById('my-author').innerHTML = data.author;
        document.getElementById('article-date').innerHTML = data.article_time.date;
        document.getElementById('article-month').innerHTML = data.article_time.month;

        //widget

        // widget4
        var widget4_widget = data.article.widget4_widget;

        // video
        var video_widget = data.article.video_widget;
        var video_url = data.article.video_url;

        var video_content = [];

        // video sipp
        if(video_widget == true) {

            video_content.push(
                `<div class="card-content">
                    <video
                        id="player-widget"
                        class="video-js"
                        controls
                        preload="auto"
                        width="100%" height="75%"
                        poster="{{ url('libraries/default/assets/images/gambar/none.png') }}"
                        data-setup='{}'
                        >
                        <source src="${ video_url }" type="video/mp4" />
                        <p class="vjs-no-js">
                            Untuk melihat video ini, silakan aktifkan JavaScript, dan pertimbangkan untuk meningkatkan ke browser web ke
                            versi terbaru.
                        </p>
                    </video>
                </div>
                `
            );

            // push
            document.getElementById('video-widget').innerHTML = video_content.join('');
        }

    }).catch((err) => {
        handleErrorResponse(err.response);
    });
</script>
@endpush