@extends('layouts.frontend')
@section('content')
<div class="section pattern-bg inner-section wf-section">
    <form id="filter-form" class="container w-container" data-ix="fade-from-bottom">
        <div class="ttitle">{{ $page->title }}</div>
        <div class="grey-text">{{ $page->sub_title }}</div>
        <div class="content-b">
            <div class="portfolio-filter-row">
                @foreach($filters as $filter)
                <div class="portfolio-filter-col">
                    <div class="portfolio-filter-title">{{ $filter['title'] }}</div>
                    <div data-hover="false" data-delay="500" class="portfolio-filter-dropdown w-dropdown">
                        <div class="portfolio-filter-dropdown-btn w-dropdown-toggle" data-ix="portfolio-filter-dropdown-btn">
                            <div class="portfolio-filter-title-inner">{{ $filter['selected'] ? $filter['selected']->title : lang('All') }}</div>
                            <div class="portfolio-filter-dropdown-arrow"><img src="{{ asset_frontend('images/dropdown-arrow.svg') }}" alt="" class="portfolio-filter-dropdown-arrow-img"><img src="{{ asset_frontend('images/dropdown-arrow-pink.svg') }}" alt="" class="portfolio-filter-dropdown-arrow-img-hover" data-ix="opacity-0"></div>
                        </div>
                        <nav class="portfolio-filter-dropdown-list w-dropdown-list" data-ix="height-0">
                            <div class="portfolio-filter-container z-index-1">
                                <label class="portfolio-filter-dropdown-link w-dropdown-link" onclick="document.getElementById('filter-form').submit()">
                                    <input type="radio" value="" name="{{ $filter['name'] }}">
                                    <div>{{ lang('All') }}</div>
                                </label>
                                @foreach($filter['models'] as $model)
                                    <label class="portfolio-filter-dropdown-link w-dropdown-link" onclick="document.getElementById('filter-form').submit()">
                                        <input type="radio" name="{{ $filter['name'] }}" value="{{ $model->url_slug }}" {{ $model->url_slug == request($filter['name']) ? 'checked' : '' }}>
                                        <div>{{ $model->title }}</div>
                                    </label>
                                @endforeach
                            </div>
                            <div class="white-bg blur-mask"></div>
                        </nav>
                    </div>
                </div>
                @endforeach
            </div>
        </form>
        <div class="content-b">
            <div class="portfolio-row">
                @foreach($projects as $project)
                <div class="portfolio-col">
                    <a href="{{ $project->getDetailUrl() }}" class="portfolio-link-b w-inline-block" data-ix="portfolio-link-b">
                        <div class="portfolio-img-b">
                            @if($project_type = $project->project_type)
                            <div class="portfolio-type" style="background-color: {{ color($project_type->color)  }};">
                                <div>{{ $project_type->title }}</div>
                            </div>
                            @endif
                            @if($image = $project->getMedia('top_image'))
                                <img src="{{ $image->getResizedImage(786, 580) }}" alt="" class="portfolio-img desktop">
                                <img src="{{ $image->getResizedImage(786, 400) }}" alt="" class="portfolio-img mobile">
                            @endif
                        </div>
                        <div class="portfolio-text-b">
                            <div><strong>{{ $project->title }}</strong></div>
                            <div>{{ $project->show->title ?? '' }}</div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        {{-- <div class="content-b">
            <a href="#" class="pink-btn w-inline-block" data-ix="pink-btn">
                <div class="btn-text">read more</div>
                <div class="pink-btn-arrow-b">
                    <div class="pink-btn-arrow-hover" data-ix="opacity-0"><img src="{{ asset_frontend('images/icon-arrow-pink.svg') }}" loading="lazy" alt="" class="btn-arrow-img"></div>
                    <div class="pink-btn-arrow"><img src="{{ asset_frontend('images/icon-arrow-white.svg') }}" loading="lazy" alt="" class="btn-arrow-img"></div>
                </div>
            </a>
        </div>
        <div class="content-b">
            <div class="loading-dots-b">
                <div class="pulse-bubble pulse-bubble-1"></div>
                <div class="pulse-bubble pulse-bubble-2"></div>
                <div class="pulse-bubble pulse-bubble-3"></div>
            </div>
        </div> --}}
    </div>
</div>
@endsection
@section('js')
<script>
    
</script>
@endsection