@extends('frontend.layouts.app')
@section('content')
    <!-- Breadcrumb -->
    <div class="breadcrumb-bar breadcrumb-bg text-center">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-12">
                    <h2 class="breadcrumb-title mb-2">Blog Detail</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center mb-0">
                            <li class="breadcrumb-item"><a href="index.php"><i class="isax isax-home5"></i></a></li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $blogdetail->title }}</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- /Breadcrumb -->

    <!-- Page Wrapper -->
    <div class="content">
        <div class="container">

            <!-- Blog Details -->
            <div class="row">
                <div class="col-lg-8 col-md-12">
                    <div class="card blog-details mb-4 mb-lg-0">
                        <div class="card-body">
                            <div class="blog-content">
                                <div class="blog-image mb-3">
                                    <img src="{{ asset('backend/assets/images/blog/' . $blogdetail->image) }}"
                                        onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';" alt="{{ $blogdetail->title }}" class="img-fluid rounded">
                                </div>
                                <div class="d-flex  align-items-center flex-wrap row-gap-2 mb-3">
                                    <a href="javascript:void(0);" class=" d-flex align-items-center fs-16 text-gray-9 pe-3 border-end me-3">
                                        <img src="{{ asset('frontend/assets/img/users/user-01.jpg') }}" alt="Img" class="img-fluid avatar avatar-sm rounded-circle me-2"> Kashi Boat Booking
                                    </a>
                                    <div class="pe-3 border-end me-3">
                                        <span class="d-flex align-items-center fs-16 text-gray-9 "><i class="isax isax-calendar-2 me-1"></i>{{ date('d F Y', strtotime($blogdetail->created_at)) }}</span>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <h2>{{ $blogdetail->title }}</h2>
                                </div>
                                <div class="mb-3">
                                    {!! $blogdetail->description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12">
                    <!-- Related Posts -->
                    <div class="card sticky-top mb-3">
                        <div class="card-header border-0 pb-0">
                            <div class="pb-3 border-bottom">
                                <h5><i class="ti ti-brand-blogger text-primary fs-16 me-2"></i>Related Posts</h5>
                            </div>
                        </div>
                        <div class="card-body pt-3">
                            @foreach($blogs as $data)
                            <div class="blog-post mb-3">
                                <div class="d-flex align-items-center">
                                    <div class="d-flex">
                                        <a href="{{ route('blogDetail', $data->slug) }}" class="avatar avatar-xxl me-2">
                                            <img src="{{ asset('backend/assets/images/blog/' . $data->image) }}"
                                                onerror="this.onerror=null;this.src='{{ asset('frontend/assets/img/img-not-found.png') }}';" class="rounded" alt="{{ $data->title }}">
                                        </a>
                                    </div>
                                    <div>
                                        <a href="{{ route('blogDetail', $data->slug) }}" class="two-line-ellipsis fs-14 fw-medium">{{ $data->title }}</a>
                                        <div class="d-flex align-items-center mt-2">
                                            <a href="javascript:void(0);" class="d-flex align-items-center border-end pe-2 me-2">
                                                <span class="avatar avatar-xs me-1">
                                                    <img src="{{ asset('frontend/assets/img/users/user-01.jpg') }}" class="blog-user-img rounded-circle border border-light" alt="img">
                                                </span>
                                                <p class="fs-14 text-truncate">Admin</p>
                                            </a>
                                            <p class="fs-14 text-truncate"><i class="isax isax-calendar-2 me-2"></i>{{ date('d F Y', strtotime($data->created_at)) }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- /Related Posts -->
                </div>
            </div>
            <!-- /Blog Details -->

        </div>
    </div>
    <!-- /Page Wrapper -->
@endsection