@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_services')
                    <span class="text-secondary-color">.</span></span></h2>

            <div class="mb-xl text-center">
                <div class="col-lg-9 col-md-9 mx-auto">
                    <div class="row row-gap-3">
                        @forelse ($services as $service)
                            <div class="col-lg-6">
                                <div class="service__item flip__item rounded-4 h-100">
                                    <div class="px-lg-4 px-3">
                                        <div class="mb-4">
                                            <img height="60" src="{{ asset('storage/' . $service->image) }}"
                                                alt="{{ $service->name_by_lang }}" loading="lazy">
                                        </div>
                                        <h4 class="title-md font-primary-bd text-primary-color mb-4">
                                            {{ $service->name_by_lang }}
                                        </h4>
                                        <div class="text-xl mb-md">
                                            {{ shortCleanString($service->description_by_lang, '150') }}
                                        </div>
                                    </div>
                                    <a href="#service-modal-{{ $service->id }}" data-fancybox
                                        class="btn btn-hover service-btn btn-outline-primary-color text-xl rounded-4 py-lg-4 py-3">
                                        <span class="me-1">@lang('site.read_more')</span> <svg class="rotate180" width="18"
                                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.65 14.67">
                                            <g id="Layer_2" data-name="Layer 2">
                                                <g id="Layer_1-2" data-name="Layer 1">
                                                    <polyline stroke="currentColor" stroke-width="2" fill="none"
                                                        id="Path-3" points="10.61 13.97 17.24 7.34 10.61 0.71">
                                                    </polyline>
                                                    <line id="Path-7" stroke="currentColor" stroke-width="2"
                                                        fill="none" x1="17.24" y1="7.34" y2="7.34"></line>
                                                </g>
                                            </g>
                                        </svg>
                                    </a>
                                </div>
                            </div>

                            <div class="fancybox-modal modal-1" id="service-modal-{{ $service->id }}"
                                style="display: none;">
                                <div class="text-center">
                                    <div class="mb-4"><img height="60" src="{{ asset('storage/' . $service->image) }}"
                                            alt="data icon" loading="lazy">
                                    </div>
                                    <h4 class="title-md font-primary-bd text-primary-color mb-4">
                                        {{ $service->name_by_lang }}
                                    </h4>
                                </div>
                                <div class="text-xl mb-md">
                                    {!! $service->description_by_lang !!}
                                </div>
                            </div>
                        @empty
                            <div class="col-lg-12 text-center">
                                <p>@lang('site.no_data_available')</p>
                            </div>
                        @endforelse



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