@extends('layouts.frontend.master')
@section('title')
    {{ __('UNIGUIDE | e-Learning website') }}
@endsection
@push('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/blog.css') }}">
@endpush

@section('seo')
    @foreach ($jsonLdData as $item)
        <script type="application/ld+json">
            {!! json_encode($item) !!}
        </script>
    @endforeach
@endsection
@section('content')
    <!-- Header Start -->
    <div class="container-fluid bg-primary py-5 mb-5 page-header uniH">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <h1 class="display-3 text-white animated slideInDown">
                        Blog
                    </h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item">
                                <a class="text-white" href="{{ route('home') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item text-white active" aria-current="page">
                                Blog
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->

    <!-- Blog Start-->
    <section>
        <div class="container">
            <div class="row">
                @foreach ($blogs as $blog)
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card cardRes">
                            <img src="{{ $blog->imagePath }}" alt="topicImg">
                            <div class="card-body">
                                <h2 class="card-title blogTitle line-clamp-2">{!! $blog->description !!}</h2>
                                <div class="card-foooter pt-5">
                                    <div class="name"><img src="{{ asset('frontend/img/uniguide .png') }}"
                                            alt="logo">{{ $blog->title }}</div>
                                    <div class="date">{{ $blog->created_at->format('d/m/Y') }}</div>
                                </div>
                                <a href="{{ route('frontend.blogs.show', $blog->slug) }}"
                                    class="btn btn-primary seeAll explore mt-4">Explore More</a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- Blog End-->


    @push('scripts')
    @endpush
@endsection