@extends('layouts.guest')

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

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

<div class="relative mx-auto flex max-w-3xl flex-col items-center text-center mt-24">
    <h2 id="comfort-heading" class="text-4xl font-bold tracking-tight sm:text-5xl text-sky-950">
        {{ app()->getLocale() == 'en' ? $style->title : $style->title_ar }}</h2>
    <a href="{{ route('styles') }}" class="text-gray-300 text-sm mt-2">{{ __('general.return_to_styles') }}</a>
</div>

<!--CONTENT-->
<div class="max-w-7xl mx-auto px-8 mt-12">
    <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/'. $style->image) }}" alt="">
        @endif

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

    </div>
</div>

{{--OTHER MATERIALS--}}
@include('layouts._partials._other_styles')

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

{{--TESTIMONIAL--}}
{{-- @include('layouts._partials._testimonial')
--}}
s
@endsection

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