@extends('layouts.app')

@section('content')
<div class="container mx-auto my-4">
    <div class="bg-white p-8 rounded-lg shadow-md">
        <h2 class="text-2xl font-bold mb-6">{{ $user->nama }}'s Profile</h2>
        <div class="flex items-center mb-4">
            <img src="{{ $user->foto_profil ? asset('storage/' . $user->foto_profil) : asset('default-profile.png') }}" 
                 alt="Foto Profil" 
                 class="w-24 h-24 rounded-full mr-4">
            <div>
                <p class="text-lg font-semibold">NIM: {{ $user->nim }}</p>
                <p>Prodi: {{ $user->prodi }}</p>
                <p>Semester: {{ $user->semester }}</p>
                <p>WhatsApp: {{ $user->whatsapp }}</p>
                <p>Email: {{ $user->email }}</p>
                <p>Instagram: {{ $user->instagram ?? 'Tidak ada' }}</p>
            </div>
        </div>
    </div>

    <div class="bg-white p-8 rounded-lg shadow-md mt-6">
        <h2 class="text-2xl font-bold mb-4">Postingan {{ $user->nama }}</h2>
        @if($user->posts->isEmpty())
            <p>Tidak ada postingan yang ditemukan.</p>
        @else
            @foreach($user->posts as $post)
                <div class="mb-4 p-4 border rounded-lg">
                    <div class="flex items-center mb-2">
                        <img 
                            src="{{ $post->user->foto_profil ? asset('storage/' . $post->user->foto_profil) : asset('default-profile.png') }}" 
                            alt="Foto Profil" 
                            class="w-10 h-10 rounded-full mr-2">
                        <span class="font-semibold">{{ $post->user->nama }}</span>
                    </div>
                    <p>{{ $post->deskripsi }}</p>
                    @if($post->foto)
                        <img src="{{ asset('storage/' . $post->foto) }}" alt="Postingan" class="w-full h-auto mb-2 rounded cursor-pointer" onclick="openModal('{{ asset('storage/' . $post->foto) }}')">
                    @endif
                    <div class="flex justify-between mt-2 items-center">
                        <div class="flex items-center">
                            <form action="/posts/{{ $post->id }}/like" method="POST" class="mr-2">
                                @csrf
                                <button type="submit" class="flex items-center text-blue-500 hover:text-blue-600">
                                    <i class='bx bx-like'></i> <!-- Boxicon for like -->
                                </button>
                            </form>
                            <span class="text-gray-600">{{ $post->likes->count() }} Likes</span> <!-- Display total likes -->
                        </div>
                        <form action="/posts/{{ $post->id }}/comment" method="POST" class="flex">
                            @csrf
                            <input type="text" name="komentar" placeholder="Komentar..." class="border rounded-md p-1 mr-2 focus:border-blue-500 focus:ring focus:ring-blue-200" required>
                            <button type="submit" class="bg-blue-500 text-white py-1 px-3 rounded-md hover:bg-blue-600"><i class='bx bxs-send'></i></button>
                        </form>
                    </div>
                    <div class="mt-2">
                        @foreach($post->comments as $comment)
                            <div class="text-gray-600">{{ $comment->user->nama }}: {{ $comment->komentar }}</div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        @endif
    </div>
</div>

<!-- Modal untuk menampilkan gambar yang diperbesar -->
<div id="imageModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
    <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="closeModal()">&times;</span>
    <img id="modalImage" src="" alt="Gambar Besar" class="max-w-full max-h-full">
</div>

<script>
    function openModal(imageSrc) {
        document.getElementById('modalImage').src = imageSrc;
        document.getElementById('imageModal').classList.remove('hidden');
    }

    function closeModal() {
        document.getElementById('imageModal').classList.add('hidden');
    }
</script>
@endsection