@extends('layout.app')
@push('css')
@endpush

@section('content')
    <div class="inner-page-wrapper">
        <main class="main-wrapper">
            <div class="page-hero">
                <img
                    src="{{ config('business_setting.' . \App\Enums\BusinessSettingEnum::SERVICE_PAGE_BANNER->value) }}"
                    loading="eager"
                    alt=""
                    class="page-hero-image"
                />
                <div class="content-wrapper">
                    <h1 class="page-hero-banner-heading">{{ __('messages.services') }}</h1>
                </div>
            </div>
            <div
                id="w-node-_0de1ba10-66fe-cdf8-eb43-fd11de81e889-de81e889"
                class="page-subheading"
            >
            </div>
            <section class="section_page_1_team">
                <div class="padding-global">
                    <div class="container-large">
                        <div class="padding-section-medium">
                            <div class="page_1_team_component">
                                <div class="page_1_team_list-wrapper">
                                    <div class="w-layout-grid outlet-items-list">
                                        @foreach ($services as $service)
                                            <div class="service-item-block">
                                                <div
                                                    id="w-node-dea63bd3-a4d0-b2e1-44fa-4528796e305e-796e305d"
                                                    class="outlet-image-wrapper"
                                                >
                                                    <img
                                                        src="{{ Storage::url($service->icon) }}"
                                                        loading="lazy"
                                                        alt=""
                                                        class="outlet_image"
                                                    />
                                                </div>
                                                <div
                                                    id="w-node-dea63bd3-a4d0-b2e1-44fa-4528796e3060-796e305d"
                                                    class="service-card-content-wrapper"
                                                >
                                                    <div class="outlet-title">
                                                        {{ app()->getLocale() == 'ar' ? $service->name_ar : $service->name_en}}
                                                    </div>
                                                    <p class="outlet-longdescription">
                                                        {!! app()->getLocale() == 'ar' ? $service->description_ar : $service->description_en !!}
                                                    </p>

                                                    @if (isset($service->link))
                                                        <a href="{{ $service->link }}"
                                                           class="link">
                                                            {{ app()->getLocale() == 'ar' ? $service->link_title_ar : $service->link_title_en }}
                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
@endsection

@push('js')
@endpush