This commit is contained in:
ghassan committed 2026-01-21 23:07:36 +03:00
1 parent 5c9c4aaa2d
commit 454e5d761b
6 files changed
+803 -211

No files matched your search

+169
View File
@@ -9,6 +9,19 @@
<h4 class="mb-0">Edit Family Member</h4>
</div>
<div class="card-body">
<!-- Profile Picture Section -->
<div class="mb-4 text-center">
<div class="mb-3">
<img src="{{ $relationship->dependent->profile_picture ? asset('storage/' . $relationship->dependent->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('family.update', $relationship->dependent->id) }}">
@csrf
@method('PUT')
@@ -29,6 +42,14 @@
@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', $relationship->dependent->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>
@@ -79,6 +100,78 @@
</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', $relationship->dependent->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 personal motto or quote...">{{ old('motto', $relationship->dependent->motto) }}</textarea>
<div class="form-text">Share a personal motto or quote that inspires them.</div>
@error('motto')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="relationship_type" class="form-label">Relationship</label>
@@ -138,5 +231,81 @@
</div>
</div>
</div>
<!-- Profile Picture Upload Modal -->
<x-image-upload-modal
id="profilePictureModal"
aspectRatio="1"
maxSizeMB="1"
title="Upload Profile Picture"
uploadUrl="{{ route('family.upload-picture', $relationship->dependent->id) }}"
/>
</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