@extends('layouts.site')

@section('title', 'Blog - Visit Sri Lanka 360')

@php
    $heroBg = asset('images/hero/blog-hero.jpg'); // change to your blog hero image if you want
@endphp

@section('content')

    {{-- HERO (same style as Tours) --}}
    <section class="relative">
        <div class="h-[34vh] md:h-[38vh] relative overflow-hidden bg-slate-900 bg-cover bg-center"
            style="background-image: url('{{ $heroBg }}');">
            <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,.35),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="max-w-3xl">
                    <div class="text-white/70 text-xs tracking-[.22em] uppercase">
                        Travel Inspiration
                    </div>
                    <h1 class="mt-3 text-white text-3xl md:text-5xl font-semibold"
                        style="font-family: var(--font-display);">
                        Sri Lanka Blog
                    </h1>
                    <p class="mt-3 text-white/80 text-sm md:text-base">
                        Guides, tips, itineraries & hidden gems to plan your perfect trip.
                    </p>
                </div>
            </div>
        </div>
    </section>

    {{-- SEARCH BAR (nice premium bar like filter) --}}
    <section class="-mt-10 md:-mt-12 relative z-10">
        <div class="container-site">
            <div class="rounded-3xl border border-slate-200 bg-white shadow-soft p-5 md:p-6">
                <form method="GET" action="{{ route('blog.index') }}"
                    class="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">

                    <div class="md:col-span-9">
                        <label class="text-xs font-medium text-slate-600">Search</label>
                        <input name="q" value="{{ $q }}" class="mt-1 input-premium"
                            placeholder="Search articles (e.g. Ella, beaches, safari, train ride)...">
                    </div>

                    <div class="md:col-span-3 flex gap-2">
                        <button class="btn-gold w-full justify-center" type="submit">
                            <i class="fa-solid fa-magnifying-glass mr-2"></i> Search
                        </button>

                        @if(!empty($q))
                            <a href="{{ route('blog.index') }}" class="btn-outline w-full justify-center inline-flex">
                                Reset
                            </a>
                        @endif
                    </div>

                    @if(!empty($q))
                        <div class="md:col-span-12 pt-1">
                            <span
                                class="px-3 py-2 rounded-2xl bg-slate-100 text-xs font-semibold text-slate-700 inline-flex items-center gap-2">
                                <i class="fa-solid fa-filter"></i> Showing results for: "{{ $q }}"
                            </span>
                        </div>
                    @endif

                </form>
            </div>
        </div>
    </section>

    {{-- LIST --}}
    <section class="py-10 md:py-14">
        <div class="container-site">

            <div class="flex items-end justify-between gap-4">
                <div>
                    <h2 class="text-2xl md:text-3xl font-semibold" style="font-family: var(--font-display);">
                        Latest Articles
                    </h2>
                    <p class="mt-2 text-slate-600 text-sm">
                        Showing {{ method_exists($posts, 'total') ? $posts->total() : $posts->count() }} articles
                    </p>
                </div>
            </div>

            @if($posts->count())
                <div class="mt-8 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach($posts as $post)
                        @php
                            $img = !empty($post->cover_image)
                                ? asset('storage/' . ltrim($post->cover_image, '/'))
                                : 'https://placehold.co/1200x800';

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

                        <a href="{{ route('blog.show', $post->slug) }}"
                            class="group rounded-3xl overflow-hidden border border-slate-200 bg-white hover:shadow-soft transition">

                            <div class="relative h-56 bg-slate-100 overflow-hidden">
                                <img src="{{ $img }}" alt="{{ $post->title }}"
                                    class="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-[1.04]">

                                <div class="absolute inset-0 bg-gradient-to-t from-black/55 via-black/10 to-transparent"></div>

                                <div class="absolute left-5 right-5 bottom-5 text-white">
                                    @if($date)
                                        <div class="text-white/80 text-[11px] tracking-[.22em] uppercase">
                                            {{ $date }}
                                        </div>
                                    @endif
                                    <div class="mt-2 text-xl font-semibold" style="font-family: var(--font-display);">
                                        {{ $post->title }}
                                    </div>
                                </div>
                            </div>

                            <div class="p-5">
                                @if(!empty($post->excerpt))
                                    <p class="text-sm text-slate-600 line-clamp-3">
                                        {{ $post->excerpt }}
                                    </p>
                                @else
                                    <p class="text-sm text-slate-500 line-clamp-3">
                                        Read this travel story and get tips for your Sri Lanka trip.
                                    </p>
                                @endif

                                <div class="mt-5 flex items-center justify-between">
                                    <span class="text-xs font-semibold tracking-[.22em] uppercase text-gold-700">
                                        Read More
                                    </span>
                                    <span
                                        class="h-10 w-10 rounded-2xl border border-slate-200 grid place-items-center text-slate-700
                                                                                                 group-hover:border-gold-500 group-hover:text-gold-700 transition">
                                        <i class="fa-solid fa-arrow-right"></i>
                                    </span>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <div class="mt-10">
                    {{ $posts->links() }}
                </div>
            @else
                <div class="mt-8 rounded-3xl border border-slate-200 bg-white p-8 text-center">
                    <div class="text-lg font-semibold">No blog posts yet</div>
                    <p class="mt-2 text-slate-600">Add your first post from the admin panel.</p>
                </div>
            @endif

        </div>
    </section>
@endsection