@extends('Website.Layout.App')

@push('css')
    <link href="{{ asset('assets/css/custom/blog_detail.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/custom/common.css') }}" rel="stylesheet">
@endpush
@section('content')
<div class="jumbotron text-center bg-body-tertiary">
    <div class="container">
        <h1 class="text-body-emphasis">{{$blog->title}}</h1>
    </div>
</div>

<div class="container mt-5">
    <div style="text-align: center;object-fit: contain;height:300px;">
        <img src="{{ asset($blog->image_url) }}" class="img-fluid" style="height: 100%;width:100%;object-fit: contain">   
    </div>
    <div class="row mt-3">
        <div class="col-md-2 col-12">
        </div>
        <div class="col-md-6 col-12">
            <div class="description" style="text-align: justify">
                {!! $blog->description !!}
            </div>
        </div>
        <div class="col-md-4 col-12">
            @if(count($categories))
                <div class="card our-services">
                    <div class="card-body text-center">
                        <h3 class="card-title text-white font-weight-bold">Our Services</h3>
                    </div>
                    <ul class="list-group list-group-flush">
                        @foreach ($categories as $c)
                            <li class="list-group-item">
                                <a href="{{url('category/'.$c->slug)}}" class="text-white">{{$c->category_name}}</a>
                            </li>    
                        @endforeach
                    </ul>
                    <div class="card-body text-center py-3">
                        <a href="{{url('all-service')}}" class="card-link">All Services</a>
                    </div>
              </div>
            @endif
        </div>
    </div>
</div>

@endsection