@extends('layouts.guest')

@section('content')
<div class="relative content-center bg-gray-900">

    <!-- Decorative image and overlay -->
    <div aria-hidden="true" class="absolute inset-0 overflow-hidden">
        <img src="{{ asset('../assets/images/b01.jpg') }}" alt="" class="object-cover object-center w-full h-96">
    </div>
    <div aria-hidden="true" class="absolute inset-0 bg-gray-900 opacity-40"></div>

    <!--NAV-->
    @include('layouts._partials._navbar')
</div>

<div class="relative flex flex-col items-center max-w-3xl mx-auto mt-24 text-center">
    <img class="h-10 mb-8" src="{{ asset('uploads/images/'. $service->image) }}" alt="">
    <h2 id="comfort-heading" class="text-4xl font-bold tracking-tight sm:text-5xl text-sky-950">
        {{ app()->getLocale() == 'en' ? $service->title : $service->title_ar }}
    </h2>
    <a href="{{ route('services') }}" class="mt-2 text-sm text-gray-300">{{ __('general.return_to_services') }}</a>
</div>

<!--CONTENT-->
<div class="px-6 py-24 bg-white lg:px-8">
    <div
        class="mx-auto max-w-3xl text-base leading-7 text-gray-700 {{ app()->getLocale() == 'ar' ? 'text-right' : '' }}">
        <div dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}" class="max-w-2xl">
            <p>{!! app()->getLocale() == 'en' ? $service->content : $service->content_ar !!}</p>
        </div>
    </div>
</div>

{{--ALL WORKS--}}
<div class="px-8 mx-auto my-24 max-w-7xl">
    <div class="inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300"></div>
    </div>
    <div class="flex justify-center">
        <span class="px-2 mt-2 font-serif italic text-green-800 bg-white">{{ __('general.all_services') }}</span>
    </div>
    <div class="bg-white pb-22">
        <div class="px-6 mx-auto max-w-7xl lg:px-8">
            <dl class="grid grid-cols-1 gap-12 mt-20 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 lg:gap-x-8">
                @foreach(\App\Models\Service::all() as $item)
                <div class="relative {!! app()->getLocale() == 'en' ? '' : 'text-right' !!}">
                    <dt>
                        @if(app()->getLocale() == 'en')
                        <svg class="absolute w-6 h-6 mt-1 text-green-900" fill="none" viewBox="0 0 24 24"
                            stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                        </svg>
                        <p class="ml-10 text-lg font-semibold leading-8 text-gray-900">
                            {{ $item->title }}
                        </p>
                        @else
                        <p class="text-lg font-semibold leading-8 text-gray-900">
                            {{ $item->title_ar }}
                        </p>
                        @endif
                    </dt>
                    <dd class="mt-2 ml-10 text-xs leading-7 text-gray-600">
                        {!! app()->getLocale() == 'en' ? $item->content : $item->content_ar !!}
                    </dd>
                </div>
                @endforeach
            </dl>
        </div>
    </div>
</div>

{{--INSTAGRAM--}}
@include('layouts._partials._instagram-page')

{{--TESTIMONIAL--}}
{{-- <div class="pb-24">
    @include('layouts._partials._testimonial')
</div>
--}}
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>
@endsection