@extends('layouts.guest')

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

    <!-- 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-bottom w-full h-96">
    </div>
    <div aria-hidden="true" class="absolute inset-0 bg-gray-900 opacity-40"></div>

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

    {{--HERO--}}
    <div class="relative flex flex-col content-center max-w-3xl px-10 py-16 mx-auto text-center sm:py-32 lg:px-0">
        <h1 class="text-4xl font-bold tracking-tight text-white lg:text-6xl">
            {{ __('general.contact') }}</h1>
    </div>

</div>

<!--CONTENT-->
<div class="bg-white">
    <div class="px-6 py-16 mx-auto max-w-7xl lg:px-8">
        <div class="max-w-lg mx-auto md:grid md:max-w-none md:grid-cols-2 md:gap-8">

            <div dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}" class="mt-12 sm:mt-16 md:mt-0">
                <h2 class="text-2xl font-bold text-gray-900 sm:text-3xl sm:tracking-tight">{{ app()->getLocale() == 'en'
                    ? $turkiye->title : $turkiye->title_ar }}</h2>
                <p class="italic text-gray-400">{!! app()->getLocale() == 'en' ? $turkiye->city : $turkiye->city_ar !!}
                </p>
                <div class="mt-4">
                    @if( $turkiye->phone != '')
                    <div class="flex">
                        <div class="flex-shrink-0 text-gray-400">
                            <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 640 640">
                                <path
                                    d="M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z" />
                            </svg>
                        </div>
                        <div class="ml-3 text-base text-gray-500">
                            <a href="{{ $turkiye->whatsappLink() }}" target="_blank" rel="noopener"
                                class="hover:text-green-700">{{ $turkiye->phone }}</a>
                        </div>
                    </div>
                    @endif
                    <div class="flex mt-4">
                        <div class="flex-shrink-0">
                            <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                            </svg>
                        </div>
                        <div class="mx-3 text-base text-gray-500">
                            <p>{{ $turkiye->email }}</p>
                        </div>
                    </div>
                    <div class="flex mt-6">
                        <iframe class="w-full h-64 rounded-lg" src="{{ $turkiye->location }}" style="border:0;"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>

            <div dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}" class="mt-12 sm:mt-16 md:mt-0">
                <h2 class="text-2xl font-bold text-gray-900 sm:text-3xl sm:tracking-tight">{{ app()->getLocale() == 'en'
                    ? $saudi->title : $saudi->title_ar }}</h2>
                <p class="italic text-gray-400">{!! app()->getLocale() == 'en' ? $saudi->city : $saudi->city_ar !!}</p>
                <div class="mt-4">
                    @if( $saudi->phone != '')
                    <div class="flex">
                        <div class="flex-shrink-0 text-gray-400">
                            <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 640 640">
                                <path
                                    d="M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z" />
                            </svg>
                        </div>
                        <div class="ml-3 text-base text-gray-500">
                            <a href="{{ $saudi->whatsappLink() }}" target="_blank" rel="noopener"
                                class="hover:text-green-700">{{ $saudi->phone }}</a>
                        </div>
                    </div>
                    @endif
                    <div class="flex mt-4">
                        <div class="flex-shrink-0">
                            <svg class="w-6 h-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                            </svg>
                        </div>
                        <div class="mx-3 text-base text-gray-500">
                            <p>{{ $saudi->email }}</p>
                        </div>
                    </div>
                    <div class="flex mt-6">
                        <iframe class="w-full h-64 rounded-lg" src="{{ $saudi->location }}" style="border:0;"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>

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

{{--OUR SERVICES--}}
<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