@extends('frontend::layouts.master')
@section('title')

@section('style')

@endsection

@section('content')
    <main>
        <div class="the-container py-8">
            <div class="flex items-center space-x-2 justify-center">
                <div class="full-url">
                    <img class="w-5" src="{{ Module::asset('frontend:img/icon/home.svg') }}" alt="" />
                    <a href="{{ mwz_route('frontend.index') }}"></a>
                </div>
                <div>/ </div>
                <div class="full-url">
                    {{ !empty($data['knowledge_menu']['name']) ? $data['knowledge_menu']['name'] : __('frontend::lang.knowledge_title') }}
                    <a href="{{ !empty($page_init['knowledge_url']) ? $page_init['knowledge_url'] : '' }}"></a>
                </div>
            </div>

            <div class="text-center text-whiten">
                <h2 class="uppercase th-6 fs-32">{{ !empty($data['detail']['name']) ? $data['detail']['name'] : '' }}</h2>
                <sup class="fs-14">{{ !empty($data['detail']['start_at']) ? $data['detail']['start_at'] : '' }}</sup>
            </div>

            <div class="knowledge-detail">
                <div class="knowledge-detail__media">
                    @if (!empty($data['detail']['image']))
                        <figure class="knowledge-detail__figure">
                            <img
                                src="{{ asset($data['detail']['image']) }}"
                                alt="{{ !empty($data['detail']['name']) ? $data['detail']['name'] : '' }}"
                            >
                        </figure>
                    @endif
                </div>
                <div class="knowledge-detail__body text-editor">
                    <article class="prose">
                        {!! !empty($data['detail']['detail']) ? $data['detail']['detail'] : '' !!}
                    </article>
                    <div class="knowledge-detail__actions">
                        @if (!empty($data['detail']['clip']))
                            <a
                                class="knowledge-btn knowledge-btn--video"
                                href="{{ $data['detail']['clip'] }}"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <span class="knowledge-btn__icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                                        <path d="M8 5.14v13.72L19 12 8 5.14z"/>
                                    </svg>
                                </span>
                                <span class="knowledge-btn__label">{{ __('frontend::lang.knowledge_video_btn') }}</span>
                            </a>
                        @endif

                        @if (!empty($data['detail']['file']))
                            <button type="button" class="knowledge-btn knowledge-btn--pdf" id="knowledge-pdf-toggle" aria-expanded="false" aria-controls="knowledge-pdf-preview">
                                <span class="knowledge-btn__icon" aria-hidden="true">
                                    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                                        <path d="M14 2v6h6"/>
                                        <path d="M8 13h8M8 17h6"/>
                                    </svg>
                                </span>
                                <span class="knowledge-btn__label" id="knowledge-pdf-toggle-label">{{ __('frontend::lang.knowledge_pdf_preview') }}</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            @if (!empty($data['detail']['file']))
                <div class="knowledge-pdf">
                    <div class="knowledge-pdf__preview" id="knowledge-pdf-preview" hidden>
                        <iframe
                            src="{{ asset($data['detail']['file']) }}#toolbar=1"
                            title="{{ __('frontend::lang.knowledge_pdf_preview') }}"
                            class="knowledge-pdf__frame"
                        ></iframe>
                        <a class="knowledge-pdf__open" href="{{ asset($data['detail']['file']) }}" target="_blank" rel="noopener noreferrer">
                            {{ __('frontend::lang.knowledge_pdf_open') }}
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </main>
@endsection

@section('script')
@if (!empty($data['detail']['file']))
<script>
(function () {
    var btn = document.getElementById('knowledge-pdf-toggle');
    var panel = document.getElementById('knowledge-pdf-preview');
    var label = document.getElementById('knowledge-pdf-toggle-label');
    if (!btn || !panel || !label) return;
    var labelShow = @json(__('frontend::lang.knowledge_pdf_preview'));
    var labelHide = @json(__('frontend::lang.knowledge_pdf_hide'));
    btn.addEventListener('click', function () {
        var isOpen = panel.hasAttribute('hidden');
        if (isOpen) {
            panel.removeAttribute('hidden');
            btn.setAttribute('aria-expanded', 'true');
            label.textContent = labelHide;
        } else {
            panel.setAttribute('hidden', 'hidden');
            btn.setAttribute('aria-expanded', 'false');
            label.textContent = labelShow;
        }
    });
})();
</script>
@endif
@endsection