@extends('layouts.app')

@section('title', $BlogDetail->title ?? $Title)

@section('content')
<main>
    <section class="sec-1-single-1 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-10 offset-lg-1 offset-md-1">
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb list-unstyled d-flex flex-row gap-2 align-items-center m-0 ps-0 py-4">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-600 fs-7 hover-dark">Home</a></li>
                            <li class="breadcrumb-item">
                                <span class="icon-shape icon-xxs">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                        <path d="M6.125 4.5625L9.5625 7.84375L6.125 11.125" stroke="#626568" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </span>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="{{ url('/blogs') }}" class="text-600 fs-7 hover-dark">Blog</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="icon-shape icon-xxs">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                        <path d="M6.125 4.5625L9.5625 7.84375L6.125 11.125" stroke="#626568" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </span>
                            </li>
                            <li class="breadcrumb-item active text-dark fs-7" aria-current="page">
                                {{ $BlogDetail->title ?? 'Blog' }}
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        {{-- Feature Image --}}
        <div class="custom-container-2 py-5">
            @if(!empty($BlogDetail->image))
            {{-- assuming image path stored relative to storage: storage/app/public/... --}}
            <img class="rounded-16 w-100" src="{{ asset( (Str::startsWith($BlogDetail->image, ['http','/'])) ? $BlogDetail->image : 'storage/'.$BlogDetail->image ) }}" alt="{{ $BlogDetail->title }}" />
            @else
            <img class="rounded-16 w-100" src="{{ asset('assets/imgs/page/img-112.png') }}" alt="{{ $BlogDetail->title ?? 'Blog image' }}" />
            @endif
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-10 offset-lg-1 offset-md-1">
                    <div class="d-flex flex-column gap-3">

                        {{-- Meta: category + date + author (if available) --}}
                        <div class="d-flex gap-3 align-items-center">
                            @if(!empty($BlogDetail->category) && !empty($BlogDetail->category->name))
                            <a href="{{ url('/blogs/category/'.( $BlogDetail->category->slug ?? $BlogDetail->category->id )) }}" class="badge bg-1 fs-8">{{ $BlogDetail->category->name }}</a>
                            @endif

                            <small class="text-muted">
                                @if(!empty($BlogDetail->created_at))
                                {{ \Carbon\Carbon::parse($BlogDetail->created_at)->format('F j, Y') }}
                                @endif

                                @if(!empty($BlogDetail->author))
                                • By {{ $BlogDetail->author }}
                                @endif
                            </small>
                        </div>

                        {{-- Title --}}
                        <h1 class="mb-0">{{ $BlogDetail->title }}</h1>

                        {{-- Intro / excerpt (if exists) --}}
                        @if(!empty($BlogDetail->excerpt))
                        <p class="text-dark">{{ $BlogDetail->excerpt }}</p>
                        @endif

                        {{-- Body content (allow HTML) --}}
                        <div class="article-content text-dark">
                            {!! $BlogDetail->content !!}
                        </div>

                        {{-- Optional in-content images (if stored as json or relation) - simple fallback omitted --}}

                        {{-- Blockquote: use author/quote fields if available --}}
                        @if(!empty($BlogDetail->quote) || !empty($BlogDetail->quote_author))
                        <blockquote class="blockquote">
                            <p class="text-dark m-0 fs-22 fw-medium">{{ $BlogDetail->quote }}</p>
                            @if(!empty($BlogDetail->quote_author))
                            <p class="fs-7 mb-0">By <span class="text-dark">{{ $BlogDetail->quote_author }}</span></p>
                            @endif
                        </blockquote>
                        @endif

                        {{-- Suggested small tips list (if you have structured data) - fallback static from DB fields --}}
                        @if(!empty($BlogDetail->tips) && is_array($BlogDetail->tips))
                        <h4 class="mb-0">Tips</h4>
                        <ul class="list-unstyled ps-0 m-0">
                            @foreach($BlogDetail->tips as $tip)
                            <li>
                                <p class="text-dark m-0 fw-semi-bold">{{ $tip['title'] ?? '' }}: <span class="text-600 fw-regular">{{ $tip['text'] ?? '' }}</span></p>
                            </li>
                            @endforeach
                        </ul>
                        @endif

                        {{-- Conclusion (if provided) --}}
                        @if(!empty($BlogDetail->conclusion))
                        <h4 class="mb-0">Conclusion</h4>
                        <p class="text-dark m-0">{{ $BlogDetail->conclusion }}</p>
                        @endif

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

    <!--Related Post-->
    <section class="related-post sec-padding bg-white">
        <div class="container">
            <div class="row g-4">
                <div class="col-12">
                    <h5 class="mb-0">Recommended for You</h5>
                </div>

                @forelse($Blogs as $b)
                <div class="col-md-6 col-lg-3">
                    <div class="article card-5">
                        <div class="post-link">
                            <div class="hover-effect-1">
                                <div class="position-relative card-img-top thumbnail">
                                    <a href="{{ url('/blogs/'.$b->slug) }}">
                                        @if(!empty($b->image))
                                        <img src="{{ asset( (Str::startsWith($b->image, ['http','/'])) ? $b->image : 'storage/'.$b->image ) }}" alt="{{ $b->title }}" class="cover-image">
                                        @else
                                        <img src="{{ asset('assets/imgs/other/img-other-9.png') }}" alt="{{ $b->title }}" class="cover-image">
                                        @endif
                                    </a>

                                    @if(!empty($b->category) && !empty($b->category->name))
                                    <a href="{{ url('/blogs/category/'.($b->category->slug ?? $b->category->id)) }}" class="badge bg-1 fs-8">{{ $b->category->name }}</a>
                                    @endif
                                </div>
                            </div>
                            <div class="card-corner white no-border">
                                <a href="{{ url('/blogs/'.$b->slug) }}" class="arrow-box">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M13.75 6.75L19.25 12L13.75 17.25" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M19 12H4.75" stroke="#0E0E0F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </a>
                                <div class="curve-one"></div>
                                <div class="curve-two"></div>
                            </div>
                        </div>
                        <div class="card-body mt-4">
                            <a href="{{ url('/blogs/'.$b->slug) }}" class="hover-underline">
                                <h6 class="card-title mb-0">{{ Str::limit($b->title, 70) }}</h6>
                            </a>
                            @if(!empty($b->created_at))
                            <small class="d-block mt-2 text-muted">{{ \Carbon\Carbon::parse($b->created_at)->format('M d, Y') }}</small>
                            @endif
                        </div>
                    </div>
                </div>
                @empty
                <div class="col-12">
                    <p>No related posts found.</p>
                </div>
                @endforelse

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

</main>
@endsection