@extends('layouts.app')

@section('content')
<div class="bg-white p-8 rounded-lg shadow-md w-full">
    <h2 class="text-2xl font-bold mb-6">Feed</h2>
    <form action="/posts" method="POST" enctype="multipart/form-data" class="mb-6">
        @csrf
        <div class="mb-4">
            <input type="file" name="foto" class="block w-full text-sm text-slate-500
                file:mr-4 file:py-2 file:px-4
                file:rounded-full file:border-0
                file:text-sm file:font-semibold
                file:bg-violet-50 file:text-violet-700
                hover:file:bg-violet-100" />
        </div>
        <div class="mb-4">
            <textarea name="deskripsi" placeholder="  Deskripsi" class="block w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring-blue-200"></textarea>
        </div>
        <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded-full hover:bg-blue-600">Buat Postingan</button>
    </form>
</div>

<br>

<!-- Hasil Pencarian -->
@if(isset($users) && $users->isNotEmpty())
    <div class="bg-white p-8 rounded-lg shadow-md w-full mb-6">
        <h2 class="text-2xl font-bold mb-4">Hasil Pencarian</h2>
        <ul>
                @foreach($users as $user)
                <li class="border-b py-2 flex items-center">
                    <img src="{{ $user->foto_profil ? asset('storage/' . $user->foto_profil) : asset('default-profile.png') }}" 
                         alt="Foto Profil" 
                         class="w-10 h-10 rounded-full mr-2">
                    <a href="/profile/{{ $user->id }}" class="text-blue-500">{{ $user->nama }}</a>
                </li>
            @endforeach
        </ul>
    </div>
@endif

<div class="bg-white p-8 rounded-lg shadow-md w-full">
    @foreach($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">
                <a href="{{ route('profile.show', $post->user->id) }}" class="font-semibold text-blue-500 hover:text-blue-600">{{ $post->user->nama }}</a>
            </div>
            <p>{{ $post->deskripsi }}</p>
            @if($post->foto)
                <img src="{{ asset('storage/' . $post->foto) }}" alt="Postingan" class="w-full h-auto my-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-full 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-full 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">
                        <a href="{{ route('profile.show', $comment->user->id) }}" class="font-semibold text-blue-500 hover:text-blue-600">{{ $comment->user->nama }}</a>: {{ $comment->komentar }}
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</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