@extends('layouts.app') @section('content')
    <div class="page-content pt-xxl">
        <div class="container">
            <h2 class="title-xxl title-animation font-primary-bd text-primary-color mb-md">
                <span>@lang('site.our_projects') <span class="text-secondary-color">.</span></span>
            </h2>
        </div>

        @forelse ($services as $service)
            <div class="mb-xl">
                <div class="container">
                    <div class="col-lg-3 col-md-6 col-sm-8 col-11">
                        <h4 class="title-md bg-light-color font-primary-bd text-primary-color rounded-pill text-center py-3 px-5 mb-3 wow fadeInUp"
                            data-wow-duration="1s">
                            {{ $service->name_by_lang }}
                        </h4>
                    </div>
                    <div class="row row-gap-4">
                        @foreach ($service->projects as $project)
                            <div class="col-lg-12">
                                <div class="project__item flip__item light-border h-100">
                                    <div class="row">
                                        <div class="col-lg-5">
                                            <div class="project-slider">

                                                @if ($project->images)
                                                    @foreach ($project->images as $image)
                                                        <div class="item"
                                                            style="  background-image: url('storage/{{ $image }}'); ">
                                                        </div>
                                                    @endforeach
                                                @endif

                                            </div>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="p-lg-5 p-4 d-flex flex-column justify-content-center">
                                                <a href="{{ route('projects.show', ['slug' => $project->slug_by_lang, 'project' => $project->id]) }}"
                                                    class="title-lg font-primary-bd text-primary-color mb-4">
                                                    {{ $project->name_by_lang }}
                                                </a>
                                                {{--    <div class="d-flex flex-column row-gap-1 text-xl font-primary-md mb-4">
                                                    <div>
                                                        Lomé, city, capital of Togo, Guinea.
                                                    </div>
                                                </div> --}}
                                                <div class="d-flex flex-column row-gap-1 text-md text-gray-color">
                                                    <div>
                                                        {{ shortCleanString($project->description_by_lang, '150') }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>
            </div>
        @empty
            <div class="col-lg-12 text-center">
                <p>@lang('site.no_data_available')</p>
            </div>
        @endforelse

    </div>
@endsection