@extends('frontend.layouts.template')
@section('content')
<div class="row box-banner" style="background: #F0F0F0;padding-bottom: 80px;">
    <div class="col-12 bg-what">

        <div class="box-topic">
            <div class="row" style="">
                <div class="col-sm-12 col-xl-1"></div>
                <div class="col-sm-12 col-xl-10 res-p-15">

                    <div class="text-center c-black f-topic-news" style="">
                        <b class="f-bold">WHAT WORKS</b>
                    </div>
                    <div class="row box-news" style="">
                        @if ($category)
                            @foreach ($category as $item)
                                <div class="col-6 col-sm-4 col-lg-3 col-res-what mb-4">
                                    <div class="box-img-w" style="overflow: hidden;">
                                        <a href="{{ url('what-works/'. $item->id .'/'. encodelink( $item->name ) ) }}" class="click-news-what" style="background: url({{ asset( $item->bg->path . $item->bg->filename ) }});">
                                            <img src="{{ asset( $item->bg->path . $item->bg->filename ) }}" alt="" id="imageid" style="opacity: 0">
                                        </a>
                                    </div>

                                    <a href="{{ url('what-works/'. $item->id .'/'. encodelink( $item->name ) ) }}" class="click-news  click-what">
                                        <div class="c-black" style="padding: 15px 0 5px;">
                                            <b class="topic">{{ $item->name }}</b>
                                        </div>
                                        <div class="c-black text-view">
                                            {{ count($item->blogs)  }} BLOGS
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="col-sm-12 col-xl-1"></div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('stylesheet')
	<link href="{{ asset('frontend/assetsnew/css/resources.css')}}" rel="stylesheet">
	<link href="{{ asset('frontend/assetsnew/css/about.css')}}" rel="stylesheet">
@endsection
@section('javascript')
    <script>
        var imgWidth = $("#imageid").width();
        $('.box-img-w').css({'height':imgWidth})
    </script>
@endsection