fixed the explore page after the admin panel

app/Http/Controllers/Admin/PlatformController.php

@@ -73,7 +73,17 @@ class PlatformController extends Controller
      */
     public function createClub()
     {
-        $users = User::orderBy('full_name')->get();
+        $users = User::orderBy('full_name')->get()->map(function ($user) {
+            return [
+                'id' => $user->id,
+                'full_name' => $user->full_name,
+                'email' => $user->email,
+                'mobile' => $user->mobile_formatted,
+                'profile_picture' => $user->profile_picture
+                    ? asset('storage/' . $user->profile_picture)
+                    : null,
+            ];
+        });
         return view('admin.platform.create-club', compact('users'));
     }
 
@@ -132,7 +142,17 @@ class PlatformController extends Controller
      */
     public function editClub(Tenant $club)
     {
-        $users = User::orderBy('full_name')->get();
+        $users = User::orderBy('full_name')->get()->map(function ($user) {
+            return [
+                'id' => $user->id,
+                'full_name' => $user->full_name,
+                'email' => $user->email,
+                'mobile' => $user->mobile_formatted,
+                'profile_picture' => $user->profile_picture
+                    ? asset('storage/' . $user->profile_picture)
+                    : null,
+            ];
+        });
         return view('admin.platform.edit-club', compact('club', 'users'));
     }
 

resources/views/admin/platform/create-club.blade.php

@@ -20,8 +20,13 @@
                         <select class="form-select @error('owner_user_id') is-invalid @enderror" id="owner_user_id" name="owner_user_id" required>
                             <option value="">Select Owner</option>
                             @foreach($users as $user)
-                                <option value="{{ $user->id }}" {{ old('owner_user_id') == $user->id ? 'selected' : '' }}>
+                                <option value="{{ $user['id'] }}"
-                                    {{ $user->full_name }} ({{ $user->email }})
+                                        data-name="{{ $user['full_name'] }}"
+                                        data-email="{{ $user['email'] }}"
+                                        data-mobile="{{ $user['mobile'] ?? '' }}"
+                                        data-picture="{{ $user['profile_picture'] ?? '' }}"
+                                        {{ old('owner_user_id') == $user['id'] ? 'selected' : '' }}>
+                                    {{ $user['full_name'] }}
                                 </option>
                             @endforeach
                         </select>
@@ -173,6 +178,124 @@
 </div>
 @endsection
 
+@push('styles')
+<style>
+    /* Custom Select2 Styling for User Dropdown */
+    .select2-container--default .select2-results__option {
+        padding: 0 !important;
+    }
+
+    .user-option {
+        display: flex;
+        align-items: center;
+        padding: 10px 12px;
+        gap: 12px;
+    }
+
+    .user-option:hover {
+        background-color: hsl(var(--primary) / 0.1);
+    }
+
+    .user-avatar {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 2px solid hsl(var(--border));
+    }
+
+    .user-avatar-placeholder {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-hover)));
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 18px;
+        flex-shrink: 0;
+        border: 2px solid hsl(var(--border));
+    }
+
+    .user-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .user-name {
+        font-weight: 600;
+        font-size: 14px;
+        color: hsl(var(--foreground));
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .user-details {
+        font-size: 12px;
+        color: hsl(var(--muted-foreground));
+        margin: 2px 0 0 0;
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+
+    .user-detail-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .select2-container--default .select2-selection--single {
+        height: 38px;
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.375rem;
+    }
+
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 36px;
+        padding-left: 12px;
+    }
+
+    .select2-container--default .select2-selection--single .select2-selection__arrow {
+        height: 36px;
+    }
+
+    .select2-dropdown {
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.375rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .select2-search--dropdown .select2-search__field {
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.375rem;
+        padding: 8px 12px;
+    }
+
+    .select2-search--dropdown .select2-search__field:focus {
+        outline: none;
+        border-color: hsl(var(--primary));
+        box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+    }
+
+    .select2-results__option--highlighted {
+        background-color: hsl(var(--primary)) !important;
+        color: white !important;
+    }
+
+    .select2-results__option--highlighted .user-name,
+    .select2-results__option--highlighted .user-details,
+    .select2-results__option--highlighted .user-detail-item {
+        color: white !important;
+    }
+</style>
+@endpush
+
 @push('scripts')
 <script>
 // Auto-generate slug from club name
@@ -183,5 +306,100 @@ document.getElementById('club_name').addEventListener('input', function(e) {
         .replace(/^-+|-+$/g, '');
     document.getElementById('slug').value = slug;
 });
+
+// Initialize Select2 for owner dropdown
+$(document).ready(function() {
+    $('#owner_user_id').select2({
+        placeholder: 'Search by name, email, or phone...',
+        allowClear: true,
+        width: '100%',
+        templateResult: formatUser,
+        templateSelection: formatUserSelection,
+        matcher: customMatcher
+    });
+
+    // Custom template for dropdown options
+    function formatUser(user) {
+        if (!user.id) {
+            return user.text;
+        }
+
+        var $user = $(user.element);
+        var name = $user.data('name');
+        var email = $user.data('email');
+        var mobile = $user.data('mobile');
+        var picture = $user.data('picture');
+
+        var avatarHtml = '';
+        if (picture) {
+            avatarHtml = '<img src="' + picture + '" class="user-avatar" alt="' + name + '">';
+        } else {
+            var initial = name ? name.charAt(0).toUpperCase() : '?';
+            avatarHtml = '<div class="user-avatar-placeholder">' + initial + '</div>';
+        }
+
+        var detailsHtml = '<div class="user-details">';
+        if (email) {
+            detailsHtml += '<span class="user-detail-item"><i class="bi bi-envelope"></i> ' + email + '</span>';
+        }
+        if (mobile) {
+            detailsHtml += '<span class="user-detail-item"><i class="bi bi-phone"></i> ' + mobile + '</span>';
+        }
+        detailsHtml += '</div>';
+
+        var $container = $(
+            '<div class="user-option">' +
+                avatarHtml +
+                '<div class="user-info">' +
+                    '<div class="user-name">' + name + '</div>' +
+                    detailsHtml +
+                '</div>' +
+            '</div>'
+        );
+
+        return $container;
+    }
+
+    // Custom template for selected option
+    function formatUserSelection(user) {
+        if (!user.id) {
+            return user.text;
+        }
+
+        var $user = $(user.element);
+        var name = $user.data('name');
+        return name || user.text;
+    }
+
+    // Custom matcher for searching by name, email, or phone
+    function customMatcher(params, data) {
+        // If there are no search terms, return all data
+        if ($.trim(params.term) === '') {
+            return data;
+        }
+
+        // Do not display the item if there is no 'text' property
+        if (typeof data.text === 'undefined') {
+            return null;
+        }
+
+        var $option = $(data.element);
+        var name = $option.data('name') || '';
+        var email = $option.data('email') || '';
+        var mobile = $option.data('mobile') || '';
+
+        var searchTerm = params.term.toLowerCase();
+
+        // Check if the search term matches name, email, or mobile
+        if (name.toLowerCase().indexOf(searchTerm) > -1 ||
+            email.toLowerCase().indexOf(searchTerm) > -1 ||
+            mobile.toLowerCase().indexOf(searchTerm) > -1) {
+            return data;
+        }
+
+        // Return null if the term should not be displayed
+        return null;
+    }
+});
 </script>
 @endpush

resources/views/admin/platform/edit-club.blade.php

@@ -22,14 +22,20 @@
                         <select class="form-select @error('owner_user_id') is-invalid @enderror" id="owner_user_id" name="owner_user_id" required>
                             <option value="">Select Owner</option>
                             @foreach($users as $user)
-                                <option value="{{ $user->id }}" {{ (old('owner_user_id', $club->owner_user_id) == $user->id) ? 'selected' : '' }}>
+                                <option value="{{ $user['id'] }}"
-                                    {{ $user->full_name }} ({{ $user->email }})
+                                        data-name="{{ $user['full_name'] }}"
+                                        data-email="{{ $user['email'] }}"
+                                        data-mobile="{{ $user['mobile'] ?? '' }}"
+                                        data-picture="{{ $user['profile_picture'] ?? '' }}"
+                                        {{ (old('owner_user_id', $club->owner_user_id) == $user['id']) ? 'selected' : '' }}>
+                                    {{ $user['full_name'] }}
                                 </option>
                             @endforeach
                         </select>
                         @error('owner_user_id')
                             <div class="invalid-feedback">{{ $message }}</div>
                         @enderror
+                        <small class="text-muted">The user who will manage this club</small>
                     </div>
 
                     <!-- Basic Information -->
@@ -172,9 +178,14 @@
 
                     <!-- Actions -->
                         <div class="d-flex justify-content-between mt-4 pt-3 border-top">
+                            <div>
                                 <a href="{{ route('admin.platform.clubs') }}" class="btn btn-secondary">
                                     <i class="bi bi-arrow-left me-2"></i>Cancel
                                 </a>
+                                <button type="button" class="btn btn-danger ms-2" data-bs-toggle="modal" data-bs-target="#deleteModal">
+                                    <i class="bi bi-trash me-2"></i>Delete Club
+                                </button>
+                            </div>
                             <button type="submit" class="btn text-white" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                 <i class="bi bi-check-circle me-2"></i>Update Club
                             </button>
@@ -185,3 +196,248 @@
     </div>
 </div>
 @endsection
+
+<!-- Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteModalLabel">
+                    <i class="bi bi-exclamation-triangle me-2"></i>Confirm Delete
+                </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p class="mb-0">Are you sure you want to delete <strong>{{ $club->club_name }}</strong>?</p>
+                <p class="text-danger mb-0 mt-2"><small><i class="bi bi-info-circle me-1"></i>This action cannot be undone.</small></p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form action="{{ route('admin.platform.clubs.destroy', $club) }}" method="POST" class="d-inline">
+                    @csrf
+                    @method('DELETE')
+                    <button type="submit" class="btn btn-danger">
+                        <i class="bi bi-trash me-2"></i>Yes, Delete Club
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+@push('styles')
+<style>
+    /* Custom Select2 Styling for User Dropdown */
+    .select2-container--default .select2-results__option {
+        padding: 0 !important;
+    }
+
+    .user-option {
+        display: flex;
+        align-items: center;
+        padding: 10px 12px;
+        gap: 12px;
+    }
+
+    .user-option:hover {
+        background-color: hsl(var(--primary) / 0.1);
+    }
+
+    .user-avatar {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 2px solid hsl(var(--border));
+    }
+
+    .user-avatar-placeholder {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-hover)));
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 600;
+        font-size: 18px;
+        flex-shrink: 0;
+        border: 2px solid hsl(var(--border));
+    }
+
+    .user-info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .user-name {
+        font-weight: 600;
+        font-size: 14px;
+        color: hsl(var(--foreground));
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .user-details {
+        font-size: 12px;
+        color: hsl(var(--muted-foreground));
+        margin: 2px 0 0 0;
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+
+    .user-detail-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .select2-container--default .select2-selection--single {
+        height: 38px;
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.375rem;
+    }
+
+    .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 36px;
+        padding-left: 12px;
+    }
+
+    .select2-container--default .select2-selection--single .select2-selection__arrow {
+        height: 36px;
+    }
+
+    .select2-dropdown {
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.375rem;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .select2-search--dropdown .select2-search__field {
+        border: 1px solid hsl(var(--border));
+        border-radius: 0.375rem;
+        padding: 8px 12px;
+    }
+
+    .select2-search--dropdown .select2-search__field:focus {
+        outline: none;
+        border-color: hsl(var(--primary));
+        box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
+    }
+
+    .select2-results__option--highlighted {
+        background-color: hsl(var(--primary)) !important;
+        color: white !important;
+    }
+
+    .select2-results__option--highlighted .user-name,
+    .select2-results__option--highlighted .user-details,
+    .select2-results__option--highlighted .user-detail-item {
+        color: white !important;
+    }
+</style>
+@endpush
+
+@push('scripts')
+<script>
+// Initialize Select2 for owner dropdown
+$(document).ready(function() {
+    $('#owner_user_id').select2({
+        placeholder: 'Search by name, email, or phone...',
+        allowClear: true,
+        width: '100%',
+        templateResult: formatUser,
+        templateSelection: formatUserSelection,
+        matcher: customMatcher
+    });
+
+    // Custom template for dropdown options
+    function formatUser(user) {
+        if (!user.id) {
+            return user.text;
+        }
+
+        var $user = $(user.element);
+        var name = $user.data('name');
+        var email = $user.data('email');
+        var mobile = $user.data('mobile');
+        var picture = $user.data('picture');
+
+        var avatarHtml = '';
+        if (picture) {
+            avatarHtml = '<img src="' + picture + '" class="user-avatar" alt="' + name + '">';
+        } else {
+            var initial = name ? name.charAt(0).toUpperCase() : '?';
+            avatarHtml = '<div class="user-avatar-placeholder">' + initial + '</div>';
+        }
+
+        var detailsHtml = '<div class="user-details">';
+        if (email) {
+            detailsHtml += '<span class="user-detail-item"><i class="bi bi-envelope"></i> ' + email + '</span>';
+        }
+        if (mobile) {
+            detailsHtml += '<span class="user-detail-item"><i class="bi bi-phone"></i> ' + mobile + '</span>';
+        }
+        detailsHtml += '</div>';
+
+        var $container = $(
+            '<div class="user-option">' +
+                avatarHtml +
+                '<div class="user-info">' +
+                    '<div class="user-name">' + name + '</div>' +
+                    detailsHtml +
+                '</div>' +
+            '</div>'
+        );
+
+        return $container;
+    }
+
+    // Custom template for selected option
+    function formatUserSelection(user) {
+        if (!user.id) {
+            return user.text;
+        }
+
+        var $user = $(user.element);
+        var name = $user.data('name');
+        return name || user.text;
+    }
+
+    // Custom matcher for searching by name, email, or phone
+    function customMatcher(params, data) {
+        // If there are no search terms, return all data
+        if ($.trim(params.term) === '') {
+            return data;
+        }
+
+        // Do not display the item if there is no 'text' property
+        if (typeof data.text === 'undefined') {
+            return null;
+        }
+
+        var $option = $(data.element);
+        var name = $option.data('name') || '';
+        var email = $option.data('email') || '';
+        var mobile = $option.data('mobile') || '';
+
+        var searchTerm = params.term.toLowerCase();
+
+        // Check if the search term matches name, email, or mobile
+        if (name.toLowerCase().indexOf(searchTerm) > -1 ||
+            email.toLowerCase().indexOf(searchTerm) > -1 ||
+            mobile.toLowerCase().indexOf(searchTerm) > -1) {
+            return data;
+        }
+
+        // Return null if the term should not be displayed
+        return null;
+    }
+});
+</script>
+@endpush