@extends('layouts.guest')

<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')

    {{--
    --}}
    {{--HERO--}}{{--

    <div class="relative flex flex-col px-8 mx-auto max-w-7xl py-28">
        <h1 class="text-4xl font-bold tracking-tight text-white">{{ __('Works') }}</h1>
    </div>
    --}}
</div>

@section('content')

<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' ? $page->title : $page->title_ar }}
    </h2>
    <p class="my-4 font-serif text-xl italic text-gray-400">
        {{ app()->getLocale() == 'en' ? $page->subtitle : $page->subtitle_ar }}
    </p>
</div>

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

        @foreach($materials as $item)
        <div
            class="relative flex items-center px-6 py-5 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="object-cover w-24 h-24 rounded"
                    src="{{ asset('uploads/images/'. $item->main_image[0]->url) }}" alt="">
                @endif
            </div>
            <div class="flex-1 min-w-0">
                <a href="{{ route('material.detail', $item->id) }}"
                    class="focus:outline-none {{ app()->getLocale() == 'ar' ? 'text-right' : '' }}">
                    <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

    </div>
</div>

<div class="relative pt-24 lg:pt-12">
    <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300"></div>
    </div>
</div>

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

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

@endsection