@extends('frontend.layouts.main')

@section('title', $article->title . ' - Blog - ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@section('content')
<!-- Page Header -->
<div class="page-header position-relative overflow-hidden" style="background: var(--gradient-primary); padding: 100px 0 80px;">
    <div class="container position-relative" style="z-index: 2;">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <nav aria-label="breadcrumb" class="mb-3" data-aos="fade-up">
                    <ol class="breadcrumb justify-content-center breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}" class="text-white text-decoration-none">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('frontend.blog') }}" class="text-white text-decoration-none">Blog</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">Artikel</li>
                    </ol>
                </nav>
                <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                    <span class="badge bg-white bg-opacity-25 text-white px-4 py-2 rounded-pill fw-bold mb-3" style="font-size: 0.95rem; backdrop-filter: blur(10px);">
                        <i class="fas fa-newspaper me-2"></i>Artikel Blog
                    </span>
                    <h1 class="display-4 fw-bold text-white mb-4" style="text-shadow: 0 2px 10px rgba(0,0,0,0.2);">{{ $article->title }}</h1>
                    <div class="d-flex justify-content-center align-items-center gap-4 flex-wrap text-white">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-white me-2" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-user text-primary"></i>
                            </div>
                            <div class="text-start">
                                <small class="d-block opacity-75">Penulis</small>
                                <strong>{{ $article->author ?? 'Admin LPK' }}</strong>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-calendar-alt fa-lg me-2"></i>
                            <div class="text-start">
                                <small class="d-block opacity-75">Dipublikasikan</small>
                                <strong>{{ $article->created_at->format('d M Y') }}</strong>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock fa-lg me-2"></i>
                            <div class="text-start">
                                <small class="d-block opacity-75">Waktu Baca</small>
                                <strong>{{ ceil(str_word_count(strip_tags($article->content)) / 200) }} menit</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="position-absolute top-0 end-0 opacity-10" style="font-size: 25rem; z-index: 1; color: white;">
        <i class="fas fa-blog"></i>
    </div>
</div>

<!-- Featured Image -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10" data-aos="fade-up">
                <div class="card border-0 shadow-lg" style="border-radius: 20px; overflow: hidden;">
                    @if($article->image)
                        @php
                            $imagePath = 'storage/blog/' . $article->image;
                            $imageExists = file_exists(public_path($imagePath));
                        @endphp
                        @if($imageExists)
                            <img src="{{ asset($imagePath) }}" class="img-fluid w-100" alt="{{ $article->title }}" style="max-height: 500px; width: 100%; object-fit: cover; object-position: center;">
                        @else
                            <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=600&fit=crop&q=80" class="img-fluid w-100" alt="{{ $article->title }}" style="max-height: 500px; width: 100%; object-fit: cover; object-position: center;">
                        @endif
                    @else
                        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=600&fit=crop&q=80" class="img-fluid w-100" alt="{{ $article->title }}" style="max-height: 500px; width: 100%; object-fit: cover; object-position: center;">
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Blog Content -->
<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Article Meta -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);" data-aos="fade-up">
                    <div class="card-body p-4">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <div class="d-flex align-items-center">
                                    <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(30,64,175,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-eye fa-lg text-primary"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-bold mb-0">{{ rand(150, 500) }}</h5>
                                        <small class="text-muted">Pembaca</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center">
                                    <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(16,185,129,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-comments fa-lg text-success"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-bold mb-0">{{ rand(5, 25) }}</h5>
                                        <small class="text-muted">Komentar</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="d-flex align-items-center">
                                    <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(239,68,68,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-heart fa-lg text-danger"></i>
                                    </div>
                                    <div>
                                        <h5 class="fw-bold mb-0">{{ rand(20, 80) }}</h5>
                                        <small class="text-muted">Likes</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Article Content -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-up">
                    <div class="card-body p-4 p-md-5">
                        <div class="article-content text-muted lh-lg" style="font-size: 1.1rem;">
                            {!! $article->content !!}
                        </div>
                    </div>
                </div>

                <!-- Tags -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-up">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-3">
                            <i class="fas fa-tags text-primary me-2"></i>Tags
                        </h5>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">Pelatihan Kerja</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">Tips Karir</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">Pengembangan Diri</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">LPK</span>
                            <span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2">Sertifikasi</span>
                        </div>
                    </div>
                </div>

                <!-- Share Section -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px; background: var(--gradient-primary);" data-aos="fade-up">
                    <div class="card-body p-4 text-white">
                        <h5 class="fw-bold mb-3">
                            <i class="fas fa-share-alt me-2"></i>Bagikan Artikel Ini
                        </h5>
                        <div class="d-flex flex-wrap gap-2">
                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-light px-4 py-2" style="border-radius: 10px;">
                                <i class="fab fa-facebook me-2"></i>Facebook
                            </a>
                            <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}" target="_blank" class="btn btn-light px-4 py-2" style="border-radius: 10px;">
                                <i class="fab fa-twitter me-2"></i>Twitter
                            </a>
                            <a href="https://wa.me/?text={{ urlencode($article->title . ' - ' . url()->current()) }}" target="_blank" class="btn btn-light px-4 py-2" style="border-radius: 10px;">
                                <i class="fab fa-whatsapp me-2"></i>WhatsApp
                            </a>
                            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-light px-4 py-2" style="border-radius: 10px;">
                                <i class="fab fa-linkedin me-2"></i>LinkedIn
                            </a>
                            <button class="btn btn-light px-4 py-2" style="border-radius: 10px;" onclick="window.print()">
                                <i class="fas fa-print me-2"></i>Cetak
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Author Bio -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-up">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">
                            <i class="fas fa-user-edit text-primary me-2"></i>Tentang Penulis
                        </h5>
                        <div class="d-flex align-items-start">
                            <div class="rounded-circle bg-primary me-3" style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                                <i class="fas fa-user fa-2x text-white"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">{{ $article->author ?? 'Admin PT Bumenjaya Praduta Abadi' }}</h5>
                                <p class="text-muted mb-3">Content Writer & Career Consultant di PT Bumenjaya Praduta Abadi. Berpengalaman lebih dari 5 tahun dalam bidang pengembangan SDM dan pelatihan kerja.</p>
                                <div class="d-flex gap-2">
                                    @if($contactInfo->facebook ?? false)
                                        <a href="{{ $contactInfo->facebook }}" target="_blank" class="btn btn-sm btn-outline-primary" style="border-radius: 8px;">
                                            <i class="fab fa-facebook"></i>
                                        </a>
                                    @endif
                                    @if($contactInfo->instagram ?? false)
                                        <a href="{{ $contactInfo->instagram }}" target="_blank" class="btn btn-sm btn-outline-danger" style="border-radius: 8px;">
                                            <i class="fab fa-instagram"></i>
                                        </a>
                                    @endif
                                    @if($contactInfo->email ?? false)
                                        <a href="mailto:{{ $contactInfo->email }}" class="btn btn-sm btn-outline-secondary" style="border-radius: 8px;">
                                            <i class="fas fa-envelope"></i>
                                        </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Related Articles -->
                @if($relatedArticles->count() > 0)
                <div class="mb-4" data-aos="fade-up">
                    <h4 class="fw-bold mb-4">
                        <i class="fas fa-newspaper text-primary me-2"></i>Artikel Terkait
                    </h4>
                    <div class="row g-3">
                        @foreach($relatedArticles as $related)
                        <div class="col-md-6">
                            <div class="card border-0 shadow-sm h-100 hover-card" style="border-radius: 15px; transition: all 0.3s ease;">
                                <div class="position-relative" style="height: 200px; overflow: hidden; border-radius: 15px 15px 0 0;">
                                    @php
                                        $relatedImagePath = $related->image ? 'storage/blog/' . $related->image : null;
                                        $relatedImageExists = $relatedImagePath && file_exists(public_path($relatedImagePath));
                                    @endphp
                                    @if($relatedImageExists)
                                        <img src="{{ asset($relatedImagePath) }}" class="img-fluid w-100 h-100" alt="{{ $related->title }}" style="object-fit: cover; object-position: center;">
                                    @else
                                        <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800&h=400&fit=crop&q=80" class="img-fluid w-100 h-100" alt="{{ $related->title }}" style="object-fit: cover; object-position: center;">
                                    @endif
                                    <div class="position-absolute top-0 start-0 m-3">
                                        <span class="badge bg-primary px-3 py-2">
                                            <i class="fas fa-calendar me-1"></i>{{ $related->created_at->format('d M Y') }}
                                        </span>
                                    </div>
                                </div>
                                <div class="card-body p-3">
                                    <h6 class="fw-bold mb-2">
                                        <a href="{{ route('frontend.blog-detail', $related->slug) }}" class="text-decoration-none text-dark hover-link">
                                            {{ Str::limit($related->title, 60) }}
                                        </a>
                                    </h6>
                                    <p class="text-muted small mb-3">{{ Str::limit(strip_tags($related->content), 100) }}</p>
                                    <a href="{{ route('frontend.blog-detail', $related->slug) }}" class="btn btn-sm btn-outline-primary" style="border-radius: 8px;">
                                        Baca Selengkapnya <i class="fas fa-arrow-right ms-1"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <div class="sticky-sidebar" style="position: sticky; top: 100px;">
                    <!-- Quick Info -->
                    <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-left">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-4">
                                <i class="fas fa-info-circle text-primary me-2"></i>Info Artikel
                            </h5>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted"><i class="fas fa-user me-2 text-primary"></i>Penulis</span>
                                        <span class="fw-bold">{{ $article->author ?? 'Admin' }}</span>
                                    </div>
                                </li>
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted"><i class="fas fa-calendar me-2 text-primary"></i>Tanggal</span>
                                        <span class="fw-bold">{{ $article->created_at->format('d M Y') }}</span>
                                    </div>
                                </li>
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted"><i class="fas fa-clock me-2 text-primary"></i>Waktu Baca</span>
                                        <span class="fw-bold">{{ ceil(str_word_count(strip_tags($article->content)) / 200) }} menit</span>
                                    </div>
                                </li>
                                <li class="mb-0">
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted"><i class="fas fa-align-left me-2 text-primary"></i>Kata</span>
                                        <span class="fw-bold">{{ number_format(str_word_count(strip_tags($article->content))) }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- CTA Card -->
                    <div class="card border-0 shadow-lg mb-4" style="border-radius: 20px; background: var(--gradient-primary);" data-aos="fade-left" data-aos-delay="100">
                        <div class="card-body p-4 text-white text-center">
                            <div class="icon-wrapper mx-auto mb-3" style="width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-graduation-cap fa-2x"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Tertarik dengan Program Kami?</h5>
                            <p class="mb-4 opacity-90">Daftar sekarang dan mulai perjalanan karir Anda bersama kami!</p>
                            <a href="{{ route('frontend.programs') }}" class="btn btn-light btn-lg w-100 fw-bold mb-2" style="border-radius: 12px;">
                                <i class="fas fa-book-open me-2"></i>Lihat Program
                            </a>
                            <a href="{{ route('frontend.contact') }}" class="btn btn-outline-light btn-lg w-100 fw-bold" style="border-radius: 12px;">
                                <i class="fas fa-phone me-2"></i>Hubungi Kami
                            </a>
                        </div>
                    </div>

                    <!-- Latest Articles -->
                    <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-left" data-aos-delay="200">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-4">
                                <i class="fas fa-fire text-danger me-2"></i>Artikel Terbaru
                            </h5>
                            @php
                                $latestArticles = \App\Models\BlogArticle::where('id', '!=', $article->id)
                                    ->orderBy('created_at', 'desc')
                                    ->take(3)
                                    ->get();
                            @endphp
                            @foreach($latestArticles as $latest)
                            <div class="mb-3 pb-3 border-bottom">
                                <a href="{{ route('frontend.blog-detail', $latest->slug) }}" class="text-decoration-none">
                                    <div class="d-flex">
                                        @php
                                            $latestImagePath = $latest->image ? 'storage/blog/' . $latest->image : null;
                                            $latestImageExists = $latestImagePath && file_exists(public_path($latestImagePath));
                                        @endphp
                                        @if($latestImageExists)
                                            <img src="{{ asset($latestImagePath) }}" class="rounded me-3" alt="{{ $latest->title }}" style="width: 80px; height: 80px; object-fit: cover; object-position: center; flex-shrink: 0;">
                                        @else
                                            <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=200&h=200&fit=crop&q=80" class="rounded me-3" alt="{{ $latest->title }}" style="width: 80px; height: 80px; object-fit: cover; object-position: center; flex-shrink: 0;">
                                        @endif
                                        <div class="flex-grow-1">
                                            <h6 class="fw-bold mb-1 text-dark">{{ Str::limit($latest->title, 50) }}</h6>
                                            <small class="text-muted">
                                                <i class="fas fa-calendar me-1"></i>{{ $latest->created_at->format('d M Y') }}
                                            </small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endforeach
                            <a href="{{ route('frontend.blog') }}" class="btn btn-outline-primary w-100 mt-2" style="border-radius: 10px;">
                                Lihat Semua Artikel <i class="fas fa-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Contact Card -->
                    <div class="card border-0 shadow-sm" style="border-radius: 20px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);" data-aos="fade-left" data-aos-delay="300">
                        <div class="card-body p-4 text-center">
                            <div class="icon-wrapper mx-auto mb-3" style="width: 60px; height: 60px; background: rgba(245,158,11,0.3); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-question-circle fa-2x text-warning"></i>
                            </div>
                            <h6 class="fw-bold mb-2">Punya Pertanyaan?</h6>
                            <p class="text-muted small mb-3">Tim kami siap membantu Anda</p>
                            <a href="{{ route('frontend.contact') }}" class="btn btn-warning w-100 fw-bold" style="border-radius: 10px;">
                                <i class="fas fa-comments me-2"></i>Hubungi Kami
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter Section -->
<section class="py-5 my-5 position-relative overflow-hidden" style="background: var(--gradient-primary);">
    <div class="container position-relative" style="z-index: 2;">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center text-white" data-aos="fade-up">
                <div class="icon-wrapper mx-auto mb-4" style="width: 80px; height: 80px; background: rgba(255,255,255,0.2); border-radius: 20px; display: flex; align-items: center; justify-content: center;">
                    <i class="fas fa-envelope-open-text fa-2x"></i>
                </div>
                <h2 class="display-5 fw-bold mb-3">Dapatkan Update Terbaru</h2>
                <p class="lead mb-4">Berlangganan newsletter kami untuk mendapatkan artikel, tips, dan info program terbaru</p>
                <form class="row g-2 justify-content-center">
                    <div class="col-md-6">
                        <input type="email" class="form-control form-control-lg" placeholder="Masukkan email Anda" style="border-radius: 12px; border: none;">
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-light btn-lg w-100 fw-bold" style="border-radius: 12px;">
                            <i class="fas fa-paper-plane me-2"></i>Subscribe
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="position-absolute top-0 end-0 opacity-10" style="font-size: 20rem; z-index: 1;">
        <i class="fas fa-envelope"></i>
    </div>
</section>
@endsection

@push('styles')
<style>
    .breadcrumb-custom {
        background: transparent;
        margin-bottom: 0;
    }
    
    .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
        color: rgba(255, 255, 255, 0.7);
        padding: 0 0.5rem;
    }
    
    .breadcrumb-custom .breadcrumb-item a {
        color: white !important;
        text-decoration: none;
        transition: all 0.3s ease;
        opacity: 0.9;
    }
    
    .breadcrumb-custom .breadcrumb-item a:hover {
        opacity: 1;
        text-decoration: underline;
    }
    
    .breadcrumb-custom .breadcrumb-item.active {
        color: white !important;
        opacity: 1;
    }
    
    .article-content {
        line-height: 1.8;
    }
    
    .article-content p {
        margin-bottom: 1.5rem;
    }
    
    .article-content h2,
    .article-content h3,
    .article-content h4 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: bold;
        color: #1e293b;
    }
    
    .article-content ul,
    .article-content ol {
        margin-bottom: 1.5rem;
        padding-left: 2rem;
    }
    
    .article-content li {
        margin-bottom: 0.5rem;
    }
    
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 15px;
        margin: 2rem 0;
    }
    
    .article-content blockquote {
        border-left: 4px solid #1e40af;
        padding-left: 1.5rem;
        margin: 2rem 0;
        font-style: italic;
        color: #64748b;
    }
    
    .sticky-sidebar {
        transition: all 0.3s ease;
    }
    
    @media (max-width: 991px) {
        .sticky-sidebar {
            position: relative !important;
            top: 0 !important;
        }
    }
    
    .card {
        transition: all 0.3s ease;
    }
    
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }
    
    .btn {
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }
    
    .hover-link {
        transition: color 0.3s ease;
    }
    
    .hover-link:hover {
        color: #1e40af !important;
    }
    
    /* Image container to prevent layout shift */
    .img-container {
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    
    .img-container img {
        display: block;
        width: 100%;
        height: 100%;
    }
</style>
@endpush