@extends('layouts.public')

@section('title', $user->name . ' | KunciLink Profile')

@section('meta_description')
{{ $user->name }} ({{ '@' . $user->username }}) di KunciLink. {{ $user->bio ? $user->bio : 'Lihat profil, link, dan karya terbaiknya di KunciLink.' }}
@endsection

@section('content')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfilePage",
  "mainEntity": {
    "@type": "Person",
    "name": "{{ $user->name }}",
    "alternateName": "@{{ $user->username }}",
    "url": "{{ url('/u/' . $user->username) }}",
    "image": "{{ $user->profile_picture_url ?? asset('img/user-a-solid.svg') }}",
    @if($user->bio)
    "description": "{{ addslashes($user->bio) }}",
    @endif
    @php
      $socials = collect($user->links ?? [])->filter(function($l){
        return isset($l['url']) && (str_contains($l['url'], 'facebook.com') || str_contains($l['url'], 'twitter.com') || str_contains($l['url'], 'instagram.com') || str_contains($l['url'], 'youtube.com') || str_contains($l['url'], 't.me'));
      })->pluck('url')->values();
    @endphp
    @if($socials->count())
    "sameAs": {!! $socials->toJson() !!},
    @endif
    "identifier": "{{ $user->id }}"
  }
}
</script>

{{-- Success Message --}}
@if(session('success'))
  <div class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg shadow-lg">
    {{ session('success') }}
  </div>
  <script>
    setTimeout(function() {
      document.querySelector('.fixed.top-5').style.display = 'none';
    }, 3000);
  </script>
@endif

{{-- Profile Visibility Notification (only for profile owner) --}}
@php
    $isOwner = auth()->check() && auth()->user()->id === $user->id;
@endphp
@if($isOwner)
    @if($user->isProfilePrivate())
        <div class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg shadow-lg max-w-md">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                    <div>
                        <h5 class="font-semibold">Profil Privat Aktif</h5>
                        <p class="text-sm">
                            Profil Anda saat ini bersifat privat dan tidak dapat diakses oleh publik. 
                            <a href="{{ route('profile.settings') }}" class="underline font-medium">Klik di sini</a> untuk mengubah pengaturan visibilitas profil.
                        </p>
                    </div>
                </div>
                <button onclick="this.parentElement.parentElement.style.display='none'" class="ml-4 text-yellow-700 hover:text-yellow-900">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
        </div>
    @else
        <div class="fixed top-5 left-1/2 transform -translate-x-1/2 z-50 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg shadow-lg max-w-md">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <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>
                    <div>
                        <h5 class="font-semibold">Profil Publik Aktif</h5>
                        <p class="text-sm">
                            Profil Anda saat ini bersifat publik dan dapat diakses oleh semua orang. 
                            <a href="{{ route('profile.settings') }}" class="underline font-medium">Klik di sini</a> untuk mengubah pengaturan visibilitas profil.
                        </p>
                    </div>
                </div>
                <button onclick="this.parentElement.parentElement.style.display='none'" class="ml-4 text-green-700 hover:text-green-900">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                    </svg>
                </button>
            </div>
        </div>
    @endif
    <script>
        setTimeout(function() {
            const alerts = document.querySelectorAll('.fixed.top-5');
            alerts.forEach(alert => {
                alert.style.display = 'none';
            });
        }, 5000);
    </script>
@endif

<div class="max-w-md mx-auto px-4 py-12">
    {{-- Modern Profile Card --}}
    <div class="bg-white rounded-2xl shadow-lg border overflow-hidden">
        {{-- Gradient Header --}}
        <div class="bg-gradient-to-r from-blue-500 to-purple-600 py-8 text-center relative">
            <div class="absolute inset-0 bg-black bg-opacity-10"></div>
            <div class="relative z-10">
                {{-- Profile Picture with Modern Styling --}}
                <div class="relative inline-block">
                    <img src="{{ $user->profile_picture_url ?? asset('img/user-a-solid.svg') }}"
                         alt="Avatar" class="w-24 h-24 rounded-full mx-auto mb-4 border-4 border-white shadow-lg">
                    @if($user->created_at && $user->created_at->diffInDays(now()) < 30)
                        <div class="absolute -bottom-2 -right-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full font-medium">
                            New
                        </div>
                    @endif
                </div>
                
                {{-- Name and Username with Better Typography --}}
                <h1 class="text-2xl font-bold text-white mb-1">{{ $user->name }}</h1>
                
                {{-- Profile Stats (if available) --}}
                @if($user->links && count($user->links) > 0)
                    <div class="flex justify-center space-x-6 mt-4">
                        <div class="text-center">
                            <div class="text-white font-bold">{{ count($user->links) }}</div>
                            <div class="text-blue-100 text-sm">Links</div>
                        </div>
                        <div class="text-center">
                            <div class="text-white font-bold">{{ $user->created_at ? $user->created_at->diffInDays(now()) : 0 }}</div>
                            <div class="text-blue-100 text-sm">Days</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- Profile Content --}}
        <div class="p-8">
            {{-- Bio with Better Styling --}}
            @if($user->bio)
                <div class="mb-6">
                    <p class="text-gray-600 leading-relaxed text-center italic">"{{ $user->bio }}"</p>
                </div>
            @endif

            {{-- Action Buttons for Owner --}}
            @if($isOwner)
                <div class="flex space-x-3 mb-6">
                    <a href="{{ url('/admin/profile-builder') }}" 
                       class="flex-1 bg-primary-600 hover:bg-primary-700 text-white py-3 px-4 rounded-lg transition-colors font-medium text-sm flex items-center justify-center">
                        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
                        </svg>
                        Edit Profile
                    </a>
                    <button onclick="shareProfile()" 
                            class="px-4 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
                        </svg>
                    </button>
                </div>
            @endif

            {{-- Enhanced Links with Categories --}}
            @if($user->links && count($user->links) > 0)
                <div class="space-y-3">
                    @foreach ($user->links ?? [] as $link)
                        @php
                            $linkType = 'default';
                            $icon = 'link';
                            
                            if (str_contains(strtolower($link['url']), 'youtube.com') || str_contains(strtolower($link['url']), 'youtu.be')) {
                                $linkType = 'youtube';
                                $icon = 'youtube';
                            } elseif (str_contains(strtolower($link['url']), 'instagram.com')) {
                                $linkType = 'instagram';
                                $icon = 'instagram';
                            } elseif (str_contains(strtolower($link['url']), 'tiktok.com')) {
                                $linkType = 'tiktok';
                                $icon = 'tiktok';
                            } elseif (str_contains(strtolower($link['url']), 'facebook.com')) {
                                $linkType = 'facebook';
                                $icon = 'facebook';
                            } elseif (str_contains(strtolower($link['url']), 'twitter.com') || str_contains(strtolower($link['url']), 'x.com')) {
                                $linkType = 'twitter';
                                $icon = 'twitter';
                            } elseif (str_contains(strtolower($link['url']), 't.me') || str_contains(strtolower($link['url']), 'telegram.me')) {
                                $linkType = 'telegram';
                                $icon = 'telegram';
                            } elseif (str_contains(strtolower($link['url']), 'whatsapp.com')) {
                                $linkType = 'whatsapp';
                                $icon = 'whatsapp';
                            }
                        @endphp
                        
                        <a href="{{ $link['url'] }}"
                           class="block w-full bg-gradient-to-r from-gray-50 to-gray-100 hover:from-gray-100 hover:to-gray-200 text-gray-800 py-4 px-6 rounded-xl transition-all duration-200 font-medium border border-gray-200 hover:border-gray-300 hover:shadow-md transform hover:-translate-y-1"
                           target="_blank" rel="noopener">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <div class="w-10 h-10 rounded-lg bg-white shadow-sm flex items-center justify-center mr-4">
                                        @if($icon === 'youtube')
                                            <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                            </svg>
                                        @elseif($icon === 'instagram')
                                            <svg class="w-5 h-5 text-pink-600" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987 6.62 0 11.987-5.367 11.987-11.987C24.014 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.297-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.807.875 1.297 2.026 1.297 3.323s-.49 2.448-1.297 3.323c-.875.807-2.026 1.297-3.323 1.297zm7.718-1.297c-.875.807-2.026 1.297-3.323 1.297s-2.448-.49-3.323-1.297c-.807-.875-1.297-2.026-1.297-3.323s.49-2.448 1.297-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.807.875 1.297 2.026 1.297 3.323s-.49 2.448-1.297 3.323z"/>
                                            </svg>
                                        @elseif($icon === 'tiktok')
                                            <svg class="w-5 h-5 text-black" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                                            </svg>
                                        @elseif($icon === 'facebook')
                                            <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                            </svg>
                                        @elseif($icon === 'twitter')
                                            <svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                                            </svg>
                                        @elseif($icon === 'telegram')
                                            <svg class="w-5 h-5 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                                            </svg>
                                        @elseif($icon === 'whatsapp')
                                            <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
                                            </svg>
                                        @else
                                            <svg class="w-5 h-5 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5a2 2 0 112.828 2.828l-1.5 1.5a1 1 0 11-1.414 1.414l-1.5-1.5a4 4 0 00-5.656 0A4 4 0 004.929 7.757l1.5 1.5a1 1 0 101.414-1.414l-1.5-1.5a2 2 0 112.828-2.828l1.5 1.5z" clip-rule="evenodd"></path>
                                            </svg>
                                        @endif
                                    </div>
                                    <span class="font-medium">{{ $link['title'] }}</span>
                                </div>
                                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                        </a>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8">
                    <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
                    </svg>
                    <p class="text-gray-500">Belum ada link yang ditambahkan</p>
                </div>
            @endif
        </div>
    </div>

    {{-- Action Buttons for Visitors --}}
    @if(!$isOwner)
        <div class="flex space-x-3 mt-6">
            <button onclick="shareProfile()" 
                    class="flex-1 bg-primary-600 hover:bg-primary-700 text-white py-3 px-4 rounded-lg transition-colors font-medium flex items-center justify-center">
                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
                </svg>
                Share Profile
            </button>
            <button onclick="openReportModal()" 
                    class="px-4 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8 1.6L14.25 8l2.55 3.4A1 1 0 0116 13H6a1 1 0 00-1 1v3a1 1 0 11-2 0V6z" clip-rule="evenodd"></path>
                </svg>
            </button>
        </div>
    @endif

    {{-- Footer with Enhanced Design --}}
    <div class="text-center mt-8">
        <div class="bg-white rounded-lg shadow-sm border p-4">
            <p class="text-sm text-gray-500">
                Made with ❤️ by 
                <a href="https://kuncilink.id" class="text-primary-600 hover:underline font-medium" target="_blank" rel="noopener">
                    KunciLink
                </a>
            </p>
            <p class="text-xs text-gray-400 mt-1">Social Unlock & Link in Bio Indonesia</p>
        </div>
    </div>
</div>

{{-- Report Modal --}}
@if(!$isOwner)
<div id="reportModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <form method="POST" action="{{ route('profile.report', $user->username) }}" class="p-6">
                @csrf
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-900">Laporkan Profil Ini</h3>
                    <button type="button" onclick="closeReportModal()" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </button>
                </div>

                @if($errors->any())
                    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
                        <div class="text-sm text-red-600">
                            <ul class="list-disc pl-5">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <div class="text-center mb-6">
                    <img src="{{ $user->profile_picture_url ?? asset('img/user-a-solid.svg') }}" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                    <div class="font-semibold text-lg text-gray-900">{{ '@' . $user->username }}</div>
                </div>

                <div class="space-y-4">
                    <div>
                        <label for="reason" class="block text-sm font-medium text-gray-700 mb-2">
                            Alasan Pelaporan <span class="text-red-500">*</span>
                        </label>
                        <select id="reason" name="reason" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent">
                            <option value="">-- Pilih Alasan --</option>
                            <option value="spam">Spam / Penipuan</option>
                            <option value="porn">Konten Pornografi</option>
                            <option value="hate">Ujaran Kebencian / SARA</option>
                            <option value="impersonation">Penyamaran / Peniruan Identitas</option>
                            <option value="malware">Link Berbahaya / Malware</option>
                            <option value="other">Lainnya</option>
                        </select>
                    </div>

                    @guest
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            Email (opsional, untuk dihubungi admin)
                        </label>
                        <input type="email" id="email" name="email" maxlength="100" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent"
                               placeholder="Email Anda (opsional)">
                    </div>
                    @endguest

                    <div>
                        <label for="details" class="block text-sm font-medium text-gray-700 mb-2">
                            Detail Laporan
                        </label>
                        <textarea id="details" name="details" rows="3" maxlength="500"
                                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-600 focus:border-transparent"
                                  placeholder="Jelaskan detail masalah..."></textarea>
                    </div>

                    <div>
                        {!! NoCaptcha::display() !!}
                        @if ($errors->has('g-recaptcha-response'))
                            <p class="text-sm text-red-600 mt-2">{{ $errors->first('g-recaptcha-response') }}</p>
                        @endif
                    </div>
                </div>

                <div class="flex items-center justify-end space-x-3 mt-6">
                    <button type="button" onclick="closeReportModal()" 
                            class="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg font-medium transition-colors">
                        Batal
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-medium transition-colors">
                        Kirim Laporan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function openReportModal() {
    document.getElementById('reportModal').classList.remove('hidden');
}

function closeReportModal() {
    document.getElementById('reportModal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('reportModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeReportModal();
    }
});
</script>
@endif

<script>
function shareProfile() {
    if (navigator.share) {
        navigator.share({
            title: '{{ $user->name }} - KunciLink Profile',
            text: 'Check out {{ $user->name }}\'s profile on KunciLink!',
            url: window.location.href
        });
    } else {
        // Fallback: copy to clipboard
        navigator.clipboard.writeText(window.location.href).then(function() {
            alert('Profile URL copied to clipboard!');
        });
    }
}
</script>
@endsection

@section('scripts')
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{!! NoCaptcha::renderJs() !!}
@endsection