@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">
        @if(App::getLocale() == 'en')
        {{ $material->title }}
        @else
        {{ $material->title_ar }}
        @endif
    </h2>
    <a href="{{ route('materials') }}" class="mt-2 text-sm text-gray-300">{{ __('general.return_to_materials') }}</a>
</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 types="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 types="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="" src="{{ asset('uploads/images/'. $material->main_image[0]->url) }}" alt="">
        @endif
        --}}
        <div class="your-class">
            @foreach($images as $image)
            <div>
                <img class="" src="{{ asset('uploads/images/'. $image->url) }}" alt="">
            </div>
            @endforeach
        </div>

        <section class="px-4" aria-labelledby="information-heading">
            <div dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}"
                class="{{ App::getLocale() == 'ar' ? 'text-right' : '' }}">
                @if(App::getLocale() == 'en')
                <p class="font-light">
                    {!! $material->content !!}
                </p>
                @else
                <p class="font-light">
                    <span class="font-light">{!! $material->content_ar !!}</span>
                </p>
                @endif

                @if(count($types) > 0)
                <p class="mt-6 text-xl font-bold text-sky-950">{{ __('general.material_types') }}</p>

                @foreach($types as $item)
                <div
                    class="relative flex items-center px-6 py-5 mt-4 space-x-3 bg-white border border-gray-200 rounded-lg shadow-sm focus-within:ring-2 focus-within:ring-yellow-500 focus-within:ring-offset-2 hover:border-yellow-400">
                    <div class="flex-shrink-0">
                        @if(count($item->main_image) > 0 )
                        <img class="h-12 w-12 rounded {{ app()->getLocale() == 'ar' ? 'ml-3' : '' }}"
                            src="{{ asset('uploads/images/'. $item->main_image[0]->url) }}" alt="">
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <a href="{{ route('type.detail', $item->id) }}"
                            class="focus:outline-none {{ app()->getLocale() == 'ar' ? '' : '' }}">
                            <span class="absolute inset-0" aria-hidden="true"></span>
                            <p class="text-lg font-bold text-gray-900">{{ app()->getLocale() == 'en' ? $item->title :
                                $item->title_ar }}</p>
                            <p class="text-xs text-gray-300 truncate">{{ __('general.see_details') }}</p>
                        </a>
                    </div>
                </div>
                @endforeach
                @endif

            </div>
        </section>

    </div>
</div>

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

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

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

@endsection

@section('css')
<link rel="stylesheet" type="text/css" href="slick/slick.css" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
@endsection

@section('js')
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
            $('.your-class').slick({
                setting-name
        :
            setting - value
        })
            ;
        });
</script>

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