@extends('layouts.dashboardUser')

@section('title', 'Detail Laporan')

@section('content')

@if(session()->has('success'))
    <div id="success-popup" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm z-50">
        <div class="bg-white rounded-xl shadow-lg max-w-md w-full p-6 text-center animate-fade-in">
            <div class="flex justify-center">
                <div class="bg-blue-100 p-3 rounded-full">
                    <svg class="w-12 h-12 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
            </div>
            <h2 class="text-xl font-semibold text-gray-800 mt-4">Berhasil!</h2>
            <p class="text-gray-600 mt-2">{{ session('success') }}</p>
            <button onclick="closeSuccessPopup()" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Tutup</button>
        </div>
    </div>

    <script>
        setTimeout(() => {
            closeSuccessPopup();
        }, 3000);

        function closeSuccessPopup() {
            let popup = document.getElementById("success-popup");
            if (popup) {
                popup.classList.add("opacity-0", "transition-opacity", "duration-500");
                setTimeout(() => popup.remove(), 500);
            }
        }
    </script>
@endif

<!-- Wrapper utama -->
<div class="max-w-4xl mx-auto">
    <!-- Header Biru -->
    <div class="bg-blue-900 text-white py-10 shadow-lg rounded-t-lg">
        <div class="flex flex-col items-center">
            <h2 class="text-2xl font-bold">Detail Laporan Kerja</h2>
            <p class="text-gray-300">{{ \Carbon\Carbon::parse($lapor->tanggal)->format('d M Y') }}</p>
        </div>
    </div>

    <!-- Card Detail -->
    <div class="bg-white shadow-xl rounded-b-lg p-8 border border-gray-200">
      
        <div class="space-y-4">
            <div>
                <label class="text-blue-900 font-semibold">Lokasi:</label>
                <p class="text-gray-700">{{ $lapor->lokasi }}</p>
            </div>

            <div>
                <label class="text-blue-900 font-semibold">Hasil Kerja:</label>
                <p class="text-gray-700">{{ $lapor->hasil_kerja }}</p>
            </div>

            <div>
                <label class="text-blue-900 font-semibold">Catatan:</label>
                <p class="text-gray-700">{{ $lapor->catatan ?? '-' }}</p>
            </div>

            {{-- Menampilkan Foto-foto Laporan --}}
            @php
    $fotos = is_string($lapor->foto) ? json_decode($lapor->foto, true) ?? [] : $lapor->foto;
@endphp

@if (!empty($fotos))
<div>
    <label class="text-blue-900 font-semibold">Foto:</label>
    <div class="mt-4">
        <div class="mt-2 flex flex-wrap gap-2 items-center">
            @foreach ($fotos as $foto)
                <div class="relative w-24 h-24 sm:w-32 sm:h-32">
                    <img src="{{ asset('storage/' . $foto) }}" alt="Foto Laporan" class="w-full h-full object-cover rounded-lg shadow">
                    <a href="{{ asset('storage/' . $foto) }}" download class="absolute bottom-1 right-1 bg-white p-1 rounded-full shadow-md hover:bg-gray-200 transition">
                        <svg class="w-5 h-5 text-blue-600 hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v12m8-4l-8 8-8-8"/>
                        </svg>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</div>
@else
    <p class="text-gray-500">Tidak ada foto</p>
@endif

        
        </div>

        <div class="mt-6 flex gap-3">
            <a href="{{ route('riwayat.laporan') }}" class="text-white bg-blue-900 px-4 py-2 rounded-md hover:bg-blue-800 transition">Kembali</a>
            <a href="{{ route('riwayat.edit', $lapor->id) }}" class="text-white bg-blue-500 px-4 py-2 rounded-md hover:bg-blue-900 transition">Edit</a>
        </div>
    </div>
</div>

@endsection