@extends('frontend.app')
@section('cssFiles')
    <style>
        .blog-card.style4 .blog-content h3 a{
            font-family: "Ubuntu", sans-serif;
        }
        .service-card .thumb img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            aspect-ratio: 3 / 2;
        }
        .breadcumb {
            overflow: hidden;
            border-radius: 0px 0px 20px 20px;
            background-color: var(--gray1);
            padding: 120px 0 60px 0;
            margin: 0 auto;
            position: relative;
        }
        .single-sidebar-widget.style2 .message-left-part .contact-form form input[type=tel] {
            width: 100%;
            padding: 16px 30px;
            border-radius: 999px;
            border: 1px solid #E9E9E9;
            color: var(--title);
            font-family: "Ubuntu", sans-serif;
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
        }

        .single-sidebar-widget.style2 .message-left-part .contact-form form input[type=text] {
            width: 100%;
            padding: 16px 30px;
            border-radius: 999px;
            border: 1px solid #E9E9E9;
            color: var(--title);
            font-family: "Ubuntu", sans-serif;
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
        }

        .single-sidebar-widget.style2 .message-left-part .contact-form form input[type=email] {
            width: 100%;
            padding: 16px 30px;
            border-radius: 999px;
            border: 1px solid #E9E9E9;
            color: var(--title);
            font-family: "Ubuntu", sans-serif;
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
        }
        .footer-section .footer-widgets-wrapper.style2 {
            padding: 80px 0 82px 0;
        }
    </style>
@endsection
@section('content')
    <div class="breadcumb">
        <div class="container">
            <div class="breadcumb-wrapper">
                <div class="page-heading">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">Blog</h1>
                    <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                        <li><a href="{{url('anasayfa')}}">Anasayfa</a></li>
                        <li><i class="fas fa-chevron-right"></i></li>
                        <li>Blog</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="services-section section-padding fix">
        <div class="container">
            <div class="service-wrapper style4">
                <div class="row gy-5 ">
                    @if(!empty($blogs) && $blogs->count() > 0)
                        @foreach($blogs as $blog)
                            <div class="col-xl-4 col-md-6">
                                <div class="service-card style4">
                                    <div class="thumb">
                                        <a href="{{url('blog/'.$blog->categoryslug.'/'.$blog->slug)}}" title="{{$blog->title}}">
                                            <img src="{{url('/images/blogs/' .$blog->image)}}" alt="{{$blog->title}}">
                                        </a>
                                    </div>
                                    <div class="content">
                                        <div class="blog-meta">
                                            <div class="date"><i class="fa-regular fa-calendar-days"></i> {{date('d.m.Y H:i',strtotime($blog->created_at))}}</div>
                                        </div>
                                        <h3>
                                            <a href="{{url('blog/'.$blog->categoryslug.'/'.$blog->slug)}}" title="{{$blog->title}}">{{$blog->title}}</a>
                                        </h3>
                                        <p class="text">{!! Illuminate\Support\Str::limit($blog->desc, 180) !!}</p>
                                        <div class="btn-wrapper">
                                            <a class="gt-btn gt-btn-icon-2" href="{{url('blog/'.$blog->categoryslug.'/'.$blog->slug)}}" title="{{$blog->title}}">Devamını Okuyun</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                    @if (isset($blogs) && $blogs->hasPages())
                        <div class="pagination-wrapper">
                            <ul>
                                @for ($i = 1; $i <= $blogs->lastPage(); $i++)
                                    @if($blogs->currentPage() == $i)
                                        <li><a href="javascript:;">{{ $i }}</a></li>
                                    @else
                                        <li><a href="{{url('/blog?page='.($i == 1 ? '' : $i))}}">{{ $i }}</a></li>
                                    @endif
                                @endfor
                            </ul>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @include('frontend.inc.faq')
@endsection