made the add member as a modal not a complete page
This commit is contained in:
ghassan committed
1 parent
cc8ca3f686
commit
30b5f4fa0f
8 files changed
+738
-60
No files matched your search
@@ -28,6 +28,28 @@
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="mobile" class="form-label">Mobile Number</label>
|
||||
<div class="input-group" onclick="event.stopPropagation()">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle country-dropdown-btn d-flex align-items-center" type="button" id="country_codeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<span class="fi fi-bh me-2" id="country_codeSelectedFlag"></span>
|
||||
<span class="country-label" id="country_codeSelectedCountry">{{ old('mobile_code', '+973') }}</span>
|
||||
</button>
|
||||
<div class="dropdown-menu p-2" aria-labelledby="country_codeDropdown" style="min-width: 200px;" onclick="event.stopPropagation()">
|
||||
<input type="text" class="form-control form-control-sm mb-2" placeholder="Search country..." id="country_codeSearch" onkeydown="event.stopPropagation()">
|
||||
<div class="country-list" id="country_codeList" style="max-height: 300px; overflow-y: auto;"></div>
|
||||
</div>
|
||||
<input type="hidden" id="country_code" name="mobile_code" value="{{ old('mobile_code', '+973') }}">
|
||||
<input id="mobile_number" type="tel" class="form-control @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile') }}" autocomplete="tel" placeholder="Phone number">
|
||||
</div>
|
||||
@error('mobile')
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@enderror
|
||||
@error('mobile_code')
|
||||
<div class="invalid-feedback d-block">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="gender" class="form-label">Gender</label>
|
||||
@@ -78,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', []);
|
||||
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') }}</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>
|
||||
@@ -110,4 +204,141 @@
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load countries for mobile code dropdown
|
||||
fetch('/data/countries.json')
|
||||
.then(response => response.json())
|
||||
.then(countries => {
|
||||
const listElement = document.getElementById('country_codeList');
|
||||
const selectedFlag = document.getElementById('country_codeSelectedFlag');
|
||||
const selectedCountry = document.getElementById('country_codeSelectedCountry');
|
||||
const hiddenInput = document.getElementById('country_code');
|
||||
const searchInput = document.getElementById('country_codeSearch');
|
||||
|
||||
if (!listElement) return;
|
||||
|
||||
// Populate dropdown
|
||||
countries.forEach(country => {
|
||||
const button = document.createElement('button');
|
||||
button.className = 'dropdown-item d-flex align-items-center';
|
||||
button.type = 'button';
|
||||
button.setAttribute('data-country-code', country.call_code);
|
||||
button.setAttribute('data-country-name', country.name);
|
||||
button.setAttribute('data-flag-code', country.flag);
|
||||
button.setAttribute('data-search', `${country.name.toLowerCase()} ${country.call_code}`);
|
||||
button.innerHTML = `<span class="fi fi-${country.flag.toLowerCase()} me-2"></span><span>${country.name} (${country.call_code})</span>`;
|
||||
button.addEventListener('click', function() {
|
||||
const code = this.getAttribute('data-country-code');
|
||||
const flag = this.getAttribute('data-flag-code');
|
||||
const name = this.getAttribute('data-country-name');
|
||||
selectedFlag.className = `fi fi-${flag.toLowerCase()} me-2`;
|
||||
selectedCountry.textContent = code;
|
||||
hiddenInput.value = code;
|
||||
// Close dropdown
|
||||
const dropdown = bootstrap.Dropdown.getInstance(document.getElementById('country_codeDropdown'));
|
||||
if (dropdown) dropdown.hide();
|
||||
});
|
||||
listElement.appendChild(button);
|
||||
});
|
||||
|
||||
// Set initial value
|
||||
const initialValue = '{{ old('mobile_code', '+973') }}';
|
||||
if (initialValue) {
|
||||
hiddenInput.value = initialValue;
|
||||
selectedCountry.textContent = initialValue;
|
||||
const country = countries.find(c => c.call_code === initialValue);
|
||||
if (country) {
|
||||
selectedFlag.className = `fi fi-${country.flag.toLowerCase()} me-2`;
|
||||
}
|
||||
}
|
||||
|
||||
// Search functionality
|
||||
searchInput.addEventListener('input', function() {
|
||||
const searchTerm = this.value.toLowerCase();
|
||||
const items = listElement.querySelectorAll('.dropdown-item');
|
||||
items.forEach(item => {
|
||||
const searchData = item.getAttribute('data-search');
|
||||
if (searchData.includes(searchTerm)) {
|
||||
item.style.display = '';
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error loading countries:', error));
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@endsection
|
||||
Reference in new issue
Block a user