built user profile added the logo created the family view etc
This commit is contained in:
ghassan committed
1 parent
4a7353e3fc
commit
43c2676d6f
33 files changed
+3783
-257
No files matched your search
@@ -33,8 +33,8 @@
|
||||
<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="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
|
||||
<option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
|
||||
<option value="m" {{ old('gender') == 'm' ? 'selected' : '' }}>Male</option>
|
||||
<option value="f" {{ old('gender') == 'f' ? 'selected' : '' }}>Female</option>
|
||||
</select>
|
||||
@error('gender')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@@ -51,18 +51,30 @@
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="blood_type" class="form-label">Blood Type <span class="text-muted">(Optional)</span></label>
|
||||
<input type="text" class="form-control @error('blood_type') is-invalid @enderror" id="blood_type" name="blood_type" value="{{ old('blood_type') }}">
|
||||
<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') == 'A+' ? 'selected' : '' }}>A+</option>
|
||||
<option value="A-" {{ old('blood_type') == 'A-' ? 'selected' : '' }}>A-</option>
|
||||
<option value="B+" {{ old('blood_type') == 'B+' ? 'selected' : '' }}>B+</option>
|
||||
<option value="B-" {{ old('blood_type') == 'B-' ? 'selected' : '' }}>B-</option>
|
||||
<option value="AB+" {{ old('blood_type') == 'AB+' ? 'selected' : '' }}>AB+</option>
|
||||
<option value="AB-" {{ old('blood_type') == 'AB-' ? 'selected' : '' }}>AB-</option>
|
||||
<option value="O+" {{ old('blood_type') == 'O+' ? 'selected' : '' }}>O+</option>
|
||||
<option value="O-" {{ old('blood_type') == 'O-' ? 'selected' : '' }}>O-</option>
|
||||
<option value="Unknown" {{ old('blood_type') == 'Unknown' ? 'selected' : '' }}>Unknown</option>
|
||||
</select>
|
||||
@error('blood_type')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="nationality" class="form-label">Nationality</label>
|
||||
<input type="text" class="form-control @error('nationality') is-invalid @enderror" id="nationality" name="nationality" value="{{ old('nationality') }}" required>
|
||||
@error('nationality')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<x-country-dropdown
|
||||
name="nationality"
|
||||
id="nationality"
|
||||
:value="old('nationality')"
|
||||
:required="true"
|
||||
:error="$errors->first('nationality')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,63 +12,265 @@
|
||||
</div>
|
||||
|
||||
<!-- Family Members Card Grid -->
|
||||
<div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-5">
|
||||
<!-- Current User Card -->
|
||||
<div class="col">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<img src="{{ $user->media_gallery[0] ?? 'https://via.placeholder.com/150' }}"
|
||||
class="rounded-circle" alt="{{ $user->full_name }}"
|
||||
width="100" height="100">
|
||||
<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">
|
||||
<!-- 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">
|
||||
<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;">
|
||||
@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%' }});">
|
||||
{{ strtoupper(substr($user->full_name, 0, 1)) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 min-w-0">
|
||||
<h5 class="fw-bold mb-2 text-truncate">{{ $user->full_name }}</h5>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<span class="badge {{ $user->gender == 'm' ? 'bg-primary' : 'bg-danger' }}">Adult</span>
|
||||
<span class="badge bg-success">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title">{{ $user->full_name }}</h5>
|
||||
<p class="card-text text-muted">
|
||||
Age: {{ $user->age }} ({{ $user->life_stage }})
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">{{ $user->horoscope }}</small>
|
||||
</p>
|
||||
<a href="{{ route('profile.edit') }}" class="btn btn-primary">
|
||||
<i class="bi bi-pencil"></i> Edit Profile
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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">{{ $user->mobile }}</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>
|
||||
<span class="fw-medium text-truncate">{{ $user->email }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="px-4 py-3 flex-grow-1">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Gender</div>
|
||||
<div class="fw-semibold text-capitalize">{{ $user->gender == 'm' ? 'Male' : 'Female' }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Age</div>
|
||||
<div class="fw-semibold">{{ $user->age }} years</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Nationality</div>
|
||||
<div class="fw-semibold fs-5 nationality-display" data-iso3="{{ $user->nationality }}">{{ $user->nationality }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Horoscope</div>
|
||||
<div class="fw-semibold">
|
||||
@php
|
||||
$horoscopeSymbols = [
|
||||
'Aries' => '♈',
|
||||
'Taurus' => '♉',
|
||||
'Gemini' => '♊',
|
||||
'Cancer' => '♋',
|
||||
'Leo' => '♌',
|
||||
'Virgo' => '♍',
|
||||
'Libra' => '♎',
|
||||
'Scorpio' => '♏',
|
||||
'Sagittarius' => '♐',
|
||||
'Capricorn' => '♑',
|
||||
'Aquarius' => '♒',
|
||||
'Pisces' => '♓'
|
||||
];
|
||||
$horoscope = $user->horoscope ?? 'N/A';
|
||||
$symbol = $horoscopeSymbols[$horoscope] ?? '';
|
||||
@endphp
|
||||
{{ $symbol }} {{ $horoscope }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 border-top">
|
||||
<div class="d-flex justify-content-between align-items-center small mb-2">
|
||||
<span class="text-muted fw-medium">Next Birthday</span>
|
||||
<span class="fw-semibold {{ $user->gender == 'm' ? 'text-primary' : 'text-danger' }}">
|
||||
{{ $user->birthdate->copy()->year(now()->year)->isFuture()
|
||||
? $user->birthdate->copy()->year(now()->year)->diffForHumans(['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE])
|
||||
: $user->birthdate->copy()->year(now()->year + 1)->diffForHumans(['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE]) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span class="text-muted fw-medium">Member Since</span>
|
||||
<span class="fw-semibold">{{ $user->created_at->format('d/m/Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Dependents Cards -->
|
||||
@foreach($dependents as $relationship)
|
||||
<div class="col">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<img src="{{ $relationship->dependent->media_gallery[0] ?? 'https://via.placeholder.com/150' }}"
|
||||
class="rounded-circle" alt="{{ $relationship->dependent->full_name }}"
|
||||
width="100" height="100">
|
||||
<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">
|
||||
<!-- 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
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 min-w-0">
|
||||
<h5 class="fw-bold mb-2 text-truncate">{{ $relationship->dependent->full_name }}</h5>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@php
|
||||
$age = $relationship->dependent->age;
|
||||
$ageGroup = 'Adult';
|
||||
if ($age < 2) {
|
||||
$ageGroup = 'Infant';
|
||||
} elseif ($age < 4) {
|
||||
$ageGroup = 'Toddler';
|
||||
} elseif ($age < 6) {
|
||||
$ageGroup = 'Preschooler';
|
||||
} elseif ($age < 13) {
|
||||
$ageGroup = 'Child';
|
||||
} elseif ($age < 20) {
|
||||
$ageGroup = 'Teenager';
|
||||
} elseif ($age < 40) {
|
||||
$ageGroup = 'Young Adult';
|
||||
} elseif ($age < 60) {
|
||||
$ageGroup = 'Adult';
|
||||
} else {
|
||||
$ageGroup = 'Senior';
|
||||
}
|
||||
@endphp
|
||||
<span class="badge {{ $relationship->dependent->gender == 'm' ? 'bg-primary' : 'bg-danger' }}">{{ $ageGroup }}</span>
|
||||
<span class="badge bg-success">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="card-title">{{ $relationship->dependent->full_name }}</h5>
|
||||
<p class="card-text text-muted">
|
||||
Age: {{ $relationship->dependent->age }} ({{ $relationship->dependent->life_stage }})
|
||||
</p>
|
||||
<span class="badge bg-secondary">{{ ucfirst($relationship->relationship_type) }}</span>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-top-0 text-center">
|
||||
<div class="btn-group" role="group">
|
||||
<a href="{{ route('family.edit', $relationship->dependent->id) }}" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a>
|
||||
<a href="{{ route('family.show', $relationship->dependent->id) }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> View
|
||||
</a>
|
||||
|
||||
<!-- Sponsor/Guardian Info -->
|
||||
<div class="px-4 py-2 {{ $relationship->dependent->gender == 'm' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 border-bottom">
|
||||
<div class="d-flex align-items-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' }}">
|
||||
{{ ucfirst($relationship->relationship_type) }}: {{ $user->full_name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="px-4 py-3 bg-light 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">{{ $relationship->dependent->mobile }}</span>
|
||||
</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">{{ $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>
|
||||
<span class="fw-medium text-truncate">{{ $relationship->dependent->email }}</span>
|
||||
</div>
|
||||
@elseif($user->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>
|
||||
<span class="fw-medium text-truncate">{{ $user->email }}</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
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="px-4 py-3 flex-grow-1">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Gender</div>
|
||||
<div class="fw-semibold text-capitalize">{{ $relationship->dependent->gender == 'm' ? 'Male' : 'Female' }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Age</div>
|
||||
<div class="fw-semibold">{{ $relationship->dependent->age }} years</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Nationality</div>
|
||||
<div class="fw-semibold fs-5 nationality-display" data-iso3="{{ $relationship->dependent->nationality }}">{{ $relationship->dependent->nationality }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Horoscope</div>
|
||||
<div class="fw-semibold">
|
||||
@php
|
||||
$horoscopeSymbols = [
|
||||
'Aries' => '♈',
|
||||
'Taurus' => '♉',
|
||||
'Gemini' => '♊',
|
||||
'Cancer' => '♋',
|
||||
'Leo' => '♌',
|
||||
'Virgo' => '♍',
|
||||
'Libra' => '♎',
|
||||
'Scorpio' => '♏',
|
||||
'Sagittarius' => '♐',
|
||||
'Capricorn' => '♑',
|
||||
'Aquarius' => '♒',
|
||||
'Pisces' => '♓'
|
||||
];
|
||||
$horoscope = $relationship->dependent->horoscope ?? 'N/A';
|
||||
$symbol = $horoscopeSymbols[$horoscope] ?? '';
|
||||
@endphp
|
||||
{{ $symbol }} {{ $horoscope }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 border-top">
|
||||
<div class="d-flex justify-content-between align-items-center small mb-2">
|
||||
<span class="text-muted fw-medium">Next Birthday</span>
|
||||
<span class="fw-semibold {{ $relationship->dependent->gender == 'm' ? 'text-primary' : 'text-danger' }}">
|
||||
{{ $relationship->dependent->birthdate->copy()->year(now()->year)->isFuture()
|
||||
? $relationship->dependent->birthdate->copy()->year(now()->year)->diffForHumans(['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE])
|
||||
: $relationship->dependent->birthdate->copy()->year(now()->year + 1)->diffForHumans(['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE]) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span class="text-muted fw-medium">Member Since</span>
|
||||
<span class="fw-semibold">{{ $relationship->dependent->created_at->format('d/m/Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<!-- Add New Family Member Card -->
|
||||
<div class="col">
|
||||
<div class="card h-100 shadow-sm border-dashed">
|
||||
<div class="card h-100 shadow-sm border-dashed add-card">
|
||||
<a href="{{ route('family.create') }}" class="card-body text-center text-decoration-none d-flex flex-column justify-content-center align-items-center" style="height: 100%;">
|
||||
<div class="mb-3">
|
||||
<i class="bi bi-plus-circle" style="font-size: 3rem;"></i>
|
||||
@@ -149,5 +351,75 @@
|
||||
border-width: 2px !important;
|
||||
border-color: #dee2e6 !important;
|
||||
}
|
||||
|
||||
/* Family Card Hover Effects */
|
||||
.family-card {
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.family-card:hover .rounded-circle {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Remove underline from card links */
|
||||
a.text-decoration-none:hover .family-card {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Add Card Hover Effects */
|
||||
.add-card {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.add-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
|
||||
border-color: #0d6efd !important;
|
||||
}
|
||||
|
||||
.add-card:hover .bi-plus-circle {
|
||||
color: #0d6efd;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.add-card:hover h5 {
|
||||
color: #0d6efd;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load countries from JSON file
|
||||
fetch('/data/countries.json')
|
||||
.then(response => response.json())
|
||||
.then(countries => {
|
||||
// Convert all nationality displays from ISO3 to country name with flag
|
||||
document.querySelectorAll('.nationality-display').forEach(element => {
|
||||
const iso3Code = element.getAttribute('data-iso3');
|
||||
if (!iso3Code) return;
|
||||
|
||||
const country = countries.find(c => c.iso3 === iso3Code);
|
||||
if (country) {
|
||||
// Get flag emoji from ISO2 code
|
||||
const flagEmoji = country.iso2
|
||||
.toUpperCase()
|
||||
.split('')
|
||||
.map(char => String.fromCodePoint(127397 + char.charCodeAt(0)))
|
||||
.join('');
|
||||
|
||||
element.textContent = `${flagEmoji} ${country.iso2.toUpperCase()}`;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error loading countries:', error));
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -34,8 +34,8 @@
|
||||
<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="male" {{ old('gender', $relationship->dependent->gender) == 'male' ? 'selected' : '' }}>Male</option>
|
||||
<option value="female" {{ old('gender', $relationship->dependent->gender) == 'female' ? 'selected' : '' }}>Female</option>
|
||||
<option value="m" {{ old('gender', $relationship->dependent->gender) == 'm' ? 'selected' : '' }}>Male</option>
|
||||
<option value="f" {{ old('gender', $relationship->dependent->gender) == 'f' ? 'selected' : '' }}>Female</option>
|
||||
</select>
|
||||
@error('gender')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@@ -52,18 +52,30 @@
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="blood_type" class="form-label">Blood Type <span class="text-muted">(Optional)</span></label>
|
||||
<input type="text" class="form-control @error('blood_type') is-invalid @enderror" id="blood_type" name="blood_type" value="{{ old('blood_type', $relationship->dependent->blood_type) }}">
|
||||
<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', $relationship->dependent->blood_type) == 'A+' ? 'selected' : '' }}>A+</option>
|
||||
<option value="A-" {{ old('blood_type', $relationship->dependent->blood_type) == 'A-' ? 'selected' : '' }}>A-</option>
|
||||
<option value="B+" {{ old('blood_type', $relationship->dependent->blood_type) == 'B+' ? 'selected' : '' }}>B+</option>
|
||||
<option value="B-" {{ old('blood_type', $relationship->dependent->blood_type) == 'B-' ? 'selected' : '' }}>B-</option>
|
||||
<option value="AB+" {{ old('blood_type', $relationship->dependent->blood_type) == 'AB+' ? 'selected' : '' }}>AB+</option>
|
||||
<option value="AB-" {{ old('blood_type', $relationship->dependent->blood_type) == 'AB-' ? 'selected' : '' }}>AB-</option>
|
||||
<option value="O+" {{ old('blood_type', $relationship->dependent->blood_type) == 'O+' ? 'selected' : '' }}>O+</option>
|
||||
<option value="O-" {{ old('blood_type', $relationship->dependent->blood_type) == 'O-' ? 'selected' : '' }}>O-</option>
|
||||
<option value="Unknown" {{ old('blood_type', $relationship->dependent->blood_type) == 'Unknown' ? 'selected' : '' }}>Unknown</option>
|
||||
</select>
|
||||
@error('blood_type')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="nationality" class="form-label">Nationality</label>
|
||||
<input type="text" class="form-control @error('nationality') is-invalid @enderror" id="nationality" name="nationality" value="{{ old('nationality', $relationship->dependent->nationality) }}" required>
|
||||
@error('nationality')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<x-country-dropdown
|
||||
name="nationality"
|
||||
id="nationality"
|
||||
:value="old('nationality', $relationship->dependent->nationality)"
|
||||
:required="true"
|
||||
:error="$errors->first('nationality')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,91 +2,484 @@
|
||||
|
||||
@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 d-flex justify-content-between align-items-center">
|
||||
<h4 class="mb-0">Family Member Details</h4>
|
||||
<a href="{{ route('family.dashboard') }}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-arrow-left"></i> Back to Family
|
||||
</a>
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<!-- Profile Card -->
|
||||
<div class="card shadow-sm border-0 mb-4 overflow-hidden">
|
||||
<div class="d-flex">
|
||||
<!-- Profile Picture -->
|
||||
<div style="width: 180px; min-height: 250px;">
|
||||
@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" style="font-size: 3rem; 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>
|
||||
|
||||
<!-- Profile Info -->
|
||||
<div class="flex-grow-1 p-4">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h3 class="fw-bold mb-0">{{ $relationship->dependent->full_name }}</h3>
|
||||
<button class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-person-plus me-1"></i>Follow
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="text-center mb-4">
|
||||
<img src="{{ $relationship->dependent->media_gallery[0] ?? 'https://via.placeholder.com/150' }}"
|
||||
class="rounded-circle mb-3" alt="{{ $relationship->dependent->full_name }}"
|
||||
width="120" height="120">
|
||||
<h3>{{ $relationship->dependent->full_name }}</h3>
|
||||
<span class="badge bg-secondary">{{ ucfirst($relationship->relationship_type) }}</span>
|
||||
@if($relationship->is_billing_contact)
|
||||
<span class="badge bg-info ms-2">Billing Contact</span>
|
||||
@endif
|
||||
</div>
|
||||
<p class="text-muted fst-italic mb-3">"Every rep brings me closer to my best self. Consistency is my superpower!"</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Age</h6>
|
||||
<p>{{ $relationship->dependent->age }} years ({{ $relationship->dependent->life_stage }})</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Birthdate</h6>
|
||||
<p>{{ $relationship->dependent->birthdate->format('F j, Y') }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Gender</h6>
|
||||
<p>{{ ucfirst($relationship->dependent->gender) }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Horoscope</h6>
|
||||
<p>{{ $relationship->dependent->horoscope }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Nationality</h6>
|
||||
<p>{{ $relationship->dependent->nationality }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Blood Type</h6>
|
||||
<p>{{ $relationship->dependent->blood_type ?? 'Not specified' }}</p>
|
||||
</div>
|
||||
@if($relationship->dependent->email)
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Email</h6>
|
||||
<p>{{ $relationship->dependent->email }}</p>
|
||||
</div>
|
||||
@endif
|
||||
@if($relationship->dependent->mobile)
|
||||
<div class="col-md-6 mb-3">
|
||||
<h6 class="text-muted">Mobile</h6>
|
||||
<p>{{ $relationship->dependent->mobile }}</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Achievement Badges -->
|
||||
<div class="d-flex gap-2 mb-3 flex-wrap">
|
||||
<a href="#" class="border bg-white rounded px-2 py-1 text-decoration-none" style="font-size: 1rem;">🏆 <span class="fw-semibold text-dark">3</span></a>
|
||||
<a href="#" class="border bg-white rounded px-2 py-1 text-decoration-none" style="font-size: 1rem;">🥇 <span class="fw-semibold text-dark">4</span></a>
|
||||
<a href="#" class="border bg-white rounded px-2 py-1 text-decoration-none" style="font-size: 1rem;">🥈 <span class="fw-semibold text-dark">6</span></a>
|
||||
<a href="#" class="border bg-white rounded px-2 py-1 text-decoration-none" style="font-size: 1rem;">🥉 <span class="fw-semibold text-dark">3</span></a>
|
||||
<a href="#" class="border bg-white rounded px-2 py-1 text-decoration-none" style="font-size: 1rem;">🎯 <span class="fw-semibold text-dark">8</span></a>
|
||||
<a href="#" class="border bg-white rounded px-2 py-1 text-decoration-none" style="font-size: 1rem;">⭐ <span class="fw-semibold text-dark">12</span></a>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<a href="{{ route('family.edit', $relationship->dependent->id) }}" class="btn btn-primary">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</a>
|
||||
<!-- Status Badges -->
|
||||
<div class="d-flex gap-3 mb-3 align-items-center flex-wrap">
|
||||
<span class="text-muted small">
|
||||
<span class="fw-semibold text-dark nationality-display" data-iso3="{{ $relationship->dependent->nationality }}">{{ $relationship->dependent->nationality }}</span>
|
||||
</span>
|
||||
<span class="text-muted small">
|
||||
<i class="bi bi-{{ $relationship->dependent->gender == 'm' ? 'gender-male' : 'gender-female' }} me-1"></i>
|
||||
<span class="fw-semibold text-dark">{{ $relationship->dependent->gender == 'm' ? 'Male' : 'Female' }}</span>
|
||||
</span>
|
||||
<span class="text-muted small">
|
||||
<i class="bi bi-calendar-event me-1"></i>
|
||||
Age <span class="fw-semibold text-dark">{{ $relationship->dependent->age }}</span>
|
||||
</span>
|
||||
<span class="text-muted small">
|
||||
@php
|
||||
$horoscopeSymbols = [
|
||||
'Aries' => '♈',
|
||||
'Taurus' => '♉',
|
||||
'Gemini' => '♊',
|
||||
'Cancer' => '♋',
|
||||
'Leo' => '♌',
|
||||
'Virgo' => '♍',
|
||||
'Libra' => '♎',
|
||||
'Scorpio' => '♏',
|
||||
'Sagittarius' => '♐',
|
||||
'Capricorn' => '♑',
|
||||
'Aquarius' => '♒',
|
||||
'Pisces' => '♓'
|
||||
];
|
||||
$horoscope = $relationship->dependent->horoscope ?? 'N/A';
|
||||
$symbol = $horoscopeSymbols[$horoscope] ?? '';
|
||||
@endphp
|
||||
{{ $symbol }} <span class="fw-semibold text-dark">{{ $horoscope }}</span>
|
||||
</span>
|
||||
<span class="text-muted small">
|
||||
<i class="bi bi-check-circle-fill text-success me-1"></i>
|
||||
<span class="fw-semibold text-success">Active</span>
|
||||
</span>
|
||||
<span class="text-muted small">
|
||||
<i class="bi bi-calendar-check me-1"></i>
|
||||
Joined <span class="fw-semibold text-dark">{{ $relationship->dependent->created_at->format('F Y') }}</span>
|
||||
</span>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Tabs -->
|
||||
<ul class="nav nav-tabs nav-fill mb-4" id="profileTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active text-dark" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
|
||||
<i class="bi bi-eye me-2"></i>Overview
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link text-dark" id="attendance-tab" data-bs-toggle="tab" data-bs-target="#attendance" type="button" role="tab">
|
||||
<i class="bi bi-calendar-check me-2"></i>Attendance
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link text-dark" id="health-tab" data-bs-toggle="tab" data-bs-target="#health" type="button" role="tab">
|
||||
<i class="bi bi-heart-pulse me-2"></i>Health
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link text-dark" id="goals-tab" data-bs-toggle="tab" data-bs-target="#goals" type="button" role="tab">
|
||||
<i class="bi bi-bullseye me-2"></i>Goals
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link text-dark" id="achievements-tab" data-bs-toggle="tab" data-bs-target="#achievements" type="button" role="tab">
|
||||
<i class="bi bi-trophy me-2"></i>Achievements
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link text-dark" id="tournaments-tab" data-bs-toggle="tab" data-bs-target="#tournaments" type="button" role="tab">
|
||||
<i class="bi bi-award me-2"></i>Tournaments
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link text-dark" id="events-tab" data-bs-toggle="tab" data-bs-target="#events" type="button" role="tab">
|
||||
<i class="bi bi-calendar-event me-2"></i>Events
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content" id="profileTabsContent">
|
||||
<!-- Overview Tab -->
|
||||
<div class="tab-pane fade show active" id="overview" role="tabpanel">
|
||||
<!-- Profile Statistics and Revenue Chart Row -->
|
||||
<div class="row mb-4">
|
||||
<!-- Profile Statistics -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm border-0 h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="bi bi-bar-chart-line text-primary me-2"></i>
|
||||
<h5 class="mb-0 fw-bold">Profile Statistics</h5>
|
||||
</div>
|
||||
<p class="text-muted small mb-4">Key performance metrics and milestones</p>
|
||||
|
||||
<div class="row g-3">
|
||||
<!-- Total Sessions -->
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: #6f42c1;">
|
||||
<i class="bi bi-people-fill text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small text-muted mb-1">Total Sessions</div>
|
||||
<div class="h4 fw-bold mb-2">127</div>
|
||||
<div class="progress" style="height: 4px; background-color: #e9ecef;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 85%; background: linear-gradient(90deg, #6f42c1 0%, #8b5cf6 100%);"></div>
|
||||
</div>
|
||||
<small class="text-muted">Sessions completed this year</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Total Revenue -->
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: #10b981;">
|
||||
<i class="bi bi-currency-dollar text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small text-muted mb-1">Total Revenue</div>
|
||||
<div class="h4 fw-bold mb-2">$4250</div>
|
||||
<div class="progress" style="height: 4px; background-color: #e9ecef;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 70%; background: linear-gradient(90deg, #6f42c1 0%, #10b981 100%);"></div>
|
||||
</div>
|
||||
<small class="text-muted">Revenue generated this year</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendance Rate -->
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: #3b82f6;">
|
||||
<i class="bi bi-graph-up-arrow text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small text-muted mb-1">Attendance Rate</div>
|
||||
<div class="h4 fw-bold mb-2">85%</div>
|
||||
<div class="progress" style="height: 4px; background-color: #e9ecef;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 85%; background: linear-gradient(90deg, #6f42c1 0%, #10b981 100%);"></div>
|
||||
</div>
|
||||
<small class="text-muted">Average session attendance</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Member Since -->
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: #f59e0b;">
|
||||
<i class="bi bi-calendar-check text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small text-muted mb-1">Member Since</div>
|
||||
<div class="h4 fw-bold mb-2">1.5</div>
|
||||
<div class="progress" style="height: 4px; background-color: #e9ecef;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 30%; background: linear-gradient(90deg, #6f42c1 0%, #10b981 100%);"></div>
|
||||
</div>
|
||||
<small class="text-muted">Years of membership</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Achievements -->
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: #8b5cf6;">
|
||||
<i class="bi bi-trophy-fill text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small text-muted mb-1">Achievements</div>
|
||||
<div class="h4 fw-bold mb-2">8</div>
|
||||
<div class="progress" style="height: 4px; background-color: #e9ecef;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 40%; background: linear-gradient(90deg, #6f42c1 0%, #10b981 100%);"></div>
|
||||
</div>
|
||||
<small class="text-muted">Total badges earned</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Goal Completion -->
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center gap-3 p-3 bg-light rounded">
|
||||
<div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background-color: #10b981;">
|
||||
<i class="bi bi-check-circle-fill text-white"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<div class="small text-muted mb-1">Goal Completion</div>
|
||||
<div class="h4 fw-bold mb-2">75%</div>
|
||||
<div class="progress" style="height: 4px; background-color: #e9ecef;">
|
||||
<div class="progress-bar" role="progressbar" style="width: 75%; background: linear-gradient(90deg, #6f42c1 0%, #10b981 100%);"></div>
|
||||
</div>
|
||||
<small class="text-muted">Current goals achieved</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Revenue Chart -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm border-0 h-100">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="bi bi-bar-chart-line text-primary me-2"></i>
|
||||
<h5 class="mb-0 fw-bold">Revenue Chart</h5>
|
||||
</div>
|
||||
<p class="text-muted small mb-4">Revenue analytics over time</p>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-center" style="min-height: 300px;">
|
||||
<div class="text-center">
|
||||
<i class="bi bi-graph-up text-muted" style="font-size: 3rem;"></i>
|
||||
<p class="text-muted mt-3 mb-1">Revenue chart visualization coming soon...</p>
|
||||
<small class="text-muted">Chart will display revenue trends over time</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memberships -->
|
||||
<div class="card shadow-sm mt-4">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">Club Memberships</h5>
|
||||
<!-- Complete Payment & Revenue History -->
|
||||
<div class="card shadow-sm border-0 mb-4">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="bi bi-receipt text-primary me-2"></i>
|
||||
<h5 class="mb-0 fw-bold">Complete Payment & Revenue History</h5>
|
||||
</div>
|
||||
<p class="text-muted small mb-4">All package payments and revenue transactions in one view</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="text-muted small fw-semibold">Date</th>
|
||||
<th class="text-muted small fw-semibold">Transaction Type</th>
|
||||
<th class="text-muted small fw-semibold">Package/Item</th>
|
||||
<th class="text-muted small fw-semibold">Duration</th>
|
||||
<th class="text-muted small fw-semibold">Sessions</th>
|
||||
<th class="text-muted small fw-semibold">Amount</th>
|
||||
<th class="text-muted small fw-semibold">Status</th>
|
||||
<th class="text-muted small fw-semibold">Method</th>
|
||||
<th class="text-muted small fw-semibold">Evidence</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small">2023-12-15</td>
|
||||
<td class="small text-primary">Package Payment</td>
|
||||
<td class="small">Premium Fitness + Personal Training</td>
|
||||
<td class="small text-muted">2023-12-15 to 2024-06-15</td>
|
||||
<td class="small">18/24</td>
|
||||
<td class="small fw-semibold" style="color: #10b981;">649.5 BHD</td>
|
||||
<td><span class="badge bg-success-subtle text-success small">✓ Paid</span></td>
|
||||
<td class="small">Credit Card</td>
|
||||
<td class="small">
|
||||
<i class="bi bi-file-earmark-text text-primary"></i>
|
||||
<i class="bi bi-download text-secondary ms-1"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">2024-02-15</td>
|
||||
<td class="small text-primary">Package Payment</td>
|
||||
<td class="small">Premium Fitness + Personal Training</td>
|
||||
<td class="small text-muted">2023-12-15 to 2024-06-15</td>
|
||||
<td class="small">18/24</td>
|
||||
<td class="small fw-semibold" style="color: #f59e0b;">649.5 BHD</td>
|
||||
<td><span class="badge bg-warning-subtle text-warning small">○ Due</span></td>
|
||||
<td class="small">Auto-pay</td>
|
||||
<td class="small">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">2023-06-15</td>
|
||||
<td class="small text-primary">Package Payment</td>
|
||||
<td class="small">Basic Gym Membership</td>
|
||||
<td class="small text-muted">2023-06-15 to 2023-12-15</td>
|
||||
<td class="small">Unlimited</td>
|
||||
<td class="small fw-semibold" style="color: #10b981;">599 BHD</td>
|
||||
<td><span class="badge bg-success-subtle text-success small">✓ Paid</span></td>
|
||||
<td class="small">Bank Transfer</td>
|
||||
<td class="small">
|
||||
<i class="bi bi-file-earmark-text text-primary"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">2024-02-01</td>
|
||||
<td class="small text-primary">Package Payment</td>
|
||||
<td class="small">Nutrition Consultation Package</td>
|
||||
<td class="small text-muted">2024-02-01 to 2024-05-01</td>
|
||||
<td class="small">0/6</td>
|
||||
<td class="small fw-semibold" style="color: #f59e0b;">450 BHD</td>
|
||||
<td><span class="badge bg-warning-subtle text-warning small">○ Due</span></td>
|
||||
<td class="small">Credit Card</td>
|
||||
<td class="small">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">2024-01-08</td>
|
||||
<td class="small text-secondary">Service/Product</td>
|
||||
<td class="small">Personal Training Session - Paid</td>
|
||||
<td class="small">-</td>
|
||||
<td class="small">-</td>
|
||||
<td class="small fw-semibold" style="color: #10b981;">75 BHD</td>
|
||||
<td><span class="badge bg-success-subtle text-success small">✓ Paid</span></td>
|
||||
<td class="small">Credit Card</td>
|
||||
<td class="small">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">2024-01-05</td>
|
||||
<td class="small text-secondary">Service/Product</td>
|
||||
<td class="small">Protein Supplement - Paid</td>
|
||||
<td class="small">-</td>
|
||||
<td class="small">-</td>
|
||||
<td class="small fw-semibold" style="color: #10b981;">45 BHD</td>
|
||||
<td><span class="badge bg-success-subtle text-success small">✓ Paid</span></td>
|
||||
<td class="small">Cash</td>
|
||||
<td class="small">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small">2024-01-01</td>
|
||||
<td class="small text-secondary">Service/Product</td>
|
||||
<td class="small">Monthly Membership - Due</td>
|
||||
<td class="small">-</td>
|
||||
<td class="small">-</td>
|
||||
<td class="small fw-semibold" style="color: #10b981;">99 BHD</td>
|
||||
<td><span class="badge bg-success-subtle text-success small">✓ Paid</span></td>
|
||||
<td class="small">Auto-pay</td>
|
||||
<td class="small">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
</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="list-group">
|
||||
<div class="row g-3">
|
||||
@foreach($relationship->dependent->memberClubs as $club)
|
||||
<div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="mb-1">{{ $club->club_name }}</h6>
|
||||
<small class="text-muted">Status: {{ ucfirst($club->pivot->status) }}</small>
|
||||
<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>
|
||||
<span class="badge bg-{{ $club->pivot->status === 'active' ? 'success' : 'secondary' }} rounded-pill">
|
||||
{{ ucfirst($club->pivot->status) }}
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -96,12 +489,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invoices -->
|
||||
<div class="card shadow-sm mt-4">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">Recent Invoices</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- 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">
|
||||
@@ -139,19 +530,357 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@if($relationship->dependent->studentInvoices->count() > 5)
|
||||
<div class="text-center mt-3">
|
||||
<a href="{{ route('invoices.index') }}" class="btn btn-outline-primary btn-sm">
|
||||
View All Invoices
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<p class="text-center text-muted my-4">No invoices found.</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendance Tab -->
|
||||
<div class="tab-pane fade" id="attendance" role="tabpanel">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-3">Attendance Records</h5>
|
||||
<p class="text-muted">Attendance tracking coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Health Tab -->
|
||||
<div class="tab-pane fade" id="health" role="tabpanel">
|
||||
<!-- Health Tracking Header -->
|
||||
<div class="card shadow-sm border-0 mb-4">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<i class="bi bi-heart-pulse text-danger me-2"></i>
|
||||
<h5 class="mb-0 fw-bold">Health Tracking</h5>
|
||||
</div>
|
||||
<p class="text-muted small mb-4">Monitor health metrics and progress over time</p>
|
||||
|
||||
<!-- Health Metrics Cards -->
|
||||
<div class="row g-3">
|
||||
<!-- Weight -->
|
||||
<div class="col-md-2">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<i class="bi bi-speedometer2 text-purple mb-2" style="font-size: 1.5rem; color: #8b5cf6;"></i>
|
||||
<div class="h4 fw-bold mb-0">75</div>
|
||||
<small class="text-muted">Weight (kg)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body Fat -->
|
||||
<div class="col-md-2">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<i class="bi bi-activity text-warning mb-2" style="font-size: 1.5rem;"></i>
|
||||
<div class="h4 fw-bold mb-0">12.8%</div>
|
||||
<small class="text-muted">Body Fat</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body Water -->
|
||||
<div class="col-md-2">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<i class="bi bi-droplet text-info mb-2" style="font-size: 1.5rem;"></i>
|
||||
<div class="h4 fw-bold mb-0">68.2%</div>
|
||||
<small class="text-muted">Body Water</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Muscle Mass -->
|
||||
<div class="col-md-2">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<i class="bi bi-heart text-success mb-2" style="font-size: 1.5rem;"></i>
|
||||
<div class="h4 fw-bold mb-0">70.5</div>
|
||||
<small class="text-muted">Muscle Mass</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bone Mass -->
|
||||
<div class="col-md-2">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<i class="bi bi-capsule text-secondary mb-2" style="font-size: 1.5rem;"></i>
|
||||
<div class="h4 fw-bold mb-0">3.7</div>
|
||||
<small class="text-muted">Bone Mass</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BMR -->
|
||||
<div class="col-md-2">
|
||||
<div class="text-center p-3 bg-light rounded">
|
||||
<i class="bi bi-lightning text-danger mb-2" style="font-size: 1.5rem;"></i>
|
||||
<div class="h4 fw-bold mb-0">1895</div>
|
||||
<small class="text-muted">BMR (cal)</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body Composition Analysis & Compare Row -->
|
||||
<div class="row mb-4">
|
||||
<!-- Body Composition Analysis -->
|
||||
<div class="col-lg-7">
|
||||
<div class="card shadow-sm border-0 h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-4">Body Composition Analysis</h5>
|
||||
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-radar text-muted" style="font-size: 3rem;"></i>
|
||||
<p class="text-muted mt-3 mb-1">Radar chart visualization coming soon...</p>
|
||||
<small class="text-muted">Chart will compare current vs previous body composition metrics</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compare -->
|
||||
<div class="col-lg-5">
|
||||
<div class="card shadow-sm border-0 h-100">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-4">Compare</h5>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm align-middle">
|
||||
<thead>
|
||||
<tr class="border-bottom">
|
||||
<th class="text-muted small fw-semibold">Metric</th>
|
||||
<th class="text-muted small fw-semibold text-end">Current</th>
|
||||
<th class="text-muted small fw-semibold text-center">Change</th>
|
||||
<th class="text-muted small fw-semibold text-end">Previous</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-speedometer2 me-2"></i>Weight</td>
|
||||
<td class="small text-end fw-semibold">75kg</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-down text-success"></i></td>
|
||||
<td class="small text-end text-muted">77kg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-activity me-2"></i>Body Fat</td>
|
||||
<td class="small text-end fw-semibold">12.8%</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-down text-success"></i></td>
|
||||
<td class="small text-end text-muted">14.5%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-calculator me-2"></i>BMI</td>
|
||||
<td class="small text-end fw-semibold">22.5</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-down text-success"></i></td>
|
||||
<td class="small text-end text-muted">23.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-droplet me-2"></i>Body Water</td>
|
||||
<td class="small text-end fw-semibold">68.2%</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-up text-success"></i></td>
|
||||
<td class="small text-end text-muted">65.8%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-heart me-2"></i>Muscle Mass</td>
|
||||
<td class="small text-end fw-semibold">70.5kg</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-up text-success"></i></td>
|
||||
<td class="small text-end text-muted">68.2kg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-capsule me-2"></i>Bone Mass</td>
|
||||
<td class="small text-end fw-semibold">3.7kg</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-up text-success"></i></td>
|
||||
<td class="small text-end text-muted">3.6kg</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-activity me-2"></i>Visceral Fat</td>
|
||||
<td class="small text-end fw-semibold">3</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-down text-success"></i></td>
|
||||
<td class="small text-end text-muted">4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-lightning me-2"></i>BMR</td>
|
||||
<td class="small text-end fw-semibold">1895cal</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-up text-success"></i></td>
|
||||
<td class="small text-end text-muted">1865cal</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-heart-pulse me-2"></i>Protein</td>
|
||||
<td class="small text-end fw-semibold">19.8%</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-up text-success"></i></td>
|
||||
<td class="small text-end text-muted">18.9%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small"><i class="bi bi-calendar-heart me-2"></i>Body Age</td>
|
||||
<td class="small text-end fw-semibold">25yrs</td>
|
||||
<td class="text-center"><i class="bi bi-arrow-down text-success"></i></td>
|
||||
<td class="small text-end text-muted">27yrs</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Health Tracking History -->
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-4">Health Tracking History</h5>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="text-muted small fw-semibold">Date</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-speedometer2 me-1"></i>Weight (kg)</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-activity me-1"></i>Body Fat %</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-calculator me-1"></i>BMI</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-droplet me-1"></i>Body Water %</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-heart me-1"></i>Muscle Mass (kg)</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-capsule me-1"></i>Bone Mass (kg)</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-activity me-1"></i>Visceral Fat</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-lightning me-1"></i>BMR</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-heart-pulse me-1"></i>Protein %</th>
|
||||
<th class="text-muted small fw-semibold text-center"><i class="bi bi-calendar-heart me-1"></i>Body Age</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="small fw-semibold">Jan 08, 2024</td>
|
||||
<td class="small text-center">75</td>
|
||||
<td class="small text-center">12.8</td>
|
||||
<td class="small text-center">22.5</td>
|
||||
<td class="small text-center">68.2</td>
|
||||
<td class="small text-center">70.5</td>
|
||||
<td class="small text-center">3.7</td>
|
||||
<td class="small text-center">3</td>
|
||||
<td class="small text-center">1895</td>
|
||||
<td class="small text-center">19.8</td>
|
||||
<td class="small text-center">25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small fw-semibold">Jan 01, 2024</td>
|
||||
<td class="small text-center">77</td>
|
||||
<td class="small text-center">14.5</td>
|
||||
<td class="small text-center">23.2</td>
|
||||
<td class="small text-center">65.8</td>
|
||||
<td class="small text-center">68.2</td>
|
||||
<td class="small text-center">3.6</td>
|
||||
<td class="small text-center">4</td>
|
||||
<td class="small text-center">1865</td>
|
||||
<td class="small text-center">18.9</td>
|
||||
<td class="small text-center">27</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small fw-semibold">Dec 25, 2023</td>
|
||||
<td class="small text-center">79</td>
|
||||
<td class="small text-center">16.8</td>
|
||||
<td class="small text-center">23.9</td>
|
||||
<td class="small text-center">63.2</td>
|
||||
<td class="small text-center">66.7</td>
|
||||
<td class="small text-center">3.5</td>
|
||||
<td class="small text-center">5</td>
|
||||
<td class="small text-center">1845</td>
|
||||
<td class="small text-center">18.2</td>
|
||||
<td class="small text-center">29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small fw-semibold">Dec 18, 2023</td>
|
||||
<td class="small text-center">82</td>
|
||||
<td class="small text-center">19.2</td>
|
||||
<td class="small text-center">24.6</td>
|
||||
<td class="small text-center">60.8</td>
|
||||
<td class="small text-center">64.7</td>
|
||||
<td class="small text-center">3.4</td>
|
||||
<td class="small text-center">7</td>
|
||||
<td class="small text-center">1820</td>
|
||||
<td class="small text-center">17.6</td>
|
||||
<td class="small text-center">31</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="small fw-semibold">Dec 11, 2023</td>
|
||||
<td class="small text-center">84</td>
|
||||
<td class="small text-center">21.5</td>
|
||||
<td class="small text-center">25.2</td>
|
||||
<td class="small text-center">58.5</td>
|
||||
<td class="small text-center">63</td>
|
||||
<td class="small text-center">3.4</td>
|
||||
<td class="small text-center">8</td>
|
||||
<td class="small text-center">1795</td>
|
||||
<td class="small text-center">17.1</td>
|
||||
<td class="small text-center">33</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Goals Tab -->
|
||||
<div class="tab-pane fade" id="goals" role="tabpanel">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-3">Goals & Progress</h5>
|
||||
<p class="text-muted">Goal tracking coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Achievements Tab -->
|
||||
<div class="tab-pane fade" id="achievements" role="tabpanel">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-3">Achievements & Badges</h5>
|
||||
<p class="text-muted">Achievement system coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tournaments Tab -->
|
||||
<div class="tab-pane fade" id="tournaments" role="tabpanel">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-3">Tournament History</h5>
|
||||
<p class="text-muted">Tournament records coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events Tab -->
|
||||
<div class="tab-pane fade" id="events" role="tabpanel">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="fw-bold mb-3">Event Participation</h5>
|
||||
<p class="text-muted">Event history coming soon...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load countries from JSON file
|
||||
fetch('/data/countries.json')
|
||||
.then(response => response.json())
|
||||
.then(countries => {
|
||||
// Convert all nationality displays from ISO3 to country name with flag
|
||||
document.querySelectorAll('.nationality-display').forEach(element => {
|
||||
const iso3Code = element.getAttribute('data-iso3');
|
||||
if (!iso3Code) return;
|
||||
|
||||
const country = countries.find(c => c.iso3 === iso3Code);
|
||||
if (country) {
|
||||
// Get flag emoji from ISO2 code
|
||||
const flagEmoji = country.iso2
|
||||
.toUpperCase()
|
||||
.split('')
|
||||
.map(char => String.fromCodePoint(127397 + char.charCodeAt(0)))
|
||||
.join('');
|
||||
|
||||
element.textContent = `${flagEmoji} ${country.name}`;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error loading countries:', error));
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in new issue
Block a user