@extends('visitor.template.layout')
@section('toolbar')
    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar"
        style="background-image: url('{{ asset($global_option->banner_landing_page ?? 'visitor/efootball_banner.webp') }}'); background-size: cover; background-position: center;">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex align-items-start">
            <!--begin::Toolbar container-->
            <div class="d-flex flex-column flex-row-fluid">
                <!--begin::Toolbar wrapper=-->
                <div class="d-flex flex-stack flex-wrap flex-lg-nowrap gap-4 gap-lg-10 pt-13 pb-6">
                    <!--begin::Page title-->
                    <div class="page-title me-5">
                        <!--begin::Title-->
                        <div class="page-heading d-flex text-white fw-bold fs-2x flex-column justify-content-center my-0">
                            {{ $dynamic->name }}
                            <!--begin::Description-->
                            <span class="page-desc text-gray-600 fw-semibold fs-6 pt-3 pb-10 pb-md-0">
                                {{ $dynamic->description }}
                            </span>
                            <!--end::Description-->
                        </div>
                        <!--end::Title-->
                    </div>
                    <!--end::Page title-->
                </div>
                <!--end::Toolbar wrapper=-->
            </div>
            <!--end::Toolbar container=-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->
@endsection

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <!--begin::Row-->
            <div class="row mb-5">
                <div class="col-12 d-flex justify-content-between align-items-center mb-6">
                    <div class="fs-5 text-muted fw-bold">
                    </div>
                </div>
            </div>
            <div class="row mb-10">
                <div class="content-wrap">
                    <div class="container">
                        <!-- Posts ============================================= -->
                        @if ($dynamic->type == 'list')
                            <div class="row g-10 mt-10">
                                <!--begin::Col-->
                                @foreach ($lists as $list)
                                <div class="col-md-4">
                                    <!--begin::Feature post-->
                                    <div class="card-xl-stretch me-md-6">
                                        <!--begin::Image-->
                                        <a class="d-block bgi-no-repeat bgi-size-cover bgi-position-center card-rounded position-relative min-h-175px mb-5"
                                            style="background-image:url('{{ asset($list->thumbnail) }}')"
                                            href="{{ route('dynamic.show', ['menu' => $dynamic->link, 'post' => $list->link]) }}">
                                        </a>
                                        <!--end::Image-->

                                        <!--begin::Body-->
                                        <div class="m-0">
                                            <!--begin::Title-->
                                            <a href="{{ route('dynamic.show', ['menu' => $dynamic->link, 'post' => $list->link]) }}"
                                                class="fs-4 text-gray-900 fw-bold text-hover-primary text-gray-900 lh-base">
                                                {{ $list->name }} </a>
                                            <!--end::Title-->

                                            <!--begin::Text-->
                                            <div class="fw-semibold fs-5 text-gray-600 text-gray-900 my-4">

                                                {{ \Illuminate\Support\Str::limit($list->description, 100) }}
                                            </div>
                                            <!--end::Text-->

                                            <!--begin::Content-->
                                            <div class="fs-6 fw-bold">
                                                <!--begin::Author-->
                                                <a href="{{ route('dynamic.show', ['menu' => $dynamic->link, 'post' => $list->link]) }}"
                                                    class="text-gray-700 text-hover-primary">{{ $list->user->name }}</a>
                                                <!--end::Author-->

                                                <!--begin::Date-->
                                                <span class="text-muted">on {{ \Carbon\Carbon::parse($list->publish_date)->locale('id_ID')->translatedFormat('d F, Y') }}</span>
                                                <!--end::Date-->
                                            </div>
                                            <!--end::Content-->
                                        </div>
                                        <!--end::Body-->
                                    </div>
                                    <!--end::Feature post-->
                                </div>
                                @endforeach
                                <!--end::Col-->
                            </div>
                            <!-- Pagination
                              ============================================= -->
                            <ul class="pagination mt-5 pagination-circle justify-content-center">
                                @if ($lists->currentPage() > 1)
                                    <li class="page-item"><a class="page-link" href="{{ $lists->previousPageUrl() }}"><i
                                                class="uil uil-angle-left-b"></i></a></li>
                                @else
                                    <li class="page-item disabled"><a class="page-link" href="#"><i
                                                class="uil uil-angle-left-b"></i></a>
                                    </li>
                                @endif

                                @for ($i = 1; $i <= $lists->lastPage(); $i++)
                                    @if ($i == $lists->currentPage())
                                        <li class="page-item active"><a class="page-link"
                                                href="#">{{ $i }}</a></li>
                                    @else
                                        <li class="page-item"><a class="page-link"
                                                href="{{ $lists->url($i) }}">{{ $i }}</a>
                                        </li>
                                    @endif
                                @endfor

                                @if ($lists->currentPage() < $lists->lastPage())
                                    <li class="page-item"><a class="page-link" href="{{ $lists->nextPageUrl() }}"><i
                                                class="uil uil-angle-right-b"></i></a></li>
                                @else
                                    <li class="page-item disabled"><a class="page-link" href="#"><i
                                                class="uil uil-angle-right-b"></i></a>
                                    </li>
                                @endif
                            </ul>
                        @elseif ($dynamic->type == 'detail')
                        <div class="card">
                            <!--begin::Body-->
                            <div class="card-body p-lg-20 pb-lg-0">
                                <!--begin::Layout-->
                                <div class="d-flex flex-column flex-xl-row">
                                    <!--begin::Content-->
                                    <div class="flex-lg-row-fluid me-xl-15">
                                        <!--begin::Post content-->
                                        <div class="mb-17">
                                            <!--begin::Wrapper-->
                                            <div class="mb-8">
                                                <!--begin::Info-->
                                                <div class="d-flex flex-wrap mb-6">
                                                    <!--begin::Item-->
                                                    <div class="me-9 my-1">
                                                        <!--begin::Icon-->
                                                        <i class="ki-duotone ki-element-11 text-primary fs-2 me-1"><span
                                                                class="path1"></span><span class="path2"></span><span
                                                                class="path3"></span><span class="path4"></span></i> <!--end::Icon-->

                                                        <!--begin::Label-->
                                                        <span class="fw-bold text-gray-500">{{ \Carbon\Carbon::parse($dynamic->created_at)->locale('id_ID')->translatedFormat('d F, Y') }} | {{ \Carbon\Carbon::parse($dynamic->created_at)->diffForHumans() }}</span>
                                                        <!--end::Label-->
                                                    </div>
                                                    <!--end::Item-->

                                                </div>
                                                <!--end::Info-->

                                                <!--begin::Title-->
                                                <a href="#" class="text-gray-900 text-hover-primary fs-2 fw-bold">
                                                    {{ $dynamic->name }}
                                                </a>
                                                <!--end::Title-->
                                            </div>
                                            <!--end::Wrapper-->
                                            <div class="separator separator-dashed my-4"></div>
                                            <!--begin::Description-->
                                            <div class="fs-5 fw-semibold text-gray-600">
                                                <style>
                                                    img {
                                                        max-width: 100%;
                                                        height: auto;
                                                    }
                                                </style>
                                                <div name="ckeditor" id="kt_docs_ckeditor_document_content">{!! $dynamic->content !!}</div>
                                            </div>
                                        </div>
                                        <!--end::Post content-->

                                    </div>
                                    <!--end::Content-->
                                </div>
                                <!--end::Layout-->
                            </div>
                            <!--end::Body-->
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection

@section('script')
<script src="{{ asset('plugins/custom/ckeditor/ckeditor-document.bundle.js') }}" type="text/javascript"></script>
<script>
    DecoupledEditor.create(document.querySelector('#kt_docs_ckeditor_document_content'), {
                ckfinder: {
                    uploadUrl: '{{ route('CKEditor.store') . '?_token=' . csrf_token() }}',
                }
            }).then(editor => {
                editor.enableReadOnlyMode('readonly-mode');
            }).catch(error => {});
</script>
@endsection