@extends('Layouts.index')
@section('content')
    <!-- artikel -->
    <section class="bg-light">
        <div class="row">
            <div class="col-md-12 bg-pattern3 py-11">
                <div class="d-flex align-items-center justify-content-center">
                    <h2 class="fs-45 fw-semibold pt-5 p-0 mb-0 text-dark">Video Tutorial<span class="text-primary"> Jagoti</span></h2>
                </div>
                <p class="fs-16 text-center">Informasi video tutorial terkait JAGOTI</p>
            </div>
        </div>
        <div class="container pt-10">
            <div class="row">
                @if (!empty($videotutorial))
                    @foreach ($videotutorial as $item)
                        <div class="col-lg-6">
                            <article class="post">
                                <div class="card">
                                    <div class="card-img-top">
                                        <div class="player" data-plyr-provider="youtube"
                                            data-plyr-embed-id="{{ preg_replace("#[&\?].+$#", '', preg_replace('#http://(?:www\.)?youtu\.?be(?:\.com)?/(embed/|watch\?v=|\?v=|v/|e/|.+/|watch.*v=|)#i', '', $item['urlcontent'])) }}">
                                        </div>
                                    </div>
                                    <div class="card-body card-body pt-4 px-5 pb-1">
                                        <div class="post-header">
                                            <div class="post-category mb-3">
                                                <span class="hover hover text-white bg-primary p-1 rounded"
                                                    rel="category">{{ $item['Category'] }}</span>
                                            </div>
                                            <!-- /.post-category -->
                                            <h2 class="post-title mt-1 mb-0 post-title mt-1 mb-0 fs-20 fw-semibold"><a
                                                    class="link-dark" data-bs-toggle="modal"
                                                    data-bs-target="#video{{ $item['content_id'] }}">{{ $item['title'] }}</a>
                                            </h2>
                                        </div>
                                        <!-- /.post-header -->
                                    </div>
                                    <!--/.card-body -->
                                    <div class="card-footer">
                                        <ul class="post-meta d-flex mb-0">
                                            <li class="post-date"><i
                                                    class="uil uil-calendar-alt"></i><span>{{ $item['tgl_publish'] }}</span>
                                            </li>
                                            <li class="post-comments fs-12"><i class="uil uil-user"></i><span>
                                                    {{ $item['Author'] }}</span></li>
                                        </ul>
                                        <!-- /.post-meta -->
                                    </div>
                                    <!-- /.card-footer -->
                                </div>
                                <!-- /.card -->
                            </article>
                            <!-- /.post -->
                        </div>
                    @endforeach
                @endif

                @if (!empty($videotutorial))
                    @foreach ($videotutorial as $item)
                        <div class="modal fade" id="video{{ $item['content_id'] }}" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                <div class="modal-content text-center">
                                    <div class="modal-body">
                                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        <div class="card-img-top">
                                            <div class="player" data-plyr-provider="youtube"
                                                data-plyr-embed-id="{{ preg_replace("#[&\?].+$#", '', preg_replace('#http://(?:www\.)?youtu\.?be(?:\.com)?/(embed/|watch\?v=|\?v=|v/|e/|.+/|watch.*v=|)#i', '', $item['urlcontent'])) }}">
                                            </div>
                                        </div>
                                    </div>
                                    <!--/.modal-body -->
                                </div>
                                <!--/.modal-content -->
                            </div>
                            <!--/.modal-dialog -->
                        </div>
                    @endforeach
                @endif
                <!--/.modal -->
            </div>
        </div>
    </section>


@endsection