@extends('layouts.app')
@section('title','Blog — JobPortal')
@section('content')
<div style="background:#ffffff;min-height:100vh;">
    <section class="py-5 text-center position-relative overflow-hidden" style="background: linear-gradient(135deg, #fffbeb 0%, #fff1f2 100%); border-bottom: 1px solid #f1f5f9;">
        <div class="position-absolute" style="top:-50%; left:50%; transform:translateX(-50%); width:600px; height:600px; border:1px solid rgba(244,63,94,0.04); border-radius:50%; z-index:1;"></div>
        <div class="position-absolute" style="top:-40%; left:50%; transform:translateX(-50%); width:480px; height:480px; border:1px solid rgba(244,63,94,0.06); border-radius:50%; z-index:1;"></div>
        <div class="container position-relative py-3" style="z-index:2;">
            <h1 class="fw-900 text-dark mb-2" style="font-size:2.5rem; letter-spacing:-1px;">Blog</h1>
            <nav class="d-flex justify-content-center" style="--bs-breadcrumb-divider: '›';">
                <ol class="breadcrumb mb-0" style="font-size:0.95rem; font-weight:600;">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-muted text-decoration-none hover-teal">Home</a></li>
                    <li class="breadcrumb-item active text-teal-accent" aria-current="page">Blog</li>
                </ol>
            </nav>
        </div>
    </section>
    <div class="container py-5">
        @if($blogs->count())
        <div class="row g-4">
            @foreach($blogs as $blog)
            <div class="col-lg-4 col-md-6">
                <a href="{{ route('blog.show', $blog->slug) }}" class="card-glass d-block text-decoration-none h-100" style="overflow:hidden;">
                    @if($blog->thumbnail)
                    <img src="{{ asset('storage/'.$blog->thumbnail) }}" alt="{{ $blog->title }}" style="width:100%;height:200px;object-fit:cover;">
                    @else
                    <div style="height:200px;background:linear-gradient(135deg,rgba(79,70,229,0.3),rgba(6,182,212,0.2));display:flex;align-items:center;justify-content:center;font-size:4rem;">📝</div>
                    @endif
                    <div class="p-4">
                        @if($blog->blogCategory)<span class="badge mb-2" style="background:rgba(79,70,229,0.15);color:#818cf8;border-radius:20px;">{{ $blog->blogCategory->name }}</span>@endif
                        <h5 class="text-white fw-700 mb-2">{{ $blog->title }}</h5>
                        <p class="text-muted small mb-3">{{ Str::limit($blog->excerpt ?? strip_tags($blog->content), 100) }}</p>
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="text-muted" style="font-size:0.78rem;"><i class="far fa-calendar me-1"></i>{{ optional($blog->published_at)->format('d M Y') }}</span>
                            <span style="color:#818cf8;font-size:0.85rem;">Read more →</span>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
        <div class="d-flex justify-content-center mt-5">{{ $blogs->links() }}</div>
        @else
        <div class="card-glass p-5 text-center"><div style="font-size:4rem;">📝</div><h4 class="text-white mt-3">No Articles Yet</h4><p class="text-muted">Check back soon for career tips and insights.</p></div>
        @endif
    </div>
</div>
@endsection