@extends('layouts.frontend.app')
@section('title', 'Blog')
@section('content')
<section class="setion-cform pt-0">
    <section class="about-section">

    <div class="container">
        <div class="row">
            <div class="col-md-6 about-frist-row">
                <a href="/" class="back-btn">
                    <span class="svg-ic">
                       <i class="bi bi-arrow-left-circle"></i>
                    </span>
                    Back to Home
                </a>
                <h1>Blog</h1>
                <p>We're here to answer your questions and provide exceptional support</p>
            </div>
        </div>
    </div>
</section>
<div class="container my-5">


   <div class="row g-4">
    @if(count($blogs) > 0)
        @foreach($blogs as $blog)
            @php
                $file = $blog->image ?? 'default.png';
                $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                $fileUrl = asset('uploads/blog/' . $file);
            @endphp
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="card gradient-blog-card h-100 border-0 shadow-sm">
                    <!-- Media Section -->
                    <div class="gradient-header">
                        @if(in_array($ext, ['jpg','jpeg','png','gif','webp']))
                            <img src="{{ $fileUrl }}" alt="blog image" class="img-fluid blog-media">
                        @elseif(in_array($ext, ['mp4','webm','ogg']))
                            <video class="img-fluid blog-media" controls>
                                <source src="{{ $fileUrl }}" type="video/{{ $ext }}">
                                Your browser does not support the video tag.
                            </video>
                        @else
                            <img src="{{ asset('uploads/blog/default.png') }}" alt="default" class="img-fluid blog-media">
                        @endif
                    </div>

                    <div class="card-body text-center">
                        
                        <h5 class="card-title fw-bold"><a class="text-decoration-none text-dark" href="{{ route('blogs.details', $blog->slug) }}">{{ $blog->name }}</a></h5>
                        <p class="text-muted mb-2"><i class="bi bi-calendar-event"></i> {{ formatCustomDate($blog->created_at) }}</p>
                        {{-- <a href="{{ route('blogs.details', $blog->slug) }}" class="btn btn-primary btn-sm px-4 py-2">Read More</a> --}}
                    </div>
                </div>
            </div>
        @endforeach
    @endif
</div>
</section>
<!-- Custom CSS -->
<style>
.gradient-blog-card {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    background: #fff;
}
.gradient-blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 45px rgba(0,0,0,0.15);
}

.gradient-header {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.blog-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.card-category {
    font-size: 0.75rem;
    font-weight: 500;
    color: #764ba2;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 5px;
}

.card-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    margin-bottom: 8px;
    color: #2c3e50;
}

.btn-primary {
    background-color: #4361ee;
    border-radius: 25px;
    transition: background 0.3s;
}
.btn-primary:hover {
    background-color: #3a0ca3;
}

/* Responsive */
@media (max-width: 768px) {
    .gradient-blog-card {
        width: 100%;
    }
}
</style>
        <div class="mt-3">
        {{ $blogs->links('pagination::bootstrap-5') }}
        </div>
</div>
@endsection