@extends('layouts.app')

@section('content')
<div class="fixed z-50 w-full p-4 text-white bg-stone-800">
    <h3 class="text-lg uppercase text-stone-400">{{ $section->city->name ?? 'N/A' }} /
        {{ $section->district->name ?? 'N/A' }} /
        {{ $section->venue ? $section->venue->name : 'N/A' }}
    </h3>
    <h1 class="text-4xl">
        {{ $section->name }}
    </h1>
</div>

<div class="pt-28"></div>
<!-- İçerik Bölümü -->
<ul role="list" class="grid grid-cols-1 gap-4 px-4 pt-3 pb-12 gap-x-4">
    @foreach ($exhibits as $exhibit)
    <li class="relative bg-white border rounded-lg border-stone-200">
        <a href="{{ route('exhibit', [
                    'city' => $exhibit->city->slug,
                    'district' => $exhibit->district->slug,
                    'venue' => $exhibit->venue->slug,
                    'section' => $exhibit->section->slug,
                    'exhibit' => $exhibit->slug
                ]) }}"
            class="flex overflow-hidden rounded-lg group focus-within:ring-2 focus-within:ring-amber-500 focus-within:ring-offset-2 focus-within:ring-offset-stone-100">
            <img class="w-1/3 rounded-l"
                src="{{ $exhibit->getFirstImage() ? asset($exhibit->getFirstImage()) : asset('img/1.jpg') }}" alt=""
                class="object-cover pointer-events-none aspect-10/7 group-hover:opacity-75">
            <div class="w-2/3 p-3">
                <h2 class="font-medium pointer-events-none text-3xl/7 text-stone-800">
                    <span class="text-2xl text-stone-400">{{
                        $exhibit->order }}.</span>
                    {{ $exhibit->translated_location_desc }}
                </h2>
                <h3 class="mt-2 pointer-events-none text-xl/5 text-stone-400">
                    {{ $exhibit->translated_name }}
                </h3>
                {{-- <div class="flex items-center justify-end gap-x-3 text-stone-400">
                    @if (count($exhibit->getAllAudios()) > 0)
                    <div class="flex items-center"><span class="material-symbols-rounded">music_note</span>
                        {{ count($exhibit->getAllAudios()) }}</div>
                    @endif
                    @if (count($exhibit->translations) > 0)
                    <div class="flex items-center"><span class="material-symbols-rounded">translate</span>
                        {{ count($exhibit->translations) }}</div>
                    @endif
                    @if (count($exhibit->getAllImages()) > 0)
                    <div class="flex items-center"><span class="material-symbols-rounded">photo</span>
                        {{ count($exhibit->getAllImages()) }}</div>
                    @endif
                </div>
                --}}
            </div>
        </a>
    </li>
    @endforeach
</ul>

<div class="pb-28"></div>

<!-- NAVBAR -->
<div class="fixed bottom-0 w-full max-w-lg mx-auto">
    <div class="flex items-center justify-between divide-x divide-stone-400">
        <a href="{{ route('venue', [
                    'city' => $section->city->slug,
                    'district' => $section->district->slug,
                    'venue' => $section->venue ? $section->venue->slug : 'N/A' ]) }}"
            class="content-center flex-auto h-16 py-2 text-center bg-stone-300 text-stone-800 hover:text-stone-600">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                keyboard_return
            </span>
        </a>
        <a href="{{ route('cameraV1-6', [
                    'city' => $section->city->slug ?? ($section->venue ? $section->venue->city->slug : 'N/A'),
                    'district' => $section->district->slug ?? ($section->venue ? $section->venue->district->slug : 'N/A'),
                    'venue' => $section->venue ? $section->venue->slug : 'N/A',
                    'section' => $section->slug ? $section->slug : 'N/A' ]) }}"
            class="content-center flex-auto h-16 py-2 text-center bg-stone-300 hover:text-stone-600 text-stone-800">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                photo_camera
            </span>
        </a>
        <a href="#"
            class="flex-auto h-16 py-2 text-center bg-stone-300 hover:text-stone-600 {{ false ? 'text-stone-800' : 'pointer-events-none opacity-90 text-stone-400' }}">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                skip_previous
            </span>
        </a>
        <a href="#"
            class="flex-auto h-16 py-2 text-center bg-stone-300 hover:text-stone-600 {{ false ? 'text-stone-800' : 'pointer-events-none opacity-90 text-stone-400' }}">
            <span class="material-symbols-rounded" style="font-size: 3rem;">
                skip_next
            </span>
        </a>
    </div>
</div>

@endsection

@section('scripts')
@endsection