File: /home/u756937133/domains/swingersnest.com/public_html/resources/views/pages/profile/edit.blade.php
@extends('layouts.app')
@section('title', 'Edit Profile - ' . config('app.name'))
@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-black">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
<form id="profile-form" action="{{ route('account.profile.update') }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<!-- Tab Navigation -->
<div class="bg-white dark:bg-black border-b border-gray-200 dark:border-gray-700 mb-6">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<nav class="flex space-x-1" aria-label="Tabs">
<!-- ACCOUNT Tab -->
<button
type="button"
data-tab="account"
onclick="switchEditTab('account')"
class="edit-profile-tab px-6 py-4 text-sm font-semibold text-white bg-[#9810FA] dark:bg-[#E60076] border-b-2 border-blue-600 transition-colors"
>
<i class="ri-user-line mr-2"></i>
Account
</button>
<!-- PICTURES Tab -->
<button
type="button"
data-tab="pictures"
onclick="switchEditTab('pictures')"
class="edit-profile-tab px-6 py-4 text-sm font-semibold text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
>
<i class="ri-camera-line mr-2"></i>
Pictures
</button>
<!-- VIDEOS Tab -->
<button
type="button"
data-tab="videos"
onclick="switchEditTab('videos')"
class="edit-profile-tab px-6 py-4 text-sm font-semibold text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
>
<i class="ri-video-line mr-2"></i>
Videos
</button>
<!-- ALBUM Tab -->
<button
type="button"
data-tab="album"
onclick="switchEditTab('album')"
class="edit-profile-tab px-6 py-4 text-sm font-semibold text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border-b-2 border-transparent hover:border-gray-300 dark:hover:border-gray-600 transition-colors"
>
<i class="ri-folder-line mr-2"></i>
Album
</button>
</nav>
</div>
</div>
<!-- Tab Content Area -->
<div class="bg-white dark:bg-black rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<!-- ACCOUNT Tab Content -->
<div id="edit-tab-content-account" class="edit-tab-content p-6">
<!-- Account Tab Content -->
<!-- Account Type (Read Only) -->
<div class="mb-8">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Account Type</h3>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Account Type</label>
<input type="text"
value="{{ $profile && $profile->category ? ucfirst(str_replace('_', ' ', $profile->category)) : 'Not set' }}"
readonly
disabled
class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 px-4 py-2 cursor-not-allowed">
<input type="hidden" name="category" value="{{ $profile && $profile->category ? $profile->category : '' }}">
</div>
</div>
<!-- Basic Information -->
<div class="mb-8">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Basic Information</h3>
@php
$isCouple = ($profile && $profile->category === 'couple');
// Use coupleData passed from controller or decode if needed
$coupleData = $coupleData ?? ($profile && $profile->couple_data ? (is_array($profile->couple_data) ? $profile->couple_data : json_decode($profile->couple_data, true) ?? []) : []);
@endphp
@if($isCouple)
<!-- Couple Mode: Show Her and Him sections -->
<!-- Account Level Fields (shown for both single and couple) -->
<div class="mb-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Display Name</label>
<input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email"
value="{{ old('email', $user->email) }}"
readonly
disabled
class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 px-4 py-2 cursor-not-allowed">
<input type="hidden" name="email" value="{{ $user->email }}">
</div>
</div>
<!-- Couple Information - Side by Side -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<!-- Her Section -->
<div class="border-2 border-pink-500 dark:border-pink-500 rounded-2xl p-6 bg-pink-50/30 dark:bg-pink-900/20">
<h4 class="text-lg font-bold text-pink-600 dark:text-pink-400 mb-4 flex items-center gap-2">
<span class="text-pink-500">👩</span> Her Information
</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Date of Birth</label>
<input type="date" name="date_of_birth_her" value="{{ old('date_of_birth_her', $coupleData['date_of_birth_her'] ?? '') }}" max="{{ date('Y-m-d', strtotime('-18 years')) }}" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Sexuality</label>
<select name="sexuality_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="heterosexual" {{ old('sexuality_her', $coupleData['sexuality_her'] ?? '') === 'heterosexual' ? 'selected' : '' }}>Heterosexual</option>
<option value="bisexual" {{ old('sexuality_her', $coupleData['sexuality_her'] ?? '') === 'bisexual' ? 'selected' : '' }}>Bisexual</option>
<option value="homosexual" {{ old('sexuality_her', $coupleData['sexuality_her'] ?? '') === 'homosexual' ? 'selected' : '' }}>Homosexual</option>
<option value="pansexual" {{ old('sexuality_her', $coupleData['sexuality_her'] ?? '') === 'pansexual' ? 'selected' : '' }}>Pansexual</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Relationship Status</label>
<select name="relationship_status_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="single" {{ old('relationship_status_her', $coupleData['relationship_status_her'] ?? '') === 'single' ? 'selected' : '' }}>Single</option>
<option value="relationship" {{ old('relationship_status_her', $coupleData['relationship_status_her'] ?? '') === 'relationship' ? 'selected' : '' }}>In a Relationship</option>
<option value="married" {{ old('relationship_status_her', $coupleData['relationship_status_her'] ?? '') === 'married' ? 'selected' : '' }}>Married</option>
<option value="open" {{ old('relationship_status_her', $coupleData['relationship_status_her'] ?? '') === 'open' ? 'selected' : '' }}>Open Relationship</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Smoking</label>
<select name="smoking_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="never" {{ old('smoking_her', $coupleData['smoking_her'] ?? '') === 'never' ? 'selected' : '' }}>Never</option>
<option value="occasionally" {{ old('smoking_her', $coupleData['smoking_her'] ?? '') === 'occasionally' ? 'selected' : '' }}>Occasionally</option>
<option value="regularly" {{ old('smoking_her', $coupleData['smoking_her'] ?? '') === 'regularly' ? 'selected' : '' }}>Regularly</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Experience</label>
<select name="experience_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="beginner" {{ old('experience_her', $coupleData['experience_her'] ?? '') === 'beginner' ? 'selected' : '' }}>Beginner</option>
<option value="intermediate" {{ old('experience_her', $coupleData['experience_her'] ?? '') === 'intermediate' ? 'selected' : '' }}>Intermediate</option>
<option value="experienced" {{ old('experience_her', $coupleData['experience_her'] ?? '') === 'experienced' ? 'selected' : '' }}>Experienced</option>
<option value="expert" {{ old('experience_her', $coupleData['experience_her'] ?? '') === 'expert' ? 'selected' : '' }}>Expert</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Travel Options</label>
<select name="travel_options_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="can_host" {{ old('travel_options_her', $coupleData['travel_options_her'] ?? '') === 'can_host' ? 'selected' : '' }}>Can Host</option>
<option value="can_travel" {{ old('travel_options_her', $coupleData['travel_options_her'] ?? '') === 'can_travel' ? 'selected' : '' }}>Can Travel</option>
<option value="both" {{ old('travel_options_her', $coupleData['travel_options_her'] ?? '') === 'both' ? 'selected' : '' }}>Both</option>
<option value="neither" {{ old('travel_options_her', $coupleData['travel_options_her'] ?? '') === 'neither' ? 'selected' : '' }}>Neither</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Bio - Her</label>
<textarea name="bio_her" rows="4" placeholder="Tell us about her..." class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">{{ old('bio_her', $coupleData['bio_her'] ?? '') }}</textarea>
</div>
</div>
</div>
<!-- Him Section -->
<div class="border-2 border-blue-500 dark:border-blue-500 rounded-2xl p-6 bg-blue-50/30 dark:bg-blue-900/20">
<h4 class="text-lg font-bold text-blue-600 dark:text-blue-400 mb-4 flex items-center gap-2">
<span class="text-blue-500">👨</span> Him Information
</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Date of Birth</label>
<input type="date" name="date_of_birth_him" value="{{ old('date_of_birth_him', $coupleData['date_of_birth_him'] ?? '') }}" max="{{ date('Y-m-d', strtotime('-18 years')) }}" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Sexuality</label>
<select name="sexuality_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="heterosexual" {{ old('sexuality_him', $coupleData['sexuality_him'] ?? '') === 'heterosexual' ? 'selected' : '' }}>Heterosexual</option>
<option value="bisexual" {{ old('sexuality_him', $coupleData['sexuality_him'] ?? '') === 'bisexual' ? 'selected' : '' }}>Bisexual</option>
<option value="homosexual" {{ old('sexuality_him', $coupleData['sexuality_him'] ?? '') === 'homosexual' ? 'selected' : '' }}>Homosexual</option>
<option value="pansexual" {{ old('sexuality_him', $coupleData['sexuality_him'] ?? '') === 'pansexual' ? 'selected' : '' }}>Pansexual</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Relationship Status</label>
<select name="relationship_status_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="single" {{ old('relationship_status_him', $coupleData['relationship_status_him'] ?? '') === 'single' ? 'selected' : '' }}>Single</option>
<option value="relationship" {{ old('relationship_status_him', $coupleData['relationship_status_him'] ?? '') === 'relationship' ? 'selected' : '' }}>In a Relationship</option>
<option value="married" {{ old('relationship_status_him', $coupleData['relationship_status_him'] ?? '') === 'married' ? 'selected' : '' }}>Married</option>
<option value="open" {{ old('relationship_status_him', $coupleData['relationship_status_him'] ?? '') === 'open' ? 'selected' : '' }}>Open Relationship</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Smoking</label>
<select name="smoking_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="never" {{ old('smoking_him', $coupleData['smoking_him'] ?? '') === 'never' ? 'selected' : '' }}>Never</option>
<option value="occasionally" {{ old('smoking_him', $coupleData['smoking_him'] ?? '') === 'occasionally' ? 'selected' : '' }}>Occasionally</option>
<option value="regularly" {{ old('smoking_him', $coupleData['smoking_him'] ?? '') === 'regularly' ? 'selected' : '' }}>Regularly</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Experience</label>
<select name="experience_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="beginner" {{ old('experience_him', $coupleData['experience_him'] ?? '') === 'beginner' ? 'selected' : '' }}>Beginner</option>
<option value="intermediate" {{ old('experience_him', $coupleData['experience_him'] ?? '') === 'intermediate' ? 'selected' : '' }}>Intermediate</option>
<option value="experienced" {{ old('experience_him', $coupleData['experience_him'] ?? '') === 'experienced' ? 'selected' : '' }}>Experienced</option>
<option value="expert" {{ old('experience_him', $coupleData['experience_him'] ?? '') === 'expert' ? 'selected' : '' }}>Expert</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Travel Options</label>
<select name="travel_options_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="can_host" {{ old('travel_options_him', $coupleData['travel_options_him'] ?? '') === 'can_host' ? 'selected' : '' }}>Can Host</option>
<option value="can_travel" {{ old('travel_options_him', $coupleData['travel_options_him'] ?? '') === 'can_travel' ? 'selected' : '' }}>Can Travel</option>
<option value="both" {{ old('travel_options_him', $coupleData['travel_options_him'] ?? '') === 'both' ? 'selected' : '' }}>Both</option>
<option value="neither" {{ old('travel_options_him', $coupleData['travel_options_him'] ?? '') === 'neither' ? 'selected' : '' }}>Neither</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Bio - Him</label>
<textarea name="bio_him" rows="4" placeholder="Tell us about him..." class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">{{ old('bio_him', $coupleData['bio_him'] ?? '') }}</textarea>
</div>
</div>
</div>
</div>
@else
<!-- Single Mode: Show regular fields -->
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Display Name</label>
<input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
<input type="email"
value="{{ old('email', $user->email) }}"
readonly
disabled
class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 px-4 py-2 cursor-not-allowed">
<input type="hidden" name="email" value="{{ $user->email }}">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Date of Birth</label>
<input type="date" name="date_of_birth" value="{{ old('date_of_birth', $profile && $profile->date_of_birth ? $profile->date_of_birth->format('Y-m-d') : '') }}" max="{{ date('Y-m-d', strtotime('-18 years')) }}" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Gender</label>
<select name="gender" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select Gender</option>
<option value="male" {{ old('gender', $user->gender) === 'male' ? 'selected' : '' }}>Male</option>
<option value="female" {{ old('gender', $user->gender) === 'female' ? 'selected' : '' }}>Female</option>
<option value="other" {{ old('gender', $user->gender) === 'other' ? 'selected' : '' }}>Other</option>
<option value="prefer_not_to_say" {{ old('gender', $user->gender) === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Sexuality</label>
<select name="sexuality" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="straight" {{ old('sexuality', $profile && $profile->sexuality ? $profile->sexuality : '') === 'straight' ? 'selected' : '' }}>Straight</option>
<option value="gay" {{ old('sexuality', $profile && $profile->sexuality ? $profile->sexuality : '') === 'gay' ? 'selected' : '' }}>Gay</option>
<option value="bisexual" {{ old('sexuality', $profile && $profile->sexuality ? $profile->sexuality : '') === 'bisexual' ? 'selected' : '' }}>Bisexual</option>
<option value="lesbian" {{ old('sexuality', $profile && $profile->sexuality ? $profile->sexuality : '') === 'lesbian' ? 'selected' : '' }}>Lesbian</option>
<option value="prefer_not_to_say" {{ old('sexuality', $profile && $profile->sexuality ? $profile->sexuality : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Relationship Status</label>
<select name="relationship_status" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="single" {{ old('relationship_status', $profile && $profile->relationship_status ? $profile->relationship_status : '') === 'single' ? 'selected' : '' }}>Single</option>
<option value="in_relationship" {{ old('relationship_status', $profile && $profile->relationship_status ? $profile->relationship_status : '') === 'in_relationship' ? 'selected' : '' }}>In a Relationship</option>
<option value="married" {{ old('relationship_status', $profile && $profile->relationship_status ? $profile->relationship_status : '') === 'married' ? 'selected' : '' }}>Married</option>
<option value="open" {{ old('relationship_status', $profile && $profile->relationship_status ? $profile->relationship_status : '') === 'open' ? 'selected' : '' }}>Open</option>
<option value="prefer_not_to_say" {{ old('relationship_status', $profile && $profile->relationship_status ? $profile->relationship_status : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Relationship Orientation</label>
<select name="relationship_orientation" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="monogamous" {{ old('relationship_orientation', $profile && $profile->relationship_orientation ? $profile->relationship_orientation : '') === 'monogamous' ? 'selected' : '' }}>Monogamous</option>
<option value="polyamorous" {{ old('relationship_orientation', $profile && $profile->relationship_orientation ? $profile->relationship_orientation : '') === 'polyamorous' ? 'selected' : '' }}>Polyamorous</option>
<option value="swinger" {{ old('relationship_orientation', $profile && $profile->relationship_orientation ? $profile->relationship_orientation : '') === 'swinger' ? 'selected' : '' }}>Swinger</option>
<option value="open" {{ old('relationship_orientation', $profile && $profile->relationship_orientation ? $profile->relationship_orientation : '') === 'open' ? 'selected' : '' }}>Open</option>
<option value="prefer_not_to_say" {{ old('relationship_orientation', $profile && $profile->relationship_orientation ? $profile->relationship_orientation : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Smoking</label>
<select name="smoking" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="no" {{ old('smoking', $profile && $profile->smoking ? $profile->smoking : '') === 'no' ? 'selected' : '' }}>No</option>
<option value="yes" {{ old('smoking', $profile && $profile->smoking ? $profile->smoking : '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="prefer_not_to_say" {{ old('smoking', $profile && $profile->smoking ? $profile->smoking : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Piercings</label>
<select name="piercings" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="no" {{ old('piercings', $profile && $profile->piercings ? $profile->piercings : '') === 'no' ? 'selected' : '' }}>No</option>
<option value="yes" {{ old('piercings', $profile && $profile->piercings ? $profile->piercings : '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="prefer_not_to_say" {{ old('piercings', $profile && $profile->piercings ? $profile->piercings : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tattoos</label>
<select name="tattoos" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="no" {{ old('tattoos', $profile && $profile->tattoos ? $profile->tattoos : '') === 'no' ? 'selected' : '' }}>No</option>
<option value="yes" {{ old('tattoos', $profile && $profile->tattoos ? $profile->tattoos : '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="prefer_not_to_say" {{ old('tattoos', $profile && $profile->tattoos ? $profile->tattoos : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
@php
$languages = $profile && $profile->languages
? (is_array($profile->languages) ? $profile->languages : json_decode($profile->languages, true) ?? [])
: [];
@endphp
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Languages Spoken</label>
@php
$languageOptions = [
'Afrikaans', 'Akan', 'Albanian', 'Amharic', 'Arabic', 'Aragonese', 'Armenian', 'Assamese', 'Aymara', 'Azerbaijani',
'Balinese', 'Bambara', 'Basque', 'Belarusian', 'Bengali', 'Berber (Tamazight)', 'Bislama', 'Bosnian', 'Bulgarian', 'Burmese',
'Catalan', 'Cebuano', 'Chichewa', 'Chinese (Mandarin)', 'Corsican', 'Croatian', 'Czech',
'Danish', 'Dari', 'Divehi (Dhivehi)', 'Dutch', 'Dzongkha',
'English', 'Esperanto', 'Estonian', 'Ewe',
'Faroese', 'Fijian', 'Filipino (Tagalog)', 'Finnish', 'French', 'Frisian', 'Fulah',
'Galician', 'Georgian', 'German', 'Greek', 'Greenlandic (Kalaallisut)', 'Guarani', 'Gujarati',
'Haitian Creole', 'Hausa', 'Hebrew', 'Herero', 'Hindi', 'Hiri Motu', 'Hungarian',
'Icelandic', 'Igbo', 'Indonesian', 'Interlingua', 'Irish', 'Italian',
'Japanese', 'Javanese',
'Kannada', 'Kazakh', 'Khmer', 'Kikongo', 'Kinyarwanda', 'Kirundi', 'Korean', 'Kurdish', 'Kyrgyz',
'Lao', 'Latin', 'Latvian', 'Lingala', 'Lithuanian', 'Luba-Katanga', 'Luxembourgish',
'Macedonian', 'Maithili', 'Malagasy', 'Malay', 'Malayalam', 'Maltese', 'Manipuri', 'Maori', 'Marathi', 'Mongolian', 'Montenegrin',
'Nauruan', 'Nepali', 'Northern Sotho', 'Norwegian',
'Occitan', 'Odia (Oriya)', 'Oromo', 'Ossetian',
'Pashto', 'Persian (Farsi)', 'Polish', 'Portuguese', 'Punjabi',
'Quechua',
'Romanian', 'Romansh', 'Rundi', 'Russian',
'Samoan', 'Sango', 'Sanskrit', 'Scottish Gaelic', 'Serbian', 'Sesotho', 'Setswana', 'Shona', 'Sindhi', 'Sinhala', 'Slovak', 'Slovenian', 'Somali', 'Spanish', 'Swahili', 'Swati', 'Swedish',
'Tajik', 'Tamil', 'Tatar', 'Telugu', 'Thai', 'Tigrinya', 'Tongan', 'Tsonga', 'Tshiluba', 'Tunisian Arabic', 'Turkish', 'Turkmen',
'Ukrainian', 'Urdu', 'Uyghur', 'Uzbek',
'Venda', 'Vietnamese',
'Walloon', 'Welsh', 'Wolof',
'Xhosa',
'Xitsonga',
'Yiddish', 'Yoruba',
'Zhuang', 'Zulu'
];
$selectedLanguages = array_map('strtolower', $languages);
@endphp
<div class="relative" id="language-select-container">
<!-- Selected Languages Display -->
<div class="min-h-[42px] w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 flex flex-wrap gap-2 items-center cursor-pointer" id="language-select-trigger">
<span id="language-placeholder" class="text-gray-500 dark:text-gray-400 text-sm">Select languages...</span>
<div id="language-selected-tags" class="flex flex-wrap gap-2 hidden"></div>
<i class="ri-arrow-down-s-line ml-auto text-gray-400" id="language-arrow"></i>
</div>
<!-- Dropdown -->
<div id="language-dropdown" class="hidden absolute z-50 w-full mt-1 bg-white dark:bg-black border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-hidden">
<!-- Search Input -->
<div class="p-2 border-b border-gray-200 dark:border-gray-700">
<input type="text" id="language-search" placeholder="Search languages..." class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#9810FA]">
</div>
<!-- Options List -->
<div class="overflow-y-auto max-h-48" id="language-options-list">
@foreach($languageOptions as $lang)
@php
$langLower = strtolower($lang);
$isSelected = in_array($langLower, $selectedLanguages);
@endphp
<label class="language-option flex items-center px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" data-lang="{{ $langLower }}" data-lang-name="{{ $lang }}">
<input type="checkbox"
name="languages[]"
value="{{ $langLower }}"
{{ $isSelected ? 'checked' : '' }}
class="language-checkbox rounded border-gray-300 text-[#9810FA] dark:text-[#E60076] focus:ring-[#9810FA]">
<span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ $lang }}</span>
</label>
@endforeach
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Looks are important?</label>
<select name="looks_important" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="no" {{ old('looks_important', $profile && $profile->looks_important ? $profile->looks_important : '') === 'no' ? 'selected' : '' }}>No</option>
<option value="yes" {{ old('looks_important', $profile && $profile->looks_important ? $profile->looks_important : '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="prefer_not_to_say" {{ old('looks_important', $profile && $profile->looks_important ? $profile->looks_important : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Intelligence is important?</label>
<select name="intelligence_important" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
<option value="">Select...</option>
<option value="no" {{ old('intelligence_important', $profile && $profile->intelligence_important ? $profile->intelligence_important : '') === 'no' ? 'selected' : '' }}>No</option>
<option value="yes" {{ old('intelligence_important', $profile && $profile->intelligence_important ? $profile->intelligence_important : '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="prefer_not_to_say" {{ old('intelligence_important', $profile && $profile->intelligence_important ? $profile->intelligence_important : '') === 'prefer_not_to_say' ? 'selected' : '' }}>Prefer not to say</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Bio</label>
<textarea name="bio" rows="4" placeholder="Tell us about yourself..." class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">{{ old('bio', $profile && $profile->bio ? $profile->bio : '') }}</textarea>
</div>
</div>
@endif
</div>
@if($isCouple)
<!-- Personal Details for Couple -->
<div class="mb-8">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Personal Details</h3>
<!-- Personal Details - Side by Side -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Her Personal Details -->
<div class="border-2 border-pink-500 dark:border-pink-500 rounded-2xl p-6 bg-pink-50/30 dark:bg-pink-900/20">
<h4 class="text-lg font-bold text-pink-600 dark:text-pink-400 mb-4 flex items-center gap-2">
<span class="text-pink-500">👩</span> Her Details
</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Weight (kg)</label>
<input type="number" name="weight_her" value="{{ old('weight_her', $coupleData['weight_her'] ?? '') }}" placeholder="kg" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Height (cm)</label>
<input type="number" name="height_her" value="{{ old('height_her', $coupleData['height_her'] ?? '') }}" placeholder="cm" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Body Type</label>
<select name="body_type_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select Body Type</option>
<option value="Slim" {{ old('body_type_her', $coupleData['body_type_her'] ?? '') == 'Slim' ? 'selected' : '' }}>💪 Slim</option>
<option value="Athletic" {{ old('body_type_her', $coupleData['body_type_her'] ?? '') == 'Athletic' ? 'selected' : '' }}>🏃 Athletic</option>
<option value="Curvy" {{ old('body_type_her', $coupleData['body_type_her'] ?? '') == 'Curvy' ? 'selected' : '' }}>❤️ Curvy</option>
<option value="Average" {{ old('body_type_her', $coupleData['body_type_her'] ?? '') == 'Average' ? 'selected' : '' }}>👤 Average</option>
<option value="Plus Size" {{ old('body_type_her', $coupleData['body_type_her'] ?? '') == 'Plus Size' ? 'selected' : '' }}>👥 Plus Size</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Eye Color</label>
<select name="eye_color_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select Eye Color</option>
<option value="Brown" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Brown' ? 'selected' : '' }}>Brown</option>
<option value="Blue" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Blue' ? 'selected' : '' }}>Blue</option>
<option value="Green" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Green' ? 'selected' : '' }}>Green</option>
<option value="Gray" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Gray' ? 'selected' : '' }}>Gray</option>
<option value="Hazel" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Hazel' ? 'selected' : '' }}>Hazel</option>
<option value="Amber" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Amber' ? 'selected' : '' }}>Amber</option>
<option value="Black" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Black' ? 'selected' : '' }}>Black</option>
<option value="Other" {{ old('eye_color_her', $coupleData['eye_color_her'] ?? '') === 'Other' ? 'selected' : '' }}>Other</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Hair Color</label>
<select name="hair_color_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select Hair Color</option>
<option value="Black" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Black' ? 'selected' : '' }}>Black</option>
<option value="Brown" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Brown' ? 'selected' : '' }}>Brown</option>
<option value="Blonde" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Blonde' ? 'selected' : '' }}>Blonde</option>
<option value="Red" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Red' ? 'selected' : '' }}>Red</option>
<option value="Gray" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Gray' ? 'selected' : '' }}>Gray</option>
<option value="White" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'White' ? 'selected' : '' }}>White</option>
<option value="Auburn" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Auburn' ? 'selected' : '' }}>Auburn</option>
<option value="Chestnut" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Chestnut' ? 'selected' : '' }}>Chestnut</option>
<option value="Other" {{ old('hair_color_her', $coupleData['hair_color_her'] ?? '') === 'Other' ? 'selected' : '' }}>Other</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Tattoos</label>
<select name="tattoos_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="yes" {{ old('tattoos_her', $coupleData['tattoos_her'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="no" {{ old('tattoos_her', $coupleData['tattoos_her'] ?? '') === 'no' ? 'selected' : '' }}>No</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Piercings</label>
<select name="piercings_her" class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
<option value="">Select...</option>
<option value="yes" {{ old('piercings_her', $coupleData['piercings_her'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="no" {{ old('piercings_her', $coupleData['piercings_her'] ?? '') === 'no' ? 'selected' : '' }}>No</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Boob Size</label>
<input type="text" name="boob_size_her" value="{{ old('boob_size_her', $coupleData['boob_size_her'] ?? '') }}" placeholder="e.g., A, B, C, D, DD, etc." class="w-full rounded-lg border border-pink-300 dark:border-pink-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-pink-500 dark:border-pink-500 focus:ring-pink-500">
</div>
</div>
</div>
<!-- Him Personal Details -->
<div class="border-2 border-blue-500 dark:border-blue-500 rounded-2xl p-6 bg-blue-50/30 dark:bg-blue-900/20">
<h4 class="text-lg font-bold text-blue-600 dark:text-blue-400 mb-4 flex items-center gap-2">
<span class="text-blue-500">👨</span> Him Details
</h4>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Weight (kg)</label>
<input type="number" name="weight_him" value="{{ old('weight_him', $coupleData['weight_him'] ?? '') }}" placeholder="kg" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Height (cm)</label>
<input type="number" name="height_him" value="{{ old('height_him', $coupleData['height_him'] ?? '') }}" placeholder="cm" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Body Type</label>
<select name="body_type_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select Body Type</option>
<option value="Slim" {{ old('body_type_him', $coupleData['body_type_him'] ?? '') == 'Slim' ? 'selected' : '' }}>💪 Slim</option>
<option value="Athletic" {{ old('body_type_him', $coupleData['body_type_him'] ?? '') == 'Athletic' ? 'selected' : '' }}>🏃 Athletic</option>
<option value="Curvy" {{ old('body_type_him', $coupleData['body_type_him'] ?? '') == 'Curvy' ? 'selected' : '' }}>❤️ Curvy</option>
<option value="Average" {{ old('body_type_him', $coupleData['body_type_him'] ?? '') == 'Average' ? 'selected' : '' }}>👤 Average</option>
<option value="Plus Size" {{ old('body_type_him', $coupleData['body_type_him'] ?? '') == 'Plus Size' ? 'selected' : '' }}>👥 Plus Size</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Eye Color</label>
<select name="eye_color_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select Eye Color</option>
<option value="Brown" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Brown' ? 'selected' : '' }}>Brown</option>
<option value="Blue" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Blue' ? 'selected' : '' }}>Blue</option>
<option value="Green" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Green' ? 'selected' : '' }}>Green</option>
<option value="Gray" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Gray' ? 'selected' : '' }}>Gray</option>
<option value="Hazel" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Hazel' ? 'selected' : '' }}>Hazel</option>
<option value="Amber" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Amber' ? 'selected' : '' }}>Amber</option>
<option value="Black" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Black' ? 'selected' : '' }}>Black</option>
<option value="Other" {{ old('eye_color_him', $coupleData['eye_color_him'] ?? '') === 'Other' ? 'selected' : '' }}>Other</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Hair Color</label>
<select name="hair_color_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select Hair Color</option>
<option value="Black" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Black' ? 'selected' : '' }}>Black</option>
<option value="Brown" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Brown' ? 'selected' : '' }}>Brown</option>
<option value="Blonde" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Blonde' ? 'selected' : '' }}>Blonde</option>
<option value="Red" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Red' ? 'selected' : '' }}>Red</option>
<option value="Gray" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Gray' ? 'selected' : '' }}>Gray</option>
<option value="White" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'White' ? 'selected' : '' }}>White</option>
<option value="Auburn" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Auburn' ? 'selected' : '' }}>Auburn</option>
<option value="Chestnut" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Chestnut' ? 'selected' : '' }}>Chestnut</option>
<option value="Other" {{ old('hair_color_him', $coupleData['hair_color_him'] ?? '') === 'Other' ? 'selected' : '' }}>Other</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Tattoos</label>
<select name="tattoos_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="yes" {{ old('tattoos_him', $coupleData['tattoos_him'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="no" {{ old('tattoos_him', $coupleData['tattoos_him'] ?? '') === 'no' ? 'selected' : '' }}>No</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Piercings</label>
<select name="piercings_him" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
<option value="">Select...</option>
<option value="yes" {{ old('piercings_him', $coupleData['piercings_him'] ?? '') === 'yes' ? 'selected' : '' }}>Yes</option>
<option value="no" {{ old('piercings_him', $coupleData['piercings_him'] ?? '') === 'no' ? 'selected' : '' }}>No</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-blue-700 dark:text-blue-300 mb-2">Dick Size</label>
<input type="text" name="dick_size_him" value="{{ old('dick_size_him', $coupleData['dick_size_him'] ?? '') }}" placeholder="e.g., inches or cm" class="w-full rounded-lg border border-blue-300 dark:border-blue-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-blue-500 dark:border-blue-500 focus:ring-blue-500">
</div>
</div>
</div>
</div>
</div>
@endif
<!-- Change Password -->
<div class="mb-8">
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
<i class="ri-lock-line"></i>
Change Password
</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Current Password</label>
<input type="password" name="current_password" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Password</label>
<input type="password" name="password" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Confirm New Password</label>
<input type="password" name="password_confirmation" class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-4 py-2 focus:border-[#9810FA] dark:border-[#E60076] focus:ring-[#9810FA]">
</div>
</div>
</div>
<!-- Danger Zone -->
<div class="mb-8 border-2 border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 rounded-lg p-6">
<h3 class="text-lg font-bold text-red-900 dark:text-red-300 mb-2 flex items-center gap-2">
<i class="ri-delete-bin-line"></i>
Danger Zone
</h3>
<p class="text-sm text-red-700 dark:text-red-400 mb-4">Once you delete your account, there is no going back. Please be certain.</p>
<div class="flex gap-2">
<input type="text" placeholder="Type DELETE to confirm" class="flex-1 rounded-lg border border-red-300 dark:border-red-700 bg-white dark:bg-black text-gray-900 dark:text-white px-4 py-2">
<button type="button" class="bg-red-600 hover:bg-red-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 transition-colors">
<i class="ri-delete-bin-line"></i>
Delete Account
</button>
</div>
</div>
</div>
</div>
<!-- PICTURES Tab Content -->
<div id="edit-tab-content-pictures" class="edit-tab-content hidden">
@include('pages.profile.tabs.pictures', [
'user' => $user,
'profile' => $profile,
'isOwnProfile' => true
])
</div>
<!-- VIDEOS Tab Content -->
<div id="edit-tab-content-videos" class="edit-tab-content hidden">
@include('pages.profile.tabs.videos', [
'user' => $user,
'profile' => $profile,
'isOwnProfile' => true
])
</div>
<!-- ALBUM Tab Content -->
<div id="edit-tab-content-album" class="edit-tab-content hidden">
@include('pages.profile.tabs.album', [
'user' => $user,
'profile' => $profile,
'isOwnProfile' => true
])
</div>
<!-- Action Buttons -->
<div class="flex items-center justify-end gap-3 border-t border-gray-200 dark:border-gray-700 pt-6 mt-6 p-6">
<a href="{{ route('account.profile') }}" class="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-6 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 shadow-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-600">
Cancel
</a>
<button type="submit" id="save-changes-btn" class="rounded-lg border-2 border-[#E60076] bg-transparent px-6 py-2 text-sm font-semibold text-[#E60076] shadow-sm transition-all hover:bg-[#E60076] hover:text-white">
Save Changes
</button>
</div>
</div>
</form>
</div>
</div>
@push('scripts')
<script>
// Ensure form submission works and show toaster notifications
document.addEventListener('DOMContentLoaded', function() {
// Show success toast if session has success message
@if(session('success'))
if (typeof showToast !== 'undefined') {
showToast('{{ addslashes(session('success')) }}', 'success', 5000);
} else {
// Wait for showToast to be available
setTimeout(function() {
if (typeof showToast !== 'undefined') {
showToast('{{ addslashes(session('success')) }}', 'success', 5000);
}
}, 500);
}
@endif
// Show error toasts if there are validation errors
@if($errors->any())
@foreach($errors->all() as $error)
if (typeof showToast !== 'undefined') {
showToast('{{ addslashes($error) }}', 'error', 5000);
} else {
setTimeout(function() {
if (typeof showToast !== 'undefined') {
showToast('{{ addslashes($error) }}', 'error', 5000);
}
}, 500);
}
@endforeach
@endif
const profileForm = document.getElementById('profile-form');
const saveButton = document.getElementById('save-changes-btn');
if (profileForm && saveButton) {
// Handle form submission
profileForm.addEventListener('submit', function(e) {
// Don't prevent default - let form submit naturally
const originalText = saveButton.textContent || saveButton.innerText;
const originalHTML = saveButton.innerHTML;
// Show loading state
saveButton.disabled = true;
saveButton.innerHTML = '<span class="flex items-center gap-2"><span>Saving...</span><svg class="animate-spin h-4 w-4 text-[#E60076]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span>';
// Re-enable button after 15 seconds as fallback (in case of error or network issue)
setTimeout(function() {
saveButton.disabled = false;
saveButton.innerHTML = originalHTML;
}, 15000);
});
// Also handle button click directly (in case form submit doesn't trigger)
saveButton.addEventListener('click', function(e) {
// Let the form handle submission - no validation required, submit whatever is filled
if (profileForm) {
profileForm.submit();
}
});
}
});
// Language Select Dropdown
(function() {
const container = document.getElementById('language-select-container');
if (!container) return;
const trigger = document.getElementById('language-select-trigger');
const dropdown = document.getElementById('language-dropdown');
const searchInput = document.getElementById('language-search');
const placeholder = document.getElementById('language-placeholder');
const selectedTags = document.getElementById('language-selected-tags');
const checkboxes = container.querySelectorAll('.language-checkbox');
const options = container.querySelectorAll('.language-option');
let isOpen = false;
let selectedLanguages = [];
// Initialize selected languages from checked checkboxes
checkboxes.forEach(cb => {
if (cb.checked) {
const lang = cb.value;
selectedLanguages.push(lang);
updateSelectedTags();
}
});
// Toggle dropdown
trigger.addEventListener('click', function(e) {
e.stopPropagation();
isOpen = !isOpen;
if (isOpen) {
dropdown.classList.remove('hidden');
searchInput.focus();
} else {
dropdown.classList.add('hidden');
}
});
// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!container.contains(e.target)) {
isOpen = false;
dropdown.classList.add('hidden');
}
});
// Search functionality
searchInput.addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
options.forEach(option => {
const langName = option.getAttribute('data-lang-name').toLowerCase();
const langValue = option.getAttribute('data-lang').toLowerCase();
if (langName.includes(searchTerm) || langValue.includes(searchTerm)) {
option.style.display = 'flex';
} else {
option.style.display = 'none';
}
});
});
// Handle checkbox changes
checkboxes.forEach(cb => {
cb.addEventListener('change', function() {
const lang = this.value;
if (this.checked) {
if (!selectedLanguages.includes(lang)) {
selectedLanguages.push(lang);
}
} else {
selectedLanguages = selectedLanguages.filter(l => l !== lang);
}
updateSelectedTags();
});
});
// Update selected tags display
function updateSelectedTags() {
if (selectedLanguages.length === 0) {
placeholder.classList.remove('hidden');
selectedTags.classList.add('hidden');
} else {
placeholder.classList.add('hidden');
selectedTags.classList.remove('hidden');
selectedTags.innerHTML = '';
selectedLanguages.forEach(lang => {
const langName = Array.from(options).find(opt => opt.getAttribute('data-lang') === lang)?.getAttribute('data-lang-name') || lang;
const tag = document.createElement('span');
tag.className = 'inline-flex items-center gap-1 px-2 py-1 bg-pink-100 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300 rounded-md text-xs';
tag.innerHTML = `
<span>${langName}</span>
<button type="button" class="hover:text-purple-900 dark:hover:text-purple-100 remove-language" data-lang="${lang}">
<i class="ri-close-line text-sm"></i>
</button>
`;
selectedTags.appendChild(tag);
});
// Add remove functionality
selectedTags.querySelectorAll('.remove-language').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const lang = this.getAttribute('data-lang');
const checkbox = container.querySelector(`input[value="${lang}"]`);
if (checkbox) {
checkbox.checked = false;
checkbox.dispatchEvent(new Event('change'));
}
});
});
}
}
// Initialize
updateSelectedTags();
})();
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Edit Profile Tab Navigation
const editTabButtons = document.querySelectorAll('.edit-profile-tab');
const editTabContents = document.querySelectorAll('.edit-tab-content');
// Handle edit profile tab clicks
editTabButtons.forEach(button => {
button.addEventListener('click', function() {
const tabName = this.getAttribute('data-tab');
// Update active tab button
editTabButtons.forEach(btn => {
// Remove active state classes (each class separately)
btn.classList.remove('text-white');
btn.classList.remove('bg-[#9810FA]');
btn.classList.remove('dark:bg-[#E60076]');
btn.classList.remove('border-blue-600');
// Add inactive state classes
btn.classList.add('text-gray-600', 'dark:text-gray-400', 'border-transparent');
btn.classList.add('hover:text-gray-900', 'dark:hover:text-white');
btn.classList.add('hover:border-gray-300', 'dark:hover:border-gray-600');
});
// Add active state classes to clicked button (each class separately)
this.classList.remove('text-gray-600', 'dark:text-gray-400', 'border-transparent');
this.classList.remove('hover:text-gray-900', 'dark:hover:text-white');
this.classList.remove('hover:border-gray-300', 'dark:hover:border-gray-600');
this.classList.add('text-white');
this.classList.add('bg-[#9810FA]');
this.classList.add('dark:bg-[#E60076]');
this.classList.add('border-blue-600');
// Show corresponding content
editTabContents.forEach(content => {
content.classList.add('hidden');
});
const targetTab = document.getElementById('edit-tab-content-' + tabName);
if (targetTab) {
targetTab.classList.remove('hidden');
}
});
});
});
function switchEditTab(tab) {
const tabButton = document.querySelector(`.edit-profile-tab[data-tab="${tab}"]`);
if (tabButton) {
tabButton.click();
}
}
</script>
@endpush
@endsection