@extends('Frontend.index')
@section('content')

<style>
    /* Global & Typography */
    .postbox__text {
        font-size: 17px;
        line-height: 1.8;
        color: #333;
    }
    .postbox__text p {
        margin-bottom: 1.5rem;
    }
    .postbox__text img {
        border-radius: 12px;
        margin: 20px 0;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    }

    /* Article Header */
    .article-header {
        padding-top: 60px;
        padding-bottom: 40px;
        background: #fff;
    }
    .category-badge {
        background: #dc3545;
        color: #fff;
        padding: 5px 15px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 15px;
    }
    .article-title {
        font-size: 36px;
        font-weight: 800;
        line-height: 1.2;
        color: #1a1a1a;
        margin-bottom: 20px;
    }

    /* Meta Info */
    .article-meta {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        border-bottom: 1px solid #eee;
        padding-bottom: 25px;
        margin-bottom: 30px;
        color: #777;
        font-size: 14px;
    }
    .article-meta span i {
        color: #dc3545;
        margin-right: 5px;
    }

    /* WhatsApp Button Modern */
    .wa-float-btn {
        display: inline-flex;
        align-items: center;
        background: #25d366;
        color: white !important;
        padding: 12px 25px;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none !important;
        transition: 0.3s;
        margin-top: 20px;
    }
    .wa-float-btn:hover {
        background: #128c7e;
        transform: translateY(-2px);
    }

    /* Sidebar Styling */
    .sidebar__widget {
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 30px;
    }
    .sidebar__widget-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #dc3545;
        display: inline-block;
    }

    /* Recent Post Mini */
    .rc__post-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        transition: 0.3s;
    }
    .rc__post-thumb img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: 8px;
    }
    .rc__post-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 0;
    }
    .rc__post-title a:hover {
        color: #dc3545;
    }

    /* Baca Juga Cards */
    .svcase {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #eee;
        transition: 0.3s;
    }
    .svcase:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .svcase__img img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    @media (max-width: 768px) {
        .article-title { font-size: 28px; }
    }
</style>

<main style="background-color: #fcfcfc;">
    <div class="article-header">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10">
                    <a href="{{route('fe-kategori-details',$blogDetail->slug_kategori)}}" class="category-badge">
                        {{$blogDetail->kategori}}
                    </a>
                    <h1 class="article-title">{{$blogDetail->judul}}</h1>
                    <div class="article-meta">
                        <span><i class="fal fa-user-circle"></i> Oleh: {{$blogDetail->author}}</span>
                        <span><i class="fal fa-calendar-alt"></i> {{ date('d M Y', strtotime($blogDetail->created_at))}}</span>
                        <span><i class="fal fa-eye"></i> {{ $blogDetail->views }} Views</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="postbox__area pb-120">
        <div class="container">
            <div class="row">
                <div class="col-xxl-8 col-xl-8 col-lg-8">
                    <div class="postbox__wrapper">
                        <article class="postbox__item">
                            <div class="mb-40">
                                <img class="w-100 shadow-sm" style="border-radius: 16px;" 
                                     src="{{ url('Frontend/img/blog/'.$blogDetail->image) }}" alt="{{$blogDetail->judul}}">
                            </div>

                            <div class="postbox__text">
                                {!! $blogDetail->content !!}
                                
                                <hr class="my-5">
                                
                                <div class="contact-section text-center p-4 rounded-3" style="background: #f8f9fa; border: 1px dashed #ccc;">
                                    <h5>Punya pertanyaan lebih lanjut?</h5>
                                    <p class="small text-muted">Hubungi admin kami langsung melalui WhatsApp untuk konsultasi gratis.</p>
                                    <a href="https://api.whatsapp.com/send?phone=6285178277725&text=Halo,%20Saya%20Mau%20Bertanya%20Tentang:%20{{$blogDetail->judul}}" class="wa-float-btn">
                                        <i class="fab fa-whatsapp mr-10" style="font-size: 20px;"></i> Chat via WhatsApp
                                    </a>
                                </div>
                            </div>
                        </article>

                        <div class="related-post mt-80">
                            <h3 class="mb-30" style="font-weight: 800; position: relative; padding-left: 15px;">
                                <span style="position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #dc3545; border-radius: 2px;"></span>
                                Baca Juga
                            </h3>
                            <div class="row">
                                @foreach($bacaJuga as $value)
                                <div class="col-md-4 mb-30">
                                    <div class="svcase">
                                        <div class="svcase__img">
                                            <a href="{{ route('fe-blog-details',$value->slug_judul) }}">
                                                <img src="{{ url('Frontend/img/blog/'.$value->image) }}" alt="{{$value->judul}}">
                                            </a>
                                        </div>
                                        <div class="p-3">
                                            <h4 class="sv-case-sm-title" style="font-size: 15px; margin-bottom: 10px;">
                                                <a href="{{ route('fe-blog-details',$value->slug_judul) }}" style="color: #222;">{{ Str::limit($value->judul, 45) }}</a>
                                            </h4>
                                            <p style="font-size: 12px; color: #777; margin-bottom: 0;">{{ Str::limit($value->desc, 50) }}</p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-4 col-xl-4 col-lg-4">
                    <div class="sidebar__wrapper" style="position: sticky; top: 100px;">
                        <div class="sidebar__widget shadow-sm">
                            <h3 class="sidebar__widget-title">Cari Artikel</h3>
                            <div class="sidebar__search">
                                <form action="{{route('fe-blog-search')}}" method="GET">
                                    <div class="sidebar__search-input-2" style="position: relative;">
                                        <input type="search" name="q" placeholder="Ketik kata kunci..." 
                                               style="width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid #eee; background: #f9f9f9;">
                                        <button type="submit" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #dc3545;">
                                            <i class="far fa-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="sidebar__widget shadow-sm">
                            <h3 class="sidebar__widget-title">Artikel Terbaru</h3>
                            <div class="rc__post-wrapper">
                                @foreach($blogContent as $data)
                                <div class="rc__post-item">
                                    <div class="rc__post-thumb mr-15">
                                        <a href="{{ route('fe-blog-details',$data->slug_judul) }}">
                                            <img src="{{ url('Frontend/img/blog/'.$data->image) }}" alt="">
                                        </a>
                                    </div>
                                    <div class="rc__post-content">
                                        <h3 class="rc__post-title">
                                            <a href="{{ route('fe-blog-details',$data->slug_judul) }}">{{ Str::limit($data->judul, 50) }}</a>
                                        </h3>
                                        <span style="font-size: 11px; color: #999;">{{ date('d M Y', strtotime($data->created_at)) }}</span>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection