@extends('layouts.dashboardAdmin')

@section('content')
<div class="container mx-auto p-6">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">Detail Laporan</h1>

    <!-- Tampilkan informasi detail laporan -->
    <div class="bg-white p-8  space-y-6">
        
<!-- Nama Pendamping -->
<div class="flex items-center space-x-3">
    <i class="fas fa-user-circle text-2xl text-blue-600"></i>
    <p class="text-lg font-semibold text-gray-700">Nama Pendamping: 
        <span class="text-gray-600">{{ $laporan->user ? $laporan->user->name : 'Tidak ada pendamping' }}</span>
    </p>
</div>


        <!-- Tanggal -->
        <div class="flex items-center space-x-3">
            <i class="fas fa-calendar-alt text-2xl text-blue-600"></i>
            <p class="font-medium text-gray-600"><strong>Tanggal:</strong> {{ \Carbon\Carbon::parse($laporan->tanggal)->format('d F Y') }}</p>
        </div>

        <!-- Lokasi -->
        <div class="flex items-center space-x-3">
            <i class="fas fa-map-marker-alt text-2xl text-blue-600"></i>
            <p class="font-medium text-gray-600"><strong>Lokasi:</strong> {{ $laporan->lokasi }}</p>
        </div>
        
        <!-- Hasil Kerja -->
        <div class="flex items-start space-x-3">
            <i class="fas fa-briefcase text-2xl text-blue-600"></i>
            <p class="font-medium text-gray-600 max-w-full break-words"><strong>Hasil Kerja:</strong> {{ $laporan->hasil_kerja }}</p>
        </div>
        
        <!-- Catatan -->
        <div class="flex items-start space-x-3">
            <i class="fas fa-sticky-note text-2xl text-blue-600"></i>
            <p class="font-medium text-gray-600 max-w-full break-words"><strong>Catatan:</strong> {{ $laporan->catatan }}</p>
        </div>


     <!-- Foto Dokumentasi -->
@if (!empty($laporan->foto))
<div>
    <h3 class="text-xl font-semibold text-gray-700 mb-4">Foto Dokumentasi</h3>
    <div class="flex w-[40%] gap-3">
        @foreach (json_decode($laporan->foto, true) as $foto)
        <div class="relative sm:w-[50%] h-48 group overflow-hidden rounded-lg shadow-md">
            <!-- Gambar Dokumentasi dengan ukuran lebih kecil -->
            <img src="{{ asset('storage/' . $foto) }}" alt="Dokumentasi" class="w-full h-full object-cover rounded-lg transition-transform transform group-hover:scale-105">

            <!-- Ikon Download -->
            <a href="{{ asset('storage/' . $foto) }}" download class="absolute top-3 right-3 bg-white p-2 rounded-full shadow-lg opacity-80 group-hover:opacity-100 transition-opacity">
                <i class="fas fa-download text-xl text-blue-600"></i>
            </a>
        </div>
        @endforeach
    </div>
</div>
@endif

    </div>

    <!-- Tombol Kembali -->
    <div class="mt-8">
        <a href="{{ route('admin.laporan.index') }}" class="bg-blue-900 text-white py-3 px-6 rounded-lg shadow-md hover:bg-blue-500 transition duration-300 ease-in-out">
           Kembali
        </a>
    </div>
</div>
@endsection