File: /home/u756937133/domains/swingersnest.com/public_html/resources/views/layouts/feeds.blade.php
@extends('layouts.app')
@section('full-width')
@php
$visitsCount = $visitsCount ?? 0;
$pendingTasksCount = $pendingTasksCount ?? 0;
// Category options for display - Limited to 4 main categories
$categoryOptions = [
'single_male' => 'Single Male',
'single_female' => 'Single Female',
'couple' => 'Couple',
'transsexual' => 'Transgender'
];
// Preference options - what users are looking for (same 4 options)
$preferenceOptions = [
'single_male' => 'Single Male',
'single_female' => 'Single Female',
'couple' => 'Couple',
'transsexual' => 'Transgender'
];
// Do you prefer options based on category (from settings page)
$preferencesByCategory = [
'couple' => [
'full_swap_completely_open' => 'Full swap, completely open',
'full_swap_same_room_only' => 'Full swap, same room only',
'soft_swap_same_room_only' => 'Soft swap, same room only',
'soft_swap_touching_or_oral' => 'Soft swap, touching or oral',
'soft_swap_girl_on_girl_only' => 'Soft swap, girl on girl only',
'cuckold' => 'Cuckold',
'exhibitionist' => 'Exhibitionist',
'voyeur' => 'Voyeur',
'still_exploring' => 'Still Exploring',
'hotwife' => 'Hot Wife',
'soft_swap_man_on_man' => 'Soft Swap, man on man'
],
'single_male' => [
'straight' => 'Straight',
'bisexual' => 'Bi-sexual',
'bi-curious' => 'Bi-curious',
'gay' => 'Gay'
],
'single_female' => [
'straight' => 'Straight',
'bisexual' => 'Bi-sexual',
'bi-curious' => 'Bi-curious',
'lesbian' => 'Lesbian'
],
'transsexual' => []
];
// Language options with flags
$languageOptions = [
'english' => ['name' => 'English', 'flag' => '🇬🇧'],
'french' => ['name' => 'French', 'flag' => '🇫🇷'],
'spanish' => ['name' => 'Spanish', 'flag' => '🇪🇸'],
'german' => ['name' => 'German', 'flag' => '🇩🇪'],
'italian' => ['name' => 'Italian', 'flag' => '🇮🇹'],
'portuguese' => ['name' => 'Portuguese', 'flag' => '🇵🇹'],
'dutch' => ['name' => 'Dutch', 'flag' => '🇳🇱'],
'russian' => ['name' => 'Russian', 'flag' => '🇷🇺'],
'chinese' => ['name' => 'Chinese', 'flag' => '🇨🇳'],
'japanese' => ['name' => 'Japanese', 'flag' => '🇯🇵'],
'korean' => ['name' => 'Korean', 'flag' => '🇰🇷'],
'arabic' => ['name' => 'Arabic', 'flag' => '🇸🇦'],
'hindi' => ['name' => 'Hindi', 'flag' => '🇮🇳'],
'turkish' => ['name' => 'Turkish', 'flag' => '🇹🇷'],
'greek' => ['name' => 'Greek', 'flag' => '🇬🇷'],
];
// Get current user's location and languages
$currentProfile = auth()->user()->profile;
$currentLanguages = $currentProfile && !empty($currentProfile->languages) ? json_decode($currentProfile->languages, true) : [];
$isCouple = $currentProfile && ($currentProfile->category === 'couple');
$coupleData = [];
if ($currentProfile && !empty($currentProfile->couple_data)) {
$coupleData = is_array($currentProfile->couple_data) ? $currentProfile->couple_data : json_decode($currentProfile->couple_data, true);
}
@endphp
<div class="feeds-page bg-sn-soft w-full {{ request()->routeIs('messages.*') ? 'feeds-messages-active' : '' }}">
{{-- Full-width (no right sidebar, main spans 10 cols): only members, visits, online-users. Friends, news feed,
speed dates, etc. use narrow centered layout. --}}
<div id="feeds-grid"
class="w-full {{ request()->routeIs('dashboard.members') ? 'feeds-members-active' : '' }} {{ request()->routeIs('dashboard.friends') ? 'feeds-friends-active' : '' }} {{ request()->routeIs('dashboard.visits') ? 'feeds-visits-active' : '' }} {{ request()->routeIs('dashboard.online-users') ? 'feeds-online-users-active' : '' }} {{ request()->routeIs('messages.*') ? 'feeds-messages-active' : '' }} {{ request()->routeIs('user.profile') ? 'feeds-profile-active' : '' }}">
<!-- Left Sidebar: Navigation (links to separate routes) -->
<div class="feeds-sidebar bg-white border-r border-sn-divider">
<div class="p-4 feeds-sidebar-inner">
@auth
{{-- Profile image + SNC coins in sidebar --}}
@php
$sidebarUser = Auth::user();
$sidebarProfileImg = $sidebarUser->profile_image
?? ($sidebarUser->profile?->profile_photo ?? null);
$sidebarSnc = $sidebarUser->snc_coins ?? 0;
@endphp
<a href="{{ route('account.profile.settings') }}#summary"
class="feeds-sidebar-profile block mb-4 no-underline">
<div class="flex flex-col items-center text-center">
<div class="w-14 h-14 rounded-full overflow-hidden border-2 flex-shrink-0 mb-1.5"
style="border-color: rgba(107, 63, 160, 0.25);">
@if($sidebarProfileImg)
<img src="{{ asset('storage/' . $sidebarProfileImg) }}" alt="Profile"
class="w-full h-full object-cover" />
@else
<div class="w-full h-full flex items-center justify-center text-2xl"
style="background: var(--sn-bg-soft, #FAF7F2); color: var(--sn-text-muted, #7A6F80);">
<i class="ri-user-line"></i>
</div>
@endif
</div>
<span class="flex items-center justify-center gap-1 text-xs font-semibold"
style="color: var(--sn-text-heading);">
<i class="ri-coin-line" style="color: var(--sn-gold, #F5B642);"></i>
{{ number_format($sidebarSnc) }} SNC
</span>
</div>
</a>
@endauth
<nav class="space-y-0.5">
<a href="{{ route('dashboard.feeds') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.feeds') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-home-4-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.6667 7.66675L10.0692 1.26842C9.86333 1.09507 9.60286 1 9.33375 1C9.06464 1 8.80417 1.09507 8.59833 1.26842L1 7.66675" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.4167 6.8335V12.2502C16.4167 14.2052 16.4167 15.1818 15.9 15.8552C15.767 16.0286 15.6117 16.1838 15.4383 16.3168C14.765 16.8335 13.7883 16.8335 11.8333 16.8335V13.0835C11.8333 11.9052 11.8333 11.316 11.4667 10.9502C11.1017 10.5835 10.5125 10.5835 9.33333 10.5835C8.15417 10.5835 7.56583 10.5835 7.2 10.9502C6.83333 11.3152 6.83333 11.9043 6.83333 13.0835V16.8335C4.87833 16.8335 3.90167 16.8335 3.22833 16.3168C3.05492 16.1838 2.89971 16.0286 2.76667 15.8552C2.25 15.1818 2.25 14.2052 2.25 12.2502V6.8335" stroke="currentcolor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xs">News Feed</span>
</a>
<a href="{{ route('dashboard.members') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.members') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-user-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.8498 5.5C4.43328 5.5 4.99286 5.26821 5.40544 4.85563C5.81802 4.44305 6.0498 3.88348 6.0498 3.3C6.0498 2.71652 5.81802 2.15694 5.40544 1.74436C4.99286 1.33178 4.43328 1.1 3.8498 1.1C3.26633 1.1 2.70675 1.33178 2.29417 1.74436C1.88159 2.15694 1.6498 2.71652 1.6498 3.3C1.6498 3.88348 1.88159 4.44305 2.29417 4.85563C2.70675 5.26821 3.26633 5.5 3.8498 5.5ZM3.8498 6.6C4.28317 6.6 4.71229 6.51464 5.11266 6.3488C5.51303 6.18296 5.87682 5.93989 6.18326 5.63345C6.48969 5.32702 6.73277 4.96323 6.89861 4.56286C7.06445 4.16248 7.14981 3.73336 7.14981 3.3C7.14981 2.86664 7.06445 2.43752 6.89861 2.03714C6.73277 1.63677 6.48969 1.27298 6.18326 0.966548C5.87682 0.660114 5.51303 0.417038 5.11266 0.251198C4.71229 0.0853572 4.28317 -6.4576e-09 3.8498 0C2.97459 1.30417e-08 2.13522 0.347678 1.51635 0.966548C0.897482 1.58542 0.549805 2.42479 0.549805 3.3C0.549805 4.17521 0.897482 5.01458 1.51635 5.63345C2.13522 6.25232 2.97459 6.6 3.8498 6.6Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5894 5.38563C2.64062 5.43672 2.68126 5.49741 2.70898 5.56423C2.73671 5.63105 2.75098 5.70268 2.75098 5.77503C2.75098 5.84737 2.73671 5.919 2.70898 5.98582C2.68126 6.05264 2.64062 6.11334 2.5894 6.16443L2.2176 6.53513C1.50209 7.25084 1.10009 8.2214 1.1 9.23343V11.275C1.1 11.4209 1.04205 11.5608 0.938909 11.6639C0.835764 11.7671 0.695869 11.825 0.55 11.825C0.404131 11.825 0.264236 11.7671 0.161091 11.6639C0.0579462 11.5608 0 11.4209 0 11.275V9.23343C0.000155935 7.92969 0.518084 6.67938 1.4399 5.75743L1.8106 5.38563C1.86169 5.33441 1.92238 5.29377 1.9892 5.26604C2.05602 5.23832 2.12766 5.22404 2.2 5.22404C2.27234 5.22404 2.34398 5.23832 2.4108 5.26604C2.47762 5.29377 2.53831 5.33441 2.5894 5.38563ZM15.5606 5.05563C15.5094 5.10672 15.4687 5.16741 15.441 5.23423C15.4133 5.30105 15.399 5.37268 15.399 5.44503C15.399 5.51737 15.4133 5.589 15.441 5.65582C15.4687 5.72264 15.5094 5.78334 15.5606 5.83443L15.9324 6.20513C16.6479 6.92084 17.0499 7.8914 17.05 8.90343V11.275C17.05 11.4209 17.1079 11.5608 17.2111 11.6639C17.3142 11.7671 17.4541 11.825 17.6 11.825C17.7459 11.825 17.8858 11.7671 17.9889 11.6639C18.0921 11.5608 18.15 11.4209 18.15 11.275V8.90343C18.1498 7.59969 17.6319 6.34938 16.7101 5.42743L16.3394 5.05563C16.2883 5.00441 16.2276 4.96377 16.1608 4.93604C16.094 4.90832 16.0223 4.89404 15.95 4.89404C15.8777 4.89404 15.806 4.90832 15.7392 4.93604C15.6724 4.96377 15.6117 5.00441 15.5606 5.05563Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7502 5.5C13.1667 5.5 12.6071 5.26821 12.1946 4.85563C11.782 4.44305 11.5502 3.88348 11.5502 3.3C11.5502 2.71652 11.782 2.15694 12.1946 1.74436C12.6071 1.33178 13.1667 1.1 13.7502 1.1C14.3337 1.1 14.8933 1.33178 15.3058 1.74436C15.7184 2.15694 15.9502 2.71652 15.9502 3.3C15.9502 3.88348 15.7184 4.44305 15.3058 4.85563C14.8933 5.26821 14.3337 5.5 13.7502 5.5ZM13.7502 6.6C13.3168 6.6 12.8877 6.51464 12.4873 6.3488C12.087 6.18296 11.7232 5.93989 11.4167 5.63345C11.1103 5.32702 10.8672 4.96323 10.7014 4.56286C10.5356 4.16248 10.4502 3.73336 10.4502 3.3C10.4502 2.86664 10.5356 2.43752 10.7014 2.03714C10.8672 1.63677 11.1103 1.27298 11.4167 0.966548C11.7232 0.660114 12.087 0.417038 12.4873 0.251198C12.8877 0.0853572 13.3168 -6.4576e-09 13.7502 0C14.6254 1.30417e-08 15.4648 0.347678 16.0836 0.966548C16.7025 1.58542 17.0502 2.42479 17.0502 3.3C17.0502 4.17521 16.7025 5.01458 16.0836 5.63345C15.4648 6.25232 14.6254 6.6 13.7502 6.6ZM8.8002 10.175C8.07085 10.175 7.37138 10.4647 6.85565 10.9805C6.33993 11.4962 6.0502 12.1957 6.0502 12.925V14.355C6.0502 14.5009 5.99225 14.6408 5.8891 14.7439C5.78596 14.8471 5.64606 14.905 5.5002 14.905C5.35433 14.905 5.21443 14.8471 5.11129 14.7439C5.00814 14.6408 4.9502 14.5009 4.9502 14.355V12.925C4.9502 11.9039 5.35582 10.9247 6.07783 10.2026C6.79985 9.48062 7.77911 9.075 8.8002 9.075C9.82128 9.075 10.8005 9.48062 11.5226 10.2026C12.2446 10.9247 12.6502 11.9039 12.6502 12.925V14.355C12.6502 14.5009 12.5922 14.6408 12.4891 14.7439C12.386 14.8471 12.2461 14.905 12.1002 14.905C11.9543 14.905 11.8144 14.8471 11.7113 14.7439C11.6081 14.6408 11.5502 14.5009 11.5502 14.355V12.925C11.5502 12.5639 11.4791 12.2063 11.3409 11.8726C11.2027 11.539 11.0001 11.2358 10.7447 10.9805C10.4894 10.7251 10.1862 10.5225 9.85258 10.3843C9.51893 10.2461 9.16133 10.175 8.8002 10.175Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.8 8.5249C9.38348 8.5249 9.94305 8.29312 10.3556 7.88054C10.7682 7.46796 11 6.90838 11 6.3249C11 5.74143 10.7682 5.18185 10.3556 4.76927C9.94305 4.35669 9.38348 4.1249 8.8 4.1249C8.21652 4.1249 7.65695 4.35669 7.24437 4.76927C6.83179 5.18185 6.6 5.74143 6.6 6.3249C6.6 6.90838 6.83179 7.46796 7.24437 7.88054C7.65695 8.29312 8.21652 8.5249 8.8 8.5249ZM8.8 9.6249C9.67521 9.6249 10.5146 9.27723 11.1335 8.65836C11.7523 8.03948 12.1 7.20012 12.1 6.3249C12.1 5.44969 11.7523 4.61032 11.1335 3.99145C10.5146 3.37258 9.67521 3.0249 8.8 3.0249C7.92479 3.0249 7.08542 3.37258 6.46655 3.99145C5.84768 4.61032 5.5 5.44969 5.5 6.3249C5.5 7.20012 5.84768 8.03948 6.46655 8.65836C7.08542 9.27723 7.92479 9.6249 8.8 9.6249Z" fill="currentColor"/>
</svg>
<span class="text-xs">Members</span>
</a>
<a href="{{ route('dashboard.friends') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.friends') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-group-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.75 8.125C9.41304 8.125 10.0489 8.38839 10.5178 8.85723C10.9866 9.32607 11.25 9.96196 11.25 10.625C11.25 11.8313 10.51 12.7875 9.48625 13.4125C8.4625 14.035 7.09375 14.375 5.625 14.375C4.15625 14.375 2.7875 14.035 1.76375 13.4125C0.73875 12.7875 0 11.8313 0 10.625C0 9.96196 0.263392 9.32607 0.732233 8.85723C1.20107 8.38839 1.83696 8.125 2.5 8.125H8.75ZM2.5 9.375C2.16848 9.375 1.85054 9.5067 1.61612 9.74112C1.3817 9.97554 1.25 10.2935 1.25 10.625C1.25 11.26 1.63 11.865 2.415 12.3438C3.2 12.8225 4.3325 13.125 5.625 13.125C6.9175 13.125 8.05 12.8225 8.835 12.3438C9.62 11.865 10 11.26 10 10.625C10 10.2935 9.8683 9.97554 9.63388 9.74112C9.39946 9.5067 9.08152 9.375 8.75 9.375H2.5ZM17.065 8.135C17.5269 8.18205 17.955 8.39883 18.2663 8.74336C18.5775 9.0879 18.7499 9.53567 18.75 10C18.75 10.9637 18.1625 11.7612 17.3738 12.2875C16.5788 12.8175 15.5162 13.125 14.375 13.125C13.5013 13.125 12.675 12.9425 11.9788 12.6213C12.1788 12.2625 12.3287 11.87 12.4162 11.4425C12.945 11.705 13.6213 11.875 14.375 11.875C15.3038 11.875 16.1175 11.6225 16.68 11.2475C17.2463 10.87 17.5 10.4163 17.5 10C17.5 9.85592 17.4503 9.71625 17.3592 9.60464C17.268 9.49302 17.1412 9.41632 17 9.3875L16.875 9.375H12.2825C12.123 8.92505 11.879 8.5097 11.5638 8.15125C11.6662 8.13393 11.7699 8.12515 11.8737 8.125H16.8737L17.065 8.135ZM14.665 1.26C15.3582 1.33145 16.0003 1.6574 16.4672 2.17481C16.934 2.69222 17.1925 3.36435 17.1925 4.06125L17.1775 4.34875C17.1058 5.04153 16.7799 5.68317 16.2628 6.14973C15.7456 6.61629 15.074 6.87468 14.3775 6.875L14.09 6.86C13.446 6.7943 12.8445 6.50848 12.3867 6.05076C11.929 5.59305 11.6432 4.99146 11.5775 4.3475L11.5625 4.06C11.5622 3.69024 11.6348 3.32404 11.7761 2.98236C11.9175 2.64068 12.1248 2.33022 12.3863 2.06876C12.6477 1.8073 12.9582 1.59996 13.2999 1.45861C13.6415 1.31726 14.0077 1.24467 14.3775 1.245L14.665 1.26ZM5.625 0C6.53668 0 7.41102 0.362164 8.05568 1.00682C8.70034 1.65148 9.0625 2.52582 9.0625 3.4375C9.0625 4.34918 8.70034 5.22352 8.05568 5.86818C7.41102 6.51284 6.53668 6.875 5.625 6.875C4.71332 6.875 3.83898 6.51284 3.19432 5.86818C2.54966 5.22352 2.1875 4.34918 2.1875 3.4375C2.1875 2.52582 2.54966 1.65148 3.19432 1.00682C3.83898 0.362164 4.71332 0 5.625 0ZM14.3775 2.49625C13.9624 2.49625 13.5644 2.66113 13.2709 2.95463C12.9774 3.24812 12.8125 3.64619 12.8125 4.06125C12.8125 4.47631 12.9774 4.87438 13.2709 5.16787C13.5644 5.46137 13.9624 5.62625 14.3775 5.62625C14.7926 5.62625 15.1906 5.46137 15.4841 5.16787C15.7776 4.87438 15.9425 4.47631 15.9425 4.06125C15.9425 3.64619 15.7776 3.24812 15.4841 2.95463C15.1906 2.66113 14.7926 2.49625 14.3775 2.49625ZM5.625 1.25C5.04484 1.25 4.48844 1.48047 4.0782 1.8907C3.66797 2.30094 3.4375 2.85734 3.4375 3.4375C3.4375 4.01766 3.66797 4.57406 4.0782 4.9843C4.48844 5.39453 5.04484 5.625 5.625 5.625C6.20516 5.625 6.76156 5.39453 7.1718 4.9843C7.58203 4.57406 7.8125 4.01766 7.8125 3.4375C7.8125 2.85734 7.58203 2.30094 7.1718 1.8907C6.76156 1.48047 6.20516 1.25 5.625 1.25Z" fill="currentColor"/>
</svg>
<span class="text-xs">Friends</span>
</a>
<a href="{{ route('dashboard.online-users') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.online-users') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-user-heart-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5108 1.44955C6.99497 1.03705 7.23747 0.830387 7.4908 0.709554C7.77995 0.571596 8.09627 0.5 8.41664 0.5C8.73701 0.5 9.05333 0.571596 9.34247 0.709554C9.5958 0.830387 9.8383 1.03705 10.3225 1.44955C10.8216 1.87455 11.3283 2.08955 11.995 2.14205C12.6291 2.19289 12.9466 2.21872 13.2116 2.31205C13.8233 2.52872 14.305 3.00955 14.5208 3.62205C14.6141 3.88622 14.64 4.20372 14.6908 4.83872C14.7433 5.50539 14.9575 6.01122 15.3825 6.51039C15.7958 6.99455 16.0025 7.23705 16.1233 7.49039C16.4033 8.07622 16.4033 8.75705 16.1233 9.34205C16.0025 9.59539 15.7958 9.83789 15.3833 10.3221C14.9703 10.7854 14.7263 11.3749 14.6908 11.9946C14.64 12.6287 14.6141 12.9462 14.5208 13.2112C14.4138 13.5133 14.2406 13.7876 14.014 14.0141C13.7873 14.2406 13.5129 14.4136 13.2108 14.5204C12.9466 14.6137 12.6291 14.6396 11.9941 14.6904C11.3275 14.7429 10.8216 14.9571 10.3225 15.3821C9.8383 15.7954 9.5958 16.0021 9.34247 16.1229C9.05333 16.2608 8.73701 16.3324 8.41664 16.3324C8.09627 16.3324 7.77995 16.2608 7.4908 16.1229C7.23747 16.0021 6.99497 15.7954 6.5108 15.3829C6.04743 14.9699 5.45798 14.7259 4.8383 14.6904C4.20414 14.6396 3.88664 14.6137 3.62164 14.5204C3.31959 14.4134 3.04528 14.2402 2.81877 14.0136C2.59226 13.7869 2.41927 13.5125 2.31247 13.2104C2.21914 12.9462 2.1933 12.6287 2.14247 11.9937C2.10705 11.3744 1.86329 10.7853 1.4508 10.3221C1.03747 9.83789 0.830804 9.59539 0.709137 9.34205C0.57131 9.05285 0.499856 8.7365 0.5 8.41613C0.500144 8.09576 0.571883 7.77947 0.70997 7.49039C0.830804 7.23705 1.03747 6.99455 1.44997 6.51039C1.8833 6.00122 2.0908 5.49122 2.14247 4.83789C2.1933 4.20372 2.21914 3.88622 2.31247 3.62122C2.41947 3.31917 2.59262 3.04486 2.81928 2.81835C3.04593 2.59184 3.32036 2.41886 3.62247 2.31205C3.88664 2.21872 4.20414 2.19289 4.83914 2.14205C5.45842 2.10663 6.04754 1.86204 6.5108 1.44955Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.5833 14.4163C12.3192 9.26043 4.51417 9.26043 4.25 14.4163M10.5 6.12459C10.5 6.67713 10.2805 7.20703 9.88981 7.59773C9.4991 7.98843 8.9692 8.20793 8.41667 8.20793C7.86413 8.20793 7.33423 7.98843 6.94353 7.59773C6.55283 7.20703 6.33333 6.67713 6.33333 6.12459C6.33333 5.57206 6.55283 5.04215 6.94353 4.65145C7.33423 4.26075 7.86413 4.04126 8.41667 4.04126C8.9692 4.04126 9.4991 4.26075 9.88981 4.65145C10.2805 5.04215 10.5 5.57206 10.5 6.12459Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xs">Online Users</span>
</a>
<a href="{{ route('dashboard.speed-dates') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.speed-dates') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-time-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3333 7.5001C12.575 7.5001 11.8583 7.6501 11.1917 7.91677L10.6083 5.3751L13.85 2.13344C14.3333 1.66677 14.3333 0.858435 13.85 0.366769C13.3667 -0.124898 12.5667 -0.121565 12.0833 0.366769L8.84167 3.60844L1.175 1.84177L0 3.01677L6.19167 6.2501L2.95 9.5001L0.883333 9.20844L0 10.0918L2.65 11.5584L4.125 14.2168L5 13.3334L4.71667 11.2501L7.95833 8.0251L8.80833 9.65844C8.11251 10.5135 7.67344 11.5484 7.54208 12.643C7.41072 13.7376 7.59245 14.847 8.0662 15.8425C8.53994 16.838 9.28626 17.6787 10.2186 18.2671C11.1508 18.8555 12.2309 19.1675 13.3333 19.1668C16.5583 19.1668 19.1667 16.5584 19.1667 13.3334C19.1667 10.1084 16.5583 7.5001 13.3333 7.5001ZM13.3333 17.5001C11.0333 17.5001 9.16667 15.6334 9.16667 13.3334C9.16667 11.0334 11.0333 9.16677 13.3333 9.16677C15.6333 9.16677 17.5 11.0334 17.5 13.3334C17.5 15.6334 15.6333 17.5001 13.3333 17.5001ZM13.75 13.5418V10.0001H12.5V14.1668L15.5083 15.9668L16.1333 14.9501L13.75 13.5418Z" fill="currentColor"/>
</svg>
<span class="text-xs">Speed Dates</span>
</a>
<a href="{{ route('dashboard.slow-dates') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.slow-dates') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-moon-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.8356 13.5846C17.9093 12.6593 18.6904 11.4412 19.0832 10.0793C16.8346 10.3534 14.5338 9.3157 13.3293 7.2697C12.7586 6.3013 12.4914 5.184 12.5624 4.06218C12.6333 2.94036 13.039 1.8656 13.7271 0.976782C11.8409 0.504475 9.84532 0.775918 8.1538 1.73487C5.61463 3.17403 4.26163 5.85345 4.43122 8.54295" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M0.75 11.1774C1.24538 11.5409 1.84378 11.7369 2.45821 11.7369C3.07263 11.7369 3.67104 11.5409 4.16642 11.1774C4.4679 10.9542 4.83309 10.8337 5.20821 10.8337C5.58332 10.8337 5.94852 10.9542 6.25 11.1774C7.29133 11.9218 8.63975 11.9383 9.66642 11.1939M14.5 15.0833C14.0046 14.7198 13.4062 14.5239 12.7918 14.5239C12.1774 14.5239 11.579 14.7198 11.0836 15.0833C10.7772 15.3037 10.4087 15.4208 10.0313 15.4179C9.65394 15.4149 9.28729 15.292 8.98442 15.0668C7.94308 14.3216 6.61025 14.3216 5.58358 15.0668C4.94008 15.5233 4.12792 15.5233 3.5 15.0668" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="text-xs">Slow Dates</span>
</a>
<a href="{{ route('dashboard.visits') }}"
class="feeds-nav-link w-full flex items-center justify-between px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.visits') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<div class="flex items-center gap-2">
<!-- <i class="ri-eye-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 8.125C17.2013 8.125 19.375 11 19.375 12.5C19.375 13.9775 17.2013 16.875 13.75 16.875C10.2987 16.875 8.125 14 8.125 12.5C8.125 11.0225 10.295 8.125 13.75 8.125ZM14.9462 9.6125C14.1801 9.29507 13.3192 9.29499 12.553 9.61228C11.7868 9.92956 11.1781 10.5382 10.8606 11.3044C10.5432 12.0705 10.5431 12.9314 10.8604 13.6976C11.1777 14.4638 11.7864 15.0726 12.5525 15.39C12.9319 15.5472 13.3385 15.6281 13.7491 15.6281C14.1597 15.6282 14.5663 15.5473 14.9457 15.3902C15.3251 15.2331 15.6698 15.0028 15.9602 14.7125C16.2506 14.4222 16.4809 14.0775 16.6381 13.6981C16.7953 13.3188 16.8762 12.9122 16.8763 12.5015C16.8763 12.0909 16.7955 11.6843 16.6383 11.3049C16.4812 10.9255 16.251 10.5808 15.9606 10.2904C15.6703 10 15.3256 9.76968 14.9462 9.6125ZM8.75 8.125C9.01833 8.12583 9.27375 8.16625 9.51625 8.24625C9.06202 8.57497 8.64609 8.95358 8.27625 9.375H2.5C2.16848 9.375 1.85054 9.5067 1.61612 9.74112C1.3817 9.97554 1.25 10.2935 1.25 10.625C1.25 11.26 1.63 11.865 2.415 12.3438C3.2 12.8225 4.3325 13.125 5.625 13.125C6.08 13.125 6.5125 13.0837 6.92 13.015C6.98625 13.4112 7.12375 13.815 7.3175 14.215C6.78 14.3187 6.21 14.375 5.625 14.375C4.15625 14.375 2.7875 14.035 1.76375 13.4125C0.73875 12.7875 0 11.8313 0 10.625C0 9.96196 0.263392 9.32607 0.732233 8.85723C1.20107 8.38839 1.83696 8.125 2.5 8.125H8.75ZM13.75 10.625C14.0002 10.6185 14.2492 10.6622 14.4823 10.7535C14.7153 10.8448 14.9277 10.9819 15.107 11.1565C15.2863 11.3312 15.4287 11.54 15.526 11.7707C15.6233 12.0013 15.6734 12.2491 15.6734 12.4994C15.6734 12.7497 15.6233 12.9974 15.526 13.2281C15.4287 13.4587 15.2863 13.6675 15.107 13.8422C14.9277 14.0169 14.7153 14.1539 14.4823 14.2452C14.2492 14.3365 14.0002 14.3802 13.75 14.3737C13.2613 14.3611 12.7968 14.1581 12.4556 13.808C12.1144 13.4578 11.9234 12.9883 11.9234 12.4994C11.9234 12.0105 12.1144 11.5409 12.4556 11.1908C12.7968 10.8406 13.2613 10.6376 13.75 10.625ZM5.625 0C6.53668 0 7.41102 0.362164 8.05568 1.00682C8.70034 1.65148 9.0625 2.52582 9.0625 3.4375C9.0625 4.34918 8.70034 5.22352 8.05568 5.86818C7.41102 6.51284 6.53668 6.875 5.625 6.875C4.71332 6.875 3.83898 6.51284 3.19432 5.86818C2.54966 5.22352 2.1875 4.34918 2.1875 3.4375C2.1875 2.52582 2.54966 1.65148 3.19432 1.00682C3.83898 0.362164 4.71332 0 5.625 0ZM14.0387 1.26125C14.732 1.33239 15.3742 1.65803 15.8413 2.17521C16.3084 2.69239 16.5671 3.36437 16.5675 4.06125L16.5525 4.34875C16.4819 5.03929 16.1583 5.67931 15.6442 6.14568C15.1301 6.61205 14.4616 6.87182 13.7675 6.875H13.735L13.465 6.8625C12.8208 6.79675 12.2191 6.51075 11.7614 6.05278C11.3036 5.59482 11.0179 4.99294 10.9525 4.34875L10.9375 4.06125C10.9372 3.69149 11.0098 3.32529 11.1511 2.98361C11.2925 2.64193 11.4998 2.33147 11.7613 2.07001C12.0227 1.80855 12.3332 1.60121 12.6749 1.45986C13.0165 1.31851 13.3827 1.24592 13.7525 1.24625L14.0387 1.26125ZM13.7525 2.49625C13.547 2.49625 13.3435 2.53673 13.1536 2.61538C12.9637 2.69403 12.7912 2.8093 12.6459 2.95463C12.5006 3.09995 12.3853 3.27248 12.3066 3.46235C12.228 3.65223 12.1875 3.85573 12.1875 4.06125C12.1875 4.26677 12.228 4.47028 12.3066 4.66015C12.3853 4.85002 12.5006 5.02255 12.6459 5.16787C12.7912 5.3132 12.9637 5.42847 13.1536 5.50712C13.3435 5.58577 13.547 5.62625 13.7525 5.62625C14.1676 5.62625 14.5656 5.46137 14.8591 5.16787C15.1526 4.87438 15.3175 4.47631 15.3175 4.06125C15.3175 3.64619 15.1526 3.24812 14.8591 2.95463C14.5656 2.66113 14.1676 2.49625 13.7525 2.49625ZM5.625 1.25C5.04484 1.25 4.48844 1.48047 4.0782 1.8907C3.66797 2.30094 3.4375 2.85734 3.4375 3.4375C3.4375 4.01766 3.66797 4.57406 4.0782 4.9843C4.48844 5.39453 5.04484 5.625 5.625 5.625C6.20516 5.625 6.76156 5.39453 7.1718 4.9843C7.58203 4.57406 7.8125 4.01766 7.8125 3.4375C7.8125 2.85734 7.58203 2.30094 7.1718 1.8907C6.76156 1.48047 6.20516 1.25 5.625 1.25Z" fill="currentColor"/>
</svg>
<span class="text-xs">Visits</span>
</div>
@if($visitsCount > 0)
<span
class="flex-shrink-0 min-w-[20px] h-5 px-1.5 rounded-full flex items-center justify-center text-xs font-bold text-white bg-red-500">{{ $visitsCount > 99 ? '99+' : $visitsCount }}</span>
@endif
</a>
<!-- <a href="{{ route('dashboard.pending-tasks') }}" class="feeds-nav-link w-full flex items-center justify-between px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.pending-tasks') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<div class="flex items-center gap-2">
<i class="ri-clipboard-line text-base"></i>
<span class="text-xs">Pending Tasks</span>
</div>
@if($pendingTasksCount > 0)
<span class="flex-shrink-0 min-w-[20px] h-5 px-1.5 rounded-full flex items-center justify-center text-xs font-bold text-white bg-red-500">{{ $pendingTasksCount > 99 ? '99+' : $pendingTasksCount }}</span>
@endif
</a> -->
<a href="{{ route('dashboard.search') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.search') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-search-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.25674 9.995L14.7926 9.99583C15.2899 9.99583 15.7668 10.1934 16.1184 10.545C16.47 10.8966 16.6676 11.3736 16.6676 11.8708V12.625C16.6676 13.0753 16.5702 13.5203 16.3823 13.9295C16.1943 14.3387 15.9201 14.7025 15.5784 14.9958C14.2734 16.1167 12.4067 16.6642 9.99841 16.6642H9.84924C9.94499 16.4701 9.99658 16.2572 10.0003 16.0408C10.0041 15.8244 9.95988 15.6098 9.87091 15.4125L9.99841 15.4142C12.1317 15.4142 13.7134 14.9508 14.7642 14.0483C14.9692 13.8723 15.1337 13.654 15.2465 13.4085C15.3592 13.163 15.4176 12.896 15.4176 12.6258V11.8717C15.4176 11.7059 15.3517 11.5469 15.2345 11.4297C15.1173 11.3125 14.9583 11.2467 14.7926 11.2467H8.31258C8.35024 10.8291 8.33146 10.4084 8.25674 9.99583M3.74841 7.07917C4.46079 7.0792 5.15843 7.28214 5.75967 7.66424C6.3609 8.04635 6.84086 8.59181 7.14337 9.23677C7.44587 9.88174 7.55841 10.5995 7.4678 11.3061C7.37719 12.0127 7.08719 12.6789 6.63174 13.2267L8.98424 15.5717C9.09532 15.6832 9.16022 15.8325 9.16597 15.9898C9.17173 16.1471 9.11793 16.3008 9.01531 16.4202C8.91269 16.5395 8.76881 16.6158 8.61243 16.6336C8.45604 16.6515 8.29867 16.6098 8.17174 16.5167L8.10091 16.4567L5.68174 14.0433C5.1864 14.341 4.62896 14.5202 4.05293 14.5669C3.4769 14.6136 2.89788 14.5265 2.36106 14.3125C1.82425 14.0984 1.34417 13.7632 0.958308 13.333C0.572446 12.9027 0.291243 12.3891 0.136653 11.8323C-0.0179369 11.2754 -0.0417306 10.6904 0.0671297 10.1228C0.17599 9.55522 0.414558 9.02049 0.764209 8.56034C1.11386 8.1002 1.56513 7.7271 2.08279 7.47016C2.60045 7.21323 3.17049 7.07941 3.74841 7.07917ZM3.74841 8.32917C3.08537 8.32917 2.44948 8.59256 1.98064 9.0614C1.5118 9.53024 1.24841 10.1661 1.24841 10.8292C1.24841 11.4922 1.5118 12.1281 1.98064 12.5969C2.44948 13.0658 3.08537 13.3292 3.74841 13.3292C4.41145 13.3292 5.04734 13.0658 5.51618 12.5969C5.98502 12.1281 6.24841 11.4922 6.24841 10.8292C6.24841 10.1661 5.98502 9.53024 5.51618 9.0614C5.04734 8.59256 4.41145 8.32917 3.74841 8.32917ZM9.99841 0C10.5456 -8.15353e-09 11.0874 0.107774 11.5929 0.317168C12.0984 0.526563 12.5578 0.833477 12.9447 1.22039C13.3316 1.6073 13.6385 2.06663 13.8479 2.57215C14.0573 3.07768 14.1651 3.61949 14.1651 4.16667C14.1651 4.71384 14.0573 5.25566 13.8479 5.76118C13.6385 6.2667 13.3316 6.72603 12.9447 7.11294C12.5578 7.49986 12.0984 7.80677 11.5929 8.01616C11.0874 8.22556 10.5456 8.33333 9.99841 8.33333C8.89334 8.33333 7.83353 7.89435 7.05213 7.11294C6.27073 6.33154 5.83174 5.27174 5.83174 4.16667C5.83174 3.0616 6.27073 2.00179 7.05213 1.22039C7.83353 0.438987 8.89334 0 9.99841 0ZM9.99841 1.25C9.61539 1.25 9.23612 1.32544 8.88225 1.47202C8.52838 1.61859 8.20685 1.83343 7.93602 2.10427C7.66518 2.37511 7.45034 2.69664 7.30376 3.05051C7.15718 3.40437 7.08174 3.78364 7.08174 4.16667C7.08174 4.54969 7.15718 4.92896 7.30376 5.28283C7.45034 5.63669 7.66518 5.95822 7.93602 6.22906C8.20685 6.4999 8.52838 6.71474 8.88225 6.86132C9.23612 7.00789 9.61539 7.08333 9.99841 7.08333C10.772 7.08333 11.5138 6.77604 12.0608 6.22906C12.6078 5.68208 12.9151 4.94021 12.9151 4.16667C12.9151 3.39312 12.6078 2.65125 12.0608 2.10427C11.5138 1.55729 10.772 1.25 9.99841 1.25Z" fill="currentColor"/>
</svg>
<span class="text-xs">Search</span>
</a>
<a href="{{ route('messages.index') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('messages.*') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-message-3-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.62503 0C4.79623 0 4.00137 0.32924 3.41532 0.915291C2.82927 1.50134 2.50003 2.2962 2.50003 3.125V3.25C2.90836 3.04083 3.33753 2.87375 3.78753 2.74875C3.87423 2.32547 4.10446 1.94512 4.43928 1.67203C4.7741 1.39893 5.19296 1.24985 5.62503 1.25H11.875C12.3723 1.25 12.8492 1.44754 13.2009 1.79917C13.5525 2.15081 13.75 2.62772 13.75 3.125V9.375C13.7502 9.80689 13.6013 10.2256 13.3285 10.5604C13.0556 10.8952 12.6756 11.1255 12.2525 11.2125C12.1275 11.6625 11.9609 12.0917 11.7525 12.5H11.875C12.2854 12.5 12.6918 12.4192 13.0709 12.2621C13.4501 12.1051 13.7946 11.8749 14.0847 11.5847C14.3749 11.2945 14.6051 10.95 14.7622 10.5709C14.9192 10.1917 15 9.78538 15 9.375V9.21625L17.5438 10.9725C17.7782 11.1343 18.0524 11.2289 18.3368 11.2462C18.6211 11.2634 18.9048 11.2026 19.157 11.0702C19.4093 10.9379 19.6206 10.7392 19.7681 10.4955C19.9156 10.2518 19.9936 9.97236 19.9938 9.6875V2.815C19.9936 2.53014 19.9156 2.25075 19.7681 2.00704C19.6206 1.76333 19.4093 1.56457 19.157 1.43226C18.9048 1.29995 18.6211 1.23911 18.3368 1.25634C18.0524 1.27357 17.7782 1.3682 17.5438 1.53L15 3.28625V3.125C15 2.71462 14.9192 2.30826 14.7622 1.92911C14.6051 1.54997 14.3749 1.20547 14.0847 0.915291C13.7946 0.625108 13.4501 0.394922 13.0709 0.237876C12.6918 0.0808305 12.2854 0 11.875 0H5.62503ZM15 4.805L18.255 2.5575C18.302 2.52512 18.3568 2.50619 18.4138 2.50276C18.4707 2.49934 18.5274 2.51155 18.5779 2.53807C18.6284 2.56459 18.6706 2.60441 18.7001 2.65323C18.7295 2.70204 18.7451 2.75799 18.745 2.815V9.6875C18.7449 9.74441 18.7291 9.80019 18.6996 9.84882C18.67 9.89746 18.6278 9.9371 18.5774 9.96347C18.5269 9.98985 18.4702 10.0019 18.4134 9.99847C18.3566 9.995 18.3019 9.97607 18.255 9.94375L15 7.6975V4.805ZM5.62503 15C6.85908 14.9999 8.05886 14.594 9.03946 13.8448C10.0201 13.0956 10.7271 12.0447 11.0516 10.8541C11.3761 9.66343 11.3 8.39913 10.8351 7.25599C10.3702 6.11285 9.54234 5.15431 8.47898 4.52808C7.41563 3.90184 6.17585 3.64267 4.95068 3.79051C3.72551 3.93834 2.58296 4.48497 1.69908 5.34616C0.815206 6.20735 0.239061 7.33531 0.0594304 8.55622C-0.1202 9.77713 0.106652 11.0232 0.705031 12.1025L0.0237808 14.3387C-0.00259572 14.4273 -0.00455364 14.5213 0.0181142 14.6108C0.040782 14.7004 0.0872326 14.7822 0.152553 14.8475C0.217872 14.9128 0.299633 14.9592 0.389185 14.9819C0.478737 15.0046 0.57275 15.0026 0.661281 14.9762L2.89878 14.2963C3.73318 14.7582 4.67132 15.0003 5.62503 15ZM2.50003 8.125C2.50003 7.95924 2.56588 7.80027 2.68309 7.68306C2.8003 7.56585 2.95927 7.5 3.12503 7.5H8.12503C8.29079 7.5 8.44976 7.56585 8.56697 7.68306C8.68418 7.80027 8.75003 7.95924 8.75003 8.125C8.75003 8.29076 8.68418 8.44973 8.56697 8.56694C8.44976 8.68415 8.29079 8.75 8.12503 8.75H3.12503C2.95927 8.75 2.8003 8.68415 2.68309 8.56694C2.56588 8.44973 2.50003 8.29076 2.50003 8.125ZM3.12503 11.25C2.95927 11.25 2.8003 11.1842 2.68309 11.0669C2.56588 10.9497 2.50003 10.7908 2.50003 10.625C2.50003 10.4592 2.56588 10.3003 2.68309 10.1831C2.8003 10.0658 2.95927 10 3.12503 10H5.62503C5.79079 10 5.94976 10.0658 6.06697 10.1831C6.18418 10.3003 6.25003 10.4592 6.25003 10.625C6.25003 10.7908 6.18418 10.9497 6.06697 11.0669C5.94976 11.1842 5.79079 11.25 5.62503 11.25H3.12503Z" fill="currentColor"/>
</svg>
<span class="text-xs">Messages</span>
</a>
<a href="{{ route('dashboard.upgrade') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.upgrade') ? 'active bg-sn-plum text-white' : 'text-sn-plum' }}">
<!-- <i class="ri-vip-crown-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.84998 1.2108e-08C3.75493 -1.99297e-05 3.6615 0.0245936 3.57879 0.07144C3.49609 0.118286 3.42694 0.185767 3.37808 0.2673L0.0780813 5.7673C0.0195013 5.86517 -0.00720306 5.97883 0.00166546 6.09254C0.010534 6.20625 0.0545365 6.3144 0.127581 6.402L8.37098 16.2943C8.43143 16.3696 8.51064 16.4277 8.60064 16.4626C8.69065 16.4976 8.78827 16.5083 8.88371 16.4936C8.97914 16.4789 9.06902 16.4393 9.1443 16.3788C9.21959 16.3183 9.27763 16.2391 9.31258 16.1491L13.0262 6.6H17.3074L17.4724 6.402C17.5454 6.3144 17.5894 6.20625 17.5983 6.09254C17.6072 5.97883 17.5805 5.86517 17.5219 5.7673L14.2219 0.2673C14.173 0.185767 14.1039 0.118286 14.0212 0.07144C13.9385 0.0245936 13.845 -1.99297e-05 13.75 1.2108e-08H3.84998ZM11.847 6.6L8.79998 14.432L5.75408 6.6H11.847ZM1.52018 5.5L4.16018 1.1H6.33708L4.57708 5.5H1.52018ZM4.57268 6.6L7.06638 13.0119L1.72478 6.6H4.57268ZM5.76068 5.5L7.52068 1.1H10.076L11.836 5.5H5.76068ZM13.0207 5.5L11.2607 1.1H13.4376L16.0776 5.5H13.0207ZM14.8489 12.1C15.4324 12.1 15.9919 11.8682 16.4045 11.4556C16.8171 11.0431 17.0489 10.4835 17.0489 9.9C17.0489 9.31652 16.8171 8.75694 16.4045 8.34437C15.9919 7.93178 15.4324 7.7 14.8489 7.7C14.2654 7.7 13.7058 7.93178 13.2932 8.34437C12.8807 8.75694 12.6489 9.31652 12.6489 9.9C12.6489 10.4835 12.8807 11.0431 13.2932 11.4556C13.7058 11.8682 14.2654 12.1 14.8489 12.1ZM14.8489 17.6C17.5989 17.6 18.6989 16.2195 18.6989 14.85C18.6989 14.4124 18.525 13.9927 18.2156 13.6833C17.9062 13.3738 17.4865 13.2 17.0489 13.2H12.6489C12.2113 13.2 11.7916 13.3738 11.4822 13.6833C11.1727 13.9927 10.9989 14.4124 10.9989 14.85C10.9989 16.225 12.0989 17.6 14.8489 17.6Z" fill="currentColor"/>
</svg>
<span class="text-xs font-medium">Upgrade your subscription</span>
</a>
<a href="{{ route('account.profile.settings') }}#summary"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('account.profile.settings') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-settings-3-line text-base"></i> -->
<svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.74951 11.875C10.1993 11.875 11.3745 10.6997 11.3745 9.25C11.3745 7.80025 10.1993 6.625 8.74951 6.625C7.29976 6.625 6.12451 7.80025 6.12451 9.25C6.12451 10.6997 7.29976 11.875 8.74951 11.875Z" stroke="currentcolor"/>
<path d="M10.294 0.633C9.97291 0.5 9.56516 0.5 8.74966 0.5C7.93416 0.5 7.52641 0.5 7.20529 0.633C6.99282 0.720949 6.79977 0.849909 6.63717 1.01251C6.47457 1.17511 6.34561 1.36816 6.25766 1.58062C6.17716 1.77575 6.14479 2.00413 6.13254 2.33575C6.12684 2.57544 6.06044 2.80976 5.93955 3.01681C5.81866 3.22386 5.64722 3.39686 5.44129 3.51963C5.23199 3.63667 4.99642 3.69871 4.75663 3.69994C4.51683 3.70116 4.28064 3.64153 4.07016 3.52663C3.77616 3.37088 3.56354 3.28513 3.35266 3.25713C2.89269 3.19664 2.42752 3.32127 2.05941 3.60362C1.78466 3.81625 1.57991 4.16888 1.17216 4.875C0.764412 5.58112 0.559662 5.93375 0.515037 6.27937C0.484968 6.50727 0.500092 6.73886 0.559545 6.96091C0.618999 7.18296 0.721616 7.39112 0.861537 7.5735C0.991037 7.7415 1.17216 7.88237 1.45304 8.05912C1.86691 8.319 2.13291 8.76175 2.13291 9.25C2.13291 9.73825 1.86691 10.181 1.45304 10.44C1.17216 10.6176 0.990162 10.7585 0.861537 10.9265C0.721616 11.1089 0.618999 11.317 0.559545 11.5391C0.500092 11.7611 0.484968 11.9927 0.515037 12.2206C0.560537 12.5654 0.764412 12.9189 1.17129 13.625C1.57991 14.3311 1.78379 14.6837 2.05941 14.8964C2.24179 15.0363 2.44995 15.1389 2.672 15.1984C2.89405 15.2578 3.12564 15.2729 3.35354 15.2429C3.56354 15.2149 3.77616 15.1291 4.07016 14.9734C4.28064 14.8585 4.51683 14.7988 4.75663 14.8001C4.99642 14.8013 5.23199 14.8633 5.44129 14.9804C5.86391 15.2254 6.11504 15.676 6.13254 16.1643C6.14479 16.4968 6.17629 16.7242 6.25766 16.9194C6.34561 17.1318 6.47457 17.3249 6.63717 17.4875C6.79977 17.6501 6.99282 17.7791 7.20529 17.867C7.52641 18 7.93416 18 8.74966 18C9.56516 18 9.97291 18 10.294 17.867C10.5065 17.7791 10.6996 17.6501 10.8622 17.4875C11.0248 17.3249 11.1537 17.1318 11.2417 16.9194C11.3222 16.7242 11.3545 16.4968 11.3668 16.1643C11.3843 15.676 11.6354 15.2245 12.058 14.9804C12.2673 14.8633 12.5029 14.8013 12.7427 14.8001C12.9825 14.7988 13.2187 14.8585 13.4292 14.9734C13.7232 15.1291 13.9358 15.2149 14.1458 15.2429C14.3737 15.2729 14.6053 15.2578 14.8273 15.1984C15.0494 15.1389 15.2575 15.0363 15.4399 14.8964C15.7155 14.6846 15.9194 14.3311 16.3272 13.625C16.7349 12.9189 16.9397 12.5663 16.9843 12.2206C17.0144 11.9927 16.9992 11.7611 16.9398 11.5391C16.8803 11.317 16.7777 11.1089 16.6378 10.9265C16.5083 10.7585 16.3272 10.6176 16.0463 10.4409C15.8415 10.3161 15.6717 10.1414 15.5528 9.93312C15.4339 9.72484 15.3697 9.4898 15.3664 9.25C15.3664 8.76175 15.6324 8.319 16.0463 8.06C16.3272 7.88238 16.5092 7.7415 16.6378 7.5735C16.7777 7.39112 16.8803 7.18296 16.9398 6.96091C16.9992 6.73886 17.0144 6.50727 16.9843 6.27937C16.9388 5.93462 16.7349 5.58112 16.328 4.875C15.9194 4.16888 15.7155 3.81625 15.4399 3.60362C15.2575 3.4637 15.0494 3.36109 14.8273 3.30163C14.6053 3.24218 14.3737 3.22706 14.1458 3.25713C13.9358 3.28513 13.7232 3.37088 13.4283 3.52663C13.2179 3.64138 12.9819 3.70092 12.7423 3.6997C12.5026 3.69847 12.2672 3.63652 12.058 3.51963C11.8521 3.39686 11.6807 3.22386 11.5598 3.01681C11.4389 2.80976 11.3725 2.57544 11.3668 2.33575C11.3545 2.00325 11.323 1.77575 11.2417 1.58062C11.1537 1.36816 11.0248 1.17511 10.8622 1.01251C10.6996 0.849909 10.5065 0.720949 10.294 0.633Z" stroke="currentcolor"/>
</svg>
<span class="text-xs">Settings</span>
</a>
</nav>
<div class="mt-6 pt-4 border-t border-sn-divider">
<h3 class="text-[10px] uppercase tracking-wider mb-2 text-sn-muted">Community</h3>
<nav class="space-y-0.5">
<a href="{{ route('dashboard.groups') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.groups') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-group-line text-sm"></i> -->
<svg width="16" height="16" viewBox="0 0 19 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.8498 5.5C4.43328 5.5 4.99286 5.26821 5.40544 4.85563C5.81802 4.44305 6.0498 3.88348 6.0498 3.3C6.0498 2.71652 5.81802 2.15694 5.40544 1.74436C4.99286 1.33178 4.43328 1.1 3.8498 1.1C3.26633 1.1 2.70675 1.33178 2.29417 1.74436C1.88159 2.15694 1.6498 2.71652 1.6498 3.3C1.6498 3.88348 1.88159 4.44305 2.29417 4.85563C2.70675 5.26821 3.26633 5.5 3.8498 5.5ZM3.8498 6.6C4.28317 6.6 4.71229 6.51464 5.11266 6.3488C5.51303 6.18296 5.87682 5.93989 6.18326 5.63345C6.48969 5.32702 6.73277 4.96323 6.89861 4.56286C7.06445 4.16248 7.14981 3.73336 7.14981 3.3C7.14981 2.86664 7.06445 2.43752 6.89861 2.03714C6.73277 1.63677 6.48969 1.27298 6.18326 0.966548C5.87682 0.660114 5.51303 0.417038 5.11266 0.251198C4.71229 0.0853572 4.28317 -6.4576e-09 3.8498 0C2.97459 1.30417e-08 2.13522 0.347678 1.51635 0.966548C0.897482 1.58542 0.549805 2.42479 0.549805 3.3C0.549805 4.17521 0.897482 5.01458 1.51635 5.63345C2.13522 6.25232 2.97459 6.6 3.8498 6.6Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5894 5.38563C2.64062 5.43672 2.68126 5.49741 2.70898 5.56423C2.73671 5.63105 2.75098 5.70268 2.75098 5.77503C2.75098 5.84737 2.73671 5.919 2.70898 5.98582C2.68126 6.05264 2.64062 6.11334 2.5894 6.16443L2.2176 6.53513C1.50209 7.25084 1.10009 8.2214 1.1 9.23343V11.275C1.1 11.4209 1.04205 11.5608 0.938909 11.6639C0.835764 11.7671 0.695869 11.825 0.55 11.825C0.404131 11.825 0.264236 11.7671 0.161091 11.6639C0.0579462 11.5608 0 11.4209 0 11.275V9.23343C0.000155935 7.92969 0.518084 6.67938 1.4399 5.75743L1.8106 5.38563C1.86169 5.33441 1.92238 5.29377 1.9892 5.26604C2.05602 5.23832 2.12766 5.22404 2.2 5.22404C2.27234 5.22404 2.34398 5.23832 2.4108 5.26604C2.47762 5.29377 2.53831 5.33441 2.5894 5.38563ZM15.5606 5.05563C15.5094 5.10672 15.4687 5.16741 15.441 5.23423C15.4133 5.30105 15.399 5.37268 15.399 5.44503C15.399 5.51737 15.4133 5.589 15.441 5.65582C15.4687 5.72264 15.5094 5.78334 15.5606 5.83443L15.9324 6.20513C16.6479 6.92084 17.0499 7.8914 17.05 8.90343V11.275C17.05 11.4209 17.1079 11.5608 17.2111 11.6639C17.3142 11.7671 17.4541 11.825 17.6 11.825C17.7459 11.825 17.8858 11.7671 17.9889 11.6639C18.0921 11.5608 18.15 11.4209 18.15 11.275V8.90343C18.1498 7.59969 17.6319 6.34938 16.7101 5.42743L16.3394 5.05563C16.2883 5.00441 16.2276 4.96377 16.1608 4.93604C16.094 4.90832 16.0223 4.89404 15.95 4.89404C15.8777 4.89404 15.806 4.90832 15.7392 4.93604C15.6724 4.96377 15.6117 5.00441 15.5606 5.05563Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7502 5.5C13.1667 5.5 12.6071 5.26821 12.1946 4.85563C11.782 4.44305 11.5502 3.88348 11.5502 3.3C11.5502 2.71652 11.782 2.15694 12.1946 1.74436C12.6071 1.33178 13.1667 1.1 13.7502 1.1C14.3337 1.1 14.8933 1.33178 15.3058 1.74436C15.7184 2.15694 15.9502 2.71652 15.9502 3.3C15.9502 3.88348 15.7184 4.44305 15.3058 4.85563C14.8933 5.26821 14.3337 5.5 13.7502 5.5ZM13.7502 6.6C13.3168 6.6 12.8877 6.51464 12.4873 6.3488C12.087 6.18296 11.7232 5.93989 11.4167 5.63345C11.1103 5.32702 10.8672 4.96323 10.7014 4.56286C10.5356 4.16248 10.4502 3.73336 10.4502 3.3C10.4502 2.86664 10.5356 2.43752 10.7014 2.03714C10.8672 1.63677 11.1103 1.27298 11.4167 0.966548C11.7232 0.660114 12.087 0.417038 12.4873 0.251198C12.8877 0.0853572 13.3168 -6.4576e-09 13.7502 0C14.6254 1.30417e-08 15.4648 0.347678 16.0836 0.966548C16.7025 1.58542 17.0502 2.42479 17.0502 3.3C17.0502 4.17521 16.7025 5.01458 16.0836 5.63345C15.4648 6.25232 14.6254 6.6 13.7502 6.6ZM8.8002 10.175C8.07085 10.175 7.37138 10.4647 6.85565 10.9805C6.33993 11.4962 6.0502 12.1957 6.0502 12.925V14.355C6.0502 14.5009 5.99225 14.6408 5.8891 14.7439C5.78596 14.8471 5.64606 14.905 5.5002 14.905C5.35433 14.905 5.21443 14.8471 5.11129 14.7439C5.00814 14.6408 4.9502 14.5009 4.9502 14.355V12.925C4.9502 11.9039 5.35582 10.9247 6.07783 10.2026C6.79985 9.48062 7.77911 9.075 8.8002 9.075C9.82128 9.075 10.8005 9.48062 11.5226 10.2026C12.2446 10.9247 12.6502 11.9039 12.6502 12.925V14.355C12.6502 14.5009 12.5922 14.6408 12.4891 14.7439C12.386 14.8471 12.2461 14.905 12.1002 14.905C11.9543 14.905 11.8144 14.8471 11.7113 14.7439C11.6081 14.6408 11.5502 14.5009 11.5502 14.355V12.925C11.5502 12.5639 11.4791 12.2063 11.3409 11.8726C11.2027 11.539 11.0001 11.2358 10.7447 10.9805C10.4894 10.7251 10.1862 10.5225 9.85258 10.3843C9.51893 10.2461 9.16133 10.175 8.8002 10.175Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.8 8.5249C9.38348 8.5249 9.94305 8.29312 10.3556 7.88054C10.7682 7.46796 11 6.90838 11 6.3249C11 5.74143 10.7682 5.18185 10.3556 4.76927C9.94305 4.35669 9.38348 4.1249 8.8 4.1249C8.21652 4.1249 7.65695 4.35669 7.24437 4.76927C6.83179 5.18185 6.6 5.74143 6.6 6.3249C6.6 6.90838 6.83179 7.46796 7.24437 7.88054C7.65695 8.29312 8.21652 8.5249 8.8 8.5249ZM8.8 9.6249C9.67521 9.6249 10.5146 9.27723 11.1335 8.65836C11.7523 8.03948 12.1 7.20012 12.1 6.3249C12.1 5.44969 11.7523 4.61032 11.1335 3.99145C10.5146 3.37258 9.67521 3.0249 8.8 3.0249C7.92479 3.0249 7.08542 3.37258 6.46655 3.99145C5.84768 4.61032 5.5 5.44969 5.5 6.3249C5.5 7.20012 5.84768 8.03948 6.46655 8.65836C7.08542 9.27723 7.92479 9.6249 8.8 9.6249Z" fill="currentColor"/>
</svg>
<span class="text-xs">Groups</span>
</a>
<a href="{{ route('dashboard.photos-videos') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.photos-videos') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-image-line text-sm"></i> -->
<svg width="16" height="16" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3333 3.66667V8.9925C17.7742 8.67167 17.16 8.45167 16.5 8.3325V3.66667H1.83333V12.8333H10.1658C10.12 13.1358 10.0833 13.4383 10.0833 13.75C10.0833 14.0617 10.12 14.3642 10.1658 14.6667H1.83333C1.3471 14.6667 0.880787 14.4735 0.536971 14.1297C0.193154 13.7859 0 13.3196 0 12.8333V1.83333C0 0.815833 0.815833 0 1.83333 0H7.33333L9.16667 1.83333H16.5C16.9862 1.83333 17.4525 2.02649 17.7964 2.3703C18.1402 2.71412 18.3333 3.18044 18.3333 3.66667ZM13.75 16.5L18.3333 13.75L13.75 11V16.5Z" fill="currentColor"/>
</svg>
<span class="text-xs">Photos & Videos</span>
</a>
<a href="{{ route('dashboard.events-travel') }}"
class="feeds-nav-link w-full flex items-center justify-between px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.events-travel') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<div class="flex items-center gap-2">
<!-- <i class="ri-map-pin-line text-sm"></i> -->
<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.63505 6.89792L0.905883 4.42292C0.539216 4.25486 0.314021 3.98353 0.230299 3.60892C0.146577 3.23431 0.249549 2.90217 0.539216 2.6125L0.905883 2.24583C1.0281 2.12361 1.17722 2.03194 1.35322 1.97083C1.52922 1.90972 1.70858 1.89444 1.8913 1.925L10.1413 3.39167L12.983 0.527083C13.3344 0.175694 13.7661 0 14.2782 0C14.7903 0 15.2218 0.175694 15.5726 0.527083C15.9233 0.878472 16.099 1.31022 16.0996 1.82233C16.1002 2.33444 15.9246 2.76589 15.5726 3.11667L12.7309 5.98125L14.1746 14.2083C14.2052 14.3917 14.1936 14.575 14.1398 14.7583C14.086 14.9417 13.9983 15.0944 13.8767 15.2167L13.51 15.5604C13.2198 15.8507 12.8837 15.9576 12.5017 15.8813C12.1198 15.8049 11.8448 15.5833 11.6767 15.2167L9.22463 9.4875L6.88713 11.8021L7.3913 14.6438C7.42185 14.7965 7.41422 14.9456 7.36838 15.0911C7.32255 15.2365 7.24616 15.3624 7.13922 15.4687L6.74963 15.8583C6.53574 16.0722 6.27236 16.1562 5.95947 16.1104C5.64658 16.0646 5.41344 15.9042 5.26005 15.6292L3.58713 12.5354L0.493382 10.8625C0.218382 10.7097 0.0579657 10.4769 0.0121323 10.164C-0.033701 9.85111 0.0503269 9.58742 0.264216 9.37292L0.653799 8.98333C0.760744 8.87639 0.886938 8.8 1.03238 8.75417C1.17783 8.70833 1.32663 8.70069 1.4788 8.73125L4.29755 9.2125L6.63505 6.89792Z" fill="currentColor"/>
</svg>
<span class="text-xs">Events and Travel</span>
</div>
<span
class="px-1.5 py-0.5 rounded text-[10px] font-bold uppercase text-white bg-red-500">HOT</span>
</a>
<a href="{{ route('listings.index') }}"
class="feeds-nav-link w-full flex items-center gap-2 px-3 py-2 rounded-lg text-left transition-colors {{ request()->routeIs('dashboard.pages') ? 'active bg-sn-plum text-white' : 'text-sn-main' }}">
<!-- <i class="ri-file-list-line text-sm"></i> -->
<svg width="16" height="16" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3439 1.79761L3.23145 4.12948C3.37774 4.34328 3.51373 4.56395 3.63895 4.79073C6.31457 3.96719 8.9904 3.14396 11.6664 2.32104C11.5677 2.14229 11.4602 1.96782 11.3439 1.79761ZM12.1249 3.32011L4.21895 6.05448C4.3102 6.29615 4.39415 6.54125 4.47082 6.78979C7.08874 5.82688 9.70645 4.86427 12.3239 3.90198C12.2634 3.70609 12.197 3.51204 12.1249 3.32011ZM4.83082 8.15667C4.88988 8.41323 4.94363 8.6723 4.99551 8.9323L12.7305 5.60011C12.6895 5.39504 12.6461 5.19045 12.6005 4.98636L4.83082 8.15667Z" fill="currentColor"/>
<path d="M18.5088 9.73594C17.8038 8.96344 17.4028 8.04875 17.1278 7.07406C16.2757 7.55594 15.4688 8.01271 14.7069 8.44438C13.8725 5.48625 14.1003 2.0275 11.2878 0L0 2.57906C4.7725 6.01813 3.4825 14.9253 6.88781 18.2703C7.1725 18.55 8.23906 19.0791 9.72156 18.4666C12.0191 17.5172 11.1769 16.4403 18.2169 11.3081C18.8378 10.855 18.8906 10.1612 18.5088 9.73594ZM7.09406 12.7531C7.47969 14.1203 10.0788 14.8609 9.63 16.8966C9.3575 18.1344 7.82687 18.3847 7.29844 17.8541C5.90781 16.4584 5.3325 13.9472 4.73875 11.2725C4.05156 8.1775 3.34406 4.98938 1.26094 2.89L11.1516 0.630625C12.8656 1.99656 13.2341 4.03188 13.6231 6.18219C13.7766 7.03063 13.94 7.9 14.1869 8.73906L7.09406 12.7531Z" fill="currentColor"/>
</svg>
<span class="text-xs">Clubs</span>
</a>
</nav>
</div>
</div>
</div>
<!-- Main Content Area (each route renders its own content here) -->
<div class="feeds-main-wrap {{ request()->routeIs('messages.*') ? 'flex flex-col min-h-0 flex-1' : '' }}">
<div
class="p-3 feeds-content-area {{ request()->routeIs('messages.*') ? '!p-0 !h-full !min-h-0 flex flex-col' : '' }}">
@yield('content')
</div>
</div>
<!-- Right Sidebar: Ads -->
<!-- <div id="feeds-rightbar-wrap" class="feeds-rightbar-wrap col-span-2 border-l border-sn-divider">
<div class="p-4 feeds-rightbar-inner overflow-y-auto max-h-[calc(100vh-68px)]">
</div>
</div> -->
</div>
</div>
<style>
.feeds-page {
--sn-purple: #6B3FA0;
--sn-gold: #F5B642;
--sn-plum: #6B3FA0;
--sn-bg-soft: #FAF7F2;
--sn-bg-lavender: #F1E9FB;
--sn-dark: #2B0F3A;
--sn-text-main: #2D2433;
--sn-text-heading: #3A1458;
--sn-text-muted: #7A6F80;
}
.feeds-nav-link:not(.active):hover {
background-color: rgb(241 233 251 / 0.8);
}
.feeds-nav-link.active {
background-color: var(--sn-plum) !important;
color: white !important;
}
.feeds-sidebar {
position: fixed;
top: 68px;
left: 0;
width: 16rem;
height: calc(100vh - 68px);
overflow-y: auto;
overflow-x: hidden;
z-index: 10;
-webkit-overflow-scrolling: touch;
}
#feeds-grid {
padding-left: 16rem;
}
.feeds-sidebar,
.feeds-sidebar-inner,
.feeds-content-area,
.feeds-rightbar-inner {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(107, 63, 160, 0.3) transparent;
}
.feeds-sidebar::-webkit-scrollbar,
.feeds-sidebar-inner::-webkit-scrollbar,
.feeds-content-area::-webkit-scrollbar,
.feeds-rightbar-inner::-webkit-scrollbar {
width: 6px;
}
.feeds-sidebar::-webkit-scrollbar-thumb,
.feeds-sidebar-inner::-webkit-scrollbar-thumb,
.feeds-content-area::-webkit-scrollbar-thumb,
.feeds-rightbar-inner::-webkit-scrollbar-thumb {
background-color: rgba(107, 63, 160, 0.3);
border-radius: 3px;
}
/* Messages page: content fills height inside feeds layout (no bottom spacing) */
.feeds-page.feeds-messages-active {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
}
#feeds-grid.feeds-messages-active {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.feeds-messages-active .feeds-main-wrap {
flex: 1;
min-height: 0;
}
.feeds-members-active .feeds-rightbar-wrap,
.feeds-friends-active .feeds-rightbar-wrap,
.feeds-visits-active .feeds-rightbar-wrap,
.feeds-online-users-active .feeds-rightbar-wrap,
.feeds-profile-active .feeds-rightbar-wrap {
display: none !important;
}
.feeds-members-active .feeds-main-wrap,
.feeds-friends-active .feeds-main-wrap,
.feeds-visits-active .feeds-main-wrap,
.feeds-online-users-active .feeds-main-wrap,
.feeds-profile-active .feeds-main-wrap {
grid-column: span 10 / span 10;
}
.feeds-members-active .feeds-content-area,
.feeds-friends-active .feeds-content-area,
.feeds-visits-active .feeds-content-area,
.feeds-online-users-active .feeds-content-area,
.feeds-profile-active .feeds-content-area {
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.feeds-content-area .member-card {
border-color: rgba(107, 63, 160, 0.2);
}
.feeds-content-area .member-card:hover {
border-color: var(--sn-purple);
box-shadow: 0 10px 25px -5px rgba(107, 63, 160, 0.15), 0 8px 10px -6px rgba(107, 63, 160, 0.1);
}
.feeds-content-area .member-card>a:first-child {
background: linear-gradient(to bottom right, var(--sn-purple), var(--sn-accent)) !important;
}
/* .feeds-content-area .member-card .absolute.inset-0 button { background-color: var(--sn-accent) !important; } */
.feeds-content-area .member-card .absolute.inset-0 button:hover {
background-color: var(--sn-purple) !important;
}
.feeds-content-area .member-card h3:hover {
color: var(--sn-accent) !important;
}
.feeds-content-area .member-card>div:last-of-type {
background-color: var(--sn-bg-soft) !important;
}
.feeds-content-area .member-card>div:last-of-type .absolute.inset-0 {
background-color: rgba(255, 255, 255, 0.97) !important;
}
.feeds-content-area .member-card>div:last-of-type h3 {
color: var(--sn-text-heading) !important;
}
.feeds-content-area .member-card>div:last-of-type h3:hover {
color: var(--sn-accent) !important;
}
.feeds-content-area .member-card>div:last-of-type p {
color: var(--sn-text-main) !important;
}
.feeds-content-area .member-card>div:last-of-type p.text-gray-400 {
color: var(--sn-text-muted) !important;
}
.feeds-content-area .member-card>div:last-of-type .border-t.border-gray-700 {
border-color: rgba(107, 63, 160, 0.12) !important;
}
.members-tab-btn-theme:hover {
background-color: var(--sn-accent) !important;
}
.feeds-content-area .search-form-wrap .category-btn {
background-color: var(--sn-purple) !important;
}
.feeds-content-area .search-form-wrap .mb-8>p.text-blue-600 {
color: var(--sn-purple) !important;
}
.feeds-content-area .search-form-btn:hover {
background-color: var(--sn-accent) !important;
}
.feeds-story-track::-webkit-scrollbar {
display: none;
}
.feeds-story-modal {
display: none;
}
.feeds-story-modal.feeds-story-modal--open {
display: flex !important;
}
.feeds-post-menu-arrow-shadow {
filter: drop-shadow(-1px 0 0 rgba(107, 63, 160, 0.12));
}
.feeds-promo-banner-bg {
background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1200');
}
.upgrade-rate-tab:not(.active) {
color: var(--sn-text-muted);
border-color: transparent;
}
.upgrade-rate-tab.active {
color: var(--sn-plum);
border-color: var(--sn-plum);
}
footer {
display: none;
}
/* Mobile Responsive Styles for Feeds Layout */
@media (max-width: 767px) {
/* Hide left sidebar on mobile */
.feeds-sidebar {
display: none !important;
}
/* Remove left padding since sidebar is hidden */
#feeds-grid {
padding-left: 0 !important;
}
/* Make main content full width on mobile */
.feeds-main-wrap {
grid-column: span 12 !important;
}
/* Hide right sidebar on mobile */
.feeds-rightbar-wrap {
display: none !important;
}
/* Adjust content area padding for mobile */
.feeds-content-area {
padding: 12px !important;
max-width: none !important;
}
.feeds-messages-active .feeds-content-area {
padding: 0 !important;
}
/* Add bottom padding for mobile bottom nav */
.feeds-page {
padding-bottom: 70px !important;
}
.feeds-page.feeds-messages-active {
padding-bottom: 0 !important;
}
}
/* Tablet responsive (md breakpoint) */
@media (min-width: 768px) and (max-width: 1023px) {
.feeds-sidebar {
width: 12rem;
}
#feeds-grid {
padding-left: 12rem;
}
}
</style>
<!-- Welcome Popup Modal - Feeds Screen Only -->
@auth
<div id="welcome-popup-modal" class="fixed inset-0 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden"
style="background-color: rgba(0, 0, 0, 0.5);">
<div class="rounded-2xl shadow-2xl max-w-2xl w-full transform transition-all max-h-[90vh] overflow-y-auto"
style="background-color: white;">
<!-- Modal Header -->
<div class="px-6 py-4 sticky top-0 flex items-center justify-between z-9"
style="background-color: white; border-bottom: 1px solid rgba(107, 63, 160, 0.12);">
<h3 class="text-xl font-bold" style="color: var(--sn-text-heading);">Complete Your Profile</h3>
<!-- <button id="close-welcome-popup-modal" class="transition-colors" style="color: var(--sn-text-muted);">
<i class="ri-close-line text-2xl"></i>
</button> -->
</div>
<!-- Tabs Navigation -->
<div class="px-6 py-4 flex gap-2"
style="background-color: var(--sn-bg-soft); border-bottom: 1px solid rgba(107, 63, 160, 0.12);">
<button class="welcome-tab-btn active px-4 py-2 rounded-lg font-semibold transition-all text-sm"
data-tab="1">
Photo/Name
</button>
<button
class="welcome-tab-btn disabled px-4 py-2 rounded-lg font-semibold transition-all text-sm opacity-50 cursor-not-allowed"
data-tab="2">
Looking for
</button>
<button
class="welcome-tab-btn disabled px-4 py-2 rounded-lg font-semibold transition-all text-sm opacity-50 cursor-not-allowed"
data-tab="3">
Location
</button>
<button
class="welcome-tab-btn disabled px-4 py-2 rounded-lg font-semibold transition-all text-sm opacity-50 cursor-not-allowed"
data-tab="4">
About You
</button>
</div>
<!-- Modal Body - Tab Content -->
<div class="px-6 py-8">
<!-- Tab 1: Getting Started -->
<div class="welcome-tab-content active" data-tab="1">
<div class="space-y-6">
@csrf
<!-- Profile Photo Section -->
<div class="space-y-3">
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Upload Your Profile Photo</h3>
</div>
<div class="relative border-2 border-dashed rounded-lg p-6 text-center transition-all"
id="welcome-photo-dropzone"
style="border-color: rgba(230, 0, 118, 0.3); background-color: var(--sn-bg-soft, #FAF7F2); cursor: pointer;">
<div class="flex flex-col items-center" id="welcome-photo-placeholder">
<i class="ri-upload-cloud-2-line text-2xl mb-2"
style="color: var(--sn-text-muted);"></i>
<p class="text-xs font-medium mb-1" style="color: var(--sn-text-heading);">Drag & drop
your photo here</p>
<p class="text-[10px]" style="color: var(--sn-text-muted);">or click to browse</p>
</div>
<img id="welcome-photo-preview" src="" alt="Preview"
style="display: none; width: 6rem; height: 6rem; border-radius: 9999px; object-fit: cover; border: 4px solid var(--sn-purple); margin: 0 auto;">
</div>
<!-- Hidden file input -->
<input type="file" id="welcome-photo-input" accept="image/*"
style="display:none !important; width:0; height:0; position:absolute; opacity:0; pointer-events:none;">
<p class="text-[10px]" style="color: var(--sn-text-muted);">Your profile photo helps others
connect with you.</p>
</div>
<!-- Display Name Section -->
<div class="space-y-3">
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Choose Your Display Name</h3>
</div>
<input type="text" name="displayname" id="welcome-username" value="{{ auth()->user()->name }}"
class="w-full px-4 py-2.5 text-xs rounded-lg border focus:outline-none focus:ring-2 transition-all dark:bg-gray-800 dark:text-white dark:border-gray-700"
style="background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2);"
placeholder="Your display name">
<p class="text-[10px]" style="color: var(--sn-text-muted);">This is what other members will see
as your name.</p>
</div>
</div>
</div>
<!-- Tab 2: Looking For - Account Category & Preferences -->
<div class="welcome-tab-content hidden" data-tab="2">
<div class="space-y-6">
<!-- Category Section -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Your Category</h3>
</div>
<!-- Category Options Grid -->
<div class="grid grid-cols-2 gap-2">
@php
$currentCategory = auth()->user()->profile?->category ?? '';
@endphp
@foreach($categoryOptions as $value => $label)
<button type="button" data-category="{{ $value }}"
class="welcome-category-option relative px-3 py-3 rounded-lg border-2 transition-all text-left"
style="{{ $currentCategory === $value
? 'background-color: var(--sn-purple); border-color: var(--sn-purple); color: white;'
: 'background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2); color: var(--sn-text-main);'
}}">
<div class="flex items-center gap-2">
<i
class="ri-{{ $value === 'couple' ? 'group-line' : ($value === 'single_male' ? 'user-3-line' : ($value === 'single_female' ? 'user-2-line' : 'user-settings-line')) }} text-sm"></i>
<span class="text-xs font-medium">{{ $label }}</span>
</div>
@if($currentCategory === $value)
<i class="ri-check-line absolute top-1.5 right-1.5 text-white text-xs"></i>
@endif
</button>
@endforeach
</div>
</div>
<!-- Preferences Section -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">What are you looking for?</h3>
</div>
<div class="grid grid-cols-2 gap-2" id="welcome-preferences-container">
@php
// Get current preferences from user profile
$currentPreferences = auth()->user()->profile?->looking_for ?? [];
@endphp
@foreach($preferenceOptions as $key => $label)
@php
$isSelected = is_array($currentPreferences) && in_array($key, $currentPreferences);
@endphp
<button type="button" data-preference="{{ $key }}"
class="welcome-preference-option relative px-3 py-3 rounded-lg border-2 transition-all text-left"
style="{{ $isSelected
? 'background-color: var(--sn-purple); border-color: var(--sn-purple); color: white;'
: 'background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2); color: var(--sn-text-main);'
}}">
<div class="flex items-center gap-2">
<i
class="ri-{{ $key === 'couple' ? 'group-line' : ($key === 'single_male' ? 'user-3-line' : ($key === 'single_female' ? 'user-2-line' : 'user-settings-line')) }} text-sm"></i>
<span class="text-xs font-medium flex-1">{{ $label }}</span>
</div>
@if($isSelected)
<i class="ri-check-line absolute top-1.5 right-1.5 text-white text-xs"></i>
@endif
</button>
@endforeach
</div>
</div>
<!-- Do You Prefer Section -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Do you prefer?</h3>
</div>
<div class="grid grid-cols-2 gap-2" id="welcome-do-you-prefer-container">
@php
// Get current category
$currentCategory = auth()->user()->profile?->category ?? '';
$currentDoYouPrefer = auth()->user()->profile?->preferences ?? [];
// Get preference options for current category
$currentPreferenceOptions = $preferencesByCategory[$currentCategory] ?? [];
@endphp
@if(!empty($currentPreferenceOptions))
@foreach($currentPreferenceOptions as $key => $label)
@php
$isSelected = is_array($currentDoYouPrefer) && in_array($key, $currentDoYouPrefer);
@endphp
<button type="button" data-do-you-prefer="{{ $key }}"
class="welcome-do-you-prefer-option relative px-3 py-2.5 rounded-lg border-2 transition-all text-left"
style="{{ $isSelected
? 'background-color: var(--sn-purple); border-color: var(--sn-purple); color: white;'
: 'background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2); color: var(--sn-text-main);'
}}">
<div class="flex items-center gap-2">
<span class="text-xs font-medium flex-1">{{ $label }}</span>
</div>
@if($isSelected)
<i class="ri-check-line absolute top-1 left-1 text-white text-xs"></i>
@endif
</button>
@endforeach
@else
<p class="text-xs col-span-2 text-center py-4" style="color: var(--sn-text-muted);">Select a
category to see preference options</p>
@endif
</div>
</div>
</div>
</div>
<div class="welcome-tab-content hidden" data-tab="3">
<div class="space-y-6">
<!-- Home Location Section -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Home Location</h3>
</div>
<div class="space-y-3">
<div>
<label class="text-xs font-semibold block mb-1.5"
style="color: var(--sn-text-heading);">Search Location</label>
<input type="text" id="welcome-home-location"
value="{{ $currentProfile->home_location ?? '' }}"
class="w-full px-3 py-1.5 text-xs rounded-lg border focus:outline-none focus:ring-2 transition-all"
style="background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2); color: var(--sn-text-main);"
placeholder="Enter city name...">
<input type="hidden" id="welcome-latitude" name="latitude"
value="{{ $currentProfile->latitude ?? '' }}">
<input type="hidden" id="welcome-longitude" name="longitude"
value="{{ $currentProfile->longitude ?? '' }}">
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="text-xs font-semibold block mb-1.5"
style="color: var(--sn-text-heading);">Country</label>
<input type="text" id="welcome-country" value="{{ $currentProfile->country ?? '' }}"
class="w-full px-3 py-1.5 text-xs rounded-lg border focus:outline-none focus:ring-2 transition-all"
style="background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2); color: var(--sn-text-main);">
</div>
<div>
<label class="text-xs font-semibold block mb-1.5"
style="color: var(--sn-text-heading);">City</label>
<input type="text" id="welcome-city" value="{{ $currentProfile->city ?? '' }}"
class="w-full px-3 py-1.5 text-xs rounded-lg border focus:outline-none focus:ring-2 transition-all"
style="background-color: var(--sn-bg-soft); border-color: rgba(107, 63, 160, 0.2); color: var(--sn-text-main);">
</div>
</div>
<!-- Map Container -->
<div id="welcome-location-map" class="w-full h-48 rounded-lg border mt-3"
style="display: {{ ($currentProfile && $currentProfile->latitude && $currentProfile->longitude) ? 'block' : 'none' }}; border-color: rgba(107, 63, 160, 0.2);">
</div>
</div>
</div>
<!-- Languages Section -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Languages Spoken</h3>
</div>
<div class="flex flex-wrap gap-2" id="welcome-languages-container">
@foreach($languageOptions as $value => $lang)
@php
$isSelected = in_array($value, $currentLanguages);
@endphp
<label
class="welcome-language-pill relative inline-flex items-center gap-2 px-3 py-1.5 rounded-full cursor-pointer transition-all text-xs font-medium"
data-language="{{ $value }}"
style="{{ $isSelected
? 'background-color: var(--sn-purple); color: white;'
: 'background-color: var(--sn-bg-soft); color: var(--sn-text-main);'
}}">
<input type="hidden" class="language-value" value="{{ $value }}">
<span class="text-base leading-none">{{ $lang['flag'] }}</span>
<span>{{ $lang['name'] }}</span>
</label>
@endforeach
</div>
</div>
</div>
</div>
<!-- Tab 4: About You (Personal, General, Bio) -->
<div class="welcome-tab-content hidden" data-tab="4">
<div class="space-y-6">
<!-- Personal Info (single/couple adapted) -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Personal</h3>
</div>
@if($isCouple)
<div class="grid grid-cols-1 md:grid-cols-1 gap-4">
<div class="px-4 py-3 rounded-lg border"
style="background-color: rgba(236, 72, 153, 0.03);">
<label class="text-xs font-semibold block mb-1.5">Her Bio</label>
<textarea name="bio_her" rows="4" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">{{ old('bio_her', $coupleData['bio_her'] ?? '') }}</textarea>
</div>
<div class="px-4 py-3 rounded-lg border"
style="background-color: rgba(59, 130, 246, 0.03);">
<label class="text-xs font-semibold block mb-1.5">Him Bio</label>
<textarea name="bio_him" rows="4" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">{{ old('bio_him', $coupleData['bio_him'] ?? '') }}</textarea>
</div>
</div>
@else
<div class="space-y-3">
<label class="text-xs font-semibold block mb-1.5">Sexuality</label>
<select name="sexuality" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select</option>
<option value="straight" {{ ($currentProfile && $currentProfile->sexuality === 'straight') ? 'selected' : '' }}>Straight</option>
<option value="bisexual" {{ ($currentProfile && $currentProfile->sexuality === 'bisexual') ? 'selected' : '' }}>Bi-sexual</option>
<option value="bi-curious" {{ ($currentProfile && $currentProfile->sexuality === 'bi-curious') ? 'selected' : '' }}>Bi-curious</option>
<option value="gay" {{ ($currentProfile && $currentProfile->sexuality === 'gay') ? 'selected' : '' }}>Gay</option>
<option value="lesbian" {{ ($currentProfile && $currentProfile->sexuality === 'lesbian') ? 'selected' : '' }}>Lesbian</option>
</select>
<div class="grid grid-cols-1 gap-3">
<div>
<label class="text-xs font-semibold block mb-1.5">Weight (kg)</label>
<input type="number" name="weight" value="{{ $currentProfile->weight ?? '' }}"
class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
</div>
<div>
<label class="text-xs font-semibold block mb-1.5">Height (cm)</label>
<input type="number" name="height" value="{{ $currentProfile->height ?? '' }}"
class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
</div>
</div>
<div class="grid grid-cols-2 gap-3">
<div>
<label class="text-xs font-semibold block mb-1.5">Body Type</label>
<select name="body_type" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select Body Type</option>
<option value="Slim" {{ ($currentProfile && $currentProfile->body_type == 'Slim') ? 'selected' : '' }}>Slim</option>
<option value="Athletic" {{ ($currentProfile && $currentProfile->body_type == 'Athletic') ? 'selected' : '' }}>Athletic
</option>
<option value="Curvy" {{ ($currentProfile && $currentProfile->body_type == 'Curvy') ? 'selected' : '' }}>Curvy</option>
<option value="Average" {{ ($currentProfile && $currentProfile->body_type == 'Average') ? 'selected' : '' }}>Average</option>
<option value="Plus Size" {{ ($currentProfile && $currentProfile->body_type == 'Plus Size') ? 'selected' : '' }}>Plus Size
</option>
</select>
</div>
<div>
<label class="text-xs font-semibold block mb-1.5">Eye Color</label>
<select name="eye_color" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select Eye Color</option>
<option value="Brown" {{ ($currentProfile && $currentProfile->eye_color === 'Brown') ? 'selected' : '' }}>Brown</option>
<option value="Blue" {{ ($currentProfile && $currentProfile->eye_color === 'Blue') ? 'selected' : '' }}>Blue</option>
<option value="Green" {{ ($currentProfile && $currentProfile->eye_color === 'Green') ? 'selected' : '' }}>Green</option>
<option value="Gray" {{ ($currentProfile && $currentProfile->eye_color === 'Gray') ? 'selected' : '' }}>Gray</option>
<option value="Hazel" {{ ($currentProfile && $currentProfile->eye_color === 'Hazel') ? 'selected' : '' }}>Hazel</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 gap-3">
<div>
<label class="text-xs font-semibold block mb-1.5">Hair Color</label>
<select name="hair_color" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select Hair Color</option>
<option value="Black" {{ ($currentProfile && $currentProfile->hair_color === 'Black') ? 'selected' : '' }}>Black</option>
<option value="Brown" {{ ($currentProfile && $currentProfile->hair_color === 'Brown') ? 'selected' : '' }}>Brown</option>
<option value="Blonde" {{ ($currentProfile && $currentProfile->hair_color === 'Blonde') ? 'selected' : '' }}>Blonde</option>
<option value="Red" {{ ($currentProfile && $currentProfile->hair_color === 'Red') ? 'selected' : '' }}>Red</option>
</select>
</div>
<div>
<label class="text-xs font-semibold block mb-1.5">Tattoos</label>
<select name="tattoos" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select...</option>
<option value="no" {{ ($currentProfile && $currentProfile->tattoos === 'no') ? 'selected' : '' }}>No</option>
<option value="yes" {{ ($currentProfile && $currentProfile->tattoos === 'yes') ? 'selected' : '' }}>Yes</option>
</select>
</div>
</div>
<div class="setting-item px-4 py-3">
<label class="text-xs font-semibold block mb-1.5">Piercings</label>
<select name="piercings" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select...</option>
<option value="no" {{ ($currentProfile && $currentProfile->piercings === 'no') ? 'selected' : '' }}>No</option>
<option value="yes" {{ ($currentProfile && $currentProfile->piercings === 'yes') ? 'selected' : '' }}>Yes</option>
</select>
</div>
</div>
@endif
</div>
<!-- General Info -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">General</h3>
</div>
<div class="space-y-3">
<label class="text-xs font-semibold block mb-1.5">Date of Birth</label>
<input type="date" name="date_of_birth"
value="{{ $currentProfile && $currentProfile->date_of_birth ? $currentProfile->date_of_birth->format('Y-m-d') : '' }}"
max="{{ date('Y-m-d', strtotime('-18 years')) }}"
class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<label class="text-xs font-semibold block mb-1.5">Sexuality (repeat)</label>
<select name="sexuality_repeat" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select...</option>
<option value="straight" {{ ($currentProfile && $currentProfile->sexuality === 'straight') ? 'selected' : '' }}>Straight</option>
<option value="gay" {{ ($currentProfile && $currentProfile->sexuality === 'gay') ? 'selected' : '' }}>Gay</option>
<option value="bisexual" {{ ($currentProfile && $currentProfile->sexuality === 'bisexual') ? 'selected' : '' }}>Bisexual</option>
<option value="lesbian" {{ ($currentProfile && $currentProfile->sexuality === 'lesbian') ? 'selected' : '' }}>Lesbian</option>
<option value="prefer_not_to_say" {{ ($currentProfile && $currentProfile->sexuality === 'prefer_not_to_say') ? 'selected' : '' }}>Prefer not to
say</option>
</select>
<label class="text-xs font-semibold block mb-1.5">Relationship Status (repeat)</label>
<select name="relationship_status_repeat" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select...</option>
<option value="single" {{ ($currentProfile && $currentProfile->relationship_status === 'single') ? 'selected' : '' }}>Single
</option>
<option value="in_relationship" {{ ($currentProfile && $currentProfile->relationship_status === 'in_relationship') ? 'selected' : '' }}>In
Relationship</option>
<option value="married" {{ ($currentProfile && $currentProfile->relationship_status === 'married') ? 'selected' : '' }}>Married
</option>
<option value="open" {{ ($currentProfile && $currentProfile->relationship_status === 'open') ? 'selected' : '' }}>Open</option>
</select>
<label class="text-xs font-semibold block mb-1.5">Smoking</label>
<select name="smoking" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select...</option>
<option value="no" {{ ($currentProfile && $currentProfile->smoking === 'no') ? 'selected' : '' }}>No</option>
<option value="yes" {{ ($currentProfile && $currentProfile->smoking === 'yes') ? 'selected' : '' }}>Yes</option>
<option value="prefer_not_to_say" {{ ($currentProfile && $currentProfile->smoking === 'prefer_not_to_say') ? 'selected' : '' }}>Prefer not to
say</option>
</select>
<label class="text-xs font-semibold block mb-1.5">Experience</label>
<select name="experience" class="w-full px-3 py-1.5 text-xs rounded-lg"
style="background-color: var(--sn-bg-soft);">
<option value="">Select...</option>
<option value="beginner" {{ ($currentProfile && $currentProfile->experience === 'beginner') ? 'selected' : '' }}>Beginner</option>
<option value="intermediate" {{ ($currentProfile && $currentProfile->experience === 'intermediate') ? 'selected' : '' }}>Intermediate
</option>
<option value="advanced" {{ ($currentProfile && $currentProfile->experience === 'advanced') ? 'selected' : '' }}>Advanced</option>
</select>
</div>
</div>
<!-- Bio -->
<div>
<div class="px-4 py-3 rounded-lg mb-4" style="background-color: var(--sn-purple);">
<h3 class="text-xs text-white font-semibold">Description yourself</h3>
</div>
@if($isCouple)
<div class="grid grid-cols-1 gap-3">
<textarea name="bio_her_full" rows="6" class="w-full px-3 py-1.5 text-xs rounded-lg"
placeholder="Tell us about her...">{{ old('bio_her', $coupleData['bio_her'] ?? '') }}</textarea>
<textarea name="bio_him_full" rows="6" class="w-full px-3 py-1.5 text-xs rounded-lg"
placeholder="Tell us about him...">{{ old('bio_him', $coupleData['bio_him'] ?? '') }}</textarea>
</div>
@else
<textarea name="bio" rows="6" class="w-full px-3 py-1.5 text-xs rounded-lg"
placeholder="Tell us about yourself...">{{ old('bio', $currentProfile->bio ?? '') }}</textarea>
@endif
</div>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="px-6 py-4 sticky bottom-0 flex gap-3"
style="background-color: white; border-top: 1px solid rgba(107, 63, 160, 0.12);">
<button id="welcome-popup-prev-btn" class="flex-1 px-4 py-3 rounded-xl font-semibold transition-all hidden"
style="background-color: var(--sn-bg-soft); color: var(--sn-text-main);">
Previous
</button>
<button id="welcome-popup-next-btn"
class="flex-1 px-4 py-3 text-white rounded-xl font-semibold transition-all"
style="background-color: var(--sn-purple);">
Next
</button>
<button id="welcome-popup-close-btn" class="flex-1 px-4 py-3 rounded-xl font-semibold transition-all hidden"
style="background-color: #10b981; color: white;">
Finish
</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const welcomeModal = document.getElementById('welcome-popup-modal');
const tabBtns = document.querySelectorAll('.welcome-tab-btn');
const tabContents = document.querySelectorAll('.welcome-tab-content');
const closeModalBtn = document.getElementById('close-welcome-popup-modal');
const nextBtn = document.getElementById('welcome-popup-next-btn');
const prevBtn = document.getElementById('welcome-popup-prev-btn');
const finishBtn = document.getElementById('welcome-popup-close-btn');
const photoDropzone = document.getElementById('welcome-photo-dropzone');
const photoInput = document.getElementById('welcome-photo-input');
const photoPreview = document.getElementById('welcome-photo-preview');
const photoPlaceholder = document.getElementById('welcome-photo-placeholder');
let currentTab = 1;
let visitedTabs = new Set([1]);
// Ensure photoInput exists
if (!photoInput) {
console.error('Photo input not found!');
return;
}
// Handle photo input change
photoInput.addEventListener('change', function (e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
console.log('Image loaded:', event.target.result);
photoPreview.src = event.target.result;
photoPreview.style.display = 'block';
photoPlaceholder.style.display = 'none';
};
reader.readAsDataURL(file);
}
});
// Handle dropzone click
if (photoDropzone) {
photoDropzone.addEventListener('click', function (e) {
console.log('Dropzone clicked');
photoInput.click();
});
}
// Handle drag and drop
if (photoDropzone) {
photoDropzone.addEventListener('dragover', function (e) {
e.preventDefault();
photoDropzone.style.borderColor = 'var(--sn-purple)';
photoDropzone.style.backgroundColor = 'var(--sn-bg-lavender)';
});
photoDropzone.addEventListener('dragleave', function (e) {
e.preventDefault();
photoDropzone.style.borderColor = 'rgba(107, 63, 160, 0.2)';
photoDropzone.style.backgroundColor = 'var(--sn-bg-soft, #FAF7F2)';
});
photoDropzone.addEventListener('drop', function (e) {
e.preventDefault();
photoDropzone.style.borderColor = 'rgba(107, 63, 160, 0.2)';
photoDropzone.style.backgroundColor = 'var(--sn-bg-soft, #FAF7F2)';
const files = e.dataTransfer.files;
if (files.length > 0 && files[0].type.startsWith('image/')) {
photoInput.files = files;
const event = new Event('change', { bubbles: true });
photoInput.dispatchEvent(event);
}
});
}
// Save step 1 data
async function saveStep1Data() {
const displayName = document.getElementById('welcome-username').value;
if (!displayName || displayName.trim() === '') {
alert('Please enter a display name');
return false;
}
const submitFormData = new FormData();
submitFormData.append('name', displayName); // Update user's name field
submitFormData.append('email', '{{ auth()->user()->email }}');
submitFormData.append('_token', '{{ csrf_token() }}');
submitFormData.append('_method', 'PUT');
const photoFile = photoInput.files[0];
if (photoFile) {
submitFormData.append('profile_photo', photoFile);
}
try {
const response = await fetch('{{ route("account.profile.update") }}', {
method: 'POST',
body: submitFormData
});
if (response.ok) {
console.log('Profile updated successfully');
return true;
} else {
const errorData = await response.json();
console.error('Server error:', errorData);
alert('Failed to save profile information');
return false;
}
} catch (error) {
console.error('Error saving profile:', error);
alert('An error occurred while saving your profile');
return false;
}
}
// Save step 2 data (category and preferences)
async function saveStep2Data() {
console.log('Saving step 2 data...');
// Get selected category - stored in data-selected attribute
const selectedCategoryBtn = document.querySelector('.welcome-category-option[data-selected="true"]');
const selectedCategory = selectedCategoryBtn ? selectedCategoryBtn.getAttribute('data-category') : null;
// Get selected looking_for options - use data-selected attribute
const lookingForButtons = Array.from(document.querySelectorAll('.welcome-preference-option[data-selected="true"]'));
const lookingFor = lookingForButtons.map(btn => btn.getAttribute('data-preference'));
// Get selected do-you-prefer options - use data-selected attribute
const doYouPreferButtons = Array.from(document.querySelectorAll('.welcome-do-you-prefer-option[data-selected="true"]'));
const preferences = doYouPreferButtons.map(btn => btn.getAttribute('data-do-you-prefer'));
console.log('Category:', selectedCategory);
console.log('Looking for:', lookingFor);
console.log('Preferences:', preferences);
const submitFormData = new FormData();
submitFormData.append('email', '{{ auth()->user()->email }}');
submitFormData.append('_token', '{{ csrf_token() }}');
submitFormData.append('_method', 'PUT');
// Add category if selected
if (selectedCategory) {
submitFormData.append('category', selectedCategory);
}
// Add looking_for as array
lookingFor.forEach(item => {
submitFormData.append('looking_for[]', item);
});
// Add preferences as array
preferences.forEach(item => {
submitFormData.append('preferences[]', item);
});
try {
const response = await fetch('{{ route("account.profile.update") }}', {
method: 'POST',
body: submitFormData
});
if (response.ok) {
console.log('Step 2 data saved successfully');
return true;
} else {
const errorData = await response.json();
console.error('Server error:', errorData);
alert('Failed to save preferences');
return false;
}
} catch (error) {
console.error('Error saving preferences:', error);
alert('An error occurred while saving your preferences');
return false;
}
}
// Save step 3 data (location and languages)
async function saveStep3Data() {
console.log('Saving step 3 data...');
const homeLocation = document.getElementById('welcome-home-location')?.value ?? '';
const country = document.getElementById('welcome-country')?.value ?? '';
const city = document.getElementById('welcome-city')?.value ?? '';
// Get selected languages using data-selected attribute
const selectedLanguages = Array.from(document.querySelectorAll('.welcome-language-pill[data-selected="true"]'))
.map(pill => pill.getAttribute('data-language'));
console.log('Location:', { homeLocation, country, city });
console.log('Languages:', selectedLanguages);
const submitFormData = new FormData();
submitFormData.append('email', '{{ auth()->user()->email }}');
submitFormData.append('_token', '{{ csrf_token() }}');
submitFormData.append('_method', 'PUT');
// Always append location fields even if empty
submitFormData.append('home_location', homeLocation);
submitFormData.append('country', country);
submitFormData.append('city', city);
// Append languages as array (using languages[] notation for Laravel)
selectedLanguages.forEach(lang => {
submitFormData.append('languages[]', lang);
});
try {
const response = await fetch('{{ route("account.profile.update") }}', {
method: 'POST',
body: submitFormData
});
if (response.ok) {
console.log('Step 3 data saved successfully');
return true;
} else {
const errorData = await response.json();
console.error('Server error:', errorData);
alert('Failed to save location and languages');
return false;
}
} catch (error) {
console.error('Error saving location and languages:', error);
alert('An error occurred while saving your location and languages');
return false;
}
}
// Save step 4 data (personal/general/bio)
async function saveStep4Data() {
console.log('Saving step 4 data...');
const fieldNames = [
'date_of_birth', 'sexuality', 'relationship_status', 'smoking', 'experience',
'weight', 'height', 'body_type', 'eye_color', 'hair_color', 'tattoos', 'piercings',
'bio', 'bio_her', 'bio_him', 'bio_her_full', 'bio_him_full'
];
const submitFormData = new FormData();
submitFormData.append('email', '{{ auth()->user()->email }}');
submitFormData.append('_token', '{{ csrf_token() }}');
submitFormData.append('_method', 'PUT');
fieldNames.forEach(name => {
const el = document.querySelector('[name="' + name + '"]');
if (el) {
let val = el.value;
if (val !== undefined && val !== null && val !== '') {
submitFormData.append(name, val);
}
}
});
try {
const response = await fetch('{{ route("account.profile.update") }}', {
method: 'POST',
body: submitFormData
});
if (response.ok) {
console.log('Step 4 data saved successfully');
return true;
} else {
const errorData = await response.json();
console.error('Server error:', errorData);
alert('Failed to save About You information');
return false;
}
} catch (error) {
console.error('Error saving About You information:', error);
alert('An error occurred while saving your About You information');
return false;
}
}
// Update tab styles
function updateTabStyles() {
tabBtns.forEach(btn => {
const tabNum = parseInt(btn.getAttribute('data-tab'));
const isActive = tabNum === currentTab;
const isVisited = visitedTabs.has(tabNum);
if (isActive) {
btn.classList.add('active');
btn.classList.remove('disabled');
btn.style.backgroundColor = 'var(--sn-purple)';
btn.style.color = '#ffffff';
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
} else if (isVisited) {
btn.classList.remove('disabled');
btn.style.opacity = '1';
btn.style.cursor = 'pointer';
btn.style.backgroundColor = '';
btn.style.color = '';
} else {
btn.classList.add('disabled');
btn.style.opacity = '0.5';
btn.style.cursor = 'not-allowed';
btn.style.backgroundColor = '';
btn.style.color = '';
}
});
}
// Show/hide tab content
function showTab(tabNum) {
tabContents.forEach(content => {
if (parseInt(content.getAttribute('data-tab')) === tabNum) {
content.classList.remove('hidden');
} else {
content.classList.add('hidden');
}
});
nextBtn.style.display = tabNum === 4 ? 'none' : 'block';
finishBtn.style.display = tabNum === 4 ? 'block' : 'none';
prevBtn.style.display = tabNum === 1 ? 'none' : 'block';
// If switching to Location tab (3), refresh map
if (tabNum === 3 && typeof google !== 'undefined' && google.maps && welcomeLocationMap) {
setTimeout(() => {
google.maps.event.trigger(welcomeLocationMap, 'resize');
// Re-center map if coordinates exist
const lat = parseFloat(document.getElementById('welcome-latitude').value);
const lng = parseFloat(document.getElementById('welcome-longitude').value);
if (!isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0) {
const location = { lat: lat, lng: lng };
welcomeLocationMap.setCenter(location);
if (welcomeLocationMarker) {
welcomeLocationMarker.setPosition(location);
}
}
}, 100);
}
}
// Tab button click
tabBtns.forEach(btn => {
btn.addEventListener('click', function () {
const tabNum = parseInt(this.getAttribute('data-tab'));
if (visitedTabs.has(tabNum)) {
currentTab = tabNum;
showTab(currentTab);
updateTabStyles();
}
});
});
// Next button
// Next button
nextBtn.addEventListener('click', async function () {
if (currentTab === 1) {
const saved = await saveStep1Data();
if (!saved) return;
} else if (currentTab === 2) {
// Save step 2 data before moving to next tab
const saved = await saveStep2Data();
if (!saved) return;
} else if (currentTab === 3) {
// Save step 3 data before moving to next tab
const saved = await saveStep3Data();
if (!saved) return;
}
if (currentTab < 4) {
currentTab++;
visitedTabs.add(currentTab);
showTab(currentTab);
updateTabStyles();
}
});
// Previous button
prevBtn.addEventListener('click', function () {
if (currentTab > 1) {
currentTab--;
showTab(currentTab);
updateTabStyles();
}
});
// Close modal
function closeWelcomePopup() {
if (welcomeModal) {
welcomeModal.classList.add('hidden');
document.body.style.overflow = '';
}
}
// Finish button - save all changes and close
// Finish button - save all changes and close
finishBtn.addEventListener('click', async function () {
console.log('Finish button clicked');
// Always save step 1 data if on tab 1
if (currentTab === 1) {
const saved = await saveStep1Data();
if (!saved) return;
}
// Always save step 2 data since it applies to the profile
const step2Saved = await saveStep2Data();
if (!step2Saved) return;
// Always save step 3 data
const step3Saved = await saveStep3Data();
if (!step3Saved) return;
// Save step 4 (About You)
const step4Saved = await saveStep4Data();
if (!step4Saved) return;
closeWelcomePopup();
});
// Check if profile is already complete by checking database values
const hasProfilePhoto = '{{ auth()->user()->profile_image ?? '' }}' !== '' || '{{ $currentProfile->profile_photo ?? '' }}' !== '';
const displayName = '{{ auth()->user()->name ?? '' }}';
const hasCategory = '{{ $currentProfile->category ?? '' }}' !== '';
const hasLocation = '{{ $currentProfile->home_location ?? '' }}' !== '' || '{{ $currentProfile->city ?? '' }}' !== '' || '{{ $currentProfile->country ?? '' }}' !== '';
const hasLanguages = {{ !empty($currentLanguages) ? 'true' : 'false' }};
const profileComplete = hasProfilePhoto && displayName.trim() !== '' && hasCategory && hasLocation && hasLanguages;
console.log('Profile completion check:', {
hasProfilePhoto: hasProfilePhoto,
displayName: displayName,
hasCategory: hasCategory,
hasLocation: hasLocation,
hasLanguages: hasLanguages,
profileComplete: profileComplete
});
// Show welcome popup only if profile is not complete
if (welcomeModal && !profileComplete) {
setTimeout(function () {
welcomeModal.classList.remove('hidden');
document.body.style.overflow = 'hidden';
updateTabStyles();
showTab(1);
}, 500);
} else if (welcomeModal && profileComplete) {
// Hide the modal if profile is complete
welcomeModal.classList.add('hidden');
document.body.style.overflow = '';
}
// Close button listeners
if (closeModalBtn) {
closeModalBtn.addEventListener('click', closeWelcomePopup);
}
// Define preference options for each category (matching settings page)
const preferencesByCategory = {
'couple': {
'full_swap_completely_open': 'Full swap, completely open',
'full_swap_same_room_only': 'Full swap, same room only',
'soft_swap_same_room_only': 'Soft swap, same room only',
'soft_swap_touching_or_oral': 'Soft swap, touching or oral',
'soft_swap_girl_on_girl_only': 'Soft swap, girl on girl only',
'cuckold': 'Cuckold',
'exhibitionist': 'Exhibitionist',
'voyeur': 'Voyeur',
'still_exploring': 'Still Exploring',
'hotwife': 'Hot Wife',
'soft_swap_man_on_man': 'Soft Swap, man on man'
},
'single_male': {
'straight': 'Straight',
'bisexual': 'Bi-sexual',
'bi-curious': 'Bi-curious',
'gay': 'Gay'
},
'single_female': {
'straight': 'Straight',
'bisexual': 'Bi-sexual',
'bi-curious': 'Bi-curious',
'lesbian': 'Lesbian'
},
'transsexual': {}
};
// "What are you looking for?" - the 4 main categories
const lookingForOptions = {
'single_male': 'Single Male',
'single_female': 'Single Female',
'couple': 'Couple',
'transsexual': 'Transgender'
};
// Handle category button clicks in Tab 2
const categoryButtons = document.querySelectorAll('.welcome-category-option');
categoryButtons.forEach(button => {
button.addEventListener('click', function () {
const category = this.getAttribute('data-category');
console.log('Category selected:', category);
// Remove selected state from all buttons
categoryButtons.forEach(btn => {
btn.removeAttribute('data-selected');
btn.style.backgroundColor = 'var(--sn-bg-soft)';
btn.style.borderColor = 'rgba(107, 63, 160, 0.2)';
btn.style.color = 'var(--sn-text-main)';
const checkIcon = btn.querySelector('.ri-check-line');
if (checkIcon) checkIcon.remove();
});
// Add selected state to clicked button
this.setAttribute('data-selected', 'true');
this.style.backgroundColor = 'var(--sn-purple)';
this.style.borderColor = 'var(--sn-purple)';
this.style.color = 'white';
// Add check icon
const checkIcon = document.createElement('i');
checkIcon.className = 'ri-check-line absolute top-1.5 right-1.5 text-white text-xs';
this.appendChild(checkIcon);
// Update both the "What are you looking for?" and "Do you prefer?" sections
updateLookingForSection(category);
updateDoYouPreferSection(category);
});
});
// Function to update the "What are you looking for?" section dynamically
function updateLookingForSection(category) {
const container = document.getElementById('welcome-preferences-container');
// Clear existing options
container.innerHTML = '';
// Add new options
Object.entries(lookingForOptions).forEach(([key, label]) => {
const button = document.createElement('button');
button.type = 'button';
button.setAttribute('data-preference', key);
button.className = 'welcome-preference-option relative px-3 py-3 rounded-lg border-2 transition-all text-left';
button.style.backgroundColor = 'var(--sn-bg-soft)';
button.style.borderColor = 'rgba(107, 63, 160, 0.2)';
button.style.color = 'var(--sn-text-main)';
button.innerHTML = `<div class="flex items-center gap-2">
<i class="ri-${key === 'couple' ? 'group-line' : (key === 'single_male' ? 'user-3-line' : (key === 'single_female' ? 'user-2-line' : 'user-settings-line'))} text-sm"></i>
<span class="text-xs font-medium flex-1">${label}</span>
</div>`;
container.appendChild(button);
});
}
// Function to update the "Do you prefer?" section
function updateDoYouPreferSection(category) {
const container = document.getElementById('welcome-do-you-prefer-container');
const options = preferencesByCategory[category] || {};
// Clear existing options
container.innerHTML = '';
// Add new options
if (Object.keys(options).length > 0) {
Object.entries(options).forEach(([key, label]) => {
const button = document.createElement('button');
button.type = 'button';
button.setAttribute('data-do-you-prefer', key);
button.className = 'welcome-do-you-prefer-option relative px-3 py-2.5 rounded-lg border-2 transition-all text-left';
button.style.backgroundColor = 'var(--sn-bg-soft)';
button.style.borderColor = 'rgba(107, 63, 160, 0.2)';
button.style.color = 'var(--sn-text-main)';
button.innerHTML = `<div class="flex items-center gap-2">
<span class="text-xs font-medium flex-1">${label}</span>
</div>`;
container.appendChild(button);
});
} else {
container.innerHTML = '<p class="text-xs text-gray-500 dark:text-gray-400 col-span-2 text-center py-4">No preferences available for this category</p>';
}
}
// Handle preference button clicks using event delegation (for both static and dynamic buttons)
const preferencesContainer = document.getElementById('welcome-preferences-container');
if (preferencesContainer) {
preferencesContainer.addEventListener('click', function (e) {
const button = e.target.closest('.welcome-preference-option');
if (!button) return;
e.preventDefault();
// Toggle selected state using data-selected attribute
const isSelected = button.hasAttribute('data-selected');
if (isSelected) {
button.removeAttribute('data-selected');
button.style.backgroundColor = 'var(--sn-bg-soft)';
button.style.borderColor = 'rgba(107, 63, 160, 0.2)';
button.style.color = 'var(--sn-text-main)';
const icon = button.querySelector('.ri-check-line');
if (icon) icon.remove();
} else {
button.setAttribute('data-selected', 'true');
button.style.backgroundColor = 'var(--sn-purple)';
button.style.borderColor = 'var(--sn-purple)';
button.style.color = 'white';
if (!button.querySelector('.ri-check-line')) {
const checkIcon = document.createElement('i');
checkIcon.className = 'ri-check-line absolute top-1.5 right-1.5 text-white text-xs';
button.appendChild(checkIcon);
}
}
});
}
// Handle do-you-prefer button clicks using event delegation (for both static and dynamic buttons)
const doYouPreferContainer = document.getElementById('welcome-do-you-prefer-container');
if (doYouPreferContainer) {
doYouPreferContainer.addEventListener('click', function (e) {
const button = e.target.closest('.welcome-do-you-prefer-option');
if (!button) return;
e.preventDefault();
// Toggle selected state using data-selected attribute
const isSelected = button.hasAttribute('data-selected');
if (isSelected) {
button.removeAttribute('data-selected');
button.style.backgroundColor = 'var(--sn-bg-soft)';
button.style.borderColor = 'rgba(107, 63, 160, 0.2)';
button.style.color = 'var(--sn-text-main)';
const icon = button.querySelector('.ri-check-line');
if (icon) icon.remove();
} else {
button.setAttribute('data-selected', 'true');
button.style.backgroundColor = 'var(--sn-purple)';
button.style.borderColor = 'var(--sn-purple)';
button.style.color = 'white';
if (!button.querySelector('.ri-check-line')) {
const checkIcon = document.createElement('i');
checkIcon.className = 'ri-check-line absolute top-1 left-1 text-white text-xs';
button.appendChild(checkIcon);
}
}
});
}
// Handle language pill selection
const languagesContainer = document.getElementById('welcome-languages-container');
// Initialize language pills with data-selected attribute based on initial state
const initialLanguages = @json($currentLanguages);
if (languagesContainer) {
Array.from(languagesContainer.querySelectorAll('.welcome-language-pill')).forEach(pill => {
const language = pill.getAttribute('data-language');
if (initialLanguages.includes(language)) {
pill.setAttribute('data-selected', 'true');
}
});
languagesContainer.addEventListener('click', function (e) {
const pill = e.target.closest('.welcome-language-pill');
if (!pill) return;
e.preventDefault();
// Toggle selected state using data-selected attribute
const isSelected = pill.hasAttribute('data-selected');
if (isSelected) {
pill.removeAttribute('data-selected');
pill.style.backgroundColor = 'var(--sn-bg-soft)';
pill.style.color = 'var(--sn-text-main)';
} else {
pill.setAttribute('data-selected', 'true');
pill.style.backgroundColor = 'var(--sn-purple)';
pill.style.color = 'white';
}
});
}
// Initialize Google Maps for welcome popup location
initWelcomeLocationAutocomplete();
});
</script>
@php
$googleMapsApiKey = config('services.google_maps.api_key');
@endphp
@if($googleMapsApiKey)
<script>
let welcomeLocationMap;
let welcomeLocationMarker;
function initWelcomeLocationAutocomplete() {
const input = document.getElementById('welcome-home-location');
if (input && typeof google !== 'undefined' && google.maps && google.maps.places) {
const autocomplete = new google.maps.places.Autocomplete(input, {
types: ['(cities)'],
fields: ['formatted_address', 'geometry', 'address_components']
});
autocomplete.addListener('place_changed', function () {
const place = autocomplete.getPlace();
if (place.geometry) {
const lat = place.geometry.location.lat();
const lng = place.geometry.location.lng();
document.getElementById('welcome-latitude').value = lat;
document.getElementById('welcome-longitude').value = lng;
// Extract country and city
let country = '';
let city = '';
place.address_components.forEach(component => {
if (component.types.includes('country')) {
country = component.long_name;
}
if (component.types.includes('locality')) {
city = component.long_name;
}
});
const countryInput = document.getElementById('welcome-country');
const cityInput = document.getElementById('welcome-city');
if (countryInput) countryInput.value = country;
if (cityInput) cityInput.value = city;
// Initialize or update map
initWelcomeLocationMap({ lat: lat, lng: lng });
}
});
}
}
function initWelcomeLocationMap(location) {
const mapElement = document.getElementById('welcome-location-map');
if (!mapElement) return;
if (!welcomeLocationMap) {
welcomeLocationMap = new google.maps.Map(mapElement, {
center: location || { lat: 0, lng: 0 },
zoom: location ? 12 : 2,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false
});
welcomeLocationMarker = new google.maps.Marker({
map: welcomeLocationMap,
position: location || { lat: 0, lng: 0 },
draggable: true,
animation: google.maps.Animation.DROP
});
welcomeLocationMarker.addListener('dragend', function () {
const position = welcomeLocationMarker.getPosition();
document.getElementById('welcome-latitude').value = position.lat();
document.getElementById('welcome-longitude').value = position.lng();
const geocoder = new google.maps.Geocoder();
geocoder.geocode({ location: position }, (results, status) => {
if (status === 'OK' && results[0]) {
document.getElementById('welcome-home-location').value = results[0].formatted_address;
let country = '';
let city = '';
results[0].address_components.forEach(component => {
if (component.types.includes('country')) {
country = component.long_name;
}
if (component.types.includes('locality')) {
city = component.long_name;
}
});
const countryInput = document.getElementById('welcome-country');
const cityInput = document.getElementById('welcome-city');
if (countryInput) countryInput.value = country;
if (cityInput) cityInput.value = city;
}
});
});
} else {
welcomeLocationMap.setCenter(location);
welcomeLocationMarker.setPosition(location);
}
mapElement.style.display = 'block';
// Trigger resize to fix any rendering issues when map was hidden
google.maps.event.trigger(welcomeLocationMap, "resize");
}
// Load Google Maps API if not already loaded
(function () {
if (document.querySelector('script[src*="maps.googleapis.com"]')) {
// Script already loaded
if (typeof google !== 'undefined' && google.maps) {
initWelcomeLocationAutocomplete();
@if($currentProfile && $currentProfile->latitude && $currentProfile->longitude)
initWelcomeLocationMap({ lat: {{ $currentProfile->latitude }}, lng: {{ $currentProfile->longitude }} });
@endif
}
} else {
const script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key={{ $googleMapsApiKey }}&loading=async&libraries=places&callback=initWelcomeMapCallback';
script.async = true;
script.defer = true;
document.head.appendChild(script);
}
})();
// Callback function for when Google Maps loads
window.initWelcomeMapCallback = function () {
if (typeof google !== 'undefined' && google.maps) {
initWelcomeLocationAutocomplete();
@if($currentProfile && $currentProfile->latitude && $currentProfile->longitude)
initWelcomeLocationMap({ lat: {{ $currentProfile->latitude }}, lng: {{ $currentProfile->longitude }} });
@endif
}
};
</script>
@else
<script>
console.warn('Google Maps API key is not configured. Home location autocomplete will not work.');
</script>
@endif
@endauth
@endsection