@extends('admin.master')

@section('title')
    Blog Details
@endsection

@section('content')
    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-body">
            <!--begin::Top-->
            <div class="d-flex">
                <!--begin::Pic-->
                <div class="flex-shrink-0 mr-7">
                    <div class="symbol symbol-50 symbol-lg-120">
                        @if ($blog->main_image)
                            <img src="{{ asset('uploads/blogs/' . $blog->main_image) }}" alt="{{ $blog->main_image_alt }}" class="img-fluid object-fit-cover" />
                        @else
                            <p>No image available</p>
                        @endif
                    </div>

                </div>
                <!--end::Pic-->

                <!--begin: Info-->
                <div class="flex-grow-1">
                    <!--begin::Title-->
                    <div class="d-flex align-items-center justify-content-between flex-wrap mt-2">
                        <!--begin::User-->
                        <div class="mr-3">
                            <!--begin::Name-->
                            <div class="d-flex align-items-center text-dark font-size-h5 font-weight-bold mr-3">
                                {{ $blog->title }}
                            </div>
                            <div class="d-flex align-items-center text-dark font-size-h5 font-weight-bold mr-3">
                                <i>{{ $blog->slug }}</i>
                            </div>
                            <!--end::Name-->
                            <div class="d-flex flex-wrap my-2">
                                <!-- In Stock -->
                                <div class="text-success font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">
                                    <span class="svg-icon svg-icon-md svg-icon-success mr-1">
                                        <!-- SVG Icon for In Stock -->
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24" />
                                                <path d="M3.5,21 L20.5,21 C21.3284271,21 22,20.3284271 22,19.5 L22,8.5 C22,7.67157288 21.3284271,7 20.5,7 L10,7 L7.43933983,4.43933983 C7.15803526,4.15803526 6.77650439,4 6.37867966,4 L3.5,4 C2.67157288,4 2,4.67157288 2,5.5 L2,19.5 C2,20.3284271 2.67157288,21 3.5,21 Z" fill="#000000" />
                                            </g>
                                        </svg>
                                        <!-- End SVG Icon -->
                                    </span>
                                    {{ $blog->created_at->format('F d, Y') }}
                                </div>
                            </div>

                        </div>
                        <!--begin::User-->

                        <!--begin::Actions-->
                        <div class="my-lg-0 my-1">
                            <a href="{{ route('blogs.index') }}" class="btn btn-sm btn-light-info font-weight-bolder text-uppercase mr-2">Back</a>
                            <a href="{{ route('blogs.edit', $blog->id) }}" class="btn btn-sm btn-light-success font-weight-bolder text-uppercase">Edit</a>
                        </div>
                        <!--end::Actions-->
                    </div>
                    <!--end::Title-->

                    <!--begin::Content-->
                    <div class="d-flex align-items-center flex-wrap justify-content-between">
                        <!--begin::Description-->
                        <div class="flex-grow-1 font-weight-bold text-dark-50 py-2 py-lg-2 mr-5 text-justify">
                            {!! $blog->detail !!}
                        </div>
                        <!--end::Description-->

                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Info-->
            </div>
            <!--end::Top-->


        </div>
    </div>
    <!--end::Card-->
@endsection
