@extends('layouts.app')

@section('content')
<div class="flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-md w-full">
        <h2 class="text-2xl font-bold mb-6">Profil Mahasiswa</h2>
        <div class="flex items-center mb-4">
            <!-- Menampilkan Foto Profil -->
            <img src="{{ Auth::user()->foto_profil ? asset('storage/' . Auth::user()->foto_profil) : asset('default-profile.png') }}" alt="Foto Profil" class="w-24 h-24 rounded-full mr-4">
            <div>
                <h3 class="text-lg font-semibold">{{ Auth::user()->nama }}</h3>
                <p>NIM: {{ Auth::user()->nim }}</p>
                <p>Prodi: {{ Auth::user()->prodi }}</p>
                <p>Semester: {{ Auth::user()->semester }}</p>
                <p>WhatsApp: {{ Auth::user()->whatsapp }}</p>
                <p>Email: {{ Auth::user()->email }}</p>
                <p>Instagram: {{ Auth::user()->instagram ?? 'Tidak ada' }}</p> <!-- Menampilkan Instagram, jika ada -->
            </div>
        </div>
        <hr><br>
        <!-- Link untuk mengedit profil -->
        <a href="/settings" class="bg-blue-500 text-white py-2 px-3 rounded-md hover:bg-blue-600"><i class='bx bxs-edit'></i></i></a>
    </div>
</div>

<!-- Daftar Postingan Pengguna -->
<div class="flex justify-center mt-4">
    <div class="bg-white p-8 rounded-lg shadow-md w-full">
        <h2 class="text-2xl font-bold mb-4">Postingan Saya</h2>
        @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">
                    <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 my-2 rounded">
                @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() }}</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-2 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>
                    <!-- Tombol Delete -->
                    <button class="bg-red-500 text-white py-2 px-3 rounded-md hover:bg-red-600" onclick="confirmDelete({{ $post->id }})"><i class='bx bxs-trash-alt' ></i></button>
                </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
    </div>
</div>

<!-- Modal Konfirmasi -->
<div id="deleteModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <h3 class="text-lg font-semibold mb-4">Konfirmasi Penghapusan</h3>
        <p>Apakah Anda yakin ingin menghapus postingan ini?</p>
        <div class="mt-4 flex justify-end">
            <button id="cancelButton" class="mr-2 text-gray-500" onclick="window.location.href='/profile'">Batal</button>
            <button id="confirmButton" class="bg-red-500 text-white px-4 py-2 rounded">Hapus</button>
        </div>
    </div>
</div>

<script>
    let postIdToDelete = null;

    function confirmDelete(postId) {
        postIdToDelete = postId;
        document.getElementById('deleteModal').classList.remove('hidden');
    }

    document.getElementById('confirmButton').onclick = function() {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = `/posts/${postIdToDelete}`;
        
        const csrfToken = document.createElement('input');
        csrfToken.type = 'hidden';
        csrfToken.name = '_token';
        csrfToken.value = '{{ csrf_token() }}';
        
        const methodField = document.createElement('input');
        methodField.type = 'hidden';
        methodField.name = '_method';
        methodField.value = 'DELETE';
        
        form.appendChild(csrfToken);
        form.appendChild(methodField);
        document.body.appendChild(form);
        form.submit();
    };
</script>
@endsection