@extends('layouts.web')

@section('content')

<style>
    :root {
        --brand: #7D26C2;
        --brand-light: #9d53e6;
        --brand-lightest: #f3eaff;
        --brand-gradient: linear-gradient(135deg, #7D26C2, #9d53e6);
        --dark: #333;
        --muted: #666;
        --card-radius: 16px;
        --shadow: 0 8px 25px rgba(125, 38, 194, 0.12);
        --shadow-lg: 0 15px 40px rgba(125, 38, 194, 0.15);
    }

    /* Hero Section */
    .blog-hero{
      background: var(--brand-gradient);
      border-radius: var(--card-radius);
      overflow:hidden;
      margin: 2rem 0 3rem;
      position: relative;
      color: white;
      padding: 3rem 2rem;
    }
    .blog-hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><g fill="white" fill-opacity="0.05"><circle cx="400" cy="400" r="600"/><circle cx="400" cy="400" r="500"/><circle cx="400" cy="400" r="300"/></g></svg>');
    }
    .hero-content {
      position: relative;
      z-index: 2;
    }

    /* Blog Cards */
    .blog-card{
      background: white;
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
      height: 100%;
      margin-bottom: 2rem;
    }
    
    .blog-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }
    
    .blog-image{
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .blog-card:hover .blog-image{
      transform: scale(1.05);
    }
    
    .blog-content{
      padding: 1.5rem;
    }
    
    .blog-category{
      background: var(--brand-lightest);
      color: var(--brand);
      padding: 0.4rem 1rem;
      border-radius: 50px;
      font-size: 0.85rem;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 1rem;
    }
    
    .blog-title{
      font-weight: 700;
      color: var(--dark);
      margin-bottom: 1rem;
      font-size: 1.3rem;
      line-height: 1.4;
    }
    
    .blog-excerpt{
      color: var(--muted);
      margin-bottom: 1.5rem;
      font-size: 0.95rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .blog-meta{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--muted);
      font-size: 0.85rem;
      padding-top: 1rem;
      border-top: 1px solid rgba(125, 38, 194, 0.1);
    }

    /* Featured Post */
    .featured-post{
      background: white;
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      margin-bottom: 3rem;
      transition: all 0.3s ease;
    }
    
    .featured-post:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(125, 38, 194, 0.15);
    }
    
    .featured-image{
      width: 100%;
      height: 400px;
      object-fit: cover;
    }
    
    .featured-content{
      padding: 3rem;
    }
    
    .featured-badge{
      background: var(--brand-gradient);
      color: white;
      padding: 0.5rem 1.5rem;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 600;
      display: inline-block;
      margin-bottom: 1.5rem;
    }

    /* Sidebar */
    .sidebar-card{
      background: white;
      border-radius: var(--card-radius);
      padding: 2rem;
      box-shadow: var(--shadow);
      margin-bottom: 2rem;
    }
    
    .sidebar-title{
      color: var(--brand);
      font-weight: 700;
      margin-bottom: 1.5rem;
      padding-bottom: 1rem;
      border-bottom: 2px solid var(--brand-lightest);
    }
    
    .category-list{
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .category-list li{
      margin-bottom: 0.75rem;
    }
    
    .category-list a{
      color: var(--muted);
      text-decoration: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem;
      border-radius: 8px;
      transition: all 0.3s ease;
    }
    
    .category-list a:hover{
      background: var(--brand-lightest);
      color: var(--brand);
      padding-left: 1rem;
    }
    
    .category-count{
      background: var(--brand-lightest);
      color: var(--brand);
      padding: 0.25rem 0.75rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 600;
    }

    /* Search Box */
    .search-box{
      position: relative;
      margin-bottom: 1.5rem;
    }
    
    .search-input{
      border-radius: 12px;
      padding: 1rem 1rem 1rem 3rem;
      border: 2px solid #e8e0ff;
      font-size: 1rem;
      width: 100%;
      transition: all 0.3s ease;
    }
    
    .search-input:focus{
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(125, 38, 194, 0.1);
      outline: none;
    }
    
    .search-icon{
      position: absolute;
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--brand);
    }

    /* Pagination */
    .pagination-container{
      display: flex;
      justify-content: center;
      margin: 3rem 0;
    }
    
    .page-link{
      color: var(--brand);
      border: 2px solid #e8e0ff;
      margin: 0 0.25rem;
      border-radius: 10px;
      padding: 0.5rem 1rem;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      display: inline-block;
    }
    
    .page-link:hover,
    .page-link.active{
      background: var(--brand-gradient);
      color: white;
      border-color: var(--brand);
    }

    /* Animation */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease forwards;
    }
    
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }

    /* Blog Hero */
    .blog-hero {
        background: var(--brand-gradient);
        border-radius: var(--card-radius);
        padding: 3rem 2rem;
        margin: 2rem 0;
        color: white;
    }

    /* Status badges */
    .status-badge {
        background: rgba(125, 38, 194, 0.1);
        color: var(--brand);
        padding: 0.25rem 0.75rem;
        border-radius: 50px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* Debug info styling */
    .debug-info {
        background: #f8f9fa;
        border-left: 4px solid var(--brand);
        padding: 1rem;
        margin-bottom: 2rem;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .debug-info pre {
        margin: 0;
        color: var(--brand);
    }
</style>



<div class="container-fluid py-4">
    @php
        $publishedBlogs = $blogs->where('status', 'published');
    @endphp

    @if($publishedBlogs->count() > 0)
        <!-- Featured Post (Most Recent Published Blog) -->
        @php
            $featured = $publishedBlogs->first();
            $remainingBlogs = $publishedBlogs->skip(1);
        @endphp
        
        @if($featured)
        <div class="featured-post fade-in">
            <div class="row g-0">
                <div class="col-lg-6">
                    <img src="{{ $featured->feature_image ? asset($featured->feature_image) : 'https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }}" 
                         alt="{{ $featured->title }}" 
                         class="featured-image img-fluid">
                </div>
                <div class="col-lg-6">
                    <div class="featured-content">
                        <span class="featured-badge">Featured {{ ucfirst($featured->type) }}</span>
                        <h2 class="mb-3 fw-bold">{{ $featured->title }}</h2>
                        <p class="text-muted mb-4">{{ Str::limit(strip_tags($featured->content), 200) }}</p>
                        <div class="d-flex align-items-center justify-content-between mb-4">
                            <div class="text-muted">
                                <i class="bi bi-calendar me-1"></i> {{ $featured->created_at->format('M d, Y') }}
                            </div>
                            <span class="status-badge">{{ ucfirst($featured->type) }}</span>
                        </div>
                        <a href="{{ route('web.blog.view', $featured->slug) }}" class="btn-brand w-100 mt-4">
                            <i class="bi bi-book me-2"></i> Read Full Article
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Main Content -->
        <div class="row">
            <!-- Blog Posts -->
            <div class="col-lg-8">
                <div class="row">
                    @forelse($remainingBlogs as $index => $blog)
                        <div class="col-md-6 mb-4 fade-in stagger-{{ ($index % 3) + 1 }}">
                            <div class="blog-card">
                                <div class="image-container" style="height: 200px; overflow: hidden;">
                                    <img src="{{ $blog->feature_image ? asset($blog->feature_image) : 'https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80' }}" 
                                         alt="{{ $blog->title }}" 
                                         class="blog-image">
                                </div>
                                <div class="blog-content">
                                    <span class="blog-category">{{ ucfirst($blog->type) }}</span>
                                    <h3 class="blog-title">{{ Str::limit($blog->title, 60) }}</h3>
                                    <p class="blog-excerpt">{{ Str::limit(strip_tags($blog->content), 120) }}</p>
                                    <div class="blog-meta">
                                        <span><i class="bi bi-clock me-1"></i> {{ $blog->created_at->diffForHumans() }}</span>
                                        <span><i class="bi bi-calendar me-1"></i> {{ $blog->created_at->format('M d, Y') }}</span>
                                    </div>
                                    <a href="{{ route('web.blog.view', $blog->slug) }}" class="btn-brand w-100 mt-3" style="padding: 0.75rem;">
                                        Read More
                                    </a>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <p class="text-muted text-center">No more published blogs to display.</p>
                        </div>
                    @endforelse
                </div>

                <!-- Pagination (if needed) -->
                @if($publishedBlogs->count() > 6)
                <div class="pagination-container">
                    <a href="#" class="page-link active">1</a>
                    <a href="#" class="page-link">2</a>
                    <a href="#" class="page-link">3</a>
                    <a href="#" class="page-link">4</a>
                    <a href="#" class="page-link">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </div>
                @endif
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Search Box -->
                <div class="sidebar-card fade-in">
                    <div class="search-box">
                        <i class="bi bi-search search-icon"></i>
                        <input type="text" class="search-input" id="blogSearch" placeholder="Search articles..." onkeyup="searchBlogs()">
                    </div>
                </div>

                <!-- Categories (Grouped by Type) -->
                <div class="sidebar-card fade-in">
                    <h4 class="sidebar-title">Browse Categories</h4>
                    <ul class="category-list">
                        @php
                            $blogCount = $publishedBlogs->where('type', 'blog')->count();
                            $resourceCount = $publishedBlogs->where('type', 'resource')->count();
                        @endphp
                        <li><a href="#" onclick="filterByType('all')">All Articles <span class="category-count">{{ $publishedBlogs->count() }}</span></a></li>
                        <li><a href="#" onclick="filterByType('blog')">Blogs <span class="category-count">{{ $blogCount }}</span></a></li>
                        <li><a href="#" onclick="filterByType('resource')">Resources <span class="category-count">{{ $resourceCount }}</span></a></li>
                    </ul>
                </div>

                <!-- Popular/Recent Posts -->
                <div class="sidebar-card fade-in">
                    <h4 class="sidebar-title">Recent Articles</h4>
                    @forelse($publishedBlogs->take(3) as $recent)
                    <div class="popular-post mb-3">
                        <a href="{{ route('web.blog.view', $recent->slug) }}" class="text-decoration-none">
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="{{ $recent->feature_image ? asset($recent->feature_image) : 'https://i.pravatar.cc/150?img=' . ($recent->id + 10) }}" 
                                     alt="{{ $recent->title }}" 
                                     style="width: 60px; height: 60px; border-radius: 10px; object-fit: cover;">
                                <div>
                                    <div class="fw-bold" style="font-size: 0.9rem; color: var(--dark);">
                                        {{ Str::limit($recent->title, 40) }}
                                    </div>
                                    <small class="text-muted">{{ $recent->created_at->format('M d, Y') }}</small>
                                </div>
                            </div>
                        </a>
                    </div>
                    @empty
                        <p class="text-muted">No recent articles</p>
                    @endforelse
                </div>


            </div>
        </div>
    @else
        <div class="text-center py-5">
            <i class="bi bi-newspaper" style="font-size: 4rem; color: var(--brand-lightest);"></i>
            <h3 class="mt-4">No Published Articles Yet</h3>
            <p class="text-muted">We're working on creating valuable legal content for you. Please check back soon!</p>
        </div>
    @endif
</div>

<script>
// Search functionality
function searchBlogs() {
    const searchTerm = document.getElementById('blogSearch').value.toLowerCase();
    const blogCards = document.querySelectorAll('.blog-card');
    
    blogCards.forEach(card => {
        const title = card.querySelector('.blog-title')?.textContent.toLowerCase() || '';
        const excerpt = card.querySelector('.blog-excerpt')?.textContent.toLowerCase() || '';
        const category = card.querySelector('.blog-category')?.textContent.toLowerCase() || '';
        
        if (title.includes(searchTerm) || excerpt.includes(searchTerm) || category.includes(searchTerm)) {
            card.closest('.col-md-6').style.display = 'block';
        } else {
            card.closest('.col-md-6').style.display = 'none';
        }
    });
}

// Filter by type
function filterByType(type) {
    const blogCards = document.querySelectorAll('.blog-card');
    const categoryLinks = document.querySelectorAll('.category-list a');
    
    // Update active state
    categoryLinks.forEach(link => {
        link.classList.remove('active');
        link.style.background = 'transparent';
        link.style.color = '';
        
        if(link.textContent.toLowerCase().includes(type) || (type === 'all' && link.textContent.includes('All'))) {
            link.style.background = 'var(--brand-lightest)';
            link.style.color = 'var(--brand)';
        }
    });
    
    blogCards.forEach(card => {
        const cardCategory = card.querySelector('.blog-category')?.textContent.toLowerCase() || '';
        const container = card.closest('.col-md-6');
        
        if (type === 'all') {
            container.style.display = 'block';
        } else {
            if (cardCategory === type) {
                container.style.display = 'block';
            } else {
                container.style.display = 'none';
            }
        }
    });
}

// Newsletter subscription
function subscribeNewsletter(event) {
    event.preventDefault();
    const email = document.getElementById('newsletterEmail').value;
    const button = event.target.querySelector('button[type="submit"]');
    const originalText = button.innerHTML;
    
    if (!email || !email.includes('@')) {
        alert('Please enter a valid email address');
        return;
    }
    
    // Show loading state
    button.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Subscribing...';
    button.disabled = true;
    
    // Simulate API call
    setTimeout(() => {
        alert('Thank you for subscribing! You\'ll receive our latest legal insights.');
        document.getElementById('newsletterEmail').value = '';
        button.innerHTML = originalText;
        button.disabled = false;
    }, 1500);
}

// Prevent default for category links
document.querySelectorAll('.category-list a').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
    });
});
</script>

@endsection