@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/h02.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">
    <h2 id="comfort-heading" class="text-4xl font-bold tracking-tight sm:text-5xl text-sky-950">
        {{ app()->getLocale() == 'en' ? $work->title : $work->title_ar }}
    </h2>
    <p class="my-4 font-serif text-xl italic text-gray-400">
        {{ app()->getLocale() == 'en' ? $work->location : $work->location_ar }}
    </p>
</div>

<!--CONTENT-->
<div class="px-8 mx-auto mt-12 max-w-7xl">
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">

        @if($images->count() > 1)
        <div id="default-carousel" class="relative w-full" data-carousel="slide">
            <!-- Carousel wrapper -->
            <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
                <!-- Item 1 -->
                @foreach($images as $image)
                <div class="hidden duration-700 ease-in-out" data-carousel-item>
                    <img src="{{ asset('uploads/images/'. $image->url) }}"
                        class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" alt="...">
                </div>
                @endforeach
            </div>
            <!-- Slider controls -->
            <button type="button"
                class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                data-carousel-prev>
                <span
                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                    <svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 1 1 5l4 4" />
                    </svg>
                    <span class="sr-only">Previous</span>
                </span>
            </button>
            <button type="button"
                class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                data-carousel-next>
                <span
                    class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                    <svg class="w-4 h-4 text-white dark:text-gray-800" aria-hidden="true"
                        xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="m1 9 4-4-4-4" />
                    </svg>
                    <span class="sr-only">Next</span>
                </span>
            </button>
        </div>
        @else
        <img class="rounded-lg" src="{{ asset('uploads/images/'. $work->image) }}" alt="">
        @endif

        {{--CONTENT--}}
        <section class="px-4" aria-labelledby="information-heading">
            <div dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
                <p class="text-base text-gray-500">{!! $work->content !!}</p>
            </div>
        </section>

    </div>
</div>

{{--ALL WORKS--}}
@include('layouts._partials._other_works')

{{--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