created admin panel with some of its content
This commit is contained in:
ghassan committed
1 parent
2ee4b76599
commit
b16351c416
52 files changed
+5690
-203
No files matched your search
@@ -0,0 +1,195 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('admin-content')
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<h1 class="h2 fw-bold mb-2">Database Backup & Restore</h1>
|
||||
<p class="text-muted">Manage platform database backups</p>
|
||||
</div>
|
||||
|
||||
<!-- Warning Message -->
|
||||
<div class="alert alert-warning d-flex align-items-center mb-4" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill me-3" style="font-size: 1.5rem;"></i>
|
||||
<div>
|
||||
<strong>Important:</strong> Database backup and restore operations are powerful tools. Always test backups in a safe environment before using them in production.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Operations Grid -->
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Download Backup -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<i class="bi bi-download text-primary" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Download Backup</h5>
|
||||
<p class="text-muted small mb-4">
|
||||
Export the complete database as a JSON file. This includes all tables from the public schema.
|
||||
</p>
|
||||
<a href="{{ route('admin.platform.backup.download') }}" class="btn btn-primary w-100" onclick="return confirm('This will download a complete backup of the database. Continue?')">
|
||||
<i class="bi bi-download me-2"></i>Download Full Backup
|
||||
</a>
|
||||
<small class="text-muted d-block mt-3">
|
||||
<i class="bi bi-info-circle me-1"></i>File format: JSON
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Restore Database -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100 border-danger">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<i class="bi bi-arrow-clockwise text-danger" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title text-danger">Restore Database</h5>
|
||||
<p class="text-muted small mb-4">
|
||||
Upload a JSON backup file to restore the database. <strong class="text-danger">This will overwrite all existing data!</strong>
|
||||
</p>
|
||||
<button type="button" class="btn btn-danger w-100" data-bs-toggle="modal" data-bs-target="#restoreModal">
|
||||
<i class="bi bi-arrow-clockwise me-2"></i>Restore from Backup
|
||||
</button>
|
||||
<small class="text-danger d-block mt-3">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>Use with extreme caution
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export Auth Users -->
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
<i class="bi bi-people text-success" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
<h5 class="card-title">Export Auth Users</h5>
|
||||
<p class="text-muted small mb-4">
|
||||
Download all authentication users with encrypted passwords for migration purposes.
|
||||
</p>
|
||||
<a href="{{ route('admin.platform.backup.export-users') }}" class="btn btn-success w-100">
|
||||
<i class="bi bi-download me-2"></i>Export Users
|
||||
</a>
|
||||
<small class="text-muted d-block mt-3">
|
||||
<i class="bi bi-info-circle me-1"></i>Includes encrypted passwords
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Best Practices -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white border-0">
|
||||
<h5 class="mb-0"><i class="bi bi-lightbulb me-2"></i>Best Practices</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-primary mb-3">Backup Guidelines</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-check-circle text-success me-2"></i>
|
||||
Schedule regular automated backups (daily recommended)
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-check-circle text-success me-2"></i>
|
||||
Store backups in multiple secure locations
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-check-circle text-success me-2"></i>
|
||||
Test backup restoration in a staging environment
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-check-circle text-success me-2"></i>
|
||||
Keep backups for at least 30 days
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-check-circle text-success me-2"></i>
|
||||
Document your backup and restore procedures
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-danger mb-3">Restore Warnings</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-exclamation-triangle text-danger me-2"></i>
|
||||
Always backup current data before restoring
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-exclamation-triangle text-danger me-2"></i>
|
||||
Verify backup file integrity before restoration
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-exclamation-triangle text-danger me-2"></i>
|
||||
Test restore in staging environment first
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-exclamation-triangle text-danger me-2"></i>
|
||||
Notify all users before performing restore
|
||||
</li>
|
||||
<li class="mb-2">
|
||||
<i class="bi bi-exclamation-triangle text-danger me-2"></i>
|
||||
Restoration will overwrite ALL existing data
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Restore Modal -->
|
||||
<div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="restoreModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header bg-danger text-white">
|
||||
<h5 class="modal-title" id="restoreModalLabel">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>Restore Database
|
||||
</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form action="{{ route('admin.platform.backup.restore') }}" method="POST" enctype="multipart/form-data" onsubmit="return confirmRestore()">
|
||||
@csrf
|
||||
<div class="modal-body">
|
||||
<div class="alert alert-danger">
|
||||
<strong>Warning:</strong> This action will permanently delete all current data and replace it with the backup file contents. This cannot be undone!
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="backup_file" class="form-label">Select Backup File (JSON)</label>
|
||||
<input type="file" class="form-control" id="backup_file" name="backup_file" accept=".json" required>
|
||||
<small class="text-muted">Only JSON backup files are accepted</small>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="confirmRestore" required>
|
||||
<label class="form-check-label" for="confirmRestore">
|
||||
I understand that this will overwrite all existing data
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button type="submit" class="btn btn-danger">
|
||||
<i class="bi bi-arrow-clockwise me-2"></i>Restore Database
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function confirmRestore() {
|
||||
return confirm('FINAL WARNING: Are you absolutely sure you want to restore the database? This will delete ALL current data!');
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
@@ -0,0 +1,198 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('admin-content')
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<h1 class="h2 fw-bold mb-2">All Clubs</h1>
|
||||
<p class="text-muted">Manage all clubs on the platform</p>
|
||||
</div>
|
||||
|
||||
<!-- Search and Actions Bar -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="flex-grow-1 me-3">
|
||||
<input type="text" id="clubSearch" class="form-control" placeholder="Search clubs by name, location, or description..." value="{{ $search ?? '' }}">
|
||||
</div>
|
||||
<a href="{{ route('admin.platform.clubs.create') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-2"></i>Add New Club
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Clubs Grid -->
|
||||
@if($clubs->count() > 0)
|
||||
<div class="row g-4 mb-4" id="clubsGrid">
|
||||
@foreach($clubs as $club)
|
||||
<div class="col-md-6 col-xl-4 club-card-wrapper"
|
||||
data-club-name="{{ $club->club_name }}"
|
||||
data-club-address="{{ $club->address ?? '' }}"
|
||||
data-club-owner="{{ $club->owner->full_name ?? '' }}">
|
||||
<a href="{{ route('admin.platform.clubs.edit', $club) }}" class="text-decoration-none">
|
||||
<div class="card border shadow-sm overflow-hidden club-card" style="border-radius: 0; cursor: pointer; transition: all 0.3s ease;">
|
||||
<!-- Cover Image -->
|
||||
<div class="position-relative overflow-hidden" style="height: 192px;">
|
||||
@if($club->cover_image)
|
||||
<img src="{{ asset('storage/' . $club->cover_image) }}" alt="{{ $club->club_name }}" loading="lazy" class="w-100 h-100 club-cover-img" style="object-fit: cover; transition: transform 0.3s ease;">
|
||||
@else
|
||||
<div class="w-100 h-100 d-flex align-items-center justify-content-center" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
|
||||
<i class="bi bi-image text-white" style="font-size: 3rem; opacity: 0.3;"></i>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Club Logo - Bottom Left -->
|
||||
<div class="position-absolute" style="bottom: 8px; left: 8px;">
|
||||
<div class="bg-white shadow border p-0.5" style="width: 80px; height: 80px; border-radius: 50%; border-color: rgba(0,0,0,0.1) !important;">
|
||||
@if($club->logo)
|
||||
<img src="{{ asset('storage/' . $club->logo) }}" alt="{{ $club->club_name }} logo" loading="lazy" class="w-100 h-100 rounded-circle" style="object-fit: contain;">
|
||||
@else
|
||||
<div class="w-100 h-100 rounded-circle bg-primary d-flex align-items-center justify-content-center">
|
||||
<span class="text-white fw-bold fs-4">{{ substr($club->club_name, 0, 1) }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Admin Badge - Top Left -->
|
||||
<div class="position-absolute" style="top: 8px; left: 8px;">
|
||||
<span class="badge text-white px-3 py-1" style="background-color: rgba(147, 51, 234, 0.9); border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">Admin</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="p-4" style="background-color: white;">
|
||||
<div class="mb-3">
|
||||
<!-- Club Name -->
|
||||
<h3 class="fw-semibold mb-2 club-title" style="font-size: 1.125rem; color: #1f2937; transition: color 0.3s ease;">{{ $club->club_name }}</h3>
|
||||
|
||||
<!-- Address -->
|
||||
@if($club->address)
|
||||
<div class="d-flex align-items-center text-muted" style="font-size: 0.875rem;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1 flex-shrink-0">
|
||||
<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
|
||||
<circle cx="12" cy="10" r="3"></circle>
|
||||
</svg>
|
||||
<span class="text-truncate">{{ $club->address }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="row g-2 text-center" style="font-size: 0.75rem;">
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: rgba(147, 51, 234, 0.05);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-1" style="color: hsl(var(--primary));">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||
</svg>
|
||||
<p class="fw-semibold mb-0" style="color: #1f2937;">{{ $club->members_count }}</p>
|
||||
<p class="text-muted mb-0">Members</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: rgba(147, 51, 234, 0.05);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-1" style="color: hsl(var(--primary));">
|
||||
<path d="M14.4 14.4 9.6 9.6"></path>
|
||||
<path d="M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z"></path>
|
||||
<path d="m21.5 21.5-1.4-1.4"></path>
|
||||
<path d="M3.9 3.9 2.5 2.5"></path>
|
||||
<path d="M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z"></path>
|
||||
</svg>
|
||||
<p class="fw-semibold mb-0" style="color: #1f2937;">{{ $club->packages_count }}</p>
|
||||
<p class="text-muted mb-0">Packages</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: rgba(147, 51, 234, 0.05);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-1" style="color: hsl(var(--primary));">
|
||||
<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
|
||||
</svg>
|
||||
<p class="fw-semibold mb-0" style="color: #1f2937;">{{ $club->instructors_count }}</p>
|
||||
<p class="text-muted mb-0">Trainers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="d-flex justify-content-center mb-4">
|
||||
{{ $clubs->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-building text-muted" style="font-size: 4rem;"></i>
|
||||
<h5 class="mt-3 mb-2">No Clubs Found</h5>
|
||||
<p class="text-muted mb-4">
|
||||
@if($search)
|
||||
No clubs match your search criteria.
|
||||
@else
|
||||
Get started by creating your first club.
|
||||
@endif
|
||||
</p>
|
||||
@if(!$search)
|
||||
<a href="{{ route('admin.platform.clubs.create') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-2"></i>Add New Club
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.club-card {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.club-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
.club-card:hover .club-cover-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.club-card:hover .club-title {
|
||||
color: hsl(var(--primary)) !important;
|
||||
}
|
||||
|
||||
.club-card-wrapper {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.club-card-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
// Real-time search filtering
|
||||
document.getElementById('clubSearch').addEventListener('input', function(e) {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const clubCards = document.querySelectorAll('.club-card-wrapper');
|
||||
|
||||
clubCards.forEach(function(card) {
|
||||
const clubName = card.getAttribute('data-club-name').toLowerCase();
|
||||
const clubAddress = card.getAttribute('data-club-address').toLowerCase();
|
||||
const clubOwner = card.getAttribute('data-club-owner').toLowerCase();
|
||||
|
||||
if (clubName.includes(searchTerm) || clubAddress.includes(searchTerm) || clubOwner.includes(searchTerm)) {
|
||||
card.classList.remove('hidden');
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
@@ -0,0 +1,187 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('page-title', 'Create New Club')
|
||||
@section('page-subtitle', 'Add a new club to the platform')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0"><i class="bi bi-building me-2"></i>Club Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ route('admin.platform.clubs.store') }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<!-- Owner Selection -->
|
||||
<div class="mb-4">
|
||||
<label for="owner_user_id" class="form-label">Club Owner <span class="text-danger">*</span></label>
|
||||
<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' : '' }}>
|
||||
{{ $user->full_name }} ({{ $user->email }})
|
||||
</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 -->
|
||||
<h6 class="border-bottom pb-2 mb-3">Basic Information</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="club_name" class="form-label">Club Name <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control @error('club_name') is-invalid @enderror" id="club_name" name="club_name" value="{{ old('club_name') }}" required>
|
||||
@error('club_name')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="slug" class="form-label">Club Slug <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug') }}" required>
|
||||
@error('slug')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<small class="text-muted">URL-friendly identifier (e.g., bh-taekwondo)</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<h6 class="border-bottom pb-2 mb-3 mt-4">Contact Information</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">Club Email</label>
|
||||
<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}">
|
||||
@error('email')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone_number" class="form-label">Phone Number</label>
|
||||
<div class="input-group">
|
||||
<select class="form-select" name="phone_code" style="max-width: 120px;">
|
||||
<option value="+973" {{ old('phone_code') == '+973' ? 'selected' : '' }}>+973 (BH)</option>
|
||||
<option value="+966" {{ old('phone_code') == '+966' ? 'selected' : '' }}>+966 (SA)</option>
|
||||
<option value="+971" {{ old('phone_code') == '+971' ? 'selected' : '' }}>+971 (AE)</option>
|
||||
<option value="+965" {{ old('phone_code') == '+965' ? 'selected' : '' }}>+965 (KW)</option>
|
||||
</select>
|
||||
<input type="text" class="form-control" name="phone_number" value="{{ old('phone_number') }}" placeholder="12345678">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<label for="currency" class="form-label">Currency</label>
|
||||
<select class="form-select" id="currency" name="currency">
|
||||
<option value="BHD" {{ old('currency', 'BHD') == 'BHD' ? 'selected' : '' }}>BHD - Bahrain Dinar</option>
|
||||
<option value="SAR" {{ old('currency') == 'SAR' ? 'selected' : '' }}>SAR - Saudi Riyal</option>
|
||||
<option value="AED" {{ old('currency') == 'AED' ? 'selected' : '' }}>AED - UAE Dirham</option>
|
||||
<option value="KWD" {{ old('currency') == 'KWD' ? 'selected' : '' }}>KWD - Kuwaiti Dinar</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="timezone" class="form-label">Timezone</label>
|
||||
<select class="form-select" id="timezone" name="timezone">
|
||||
<option value="Asia/Bahrain" {{ old('timezone', 'Asia/Bahrain') == 'Asia/Bahrain' ? 'selected' : '' }}>Asia/Bahrain</option>
|
||||
<option value="Asia/Riyadh" {{ old('timezone') == 'Asia/Riyadh' ? 'selected' : '' }}>Asia/Riyadh</option>
|
||||
<option value="Asia/Dubai" {{ old('timezone') == 'Asia/Dubai' ? 'selected' : '' }}>Asia/Dubai</option>
|
||||
<option value="Asia/Kuwait" {{ old('timezone') == 'Asia/Kuwait' ? 'selected' : '' }}>Asia/Kuwait</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="country" class="form-label">Country</label>
|
||||
<select class="form-select" id="country" name="country">
|
||||
<option value="BH" {{ old('country', 'BH') == 'BH' ? 'selected' : '' }}>Bahrain</option>
|
||||
<option value="SA" {{ old('country') == 'SA' ? 'selected' : '' }}>Saudi Arabia</option>
|
||||
<option value="AE" {{ old('country') == 'AE' ? 'selected' : '' }}>United Arab Emirates</option>
|
||||
<option value="KW" {{ old('country') == 'KW' ? 'selected' : '' }}>Kuwait</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<h6 class="border-bottom pb-2 mb-3 mt-4">Location</h6>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" rows="2">{{ old('address') }}</textarea>
|
||||
@error('address')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="gps_lat" class="form-label">GPS Latitude</label>
|
||||
<input type="number" step="0.0000001" class="form-control @error('gps_lat') is-invalid @enderror" id="gps_lat" name="gps_lat" value="{{ old('gps_lat') }}" placeholder="26.0667">
|
||||
@error('gps_lat')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="gps_long" class="form-label">GPS Longitude</label>
|
||||
<input type="number" step="0.0000001" class="form-control @error('gps_long') is-invalid @enderror" id="gps_long" name="gps_long" value="{{ old('gps_long') }}" placeholder="50.5577">
|
||||
@error('gps_long')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Branding -->
|
||||
<h6 class="border-bottom pb-2 mb-3 mt-4">Branding</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="logo" class="form-label">Club Logo</label>
|
||||
<input type="file" class="form-control @error('logo') is-invalid @enderror" id="logo" name="logo" accept="image/*">
|
||||
@error('logo')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<small class="text-muted">Recommended: Square image, max 2MB</small>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="cover_image" class="form-label">Cover Image</label>
|
||||
<input type="file" class="form-control @error('cover_image') is-invalid @enderror" id="cover_image" name="cover_image" accept="image/*">
|
||||
@error('cover_image')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<small class="text-muted">Recommended: 1200x400px, max 2MB</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="d-flex justify-content-between mt-4 pt-3 border-top">
|
||||
<a href="{{ route('admin.platform.clubs') }}" class="btn btn-secondary">
|
||||
<i class="bi bi-arrow-left me-2"></i>Cancel
|
||||
</a>
|
||||
<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>Create Club
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
// Auto-generate slug from club name
|
||||
document.getElementById('club_name').addEventListener('input', function(e) {
|
||||
const slug = e.target.value
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, '-')
|
||||
.replace(/^-+|-+$/g, '');
|
||||
document.getElementById('slug').value = slug;
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,187 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('page-title', 'Edit Club')
|
||||
@section('page-subtitle', 'Update club information')
|
||||
|
||||
@section('content')
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0"><i class="bi bi-building me-2"></i>{{ $club->club_name }}</h5>
|
||||
<span class="badge bg-secondary">{{ $club->slug }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="{{ route('admin.platform.clubs.update', $club) }}" method="POST" enctype="multipart/form-data">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<!-- Owner Selection -->
|
||||
<div class="mb-4">
|
||||
<label for="owner_user_id" class="form-label">Club Owner <span class="text-danger">*</span></label>
|
||||
<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' : '' }}>
|
||||
{{ $user->full_name }} ({{ $user->email }})
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
@error('owner_user_id')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Basic Information -->
|
||||
<h6 class="border-bottom pb-2 mb-3">Basic Information</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="club_name" class="form-label">Club Name <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control @error('club_name') is-invalid @enderror" id="club_name" name="club_name" value="{{ old('club_name', $club->club_name) }}" required>
|
||||
@error('club_name')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="slug" class="form-label">Club Slug <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug', $club->slug) }}" required>
|
||||
@error('slug')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<small class="text-muted">URL-friendly identifier</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<h6 class="border-bottom pb-2 mb-3 mt-4">Contact Information</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="email" class="form-label">Club Email</label>
|
||||
<input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email', $club->email) }}">
|
||||
@error('email')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone_number" class="form-label">Phone Number</label>
|
||||
<div class="input-group">
|
||||
<select class="form-select" name="phone_code" style="max-width: 120px;">
|
||||
<option value="+973" {{ old('phone_code', $club->phone['code'] ?? '+973') == '+973' ? 'selected' : '' }}>+973 (BH)</option>
|
||||
<option value="+966" {{ old('phone_code', $club->phone['code'] ?? '') == '+966' ? 'selected' : '' }}>+966 (SA)</option>
|
||||
<option value="+971" {{ old('phone_code', $club->phone['code'] ?? '') == '+971' ? 'selected' : '' }}>+971 (AE)</option>
|
||||
<option value="+965" {{ old('phone_code', $club->phone['code'] ?? '') == '+965' ? 'selected' : '' }}>+965 (KW)</option>
|
||||
</select>
|
||||
<input type="text" class="form-control" name="phone_number" value="{{ old('phone_number', $club->phone['number'] ?? '') }}" placeholder="12345678">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4">
|
||||
<label for="currency" class="form-label">Currency</label>
|
||||
<select class="form-select" id="currency" name="currency">
|
||||
<option value="BHD" {{ old('currency', $club->currency ?? 'BHD') == 'BHD' ? 'selected' : '' }}>BHD - Bahrain Dinar</option>
|
||||
<option value="SAR" {{ old('currency', $club->currency) == 'SAR' ? 'selected' : '' }}>SAR - Saudi Riyal</option>
|
||||
<option value="AED" {{ old('currency', $club->currency) == 'AED' ? 'selected' : '' }}>AED - UAE Dirham</option>
|
||||
<option value="KWD" {{ old('currency', $club->currency) == 'KWD' ? 'selected' : '' }}>KWD - Kuwaiti Dinar</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="timezone" class="form-label">Timezone</label>
|
||||
<select class="form-select" id="timezone" name="timezone">
|
||||
<option value="Asia/Bahrain" {{ old('timezone', $club->timezone ?? 'Asia/Bahrain') == 'Asia/Bahrain' ? 'selected' : '' }}>Asia/Bahrain</option>
|
||||
<option value="Asia/Riyadh" {{ old('timezone', $club->timezone) == 'Asia/Riyadh' ? 'selected' : '' }}>Asia/Riyadh</option>
|
||||
<option value="Asia/Dubai" {{ old('timezone', $club->timezone) == 'Asia/Dubai' ? 'selected' : '' }}>Asia/Dubai</option>
|
||||
<option value="Asia/Kuwait" {{ old('timezone', $club->timezone) == 'Asia/Kuwait' ? 'selected' : '' }}>Asia/Kuwait</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="country" class="form-label">Country</label>
|
||||
<select class="form-select" id="country" name="country">
|
||||
<option value="BH" {{ old('country', $club->country ?? 'BH') == 'BH' ? 'selected' : '' }}>Bahrain</option>
|
||||
<option value="SA" {{ old('country', $club->country) == 'SA' ? 'selected' : '' }}>Saudi Arabia</option>
|
||||
<option value="AE" {{ old('country', $club->country) == 'AE' ? 'selected' : '' }}>United Arab Emirates</option>
|
||||
<option value="KW" {{ old('country', $club->country) == 'KW' ? 'selected' : '' }}>Kuwait</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<h6 class="border-bottom pb-2 mb-3 mt-4">Location</h6>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<textarea class="form-control @error('address') is-invalid @enderror" id="address" name="address" rows="2">{{ old('address', $club->address) }}</textarea>
|
||||
@error('address')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="gps_lat" class="form-label">GPS Latitude</label>
|
||||
<input type="number" step="0.0000001" class="form-control @error('gps_lat') is-invalid @enderror" id="gps_lat" name="gps_lat" value="{{ old('gps_lat', $club->gps_lat) }}">
|
||||
@error('gps_lat')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="gps_long" class="form-label">GPS Longitude</label>
|
||||
<input type="number" step="0.0000001" class="form-control @error('gps_long') is-invalid @enderror" id="gps_long" name="gps_long" value="{{ old('gps_long', $club->gps_long) }}">
|
||||
@error('gps_long')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Branding -->
|
||||
<h6 class="border-bottom pb-2 mb-3 mt-4">Branding</h6>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<label for="logo" class="form-label">Club Logo</label>
|
||||
@if($club->logo)
|
||||
<div class="mb-2">
|
||||
<img src="{{ asset('storage/' . $club->logo) }}" alt="Current Logo" class="img-thumbnail" style="max-width: 100px;">
|
||||
<small class="d-block text-muted">Current logo</small>
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" class="form-control @error('logo') is-invalid @enderror" id="logo" name="logo" accept="image/*">
|
||||
@error('logo')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<small class="text-muted">Leave empty to keep current logo</small>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="cover_image" class="form-label">Cover Image</label>
|
||||
@if($club->cover_image)
|
||||
<div class="mb-2">
|
||||
<img src="{{ asset('storage/' . $club->cover_image) }}" alt="Current Cover" class="img-thumbnail" style="max-width: 200px;">
|
||||
<small class="d-block text-muted">Current cover image</small>
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" class="form-control @error('cover_image') is-invalid @enderror" id="cover_image" name="cover_image" accept="image/*">
|
||||
@error('cover_image')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
<small class="text-muted">Leave empty to keep current cover</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="d-flex justify-content-between mt-4 pt-3 border-top">
|
||||
<a href="{{ route('admin.platform.clubs') }}" class="btn btn-secondary">
|
||||
<i class="bi bi-arrow-left me-2"></i>Cancel
|
||||
</a>
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,185 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('admin-content')
|
||||
<div class="space-y-6">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold">All Clubs</h2>
|
||||
<p class="text-muted-foreground mt-1">Manage all clubs on the platform</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="{{ route('admin.platform.clubs.create') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-lg me-2"></i>Add New Club
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="relative">
|
||||
<i class="bi bi-search position-absolute" style="left: 12px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground));"></i>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control ps-5"
|
||||
placeholder="Search clubs by name, location, or description..."
|
||||
id="searchInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Clubs Grid -->
|
||||
@if($clubs->isEmpty())
|
||||
<div class="card p-5 text-center">
|
||||
<p class="text-muted-foreground mb-0">No clubs found. Create your first club to get started.</p>
|
||||
</div>
|
||||
@else
|
||||
<div class="row g-4" id="clubsGrid">
|
||||
@foreach($clubs as $club)
|
||||
<div class="col-md-6 col-xl-4 club-card"
|
||||
data-name="{{ strtolower($club->club_name) }}"
|
||||
data-location="{{ strtolower($club->location ?? '') }}"
|
||||
data-description="{{ strtolower($club->description ?? '') }}">
|
||||
<div class="card h-100 hover-card" style="cursor: pointer;" onclick="window.location='{{ route('admin.platform.clubs.edit', $club->id) }}'">
|
||||
<!-- Club Cover Image -->
|
||||
<div class="position-relative" style="height: 192px; overflow: hidden;">
|
||||
@if($club->cover_image)
|
||||
<img src="{{ asset('storage/' . $club->cover_image) }}"
|
||||
alt="{{ $club->club_name }}"
|
||||
class="w-100 h-100 object-fit-cover club-cover-img"
|
||||
loading="lazy">
|
||||
@else
|
||||
<div class="w-100 h-100 d-flex align-items-center justify-content-center"
|
||||
style="background: linear-gradient(135deg, hsl(250 60% 75%), hsl(250 60% 65%));">
|
||||
<i class="bi bi-building text-white" style="font-size: 3rem;"></i>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Club Logo Overlay -->
|
||||
@if($club->logo)
|
||||
<div class="position-absolute" style="bottom: 8px; left: 8px;">
|
||||
<div class="rounded-circle bg-white shadow-lg border p-1" style="width: 80px; height: 80px;">
|
||||
<img src="{{ asset('storage/' . $club->logo) }}"
|
||||
alt="{{ $club->club_name }} logo"
|
||||
class="w-100 h-100 object-fit-contain rounded-circle"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Admin Badge -->
|
||||
<div class="position-absolute" style="top: 8px; left: 8px;">
|
||||
<span class="badge text-white" style="background: linear-gradient(135deg, hsl(250 60% 75%), hsl(250 60% 65%));">
|
||||
Admin
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Rating Badge -->
|
||||
@if($club->rating)
|
||||
<div class="position-absolute" style="top: 8px; right: 8px;">
|
||||
<span class="badge bg-white text-dark">
|
||||
<i class="bi bi-star-fill text-warning"></i>
|
||||
{{ number_format($club->rating, 1) }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Card Content -->
|
||||
<div class="card-body p-4">
|
||||
<div class="mb-3">
|
||||
<h3 class="h5 fw-semibold mb-2 club-name-hover">{{ $club->club_name }}</h3>
|
||||
@if($club->location)
|
||||
<div class="d-flex align-items-center text-muted small">
|
||||
<i class="bi bi-geo-alt me-1"></i>
|
||||
<span class="text-truncate">{{ $club->location }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="row g-2 text-center small">
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: hsl(var(--accent));">
|
||||
<i class="bi bi-people d-block mb-1" style="color: hsl(var(--primary));"></i>
|
||||
<p class="fw-semibold mb-0">{{ $club->members_count ?? 0 }}</p>
|
||||
<p class="text-muted mb-0" style="font-size: 0.75rem;">Members</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: hsl(var(--accent));">
|
||||
<i class="bi bi-box d-block mb-1" style="color: hsl(var(--primary));"></i>
|
||||
<p class="fw-semibold mb-0">{{ $club->packages_count ?? 0 }}</p>
|
||||
<p class="text-muted mb-0" style="font-size: 0.75rem;">Packages</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: hsl(var(--accent));">
|
||||
<i class="bi bi-star d-block mb-1" style="color: hsl(var(--primary));"></i>
|
||||
<p class="fw-semibold mb-0">{{ $club->trainers_count ?? 0 }}</p>
|
||||
<p class="text-muted mb-0" style="font-size: 0.75rem;">Trainers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
.hover-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.hover-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 28px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
.club-cover-img {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-card:hover .club-cover-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.club-name-hover {
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.hover-card:hover .club-name-hover {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.space-y-6 > * + * {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
// Search functionality
|
||||
document.getElementById('searchInput').addEventListener('input', function(e) {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const clubCards = document.querySelectorAll('.club-card');
|
||||
|
||||
clubCards.forEach(card => {
|
||||
const name = card.dataset.name;
|
||||
const location = card.dataset.location;
|
||||
const description = card.dataset.description;
|
||||
|
||||
const matches = name.includes(searchTerm) ||
|
||||
location.includes(searchTerm) ||
|
||||
description.includes(searchTerm);
|
||||
|
||||
card.style.display = matches ? '' : 'none';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
@@ -0,0 +1,281 @@
|
||||
@extends('layouts.admin')
|
||||
|
||||
@section('admin-content')
|
||||
<div>
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<h1 class="h2 fw-bold mb-2">All Members</h1>
|
||||
<p class="text-muted">Manage all platform members</p>
|
||||
</div>
|
||||
|
||||
<!-- Search and Actions Bar -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="flex-grow-1 me-3">
|
||||
<input type="text" id="memberSearch" class="form-control" placeholder="Search members by name, phone, nationality, or gender..." value="{{ $search ?? '' }}">
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-outline-primary">
|
||||
<i class="bi bi-person-plus me-2"></i>Add Child Member
|
||||
</button>
|
||||
<button class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-2"></i>Create Member
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members Grid -->
|
||||
@if($members->count() > 0)
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4" id="membersGrid">
|
||||
@foreach($members as $member)
|
||||
<div class="col member-card-wrapper"
|
||||
data-member-name="{{ $member->full_name }}"
|
||||
data-member-phone="{{ $member->formatted_mobile ?? '' }}"
|
||||
data-member-nationality="{{ $member->nationality ?? '' }}"
|
||||
data-member-gender="{{ $member->gender ?? '' }}">
|
||||
<a href="{{ route('family.show', $member->id) }}" class="text-decoration-none">
|
||||
<div class="card h-100 shadow-sm border overflow-hidden d-flex flex-column family-card">
|
||||
<!-- Header with gradient background -->
|
||||
<div class="p-4 pb-3" style="background: linear-gradient(135deg, {{ $member->gender == 'm' ? 'rgba(147, 51, 234, 0.1) 0%, rgba(147, 51, 234, 0.05) 50%' : 'rgba(214, 51, 132, 0.1) 0%, rgba(214, 51, 132, 0.05) 50%' }}, transparent 100%);">
|
||||
<div class="d-flex align-items-start gap-3">
|
||||
<div class="position-relative">
|
||||
<div class="rounded-circle border border-4 border-white shadow" style="width: 80px; height: 80px; overflow: hidden; box-shadow: 0 0 0 2px {{ $member->gender == 'm' ? 'rgba(147, 51, 234, 0.3)' : 'rgba(214, 51, 132, 0.3)' }} !important;">
|
||||
@if($member->profile_picture)
|
||||
<img src="{{ asset('storage/' . $member->profile_picture) }}" alt="{{ $member->full_name }}" class="w-100 h-100" style="object-fit: cover;">
|
||||
@else
|
||||
<div class="w-100 h-100 d-flex align-items-center justify-content-center text-white fw-bold fs-4" style="background: linear-gradient(135deg, {{ $member->gender == 'm' ? '#8b5cf6 0%, #7c3aed 100%' : '#d63384 0%, #a61e4d 100%' }});">
|
||||
{{ strtoupper(substr($member->full_name, 0, 1)) }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 min-w-0">
|
||||
<h5 class="fw-bold mb-2 text-truncate">{{ $member->full_name }}</h5>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
@php
|
||||
$age = $member->age;
|
||||
$ageGroup = 'Adult';
|
||||
if ($age < 2) {
|
||||
$ageGroup = 'Infant';
|
||||
} elseif ($age < 4) {
|
||||
$ageGroup = 'Toddler';
|
||||
} elseif ($age < 6) {
|
||||
$ageGroup = 'Preschooler';
|
||||
} elseif ($age < 13) {
|
||||
$ageGroup = 'Child';
|
||||
} elseif ($age < 20) {
|
||||
$ageGroup = 'Teenager';
|
||||
} elseif ($age < 40) {
|
||||
$ageGroup = 'Young Adult';
|
||||
} elseif ($age < 60) {
|
||||
$ageGroup = 'Adult';
|
||||
} else {
|
||||
$ageGroup = 'Senior';
|
||||
}
|
||||
@endphp
|
||||
<span class="badge {{ $member->gender == 'm' ? 'bg-primary' : 'bg-danger' }}">{{ $ageGroup }}</span>
|
||||
@if($member->member_clubs_count > 0)
|
||||
<span class="badge bg-success">{{ $member->member_clubs_count }} {{ Str::plural('Club', $member->member_clubs_count) }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="px-4 py-3 bg-light border-top border-bottom">
|
||||
@if($member->mobile && isset($member->mobile['number']))
|
||||
<div class="d-flex align-items-center gap-2 small mb-2">
|
||||
<i class="bi bi-telephone-fill {{ $member->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
|
||||
<span class="fw-medium text-muted">{{ $member->mobile['code'] ?? '' }} {{ $member->mobile['number'] }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($member->email)
|
||||
<div class="d-flex align-items-center gap-2 small">
|
||||
<i class="bi bi-envelope-fill {{ $member->gender == 'm' ? 'text-primary' : 'text-danger' }}"></i>
|
||||
<span class="fw-medium text-muted text-truncate">{{ $member->email }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Details -->
|
||||
<div class="px-4 py-3 flex-grow-1">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Gender</div>
|
||||
<div class="fw-semibold text-muted text-capitalize">{{ $member->gender == 'm' ? 'Male' : 'Female' }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Age</div>
|
||||
<div class="fw-semibold text-muted">{{ $member->age }} years</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Nationality</div>
|
||||
<div class="fw-semibold text-muted fs-5 nationality-display" data-iso3="{{ $member->nationality }}">{{ $member->nationality }}</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="small text-muted text-uppercase fw-medium mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">Horoscope</div>
|
||||
<div class="fw-semibold text-muted">
|
||||
@php
|
||||
$horoscopeSymbols = [
|
||||
'Aries' => '♈',
|
||||
'Taurus' => '♉',
|
||||
'Gemini' => '♊',
|
||||
'Cancer' => '♋',
|
||||
'Leo' => '♌',
|
||||
'Virgo' => '♍',
|
||||
'Libra' => '♎',
|
||||
'Scorpio' => '♏',
|
||||
'Sagittarius' => '♐',
|
||||
'Capricorn' => '♑',
|
||||
'Aquarius' => '♒',
|
||||
'Pisces' => '♓'
|
||||
];
|
||||
$horoscope = $member->horoscope ?? 'N/A';
|
||||
$symbol = $horoscopeSymbols[$horoscope] ?? '';
|
||||
@endphp
|
||||
{{ $symbol }} {{ $horoscope }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-2 border-top">
|
||||
<div class="d-flex justify-content-between align-items-center small mb-2">
|
||||
<span class="text-muted fw-medium">Next Birthday</span>
|
||||
<span class="fw-semibold text-muted">
|
||||
@if($member->birthdate)
|
||||
{{ $member->birthdate->copy()->year(now()->year)->isFuture()
|
||||
? $member->birthdate->copy()->year(now()->year)->diffForHumans(['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE])
|
||||
: $member->birthdate->copy()->year(now()->year + 1)->diffForHumans(['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE]) }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span class="text-muted fw-medium">Member Since</span>
|
||||
<span class="fw-semibold text-muted">{{ $member->created_at->format('d/m/Y') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="px-4 py-2 {{ $member->gender == 'm' ? 'bg-primary' : 'bg-danger' }} bg-opacity-10 border-top">
|
||||
<div class="d-flex align-items-center justify-content-center gap-2 small">
|
||||
<span class="fw-medium text-white">
|
||||
PLATFORM MEMBER
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="d-flex justify-content-center mb-4">
|
||||
{{ $members->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-people text-muted" style="font-size: 4rem;"></i>
|
||||
<h5 class="mt-3 mb-2">No Members Found</h5>
|
||||
<p class="text-muted mb-0">
|
||||
@if($search)
|
||||
No members match your search criteria.
|
||||
@else
|
||||
No members registered on the platform yet.
|
||||
@endif
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
/* Family Card Hover Effects */
|
||||
.family-card {
|
||||
transition: all 0.3s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.family-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.family-card:hover .rounded-circle {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Remove underline from card links */
|
||||
a.text-decoration-none:hover .family-card {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.member-card-wrapper {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.member-card-wrapper.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load countries from JSON file
|
||||
fetch('/data/countries.json')
|
||||
.then(response => response.json())
|
||||
.then(countries => {
|
||||
// Convert all nationality displays from ISO3 to country name with flag
|
||||
document.querySelectorAll('.nationality-display').forEach(element => {
|
||||
const iso3Code = element.getAttribute('data-iso3');
|
||||
if (!iso3Code) return;
|
||||
|
||||
const country = countries.find(c => c.iso3 === iso3Code);
|
||||
if (country) {
|
||||
// Get flag emoji from ISO2 code
|
||||
const flagEmoji = country.iso2
|
||||
.toUpperCase()
|
||||
.split('')
|
||||
.map(char => String.fromCodePoint(127397 + char.charCodeAt(0)))
|
||||
.join('');
|
||||
|
||||
element.textContent = `${flagEmoji} ${country.iso2.toUpperCase()}`;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error loading countries:', error));
|
||||
|
||||
// Real-time search filtering
|
||||
document.getElementById('memberSearch').addEventListener('input', function(e) {
|
||||
const searchTerm = e.target.value.toLowerCase();
|
||||
const memberCards = document.querySelectorAll('.member-card-wrapper');
|
||||
|
||||
memberCards.forEach(function(card) {
|
||||
const memberName = card.getAttribute('data-member-name').toLowerCase();
|
||||
const memberPhone = card.getAttribute('data-member-phone').toLowerCase();
|
||||
const memberNationality = card.getAttribute('data-member-nationality').toLowerCase();
|
||||
const memberGender = card.getAttribute('data-member-gender').toLowerCase();
|
||||
|
||||
if (memberName.includes(searchTerm) ||
|
||||
memberPhone.includes(searchTerm) ||
|
||||
memberNationality.includes(searchTerm) ||
|
||||
memberGender.includes(searchTerm)) {
|
||||
card.classList.remove('hidden');
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in new issue
Block a user