@extends('User.layouts.layout')
@section('breadcrumb',__('messages.portefolio'))
@section('left_image',$setting['portfolio_image'])


@section('SEO')

@section('SEO')
    @isset($category)
        <title>{{ $SEO['portfolio']['title_'.lang()]['value'] }}-{{ $category['seo_title_'.lang()] }}</title>
        <link rel="canonical" href="{{ url()->full() }}">
        <link rel="sitemap" href="/sitemap.xml" title="Sitemap" type="application/xml">
        <link href="https://emcan-group.com/emcan.webp" rel="shortcut icon">
        <meta name="robots" content="max-snippet:-1,max-image-preview:large,max-video-preview:-1">
        <meta name="description" content="{{ $category['seo_desc_'.lang()] }}">
        <meta name="keywords" content="{{ $category['seo_keywords_'.lang()] }}">
        <meta name="author" content="Emcan Solutions">
        <meta name="image" content="https://emcan-group.com/emcan.jpg">
        <meta property="og:title" content="{{ $category['seo_title_'.lang()] }}">
        <meta property="og:description" content="{{ $category['seo_desc_'.lang()] }}">
        <meta property="og:locale" content="en">
        <meta property="og:image" content="https://emcan-group.com/emcan.webp">
        <meta property="og:url" content="{{ url()->full() }}">
        <meta property="og:site_name" content="Emcan Solutions">
        <meta property="og:type" content="website">
        <meta name="twitter:card" content="{{ $category['seo_desc_'.lang()] }}">
        <meta name="twitter:title" content="{{ $category['seo_desc_'.lang()] }}">
        <meta name="twitter:description" content="{{ $category['seo_desc_'.lang()] }}">
        <meta name="twitter:site" content="@EmcanSolutions">
    @else
        <title>{{ $SEO['portfolio']['title_'.lang()]['value'] }}</title>
        <link rel="canonical" href="{{ url()->full() }}">
        <link rel="sitemap" href="/sitemap.xml" title="Sitemap" type="application/xml">
        <link href="https://emcan-group.com/emcan.webp" rel="shortcut icon">
        <meta name="robots" content="max-snippet:-1,max-image-preview:large,max-video-preview:-1">
        <meta name="description" content="{{ $SEO['portfolio']['desc_'.lang()]['value'] }}">
        <meta name="keywords" content="{{ $SEO['portfolio']['keywords_'.lang()]['value'] }}">
        <meta name="author" content="Emcan Solutions">
        <meta name="image" content="https://emcan-group.com/emcan.jpg">
        <meta property="og:title" content="{{ $SEO['portfolio']['title_'.lang()]['value'] }}">
        <meta property="og:description" content="{{ $SEO['portfolio']['desc_'.lang()]['value'] }}">
        <meta property="og:locale" content="en">
        <meta property="og:image" content="https://emcan-group.com/emcan.webp">
        <meta property="og:url" content="{{ url()->full() }}">
        <meta property="og:site_name" content="Emcan Solutions">
        <meta property="og:type" content="website">
        <meta name="twitter:card" content="{{ $SEO['portfolio']['title_'.lang()]['value'] }}">
        <meta name="twitter:title" content="{{ $SEO['portfolio']['title_'.lang()]['value'] }}">
        <meta name="twitter:description" content="{{ $SEO['portfolio']['desc_'.lang()]['value'] }}">
        <meta name="twitter:site" content="@EmcanSolutions">
    @endisset
@endsection
@section('contents')

@if ($PortfolioCategories->count())
<style>
    @media(max-width: 576px){
        .nav-link{
            width: auto !important;
        }
    }

    
    .portfolio .nav-tabs .nav-link {
        width: 15%;
    }
</style>
<div class="portfolio my-2">
    <div>
        <div class="title my-4">
            <h1 class="pb-3" >{{ $SEO['portfolio']['title_'.lang()]['value'] }}</h1>
        </div>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                
                <a href="{{route('user.portfolio', ['lang' => app()->getLocale()])}}" class="nav-link {{$type == 0 ? 'active' : ''}}" type="button">{{ trans('messages.all') }}</a>

                @foreach ($PortfolioCategories as $Category)
                    <a href="{{route('user.filterPortfolio',['id' => str_replace(' ', '-', ($Category['title_'.lang()])),'lang' => app()->getLocale()])}}" class="nav-link {{$type == $Category->id ? 'active' : ''}}" type="button">{{ ($Category['title_'.lang()]) }}</a>
                @endforeach
            </div>
        </nav>
        <div class="tab-content">
           <div class="tab-pane fade show active" id="nav-all" role="tabpanel" aria-labelledby="nav-all-tab">
                <div class="tab-content">
                    <div class="row mt-3">
                        @foreach ($projects as $Project)
                            <div class="col-12 col-lg-4 my-2 {{ ($loop->iteration % 4) < 2 ? 'transform__item_left' : 'transform__item_right' }}">
                                <div class="position-relative point shadow rounded overflow-hidden  Portfoliomedia" style="max-height: 300px;">
                                    <img onclick="window.open('{{ route('user.project_details',['title' => str_replace(' ', '-', ($Project['title_'.lang()])),'lang' => app()->getLocale()]) }}','_self')" loading="lazy" src="{{ asset($Project['image']) }}" class="img-fluid w-100 h-100"   alt="{{$Project['title_'.lang()]}}">
                                    <div class="in_port transition-me">
                                         <div class="w-100 h-100 d-flex align-items-center justify-content-center text-center" onclick="window.open('{{ route('user.project_details',['title' => str_replace(' ', '-', ($Project['title_'.lang()])),'lang' => app()->getLocale()]) }}','_self')">
                                            <span class="second_color more_bold mx-auto">{{ $Project['title_'.lang()] }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="my-3 p-2 d-flex justify-content-center">
                        {{$projects->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif


@endsection

@section('custom-js')

    <script defer>
        $(document).on('click', '.mainBtn', function(){
            $('.mainBtn').removeClass('active');
            $(this).addClass('active');
        });
    </script>

@endsection