@extends('layouts.app')

@section('title', $profile->user->name ?? 'Profil Pengguna')

@section('meta-og')
    {{-- Open Graph / SEO Meta Tags --}}
    <meta property="og:title" content="{{ ($profile->user->name ?? 'Profil Pengguna') }} - {{ $profile->headline }}">
    <meta property="og:description" content="{{ Str::limit(strip_tags($profile->about), 150) }}">
    <meta property="og:image" content="{{ $profile->photo_profile ? asset('storage/' . $profile->photo_profile) : 'https://via.placeholder.com/400x400/ffffff/000000?text=Profil' }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:type" content="profile">

    {{-- Optional: Twitter card --}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ ($profile->user->name ?? 'Profil Pengguna') }} - {{ $profile->headline }}">
    <meta name="twitter:description" content="{{ Str::limit(strip_tags($profile->about), 150) }}">
    <meta name="twitter:image" content="{{ $profile->photo_profile ? asset('storage/' . $profile->photo_profile) : 'https://via.placeholder.com/400x400/ffffff/000000?text=Profil' }}">
@endsection

@push('styles')
    <style>
        /* Custom shadow for sections on hover */
        .section-card-hover:hover {
            box-shadow: 0 10px 25px -3px rgba(59, 130, 246, 0.4), 0 4px 10px -2px rgba(59, 130, 246, 0.2);
        }
        /* Fade-in animation for sections */
        .animate-fade-in-up {
            animation: fade-in-up 0.6s ease-out backwards;
        }
        @keyframes fade-in-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* Delay for each section (adjust if you add/remove sections) */
        .section:nth-child(1) { animation-delay: 0s; } /* Header */
        .section:nth-child(2) { animation-delay: 0.1s; } /* About */
        .section:nth-child(3) { animation-delay: 0.2s; } /* Skills */
        .section:nth-child(4) { animation-delay: 0.3s; } /* Experience */
        .section:nth-child(5) { animation-delay: 0.4s; } /* Education */
        .section:nth-child(6) { animation-delay: 0.5s; } /* Portfolio */
        .section:nth-child(7) { animation-delay: 0.6s; } /* Lokasi Saya (NEW!) */
        .section:nth-child(8) { animation-delay: 0.7s; } /* Social Links */
        .section:nth-child(9) { animation-delay: 0.8s; } /* QR Code */
        .section:nth-child(10) { animation-delay: 0.9s; } /* Endorsements list */
        .section:nth-child(11) { animation-delay: 1.0s; } /* Endorse form */

        /* Custom timeline dot styles */
        .timeline-dot {
            top: 0.375rem; /* ~6px to vertically align with text */
            left: -1.75rem; /* ~28px to align with the border-l-4 */
        }
        /* Custom checkmark for verified status */
        .verified-icon {
            /* This is a fallback/example. Better to use a dedicated SVG directly */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>');
            background-size: cover;
            background-repeat: no-repeat;
        }
        /* Style for displaying text content that isn't an input field */
        .form-display-text {
            @apply block w-full rounded-md px-4 py-2 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200 border border-gray-200 dark:border-gray-600 select-text;
        }
        /* Style for the map container for iframe */
        #profile-map-iframe {
            height: 300px; /* Adjust height as needed */
            width: 100%;
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
            border: 1px solid #e2e8f0; /* border-gray-200 */
        }
        .dark #profile-map-iframe {
            border-color: #4a5568; /* dark:border-gray-600 */
        }

        /* --- Perbaikan CSS untuk Ikon agar tidak Overlay --- */
        .h2-with-icon {
            display: flex;
            align-items: center; /* Memastikan ikon dan teks sejajar secara vertikal */
            gap: 0.75rem; /* Tailwind: gap-3 (12px) - memberikan ruang antara ikon dan teks */
        }
        .h2-with-icon > span:first-child {
            line-height: 1; /* Pastikan tinggi baris ikon tidak terlalu besar */
            flex-shrink: 0; /* Mencegah ikon menyusut jika teks terlalu panjang */
        }
        .h2-with-icon > svg:first-child {
            flex-shrink: 0;
        }

        /* --- Style Tambahan untuk Header Banner Gambar --- */
        .profile-banner {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
@endpush

@section('content')
<div class="container mx-auto px-4 py-10 sm:px-6 lg:px-8">
    {{-- Flash Messages (Success/Error) for endorsement or other actions --}}
    @if(session('success'))
        <div class="flash-message bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-200 p-4 mb-6 rounded-md shadow-sm" role="alert">
            <p class="font-bold">Berhasil!</p>
            <p>{{ session('success') }}</p>
        </div>
    @endif

    @if(session('error'))
        <div class="flash-message bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-200 p-4 mb-6 rounded-md shadow-sm" role="alert">
            <p class="font-bold">Oops!</p>
            <p>{{ session('error') }}</p>
        </div>
    @endif

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in-up">
        {{-- Header Banner --}}
        <div class="relative h-48 profile-banner
             @if($activeThemeBannerImage)
                 " style="background-image: url('{{ $activeThemeBannerImage }}');"
             @else
                 bg-gradient-to-r from-blue-600 to-purple-700 dark:from-blue-800 dark:to-purple-900"
             @endif
        >
            {{-- Add overlay or pattern here if desired --}}
            <div class="absolute inset-0 bg-black opacity-30"></div>
            {{-- Edit Profile button if user is the profile owner --}}
            @auth
                @if(Auth::id() === $profile->user_id)
                    <a href="{{ route('profile.edit') }}" class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-full text-sm font-semibold backdrop-blur-sm transition-all duration-300 shadow-md">
                        <i class="fas fa-edit mr-2"></i> Edit Profil
                    </a>
                @endif
            @endauth
        </div>

        {{-- Main Profile Section --}}
        <div class="relative px-6 pb-8 sm:px-8 -mt-24 z-20 pt-5">
            <div class="flex flex-col md:flex-row md:items-end md:space-x-8 space-y-6 md:space-y-0">
                <img src="{{ $profile->photo_profile ? asset('storage/' . $profile->photo_profile) : 'https://ui-avatars.com/api/?name=' . urlencode($profile->user->name ?? 'U') . '&color=FFFFFF&background=Random' }}"
                    alt="Foto Profil {{ $profile->user->name ?? 'Pengguna' }}"
                    class="w-40 h-40 rounded-full object-cover border-6 border-white dark:border-gray-800 shadow-lg ring-4 ring-blue-500 transform transition-transform duration-300 hover:scale-105">
                <div class="flex-1 min-w-0 pt-4 md:pt-0">
                    <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white flex items-center flex-wrap gap-x-3">
                        {{ ($profile->user->name ?? 'Profil Pengguna') }}
                        @if($profile->is_verified)
                            <span class="text-blue-600 text-sm font-semibold bg-blue-100 dark:bg-blue-800 dark:text-blue-200 px-3 py-1 rounded-full flex items-center gap-1 transition-all duration-300 hover:scale-105">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                Terverifikasi
                            </span>
                        @endif
                    </h1>
                    <p class="mt-2 text-2xl text-gray-600 dark:text-gray-300 font-medium">{{ $profile->headline }}</p>
                    <div class="mt-2 flex items-center gap-2">
                        @php
                            $statusClass = '';
                            $statusText = '';
                            $statusIcon = '';
                            switch($profile->status_interest) {
                                case 'open_job':
                                    $statusClass = 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100';
                                    $statusText = 'Siap Kerja';
                                    $statusIcon = '💼';
                                    break;
                                case 'open_collab':
                                    $statusClass = 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100';
                                    $statusText = 'Siap Kolaborasi';
                                    $statusIcon = '🤝';
                                    break;
                                default: // not_available
                                    $statusClass = 'bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100';
                                    $statusText = 'Tidak Tersedia';
                                    $statusIcon = '🚫';
                                    break;
                            }
                        @endphp
                        <span class="px-4 py-1.5 rounded-full text-base font-semibold {{ $statusClass }} flex items-center gap-2 transition-all duration-300 hover:scale-105 shadow-sm">
                            <span role="img" aria-label="{{ $statusText }}">{{ $statusIcon }}</span> {{ $statusText }}
                        </span>
                        <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1 ml-auto">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                            {{ number_format($profile->view_count) }} views
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Profile Content (2-Column Grid for Desktop) --}}
    <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-8">
        {{-- Left Column (Main Content) --}}
        <div class="md:col-span-2 space-y-8">
            {{-- About Section --}}
            @if($profile->about)
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-blue-500 text-3xl leading-none">📖</span> Tentang Saya
                </h2>
                <div class="prose dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 leading-relaxed text-justify">
                    {!! $profile->about !!} {{-- Render actual HTML from TinyMCE --}}
                </div>
            </section>
            @endif

            {{-- Skills Section --}}
            @if($profile->skills && count($profile->skills) > 0)
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-purple-500 text-3xl leading-none">🛠️</span> Keterampilan
                </h2>
                <div class="flex flex-wrap gap-3">
                    @foreach($profile->skills as $skill)
                        <span class="px-4 py-1.5 bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100 rounded-full text-sm font-medium transition duration-300 ease-in-out hover:scale-105 shadow-sm">
                            {{ $skill }}
                        </span>
                    @endforeach
                </div>
            </section>
            @endif

            {{-- Experience Section --}}
            @if($profile->experience && count($profile->experience) > 0)
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3 ml-[3ch]">
                    <span class="text-green-500 text-3xl leading-none">💼</span> Pengalaman
                </h2>
                <div class="border-l-4 border-blue-500 dark:border-blue-700 pl-6 space-y-6">
                    @foreach($profile->experience as $exp)
                        <div class="relative py-2">
                            <div class="absolute timeline-dot w-5 h-5 bg-blue-500 rounded-full border-4 border-white dark:border-gray-800 flex items-center justify-center shadow-md">
                                <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l-2.707 2.707A3 3 0 0015 17v2a1 1 0 11-2 0v-2a1 1 0 00-1-1h-4a1 1 0 00-1 1v2a1 1 0 11-2 0v-2a3 3 0 00-.293-1.707L2 12.586V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 00-1 1v3a1 1 0 102 0v-3a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white ml-[3ch]">{{ $exp['title'] ?? 'N/A' }}</h3>
                                <p class="text-sm text-gray-600 dark:text-gray-400 ml-[3ch]">{{ $exp['year'] ?? 'N/A' }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
            @endif

            {{-- Education Section --}}
            @if($profile->education && count($profile->education) > 0)
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-indigo-500 text-3xl leading-none">🎓</span> Pendidikan
                </h2>
                <div class="border-l-4 border-green-500 dark:border-green-700 pl-6 space-y-6">
                    @foreach($profile->education as $edu)
                        <div class="relative py-2">
                            <div class="absolute timeline-dot w-5 h-5 bg-green-500 rounded-full border-4 border-white dark:border-gray-800 flex items-center justify-center shadow-md">
                                <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.394 2.08a1 1 0 00-.788 0L.242 8.35a.75.75 0 00.325 1.488l7.568 1.426L19.5 9.25l-2.072-1.282a1 1 0 00-.745-1.521l-7.794-1.26a1 1 0 00-.59-.727z"></path><path d="M14 6.75l-4.995 3.125 4.995 3.125V6.75z"></path></svg>
                            </div>
                            <div>
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white ml-[3ch]">
                                {{ $edu['degree'] ?? 'N/A' }}
                                </h3>

                                <p class="text-sm text-gray-600 dark:text-gray-400 ml-[3ch]">{{ $edu['year'] ?? 'N/A' }}</p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
            @endif

            {{-- Portfolio Section --}}
            @if($profile->portfolio && count($profile->portfolio) > 0)
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-red-500 text-3xl leading-none">🌐</span> Portofolio
                </h2>
                <ul class="list-none ml-0 space-y-3"> {{-- Changed from list-disc ml-6 to list-none ml-0 for custom styling --}}
                    @foreach($profile->portfolio as $item)
                        <li class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md transition-all duration-300 hover:bg-blue-50 dark:hover:bg-blue-900 hover:shadow-md">
                            <a href="{{ $item['url'] ?? '#' }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-2 text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 font-medium text-lg">
                                <svg class="w-5 h-5 text-current" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h3a1 1 0 100-2h-3zM4 11a1 1 0 100 2h3a1 1 0 100-2H4zM4 17a1 1 0 100 2h3a1 1 0 100-2H4zM10 17a1 1 0 100 2h3a1 1 0 100-2h-3zM10 3a1 1 0 100 2h3a1 1 0 100-2h-3zM4 5a1 1 0 100 2h3a1 1 0 100-2H4zM10 5a1 1 0 100 2h3a1 1 0 100-2h-3zM4 9a1 1 0 100 2h3a1 1 0 100-2H4zM10 9a1 1 0 100 2h3a1 1 0 100-2h-3zM10 11a1 1 0 100 2h3a1 1 0 100-2h-3zM16 11a1 1 0 100 2h3a1 1 0 100-2h-3zM16 13a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                                {{ $item['title'] ?? 'Untitled' }}
                                <svg class="inline-block w-4 h-4 ml-1 transform -translate-y-px text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"></path></svg>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </section>
            @endif



        </div>

        {{-- Right Column (Social, QR, Endorsements, Endorse Form) --}}
        <div class="space-y-8">
            {{-- Lokasi Saya (NEW SECTION) --}}

            @if($profile->user->alamat || $profile->user->kota || $profile->user->provinsi || $profile->user->negara || ($profile->user->latitude && $profile->user->longitude))
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-orange-500 text-3xl leading-none">📍</span> Lokasi Saya
                </h2>
                                    {{-- Embedded Google Maps using iframe --}}
                    @if($profile->user->alamat || ($profile->user->latitude && $profile->user->longitude)) {{-- Render map if address OR coordinates exist --}}
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Lokasi Peta</label>
                        <div id="profile-map-iframe" class="w-full h-80 rounded-lg overflow-hidden">
                            <iframe
                                src="https://maps.google.com/maps?q={{ urlencode($profile->user->alamat . ', ' . $profile->user->kota . ', ' . $profile->user->provinsi . ', ' . $profile->user->negara) }}&output=embed"
                                width="100%"
                                height="100%"
                                frameborder="0"
                                style="border:0"
                                allowfullscreen=""
                                loading="lazy">
                            </iframe>
                        </div>
                    </div>
                    @else
                    {{-- Fallback if no address or coordinates for map display --}}
                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Lokasi Peta</label>
                        <div id="profile-map-iframe" class="rounded-lg shadow-sm flex items-center justify-center bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-center p-4">
                            <p>Alamat atau koordinat lokasi belum tersedia untuk ditampilkan di peta.</p>
                        </div>
                    </div>
                    @endif
                <div class="space-y-4">
                    @if($profile->user->alamat)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Alamat Lengkap</label>
                        <p class="form-display-text">{{ $profile->user->alamat }}</p>
                    </div>
                    @endif
                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                        @if($profile->user->kota)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Kota</label>
                            <p class="form-display-text">{{ $profile->user->kota }}</p>
                        </div>
                        @endif
                        @if($profile->user->provinsi)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Provinsi</label>
                            <p class="form-display-text">{{ $profile->user->provinsi }}</p>
                        </div>
                        @endif
                        @if($profile->user->negara)
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Negara</label>
                            <p class="form-display-text">{{ $profile->user->negara }}</p>
                        </div>
                        @endif
                    </div>
                    {{-- Optional: Display coordinates if available --}}
                    @if($profile->user->latitude && $profile->user->longitude)
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Koordinat</label>
                        <p class="form-display-text">
                            Lat: {{ $profile->user->latitude }} / Long: {{ $profile->user->longitude }}
                        </p>
                    </div>
                    @endif


                </div>
            </section>
            @endif
            {{-- END Lokasi Saya (NEW SECTION) --}}
            {{-- Social Links --}}
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-yellow-500 text-3xl leading-none">🔗</span> Tautan Sosial
                </h2>
                <div class="flex flex-col gap-4">
                    {{-- LinkedIn --}}
                    @if($profile->linkedin)
                        <a href="{{ $profile->linkedin }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/480px-LinkedIn_logo_initials.png" alt="LinkedIn" class="w-6 h-6">
                            LinkedIn
                        </a>
                    @endif

                    {{-- GitHub --}}
                    @if($profile->github)
                        <a href="{{ $profile->github }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 hover:text-gray-700 dark:text-gray-200 dark:hover:text-gray-50 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" class="w-6 h-6 dark:invert">
                            GitHub
                        </a>
                    @endif

                    {{-- WhatsApp --}}
                    @if($profile->whatsapp)
                        <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $profile->whatsapp) }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-green-600 hover:text-green-800 dark:text-green-400 dark:hover:text-green-200 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/WhatsApp_icon.png/598px-WhatsApp_icon.png" alt="WhatsApp" class="w-6 h-6">
                            WhatsApp
                        </a>
                    @endif

                    {{-- Website --}}
                    @if($profile->website)
                        <a href="{{ $profile->website }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-purple-200 font-medium transition-all duration-200 hover:shadow-md">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V4a2 2 0 00-2-2H4zm2 5a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 4a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
                            Website
                        </a>
                    @endif

                    {{-- ORCID --}}
                    @if($profile->orcid)
                        <a href="{{ $profile->orcid }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-green-700 hover:text-green-900 dark:text-green-400 dark:hover:text-green-200 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/ORCID_iD.svg/1024px-ORCID_iD.svg.png" alt="ORCID" class="w-6 h-6">
                            ORCID
                        </a>
                    @endif

                    {{-- YouTube --}}
                    @if($profile->youtube)
                        <a href="{{ $profile->youtube }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-200 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/e/ef/Youtube_logo.png" alt="YouTube" class="w-6 h-6">
                            YouTube
                        </a>
                    @endif

                    {{-- TikTok --}}
                    @if($profile->tiktok)
                        <a href="{{ $profile->tiktok }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-black hover:text-gray-700 dark:text-white dark:hover:text-gray-300 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Ionicons_logo-tiktok.svg/1200px-Ionicons_logo-tiktok.svg.png" alt="TikTok" class="w-6 h-6">
                            TikTok
                        </a>
                    @endif

                    {{-- Facebook --}}
                    @if($profile->facebook)
                        <a href="{{ $profile->facebook }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Facebook_icon.svg/512px-Facebook_icon.svg.png" alt="Facebook" class="w-6 h-6">
                            Facebook
                        </a>
                    @endif

                    {{-- Instagram --}}
                    @if($profile->instagram)
                        <a href="{{ $profile->instagram }}" target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-700 text-pink-500 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-200 font-medium transition-all duration-200 hover:shadow-md">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/512px-Instagram_logo_2016.svg.png" alt="Instagram" class="w-6 h-6">
                            Instagram
                        </a>
                    @endif
                </div>

            </section>

            {{-- QR Code Section --}}
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center justify-center gap-3">
                    <span class="text-orange-500 text-3xl leading-none">📲</span> Kode QR
                </h2>
                <div class="p-4 bg-white dark:bg-gray-700 rounded-lg inline-block shadow-inner border border-gray-200 dark:border-gray-600">
                    {!! QrCode::size(180)->generate(url()->current()) !!}
                </div>
                <p class="mt-3 text-gray-600 dark:text-gray-400 text-sm">Pindai untuk melihat profil ini.</p>
            </section>

            {{-- Endorsement List Section --}}
            @if($endorsements->count())
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-pink-500 text-3xl leading-none">🌟</span> Endorsement
                </h2>
                <div class="space-y-4">
                    @foreach($endorsements as $endorsement)
                        <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-sm border border-gray-100 dark:border-gray-600 transition-all duration-200 hover:shadow-md">
                            <div class="font-semibold text-gray-800 dark:text-gray-200 text-lg">{{ $endorsement->user->name }}</div>
                            @if($endorsement->skill)
                                <div class="text-sm text-blue-700 dark:text-blue-300 mt-1 flex items-center gap-1">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v10a1 1 0 01-3.248.784L5 13 4 14l-1 1-1 1H1c-.552 0-1 .448-1 1v2c0 .552.448 1 1 1h4c.552 0 1-.448 1-1v-2c0-.552-.448-1-1-1v-1l1-1 1-1 3.248-2.216A1 1 0 0112 10V2a1 1 0 01-.7-1.046zM11 20H1a1 1 0 010-2h10a1 1 0 010 2zM19 14h-1a1 1 0 01-1-1v-3a1 1 0 011-1h1a1 1 0 011 1v3a1 1 0 01-1 1z" clip-rule="evenodd"></path></svg>
                                    Skill: <span class="font-medium">{{ $endorsement->skill }}</span>
                                </div>
                            @endif
                            @if($endorsement->comment)
                                <p class="mt-2 text-gray-700 dark:text-gray-300 italic">"{{ $endorsement->comment }}"</p>
                            @endif

                            {{-- Delete endorsement button (only for the logged-in user's own endorsements) --}}
                            @if (auth()->check() && auth()->id() === $endorsement->user_id)
                                <form action="{{ route('profile.endorse.delete', ['slug' => $profile->slug, 'endorsement' => $endorsement->id]) }}" method="POST" class="mt-3">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 text-sm font-medium transition-colors duration-200 flex items-center gap-1"
                                            onclick="return confirm('Apakah Anda yakin ingin membatalkan endorsement ini?')">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                                        Batalkan Endorsement
                                    </button>
                                </form>
                            @endif
                        </div>
                    @endforeach
                </div>
            </section>
            @endif

            {{-- Endorse Form Section --}}
            @auth
            @if(Auth::id() !== $profile->user_id) {{-- Only show form if it's not the user's own profile --}}
            <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 section section-card-hover animate-fade-in-up">
                <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-3">
                    <span class="text-cyan-500 text-3xl leading-none">✍️</span> Beri Endorsement
                </h2>
                <form action="{{ route('profile.endorse', $profile->slug) }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label for="endorse_skill" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Skill yang di-endorse (Opsional)</label>
                        <input type="text" name="skill" id="endorse_skill" value="{{ old('skill') }}"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('skill') border-red-500 @enderror"
                               placeholder="Contoh: Laravel, Public Speaking, Leadership">
                        @error('skill')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="endorse_comment" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Komentar (Opsional)</label>
                        <textarea name="comment" id="endorse_comment" rows="4"
                                  class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('comment') border-red-500 @enderror"
                                  placeholder="Tulis apresiasi atau komentar Anda tentang profil ini..."></textarea>
                        @error('comment')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <button type="submit" class="w-full px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-md
                                                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
                        Kirim Endorsement
                    </button>
                </form>
            </section>
            @endif
            @endauth
        </div>
    </div>
</div>

{{-- JavaScript for Flash Message Dismissal --}}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const flashMessages = document.querySelectorAll('.flash-message');
        flashMessages.forEach(msg => {
            setTimeout(() => {
                msg.style.opacity = '0';
                msg.style.height = '0';
                msg.style.marginBottom = '0';
                msg.style.padding = '0';
                msg.style.overflow = 'hidden';
            }, 5000); // Message will fade out after 5 seconds
        });
    });
</script>
@endsection

@section('schema')
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "{{ ($profile->user->name ?? 'Profil Pengguna') }}",
    "headline": "{{ $profile->headline }}",
    "description": "{{ Str::limit(strip_tags($profile->about), 300) }}",
    "image": "{{ $profile->photo_profile ? asset('storage/' . $profile->photo_profile) : 'https://via.placeholder.com/400x400/ffffff/000000?text=Profil' }}",
    "url": "{{ url()->current() }}",
    "sameAs": [
        @if($profile->linkedin) "{{ $profile->linkedin }}", @endif
        @if($profile->github) "{{ $profile->github }}", @endif
        @if($profile->whatsapp) "https://wa.me/{{ preg_replace('/[^0-9]/', '', $profile->whatsapp) }}", @endif
        @if($profile->website) "{{ $profile->website }}" @endif
    ],
    @if($profile->user->alamat && $profile->user->kota && $profile->user->provinsi && $profile->user->negara)
    "address": {
        "@type": "PostalAddress",
        "streetAddress": "{{ $profile->user->alamat ?? '' }}",
        "addressLocality": "{{ $profile->user->kota ?? '' }}",
        "addressRegion": "{{ $profile->user->provinsi ?? '' }}",
        "addressCountry": "{{ $profile->user->negara ?? '' }}"
    },
    @endif
    @if($profile->user->latitude && $profile->user->longitude)
    "geo": {
        "@type": "GeoCoordinates",
        "latitude": "{{ $profile->user->latitude }}",
        "longitude": "{{ $profile->user->longitude }}"
    }
    @endif
}
</script>
@endsection