@extends('layouts.site')

@section('title', ($post->title ?? 'Blog') . ' - Visit Sri Lanka 360')

@php
$cover = !empty($post->cover_image)
    ? asset('storage/' . ltrim($post->cover_image, '/'))
    : asset('images/hero/tours-hero.jpg');

$date = $post->published_at
    ? \Carbon\Carbon::parse($post->published_at)->format('M d, Y')
    : null;

// Optional: if you store gallery as array/json
$gallery = collect($post->gallery ?? [])->filter()->values();

// For share links
$currentUrl = url()->current();
@endphp

@section('content')
    <div class="tour-show-page">

        {{-- HERO --}}
        <section class="relative">
            <div class="h-[38vh] md:h-[46vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
                 style="background-image: url('{{ $cover }}');">

                {{-- overlays --}}
                <div class="absolute inset-0 bg-black/55"></div>
                <div class="absolute inset-0 bg-[radial-gradient(900px_500px_at_20%_30%,rgba(215,166,43,.30),transparent_60%),radial-gradient(800px_500px_at_85%_40%,rgba(255,255,255,.10),transparent_55%)]"></div>

                <div class="relative container-site h-full flex items-center">
                    <div class="pt-24 md:pt-32 max-w-3xl">
                        <div class="inline-flex items-center gap-2 rounded-full bg-white/10 border border-white/15 px-4 py-2 text-white/90">
                            <span class="text-[11px] tracking-[.22em] uppercase">VSL360 Blog</span>
                            @if($date)
                                <span class="text-white/40">•</span>
                                <span class="text-[11px] tracking-[.22em] uppercase text-white/80">{{ $date }}</span>
                            @endif
                        </div>

                        <h1 class="mt-3 text-white text-3xl sm:text-4xl md:text-5xl font-semibold leading-[1.08]"
                            style="font-family: var(--font-display);">
                            {{ $post->title }}
                        </h1>

                        @if(!empty($post->excerpt))
                            <p class="mt-4 text-white/85 text-sm md:text-lg max-w-2xl leading-relaxed">
                                {{ $post->excerpt }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        {{-- CONTENT --}}
        <section class="py-10 md:py-14">
            <div class="container-site">
                <div class="grid lg:grid-cols-12 gap-8 lg:gap-10">

                    {{-- MAIN --}}
                    <article class="lg:col-span-8">
                        <div class="card p-6 md:p-8">

                            {{-- share row --}}
                            <div class="flex flex-wrap items-center justify-between gap-3 pb-5 border-b border-slate-200">
                                <div class="text-xs tracking-[.22em] uppercase text-slate-500 font-semibold">
                                    Article
                                </div>

                                <div class="flex items-center gap-2">
                                    <a class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 hover:border-gold-500 hover:text-gold-700 transition"
                                       href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode($currentUrl) }}"
                                       target="_blank" rel="noopener" aria-label="Share on Facebook">
                                        <i class="fa-brands fa-facebook-f"></i>
                                    </a>
                                    <a class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 hover:border-gold-500 hover:text-gold-700 transition"
                                       href="https://twitter.com/intent/tweet?url={{ urlencode($currentUrl) }}&text={{ urlencode($post->title) }}"
                                       target="_blank" rel="noopener" aria-label="Share on X">
                                        <i class="fa-brands fa-x-twitter"></i>
                                    </a>
                                    <a class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700 hover:border-gold-500 hover:text-gold-700 transition"
                                       href="https://wa.me/?text={{ urlencode($post->title . ' - ' . $currentUrl) }}"
                                       target="_blank" rel="noopener" aria-label="Share on WhatsApp">
                                        <i class="fa-brands fa-whatsapp"></i>
                                    </a>
                                    <button type="button"
                                            class="h-10 px-4 rounded-2xl border border-slate-200 text-slate-700 text-sm font-semibold hover:border-gold-500 hover:text-gold-700 transition"
                                            onclick="navigator.clipboard?.writeText('{{ $currentUrl }}')">
                                        Copy Link
                                    </button>
                                </div>
                            </div>

                            {{-- ✅ Tiptap HTML output --}}
                            <div class="blog-prose mt-6">
                                {!! $post->content !!}
                            </div>
                        </div>

                        {{-- Gallery (optional) --}}
                        @if($gallery->count())
                            <div class="mt-8">
                                <h3 class="text-xl md:text-2xl font-semibold" style="font-family: var(--font-display);">
                                    Moments from this story
                                </h3>
                                <div class="mt-5 grid grid-cols-2 md:grid-cols-3 gap-3">
                                    @foreach($gallery as $g)
                                        <div class="rounded-2xl overflow-hidden border border-slate-200 bg-slate-100">
                                            <img src="{{ asset('storage/' . ltrim($g, '/')) }}"
                                                 class="h-44 md:h-56 w-full object-cover" alt="">
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- CTA --}}
                        <div class="mt-10 rounded-3xl border border-slate-200 bg-white shadow-soft p-6 md:p-8">
                            <div class="text-xs tracking-[.22em] uppercase text-gold-700 font-semibold">
                                Plan your trip
                            </div>
                            <div class="mt-2 text-2xl md:text-3xl font-semibold" style="font-family: var(--font-display);">
                                Ready to explore Sri Lanka?
                            </div>
                            <p class="mt-3 text-slate-600 max-w-2xl">
                                Browse our curated tours or build a custom trip in minutes — we’ll confirm everything via WhatsApp/email.
                            </p>

                            <div class="mt-6 flex flex-wrap gap-3">
                                <a href="{{ url('/tours') }}" class="btn-gold">Explore Tours</a>
                                <a href="{{ route('custom.tour') }}"
                                   class="inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-semibold transition
                                          bg-slate-900 text-white hover:bg-slate-800">
                                    Build Custom Tour
                                </a>
                            </div>
                        </div>
                    </article>

                    {{-- SIDEBAR --}}
                    <aside class="lg:col-span-4">
                        <div class="lg:sticky lg:top-28 space-y-6">

                            {{-- Back to blog --}}
                            <div class="card p-6">
                                <a href="{{ route('blog.index') }}"
                                   class="inline-flex items-center gap-2 text-sm font-semibold text-slate-900 hover:text-gold-700 transition">
                                    <i class="fa-solid fa-arrow-left"></i> Back to Blog
                                </a>
                                <p class="mt-2 text-sm text-slate-600">
                                    Discover more travel guides and itineraries.
                                </p>
                            </div>

                            {{-- Related --}}
                            @if(!empty($related) && $related->count())
                                <div class="card p-6">
                                    <div class="text-lg font-semibold" style="font-family: var(--font-display);">
                                        Related Articles
                                    </div>

                                    <div class="mt-4 space-y-4">
                                        @foreach($related as $r)
                                            @php
        $rImg = !empty($r->cover_image)
            ? asset('storage/' . ltrim($r->cover_image, '/'))
            : 'https://placehold.co/800x600';
        $rDate = $r->published_at ? \Carbon\Carbon::parse($r->published_at)->format('M d, Y') : null;
                                            @endphp

                                            <a href="{{ route('blog.show', $r->slug) }}"
                                               class="group flex gap-3 rounded-2xl hover:bg-slate-50 p-2 transition">
                                                <div class="h-16 w-20 rounded-2xl overflow-hidden border border-slate-200 bg-slate-100 shrink-0">
                                                    <img src="{{ $rImg }}" class="h-full w-full object-cover group-hover:scale-[1.03] transition" alt="">
                                                </div>
                                                <div class="min-w-0">
                                                    @if($rDate)
                                                        <div class="text-[11px] tracking-[.22em] uppercase text-slate-500">
                                                            {{ $rDate }}
                                                        </div>
                                                    @endif
                                                    <div class="mt-1 font-semibold text-slate-900 leading-snug line-clamp-2">
                                                        {{ $r->title }}
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                        </div>
                    </aside>

                </div>
            </div>
        </section>
    </div>
@endsection

@push('styles')
        <style>
            /* =========================
             BLOG PROSE (TIPTAP HTML)
             ========================= */

            .blog-prose {
                color: #0f172a;
                line-height: 1.9;
                font-size: 15px;
                max-width: 72ch;
                margin: 0 auto;
            }

            @media (min-width: 768px) {
                .blog-prose {
                    font-size: 16px;
                }
            }

            /* Paragraph + spacing */
            .blog-prose>* {
                margin: 0 0 1rem;
            }

            .blog-prose p {
                color: #334155;
            }

            /* Headings (fix your h4 issue ✅) */
            .blog-prose h1,
            .blog-prose h2,
            .blog-prose h3,
            .blog-prose h4,
            .blog-prose h5,
            .blog-prose h6 {
                font-family: var(--font-display);
                color: #0f172a;
                line-height: 1.2;
                margin: 1.8rem 0 .9rem;
                letter-spacing: -0.01em;
            }

            .blog-prose h1 {
                font-size: 2rem;
            }

            .blog-prose h2 {
                font-size: 1.6rem;
            }

            .blog-prose h3 {
                font-size: 1.3rem;
            }

            .blog-prose h4 {
                font-size: 1.1rem;
            }

            .blog-prose h5 {
                font-size: 1rem;
                opacity: .95;
            }

            .blog-prose h6 {
                font-size: .95rem;
                opacity: .9;
            }

            /* Lists */
            .blog-prose ul,
            .blog-prose ol {
                padding-left: 1.25rem;
                margin: .6rem 0 1.2rem;
                color: #334155;
            }

            .blog-prose li {
                margin: .35rem 0;
            }

            .blog-prose li>p {
                margin: .4rem 0;
            }

            /* Links */
            .blog-prose a {
                color: #916b1a;
                font-weight: 700;
                text-decoration: underline;
                text-underline-offset: 3px;
            }

            /* Blockquote */
            .blog-prose blockquote {
                margin: 1.4rem 0;
                padding: 1rem 1rem 1rem 1.1rem;
                border-left: 3px solid rgba(215, 166, 43, .7);
                background: rgba(248, 250, 252, 1);
                border-radius: 16px;
                color: #334155;
            }

            .blog-prose blockquote>*:last-child {
                margin-bottom: 0;
            }

            /* Images */
            .blog-prose img {
                display: block;
                max-width: 100%;
                height: auto;
                border-radius: 18px;
                border: 1px solid rgba(226, 232, 240, 1);
                margin: 1.2rem 0;
            }

            /* Horizontal rule */
            .blog-prose hr {
                border: 0;
                border-top: 1px solid rgba(226, 232, 240, 1);
                margin: 1.8rem 0;
            }

            /* Code */
            .blog-prose code {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-size: .92em;
                background: rgba(241, 245, 249, 1);
                border: 1px solid rgba(226, 232, 240, 1);
                padding: .15rem .4rem;
                border-radius: .5rem;
                color: #0f172a;
            }

            .blog-prose pre {
                background: rgba(15, 23, 42, 1);
                color: rgba(248, 250, 252, 1);
                border-radius: 18px;
                padding: 1rem 1rem;
                overflow: auto;
                border: 1px solid rgba(51, 65, 85, 1);
                margin: 1.2rem 0;
            }

            .blog-prose pre code {
                background: transparent;
                border: 0;
                padding: 0;
                color: inherit;
            }

            /* Tables */
            .blog-prose table {
                width: 100%;
                border-collapse: collapse;
                margin: 1.2rem 0;
                overflow: hidden;
                border-radius: 16px;
                border: 1px solid rgba(226, 232, 240, 1);
            }

            .blog-prose th,
            .blog-prose td {
                padding: .75rem .85rem;
                border-bottom: 1px solid rgba(226, 232, 240, 1);
                text-align: left;
                vertical-align: top;
                color: #334155;
                font-size: .95em;
            }

            .blog-prose th {
                background: rgba(248, 250, 252, 1);
                color: #0f172a;
                font-weight: 700;
            }

            .blog-prose tr:last-child td {
                border-bottom: 0;
            }

            /* Small screens: allow full width */
            @media (max-width: 640px) {
                .blog-prose {
                    max-width: 100%;
                }
            }

            /* ✅ FORCE list bullets/numbers (fix for global "list-style: none") */
    .blog-prose ul,
    .blog-prose ol{
      margin: .75rem 0 1.25rem;
      padding-left: 1.25rem !important;
      list-style-position: outside !important;
    }

    .blog-prose ul{ list-style-type: disc !important; }
    .blog-prose ol{ list-style-type: decimal !important; }

    /* nested lists look nicer */
    .blog-prose ul ul{ list-style-type: circle !important; margin-top: .5rem; }
    .blog-prose ul ul ul{ list-style-type: square !important; }
    .blog-prose ol ol{ list-style-type: lower-alpha !important; margin-top: .5rem; }

    /* list item spacing */
    .blog-prose li{
      margin: .35rem 0;
      padding-left: .15rem;
    }

    /* if your theme killed markers using ::marker rules, force them back */
    .blog-prose li::marker{
      color: rgba(15,23,42,.75);
      font-weight: 700;
    }
        </style>
@endpush