@extends('web.layout.default')
@section('page_title')
    | {{ trans('labels.blogs') }}
@endsection
@section('content')
    <div class="breadcrumb-sec">
        <div class="container">
            <div class="breadcrumb-sec-content">
                <nav class="text-dark d-flex breadcrumb-divider" aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li
                            class="breadcrumb-item {{ session()->get('direction') == '2' ? 'breadcrumb-item-rtl ps-0' : '' }}">
                            <a class="text-dark" href="{{ URL::to('/') }}">{{ trans('labels.home') }}</a>
                        </li>
                        <li
                            class="breadcrumb-item {{ session()->get('direction') == '2' ? 'breadcrumb-item-rtl ps-0' : '' }}">
                            <a class="text-primary fw-bold" href="javascript:void(0)">{{ trans('labels.blogs') }}</a>
                        </li>
                        <li
                            class="breadcrumb-item {{ session()->get('direction') == '2' ? 'breadcrumb-item-rtl ps-0' : '' }} text-primary fw-bold active">
                            {{ $getblogdata->title }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="my-5">
        <div class="container">
            <h3 class="fw-bold fs-2 color-changer mb-4 truncate-2">{{ trans('labels.blogs_details') }}
            </h3>
            <div class="row">
                <div class="col-lg-12 mb-lg-0 mb-4">
                    <div class="blog-details">
                        <div class="card p-0">
                            <img src="{{ helper::image_path($getblogdata->image) }}" class="card-img-top" alt="...">
                            <div class="card-body">
                                <div class="row justify-content-between">
                                    <div class="col-auto blog-date mb-3">
                                        <span
                                            class="text-muted fw-600">{{ date('j F Y', strtotime($getblogdata->created_at)) }}</span>
                                    </div>
                                </div>
                                <h4 class="card-title fw-bold dark_color mb-3">{{ $getblogdata->title }}</h4>
                                <p class="card-text text-muted">{{ $getblogdata->description }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    @if (count($recentblogs) > 0)
        <section class="my-5">
            <div class="blog-wrapper">
                <div class="container">
                    <div class="row align-items-center justify-content-between my-5 px-2">
                        <div class="col-auto blog-heading">
                            <h2 class="mb-0 fw-800 color-changer text-capitalize">{{ trans('labels.recent_blogs') }}</h2>
                        </div>
                        <div class="col-auto">
                            <a href="{{ route('blogs') }}" class="btn btn-primary px-4">{{ trans('labels.view_all') }} <i
                                    class="fa-regular fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="blog-slider owl-carousel owl-theme">
                        @foreach ($recentblogs as $bloglist)
                            <div class="item m-2">
                                <div class="card card-hover rounded-4 overflow-hidden">
                                    <a href="{{ URL::to('/blogs-' . $bloglist->slug) }}"><img
                                            src="{{ helper::image_path($bloglist->image) }}" class="card-img-top"
                                            alt="..."></a>
                                    <div class="card-body px-3 pb-0">
                                        <h5 class="card-title fw-bold dark_color"><a
                                                href="{{ URL::to('/blogs-' . $bloglist->slug) }}"
                                                class="dark_color">{{ $bloglist->title }}</a></h5>
                                        <p class="fs-7 text-muted m-0">{{ Str::limit($bloglist->description, 80) }}</p>
                                    </div>

                                    <div class="card-footer border-0 bg-transparent px-3">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="col-auto mb-0 blog-date">
                                                <span
                                                    class="text-muted fw-600">{{ helper::date_format($bloglist->created_at) }}</span>
                                            </div>
                                            <a href="{{ URL::to('/blogs-' . $bloglist->slug) }}"
                                                class="blog-color-text border-0 fs-7 {{ session()->get('direction') == '2' ? 'float-start' : 'float-end' }}">{{ trans('labels.read_more') }}
                                                <i class="fa-light fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif

@endsection

@section('scripts')
    <script>
        $('.blog-slider').owlCarousel({
            rtl: "{{ session('direction') == 2 }}" ? true : false,
            loop: true,
            margin: 5,
            nav: false,
            dots: false,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 2
                },
                768: {
                    items: 3
                },
                1024: {
                    items: 4
                }
            }
        })
    </script>
@endsection