@extends('web_site.layouts.master')

@section('content')

    <section class="breadcumb-wrapper" data-bg-src="{{ asset('assets_web/img/breadcurmb1.webp') }}">
        <div class="container">
            <h1 class="breadcumb-title">{{ trans('site.nav.before_after') }}</h1>
        </div>
    </section>

    <section class="vs-project-wrapper position-relative space-top pb-50">
        <div class="container z-index-common">
            @if ($cases->isEmpty())
                <p class="text-center">{{ trans('site.common.no_records') }}</p>
            @else
                <div class="row">
                    @foreach ($cases as $case)
                        @foreach ($case->images as $image)
                            <div class="col-md-4">
                                <div class="vs-project-box">
                                    <div class="project-img">
                                        <img src="{{ $image->thumb_url }}" loading="lazy" alt="{{ $case->title }}">
                                        <a href="{{ $image->image_url }}" class="icon-btn popup-image">
                                            <i class="fal fa-eye"></i>
                                        </a>
                                    </div>
                                    @if ($case->title)
                                        <p class="text-center mt-2 mb-0">{{ $case->title }}</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    @endforeach
                </div>

                <div class="mt-4">{{ $cases->links() }}</div>
            @endif
        </div>
    </section>

@endsection

@section('js')
<script>
$(function () {
    if ($.fn.magnificPopup) {
        $('.popup-image').magnificPopup({ type: 'image', gallery: { enabled: true } });
    }
});
</script>
@endsection