latest
This commit is contained in:
ghassan committed
1 parent
5c9c4aaa2d
commit
454e5d761b
6 files changed
+803
-211
No files matched your search
@@ -2,68 +2,123 @@
|
||||
|
||||
@section('content')
|
||||
<div class="container py-4">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h1 class="mb-1"><i class="bi bi-compass me-2"></i>Explore</h1>
|
||||
<p class="text-muted mb-0">Discover what's near you</p>
|
||||
</div>
|
||||
<div>
|
||||
<button id="getLocationBtn" class="btn btn-primary">
|
||||
<i class="bi bi-geo-alt-fill me-2"></i>Use My Location
|
||||
</button>
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-5">
|
||||
<h1 class="display-4 fw-bold text-danger mb-2">Find Your Perfect Fit</h1>
|
||||
<p class="lead text-muted">Discover sports clubs, trainers, nutrition clinics, and more near you</p>
|
||||
<p class="text-muted"><i class="bi bi-geo-alt-fill me-1"></i><span id="currentLocation">Detecting location...</span></p>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar with Near Me Button -->
|
||||
<div class="row justify-content-center mb-4">
|
||||
<div class="col-lg-10">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body p-2">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-0">
|
||||
<i class="bi bi-search"></i>
|
||||
</span>
|
||||
<input type="text" id="searchInput" class="form-control border-0"
|
||||
placeholder="Search for clubs, trainers, nutrition clinics...">
|
||||
<button class="btn btn-danger px-4" id="nearMeBtn" type="button">
|
||||
<i class="bi bi-geo-alt-fill me-2"></i>Near Me
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category Tabs -->
|
||||
<div class="row justify-content-center mb-4">
|
||||
<div class="col-lg-10">
|
||||
<div class="d-flex flex-wrap gap-2 justify-content-center">
|
||||
<button class="btn btn-danger category-btn active" data-category="all">
|
||||
<i class="bi bi-search me-2"></i>All
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="sports-clubs">
|
||||
<i class="bi bi-trophy me-2"></i>Sports Clubs
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="personal-trainers">
|
||||
<i class="bi bi-person me-2"></i>Personal Trainers
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="events">
|
||||
<i class="bi bi-calendar-event me-2"></i>Events
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="nutrition-clinic">
|
||||
<i class="bi bi-apple me-2"></i>Nutrition Clinic
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="physiotherapy-clinics">
|
||||
<i class="bi bi-activity me-2"></i>Physiotherapy Clinics
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="sports-shops">
|
||||
<i class="bi bi-bag me-2"></i>Sports Shops
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="venues">
|
||||
<i class="bi bi-building me-2"></i>Venues
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="supplements">
|
||||
<i class="bi bi-box me-2"></i>Supplements
|
||||
</button>
|
||||
<button class="btn btn-outline-danger category-btn" data-category="food-plans">
|
||||
<i class="bi bi-egg-fried me-2"></i>Food Plans
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location Status Alert -->
|
||||
<div id="locationAlert" class="alert alert-info alert-dismissible fade show" role="alert">
|
||||
<div id="locationAlert" class="alert alert-info alert-dismissible fade" role="alert" style="display: none;">
|
||||
<i class="bi bi-info-circle me-2"></i>
|
||||
<span id="locationMessage">Click "Use My Location" to find clubs near you</span>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
<span id="locationMessage"></span>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<div id="loadingSpinner" class="text-center py-5" style="display: none;">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<div id="loadingSpinner" class="text-center py-5">
|
||||
<div class="spinner-border text-danger" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
<p class="mt-3 text-muted">Finding what's near you...</p>
|
||||
</div>
|
||||
|
||||
<div class="row" id="mainContent" style="display: none;">
|
||||
<!-- Map Column -->
|
||||
<div class="col-lg-8 mb-4">
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-header bg-white border-0 py-3">
|
||||
<h5 class="mb-0"><i class="bi bi-map me-2"></i>Map View</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="map" style="height: 600px; width: 100%;"></div>
|
||||
</div>
|
||||
<!-- Clubs Grid -->
|
||||
<div class="row justify-content-center" id="clubsGrid" style="display: none;">
|
||||
<div class="col-lg-10">
|
||||
<div class="row g-4" id="clubsContainer">
|
||||
<!-- Club cards will be inserted here -->
|
||||
</div>
|
||||
<div id="noResults" class="d-flex flex-column align-items-center justify-content-center text-center" style="display: none; min-height: 400px;">
|
||||
<i class="bi bi-inbox" style="font-size: 4rem; color: #dee2e6;"></i>
|
||||
<h4 class="mt-3 text-muted">No Results Found</h4>
|
||||
<p class="text-muted">Try adjusting your search or location</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clubs List Column -->
|
||||
<div class="col-lg-4">
|
||||
<div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
|
||||
<div class="card-header bg-white border-0 py-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Nearby</h5>
|
||||
<span id="clubCount" class="badge bg-primary">0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0" style="max-height: 600px; overflow-y: auto;">
|
||||
<div id="clubsList" class="list-group list-group-flush">
|
||||
<!-- Clubs will be populated here -->
|
||||
</div>
|
||||
<div id="noClubsMessage" class="text-center py-5" style="display: none;">
|
||||
<i class="bi bi-inbox" style="font-size: 3rem; color: #dee2e6;"></i>
|
||||
<p class="text-muted mt-3">Nothing found in your area</p>
|
||||
<p class="text-muted small">Try expanding your search radius</p>
|
||||
</div>
|
||||
<!-- Map Modal -->
|
||||
<div class="modal fade" id="mapModal" tabindex="-1" aria-labelledby="mapModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header border-0">
|
||||
<h5 class="modal-title" id="mapModalLabel">
|
||||
<i class="bi bi-geo-alt-fill me-2 text-danger"></i>Set Your Location
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<div id="map" style="height: 600px; width: 100%;"></div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 bg-light">
|
||||
<div class="w-100 d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-geo-alt-fill me-1"></i>
|
||||
<span id="modalLocationCoordinates">Drag the marker to set your location</span>
|
||||
</small>
|
||||
<button type="button" class="btn btn-danger" id="applyLocationBtn">
|
||||
<i class="bi bi-check-circle me-2"></i>Apply Location
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,39 +132,94 @@
|
||||
crossorigin=""/>
|
||||
|
||||
<style>
|
||||
.club-item {
|
||||
.category-btn {
|
||||
border-radius: 50px;
|
||||
padding: 0.5rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.club-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
border-left-color: #0d6efd;
|
||||
.category-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.club-item.active {
|
||||
background-color: #e7f1ff;
|
||||
border-left-color: #0d6efd;
|
||||
.category-btn.active {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
|
||||
}
|
||||
|
||||
.distance-badge {
|
||||
font-size: 0.875rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
.club-card {
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
.club-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.club-card-img {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.club-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 15px;
|
||||
min-width: 200px;
|
||||
.stat-box i {
|
||||
font-size: 1.25rem;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.sticky-top {
|
||||
position: sticky;
|
||||
z-index: 1020;
|
||||
.stat-box .stat-number {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.stat-box .stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Pulsing animation for location marker */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-marker {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@@ -123,71 +233,100 @@
|
||||
<script>
|
||||
let map;
|
||||
let userMarker;
|
||||
let clubMarkers = [];
|
||||
let searchRadiusCircle;
|
||||
let userLocation = null;
|
||||
let watchId = null;
|
||||
let currentCategory = 'all';
|
||||
let allClubs = [];
|
||||
|
||||
// Initialize the page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Check if geolocation is supported
|
||||
if (!navigator.geolocation) {
|
||||
showAlert('Geolocation is not supported by your browser', 'danger');
|
||||
document.getElementById('getLocationBtn').disabled = true;
|
||||
document.getElementById('loadingSpinner').style.display = 'none';
|
||||
} else {
|
||||
// Automatically start watching user's location
|
||||
startWatchingLocation();
|
||||
}
|
||||
|
||||
// Get location button click handler
|
||||
document.getElementById('getLocationBtn').addEventListener('click', getUserLocation);
|
||||
// Category buttons
|
||||
document.querySelectorAll('.category-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
document.querySelectorAll('.category-btn').forEach(b => {
|
||||
b.classList.remove('active', 'btn-danger');
|
||||
b.classList.add('btn-outline-danger');
|
||||
});
|
||||
this.classList.remove('btn-outline-danger');
|
||||
this.classList.add('active', 'btn-danger');
|
||||
|
||||
currentCategory = this.dataset.category;
|
||||
filterClubs();
|
||||
});
|
||||
});
|
||||
|
||||
// Search input
|
||||
document.getElementById('searchInput').addEventListener('input', function() {
|
||||
filterClubs();
|
||||
});
|
||||
|
||||
// Near Me button
|
||||
document.getElementById('nearMeBtn').addEventListener('click', function() {
|
||||
const mapModal = new bootstrap.Modal(document.getElementById('mapModal'));
|
||||
mapModal.show();
|
||||
|
||||
// Initialize map when modal is shown
|
||||
setTimeout(() => {
|
||||
if (userLocation) {
|
||||
initMap(userLocation.latitude, userLocation.longitude);
|
||||
}
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Apply Location button
|
||||
document.getElementById('applyLocationBtn').addEventListener('click', function() {
|
||||
const mapModal = bootstrap.Modal.getInstance(document.getElementById('mapModal'));
|
||||
mapModal.hide();
|
||||
|
||||
if (userLocation) {
|
||||
fetchNearbyClubs(userLocation.latitude, userLocation.longitude);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Get user's current location
|
||||
function getUserLocation() {
|
||||
const btn = document.getElementById('getLocationBtn');
|
||||
const originalText = btn.innerHTML;
|
||||
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Getting location...';
|
||||
|
||||
showAlert('Requesting your location...', 'info');
|
||||
document.getElementById('loadingSpinner').style.display = 'block';
|
||||
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
// Start watching user's location
|
||||
function startWatchingLocation() {
|
||||
watchId = navigator.geolocation.watchPosition(
|
||||
function(position) {
|
||||
userLocation = {
|
||||
latitude: position.coords.latitude,
|
||||
longitude: position.coords.longitude
|
||||
};
|
||||
|
||||
showAlert(`Location found: ${userLocation.latitude.toFixed(4)}, ${userLocation.longitude.toFixed(4)}`, 'success');
|
||||
|
||||
// Initialize map
|
||||
initMap(userLocation.latitude, userLocation.longitude);
|
||||
|
||||
// Fetch nearby clubs
|
||||
updateLocationDisplay(userLocation.latitude, userLocation.longitude);
|
||||
fetchNearbyClubs(userLocation.latitude, userLocation.longitude);
|
||||
|
||||
btn.innerHTML = '<i class="bi bi-geo-alt-fill me-2"></i>Update Location';
|
||||
btn.disabled = false;
|
||||
// Stop watching after first successful location
|
||||
if (watchId) {
|
||||
navigator.geolocation.clearWatch(watchId);
|
||||
watchId = null;
|
||||
}
|
||||
},
|
||||
function(error) {
|
||||
let errorMessage = 'Unable to get your location. ';
|
||||
|
||||
switch(error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
errorMessage += 'Please allow location access in your browser settings.';
|
||||
errorMessage += 'Please allow location access.';
|
||||
break;
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
errorMessage += 'Location information is unavailable.';
|
||||
errorMessage += 'Location unavailable.';
|
||||
break;
|
||||
case error.TIMEOUT:
|
||||
errorMessage += 'Location request timed out.';
|
||||
errorMessage += 'Request timed out.';
|
||||
break;
|
||||
default:
|
||||
errorMessage += 'An unknown error occurred.';
|
||||
}
|
||||
|
||||
showAlert(errorMessage, 'danger');
|
||||
document.getElementById('loadingSpinner').style.display = 'none';
|
||||
btn.innerHTML = originalText;
|
||||
btn.disabled = false;
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
@@ -197,48 +336,64 @@ function getUserLocation() {
|
||||
);
|
||||
}
|
||||
|
||||
// Initialize the map
|
||||
// Update location display
|
||||
function updateLocationDisplay(lat, lng) {
|
||||
document.getElementById('currentLocation').textContent =
|
||||
`${lat.toFixed(4)}, ${lng.toFixed(4)}`;
|
||||
document.getElementById('modalLocationCoordinates').textContent =
|
||||
`Latitude: ${lat.toFixed(6)}, Longitude: ${lng.toFixed(6)}`;
|
||||
}
|
||||
|
||||
// Initialize map in modal
|
||||
function initMap(lat, lng) {
|
||||
// Remove existing map if any
|
||||
if (map) {
|
||||
map.remove();
|
||||
}
|
||||
|
||||
// Create map centered on user's location
|
||||
map = L.map('map').setView([lat, lng], 13);
|
||||
|
||||
// Add OpenStreetMap tiles (free!)
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
maxZoom: 19
|
||||
}).addTo(map);
|
||||
|
||||
// Add user location marker
|
||||
// Add draggable marker
|
||||
userMarker = L.marker([lat, lng], {
|
||||
draggable: true,
|
||||
icon: L.divIcon({
|
||||
className: 'user-location-marker',
|
||||
html: '<div style="background-color: #0d6efd; width: 20px; height: 20px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3);"></div>',
|
||||
iconSize: [20, 20],
|
||||
iconAnchor: [10, 10]
|
||||
html: '<i class="bi bi-geo-alt-fill pulse-marker" style="font-size: 36px; color: #dc3545; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));"></i>',
|
||||
iconSize: [36, 36],
|
||||
iconAnchor: [18, 36]
|
||||
})
|
||||
}).addTo(map);
|
||||
|
||||
userMarker.bindPopup('<strong>Your Location</strong>').openPopup();
|
||||
// Drag event
|
||||
userMarker.on('dragend', function(event) {
|
||||
const position = event.target.getLatLng();
|
||||
userLocation = {
|
||||
latitude: position.lat,
|
||||
longitude: position.lng
|
||||
};
|
||||
updateLocationDisplay(position.lat, position.lng);
|
||||
});
|
||||
|
||||
// Add circle to show search radius
|
||||
L.circle([lat, lng], {
|
||||
color: '#0d6efd',
|
||||
fillColor: '#0d6efd',
|
||||
fillOpacity: 0.1,
|
||||
radius: 50000 // 50km radius
|
||||
}).addTo(map);
|
||||
// Search radius circle (removed - no red tint on map)
|
||||
// searchRadiusCircle = L.circle([lat, lng], {
|
||||
// color: '#dc3545',
|
||||
// fillColor: '#dc3545',
|
||||
// fillOpacity: 0.1,
|
||||
// radius: 50000
|
||||
// }).addTo(map);
|
||||
|
||||
document.getElementById('mainContent').style.display = 'block';
|
||||
document.getElementById('loadingSpinner').style.display = 'none';
|
||||
setTimeout(() => map.invalidateSize(), 100);
|
||||
}
|
||||
|
||||
// Fetch nearby clubs from API
|
||||
// Fetch nearby clubs
|
||||
function fetchNearbyClubs(lat, lng) {
|
||||
document.getElementById('loadingSpinner').style.display = 'block';
|
||||
document.getElementById('clubsGrid').style.display = 'none';
|
||||
|
||||
fetch(`{{ route('clubs.nearby') }}?latitude=${lat}&longitude=${lng}&radius=50`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
@@ -248,128 +403,116 @@ function fetchNearbyClubs(lat, lng) {
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
displayClubs(data.clubs);
|
||||
document.getElementById('clubCount').textContent = data.total;
|
||||
document.getElementById('loadingSpinner').style.display = 'none';
|
||||
document.getElementById('clubsGrid').style.display = 'block';
|
||||
|
||||
if (data.total === 0) {
|
||||
document.getElementById('noClubsMessage').style.display = 'block';
|
||||
document.getElementById('clubsList').style.display = 'none';
|
||||
} else {
|
||||
document.getElementById('noClubsMessage').style.display = 'none';
|
||||
document.getElementById('clubsList').style.display = 'block';
|
||||
}
|
||||
if (data.success) {
|
||||
allClubs = data.clubs;
|
||||
displayClubs(allClubs);
|
||||
} else {
|
||||
showAlert('Failed to fetch clubs', 'danger');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showAlert('Error fetching clubs. Please try again.', 'danger');
|
||||
document.getElementById('loadingSpinner').style.display = 'none';
|
||||
showAlert('Error fetching clubs', 'danger');
|
||||
});
|
||||
}
|
||||
|
||||
// Display clubs on map and in list
|
||||
// Display clubs as cards
|
||||
function displayClubs(clubs) {
|
||||
// Clear existing club markers
|
||||
clubMarkers.forEach(marker => map.removeLayer(marker));
|
||||
clubMarkers = [];
|
||||
const container = document.getElementById('clubsContainer');
|
||||
const noResults = document.getElementById('noResults');
|
||||
|
||||
const clubsList = document.getElementById('clubsList');
|
||||
clubsList.innerHTML = '';
|
||||
container.innerHTML = '';
|
||||
|
||||
clubs.forEach((club, index) => {
|
||||
// Add marker to map
|
||||
const marker = L.marker([club.gps_lat, club.gps_long], {
|
||||
icon: L.divIcon({
|
||||
className: 'club-marker',
|
||||
html: `<div style="background-color: #dc3545; color: white; width: 30px; height: 30px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px;">${index + 1}</div>`,
|
||||
iconSize: [30, 30],
|
||||
iconAnchor: [15, 15]
|
||||
})
|
||||
}).addTo(map);
|
||||
if (clubs.length === 0) {
|
||||
noResults.style.display = 'flex';
|
||||
return;
|
||||
}
|
||||
|
||||
marker.bindPopup(`
|
||||
<div class="text-center">
|
||||
<h6 class="mb-2">${club.club_name}</h6>
|
||||
<p class="mb-1 small text-muted"><i class="bi bi-geo-alt"></i> ${club.distance} km away</p>
|
||||
<p class="mb-1 small"><strong>Owner:</strong> ${club.owner_name}</p>
|
||||
${club.owner_mobile ? `<p class="mb-1 small"><i class="bi bi-telephone"></i> ${club.owner_mobile}</p>` : ''}
|
||||
${club.owner_email ? `<p class="mb-0 small"><i class="bi bi-envelope"></i> ${club.owner_email}</p>` : ''}
|
||||
</div>
|
||||
`);
|
||||
noResults.style.display = 'none';
|
||||
|
||||
clubMarkers.push(marker);
|
||||
|
||||
// Add to list
|
||||
const clubItem = document.createElement('div');
|
||||
clubItem.className = 'club-item list-group-item list-group-item-action';
|
||||
clubItem.innerHTML = `
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div class="flex-grow-1">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-danger me-2">${index + 1}</span>
|
||||
<h6 class="mb-0">${club.club_name}</h6>
|
||||
</div>
|
||||
<p class="mb-1 small text-muted">
|
||||
<i class="bi bi-person-circle me-1"></i>${club.owner_name}
|
||||
</p>
|
||||
${club.owner_mobile ? `
|
||||
<p class="mb-1 small text-muted">
|
||||
<i class="bi bi-telephone me-1"></i>${club.owner_mobile}
|
||||
</p>` : ''}
|
||||
clubs.forEach(club => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'col-md-6 col-lg-4';
|
||||
card.innerHTML = `
|
||||
<div class="card club-card shadow-sm h-100">
|
||||
<div class="position-relative">
|
||||
<img src="https://via.placeholder.com/400x200?text=${encodeURIComponent(club.club_name)}"
|
||||
class="club-card-img" alt="${club.club_name}">
|
||||
<span class="club-badge">Sports Club</span>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<span class="badge bg-primary distance-badge">
|
||||
<i class="bi bi-geo-alt"></i> ${club.distance} km
|
||||
</span>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title mb-2">${club.club_name}</h5>
|
||||
<p class="text-danger mb-2">
|
||||
<i class="bi bi-geo-alt-fill me-1"></i>${club.distance} km away
|
||||
</p>
|
||||
<p class="text-muted small mb-3">
|
||||
<i class="bi bi-geo me-1"></i>${club.owner_name || 'N/A'}
|
||||
</p>
|
||||
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-4">
|
||||
<div class="stat-box">
|
||||
<i class="bi bi-people"></i>
|
||||
<div class="stat-number">0</div>
|
||||
<div class="stat-label">Members</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-box">
|
||||
<i class="bi bi-box"></i>
|
||||
<div class="stat-number">0</div>
|
||||
<div class="stat-label">Packages</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="stat-box">
|
||||
<i class="bi bi-person-badge"></i>
|
||||
<div class="stat-number">0</div>
|
||||
<div class="stat-label">Trainers</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-danger">
|
||||
<i class="bi bi-person-plus me-2"></i>Join Club
|
||||
</button>
|
||||
<button class="btn btn-outline-danger">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Click handler to focus on club marker
|
||||
clubItem.addEventListener('click', function() {
|
||||
// Remove active class from all items
|
||||
document.querySelectorAll('.club-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
});
|
||||
|
||||
// Add active class to clicked item
|
||||
this.classList.add('active');
|
||||
|
||||
// Pan to marker and open popup
|
||||
map.setView([club.gps_lat, club.gps_long], 15);
|
||||
marker.openPopup();
|
||||
});
|
||||
|
||||
clubsList.appendChild(clubItem);
|
||||
container.appendChild(card);
|
||||
});
|
||||
|
||||
// Fit map to show all markers
|
||||
if (clubs.length > 0 && userLocation) {
|
||||
const bounds = L.latLngBounds([
|
||||
[userLocation.latitude, userLocation.longitude],
|
||||
...clubs.map(club => [club.gps_lat, club.gps_long])
|
||||
]);
|
||||
map.fitBounds(bounds, { padding: [50, 50] });
|
||||
}
|
||||
}
|
||||
|
||||
// Show alert message
|
||||
function showAlert(message, type = 'info') {
|
||||
// Filter clubs
|
||||
function filterClubs() {
|
||||
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
||||
|
||||
let filtered = allClubs.filter(club => {
|
||||
const matchesSearch = club.club_name.toLowerCase().includes(searchTerm) ||
|
||||
(club.owner_name && club.owner_name.toLowerCase().includes(searchTerm));
|
||||
|
||||
// Add category filtering logic here when categories are available in data
|
||||
return matchesSearch;
|
||||
});
|
||||
|
||||
displayClubs(filtered);
|
||||
}
|
||||
|
||||
// Show alert
|
||||
function showAlert(message, type = 'danger') {
|
||||
const alert = document.getElementById('locationAlert');
|
||||
const messageSpan = document.getElementById('locationMessage');
|
||||
|
||||
alert.style.display = 'block';
|
||||
alert.className = `alert alert-${type} alert-dismissible fade show`;
|
||||
messageSpan.textContent = message;
|
||||
|
||||
// Auto-dismiss success messages after 5 seconds
|
||||
if (type === 'success') {
|
||||
setTimeout(() => {
|
||||
const bsAlert = new bootstrap.Alert(alert);
|
||||
bsAlert.close();
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@@ -9,6 +9,19 @@
|
||||
<h4 class="mb-0">Edit Family Member</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Profile Picture Section -->
|
||||
<div class="mb-4 text-center">
|
||||
<div class="mb-3">
|
||||
<img src="{{ $relationship->dependent->profile_picture ? asset('storage/' . $relationship->dependent->profile_picture) : asset('images/default-avatar.png') }}"
|
||||
alt="Profile Picture"
|
||||
class="rounded-circle"
|
||||
style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #dee2e6;">
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#profilePictureModal">
|
||||
<i class="fas fa-camera"></i> Change Profile Picture
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ route('family.update', $relationship->dependent->id) }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
@@ -29,6 +42,14 @@
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="mobile" class="form-label">Mobile Number</label>
|
||||
<input type="text" class="form-control @error('mobile') is-invalid @enderror" id="mobile" name="mobile" value="{{ old('mobile', $relationship->dependent->mobile) }}">
|
||||
@error('mobile')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="gender" class="form-label">Gender</label>
|
||||
@@ -79,6 +100,78 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<h5 class="form-label d-flex justify-content-between align-items-center">
|
||||
Social Media Links
|
||||
<button type="button" class="btn btn-outline-primary btn-sm" id="addSocialLink">
|
||||
<i class="bi bi-plus"></i> Add Link
|
||||
</button>
|
||||
</h5>
|
||||
<div id="socialLinksContainer">
|
||||
@php
|
||||
$existingLinks = old('social_links', $relationship->dependent->social_links ?? []);
|
||||
if (!is_array($existingLinks)) {
|
||||
$existingLinks = [];
|
||||
}
|
||||
// Convert associative array to array of arrays for form display
|
||||
$formLinks = [];
|
||||
foreach ($existingLinks as $platform => $url) {
|
||||
$formLinks[] = ['platform' => $platform, 'url' => $url];
|
||||
}
|
||||
@endphp
|
||||
@foreach($formLinks as $index => $link)
|
||||
<div class="social-link-row mb-3 d-flex align-items-end">
|
||||
<div class="me-2 flex-grow-1">
|
||||
<label class="form-label">Platform</label>
|
||||
<select class="form-select platform-select" name="social_links[{{ $index }}][platform]" required>
|
||||
<option value="">Select Platform</option>
|
||||
<option value="facebook" {{ ($link['platform'] ?? '') == 'facebook' ? 'selected' : '' }}>Facebook</option>
|
||||
<option value="twitter" {{ ($link['platform'] ?? '') == 'twitter' ? 'selected' : '' }}>Twitter/X</option>
|
||||
<option value="instagram" {{ ($link['platform'] ?? '') == 'instagram' ? 'selected' : '' }}>Instagram</option>
|
||||
<option value="linkedin" {{ ($link['platform'] ?? '') == 'linkedin' ? 'selected' : '' }}>LinkedIn</option>
|
||||
<option value="youtube" {{ ($link['platform'] ?? '') == 'youtube' ? 'selected' : '' }}>YouTube</option>
|
||||
<option value="tiktok" {{ ($link['platform'] ?? '') == 'tiktok' ? 'selected' : '' }}>TikTok</option>
|
||||
<option value="snapchat" {{ ($link['platform'] ?? '') == 'snapchat' ? 'selected' : '' }}>Snapchat</option>
|
||||
<option value="whatsapp" {{ ($link['platform'] ?? '') == 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
|
||||
<option value="telegram" {{ ($link['platform'] ?? '') == 'telegram' ? 'selected' : '' }}>Telegram</option>
|
||||
<option value="discord" {{ ($link['platform'] ?? '') == 'discord' ? 'selected' : '' }}>Discord</option>
|
||||
<option value="reddit" {{ ($link['platform'] ?? '') == 'reddit' ? 'selected' : '' }}>Reddit</option>
|
||||
<option value="pinterest" {{ ($link['platform'] ?? '') == 'pinterest' ? 'selected' : '' }}>Pinterest</option>
|
||||
<option value="twitch" {{ ($link['platform'] ?? '') == 'twitch' ? 'selected' : '' }}>Twitch</option>
|
||||
<option value="github" {{ ($link['platform'] ?? '') == 'github' ? 'selected' : '' }}>GitHub</option>
|
||||
<option value="spotify" {{ ($link['platform'] ?? '') == 'spotify' ? 'selected' : '' }}>Spotify</option>
|
||||
<option value="skype" {{ ($link['platform'] ?? '') == 'skype' ? 'selected' : '' }}>Skype</option>
|
||||
<option value="slack" {{ ($link['platform'] ?? '') == 'slack' ? 'selected' : '' }}>Slack</option>
|
||||
<option value="medium" {{ ($link['platform'] ?? '') == 'medium' ? 'selected' : '' }}>Medium</option>
|
||||
<option value="vimeo" {{ ($link['platform'] ?? '') == 'vimeo' ? 'selected' : '' }}>Vimeo</option>
|
||||
<option value="messenger" {{ ($link['platform'] ?? '') == 'messenger' ? 'selected' : '' }}>Messenger</option>
|
||||
<option value="wechat" {{ ($link['platform'] ?? '') == 'wechat' ? 'selected' : '' }}>WeChat</option>
|
||||
<option value="line" {{ ($link['platform'] ?? '') == 'line' ? 'selected' : '' }}>Line</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="me-2 flex-grow-1">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" class="form-control" name="social_links[{{ $index }}][url]" value="{{ $link['url'] ?? '' }}" placeholder="https://example.com/username" required>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<button type="button" class="btn btn-outline-danger btn-sm remove-social-link">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="motto" class="form-label">Personal Motto</label>
|
||||
<textarea class="form-control @error('motto') is-invalid @enderror" id="motto" name="motto" rows="3" placeholder="Enter personal motto or quote...">{{ old('motto', $relationship->dependent->motto) }}</textarea>
|
||||
<div class="form-text">Share a personal motto or quote that inspires them.</div>
|
||||
@error('motto')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="relationship_type" class="form-label">Relationship</label>
|
||||
@@ -138,5 +231,81 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Profile Picture Upload Modal -->
|
||||
<x-image-upload-modal
|
||||
id="profilePictureModal"
|
||||
aspectRatio="1"
|
||||
maxSizeMB="1"
|
||||
title="Upload Profile Picture"
|
||||
uploadUrl="{{ route('family.upload-picture', $relationship->dependent->id) }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let socialLinkIndex = {{ count($formLinks ?? []) }};
|
||||
|
||||
// Add new social link row
|
||||
document.getElementById('addSocialLink').addEventListener('click', function() {
|
||||
addSocialLinkRow();
|
||||
});
|
||||
|
||||
// Remove social link row
|
||||
document.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('remove-social-link') || e.target.closest('.remove-social-link')) {
|
||||
e.target.closest('.social-link-row').remove();
|
||||
}
|
||||
});
|
||||
|
||||
function addSocialLinkRow(platform = '', url = '') {
|
||||
const container = document.getElementById('socialLinksContainer');
|
||||
const row = document.createElement('div');
|
||||
row.className = 'social-link-row mb-3 d-flex align-items-end';
|
||||
|
||||
row.innerHTML = `
|
||||
<div class="me-2 flex-grow-1">
|
||||
<label class="form-label">Platform</label>
|
||||
<select class="form-select platform-select" name="social_links[${socialLinkIndex}][platform]" required>
|
||||
<option value="">Select Platform</option>
|
||||
<option value="facebook" ${platform === 'facebook' ? 'selected' : ''}>Facebook</option>
|
||||
<option value="twitter" ${platform === 'twitter' ? 'selected' : ''}>Twitter/X</option>
|
||||
<option value="instagram" ${platform === 'instagram' ? 'selected' : ''}>Instagram</option>
|
||||
<option value="linkedin" ${platform === 'linkedin' ? 'selected' : ''}>LinkedIn</option>
|
||||
<option value="youtube" ${platform === 'youtube' ? 'selected' : ''}>YouTube</option>
|
||||
<option value="tiktok" ${platform === 'tiktok' ? 'selected' : ''}>TikTok</option>
|
||||
<option value="snapchat" ${platform === 'snapchat' ? 'selected' : ''}>Snapchat</option>
|
||||
<option value="whatsapp" ${platform === 'whatsapp' ? 'selected' : ''}>WhatsApp</option>
|
||||
<option value="telegram" ${platform === 'telegram' ? 'selected' : ''}>Telegram</option>
|
||||
<option value="discord" ${platform === 'discord' ? 'selected' : ''}>Discord</option>
|
||||
<option value="reddit" ${platform === 'reddit' ? 'selected' : ''}>Reddit</option>
|
||||
<option value="pinterest" ${platform === 'pinterest' ? 'selected' : ''}>Pinterest</option>
|
||||
<option value="twitch" ${platform === 'twitch' ? 'selected' : ''}>Twitch</option>
|
||||
<option value="github" ${platform === 'github' ? 'selected' : ''}>GitHub</option>
|
||||
<option value="spotify" ${platform === 'spotify' ? 'selected' : ''}>Spotify</option>
|
||||
<option value="skype" ${platform === 'skype' ? 'selected' : ''}>Skype</option>
|
||||
<option value="slack" ${platform === 'slack' ? 'selected' : ''}>Slack</option>
|
||||
<option value="medium" ${platform === 'medium' ? 'selected' : ''}>Medium</option>
|
||||
<option value="vimeo" ${platform === 'vimeo' ? 'selected' : ''}>Vimeo</option>
|
||||
<option value="messenger" ${platform === 'messenger' ? 'selected' : ''}>Messenger</option>
|
||||
<option value="wechat" ${platform === 'wechat' ? 'selected' : ''}>WeChat</option>
|
||||
<option value="line" ${platform === 'line' ? 'selected' : ''}>Line</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="me-2 flex-grow-1">
|
||||
<label class="form-label">URL</label>
|
||||
<input type="url" class="form-control" name="social_links[${socialLinkIndex}][url]" value="${url}" placeholder="https://example.com/username" required>
|
||||
</div>
|
||||
<div class="mb-0">
|
||||
<button type="button" class="btn btn-outline-danger btn-sm remove-social-link">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.appendChild(row);
|
||||
socialLinkIndex++;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
Reference in new issue
Block a user