@extends('layouts.app') @section('content')
<div class="page-content pt-xxl">
    <div class="mb-xl">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="slider-for mb-3">

                        @foreach ($solution->images as $image)
                        <div class="item">
                            <div class="bg-light-gray-color text-center p-2 rounded-3">
                                <a href="{{ asset('storage/' . $image) }}" data-fancybox="gallery">
                                    <img height="400" class="mx-auto object-fit-contain"
                                        src="{{ asset('storage/' . $image) }}" alt="{{ $solution->name_by_lang }}">
                                </a>
                            </div>

                        </div>
                        @endforeach

                    </div>

                    <div class="slider-nav slick-multi mb-lg-0 mb-5">
                        @foreach ($solution->images as $image)
                        <div class="item">
                            <div class="bg-light-gray-color text-center p-2 rounded-3">
                                <img height="90" class="mx-auto object-fit-contain"
                                    src="{{ asset('storage/' . $image) }}" alt="{{ $solution->name_by_lang }}">
                            </div>
                        </div>
                        @endforeach

                    </div>

                </div>
                <div class="col-lg-5">
                    <div class="ps-lg-5">
                        <h4 class="title-lg font-primary-bd text-primary-color">
                            {{ $solution->name_by_lang }}
                        </h4>
                        <hr>
                        <ul class="list-unstyled">
                            <li><span class="text-xl font-primary-md">@lang('main.service') :</span> <span
                                    style="color: #64013C;">{{ $solution->service->name_by_lang }}</span></li>
                        </ul>
                        <hr>
                        <div class="d-flex flex-column row-gap-1 mb-4">
                            <div class="text-xl font-primary-md">@lang('site.solution_description')</div>
                            <span class="text-md text-gray-color">
                                {!! $solution->description_by_lang !!}
                            </span>
                        </div>
                        <hr>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection