@extends('front.layouts.app')
@section('css')

@endsection
@section('content')

<section class="work-sec inner-v">
    <div class="container">
        <div class="tabs-style">
            <ul class="nav nav-pills justify-content-center no-border" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" data-toggle="pill" data-target="#tab0" type="button" role="tab"
                        aria-selected="true">{{__('front.projects-All')}}</button>
                </li>
                @foreach($cats as $cat)
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-toggle="pill" data-target="#tab{{$cat->id}}" type="button" role="tab"
                        aria-selected="false">{{$cat->title}}</button>
                </li>
                @endforeach
                
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="tab0" role="tabpanel">
                    <div class="row">
                        @foreach($projects as $item)
                        <div class="col-lg-6 pb-4">
                            <div class="show-card">
                                <a href="{{route('page.project', $item->slug)}}">
                                    <img src="{{getImage($item->large_image)}}" alt="{{$item->title}}">
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @foreach($cats as $cat)
                <div class="tab-pane fade" id="tab{{$cat->id}}" role="tabpanel">
                    <div class="row">
                        @foreach($projects->where('category_id', $cat->id) as $item)
                        <div class="col-lg-6 pb-4">
                            <div class="show-card">
                                <a href="{{route('page.project', $item->slug)}}">
                                <img src="{{getImage($item->large_image)}}" alt="{{$item->title}}">
                                </a>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach

            </div>
        </div>
    </div>
</section>


</div>
</div>
<!-- Shop-Page /- -->

@endsection
@section('js')

@endsection