File: /home/u756937133/domains/swingersnest.com/public_html/resources/views/pages/profile/own.blade.php
@extends('layouts.feeds')
@section('title', ($user->username ?? $user->name) . ' - Profile - ' . config('app.name'))
@php
$preferences = $preferences ?? [];
$locationParts = [];
if ($profile && $profile->city)
$locationParts[] = $profile->city;
if ($profile && $profile->country)
$locationParts[] = $profile->country;
$locationStr = !empty($locationParts) ? implode(', ', $locationParts) : null;
$preferencesLabel = !empty($preferences) ? implode(', ', array_map('ucfirst', array_map(function ($p) {
return str_replace('_', ' ', $p);
}, $preferences))) : null;
$category = $profile && $profile->category ? $profile->category : 'single_male';
$defaultAvatar = match ($category) {
'couple' => asset('assets/couple_avatar.jpeg'),
'single_female' => asset('assets/female_avatar.jpeg'),
'single_male' => asset('assets/male_avatar.jpeg'),
'transgender', 'transsexual', 'non_binary' => asset('assets/transgender_avatar.jpg'),
default => asset('assets/male_avatar.jpeg'),
};
$profileAvatar = $user->profile_image ? asset('storage/' . $user->profile_image) : $defaultAvatar;
$displayName = $user->username ?? $user->name ?? 'User';
$coupleData = $coupleData ?? [];
$languages = $languages ?? [];
@endphp
@section('content')
{{-- Cover: soft purple/pink gradient (reference) --}}
<div
class="own-profile-cover relative h-36 sm:h-44 rounded-t-xl overflow-hidden bg-gradient-to-br from-purple-200 via-pink-100 to-purple-100 dark:from-sn-plum/80 dark:via-sn-plum/60 dark:to-sn-dark border-b border-sn-divider">
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_70%_20%,rgba(139,92,246,0.15),transparent_50%)]"></div>
@if($isOwnProfile)
<a href="{{ route('account.profile.settings') }}#profile-photo"
class="absolute bottom-3 right-3 w-9 h-9 rounded-full bg-white/95 text-sn-plum flex items-center justify-center shadow-md hover:bg-white transition-colors"
title="Edit profile">
<i class="ri-camera-line text-lg"></i>
</a>
@endif
</div>
{{-- Profile header: avatar | name + details + buttons | stats (reference: Irene Brooks + Follow / Get in touch +
Followers/Following/Likes) --}}
<div id="information"
class="own-profile-header bg-white dark:bg-gray-900 rounded-b-xl border border-sn-divider border-t-0 shadow-sm -mt-1 relative px-4 sm:px-6 pb-6">
<div class="flex flex-col lg:flex-row lg:items-start gap-6 lg:gap-8">
{{-- Left: Avatar + name block --}}
<div class="flex flex-col sm:flex-row sm:items-end gap-4 -mt-8 sm:-mt-10 relative z-10">
<div
class="w-20 h-20 sm:w-24 sm:h-24 lg:w-[160px] lg:h-[170px] rounded-2xl border-4 border-white dark:border-gray-800 shadow-lg overflow-hidden flex-shrink-0 bg-sn-soft">
@if($user->profile_image)
<img src="{{ asset('storage/' . $user->profile_image) }}" alt="{{ $displayName }}"
class="w-full h-full object-cover">
@else
<img src="{{ $profileAvatar }}" alt="{{ $displayName }}" class="w-full h-full object-cover">
@endif
</div>
<div class="flex-1 min-w-0">
<div class="flex flex-wrap items-center gap-2">
<h1 class="text-xl sm:text-xl font-bold text-sn-heading dark:text-white">{{ $displayName }}</h1>
<span
class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-sn-plum text-white text-[10px] leading-[1] font-semibold uppercase">Standard</span>
</div>
<p class="text-sm text-sn-muted dark:text-gray-400 mt-1">Standard Member</p>
{{-- Details line 1: category, icons only for ages (no Him/Her text), no looking for --}}
<div class="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-sn-main dark:text-gray-300">
@if($profile && $profile->category)
<span class="flex items-center gap-1.5 shrink-0"><i
class="ri-group-line text-sn-muted text-base"></i><span
class="capitalize">{{ str_replace('_', ' ', $profile->category) }}</span></span>
@endif
@if($isCouple)
@if($ageHim !== null)<span class="flex items-center gap-1.5 shrink-0"><i
class="ri-men-line text-blue-600 text-base" title="Him"></i>{{ $ageHim }}</span>@endif
@if($ageHer !== null)<span class="flex items-center gap-1.5 shrink-0"><i
class="ri-women-line text-pink-600 text-base" title="Her"></i>{{ $ageHer }}</span>@endif
@else
@if($age !== null)<span class="flex items-center gap-1.5 shrink-0"><i
class="ri-user-line text-sn-muted text-base"></i>{{ $age }}</span>@endif
@endif
</div>
@if($locationStr)
<div class="mt-1.5 flex items-center gap-1.5 text-sm text-sn-muted dark:text-gray-400">
<i class="ri-map-pin-line text-base shrink-0"></i>
<span>{{ $locationStr }} 0 KM</span>
</div>
@endif
</div>
</div>
</div>
{{-- Button row: Add request + Message + Validations, Likes, Visits, Photos (single line) --}}
<div
class="mt-4 pt-4 border-t border-sn-divider flex flex-nowrap justify-between items-center gap-4 sm:gap-6 overflow-x-auto">
@if(!$isOwnProfile && auth()->check())
<a href="#"
class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg bg-sn-heading dark:bg-gray-800 text-white text-sm font-semibold hover:opacity-90 transition-opacity shrink-0">Add
request</a>
<a href="{{ route('messages.show', $user->id) }}"
class="inline-flex items-center justify-center px-5 py-2.5 rounded-lg border-2 border-sn-heading dark:border-gray-600 text-sn-heading dark:text-gray-200 text-sm font-semibold hover:bg-sn-soft dark:hover:bg-gray-800 transition-colors shrink-0">Message</a>
<span class="h-6 w-px bg-sn-divider hidden sm:block shrink-0" aria-hidden="true"></span>
@endif
<div class="flex flex-nowrap justify-between w-full items-stretch gap-0 shrink-0 overflow-x-auto pb-1">
{{-- Card: icon left, number + label stacked right (sketch layout) --}}
<div
class="profile-stat-card w-[24%] border-gray-300 border rounded-xl bg-gray-50 dark:bg-sn-plum/35 px-[14px] py-[10px] flex items-center gap-3 min-w-0 shrink-0 transition-colors">
<span
class="profile-stat-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-violet-100 dark:bg-violet-500/20 text-violet-600 dark:text-violet-400 transition-transform duration-200 hover:scale-110 cursor-pointer shrink-0"
title="Validations" role="presentation">
<i class="ri-shield-check-line text-lg sm:text-xl" aria-hidden="true"></i>
</span>
<div class="flex flex-col items-start min-w-0">
<span
class="text-xl font-bold text-sn-heading dark:text-white tabular-num leading-tight">{{ number_format(0) }}</span>
<span
class="text-[10px] sm:text-xs text-sn-muted dark:text-gray-400 tracking-wide mt-0.5">Validations</span>
</div>
</div>
<div
class="profile-stat-card w-[24%] border-gray-300 border rounded-xl bg-gray-50 dark:bg-sn-plum/35 px-[14px] py-[10px] flex items-center gap-3 min-w-0 shrink-0 transition-colors">
<span
class="profile-stat-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-pink-100 dark:bg-pink-500/20 text-pink-600 dark:text-pink-400 transition-transform duration-200 hover:scale-110 cursor-pointer shrink-0"
title="Likes" role="presentation">
<i class="ri-heart-line text-lg sm:text-xl" aria-hidden="true"></i>
</span>
<div class="flex flex-col items-start min-w-0">
<span
class="text-xl font-bold text-sn-heading dark:text-white tabular-num leading-tight">{{ number_format($likesCount ?? 0) }}</span>
<span
class="text-[10px] sm:text-xs text-sn-muted dark:text-gray-400 tracking-wide mt-0.5">Likes</span>
</div>
</div>
<div
class="profile-stat-card w-[24%] border-gray-300 border rounded-xl bg-gray-50 dark:bg-sn-plum/35 px-[14px] py-[10px] flex items-center gap-3 min-w-0 shrink-0 transition-colors">
<span
class="profile-stat-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-sky-100 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400 transition-transform duration-200 hover:scale-110 cursor-pointer shrink-0"
title="Visits" role="presentation">
<i class="ri-eye-line text-lg sm:text-xl" aria-hidden="true"></i>
</span>
<div class="flex flex-col items-start min-w-0">
<span
class="text-xl font-bold text-sn-heading dark:text-white tabular-num leading-tight">{{ number_format($visitsCount ?? 0) }}</span>
<span
class="text-[10px] sm:text-xs text-sn-muted dark:text-gray-400 tracking-wide mt-0.5">Visits</span>
</div>
</div>
<div
class="profile-stat-card w-[24%] border-gray-300 border rounded-xl bg-gray-50 dark:bg-sn-plum/35 px-[14px] py-[10px] flex items-center gap-3 min-w-0 shrink-0 transition-colors">
<span
class="profile-stat-icon w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-emerald-100 dark:bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 transition-transform duration-200 hover:scale-110 cursor-pointer shrink-0"
title="Photos" role="presentation">
<i class="ri-image-line text-lg sm:text-xl" aria-hidden="true"></i>
</span>
<div class="flex flex-col items-start min-w-0">
<span
class="text-xl font-bold text-sn-heading dark:text-white tabular-num leading-tight">{{ number_format($photosCount ?? 0) }}</span>
<span
class="text-[10px] sm:text-xs text-sn-muted dark:text-gray-400 tracking-wide mt-0.5">Photos</span>
</div>
</div>
</div>
</div>
</div>
{{-- Tabs: Wall, Information, Photos, Events, Friends --}}
<nav class="own-profile-tabs mt-6 sm:mt-8 border-b border-sn-divider dark:border-gray-700"
aria-label="Profile sections">
<div class="flex items-center gap-4 sm:gap-6 overflow-x-auto">
<button type="button" data-profile-tab="wall"
class="profile-tab-btn active pb-3 border-b-2 border-transparent flex items-center gap-2 text-sm text-sn-heading dark:text-white whitespace-nowrap transition-colors">
<i class="ri-layout-grid-line text-lg shrink-0" aria-hidden="true"></i>
Wall
</button>
<button type="button" data-profile-tab="information"
class="profile-tab-btn pb-3 border-b-2 border-transparent flex items-center gap-2 text-sm font-normal text-sn-main dark:text-gray-400 hover:text-sn-heading dark:hover:text-white whitespace-nowrap transition-colors">
<i class="ri-information-line text-lg text-sn-muted dark:text-gray-500 shrink-0" aria-hidden="true"></i>
Information
</button>
<button type="button" data-profile-tab="album"
class="profile-tab-btn pb-3 border-b-2 border-transparent flex items-center gap-2 text-sm font-normal text-sn-main dark:text-gray-400 hover:text-sn-heading dark:hover:text-white whitespace-nowrap transition-colors">
<i class="ri-folder-image-line text-lg text-sn-muted dark:text-gray-500 shrink-0" aria-hidden="true"></i>
Album
</button>
<a href="{{ route('dashboard.friends') }}"
class="pb-3 border-b-2 border-transparent flex items-center gap-2 text-sm font-normal text-sn-main dark:text-gray-400 hover:text-sn-heading dark:hover:text-white whitespace-nowrap transition-colors">
<i class="ri-group-line text-lg text-sn-muted dark:text-gray-500 shrink-0" aria-hidden="true"></i>
Friends
</a>
</div>
</nav>
@if(!empty($profileUnderReview) && $isOwnProfile)
<div
class="mt-4 flex items-center gap-3 px-4 py-3 rounded-xl bg-amber-50 border border-amber-200 text-amber-800 text-sm">
<i class="ri-error-warning-line text-xl flex-shrink-0"></i>
<p>This profile is currently under review. The warning will be removed once the verifications required are
completed.</p>
</div>
@endif
{{-- Tab panel: Wall (default) --}}
<div data-profile-panel="wall" class="profile-tab-panel mt-4">
@if($isOwnProfile)
{{-- Create post (only on own profile) --}}
<div
class="feeds-create-post mt-4 mb-3 bg-white rounded-xl border border-sn-divider shadow-sm overflow-hidden relative">
<div class="p-4 feeds-create-post-trigger flex items-center gap-3 cursor-pointer rounded-xl transition-colors hover:bg-sn-lavender/30"
id="feeds-create-post-trigger" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true"
aria-label="Open post composer">
<img src="{{ $profileAvatar }}" alt=""
class="w-10 h-10 rounded-full object-cover flex-shrink-0 border-2 border-sn-plum/30">
<div
class="flex-1 min-w-0 px-4 py-2.5 rounded-lg border border-sn-divider bg-sn-soft text-sn-muted text-sm">
Publish…
</div>
</div>
<div id="feeds-create-post-popup"
class="feeds-create-post-popup hidden border-t border-sn-divider overflow-hidden transition-all duration-200 bg-sn-soft">
<form id="feeds-create-post-form" class="flex flex-col gap-0">
@csrf
<input type="hidden" name="visibility" id="feeds-post-visibility" value="public">
<input type="hidden" name="feeling" id="feeds-post-feeling" value="">
<div class="p-4 pt-3 flex flex-col gap-3">
<div class="flex items-center justify-between gap-2 flex-wrap">
<div class="flex items-center gap-2 min-w-0">
<img src="{{ $profileAvatar }}" alt=""
class="w-9 h-9 rounded-full object-cover flex-shrink-0 border-2 border-sn-plum/30">
<span class="text-sm font-semibold truncate text-sn-heading">{{ $displayName }}</span>
</div>
</div>
<textarea name="content" id="feeds-publish-input" placeholder="What's on your mind?"
class="w-full px-3 py-2.5 rounded-lg border border-sn-divider bg-white text-sn-main text-sm placeholder-sn-muted focus:outline-none focus:ring-2 focus:ring-sn-plum resize-none min-h-[120px]"
maxlength="5000" rows="3"></textarea>
<div id="feeds-post-media-preview"
class="hidden flex flex-wrap gap-2 rounded-lg overflow-hidden border border-sn-divider"></div>
<div class="flex flex-wrap items-center gap-1 sm:gap-2">
<button type="button"
class="feeds-add-photo flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-sn-muted bg-sn-lavender/50 hover:bg-sn-lavender transition-colors"
title="Upload photo or video" aria-label="Upload media">
<i class="ri-image-line text-lg"></i>
<span class="text-xs hidden sm:inline">Photo/Video</span>
</button>
<input type="file" name="media[]" id="feeds-post-image" class="hidden"
accept="image/jpeg,image/jpg,image/png,image/gif,image/webp,video/mp4,video/webm" multiple>
<button type="button" id="feeds-add-location-btn"
class="flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-sn-muted bg-sn-lavender/50 hover:bg-sn-lavender transition-colors"
title="Add location" aria-label="Add location">
<i class="ri-map-pin-line text-lg"></i>
<span class="text-xs hidden sm:inline">Location</span>
</button>
<input type="text" name="location" id="feeds-post-location" class="hidden"
placeholder="Add a place" value="">
<div class="relative feeds-feeling-wrap">
<button type="button" id="feeds-feeling-btn"
class="flex items-center gap-1.5 px-2.5 py-2 rounded-lg text-sn-muted bg-sn-lavender/50 hover:bg-sn-lavender transition-colors"
title="Feeling / emotion" aria-expanded="false" aria-haspopup="true"
aria-label="How are you feeling?">
<i class="ri-emotion-happy-line text-lg"></i>
<span class="text-xs hidden sm:inline">Feeling</span>
<i class="ri-arrow-down-s-line text-sm"></i>
</button>
<div id="feeds-feeling-menu"
class="hidden z-10 absolute left-0 -top-[180px] mt-1 z-30 rounded-xl border border-sn-divider bg-white py-2 shadow-lg min-w-[180px]"
role="listbox">
<div class="grid grid-cols-4 gap-1 px-2">
<button type="button"
class="feeds-feeling-opt flex flex-col items-center gap-0.5 p-2 rounded-lg hover:bg-sn-lavender/50 transition-colors"
data-value="happy" title="Happy"><i
class="ri-emotion-happy-line text-2xl text-sn-plum"></i><span
class="text-[10px]">Happy</span></button>
<button type="button"
class="feeds-feeling-opt flex flex-col items-center gap-0.5 p-2 rounded-lg hover:bg-sn-lavender/50 transition-colors"
data-value="love" title="Love"><i
class="ri-heart-line text-2xl text-rose-500"></i><span
class="text-[10px]">Love</span></button>
<button type="button"
class="feeds-feeling-opt flex flex-col items-center gap-0.5 p-2 rounded-lg hover:bg-sn-lavender/50 transition-colors"
data-value="feels_good" title="Feels good"><i
class="ri-thumb-up-line text-2xl text-sn-plum"></i><span
class="text-[10px]">Feels good</span></button>
<button type="button"
class="feeds-feeling-opt flex flex-col items-center gap-0.5 p-2 rounded-lg hover:bg-sn-lavender/50 transition-colors"
data-value="fire" title="On fire"><i
class="ri-fire-line text-2xl text-orange-500"></i><span
class="text-[10px]">Fire</span></button>
<button type="button"
class="feeds-feeling-opt flex flex-col items-center gap-0.5 p-2 rounded-lg hover:bg-sn-lavender/50 transition-colors"
data-value="sexy" title="Feeling sexy"><i
class="ri-heart-3-line text-2xl text-pink-600"></i><span
class="text-[10px]">Sexy</span></button>
<button type="button"
class="feeds-feeling-opt flex flex-col items-center gap-0.5 p-2 rounded-lg hover:bg-sn-lavender/50 transition-colors"
data-value="excited" title="Excited"><i
class="ri-star-smile-line text-2xl text-sn-gold"></i><span
class="text-[10px]">Excited</span></button>
</div>
</div>
</div>
<input type="hidden" id="feeds-post-tagged-ids" value="" data-name="tagged_user_ids">
</div>
<div id="feeds-post-location-wrap" class="hidden">
<input type="text" id="feeds-post-location-input" placeholder="Enter a place"
class="w-full px-3 py-2 rounded-lg border border-sn-divider text-sm text-sn-main bg-white">
</div>
<div class="flex items-center justify-end gap-2 pt-1">
<button type="button" id="feeds-create-post-cancel"
class="btn btn-tertiary px-3 py-2 rounded-lg text-sm font-medium">Cancel</button>
<button type="submit" id="feeds-publish-btn"
class="px-4 py-2 rounded-lg text-sm font-semibold text-white bg-sn-plum hover:opacity-90 transition-opacity disabled:opacity-60 disabled:cursor-not-allowed">Publish</button>
</div>
</div>
</form>
</div>
</div>
@endif
{{-- Story slider: Create Story (own profile only) + profile user's stories --}}
<div class="feeds-story-slider mb-4">
<div class="flex gap-4 pb-2 overflow-x-auto feeds-story-track">
@if($isOwnProfile)
<div class="flex-shrink-0">
<button type="button"
class="feeds-story-create ml-3 flex flex-col items-center gap-2 group w-[112px] text-left">
<div
class="w-[121px] h-[215px] rounded-xl flex flex-col items-center justify-center border-2 border-dashed border-sn-plum/35 bg-sn-lavender/50 transition-colors relative overflow-hidden">
<div class="absolute inset-0 flex items-center justify-center">
<i class="ri-add-line text-4xl z-10 text-sn-plum"></i>
</div>
<span
class="absolute bottom-2 left-0 right-0 text-center text-xs font-medium text-sn-main">Create
Story</span>
</div>
</button>
</div>
@endif
@foreach($stories ?? [] as $i => $s)
<button type="button" class="feeds-story-card flex flex-col flex-shrink-0 group w-[112px] text-left"
data-story-index="{{ $i }}">
<div class="w-[121px] h-[215px] rounded-xl overflow-hidden relative border-2 border-sn-plum/40">
@if(!empty($s['image']))
<img src="{{ $s['image'] }}" alt="{{ $s['username'] ?? 'Story' }}"
class="w-full h-full object-cover">
@else
<div class="w-full h-full bg-gradient-to-b from-sn-plum to-pink-600"></div>
@endif
<div class="absolute top-1.5 left-1.5 w-8 h-8 rounded-full overflow-hidden ring-2 ring-white">
<img src="{{ $s['avatar'] ?? 'https://ui-avatars.com/api/?name=User&background=6B3FA0&color=fff' }}"
alt="" class="w-full h-full object-cover">
</div>
<span
class="absolute bottom-2 left-0 right-0 text-center text-xs font-medium text-white truncate px-1 drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]">{{ $s['username'] ?? 'Story' }}</span>
</div>
</button>
@endforeach
</div>
</div>
{{-- Story modal (for viewing stories) --}}
<div id="feeds-story-modal"
class="feeds-story-modal fixed inset-0 z-50 flex items-center justify-center p-4 bg-sn-dark/85">
<button type="button" id="feeds-story-prev"
class="absolute left-4 top-1/2 -translate-y-1/2 z-20 flex items-center justify-center w-12 h-12 rounded-full bg-white/20 text-white transition-all hover:opacity-90 hover:scale-110"
aria-label="Previous">
<i class="ri-arrow-left-s-line text-2xl"></i>
</button>
<button type="button" id="feeds-story-next"
class="absolute right-4 top-1/2 -translate-y-1/2 z-20 flex items-center justify-center w-12 h-12 rounded-full bg-white/20 text-white transition-all hover:opacity-90 hover:scale-110"
aria-label="Next">
<i class="ri-arrow-right-s-line text-2xl"></i>
</button>
<div
class="feeds-story-modal-inner relative w-full h-full max-h-[100vh] max-w-[30%] rounded-2xl overflow-hidden flex flex-col shadow-2xl">
<div class="absolute top-0 left-0 right-0 z-10 p-4 space-y-3">
<div id="feeds-story-progress-bars" class="flex gap-1"></div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<img id="feeds-story-modal-avatar" src="" alt=""
class="w-10 h-10 rounded-full object-cover ring-2 ring-white">
<span id="feeds-story-modal-username"
class="text-sm font-semibold text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]"></span>
</div>
<div class="flex items-center gap-1">
<button type="button" id="feeds-story-mute"
class="flex items-center justify-center w-10 h-10 rounded-full text-white transition-colors hover:bg-white/20"
aria-label="Mute">
<i id="feeds-story-mute-icon" class="ri-volume-mute-line text-xl"></i>
</button>
<button type="button" id="feeds-story-pause"
class="flex items-center justify-center w-10 h-10 rounded-full text-white transition-colors hover:bg-white/20"
aria-label="Pause">
<i id="feeds-story-pause-icon" class="ri-pause-line text-xl"></i>
</button>
<button type="button" id="feeds-story-close"
class="flex items-center justify-center w-10 h-10 rounded-full text-white transition-colors hover:bg-white/20"
aria-label="Close">
<i class="ri-close-line text-2xl"></i>
</button>
</div>
</div>
</div>
<div id="feeds-story-modal-bg" class="absolute inset-0 bg-gradient-to-b from-sn-plum to-pink-600"></div>
<img id="feeds-story-modal-image" src="" alt="" class="absolute inset-0 w-full h-full object-cover hidden">
<video id="feeds-story-modal-video" class="absolute inset-0 w-full h-full object-contain bg-sn-dark hidden"
playsinline muted></video>
<div class="absolute bottom-4 right-4 z-10 flex flex-col items-center gap-2">
<button type="button" id="feeds-story-like"
class="flex items-center gap-1.5 px-3 py-2 rounded-full bg-sn-dark/30 text-white transition-colors">
<i class="ri-thumb-up-line text-xl"></i>
<span id="feeds-story-like-count">0</span>
</button>
<button type="button"
class="flex items-center justify-center w-10 h-10 rounded-full bg-sn-dark/30 text-white transition-colors hover:bg-sn-dark/50"
aria-label="More options">
<i class="ri-more-2-fill text-xl"></i>
</button>
</div>
</div>
</div>
<script type="application/json" id="feeds-stories-json">{!! json_encode($stories ?? []) !!}</script>
{{-- Posts list --}}
<div id="feeds-posts-list" class="space-y-4">
@forelse($posts as $post)
@include('pages.feeds.partials.post-card', ['post' => $post])
@empty
<div id="feeds-empty-state" class="text-center py-12 px-4 rounded-xl bg-sn-soft text-sn-muted">
<p class="text-sm">No posts yet. Share something to get started!</p>
</div>
@endforelse
</div>
</div>{{-- /profile-tab-panel wall --}}
{{-- Tab panel: Information (compact sections, Him/Her side-by-side) --}}
<div data-profile-panel="information" class="profile-tab-panel mt-4 hidden" id="profile-information-section">
@php
$relStatusLabels = ['single' => 'Single', 'relationship' => 'In a Relationship', 'married' => 'Married', 'open' => 'Open Relationship'];
$experienceLabels = ['beginner' => 'Beginner', 'intermediate' => 'Intermediate', 'experienced' => 'Experienced', 'expert' => 'Expert'];
$travelLabels = ['can_host' => 'Can Host', 'can_travel' => 'Can Travel', 'both' => 'Both', 'neither' => 'Neither'];
$smokingLabels = ['yes' => 'Yes', 'no' => 'No', 'never' => 'Never', 'occasionally' => 'Occasionally', 'regularly' => 'Regularly'];
$sexualityLabels = ['heterosexual' => 'Straight', 'bisexual' => 'Bi-sexual', 'homosexual' => 'Gay', 'lesbian' => 'Lesbian', 'pansexual' => 'Pansexual', 'bicurious' => 'Bi-curious'];
$cd = $coupleData ?? [];
$p = $profile ?? null;
@endphp
<div class="space-y-3">
{{-- Couple / General --}}
<div
class="rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-800/50 overflow-hidden">
<div
class="flex items-center justify-between gap-2 px-3 py-2 border-b border-sn-divider dark:border-gray-600">
<h3
class="flex items-center gap-1.5 text-xs font-semibold text-sn-heading dark:text-white uppercase tracking-wide">
<i class="ri-group-line text-sn-muted"></i> {{ $isCouple ? 'Couple' : 'General' }}</h3>
@if($isOwnProfile)<a href="{{ route('account.profile.settings') }}#general-info"
class="flex items-center gap-1 text-xs text-sn-plum hover:underline"><i class="ri-pencil-line"></i>
Edit</a>@endif
</div>
<div class="px-3 py-2 space-y-1">
@if($p)
@if($p->relationship_status)
<div
class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 dark:border-gray-600/50 text-xs">
<span class="text-sn-muted dark:text-gray-400 shrink-0">Relationship</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $relStatusLabels[$p->relationship_status] ?? ucfirst($p->relationship_status) }}</span>
</div>@endif
@if($p->experience)
<div
class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 dark:border-gray-600/50 text-xs">
<span class="text-sn-muted dark:text-gray-400 shrink-0">Experience</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $experienceLabels[$p->experience] ?? ucfirst($p->experience) }}</span>
</div>@endif
@if($p->travel_options)
<div
class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 dark:border-gray-600/50 text-xs">
<span class="text-sn-muted dark:text-gray-400 shrink-0">Travel options</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $travelLabels[$p->travel_options] ?? ucfirst(str_replace('_', ' ', $p->travel_options)) }}</span>
</div>@endif
@if(!empty($languages))
<div
class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 dark:border-gray-600/50 text-xs">
<span class="text-sn-muted dark:text-gray-400 shrink-0">Languages</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ is_array($languages) ? implode(', ', array_map('ucfirst', $languages)) : $languages }}</span>
</div>@endif
<div class="flex justify-between gap-2 py-1 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Member since</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $user->created_at->format('d F Y') }}</span>
</div>
@else
<div class="py-2 text-xs text-sn-muted dark:text-gray-400">No details yet.</div>
@endif
</div>
</div>
{{-- Location --}}
<div
class="rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-800/50 overflow-hidden">
<div
class="flex items-center justify-between gap-2 px-3 py-2 border-b border-sn-divider dark:border-gray-600">
<h3
class="flex items-center gap-1.5 text-xs font-semibold text-sn-heading dark:text-white uppercase tracking-wide">
<i class="ri-map-pin-line text-sn-muted"></i> Location</h3>
@if($isOwnProfile)<a href="{{ route('account.profile.settings') }}#location"
class="flex items-center gap-1 text-xs text-sn-plum hover:underline"><i class="ri-pencil-line"></i>
Edit</a>@endif
</div>
<div class="px-3 py-2">
@if($locationStr)
<div class="flex items-center gap-1.5 text-xs text-sn-main dark:text-gray-200"><i
class="ri-map-pin-line text-sn-muted shrink-0"></i>{{ $locationStr }}</div>
@else
<div class="text-xs text-sn-muted dark:text-gray-400">No location set.</div>
@endif
</div>
</div>
{{-- Searching for (preferences) --}}
<div
class="rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-800/50 overflow-hidden">
<div
class="flex items-center justify-between gap-2 px-3 py-2 border-b border-sn-divider dark:border-gray-600">
<h3
class="flex items-center gap-1.5 text-xs font-semibold text-sn-heading dark:text-white uppercase tracking-wide">
<i class="ri-search-line text-sn-muted"></i> Searching for</h3>
@if($isOwnProfile)<a href="{{ route('account.profile.settings') }}#category"
class="flex items-center gap-1 text-xs text-sn-plum hover:underline"><i class="ri-pencil-line"></i>
Edit</a>@endif
</div>
<div class="px-3 py-2 text-xs">
@if(!empty($preferences))
<p class="text-sn-main dark:text-gray-200">
{{ $preferencesLabel ?? implode(', ', array_map('ucfirst', array_map(function ($x) {
return str_replace('_', ' ', $x); }, $preferences))) }}
</p>
@else
<p class="text-sn-muted dark:text-gray-400">Not specified.</p>
@endif
</div>
</div>
{{-- Him & Her (one section) --}}
@if($isCouple)
<div
class="rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-800/50 overflow-hidden">
<div
class="flex items-center justify-between gap-2 px-3 py-2 border-b border-sn-divider dark:border-gray-600">
<h3
class="flex items-center gap-1.5 text-xs font-semibold text-sn-heading dark:text-white uppercase tracking-wide">
<i class="ri-group-line text-sn-muted"></i> Him & Her</h3>
@if($isOwnProfile)<a href="{{ route('account.profile.settings') }}#general-info"
class="flex items-center gap-1 text-xs text-sn-plum hover:underline"><i class="ri-pencil-line"></i>
Edit</a>@endif
</div>
<div class="px-3 py-2">
<div
class="flex items-center gap-1.5 text-[11px] font-semibold text-sn-muted dark:text-gray-400 uppercase tracking-wide mt-1 mb-1.5">
<i class="ri-men-line text-blue-600"></i> Him</div>
<div class="space-y-1">
@if(!empty($cd['sexuality_him']))
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Sexuality</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $sexualityLabels[$cd['sexuality_him']] ?? ucfirst($cd['sexuality_him']) }}</span>
</div>@endif
@if(!empty($cd['smoking_him']))
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Smokes</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $smokingLabels[$cd['smoking_him']] ?? ucfirst($cd['smoking_him']) }}</span>
</div>@endif
@foreach(['weight_him' => 'Weight', 'height_him' => 'Height', 'body_type_him' => 'Body', 'hair_color_him' => 'Hair', 'eye_color_him' => 'Eyes', 'tattoos_him' => 'Tattoos', 'piercings_him' => 'Piercings'] as $k => $label)
@if(!empty($cd[$k]))
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">{{ $label }}</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ is_string($cd[$k]) ? ucfirst($cd[$k]) : $cd[$k] }}</span>
</div>@endif
@endforeach
@if(empty($cd['sexuality_him']) && empty($cd['smoking_him']))
<div class="py-1.5 text-xs text-sn-muted dark:text-gray-400">No details yet.</div>@endif
</div>
<div
class="flex items-center gap-1.5 text-[11px] font-semibold text-sn-muted dark:text-gray-400 uppercase tracking-wide mt-3 mb-1.5">
<i class="ri-women-line text-pink-600"></i> Her</div>
<div class="space-y-1">
@if(!empty($cd['sexuality_her']))
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Sexuality</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $sexualityLabels[$cd['sexuality_her']] ?? ucfirst($cd['sexuality_her']) }}</span>
</div>@endif
@if(!empty($cd['smoking_her']))
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Smokes</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $smokingLabels[$cd['smoking_her']] ?? ucfirst($cd['smoking_her']) }}</span>
</div>@endif
@foreach(['weight_her' => 'Weight', 'height_her' => 'Height', 'body_type_her' => 'Body', 'hair_color_her' => 'Hair', 'eye_color_her' => 'Eyes', 'tattoos_her' => 'Tattoos', 'piercings_her' => 'Piercings'] as $k => $label)
@if(!empty($cd[$k]))
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">{{ $label }}</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ is_string($cd[$k]) ? ucfirst($cd[$k]) : $cd[$k] }}</span>
</div>@endif
@endforeach
@if(empty($cd['sexuality_her']) && empty($cd['smoking_her']))
<div class="py-1.5 text-xs text-sn-muted dark:text-gray-400">No details yet.</div>@endif
</div>
</div>
</div>
@else
{{-- Single: one block with profile details --}}
<div
class="rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-800/50 overflow-hidden">
<div
class="flex items-center justify-between gap-2 px-3 py-2 border-b border-sn-divider dark:border-gray-600">
<h3
class="flex items-center gap-1.5 text-xs font-semibold text-sn-heading dark:text-white uppercase tracking-wide">
<i class="ri-user-line text-sn-muted"></i> About</h3>
@if($isOwnProfile)<a href="{{ route('account.profile.settings') }}#general-info"
class="flex items-center gap-1 text-xs text-sn-plum hover:underline"><i class="ri-pencil-line"></i>
Edit</a>@endif
</div>
<div class="px-3 py-2 space-y-1">
@if($p)
@if($p->sexuality)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Sexuality</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $sexualityLabels[$p->sexuality] ?? ucfirst($p->sexuality) }}</span>
</div>@endif
@if($p->smoking)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Smokes</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $smokingLabels[$p->smoking] ?? ucfirst($p->smoking) }}</span>
</div>@endif
@if($p->weight)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Weight</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $p->weight }}</span></div>
@endif
@if($p->height)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Height</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ $p->height }}</span></div>
@endif
@if($p->body_type)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Body</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ ucfirst($p->body_type) }}</span>
</div>@endif
@if($p->hair_color)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Hair</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ ucfirst($p->hair_color) }}</span>
</div>@endif
@if($p->eye_color)
<div class="flex justify-between gap-2 py-1 border-b border-sn-divider/50 text-xs"><span
class="text-sn-muted dark:text-gray-400 shrink-0">Eyes</span><span
class="font-medium text-sn-main dark:text-gray-200 text-right">{{ ucfirst($p->eye_color) }}</span>
</div>@endif
@php $hasAbout = $p->sexuality || $p->smoking || $p->weight || $p->height || $p->body_type || $p->hair_color || $p->eye_color; @endphp
@if(!$hasAbout)
<div class="py-2 text-xs text-sn-muted dark:text-gray-400">No details yet.</div>@endif
@else
<div class="py-2 text-xs text-sn-muted dark:text-gray-400">No details yet.</div>
@endif
</div>
</div>
@endif
</div>
</div>{{-- /profile-tab-panel information --}}
{{-- Tab panel: Album (Cover, Photos, Profile – 3 default slots, clickable, empty state with icon) --}}
<div data-profile-panel="album" class="profile-tab-panel mt-4 hidden" id="profile-album-section">
@if($isOwnProfile)
<div class="flex justify-end mb-3">
<button type="button" id="profile-album-add-btn"
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-sn-plum text-white text-sm font-semibold hover:opacity-90 transition-opacity">
<i class="ri-add-line text-lg"></i>
Add album
</button>
</div>
@endif
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
@php
$defaultSlots = [
'Cover' => $albumCover ?? null,
'Video' => $albumPhotos ?? null,
'Profile' => $albumProfile ?? null,
];
@endphp
@foreach($defaultSlots as $slotName => $album)
<a href="{{ $album ? route('albums.show', $album->id) : ($isOwnProfile ? '#' : 'javascript:void(0)') }}"
class="profile-album-card {{ !$album && $isOwnProfile ? 'profile-album-create' : '' }} block rounded-xl border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-800/50 overflow-hidden transition-colors hover:border-sn-plum/50 {{ !$album ? 'flex flex-col items-center justify-center min-h-[180px]' : '' }}"
{{ $album ? '' : ($isOwnProfile ? 'data-album-create-name="' . $slotName . '"' : 'onclick="return false;"') }}>
@if($album && $album->images->isNotEmpty())
<div class="aspect-[4/3] bg-sn-soft dark:bg-gray-700 overflow-hidden">
<img src="{{ asset('storage/' . $album->images->first()->image_path) }}" alt="{{ $album->name }}"
class="w-full h-full object-cover">
</div>
<div class="p-3 border-t border-sn-divider dark:border-gray-600">
<p class="text-sm font-semibold text-sn-heading dark:text-white truncate">{{ $album->name }}</p>
<p class="text-xs text-sn-muted dark:text-gray-400 mt-0.5">{{ $album->image_count }}
{{ $album->image_count === 1 ? 'photo' : 'photos' }}</p>
</div>
@elseif($album)
<div class="aspect-[4/3] bg-sn-soft dark:bg-gray-700 flex items-center justify-center">
<i class="ri-image-line text-4xl text-sn-muted dark:text-gray-500"></i>
</div>
<div class="p-3 border-t border-sn-divider dark:border-gray-600">
<p class="text-sm font-semibold text-sn-heading dark:text-white truncate">{{ $album->name }}</p>
<p class="text-xs text-sn-muted dark:text-gray-400 mt-0.5">0 photos</p>
</div>
@else
<div class="p-6 text-center">
<p class="text-sm font-medium text-sn-heading dark:text-white">{{ $slotName }}</p>
<p class="text-xs text-sn-muted dark:text-gray-400 mt-1">No {{ $slotName }} found</p>
@if($isOwnProfile)
@endif
</div>
@endif
</a>
@endforeach
</div>
</div>{{-- /profile-tab-panel album --}}
{{-- Create album modal (own profile only) --}}
@if($isOwnProfile && auth()->check())
<div id="profile-create-album-modal" class="fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black/50"
aria-hidden="true">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-sm w-full p-4" onclick="event.stopPropagation()">
<h3 class="text-lg font-semibold text-sn-heading dark:text-white mb-3">Create album</h3>
<form id="profile-create-album-form">
@csrf
<div class="space-y-3">
<div>
<label class="block text-xs font-medium text-sn-muted dark:text-gray-400 mb-1">Name</label>
<input type="text" name="name"
class="w-full rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-700 text-sn-main dark:text-gray-200 text-sm px-3 py-2 focus:ring-2 focus:ring-sn-plum"
placeholder="e.g. Cover, Photos, Profile" required maxlength="255" autocomplete="off">
</div>
<div>
<label class="block text-xs font-medium text-sn-muted dark:text-gray-400 mb-2">Visibility</label>
<div class="flex gap-2">
<label
class="flex-1 flex items-center justify-center gap-2 py-2.5 px-3 rounded-lg border-2 cursor-pointer transition-colors profile-album-visibility-choice border-sn-plum bg-sn-plum/10 text-sn-plum dark:bg-sn-plum/20 dark:text-sn-plum dark:border-sn-plum"
data-value="public">
<i class="ri-global-line text-base"></i>
<span class="text-sm font-medium">Public</span>
</label>
<label
class="flex-1 flex items-center justify-center gap-2 py-2.5 px-3 rounded-lg border-2 cursor-pointer transition-colors profile-album-visibility-choice border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-700 text-sn-muted dark:text-gray-400 hover:border-sn-plum/50"
data-value="private">
<i class="ri-lock-line text-base"></i>
<span class="text-sm font-medium">Private</span>
</label>
</div>
<input type="hidden" name="visibility" id="profile-album-visibility" value="public">
</div>
<div id="profile-album-password-wrap" class="hidden">
<label class="block text-xs font-medium text-sn-muted dark:text-gray-400 mb-1">Password</label>
<input type="password" name="password" id="profile-album-password"
class="w-full rounded-lg border border-sn-divider dark:border-gray-600 bg-white dark:bg-gray-700 text-sn-main dark:text-gray-200 text-sm px-3 py-2 focus:ring-2 focus:ring-sn-plum"
placeholder="Set password for private album" minlength="3" autocomplete="new-password">
</div>
</div>
<div class="flex gap-2 mt-4">
<button type="button" id="profile-create-album-cancel"
class="flex-1 px-3 py-2 rounded-lg border border-sn-divider text-sn-main dark:text-gray-300 text-sm font-medium">Cancel</button>
<button type="submit"
class="flex-1 px-3 py-2 rounded-lg bg-sn-plum text-white text-sm font-semibold hover:opacity-90">Create</button>
</div>
</form>
</div>
</div>
@endif
<style>
.profile-tab-btn.active {
font-weight: 700;
border-bottom-color: var(--color-sn-heading);
color: var(--color-sn-heading);
}
.dark .profile-tab-btn.active {
border-bottom-color: #fff;
color: #fff;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
var tabs = document.querySelectorAll('.profile-tab-btn');
var panels = document.querySelectorAll('.profile-tab-panel');
function showPanel(name) {
panels.forEach(function (panel) {
panel.classList.toggle('hidden', panel.getAttribute('data-profile-panel') !== name);
});
tabs.forEach(function (tab) {
tab.classList.toggle('active', tab.getAttribute('data-profile-tab') === name);
});
if (name === 'information') { window.location.hash = 'information'; }
else if (name === 'album') { window.location.hash = 'album'; }
else if (window.location.hash && window.location.hash !== '#wall') { history.replaceState(null, '', window.location.pathname + window.location.search); }
}
tabs.forEach(function (tab) {
tab.addEventListener('click', function () {
var name = this.getAttribute('data-profile-tab');
if (name) showPanel(name);
});
});
if (window.location.hash === '#information') showPanel('information');
else if (window.location.hash === '#album') showPanel('album');
// Create album: empty card click (own profile)
document.querySelectorAll('.profile-album-create').forEach(function (el) {
el.addEventListener('click', function (e) {
var name = this.getAttribute('data-album-create-name');
if (!name) return;
e.preventDefault();
createAlbumAndGo(name);
});
});
// Add album button -> open modal
var addBtn = document.getElementById('profile-album-add-btn');
var modal = document.getElementById('profile-create-album-modal');
var cancelBtn = document.getElementById('profile-create-album-cancel');
var form = document.getElementById('profile-create-album-form');
if (addBtn && modal) {
addBtn.addEventListener('click', function () {
modal.classList.remove('hidden');
modal.classList.add('flex');
});
}
if (modal) {
modal.addEventListener('click', function () { modal.classList.add('hidden'); modal.classList.remove('flex'); });
}
if (cancelBtn && modal) {
cancelBtn.addEventListener('click', function () { modal.classList.add('hidden'); modal.classList.remove('flex'); });
}
// Visibility choice: Public / Private (show password only when Private)
var visibilityInput = document.getElementById('profile-album-visibility');
var passwordWrap = document.getElementById('profile-album-password-wrap');
var passwordInput = document.getElementById('profile-album-password');
var choiceLabels = document.querySelectorAll('.profile-album-visibility-choice');
function setVisibility(value) {
if (visibilityInput) visibilityInput.value = value;
choiceLabels.forEach(function (label) {
var isSelected = (label.getAttribute('data-value') === value);
if (isSelected) {
label.classList.add('border-sn-plum', 'bg-sn-plum/10', 'text-sn-plum', 'dark:bg-sn-plum/20', 'dark:text-sn-plum', 'dark:border-sn-plum');
label.classList.remove('border-sn-divider', 'bg-white', 'text-sn-muted', 'dark:border-gray-600', 'dark:bg-gray-700', 'dark:text-gray-400');
} else {
label.classList.remove('border-sn-plum', 'bg-sn-plum/10', 'text-sn-plum', 'dark:bg-sn-plum/20', 'dark:text-sn-plum', 'dark:border-sn-plum');
label.classList.add('border-sn-divider', 'bg-white', 'text-sn-muted', 'dark:border-gray-600', 'dark:bg-gray-700', 'dark:text-gray-400');
}
});
if (value === 'private') {
if (passwordWrap) passwordWrap.classList.remove('hidden');
if (passwordInput) passwordInput.setAttribute('required', 'required');
} else {
if (passwordWrap) passwordWrap.classList.add('hidden');
if (passwordInput) { passwordInput.removeAttribute('required'); passwordInput.value = ''; }
}
}
choiceLabels.forEach(function (label) {
label.addEventListener('click', function () { setVisibility(this.getAttribute('data-value')); });
});
if (form) {
form.addEventListener('submit', function (e) {
e.preventDefault();
var name = (form.querySelector('[name="name"]') || {}).value.trim();
if (!name) { alert('Please enter an album name.'); return; }
var visibility = (form.querySelector('[name="visibility"]') || {}).value;
var password = (visibility === 'private' && passwordInput) ? passwordInput.value : '';
createAlbumAndGo(name, password, function () {
modal.classList.add('hidden');
modal.classList.remove('flex');
});
});
}
});
function createAlbumAndGo(name, password, done) {
var formData = new FormData();
var token = document.querySelector('meta[name="csrf-token"]') && document.querySelector('meta[name="csrf-token"]').getAttribute('content');
formData.append('_token', token || '{{ csrf_token() }}');
formData.append('name', name);
if (password) formData.append('password', password);
fetch('{{ route("albums.create") }}', { method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
.then(function (r) { return r.json(); })
.then(function (data) {
if (data.success && data.album && data.album.id) {
if (typeof done === 'function') done();
window.location.href = '{{ url("/albums") }}/' + data.album.id;
} else {
alert(data.message || 'Could not create album');
}
})
.catch(function () { alert('Something went wrong.'); });
}
</script>
@endsection
@push('scripts')
@include('pages.feeds.partials.news-feed-scripts')
@endpush