@extends('layouts.frontend.master-2')

@section('content')
<div id="content" class="site-content">
    <div class="page-header dtable text-center header-transparent pheader-portfolio">
        <div class="dcell">
            <div class="container">
                <h1 class="page-title">Portfolio Grid Masonry</h1>
                <ul id="breadcrumbs" class="breadcrumbs none-style">
                    <li><a href="{{ route('home') }}">Home</a></li>
                    <li class="active">Portfolio Grid Masonry</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<section class="our-portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center theratio-align-center">
                <div class="ot-heading is-dots">
                    <span>our portfolio</span>
                    <h2 class="main-heading">Some of Our Works<br> and Case Studies for Clients</h2>
                </div>
                <div class="space-40"></div>
                <div class="project-filter-wrapper">
                    <ul class="project_filters">
                        <li><a href="#" data-filter="*" class="selected btn-details">All<span
                                    class="filter-count"></span></a></li>
                        @foreach ($categories as $category)
                        <li><a class="btn-details" href="#" data-filter=".{{ $category->id }}">{{ $category->title_en
                                }}<span class="filter-count"></span></a></li>
                        @endforeach
                    </ul>
                    <div class="projects-grid pf_3_cols style-4 img-popup img-scale w-auto">
                        <div class="grid-sizer"></div>
                        @foreach ($projects as $project)
                        <div class="project-item {{ $project->announcement_id }}">
                            <div class="projects-box">
                                <div class="projects-thumbnail" data-src="{{ $project->image('original') }}">
                                    <a href="portfolio-standar.html">
                                        <img src="{{ $project->image() }}" alt="">
                                    </a>
                                    <div class="portfolio-info-inner text-white">
                                        <p class="portfolio-cates">{{ $project->name_en }}</p>
                                        <p class="portfolio-cates">( {{ $project->location_en }} )</p>
                                        <p class="portfolio-cates">“ {{ $project->description_en }} ”</p>
                                    </div>
                                    <div class="overlay">
                                        <i class="ot-flaticon-add"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    {{$projects->links('front.components.pagination')}}

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

@endsection

@section('js')



@endsection