lpj/resources/views/penilai/components/foto-lampiran.blade.php

@isset($basicData['foto'])
    @php
        $photos = $formFoto['upload_foto'] ?? [];
        if (!is_array($photos)) {
            $photos = [];
        }
        $groupedPhotos = collect($photos)->groupBy('category');
    @endphp

    @if ($groupedPhotos->isEmpty())
        <p class="text-gray-500">Tidak ada foto yang tersedia.</p>
    @else
        @foreach ($groupedPhotos as $category => $photos)
            <div class="mt-5">
                <h2 class="text-gray-800 font-bold text-xl mb-3">{{ $category ?? 'Tanpa Kategori' }}</h2>
                <div class="card border rounded-lg shadow-lg p-4">
                    <!-- Carousel Container -->
                    <div class="relative w-full overflow-hidden">
                        <div class="flex transition-transform duration-500 ease-in-out" id="carousel-{{ $category }}">
                            <span class="absolute top-0 right-2 text-white">
                                <i class="ki-filled ki-maximize"></i>
                            </span>
                            @foreach ($photos as $index => $item)
                                <div class="min-w-full flex flex-col items-center hover:cursor-pointer"
                                    onclick="openPreview('{{ asset('storage/' . $item['path']) }}', '{{ $item['name'] }}', '{{ $item['description'] }}')">

                                    <div class="w-full overflow-hidden rounded-md" style="height: 500px;">
                                        @if (isset($item['path']))
                                            <img src="{{ asset('storage/' . $item['path']) }}"
                                                alt="Gambar {{ $index + 1 }}" class="w-full h-full object-cover">
                                        @else
                                            <p class="text-gray-500">Gambar tidak tersedia</p>
                                        @endif
                                    </div>
                                    <h3 class="text-gray-600 font-semibold text-lg mt-3">
                                        {{ $item['name'] ?? 'Foto - ' . ($index + 1) }}
                                    </h3>
                                    <p class="text-gray-500 text-sm mt-1">{{ $item['description'] ?? '-' }}</p>

                                </div>
                            @endforeach
                        </div>

                        <!-- Navigation Buttons -->
                        <button
                            class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
                            onclick="prevSlide('{{ $category }}')">
                            <i class="ki-outline ki-left-square"></i>
                        </button>
                        <button
                            class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2 focus:outline-none"
                            onclick="nextSlide('{{ $category }}')">
                            <i class="ki-outline ki-right-square"></i>
                        </button>
                    </div>
                </div>
            </div>
        @endforeach
    @endif
@endisset

<script>
    let currentIndex = {};

    function nextSlide(category) {
        if (!currentIndex[category]) currentIndex[category] = 0;

        const carousel = document.getElementById(`carousel-${category}`);
        const totalSlides = carousel.children.length;

        currentIndex[category] = (currentIndex[category] + 1) % totalSlides;
        carousel.style.transform = `translateX(-${currentIndex[category] * 100}%)`;
    }

    function prevSlide(category) {
        if (!currentIndex[category]) currentIndex[category] = 0;

        const carousel = document.getElementById(`carousel-${category}`);
        const totalSlides = carousel.children.length;

        currentIndex[category] = (currentIndex[category] - 1 + totalSlides) % totalSlides;
        carousel.style.transform = `translateX(-${currentIndex[category] * 100}%)`;
    }

    function openPreview(imagePath, name, description) {
        const previewModal = document.createElement('div');
        previewModal.className = 'fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50';
        previewModal.innerHTML = `
        <div class="relative">
             <h3 class="text-white font-semibold text-lg mt-3 text-center">${name}</h3>
            <img src="${imagePath}" class="max-w-full max-h-screen object-contain">
            <button class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-2"
                onclick="closePreview(this)">×</button>

              <p class="text-white text-sm mt-1">${description}</p>
        </div>
    `;
        document.body.appendChild(previewModal);
    }


    function closePreview(button) {
        const modal = button.closest('div.fixed');
        if (modal) {
            modal.remove();
        }
    }
</script>


@php
    $fotoTypes = ['foto_gistaru', 'foto_bhumi', 'foto_argis_region', 'foto_tempat', 'foto_sentuh_tanahku'];
    if (($key = array_search('foto_tempat', $fotoTypes)) !== false) {
        unset($fotoTypes[$key]);
        array_unshift($fotoTypes, 'foto_tempat');
    }
    $adaFoto = false;
    if (isset($forminspeksi)) {
        foreach ($fotoTypes as $type) {
            $imagePath = $forminspeksi[$type] ?? null;
            if ($imagePath && file_exists(storage_path('app/public/' . $imagePath))) {
                $adaFoto = true;
                break;
            }
        }
    }
@endphp

@if ($adaFoto)
    <div class="card">
        <div class="card-header bg-agi-50" id="basic_settings">
            <h3 class="card-title">
                Peta
            </h3>
        </div>
        <div class="card-body">

            <div>
                @if (isset($forminspeksi))
                    @forelse ($fotoTypes as $type)
                        <div class="border photo-item">
                            @php
                                $imagePath = $forminspeksi[$type] ?? null;
                            @endphp

                            @if ($imagePath && file_exists(storage_path('app/public/' . $imagePath)))
                                <img src="{{ asset('storage/' . $imagePath) }}" alt="{{ $type }}"
                                    class="w-full h-auto object-cover">
                            @endif
                            <p class="mt-2 text-sm">{{ Str::title(str_replace('_', ' ', $type)) }}</p>
                        </div>
                    @empty
                        <p>Tidak ada tipe foto yang tersedia</p>
                    @endforelse
                @endif
            </div>
        </div>
    </div>
@endif