285 lines
11 KiB
PHP
285 lines
11 KiB
PHP
@props(['club' => null, 'mode' => 'create'])
|
|
|
|
@php
|
|
$isEdit = $mode === 'edit' && $club;
|
|
@endphp
|
|
|
|
<div class="container-fluid px-0">
|
|
<h5 class="fw-bold mb-3">Basic Information</h5>
|
|
<p class="text-muted mb-4">Core details about the club</p>
|
|
|
|
<!-- Club Name -->
|
|
<div class="mb-4">
|
|
<label for="club_name" class="form-label">
|
|
Club Name <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="club_name"
|
|
name="club_name"
|
|
value="{{ $club->club_name ?? old('club_name') }}"
|
|
required
|
|
data-error-message="Club name is required"
|
|
placeholder="e.g., Bahrain Taekwondo Academy">
|
|
<div class="invalid-feedback">Club name is required.</div>
|
|
</div>
|
|
|
|
<!-- Club Owner -->
|
|
<div class="mb-4">
|
|
<label class="form-label">
|
|
Club Owner <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="hidden" id="owner_user_id" name="owner_user_id" value="{{ $club->owner_user_id ?? old('owner_user_id') }}" required>
|
|
|
|
<div id="ownerDisplay" class="border rounded p-3 mb-2" style="background-color: hsl(var(--muted) / 0.3);">
|
|
@if($isEdit && $club->owner)
|
|
<div class="d-flex align-items-center gap-3">
|
|
@if($club->owner->profile_picture)
|
|
<img src="{{ asset('storage/' . $club->owner->profile_picture) }}"
|
|
alt="{{ $club->owner->full_name }}"
|
|
class="rounded-circle"
|
|
style="width: 50px; height: 50px; object-fit: cover;">
|
|
@else
|
|
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center"
|
|
style="width: 50px; height: 50px; font-size: 1.25rem; font-weight: 600;">
|
|
{{ substr($club->owner->full_name, 0, 1) }}
|
|
</div>
|
|
@endif
|
|
<div class="flex-grow-1">
|
|
<div class="fw-semibold">{{ $club->owner->full_name }}</div>
|
|
<div class="small text-muted">
|
|
<i class="bi bi-envelope me-1"></i>{{ $club->owner->email }}
|
|
@if($club->owner->mobile)
|
|
<span class="ms-2"><i class="bi bi-phone me-1"></i>{{ $club->owner->mobile_formatted }}</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="text-center text-muted py-3" id="noOwnerSelected">
|
|
<i class="bi bi-person-plus fs-3 mb-2"></i>
|
|
<p class="mb-0">No owner selected</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-outline-primary btn-sm" onclick="showUserPicker()">
|
|
<i class="bi bi-search me-2"></i>Select Club Owner
|
|
</button>
|
|
<div class="invalid-feedback d-block" id="ownerError" style="display: none !important;">
|
|
Please select a club owner.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Internal User Picker Overlay (NOT a separate modal) -->
|
|
<div id="userPickerOverlay" class="user-picker-overlay" style="display: none;">
|
|
<div class="user-picker-panel">
|
|
<div class="user-picker-header">
|
|
<div>
|
|
<h5 class="fw-bold mb-1">Select Club Owner</h5>
|
|
<p class="text-muted small mb-0">Search and select a user to be the club owner</p>
|
|
</div>
|
|
<button type="button" class="btn-close" onclick="hideUserPicker()"></button>
|
|
</div>
|
|
|
|
<div class="user-picker-body">
|
|
<div class="mb-3">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-white">
|
|
<i class="bi bi-search"></i>
|
|
</span>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="userSearchInputInternal"
|
|
placeholder="Search by name, email, or phone..."
|
|
autocomplete="off">
|
|
</div>
|
|
</div>
|
|
|
|
<div id="userPickerLoadingInternal" class="text-center py-5" style="display: none;">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="text-muted mt-2">Searching users...</p>
|
|
</div>
|
|
|
|
<div id="userPickerResultsInternal" style="max-height: 400px; overflow-y: auto;"></div>
|
|
|
|
<div id="userPickerNoResultsInternal" class="text-center py-5" style="display: none;">
|
|
<i class="bi bi-person-x fs-1 text-muted mb-3"></i>
|
|
<p class="text-muted mb-0">No users found</p>
|
|
<small class="text-muted">Try a different search term</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Established Date -->
|
|
<div class="mb-4">
|
|
<label for="established_date" class="form-label">
|
|
Established Date
|
|
</label>
|
|
<input type="date"
|
|
class="form-control"
|
|
id="established_date"
|
|
name="established_date"
|
|
value="{{ $club->established_date ?? old('established_date') }}"
|
|
max="{{ date('Y-m-d') }}">
|
|
<small class="text-muted">When was the club founded?</small>
|
|
</div>
|
|
|
|
<!-- Slogan -->
|
|
<div class="mb-4">
|
|
<label for="slogan" class="form-label">
|
|
Slogan
|
|
</label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="slogan"
|
|
name="slogan"
|
|
value="{{ $club->slogan ?? old('slogan') }}"
|
|
placeholder="e.g., Excellence in Martial Arts"
|
|
maxlength="100">
|
|
<small class="text-muted">A short, memorable tagline (max 100 characters)</small>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="mb-4">
|
|
<label for="description" class="form-label">
|
|
Description
|
|
</label>
|
|
<textarea class="form-control"
|
|
id="description"
|
|
name="description"
|
|
rows="4"
|
|
placeholder="Describe your club, its mission, and what makes it unique..."
|
|
maxlength="1000">{{ $club->description ?? old('description') }}</textarea>
|
|
<small class="text-muted">
|
|
<span id="descriptionCount">0</span>/1000 characters
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Commercial Registration -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label for="commercial_reg_number" class="form-label">
|
|
Commercial Registration Number
|
|
</label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="commercial_reg_number"
|
|
name="commercial_reg_number"
|
|
value="{{ $club->commercial_reg_number ?? old('commercial_reg_number') }}"
|
|
placeholder="e.g., CR-123456">
|
|
<small class="text-muted">Official business registration number</small>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="commercial_reg_file" class="form-label">
|
|
Registration Document
|
|
</label>
|
|
<input type="file"
|
|
class="form-control"
|
|
id="commercial_reg_file"
|
|
name="commercial_reg_file"
|
|
accept=".pdf,.jpg,.jpeg,.png">
|
|
<small class="text-muted">Upload registration certificate (optional)</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VAT Information -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label for="vat_reg_number" class="form-label">
|
|
VAT Registration Number
|
|
</label>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="vat_reg_number"
|
|
name="vat_reg_number"
|
|
value="{{ $club->vat_reg_number ?? old('vat_reg_number') }}"
|
|
placeholder="e.g., VAT-123456789">
|
|
<small class="text-muted">Tax registration number (if applicable)</small>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="vat_percentage" class="form-label">
|
|
VAT Percentage (%)
|
|
</label>
|
|
<input type="number"
|
|
class="form-control"
|
|
id="vat_percentage"
|
|
name="vat_percentage"
|
|
value="{{ $club->vat_percentage ?? old('vat_percentage', '0') }}"
|
|
min="0"
|
|
max="100"
|
|
step="0.01"
|
|
placeholder="e.g., 5.00">
|
|
<small class="text-muted">Default VAT rate for invoices</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VAT Certificate Upload -->
|
|
<div class="mb-4">
|
|
<label for="vat_certificate_file" class="form-label">
|
|
VAT Certificate
|
|
</label>
|
|
<input type="file"
|
|
class="form-control"
|
|
id="vat_certificate_file"
|
|
name="vat_certificate_file"
|
|
accept=".pdf,.jpg,.jpeg,.png">
|
|
<small class="text-muted">Upload VAT registration certificate (optional)</small>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Character counter for description
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const descriptionTextarea = document.getElementById('description');
|
|
const descriptionCount = document.getElementById('descriptionCount');
|
|
|
|
if (descriptionTextarea && descriptionCount) {
|
|
function updateCount() {
|
|
descriptionCount.textContent = descriptionTextarea.value.length;
|
|
}
|
|
|
|
descriptionTextarea.addEventListener('input', updateCount);
|
|
updateCount(); // Initial count
|
|
}
|
|
|
|
// Auto-generate slug from club name (will be used in Identity tab)
|
|
const clubNameInput = document.getElementById('club_name');
|
|
if (clubNameInput) {
|
|
clubNameInput.addEventListener('input', function() {
|
|
const slug = this.value
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '');
|
|
|
|
const slugInput = document.getElementById('slug');
|
|
if (slugInput && !slugInput.dataset.manuallyEdited) {
|
|
slugInput.value = slug;
|
|
// Trigger slug change event for URL preview
|
|
slugInput.dispatchEvent(new Event('input'));
|
|
}
|
|
});
|
|
}
|
|
|
|
// Validate owner selection
|
|
const ownerInput = document.getElementById('owner_user_id');
|
|
if (ownerInput) {
|
|
ownerInput.addEventListener('change', function() {
|
|
const ownerError = document.getElementById('ownerError');
|
|
if (this.value) {
|
|
ownerError.style.display = 'none';
|
|
this.classList.remove('is-invalid');
|
|
} else {
|
|
ownerError.style.display = 'block';
|
|
this.classList.add('is-invalid');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|