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
|
||||
@@ -84,12 +84,16 @@
|
||||
|
||||
<!-- Clubs Grid -->
|
||||
<div class="row justify-content-center" id="clubsGrid" style="display: none;">
|
||||
<div class="col-lg-10">
|
||||
<div class="row g-4" id="clubsContainer">
|
||||
<div class="col-12">
|
||||
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4" id="clubsContainer">
|
||||
<!-- Club cards will be inserted here -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 d-flex justify-content-center" id="noResultsContainer" style="display: none;">
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
<div class="row justify-content-center" id="noResultsContainer" style="display: none;">
|
||||
<div class="col-12 d-flex justify-content-center">
|
||||
<div id="noResults" class="d-flex flex-column align-items-center justify-content-center text-center" style="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>
|
||||
@@ -98,7 +102,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Map Modal -->
|
||||
@@ -114,17 +117,17 @@
|
||||
<div class="modal-body p-0">
|
||||
<div id="map" style="height: 600px; width: 100%;"></div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 bg-light">
|
||||
<div class="w-100 d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-geo-alt-fill me-1"></i>
|
||||
<span id="modalLocationCoordinates">Drag the marker to set your location</span>
|
||||
</small>
|
||||
<button type="button" class="btn btn-primary" id="applyLocationBtn">
|
||||
<i class="bi bi-check-circle me-2"></i>Apply Location
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 bg-light">
|
||||
<div class="w-100 d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
<i class="bi bi-geo-alt-fill me-1"></i>
|
||||
<span id="modalLocationCoordinates">Drag the marker to set your location</span>
|
||||
</small>
|
||||
<button type="button" class="btn btn-primary" id="applyLocationBtn">
|
||||
<i class="bi bi-check-circle me-2"></i>Apply Location
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -155,56 +158,20 @@
|
||||
}
|
||||
|
||||
.club-card {
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.club-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
||||
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-img {
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
.club-card:hover .club-cover-img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.club-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: #0d6efd;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-box i {
|
||||
font-size: 1.25rem;
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.stat-box .stat-number {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.stat-box .stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
.club-card:hover .club-title {
|
||||
color: #dc3545 !important;
|
||||
}
|
||||
|
||||
/* Pulsing animation for location marker */
|
||||
@@ -259,6 +226,7 @@
|
||||
|
||||
<script>
|
||||
let map;
|
||||
let pageMap;
|
||||
let userMarker;
|
||||
let searchRadiusCircle;
|
||||
let userLocation = null;
|
||||
@@ -300,7 +268,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
this.classList.add('active', 'btn-primary');
|
||||
|
||||
currentCategory = this.dataset.category;
|
||||
if (currentCategory === 'all') {
|
||||
|
||||
// For 'all' and 'sports-clubs' (Clubs) categories, fetch all clubs with location-based sorting
|
||||
if (currentCategory === 'all' || currentCategory === 'sports-clubs') {
|
||||
fetchAllClubs();
|
||||
} else if (userLocation) {
|
||||
fetchNearbyClubs(userLocation.latitude, userLocation.longitude);
|
||||
@@ -364,9 +334,6 @@ function startWatchingLocation() {
|
||||
// Fetch nearby clubs
|
||||
fetchNearbyClubs(userLocation.latitude, userLocation.longitude);
|
||||
|
||||
// Initialize page map
|
||||
initPageMap(userLocation.latitude, userLocation.longitude);
|
||||
|
||||
// Stop watching after first successful location
|
||||
if (watchId) {
|
||||
navigator.geolocation.clearWatch(watchId);
|
||||
@@ -406,42 +373,6 @@ function updateLocationDisplay(lat, lng) {
|
||||
`<i class="bi bi-geo-alt-fill me-1 fs-5"></i>${lat.toFixed(4)}, ${lng.toFixed(4)}`;
|
||||
}
|
||||
|
||||
// Initialize page map
|
||||
function initPageMap(lat, lng) {
|
||||
if (pageMap) {
|
||||
pageMap.remove();
|
||||
}
|
||||
|
||||
pageMap = L.map('pageMap').setView([lat, lng], 13);
|
||||
|
||||
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
maxZoom: 19
|
||||
}).addTo(pageMap);
|
||||
|
||||
// Add user marker
|
||||
userMarker = L.marker([lat, lng], {
|
||||
icon: L.divIcon({
|
||||
className: 'user-location-marker',
|
||||
html: '<i class="bi bi-geo-alt-fill pulse-marker" style="font-size: 36px; color: #dc3545; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));"></i>',
|
||||
iconSize: [36, 36],
|
||||
iconAnchor: [18, 36]
|
||||
})
|
||||
}).addTo(pageMap);
|
||||
|
||||
// Add club markers
|
||||
if (allClubs.length > 0) {
|
||||
allClubs.forEach(club => {
|
||||
if (club.gps_lat && club.gps_long) {
|
||||
L.marker([club.gps_lat, club.gps_long]).addTo(pageMap)
|
||||
.bindPopup(`<b>${club.club_name}</b><br>${club.owner_name || 'N/A'}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(() => pageMap.invalidateSize(), 100);
|
||||
document.getElementById('mapSection').style.display = 'block';
|
||||
}
|
||||
|
||||
// Initialize map in modal
|
||||
function initMap(lat, lng) {
|
||||
@@ -478,14 +409,6 @@ function initMap(lat, lng) {
|
||||
updateModalLocation(position.lat, position.lng);
|
||||
});
|
||||
|
||||
// Search radius circle (removed - no red tint on map)
|
||||
// searchRadiusCircle = L.circle([lat, lng], {
|
||||
// color: '#dc3545',
|
||||
// fillColor: '#dc3545',
|
||||
// fillOpacity: 0.1,
|
||||
// radius: 50000
|
||||
// }).addTo(map);
|
||||
|
||||
setTimeout(() => map.invalidateSize(), 100);
|
||||
}
|
||||
|
||||
@@ -525,7 +448,13 @@ function fetchAllClubs() {
|
||||
document.getElementById('loadingSpinner').style.display = 'block';
|
||||
document.getElementById('clubsGrid').style.display = 'none';
|
||||
|
||||
fetch(`{{ route('clubs.all') }}`, {
|
||||
// Build URL with location parameters if available
|
||||
let url = `{{ route('clubs.all') }}`;
|
||||
if (userLocation) {
|
||||
url += `?latitude=${userLocation.latitude}&longitude=${userLocation.longitude}`;
|
||||
}
|
||||
|
||||
fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -565,99 +494,94 @@ function displayClubs(clubs) {
|
||||
|
||||
noResultsContainer.style.display = 'none';
|
||||
|
||||
// Update map markers if page map exists
|
||||
if (pageMap) {
|
||||
// Clear existing club markers (assuming user marker is the first)
|
||||
pageMap.eachLayer(function(layer) {
|
||||
if (layer instanceof L.Marker && layer !== userMarker) {
|
||||
pageMap.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
|
||||
// Add new club markers
|
||||
clubs.forEach(club => {
|
||||
if (club.gps_lat && club.gps_long) {
|
||||
L.marker([club.gps_lat, club.gps_long]).addTo(pageMap)
|
||||
.bindPopup(`<b>${club.club_name}</b><br>${club.owner_name || 'N/A'}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
clubs.forEach(club => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'col-md-6 col-lg-4';
|
||||
card.className = 'col';
|
||||
card.innerHTML = `
|
||||
<div class="rounded-none border bg-card text-card-foreground shadow-sm hover:shadow-elevated transition-all cursor-pointer overflow-hidden group">
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
<img src="https://via.placeholder.com/400x200?text=${encodeURIComponent(club.club_name)}" alt="${club.club_name}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
|
||||
<div class="absolute bottom-3 right-3 z-10">
|
||||
<div class="w-14 h-14 rounded-full border-2 border-white/90 shadow-lg overflow-hidden bg-white/95 backdrop-blur">
|
||||
<img src="https://via.placeholder.com/50x50?text=Logo" alt="${club.club_name} logo" class="w-full h-full object-contain rounded-full">
|
||||
<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;">
|
||||
<img src="https://via.placeholder.com/400x200?text=${encodeURIComponent(club.club_name)}" alt="${club.club_name}" loading="lazy" class="w-100 h-100 club-cover-img" style="object-fit: cover; transition: transform 0.3s ease;">
|
||||
|
||||
<!-- 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;">
|
||||
<img src="https://via.placeholder.com/80x80?text=Logo" alt="${club.club_name} logo" loading="lazy" class="w-100 h-100 rounded-circle" style="object-fit: contain;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent absolute top-4 right-4 bg-brand-red text-white hover:bg-brand-red-dark">Sports Club</div>
|
||||
|
||||
<!-- Sports Club Badge - Top Left -->
|
||||
<div class="position-absolute" style="top: 8px; left: 8px;">
|
||||
<span class="badge text-white px-3 py-1" style="background-color: #dc3545; border-radius: 9999px; font-size: 0.75rem; font-weight: 600;">Sports Club</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 pt-4 pb-2">
|
||||
<h3 class="text-2xl font-bold text-foreground leading-tight line-clamp-2">${club.club_name}</h3>
|
||||
</div>
|
||||
<div class="p-6 px-5 pb-5 pt-2 space-y-3">
|
||||
<div>
|
||||
<div class="flex items-center gap-1 text-sm text-brand-red mb-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-navigation w-4 h-4">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Distance -->
|
||||
<div class="d-flex align-items-center mb-1" style="font-size: 0.875rem; color: #dc3545;">
|
||||
<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">
|
||||
<polygon points="3 11 22 2 13 21 11 13 3 11"></polygon>
|
||||
</svg>
|
||||
<span class="font-medium">${club.distance ? club.distance + ' km away' : 'Location available'}</span>
|
||||
<span class="fw-semibold">${club.distance ? club.distance + ' km away' : 'Location available'}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1 text-sm text-muted-foreground">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building w-4 h-4">
|
||||
<rect width="16" height="20" x="4" y="2" rx="2" ry="2"></rect>
|
||||
<path d="M9 22v-4h6v4"></path>
|
||||
<path d="M8 6h.01"></path>
|
||||
<path d="M16 6h.01"></path>
|
||||
<path d="M12 6h.01"></path>
|
||||
<path d="M12 10h.01"></path>
|
||||
<path d="M12 14h.01"></path>
|
||||
<path d="M16 10h.01"></path>
|
||||
<path d="M16 14h.01"></path>
|
||||
<path d="M8 10h.01"></path>
|
||||
<path d="M8 14h.01"></path>
|
||||
|
||||
<!-- Address/Owner -->
|
||||
<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>${club.owner_name || 'N/A'}</span>
|
||||
<span class="text-truncate">${club.owner_name || 'N/A'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-2 border-t pt-3">
|
||||
<div class="bg-brand-red/5 rounded-lg p-2 border border-brand-red/10 hover:border-brand-red/20 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users w-4 h-4 mx-auto mb-1 text-brand-red">
|
||||
<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="text-lg font-bold text-center">0</p>
|
||||
<p class="text-[10px] text-muted-foreground text-center font-medium">Members</p>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="row g-2 text-center mb-3" style="font-size: 0.75rem;">
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: rgba(220, 53, 69, 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: #dc3545;">
|
||||
<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;">13</p>
|
||||
<p class="text-muted mb-0">Members</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-brand-red/5 rounded-lg p-2 border border-brand-red/10 hover:border-brand-red/20 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package w-4 h-4 mx-auto mb-1 text-brand-red">
|
||||
<path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"></path>
|
||||
<path d="M12 22V12"></path>
|
||||
<path d="m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7"></path>
|
||||
<path d="m7.5 4.27 9 5.15"></path>
|
||||
</svg>
|
||||
<p class="text-lg font-bold text-center">0</p>
|
||||
<p class="text-[10px] text-muted-foreground text-center font-medium">Packages</p>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: rgba(220, 53, 69, 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: #dc3545;">
|
||||
<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;">0</p>
|
||||
<p class="text-muted mb-0">Packages</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-brand-red/5 rounded-lg p-2 border border-brand-red/10 hover:border-brand-red/20 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user w-4 h-4 mx-auto mb-1 text-brand-red">
|
||||
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
<p class="text-lg font-bold text-center">0</p>
|
||||
<p class="text-[10px] text-muted-foreground text-center font-medium">Trainers</p>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded" style="background-color: rgba(220, 53, 69, 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: #dc3545;">
|
||||
<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;">0</p>
|
||||
<p class="text-muted mb-0">Trainers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:shadow-medium hover:scale-105 h-10 px-4 py-2 flex-1 bg-brand-red hover:bg-brand-red-dark text-white font-semibold shadow-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-plus w-4 h-4 mr-2">
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-danger flex-fill fw-semibold" 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">
|
||||
<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>
|
||||
<line x1="19" x2="19" y1="8" y2="14"></line>
|
||||
@@ -665,9 +589,7 @@ function displayClubs(clubs) {
|
||||
</svg>
|
||||
Join Club
|
||||
</button>
|
||||
<button class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:text-accent-foreground h-10 px-4 py-2 flex-1 text-brand-red hover:bg-brand-red/10 font-semibold">
|
||||
View Details
|
||||
</button>
|
||||
<button class="btn btn-outline-danger flex-fill fw-semibold" style="font-size: 0.875rem;">View Details</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,165 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
/* Admin Layout - BOXED with Sidebar */
|
||||
.admin-wrapper {
|
||||
max-width: 1320px;
|
||||
margin: 20px auto;
|
||||
padding: 0 15px;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.admin-sidebar {
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
border-right: 1px solid hsl(var(--border));
|
||||
background-color: hsl(var(--muted) / 0.3);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
height: fit-content;
|
||||
position: sticky;
|
||||
top: 92px;
|
||||
}
|
||||
|
||||
.admin-sidebar h2 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--muted-foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-sidebar nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-nav-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
color: hsl(var(--foreground));
|
||||
background-color: hsl(var(--card));
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.admin-nav-item:hover {
|
||||
background-color: hsl(var(--muted));
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
text-decoration: none;
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.admin-nav-item.active {
|
||||
background-color: hsl(var(--primary));
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
.admin-nav-item.active .nav-item-text,
|
||||
.admin-nav-item.active .nav-item-subtitle {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.admin-nav-item i {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.nav-item-content {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item-text {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-item-subtitle {
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--muted-foreground));
|
||||
margin: 0.25rem 0 0 0;
|
||||
}
|
||||
|
||||
.admin-nav-item.active .nav-item-subtitle {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.admin-nav-divider {
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.admin-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.admin-sidebar {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Admin Wrapper - BOXED -->
|
||||
<div class="admin-wrapper">
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<h2>Admin Panel</h2>
|
||||
<nav>
|
||||
<a href="{{ route('admin.platform.clubs') }}" class="admin-nav-item {{ request()->routeIs('admin.platform.clubs*') || request()->routeIs('admin.platform.index') ? 'active' : '' }}">
|
||||
<i class="bi bi-building"></i>
|
||||
<div class="nav-item-content">
|
||||
<p class="nav-item-text">All Clubs</p>
|
||||
<p class="nav-item-subtitle">Manage {{ $clubsCount ?? 0 }} {{ ($clubsCount ?? 0) === 1 ? 'club' : 'clubs' }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{{ route('admin.platform.members') }}" class="admin-nav-item {{ request()->routeIs('admin.platform.members*') ? 'active' : '' }}">
|
||||
<i class="bi bi-people"></i>
|
||||
<div class="nav-item-content">
|
||||
<p class="nav-item-text">All Members</p>
|
||||
<p class="nav-item-subtitle">View all platform members</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="{{ route('admin.platform.backup') }}" class="admin-nav-item {{ request()->routeIs('admin.platform.backup*') ? 'active' : '' }}">
|
||||
<i class="bi bi-database"></i>
|
||||
<div class="nav-item-content">
|
||||
<p class="nav-item-text">Backup & Restore</p>
|
||||
<p class="nav-item-subtitle">Database management</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="admin-nav-divider"></div>
|
||||
<a href="{{ route('clubs.explore') }}" class="admin-nav-item" style="border: 1px solid hsl(var(--border));">
|
||||
<i class="bi bi-eye text-primary"></i>
|
||||
<div class="nav-item-content">
|
||||
<p class="nav-item-text">Back to Explore</p>
|
||||
<p class="nav-item-subtitle">View as user</p>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="admin-content">
|
||||
@yield('admin-content')
|
||||
</main>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -415,15 +415,11 @@
|
||||
<i class="bi bi-gear me-2"></i>Settings
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
@if(Auth::user()->has_business ?? false)
|
||||
<a class="dropdown-item small" href="#">
|
||||
<i class="bi bi-building me-2"></i>Manage My Business
|
||||
</a>
|
||||
@endif
|
||||
@if((Auth::user()->is_super_admin ?? false) || (Auth::user()->is_moderator ?? false))
|
||||
<a class="dropdown-item small" href="#">
|
||||
<i class="bi bi-shield me-2"></i>Admin Panel
|
||||
@if(Auth::user()->isSuperAdmin())
|
||||
<a class="dropdown-item small" href="{{ route('admin.platform.index') }}">
|
||||
<i class="bi bi-shield-check me-2"></i>Admin Panel
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
@endif
|
||||
@if((Auth::user()->has_business ?? false) || ((Auth::user()->is_super_admin ?? false) || (Auth::user()->is_moderator ?? false)))
|
||||
<div class="dropdown-divider"></div>
|
||||
@@ -450,9 +446,71 @@
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 9999;">
|
||||
@if(session('success'))
|
||||
<div class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" id="successToast">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<i class="bi bi-check-circle me-2"></i>{{ session('success') }}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if(session('error'))
|
||||
<div class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" id="errorToast">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if(session('info'))
|
||||
<div class="toast align-items-center text-white bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true" id="infoToast">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<i class="bi bi-info-circle me-2"></i>{{ session('info') }}
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if(session('warning'))
|
||||
<div class="toast align-items-center text-dark bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true" id="warningToast">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
<i class="bi bi-exclamation-triangle me-2"></i>{{ session('warning') }}
|
||||
</div>
|
||||
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS Bundle with Popper -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
// Auto-show and auto-hide toasts
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const toasts = ['successToast', 'errorToast', 'infoToast', 'warningToast'];
|
||||
|
||||
toasts.forEach(function(toastId) {
|
||||
const toastElement = document.getElementById(toastId);
|
||||
if (toastElement) {
|
||||
const toast = new bootstrap.Toast(toastElement, {
|
||||
autohide: true,
|
||||
delay: 3000
|
||||
});
|
||||
toast.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- jQuery (required for Select2) -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
|
||||
|
||||
Reference in new issue
Block a user