fixed the explore page

This commit is contained in:
ghassan committed 2026-01-22 02:29:36 +03:00
1 parent fba93887ad
commit f534e10977
17 files changed
+524 -201

No files matched your search

+1 -1
View File
@@ -85,7 +85,7 @@
<option value="">Select Relationship</option>
<option value="son" {{ old('relationship_type') == 'son' ? 'selected' : '' }}>Son</option>
<option value="daughter" {{ old('relationship_type') == 'daughter' ? 'selected' : '' }}>Daughter</option>
<option value="spouse" {{ old('relationship_type') == 'spouse' ? 'selected' : '' }}>Spouse</option>
<option value="spouse" {{ old('relationship_type') == 'spouse' ? 'selected' : '' }}>Wife</option>
<option value="sponsor" {{ old('relationship_type') == 'sponsor' ? 'selected' : '' }}>Sponsor</option>
<option value="other" {{ old('relationship_type') == 'other' ? 'selected' : '' }}>Other</option>
</select>
+15 -24
View File
@@ -18,14 +18,14 @@
<a href="{{ route('profile.show') }}" class="text-decoration-none">
<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="p-4 pb-3" style="background: linear-gradient(135deg, {{ $user->gender == 'm' ? 'rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 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 {{ $user->gender == 'm' ? 'rgba(13, 110, 253, 0.3)' : 'rgba(214, 51, 132, 0.3)' }} !important;">
<div class="rounded-circle border border-4 border-white shadow" style="width: 80px; height: 80px; overflow: hidden; box-shadow: 0 0 0 2px {{ $user->gender == 'm' ? 'rgba(147, 51, 234, 0.3)' : 'rgba(214, 51, 132, 0.3)' }} !important;">
@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-content-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' ? '#8b5cf6 0%, #7c3aed 100%' : '#d63384 0%, #a61e4d 100%' }});">
{{ strtoupper(substr($user->full_name, 0, 1)) }}
</div>
@endif
@@ -43,12 +43,10 @@
<!-- Contact Info -->
<div class="px-4 py-3 bg-light border-top border-bottom">
@if($user->mobile)
<div class="d-flex align-items-center gap-2 small mb-2">
<i class="bi bi-telephone-fill {{ $user->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
<span class="fw-medium text-muted">{{ $user->mobile }}</span>
<span class="fw-medium text-muted">{{ $user->mobile_formatted ?: 'Not provided' }}</span>
</div>
@endif
@if($user->email)
<div class="d-flex align-items-center gap-2 small">
<i class="bi bi-envelope-fill {{ $user->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
@@ -118,9 +116,8 @@
</div>
<!-- Guardian/Sponsor Info - Footer -->
<div class="px-4 py-2 {{ $user->gender == 'm' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 border-top">
<div class="d-flex align-items-center justify-content-center gap-2 small">
<i class="bi bi-person-badge {{ $user->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
<span class="fw-medium {{ $user->gender == 'm' ? 'text-primary' : 'text-danger' }}">
<div class="d-flex align-items-center justify-content-center small">
<span class="fw-medium text-white">
GUARDIAN
</span>
</div>
@@ -135,14 +132,14 @@
<a href="{{ route('family.show', $relationship->dependent->id) }}" class="text-decoration-none">
<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="p-4 pb-3" style="background: linear-gradient(135deg, {{ $relationship->dependent->gender == 'm' ? 'rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 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;">
<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(147, 51, 234, 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-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%' }});">
<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' ? '#8b5cf6 0%, #7c3aed 100%' : '#d63384 0%, #a61e4d 100%' }});">
{{ strtoupper(substr($relationship->dependent->full_name, 0, 1)) }}
</div>
@endif
@@ -181,18 +178,13 @@
<!-- Contact Info -->
<div class="px-4 py-3 bg-light border-top border-bottom">
@if($relationship->dependent->mobile)
<div class="d-flex align-items-center gap-2 small mb-2">
<i class="bi bi-telephone-fill {{ $relationship->dependent->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
<span class="fw-medium text-muted">{{ $relationship->dependent->mobile }}</span>
<span class="fw-medium text-muted">{{ $relationship->dependent->mobile_formatted ?: ($user->mobile_formatted ?: 'Not provided') }}</span>
@if(!$relationship->dependent->mobile_formatted && $user->mobile_formatted)
<span class="badge {{ $relationship->dependent->gender == 'm' ? 'bg-info' : 'bg-danger' }} {{ $relationship->dependent->gender == 'm' ? 'text-dark' : 'text-white' }} ms-auto">Guardian's</span>
@endif
</div>
@elseif($user->mobile)
<div class="d-flex align-items-center gap-2 small mb-2">
<i class="bi bi-telephone-fill {{ $relationship->dependent->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
<span class="fw-medium text-muted">{{ $user->mobile }}</span>
<span class="badge {{ $relationship->dependent->gender == 'm' ? 'bg-info' : 'bg-danger' }} {{ $relationship->dependent->gender == 'm' ? 'text-dark' : 'text-white' }} ms-auto">Guardian's</span>
</div>
@endif
@if($relationship->dependent->email)
<div class="d-flex align-items-center gap-2 small">
<i class="bi bi-envelope-fill {{ $relationship->dependent->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
@@ -268,9 +260,8 @@
<!-- Sponsor/Guardian Info - Footer -->
<div class="px-4 py-2 {{ $relationship->dependent->gender == 'm' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 border-top">
<div class="d-flex align-items-center justify-content-center gap-2 small">
<i class="bi bi-person-badge {{ $relationship->dependent->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
<span class="fw-medium {{ $relationship->dependent->gender == 'm' ? 'text-primary' : 'text-danger' }}">
{{ strtoupper($relationship->relationship_type) }} : {{ strtoupper($user->full_name) }}
<span class="fw-medium text-white">
{{ $relationship->relationship_type === 'spouse' ? 'WIFE' : strtoupper($relationship->relationship_type) }}
</span>
</div>
</div>
+87 -4
View File
@@ -44,9 +44,23 @@
<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) }}">
<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', $relationship->dependent->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', $relationship->dependent->mobile['code'] ?? '+973') }}">
<input id="mobile_number" type="tel" class="form-control @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile', $relationship->dependent->mobile['number'] ?? '') }}" autocomplete="tel" placeholder="Phone number">
</div>
@error('mobile')
<div class="invalid-feedback">{{ $message }}</div>
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
@error('mobile_code')
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
@@ -179,7 +193,7 @@
<option value="">Select Relationship</option>
<option value="son" {{ old('relationship_type', $relationship->relationship_type) == 'son' ? 'selected' : '' }}>Son</option>
<option value="daughter" {{ old('relationship_type', $relationship->relationship_type) == 'daughter' ? 'selected' : '' }}>Daughter</option>
<option value="spouse" {{ old('relationship_type', $relationship->relationship_type) == 'spouse' ? 'selected' : '' }}>Spouse</option>
<option value="spouse" {{ old('relationship_type', $relationship->relationship_type) == 'spouse' ? 'selected' : '' }}>Wife</option>
<option value="sponsor" {{ old('relationship_type', $relationship->relationship_type) == 'sponsor' ? 'selected' : '' }}>Sponsor</option>
<option value="other" {{ old('relationship_type', $relationship->relationship_type) == 'other' ? 'selected' : '' }}>Other</option>
</select>
@@ -200,7 +214,7 @@
<button type="button" class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#deleteModal">
Remove
</button>
<button type="submit" class="btn btn-primary">Update Family Member</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
@@ -308,4 +322,73 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
</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', $relationship->dependent->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
+82 -3
View File
@@ -44,9 +44,23 @@
<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) }}">
<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', $user->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', $user->mobile['code'] ?? '+973') }}" required="">
<input id="mobile_number" type="tel" class="form-control @error('mobile') is-invalid @enderror" name="mobile" value="{{ old('mobile', $user->mobile['number'] ?? '') }}" required="" autocomplete="tel" placeholder="Phone number">
</div>
@error('mobile')
<div class="invalid-feedback">{{ $message }}</div>
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
@error('mobile_code')
<div class="invalid-feedback d-block">{{ $message }}</div>
@enderror
</div>
@@ -174,7 +188,7 @@
<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>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
@@ -192,8 +206,72 @@
/>
</div>
@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', $user->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));
let socialLinkIndex = {{ count($formLinks ?? []) }};
// Add new social link row
@@ -258,4 +336,5 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
</script>
@endpush
@endsection
+16 -85
View File
@@ -9,18 +9,22 @@
<p class="text-muted mb-0">Comprehensive member information and analytics</p>
</div>
<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 class="dropdown">
<button class="btn btn-primary rounded-pill dropdown-toggle" type="button" id="actionDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-lightning me-1"></i>Action
</button>
<ul class="dropdown-menu" aria-labelledby="actionDropdown">
<li><a class="dropdown-item" href="@if($relationship->relationship_type == 'self'){{ route('profile.edit') }}@else{{ route('family.edit', $relationship->dependent->id) }}@endif">
<i class="bi bi-pencil me-2"></i>Edit Info
</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-calendar-check me-2"></i>Add Attendance Record</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-heart-pulse me-2"></i>Add Health Update</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-bullseye me-2"></i>Set a Goal</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-trophy me-2"></i>Add Achievement</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-award me-2"></i>Add Tournament Participation</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-calendar-event me-2"></i>Add Event Participation</a></li>
</ul>
</div>
</div>
</div>
@@ -474,80 +478,7 @@
</div>
</div>
<!-- Club Memberships -->
<div class="card shadow-sm border-0 mb-4">
<div class="card-body p-4">
<h5 class="fw-bold mb-3">Club Memberships</h5>
@if($relationship->dependent->memberClubs->count() > 0)
<div class="row g-3">
@foreach($relationship->dependent->memberClubs as $club)
<div class="col-md-6">
<div class="border rounded p-3">
<div class="d-flex justify-content-between align-items-start">
<div>
<h6 class="fw-bold mb-1">{{ $club->club_name }}</h6>
<small class="text-muted">Status: {{ ucfirst($club->pivot->status) }}</small>
</div>
<span class="badge bg-{{ $club->pivot->status === 'active' ? 'success' : 'secondary' }}">
{{ ucfirst($club->pivot->status) }}
</span>
</div>
</div>
</div>
@endforeach
</div>
@else
<p class="text-center text-muted my-4">No club memberships found.</p>
@endif
</div>
</div>
<!-- Recent Invoices -->
<div class="card shadow-sm border-0">
<div class="card-body p-4">
<h5 class="fw-bold mb-3">Recent Invoices</h5>
@if($relationship->dependent->studentInvoices->count() > 0)
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Club</th>
<th>Amount</th>
<th>Status</th>
<th>Due Date</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach($relationship->dependent->studentInvoices->take(5) as $invoice)
<tr>
<td>{{ $invoice->tenant->club_name }}</td>
<td>${{ number_format($invoice->amount, 2) }}</td>
<td>
@if($invoice->status === 'paid')
<span class="badge bg-success">Paid</span>
@elseif($invoice->status === 'pending')
<span class="badge bg-warning text-dark">Pending</span>
@else
<span class="badge bg-danger">Overdue</span>
@endif
</td>
<td>{{ $invoice->due_date->format('M j, Y') }}</td>
<td>
<a href="{{ route('invoices.show', $invoice->id) }}" class="btn btn-sm btn-outline-primary">
View
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<p class="text-center text-muted my-4">No invoices found.</p>
@endif
</div>
</div>
</div>
<!-- Attendance Tab -->