@extends('frontend.default.layouts.app')

@section('meta_title', $page->title.' - '.getSetting('web_name', config('app.name')))
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($page->content), 160))

@section('breadcrumbs')
    <div class="breadcrumbs panel z-1 py-2 bg-gray-25 dark:bg-gray-100 dark:bg-opacity-5 dark:text-white">
        <div class="container max-w-xl">
            <ul class="breadcrumb nav-x justify-center gap-1 fs-7 sm:fs-6 m-0">
                <li><a href="{{ route('home') }}">Home</a></li>
                <li><i class="unicon-chevron-right opacity-50"></i></li>
                <li><span class="opacity-50">{{ $page->title }}</span></li>
            </ul>
        </div>
    </div>
@endsection

@section('content')
    @php
        $pageExcerpt = \Illuminate\Support\Str::limit(trim(preg_replace('/\s+/', ' ', strip_tags($page->content))), 190);
    @endphp

    <div class="section panel overflow-hidden">
        <div class="section-outer panel py-5 lg:py-8 xl:py-9">
            <div class="container max-w-xl">
                <div class="section-inner panel vstack gap-4 lg:gap-6 xl:gap-8">
                    <header class="page-header panel">
                        <div class="panel vstack justify-center items-center gap-2 lg:gap-3 text-center max-w-700px mx-auto">
                            <span class="fs-7 fw-semibold text-uppercase py-narrow px-2 rounded-pill bg-primary bg-opacity-10 text-primary dark:bg-white dark:bg-opacity-10 dark:text-white">
                                Page
                            </span>
                            <h1 class="h4 sm:h3 lg:h2 m-0">{{ $page->title }}</h1>
                            @if ($pageExcerpt !== '')
                                <p class="fs-6 lg:fs-5 text-gray-700 dark:text-gray-300 opacity-80 m-0 max-w-650px">
                                    {{ $pageExcerpt }}
                                </p>
                            @endif
                        </div>
                    </header>

                    @if ($page->picture)
                        <div class="panel">
                            <figure class="featured-image m-0 ratio ratio-2x1 rounded-2 uc-transition-toggle overflow-hidden bg-gray-25 dark:bg-gray-800 shadow-xs">
                                <img class="media-cover image uc-transition-scale-up uc-transition-opaque" src="{{ po_asset($page->picture) }}" alt="{{ $page->title }}" loading="eager" fetchpriority="high" decoding="async">
                            </figure>
                        </div>
                    @endif

                    <div class="row child-cols-12 lg:child-cols g-4 lg:gx-6">
                        <div class="col-12 lg:col-8">
                            <div class="panel p-3 sm:p-4 lg:p-5 xl:p-6 rounded-2 border bg-white dark:bg-gray-900 dark:border-gray-700 shadow-xs">
                                <div class="uc-post-content fs-6 md:fs-5">
                                    {!! \App\Support\HtmlSanitizer::clean($page->content) !!}
                                </div>
                            </div>
                        </div>
                        <div class="col-12 lg:col-4">
                            <div class="panel vstack gap-3 p-3 sm:p-4 rounded-2 border bg-gray-25 dark:bg-gray-900 dark:border-gray-700 shadow-xs position-sticky" style="top: 110px;">
                                <div class="vstack gap-1">
                                    <span class="fs-7 fw-semibold text-uppercase opacity-60">Informasi</span>
                                    <h2 class="h5 m-0">{{ $page->title }}</h2>
                                </div>
                                @if ($pageExcerpt !== '')
                                    <p class="fs-6 opacity-80 m-0">{{ $pageExcerpt }}</p>
                                @endif
                                <div class="vstack gap-2 pt-2 border-top dark:border-gray-700">
                                    <a class="btn btn-sm btn-primary rounded-pill" href="{{ route('contact') }}">Hubungi Kami</a>
                                    <a class="btn btn-sm btn-alt-primary bg-transparent border rounded-pill dark:text-white" href="{{ route('home') }}">Kembali ke Beranda</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection