{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
    {{ $page_title ?? '' }}
@endsection

<style>
/* --- Full Page + PDF Styling (Scribe-like) --- */

/* Wrapper box same as scribe */
.pdf-wrapper {
    width: 100%;
    background: #fff;
    border-radius: .65rem;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.07);
}

/* Title bar */
.pdf-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdf-header .pdf-title {
    font-weight: 600;
    color: #3a3a3a;
    font-size: 1rem;
}

/* Full view PDF like Scribe */
.pdf-full-view {
    width: 100%;
    height: 80vh; /* Big full-view like Scribe */
    border: none;
    background: #ffffff;
    overflow: hidden;
}

/* Scribe embed wrapper */
.scribe-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Mobile responsiveness */
@media (max-width: 991px) {
    .pdf-full-view {
        height: 65vh;
    }
}
</style>

@section('content')
@include('backend.hr.support_center.header')

<!--begin::Card-->
<div class="card shadow-sm border-0">
    <div class="card-body p-6 p-lg-10">

        <!--begin::Layout-->
        <div class="d-flex flex-column flex-xl-row gap-10">

            <!--begin::Content-->
            <div class="flex-lg-row-fluid w-100">

                <!--begin::Page Header-->
                <div class="d-flex align-items-start align-items-md-center flex-column flex-md-row justify-content-between mb-10">
                    <div class="d-flex align-items-center mb-4 mb-md-0">
                        @php
                            $pageIcon = 'icons/duotune/' . ($page['page_icon'] ?? 'abstract/abs027.svg');
                            $pageColor = $page['page_color'] ?? 'primary';
                        @endphp
                        {!! theme()->getSvgIcon($pageIcon, 'svg-icon-' . $pageColor . ' svg-icon-3x me-4') !!}

                        <div>
                            <h1 class="text-gray-900 fw-bold mb-1">{{ $page['page_name'] ?? '' }}</h1>
                            <div class="fs-7 text-muted">
                                Product:
                                <a href="#" class="text-hover-primary">{{ env('APP_NAME', 'We Care Cloud') }}</a> ·
                                By: <a href="#" class="text-hover-primary">We Care Cloud</a> ·
                                Created:
                                <span class="fw-semibold text-gray-600">
                                    {{ \Carbon\Carbon::parse($page['created_at'])->diffForHumans() }}
                                </span>
                                {{ '(' . \Carbon\Carbon::parse($page['created_at'])->format('d.m.Y \a\t g:i A') . ')' }}
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::Page Header-->

                <!--begin::Conditional Content-->
                @if($page['type'] == 'internal')

                    <!-- INTERNAL DESCRIPTION -->
                    <div class="fs-5 text-gray-800 mb-12">
                        {!! $page['main_description'] ?? '' !!}
                    </div>

                    <!-- PDF FILES (FULL VIEW LIKE SCRIBE) -->
                    @if(!empty($page['files']))
                        @foreach($page['files'] as $index => $file)
                        @continue(!auth()->user()->hasRole($file['role_slug']))
                            @php
                                $fileUrl = $file['url'];
                                $fileId  = 'pdf-full-' . $index;
                            @endphp

                            <div class="pdf-wrapper">

                                <!-- Header -->
                                {{-- <div class="pdf-header">
                                    <div class="pdf-title">{{ basename($file['name']) }}</div>

                                    <a href="{{ $fileUrl }}" target="_blank" class="btn btn-sm btn-light-primary">
                                        <i class="bi bi-box-arrow-up-right me-1"></i>Open
                                    </a>
                                </div> --}}

                                <!-- PDF Viewer -->
                                <div id="{{ $fileId }}" class="pdf-full-view"></div>
                            </div>

                            @push('custom-scripts')
                            <script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
                            <script>
                                function loadAdobePDF_{{ $index }}() {
                                    const adobeDCView = new AdobeDC.View({
                                        clientId: "{{ $ADOBE_EMBED_CLIENT_ID }}",
                                        divId: "{{ $fileId }}"
                                    });

                                    adobeDCView.previewFile({
                                        content: { location: { url: "{{ $fileUrl }}" } },
                                        metaData: { fileName: "{{ basename($file['name']) }}" }
                                    }, {
                                        embedMode: "SIZED_CONTAINER",
                                        showDownloadPDF: false,
                                        showPrintPDF: false,
                                        showFullScreen: true
                                    }).then(adobeViewer => {
                                        adobeViewer.getAPIs().then(apis => {
                                            apis.getZoomAPIs().setZoomLevel(1.1);
                                        });
                                    });
                                }

                                if (window.AdobeDC && window.AdobeDC.View) {
                                    loadAdobePDF_{{ $index }}();
                                } else {
                                    document.addEventListener("adobe_dc_view_sdk.ready", loadAdobePDF_{{ $index }});
                                }
                            </script>
                            @endpush

                        @endforeach
                    @endif

                @elseif($page['type'] == 'scribe')

                    <!-- SCRIBE FULL VIEW -->
                    <div class="rounded-3 shadow-sm mb-10 overflow-hidden border">
                        <div class="scribe-embed ratio ratio-16x9 bg-white">
                            {!! $page['embed_code'] ?? '' !!}
                        </div>
                    </div>

                @endif
                <!--end::Conditional Content-->

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

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

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

@endsection

@section('scripts')
@endsection