@extends('frontend.tmp-pro.main')
@section('content')
@include('frontend.tmp-pro.share.slide')

<div class="container">
    <div class="row">
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">

            <h4 style="padding-bottom: 15px;" id="list-cbet">{!! $getCategory->name !!}</h4>
            <div class="row pr-0 pl-0">
                <div class="col-md-12">
                    {!!$getCategory->description!!}
                </div>
                <div class="col-md-12 pb-3">
                    <span
                        class="d-block p-2 bg-light text-dark" style="font-weight: 600;">List of CBET sites around Cambodia</span>
                </div>
                @foreach($getCategory->getContent as $contentRelates)
                <div class="col-md-4">
                    <div class="card">
                        <a href="{{ route('mot.cbet.destination.detail', [$contentRelates->id,$contentRelates->slug]) }}">
                            {!! checkImage($contentRelates->thumb370x225,['class'=>'img-fluids card-img-top','title'=>$contentRelates->title,'alt'=>$contentRelates->title]) !!}
                        </a>
                        <div class="card-body">
                            <a href="{{ route('mot.cbet.destination.detail', [$contentRelates->id,$contentRelates->slug]) }}">
                                <h5 class="card-title c-t"
                                    style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                                    {!! $contentRelates->title!!}
                         </h5>
                            </a>
                            <p class="card-text t-sm">{!! str_limit($contentRelates->short_desc,150) !!}</p>
                            <a href="{{ route('mot.cbet.destination.detail', [$contentRelates->id,$contentRelates->slug]) }}"
                               class="btn btn-primary btn-sm">Read More</a>
                        </div>
                    </div>
                    <br>
                </div>
                @endforeach
            </div>

        </div>
        <div class="col-lg-3 col-sm-3 col-xs-12">
            @include('frontend.tmp-pro.share.rightside_province')
        </div>
    </div>
</div>

@endsection
@push('css')
<style>
    .t-sm {
        font-size: 16px;
        line-height: 20px;
        /*text-align: justify;*/
    }
    @media (max-width: 736px) {
        .p-l{
            padding-left: 15px !important;
        }
    }
    #list-cbet {
        padding-top: 25px;
        font-size: 24px;
    }
   
    .background {
        color: #022469b5 !important;
        background-color: #e8e8e869 !important;
        line-height: 30px;
        text-transform: uppercase;
        font-size: 12px;
    }

    .background.active {
        color: #356ad8 !important;
        background-color: white !important;
    }


    .blog-middle {
        margin-top: auto;
        margin-bottom: auto;

    }
    .blockquote .list-group .list-group-item a{
        line-height: 32px;
        font-weight: 600;
    }
</style>
@endpush
@push('jsscript')
<script>
    jQuery(document).ready(function () {
     $('html, body').animate({
        scrollTop: $("#list-cbet").offset().top
    }, 1000);
    }); 
</script>
@endpush