@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_solutions') <span class="text-secondary-color">.</span></span>
        </h2>
    </div>
    @foreach ($services as $service)
    <div class="mb-xl">
        <div class="container">
            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-8 col-12">
                <h4 class="title-md bg-light-color font-primary-bd text-primary-color rounded-pill text-center py-3 px-5 mb-0 wow fadeInUp"
                    data-wow-duration="1s">
                    {{ $service->name_by_lang }}
                </h4>
            </div>
            @foreach ($service->solutions as $solution)
            <div class="row row-gap-4">
                <div class="col-lg-12">
                    <div class="solution__item flip__item light-border h-100">
                        <div class="row mb-lg-5">
                            <div class="col-lg-6">
                                <div class="solution-slider">
                                    @if ($solution->images)
                                    @foreach ($solution->images as $image)
                                    <div class="item" style="  background-image: url('storage/{{ $image }}'); ">
                                    </div>
                                    @endforeach
                                    @endif


                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="p-lg-5 p-4 d-flex flex-column justify-content-center">
                                    <a href="{{ route('solutions.show', ['slug' => $solution->slug_by_lang, 'solution' => $solution->id]) }}"
                                        class="title-lg font-primary-bd mb-2">
                                        {{ $solution->name_by_lang }}
                                    </a>
                                    <div class="d-flex flex-column row-gap-1 text-xl text-gray-color">
                                        {{-- {{ shortCleanString($solution->description_by_lang, '600') }} --}}

                                        {!! $solution->description_by_lang !!}
                                    </div>

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



                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endforeach

</div>
@endsection