latest

EXPLORE_AUTO_LOCATION_UPDATE.md

@@ -0,0 +1,89 @@
+# Explore Page - Automatic Location Tracking Implementation
+
+## Summary
+Successfully removed the "Use My Location" button and implemented automatic location tracking on the explore page (http://127.0.0.1:8000/explore).
+
+## Changes Made
+
+### File Modified
+- `resources/views/clubs/explore.blade.php`
+
+### Key Changes
+
+#### 1. UI Changes
+- **Removed**: "Use My Location" button from the page header
+- **Removed**: Success alert messages for location detection
+- **Added**: Map card footer displaying current coordinates (Latitude & Longitude)
+- **Updated**: Alert box now only shows for errors (hidden by default)
+
+#### 2. JavaScript Functionality Changes
+
+##### Added Variables
+- `watchId`: Stores the geolocation watch ID for continuous tracking
+- `isFirstLocation`: Flag to differentiate between initial location detection and updates
+
+##### Modified Functions
+- **Removed**: `getUserLocation()` function (no longer needed)
+- **Added**: `startWatchingLocation()` function that uses `navigator.geolocation.watchPosition()` instead of `getCurrentPosition()`
+- **Added**: `updateUserLocation(lat, lng)` function to update the user marker position on the map when location changes
+
+##### Automatic Location Tracking
+- Location tracking starts automatically when the page loads
+- Uses `watchPosition()` API to continuously monitor location changes
+- Only updates the map and fetches new clubs when location changes significantly (>100 meters / 0.001 degrees)
+- First location detection initializes the map and fetches nearby clubs
+- Subsequent location changes update the marker position and refresh nearby clubs
+
+#### 3. Behavior Changes
+
+**Before:**
+- User had to manually click "Use My Location" button
+- Location was fetched only once per button click
+- Required user interaction to update location
+
+**After:**
+- Location is automatically detected when page loads
+- Location is continuously monitored in the background
+- Map and clubs list automatically update when user moves
+- No user interaction required
+
+## Technical Details
+
+### Geolocation API Configuration
+```javascript
+{
+    enableHighAccuracy: true,  // Use GPS for better accuracy
+    timeout: 10000,            // 10 second timeout
+    maximumAge: 0              // Don't use cached positions
+}
+```
+
+### Location Change Threshold
+- Updates trigger when location changes by more than 0.001 degrees (~100 meters)
+- Prevents excessive API calls for minor GPS fluctuations
+
+### Error Handling
+- Maintains existing error handling for:
+  - Permission denied
+  - Position unavailable
+  - Timeout errors
+  - Unsupported browser
+
+## Testing Recommendations
+
+1. **Initial Load**: Verify location is automatically requested on page load
+2. **Permission Prompt**: Confirm browser asks for location permission
+3. **Map Display**: Check that map initializes with user's location
+4. **Clubs Display**: Verify nearby clubs are fetched and displayed
+5. **Location Updates**: Test that moving location updates the map (may require mobile device or location spoofing)
+6. **Error Handling**: Test with location permissions denied
+
+## Browser Compatibility
+- Works with all modern browsers that support Geolocation API
+- Requires HTTPS in production (browsers restrict geolocation on HTTP)
+- localhost/127.0.0.1 works without HTTPS for development
+
+## Notes
+- The `watchPosition()` API continuously monitors location, which may impact battery life on mobile devices
+- Location updates are throttled to only trigger when movement exceeds ~100 meters
+- Users can still deny location permission, in which case appropriate error messages are shown

FAMILY_EDIT_UPDATES.md

@@ -0,0 +1,120 @@
+# Family Member Edit Form Updates
+
+## Summary
+Updated the family member edit form to match the guardian profile edit page by adding missing fields.
+
+## Changes Made
+
+### 1. Updated View: `resources/views/family/edit.blade.php`
+Added the following sections:
+- ✅ **Profile Picture Upload Section**
+  - Displays current profile picture or default avatar
+  - Button to open upload modal
+  - Integrated with image upload modal component
+
+- ✅ **Mobile Number Field**
+  - Text input for mobile number
+  - Optional field with validation
+
+- ✅ **Social Media Links Section**
+  - Dynamic add/remove functionality
+  - Support for 22 social platforms (Facebook, Twitter, Instagram, LinkedIn, YouTube, TikTok, etc.)
+  - Platform dropdown and URL input for each link
+  - JavaScript functionality to add/remove links dynamically
+
+- ✅ **Personal Motto Field**
+  - Textarea for personal motto/quote
+  - Maximum 500 characters
+  - Helper text included
+
+### 2. Updated Controller: `app/Http/Controllers/FamilyController.php`
+
+#### Updated `update()` method:
+- Added validation for new fields:
+  - `mobile` (nullable, max 20 characters)
+  - `social_links` (array with platform and url validation)
+  - `motto` (nullable, max 500 characters)
+- Added social links processing logic to convert array format to associative array
+- Updated dependent user update to include all new fields
+
+#### Added `uploadFamilyMemberPicture()` method:
+- Handles profile picture uploads for family members
+- Validates image file (jpeg, png, jpg, gif, max 5MB)
+- Verifies family member belongs to authenticated user
+- Generates unique filename
+- Stores in `public/images/profiles`
+- Deletes old profile picture if exists
+- Returns JSON response for AJAX handling
+
+### 3. Updated Routes: `routes/web.php`
+- ✅ Added route: `POST /family/{id}/upload-picture` → `family.upload-picture`
+
+## Features Now Available
+
+The family member edit form now includes all the same fields as the guardian profile edit page:
+
+1. **Profile Picture** - Upload and manage profile photos
+2. **Full Name** - Required field
+3. **Email Address** - Optional for children
+4. **Mobile Number** - Optional contact number
+5. **Gender** - Male/Female selection
+6. **Birthdate** - Date picker
+7. **Blood Type** - Dropdown with all blood types
+8. **Nationality** - Country dropdown component
+9. **Social Media Links** - Dynamic list with 22 platform options
+10. **Personal Motto** - Text area for inspirational quotes
+11. **Relationship Type** - Son/Daughter/Spouse/Sponsor/Other
+12. **Is Billing Contact** - Checkbox
+
+## Technical Details
+
+### Social Links Processing
+- Frontend: Array of objects `[{platform: 'facebook', url: 'https://...'}]`
+- Backend: Converted to associative array `{'facebook': 'https://...'}`
+- Stored in database as JSON
+
+### Profile Picture Upload
+- Uses existing `x-image-upload-modal` component
+- AJAX upload with cropping functionality
+- Aspect ratio: 1:1 (square)
+- Max size: 1MB (as per modal config)
+- Stored in: `storage/app/public/images/profiles/`
+
+## Testing Checklist
+
+- [ ] Profile picture upload works for family members
+- [ ] Mobile number saves correctly
+- [ ] Social links can be added dynamically
+- [ ] Social links can be removed
+- [ ] Social links save correctly
+- [ ] Personal motto saves correctly
+- [ ] All existing fields still work (name, email, gender, etc.)
+- [ ] Form validation works properly
+- [ ] Success message displays after update
+- [ ] Redirect to family dashboard works
+
+## Files Modified
+
+1. `resources/views/family/edit.blade.php` - Added new form fields and JavaScript
+2. `app/Http/Controllers/FamilyController.php` - Updated validation and added upload method
+3. `routes/web.php` - Added profile picture upload route
+
+## Notes
+
+### Default Avatar Image
+The code references `asset('images/default-avatar.png')` which doesn't currently exist in `public/images/`. 
+
+**Options:**
+1. Create a default avatar image at `public/images/default-avatar.png`
+2. Use a placeholder service like `https://ui-avatars.com/api/?name=User&size=120`
+3. Use the same approach as the show page (gradient background with initials)
+
+**Current behavior:** If the file doesn't exist, the browser will show a broken image icon until a profile picture is uploaded.
+
+### Storage Directory
+Make sure the storage directory is linked:
+```bash
+php artisan storage:link
+```
+
+This creates a symbolic link from `public/storage` to `storage/app/public` so uploaded images are accessible.

app/Http/Controllers/FamilyController.php

@@ -236,10 +236,15 @@ class FamilyController extends Controller
         $validated = $request->validate([
             'full_name' => 'required|string|max:255',
             'email' => 'nullable|email|max:255',
+            'mobile' => 'nullable|string|max:20',
             'gender' => 'required|in:m,f',
             'birthdate' => 'required|date',
             'blood_type' => 'nullable|string|max:10',
             'nationality' => 'required|string|max:100',
+            'social_links' => 'nullable|array',
+            'social_links.*.platform' => 'required_with:social_links.*.url|string',
+            'social_links.*.url' => 'required_with:social_links.*.platform|url',
+            'motto' => 'nullable|string|max:500',
             'relationship_type' => 'required|string|max:50',
             'is_billing_contact' => 'boolean',
         ]);
@@ -249,14 +254,27 @@ class FamilyController extends Controller
             ->where('dependent_user_id', $id)
             ->firstOrFail();
 
+        // Process social links - convert from array of objects to associative array
+        $socialLinks = [];
+        if (isset($validated['social_links']) && is_array($validated['social_links'])) {
+            foreach ($validated['social_links'] as $link) {
+                if (!empty($link['platform']) && !empty($link['url'])) {
+                    $socialLinks[$link['platform']] = $link['url'];
+                }
+            }
+        }
+
         $dependent = User::findOrFail($id);
         $dependent->update([
             'full_name' => $validated['full_name'],
             'email' => $validated['email'],
+            'mobile' => $validated['mobile'],
             'gender' => $validated['gender'],
             'birthdate' => $validated['birthdate'],
             'blood_type' => $validated['blood_type'],
             'nationality' => $validated['nationality'],
+            'social_links' => $socialLinks,
+            'motto' => $validated['motto'],
         ]);
 
         $relationship->update([
@@ -268,6 +286,58 @@ class FamilyController extends Controller
             ->with('success', 'Family member updated successfully.');
     }
 
+    /**
+     * Upload profile picture for a family member.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  int  $id
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function uploadFamilyMemberPicture(Request $request, $id)
+    {
+        $request->validate([
+            'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:5120', // 5MB max
+        ]);
+
+        $user = Auth::user();
+
+        // Verify the family member belongs to the authenticated user
+        $relationship = UserRelationship::where('guardian_user_id', $user->id)
+            ->where('dependent_user_id', $id)
+            ->firstOrFail();
+
+        $familyMember = User::findOrFail($id);
+
+        if ($request->hasFile('image')) {
+            $image = $request->file('image');
+
+            // Generate unique filename
+            $filename = 'profile_' . $familyMember->id . '_' . time() . '.' . $image->getClientOriginalExtension();
+
+            // Store in public/images/profiles
+            $path = $image->storeAs('images/profiles', $filename, 'public');
+
+            // Delete old profile picture if exists
+            if ($familyMember->profile_picture && \Storage::disk('public')->exists($familyMember->profile_picture)) {
+                \Storage::disk('public')->delete($familyMember->profile_picture);
+            }
+
+            // Update family member
+            $familyMember->update(['profile_picture' => $path]);
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Profile picture uploaded successfully.',
+                'path' => $path,
+            ]);
+        }
+
+        return response()->json([
+            'success' => false,
+            'message' => 'No image file provided.',
+        ], 400);
+    }
+
     /**
      * Remove the specified family member from storage.
      *

resources/views/clubs/explore.blade.php

@@ -2,68 +2,123 @@
 
 @section('content')
 <div class="container py-4">
-    <div class="row mb-4">
+    <!-- Hero Section -->
-        <div class="col-12">
+    <div class="text-center mb-5">
-            <div class="d-flex justify-content-between align-items-center">
+        <h1 class="display-4 fw-bold text-danger mb-2">Find Your Perfect Fit</h1>
-                <div>
+        <p class="lead text-muted">Discover sports clubs, trainers, nutrition clinics, and more near you</p>
-                    <h1 class="mb-1"><i class="bi bi-compass me-2"></i>Explore</h1>
+        <p class="text-muted"><i class="bi bi-geo-alt-fill me-1"></i><span id="currentLocation">Detecting location...</span></p>
-                    <p class="text-muted mb-0">Discover what's near you</p>
     </div>
-                <div>
+
-                    <button id="getLocationBtn" class="btn btn-primary">
+    <!-- Search Bar with Near Me Button -->
-                        <i class="bi bi-geo-alt-fill me-2"></i>Use My Location
+    <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>
+        <span id="locationMessage"></span>
-        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        <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 id="loadingSpinner" class="text-center py-5">
-        <div class="spinner-border text-primary" role="status">
+        <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;">
+    <!-- Clubs Grid -->
-        <!-- Map Column -->
+    <div class="row justify-content-center" id="clubsGrid" style="display: none;">
-        <div class="col-lg-8 mb-4">
+        <div class="col-lg-10">
-            <div class="card shadow-sm border-0">
+            <div class="row g-4" id="clubsContainer">
-                <div class="card-header bg-white border-0 py-3">
+                <!-- Club cards will be inserted here -->
-                    <h5 class="mb-0"><i class="bi bi-map me-2"></i>Map View</h5>
             </div>
-                <div class="card-body p-0">
+            <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>
+
+<!-- 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>
+            <div class="modal-footer border-0 bg-light">
-        </div>
+                <div class="w-100 d-flex justify-content-between align-items-center">
-
+                    <small class="text-muted">
-        <!-- Clubs List Column -->
+                        <i class="bi bi-geo-alt-fill me-1"></i>
-        <div class="col-lg-4">
+                        <span id="modalLocationCoordinates">Drag the marker to set your location</span>
-            <div class="card shadow-sm border-0 sticky-top" style="top: 20px;">
+                    </small>
-                <div class="card-header bg-white border-0 py-3">
+                    <button type="button" class="btn btn-danger" id="applyLocationBtn">
-                    <div class="d-flex justify-content-between align-items-center">
+                        <i class="bi bi-check-circle me-2"></i>Apply Location
-                        <h5 class="mb-0"><i class="bi bi-list-ul me-2"></i>Nearby</h5>
+                    </button>
-                        <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>
                 </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 {
+    .category-btn:hover {
-        background-color: #f8f9fa;
+        transform: translateY(-2px);
-        border-left-color: #0d6efd;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
 
-    .club-item.active {
+    .category-btn.active {
-        background-color: #e7f1ff;
+        transform: translateY(-2px);
-        border-left-color: #0d6efd;
+        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
     }
 
-    .distance-badge {
+    .club-card {
-        font-size: 0.875rem;
+        transition: all 0.3s ease;
-        padding: 0.25rem 0.5rem;
+        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 {
+    .stat-box i {
-        margin: 15px;
+        font-size: 1.25rem;
-        min-width: 200px;
+        color: #dc3545;
     }
 
-    .sticky-top {
+    .stat-box .stat-number {
-        position: sticky;
+        font-size: 1.25rem;
-        z-index: 1020;
+        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
+    // Category buttons
-    document.getElementById('getLocationBtn').addEventListener('click', getUserLocation);
+    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
+// Start watching user's location
-function getUserLocation() {
+function startWatchingLocation() {
-    const btn = document.getElementById('getLocationBtn');
+    watchId = navigator.geolocation.watchPosition(
-    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(
         function(position) {
             userLocation = {
                 latitude: position.coords.latitude,
                 longitude: position.coords.longitude
             };
 
-            showAlert(`Location found: ${userLocation.latitude.toFixed(4)}, ${userLocation.longitude.toFixed(4)}`, 'success');
+            updateLocationDisplay(userLocation.latitude, userLocation.longitude);
-
-            // Initialize map
-            initMap(userLocation.latitude, userLocation.longitude);
-
-            // Fetch nearby clubs
             fetchNearbyClubs(userLocation.latitude, userLocation.longitude);
 
-            btn.innerHTML = '<i class="bi bi-geo-alt-fill me-2"></i>Update Location';
+            // Stop watching after first successful location
-            btn.disabled = false;
+            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: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        attribution: '&copy; 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>',
+            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: [20, 20],
+            iconSize: [36, 36],
-            iconAnchor: [10, 10]
+            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
+    // Search radius circle (removed - no red tint on map)
-    L.circle([lat, lng], {
+    // searchRadiusCircle = L.circle([lat, lng], {
-        color: '#0d6efd',
+    //     color: '#dc3545',
-        fillColor: '#0d6efd',
+    //     fillColor: '#dc3545',
-        fillOpacity: 0.1,
+    //     fillOpacity: 0.1,
-        radius: 50000 // 50km radius
+    //     radius: 50000
-    }).addTo(map);
+    // }).addTo(map);
 
-    document.getElementById('mainContent').style.display = 'block';
+    setTimeout(() => map.invalidateSize(), 100);
-    document.getElementById('loadingSpinner').style.display = 'none';
 }
 
-// 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) {
+        document.getElementById('loadingSpinner').style.display = 'none';
-            displayClubs(data.clubs);
+        document.getElementById('clubsGrid').style.display = 'block';
-            document.getElementById('clubCount').textContent = data.total;
 
-            if (data.total === 0) {
+        if (data.success) {
-                document.getElementById('noClubsMessage').style.display = 'block';
+            allClubs = data.clubs;
-                document.getElementById('clubsList').style.display = 'none';
+            displayClubs(allClubs);
-            } else {
-                document.getElementById('noClubsMessage').style.display = 'none';
-                document.getElementById('clubsList').style.display = 'block';
-            }
         } 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
+    const container = document.getElementById('clubsContainer');
-    clubMarkers.forEach(marker => map.removeLayer(marker));
+    const noResults = document.getElementById('noResults');
-    clubMarkers = [];
 
-    const clubsList = document.getElementById('clubsList');
+    container.innerHTML = '';
-    clubsList.innerHTML = '';
 
-    clubs.forEach((club, index) => {
+    if (clubs.length === 0) {
-        // Add marker to map
+        noResults.style.display = 'flex';
-        const marker = L.marker([club.gps_lat, club.gps_long], {
+        return;
-            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);
 
-        marker.bindPopup(`
+    noResults.style.display = 'none';
-            <div class="text-center">
+
-                <h6 class="mb-2">${club.club_name}</h6>
+    clubs.forEach(club => {
-                <p class="mb-1 small text-muted"><i class="bi bi-geo-alt"></i> ${club.distance} km away</p>
+        const card = document.createElement('div');
-                <p class="mb-1 small"><strong>Owner:</strong> ${club.owner_name}</p>
+        card.className = 'col-md-6 col-lg-4';
-                ${club.owner_mobile ? `<p class="mb-1 small"><i class="bi bi-telephone"></i> ${club.owner_mobile}</p>` : ''}
+        card.innerHTML = `
-                ${club.owner_email ? `<p class="mb-0 small"><i class="bi bi-envelope"></i> ${club.owner_email}</p>` : ''}
+            <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="card-body">
-
+                    <h5 class="card-title mb-2">${club.club_name}</h5>
-        clubMarkers.push(marker);
+                    <p class="text-danger mb-2">
-
+                        <i class="bi bi-geo-alt-fill me-1"></i>${club.distance} km away
-        // 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="text-muted small mb-3">
-                    <p class="mb-1 small text-muted">
+                        <i class="bi bi-geo me-1"></i>${club.owner_name || 'N/A'}
-                        <i class="bi bi-telephone me-1"></i>${club.owner_mobile}
+                    </p>
-                    </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 class="text-end">
-                    <span class="badge bg-primary distance-badge">
-                        <i class="bi bi-geo-alt"></i> ${club.distance} km
-                    </span>
                 </div>
             </div>
         `;
-
+        container.appendChild(card);
-        // 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);
-    });
-
-    // 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
+// Filter clubs
-function showAlert(message, type = 'info') {
+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

resources/views/family/edit.blade.php

@@ -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

routes/web.php

@@ -92,6 +92,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::get('/family/{id}', [FamilyController::class, 'show'])->name('family.show');
     Route::get('/family/{id}/edit', [FamilyController::class, 'edit'])->name('family.edit');
     Route::put('/family/{id}', [FamilyController::class, 'update'])->name('family.update');
+    Route::post('/family/{id}/upload-picture', [FamilyController::class, 'uploadFamilyMemberPicture'])->name('family.upload-picture');
     Route::delete('/family/{id}', [FamilyController::class, 'destroy'])->name('family.destroy');
 
     // Invoice routes