ghassan/takeone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile edit with personal moto and social media links

Browse Source
This commit is contained in:
ghassan committed 2026-01-20 23:29:45 +03:00
1 parent af567c2c5f
commit 5cbb26608c
19 files changed
+4415 -102
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/js/app.js
+7
View File
@@ -1 +1,8 @@
import './bootstrap';
import $ from 'jquery';
import 'jquery-cropbox';
import imageCompression from 'browser-image-compression';
// Make jQuery globally available for jquery-cropbox
window.$ = window.jQuery = $;
window.imageCompression = imageCompression;
resources/views/auth/login.blade.php
+5 -4
View File
@@ -14,14 +14,15 @@
<form method="POST" action="{{ route('login') }}">
@csrf
<!-- Email Address -->
<!-- Email or Phone -->
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input id="email" type="email"
<label for="email" class="form-label">Email or Phone</label>
<input id="email" type="text"
class="form-control @error('email') is-invalid @enderror"
name="email"
value="{{ old('email') }}"
required autocomplete="email"
placeholder="Enter your email or phone number"
required autocomplete="username"
autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
resources/views/components/image-upload-modal.blade.php
+188
View File
@@ -0,0 +1,188 @@
@props(['aspectRatio' => 1, 'maxSize' => 1024 * 1024, 'title' => 'Upload Image', 'uploadUrl' => '#'])
<div class="modal fade" id="imageUploadModal" tabindex="-1" aria-labelledby="imageUploadModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="imageUploadModalLabel">{{ $title }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- File Input -->
<div class="mb-3" id="fileInputContainer">
<label for="imageFile" class="form-label">Select Image</label>
<input type="file" class="form-control" id="imageFile" accept="image/*" required>
</div>
<!-- Cropper Container -->
<div id="cropperContainer" class="d-none">
<div class="text-center mb-3">
<div id="cropboxContainer" style="width: 400px; height: 400px; margin: 0 auto; border: 1px solid #ccc;">
<img id="imagePreview" alt="Image Preview" style="display: block;">
</div>
</div>
<div class="d-flex justify-content-center gap-2 mb-3">
<button type="button" class="btn btn-sm btn-outline-secondary" id="zoomIn">
<i class="fas fa-search-plus"></i> Zoom In
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="zoomOut">
<i class="fas fa-search-minus"></i> Zoom Out
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="reset">
<i class="fas fa-sync"></i> Reset
</button>
</div>
</div>
<!-- Upload Progress -->
<div id="uploadProgress" class="d-none">
<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 0%"></div>
</div>
<p class="text-center">Compressing and uploading...</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="uploadBtn" disabled>Upload</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let $cropbox = null;
const fileInput = document.getElementById('imageFile');
const cropperContainer = document.getElementById('cropperContainer');
const fileInputContainer = document.getElementById('fileInputContainer');
const imagePreview = document.getElementById('imagePreview');
const uploadBtn = document.getElementById('uploadBtn');
const uploadProgress = document.getElementById('uploadProgress');
// File selection
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (!file) return;
// Validate file type
if (!file.type.startsWith('image/')) {
alert('Please select a valid image file.');
return;
}
// Validate file size (rough check before compression)
if (file.size > {{ $maxSize }} * 2) {
alert('File is too large. Please select a smaller image.');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
// Hide file input, show cropper
fileInputContainer.classList.add('d-none');
cropperContainer.classList.remove('d-none');
uploadBtn.disabled = false;
// Set image source
imagePreview.src = e.target.result;
// Initialize jquery-cropbox with track ball controls
$cropbox = $('#imagePreview').cropbox({
width: 200,
height: 200,
showControls: true
});
};
reader.readAsDataURL(file);
});
// Zoom controls
document.getElementById('zoomIn').addEventListener('click', function() {
if ($cropbox) {
$cropbox.cropbox('zoomIn');
}
});
document.getElementById('zoomOut').addEventListener('click', function() {
if ($cropbox) {
$cropbox.cropbox('zoomOut');
}
});
document.getElementById('reset').addEventListener('click', function() {
if ($cropbox) {
$cropbox.cropbox('reset');
}
});
// Upload button
uploadBtn.addEventListener('click', async function() {
if (!$cropbox) return;
uploadBtn.disabled = true;
uploadProgress.classList.remove('d-none');
try {
// Get cropped blob from cropbox
const blob = $cropbox.cropbox('getBlob');
// Compress if needed
let finalBlob = blob;
if (blob.size > {{ $maxSize }}) {
const progressBar = uploadProgress.querySelector('.progress-bar');
finalBlob = await window.imageCompression(blob, {
maxSizeMB: {{ $maxSize }} / (1024 * 1024),
maxWidthOrHeight: 1920,
onProgress: (progress) => {
progressBar.style.width = progress + '%';
}
});
}
// Create form data
const formData = new FormData();
formData.append('image', finalBlob, 'profile-picture.jpg');
// Upload
const response = await fetch('{{ $uploadUrl }}', {
method: 'POST',
body: formData,
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
}
});
if (!response.ok) {
throw new Error('Upload failed');
}
const result = await response.json();
// Close modal and refresh
const modal = bootstrap.Modal.getInstance(document.getElementById('imageUploadModal'));
modal.hide();
// Reset form
fileInput.value = '';
cropperContainer.classList.add('d-none');
fileInputContainer.classList.remove('d-none');
uploadProgress.classList.add('d-none');
uploadBtn.disabled = true;
// Trigger success callback or reload
if (window.imageUploadSuccess) {
window.imageUploadSuccess(result);
} else {
location.reload();
}
} catch (error) {
console.error('Upload error:', error);
alert('Upload failed: ' + error.message);
uploadBtn.disabled = false;
uploadProgress.classList.add('d-none');
}
});
});
</script>
resources/views/emails/welcome.blade.php
+1 -1
View File
@@ -152,7 +152,7 @@
<p>Before you can access your account, please verify your email address by clicking the button below.</p>
<div class="button-container">
<a href="{{ $user->verificationUrl() }}" class="button">Verify Your Email</a>
<a href="{{ $verificationUrl }}" class="button">Verify Your Email</a>
</div>
<p style="text-align: center; color: #999999; font-size: 14px; margin-top: 30px;">
resources/views/family/dashboard.blade.php
+10 -10
View File
@@ -16,7 +16,7 @@
<!-- Current User Card -->
<div class="col">
<a href="{{ route('profile.show') }}" class="text-decoration-none">
<div class="card h-100 shadow-sm border-0 overflow-hidden d-flex flex-column family-card">
<div class="card h-100 shadow-sm border overflow-hidden d-flex flex-column family-card">
<!-- Header with gradient background -->
<div class="p-4 pb-3" style="background: linear-gradient(135deg, {{ $user->gender == 'm' ? 'rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 50%' : 'rgba(214, 51, 132, 0.1) 0%, rgba(214, 51, 132, 0.05) 50%' }}, transparent 100%);">
<div class="d-flex align-items-start gap-3">
@@ -25,7 +25,7 @@
@if($user->media_gallery[0] ?? false)
<img src="{{ $user->media_gallery[0] }}" alt="{{ $user->full_name }}" class="w-100 h-100" style="object-fit: cover;">
@else
<div class="w-100 h-100 d-flex align-items-center justify-center text-white fw-bold fs-4" style="background: linear-gradient(135deg, {{ $user->gender == 'm' ? '#0d6efd 0%, #0a58ca 100%' : '#d63384 0%, #a61e4d 100%' }});">
<div class="w-100 h-100 d-flex align-items-center justify-content-center text-white fw-bold fs-4" style="background: linear-gradient(135deg, {{ $user->gender == 'm' ? '#0d6efd 0%, #0a58ca 100%' : '#d63384 0%, #a61e4d 100%' }});">
{{ strtoupper(substr($user->full_name, 0, 1)) }}
</div>
@endif
@@ -133,19 +133,19 @@
@foreach($dependents as $relationship)
<div class="col">
<a href="{{ route('family.show', $relationship->dependent->id) }}" class="text-decoration-none">
<div class="card h-100 shadow-sm border-0 overflow-hidden d-flex flex-column family-card">
<div class="card h-100 shadow-sm border overflow-hidden d-flex flex-column family-card">
<!-- Header with gradient background -->
<div class="p-4 pb-3" style="background: linear-gradient(135deg, {{ $relationship->dependent->gender == 'm' ? 'rgba(13, 110, 253, 0.1) 0%, rgba(13, 110, 253, 0.05) 50%' : 'rgba(214, 51, 132, 0.1) 0%, rgba(214, 51, 132, 0.05) 50%' }}, transparent 100%);">
<div class="d-flex align-items-start gap-3">
<div class="position-relative">
<div class="rounded-circle border border-4 border-white shadow" style="width: 80px; height: 80px; overflow: hidden; box-shadow: 0 0 0 2px {{ $relationship->dependent->gender == 'm' ? 'rgba(13, 110, 253, 0.3)' : 'rgba(214, 51, 132, 0.3)' }} !important;">
@if($relationship->dependent->media_gallery[0] ?? false)
<img src="{{ $relationship->dependent->media_gallery[0] }}" alt="{{ $relationship->dependent->full_name }}" class="w-100 h-100" style="object-fit: cover;">
@else
<div class="w-100 h-100 d-flex align-items-center justify-center text-white fw-bold fs-4" style="background: linear-gradient(135deg, {{ $relationship->dependent->gender == 'm' ? '#0d6efd 0%, #0a58ca 100%' : '#d63384 0%, #a61e4d 100%' }});">
{{ strtoupper(substr($relationship->dependent->full_name, 0, 1)) }}
</div>
@endif
@if($relationship->dependent->media_gallery[0] ?? false)
<img src="{{ $relationship->dependent->media_gallery[0] }}" alt="{{ $relationship->dependent->full_name }}" class="w-100 h-100" style="object-fit: cover;">
@else
<div class="w-100 h-100 d-flex align-items-center justify-content-center text-white fw-bold fs-4" style="background: linear-gradient(135deg, {{ $relationship->dependent->gender == 'm' ? '#0d6efd 0%, #0a58ca 100%' : '#d63384 0%, #a61e4d 100%' }});">
{{ strtoupper(substr($relationship->dependent->full_name, 0, 1)) }}
</div>
@endif
</div>
</div>
<div class="flex-grow-1 min-w-0">
resources/views/family/profile-edit.blade.php
+261
View File
@@ -0,0 +1,261 @@
@extends('layouts.app')
@section('content')
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card shadow-sm">
<div class="card-header bg-white">
<h4 class="mb-0">Edit Profile</h4>
</div>
<div class="card-body">
<!-- Profile Picture Section -->
<div class="mb-4 text-center">
<div class="mb-3">
<img src="{{ $user->profile_picture ? asset('storage/' . $user->profile_picture) : asset('images/default-avatar.png') }}"
alt="Profile Picture"
class="rounded-circle"
style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #dee2e6;">
</div>
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#profilePictureModal">
<i class="fas fa-camera"></i> Change Profile Picture
</button>
</div>
<form method="POST" action="{{ route('profile.update') }}">
@csrf
@method('PUT')
<div class="mb-3">
<label for="full_name" class="form-label">Full Name</label>
<input type="text" class="form-control @error('full_name') is-invalid @enderror" id="full_name" name="full_name" value="{{ old('full_name', $user->full_name) }}" required>
@error('full_name')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email', $user->email) }}" required>
@error('email')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="mobile" class="form-label">Mobile Number</label>
<input type="text" class="form-control @error('mobile') is-invalid @enderror" id="mobile" name="mobile" value="{{ old('mobile', $user->mobile) }}">
@error('mobile')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="gender" class="form-label">Gender</label>
<select class="form-select @error('gender') is-invalid @enderror" id="gender" name="gender" required>
<option value="">Select Gender</option>
<option value="m" {{ old('gender', $user->gender) == 'm' ? 'selected' : '' }}>Male</option>
<option value="f" {{ old('gender', $user->gender) == 'f' ? 'selected' : '' }}>Female</option>
</select>
@error('gender')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<label for="birthdate" class="form-label">Birthdate</label>
<input type="date" class="form-control @error('birthdate') is-invalid @enderror" id="birthdate" name="birthdate" value="{{ old('birthdate', $user->birthdate->format('Y-m-d')) }}" required>
@error('birthdate')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="blood_type" class="form-label">Blood Type</label>
<select class="form-select @error('blood_type') is-invalid @enderror" id="blood_type" name="blood_type">
<option value="">Select Blood Type</option>
<option value="A+" {{ old('blood_type', $user->blood_type) == 'A+' ? 'selected' : '' }}>A+</option>
<option value="A-" {{ old('blood_type', $user->blood_type) == 'A-' ? 'selected' : '' }}>A-</option>
<option value="B+" {{ old('blood_type', $user->blood_type) == 'B+' ? 'selected' : '' }}>B+</option>
<option value="B-" {{ old('blood_type', $user->blood_type) == 'B-' ? 'selected' : '' }}>B-</option>
<option value="AB+" {{ old('blood_type', $user->blood_type) == 'AB+' ? 'selected' : '' }}>AB+</option>
<option value="AB-" {{ old('blood_type', $user->blood_type) == 'AB-' ? 'selected' : '' }}>AB-</option>
<option value="O+" {{ old('blood_type', $user->blood_type) == 'O+' ? 'selected' : '' }}>O+</option>
<option value="O-" {{ old('blood_type', $user->blood_type) == 'O-' ? 'selected' : '' }}>O-</option>
<option value="Unknown" {{ old('blood_type', $user->blood_type) == 'Unknown' ? 'selected' : '' }}>Unknown</option>
</select>
@error('blood_type')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="col-md-6">
<x-country-dropdown
name="nationality"
id="nationality"
:value="old('nationality', $user->nationality)"
:required="true"
:error="$errors->first('nationality')" />
</div>
</div>
<div class="mb-3">
<h5 class="form-label d-flex justify-content-between align-items-center">
Social Media Links
<button type="button" class="btn btn-outline-primary btn-sm" id="addSocialLink">
<i class="bi bi-plus"></i> Add Link
</button>
</h5>
<div id="socialLinksContainer">
@php
$existingLinks = old('social_links', $user->social_links ?? []);
if (!is_array($existingLinks)) {
$existingLinks = [];
}
// Convert associative array to array of arrays for form display
$formLinks = [];
foreach ($existingLinks as $platform => $url) {
$formLinks[] = ['platform' => $platform, 'url' => $url];
}
@endphp
@foreach($formLinks as $index => $link)
<div class="social-link-row mb-3 d-flex align-items-end">
<div class="me-2 flex-grow-1">
<label class="form-label">Platform</label>
<select class="form-select platform-select" name="social_links[{{ $index }}][platform]" required>
<option value="">Select Platform</option>
<option value="facebook" {{ ($link['platform'] ?? '') == 'facebook' ? 'selected' : '' }}>Facebook</option>
<option value="twitter" {{ ($link['platform'] ?? '') == 'twitter' ? 'selected' : '' }}>Twitter/X</option>
<option value="instagram" {{ ($link['platform'] ?? '') == 'instagram' ? 'selected' : '' }}>Instagram</option>
<option value="linkedin" {{ ($link['platform'] ?? '') == 'linkedin' ? 'selected' : '' }}>LinkedIn</option>
<option value="youtube" {{ ($link['platform'] ?? '') == 'youtube' ? 'selected' : '' }}>YouTube</option>
<option value="tiktok" {{ ($link['platform'] ?? '') == 'tiktok' ? 'selected' : '' }}>TikTok</option>
<option value="snapchat" {{ ($link['platform'] ?? '') == 'snapchat' ? 'selected' : '' }}>Snapchat</option>
<option value="whatsapp" {{ ($link['platform'] ?? '') == 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
<option value="telegram" {{ ($link['platform'] ?? '') == 'telegram' ? 'selected' : '' }}>Telegram</option>
<option value="discord" {{ ($link['platform'] ?? '') == 'discord' ? 'selected' : '' }}>Discord</option>
<option value="reddit" {{ ($link['platform'] ?? '') == 'reddit' ? 'selected' : '' }}>Reddit</option>
<option value="pinterest" {{ ($link['platform'] ?? '') == 'pinterest' ? 'selected' : '' }}>Pinterest</option>
<option value="twitch" {{ ($link['platform'] ?? '') == 'twitch' ? 'selected' : '' }}>Twitch</option>
<option value="github" {{ ($link['platform'] ?? '') == 'github' ? 'selected' : '' }}>GitHub</option>
<option value="spotify" {{ ($link['platform'] ?? '') == 'spotify' ? 'selected' : '' }}>Spotify</option>
<option value="skype" {{ ($link['platform'] ?? '') == 'skype' ? 'selected' : '' }}>Skype</option>
<option value="slack" {{ ($link['platform'] ?? '') == 'slack' ? 'selected' : '' }}>Slack</option>
<option value="medium" {{ ($link['platform'] ?? '') == 'medium' ? 'selected' : '' }}>Medium</option>
<option value="vimeo" {{ ($link['platform'] ?? '') == 'vimeo' ? 'selected' : '' }}>Vimeo</option>
<option value="messenger" {{ ($link['platform'] ?? '') == 'messenger' ? 'selected' : '' }}>Messenger</option>
<option value="wechat" {{ ($link['platform'] ?? '') == 'wechat' ? 'selected' : '' }}>WeChat</option>
<option value="line" {{ ($link['platform'] ?? '') == 'line' ? 'selected' : '' }}>Line</option>
</select>
</div>
<div class="me-2 flex-grow-1">
<label class="form-label">URL</label>
<input type="url" class="form-control" name="social_links[{{ $index }}][url]" value="{{ $link['url'] ?? '' }}" placeholder="https://example.com/username" required>
</div>
<div class="mb-0">
<button type="button" class="btn btn-outline-danger btn-sm remove-social-link">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
@endforeach
</div>
</div>
<div class="mb-3">
<label for="motto" class="form-label">Personal Motto</label>
<textarea class="form-control @error('motto') is-invalid @enderror" id="motto" name="motto" rows="3" placeholder="Enter your personal motto or quote...">{{ old('motto', $user->motto) }}</textarea>
<div class="form-text">Share a personal motto or quote that inspires you.</div>
@error('motto')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="d-flex justify-content-between">
<a href="{{ route('profile.show') }}" class="btn btn-outline-secondary">Cancel</a>
<button type="submit" class="btn btn-primary">Update Profile</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Profile Picture Upload Modal -->
<x-image-upload-modal
id="profilePictureModal"
aspectRatio="1"
maxSizeMB="1"
title="Upload Profile Picture"
uploadUrl="{{ route('profile.upload-picture') }}"
/>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
let socialLinkIndex = {{ count($formLinks ?? []) }};
// Add new social link row
document.getElementById('addSocialLink').addEventListener('click', function() {
addSocialLinkRow();
});
// Remove social link row
document.addEventListener('click', function(e) {
if (e.target.classList.contains('remove-social-link') || e.target.closest('.remove-social-link')) {
e.target.closest('.social-link-row').remove();
}
});
function addSocialLinkRow(platform = '', url = '') {
const container = document.getElementById('socialLinksContainer');
const row = document.createElement('div');
row.className = 'social-link-row mb-3 d-flex align-items-end';
row.innerHTML = `
<div class="me-2 flex-grow-1">
<label class="form-label">Platform</label>
<select class="form-select platform-select" name="social_links[${socialLinkIndex}][platform]" required>
<option value="">Select Platform</option>
<option value="facebook" ${platform === 'facebook' ? 'selected' : ''}>Facebook</option>
<option value="twitter" ${platform === 'twitter' ? 'selected' : ''}>Twitter/X</option>
<option value="instagram" ${platform === 'instagram' ? 'selected' : ''}>Instagram</option>
<option value="linkedin" ${platform === 'linkedin' ? 'selected' : ''}>LinkedIn</option>
<option value="youtube" ${platform === 'youtube' ? 'selected' : ''}>YouTube</option>
<option value="tiktok" ${platform === 'tiktok' ? 'selected' : ''}>TikTok</option>
<option value="snapchat" ${platform === 'snapchat' ? 'selected' : ''}>Snapchat</option>
<option value="whatsapp" ${platform === 'whatsapp' ? 'selected' : ''}>WhatsApp</option>
<option value="telegram" ${platform === 'telegram' ? 'selected' : ''}>Telegram</option>
<option value="discord" ${platform === 'discord' ? 'selected' : ''}>Discord</option>
<option value="reddit" ${platform === 'reddit' ? 'selected' : ''}>Reddit</option>
<option value="pinterest" ${platform === 'pinterest' ? 'selected' : ''}>Pinterest</option>
<option value="twitch" ${platform === 'twitch' ? 'selected' : ''}>Twitch</option>
<option value="github" ${platform === 'github' ? 'selected' : ''}>GitHub</option>
<option value="spotify" ${platform === 'spotify' ? 'selected' : ''}>Spotify</option>
<option value="skype" ${platform === 'skype' ? 'selected' : ''}>Skype</option>
<option value="slack" ${platform === 'slack' ? 'selected' : ''}>Slack</option>
<option value="medium" ${platform === 'medium' ? 'selected' : ''}>Medium</option>
<option value="vimeo" ${platform === 'vimeo' ? 'selected' : ''}>Vimeo</option>
<option value="messenger" ${platform === 'messenger' ? 'selected' : ''}>Messenger</option>
<option value="wechat" ${platform === 'wechat' ? 'selected' : ''}>WeChat</option>
<option value="line" ${platform === 'line' ? 'selected' : ''}>Line</option>
</select>
</div>
<div class="me-2 flex-grow-1">
<label class="form-label">URL</label>
<input type="url" class="form-control" name="social_links[${socialLinkIndex}][url]" value="${url}" placeholder="https://example.com/username" required>
</div>
<div class="mb-0">
<button type="button" class="btn btn-outline-danger btn-sm remove-social-link">
<i class="bi bi-trash"></i>
</button>
</div>
`;
container.appendChild(row);
socialLinkIndex++;
}
});
</script>
@endsection
resources/views/family/show.blade.php
+85 -72
View File
@@ -8,9 +8,20 @@
<h2 class="fw-bold mb-1">Member Profile</h2>
<p class="text-muted mb-0">Comprehensive member information and analytics</p>
</div>
<a href="{{ route('family.dashboard') }}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left me-2"></i>Back to Family
</a>
<div>
@if($relationship->relationship_type == 'self')
<a href="{{ route('profile.edit') }}" class="btn btn-primary me-2">
<i class="bi bi-pencil me-1"></i>Edit Profile
</a>
@else
<a href="{{ route('family.edit', $relationship->dependent->id) }}" class="btn btn-primary me-2">
<i class="bi bi-pencil me-1"></i>Edit Member
</a>
@endif
<a href="{{ route('family.dashboard') }}" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left me-2"></i>Back to Family
</a>
</div>
</div>
<!-- Profile Card -->
@@ -35,7 +46,9 @@
<i class="bi bi-person-plus me-1"></i>Follow
</button>
</div>
<p class="text-muted fst-italic mb-3">"Every rep brings me closer to my best self. Consistency is my superpower!"</p>
@if($relationship->dependent->motto)
<p class="text-muted fst-italic mb-3">"{{ $relationship->dependent->motto }}"</p>
@endif
<!-- Achievement Badges -->
<div class="d-flex gap-2 mb-3 flex-wrap">
@@ -92,74 +105,74 @@
</div>
<!-- Social Media Icons -->
<div class="d-flex gap-2 flex-wrap">
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Facebook">
<i class="bi bi-facebook"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Twitter/X">
<span style="font-weight: bold; font-size: 1.2rem;">X</span>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Instagram">
<i class="bi bi-instagram"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="LinkedIn">
<i class="bi bi-linkedin"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="YouTube">
<i class="bi bi-youtube"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="TikTok">
<i class="bi bi-tiktok"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Snapchat">
<i class="bi bi-snapchat"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="WhatsApp">
<i class="bi bi-whatsapp"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Telegram">
<i class="bi bi-telegram"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Discord">
<i class="bi bi-discord"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Reddit">
<i class="bi bi-reddit"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Pinterest">
<i class="bi bi-pinterest"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Twitch">
<i class="bi bi-twitch"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="GitHub">
<i class="bi bi-github"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Spotify">
<i class="bi bi-spotify"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Skype">
<i class="bi bi-skype"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Slack">
<i class="bi bi-slack"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Medium">
<i class="bi bi-medium"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Vimeo">
<i class="bi bi-vimeo"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Messenger">
<i class="bi bi-messenger"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="WeChat">
<i class="bi bi-wechat"></i>
</a>
<a href="#" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="Line">
<i class="bi bi-line"></i>
</a>
</div>
@if($relationship->dependent->social_links && count($relationship->dependent->social_links) > 0)
<div class="d-flex gap-2 flex-wrap">
@php
$socialLinks = $relationship->dependent->social_links;
ksort($socialLinks); // Sort by platform name
$socialIcons = [
'facebook' => 'bi-facebook',
'twitter' => 'X', // Special case for Twitter/X
'instagram' => 'bi-instagram',
'linkedin' => 'bi-linkedin',
'youtube' => 'bi-youtube',
'tiktok' => 'bi-tiktok',
'snapchat' => 'bi-snapchat',
'whatsapp' => 'bi-whatsapp',
'telegram' => 'bi-telegram',
'discord' => 'bi-discord',
'reddit' => 'bi-reddit',
'pinterest' => 'bi-pinterest',
'twitch' => 'bi-twitch',
'github' => 'bi-github',
'spotify' => 'bi-spotify',
'skype' => 'bi-skype',
'slack' => 'bi-slack',
'medium' => 'bi-medium',
'vimeo' => 'bi-vimeo',
'messenger' => 'bi-messenger',
'wechat' => 'bi-wechat',
'line' => 'bi-line',
];
$socialTitles = [
'facebook' => 'Facebook',
'twitter' => 'Twitter/X',
'instagram' => 'Instagram',
'linkedin' => 'LinkedIn',
'youtube' => 'YouTube',
'tiktok' => 'TikTok',
'snapchat' => 'Snapchat',
'whatsapp' => 'WhatsApp',
'telegram' => 'Telegram',
'discord' => 'Discord',
'reddit' => 'Reddit',
'pinterest' => 'Pinterest',
'twitch' => 'Twitch',
'github' => 'GitHub',
'spotify' => 'Spotify',
'skype' => 'Skype',
'slack' => 'Slack',
'medium' => 'Medium',
'vimeo' => 'Vimeo',
'messenger' => 'Messenger',
'wechat' => 'WeChat',
'line' => 'Line',
];
@endphp
@foreach($socialLinks as $platform => $url)
@if(!empty($url) && isset($socialIcons[$platform]))
<a href="{{ $url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-outline-secondary rounded-circle" style="width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;" title="{{ $socialTitles[$platform] ?? ucfirst($platform) }}">
@if($platform === 'twitter')
<span style="font-weight: bold; font-size: 1.2rem;">{{ $socialIcons[$platform] }}</span>
@else
<i class="bi {{ $socialIcons[$platform] }}"></i>
@endif
</a>
@endif
@endforeach
</div>
@endif
</div>
</div>
</div>