ghassan/scp-syria
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backup: before cancel reservation feature on operator dashboard

Browse Source
This commit is contained in:
ghassan committed 2026-04-16 16:19:33 +03:00
1 parent 51bdf50292
commit c481135280
21 files changed
+793 -91
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/admin/bookings/active.blade.php
+112 -23
View File
@@ -307,7 +307,7 @@
<td class="text-center">
<button class="btn btn-sm fw-600"
style="background:rgba(239,68,68,.1);color:#dc2626;border:none;border-radius:.5rem;font-family:'Cairo',sans-serif;padding:.35rem .9rem;"
onclick="completeBooking({{ $booking->id }}, this)">
onclick="askComplete({{ $booking->id }}, '{{ addslashes($booking->vehicle_plate ?? '—') }}', '{{ addslashes($booking->parkingLot->name) }}')">
<i class="bi bi-stop-circle me-1"></i>إنهاء
</button>
</td>
@@ -338,59 +338,148 @@
</div>
{{-- ── Confirm complete modal ───────────────────────────────────────────────── --}}
<div class="modal fade" id="confirmCompleteModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
<div class="modal-content" style="border:none;border-radius:1rem;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15);">
<div style="background:linear-gradient(135deg,#dc2626,#ef4444);padding:1.25rem 1.5rem;">
<div class="d-flex align-items-center gap-3">
<div style="width:44px;height:44px;background:rgba(255,255,255,.15);border-radius:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<i class="bi bi-stop-circle-fill" style="font-size:1.3rem;color:#fff;"></i>
</div>
<div class="flex-grow-1">
<div class="fw-800" style="color:#fff;font-size:1rem;">إنهاء الحجز</div>
<div class="text-xs mt-1" style="color:rgba(255,255,255,.75);">تأكيد تسجيل خروج السيارة</div>
</div>
<button type="button" class="btn-close btn-close-white flex-shrink-0" data-bs-dismiss="modal"></button>
</div>
</div>
<div class="p-4">
<div class="p-3 rounded-3 mb-4" style="background:#f8fafc;border:1px solid #f1f5f9;">
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="text-xs fw-600" style="color:#64748b;">رقم اللوحة</span>
<span class="fw-800" id="confirmPlate" style="font-family:monospace;font-size:1rem;color:#0f172a;letter-spacing:.05em;"></span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span class="text-xs fw-600" style="color:#64748b;">الموقف</span>
<span class="fw-600 text-sm" id="confirmLot" style="color:#475569;"></span>
</div>
</div>
<p class="text-sm mb-0" style="color:#64748b;text-align:center;">
هل تريد إنهاء هذا الحجز وتسجيل خروج السيارة؟
</p>
</div>
<div class="px-4 pb-4 d-flex gap-2">
<button type="button" class="btn btn-sm fw-600"
style="background:#f1f5f9;color:#475569;border:none;border-radius:.5rem;font-family:'Cairo',sans-serif;padding:.5rem 1rem;"
data-bs-dismiss="modal">إلغاء</button>
<button type="button" id="confirmCompleteBtn"
class="btn btn-sm fw-700 flex-grow-1"
style="background:#ef4444;color:#fff;border:none;border-radius:.5rem;font-family:'Cairo',sans-serif;padding:.5rem;">
<i class="bi bi-stop-circle me-1"></i>تأكيد الإنهاء
</button>
</div>
</div>
</div>
</div>
{{-- ── Toast ────────────────────────────────────────────────────────────────── --}}
<div id="toastWrap" style="position:fixed;bottom:1.5rem;inset-inline-start:50%;transform:translateX(-50%);z-index:9999;pointer-events:none;"></div>
@push('scripts')
<script>
// ── Filters ───────────────────────────────────────────────────────────────────
function applyFilters() {
const url = new URL(window.location);
const lot = document.getElementById('lotFilter').value;
const search = document.getElementById('searchInput').value.trim();
lot ? url.searchParams.set('parking_lot_id', lot) : url.searchParams.delete('parking_lot_id');
search ? url.searchParams.set('search', search) : url.searchParams.delete('search');
lot ? url.searchParams.set('parking_lot_id', lot) : url.searchParams.delete('parking_lot_id');
search ? url.searchParams.set('search', search) : url.searchParams.delete('search');
url.searchParams.delete('page');
window.location.href = url.toString();
}
document.getElementById('lotFilter').addEventListener('change', applyFilters);
document.getElementById('searchInput').addEventListener('keydown', e => {
if (e.key === 'Enter') applyFilters();
});
async function completeBooking(id, btn) {
if (!confirm('إنهاء هذا الحجز؟')) return;
const orig = btn.innerHTML;
// ── Toast ─────────────────────────────────────────────────────────────────────
function showToast(msg, type = 'success') {
const color = type === 'success' ? '#10b981' : '#ef4444';
const icon = type === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-triangle-fill';
const el = document.createElement('div');
el.style.cssText = `background:#0f172a;color:#f8fafc;padding:.65rem 1.25rem;border-radius:.625rem;font-size:.85rem;font-weight:600;box-shadow:0 4px 20px rgba(0,0,0,.25);display:flex;align-items:center;gap:.6rem;pointer-events:auto;margin-top:.5rem;`;
el.innerHTML = `<i class="bi ${icon}" style="color:${color};font-size:1rem;flex-shrink:0;"></i>${msg}`;
document.getElementById('toastWrap').appendChild(el);
setTimeout(() => { el.style.transition='opacity .4s'; el.style.opacity='0'; setTimeout(()=>el.remove(),400); }, 3500);
}
// ── Confirm complete modal ────────────────────────────────────────────────────
let pendingId = null;
let confirmModal = null;
function getConfirmModal() {
if (!confirmModal) confirmModal = new bootstrap.Modal(document.getElementById('confirmCompleteModal'));
return confirmModal;
}
function askComplete(id, plate, lot) {
pendingId = id;
document.getElementById('confirmPlate').textContent = plate;
document.getElementById('confirmLot').textContent = lot;
getConfirmModal().show();
}
document.getElementById('confirmCompleteBtn').addEventListener('click', async () => {
if (!pendingId) return;
const btn = document.getElementById('confirmCompleteBtn');
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>جاري الإنهاء...';
try {
const res = await fetch(`/admin/bookings/${id}/complete`, {
const res = await fetch(`/admin/bookings/${pendingId}/complete`, {
method: 'POST',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
'Content-Type': 'application/json'
'Content-Type': 'application/json',
}
});
const data = await res.json();
getConfirmModal().hide();
if (data.success) {
const row = document.getElementById('row-' + id);
row.style.transition = 'opacity .4s, transform .4s';
row.style.opacity = '0';
row.style.transform = 'translateX(20px)';
setTimeout(() => row.remove(), 420);
const row = document.getElementById('row-' + pendingId);
if (row) {
row.style.transition = 'opacity .4s, transform .4s';
row.style.opacity = '0';
row.style.transform = 'translateX(20px)';
setTimeout(() => row.remove(), 420);
}
showToast('تم إنهاء الحجز بنجاح.');
} else {
alert(data.message || 'خطأ');
btn.innerHTML = orig;
btn.disabled = false;
showToast(data.message || 'حدث خطأ أثناء الإنهاء.', 'error');
}
} catch {
alert('خطأ في الاتصال');
btn.innerHTML = orig;
btn.disabled = false;
getConfirmModal().hide();
showToast('تعذّر الاتصال بالخادم. حاول مجدداً.', 'error');
} finally {
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-stop-circle me-1"></i>تأكيد الإنهاء';
pendingId = null;
}
}
});
// Countdown refresh
// ── Auto-refresh (pauses while modal is open) ─────────────────────────────────
let t = 30;
let refreshPaused = false;
const badge = document.getElementById('refresh-badge');
document.querySelectorAll('.modal').forEach(m => {
m.addEventListener('show.bs.modal', () => { refreshPaused = true; });
m.addEventListener('hidden.bs.modal', () => { refreshPaused = false; t = 30; });
});
setInterval(() => {
if (refreshPaused) return;
t--;
badge.textContent = `تحديث بعد ${t}ث`;
if (t <= 0) location.reload();
resources/views/admin/dashboard.blade.php
+1 -1
View File
@@ -74,7 +74,7 @@
</a>
</div>
<div class="col-lg-3 col-sm-6">
<div class="quick-card card h-100 p-4" onclick="alert('قريباً...')">
<div class="quick-card card h-100 p-4" style="cursor:default;">
<div class="quick-icon" style="background:rgba(100,116,139,.1);">
<i class="bi bi-gear" style="color:#64748b;"></i>
</div>
resources/views/admin/parking-lots/index.blade.php
+121 -21
View File
@@ -485,10 +485,81 @@ $gradients = [
</div>
</div>
{{-- Toggle Status Confirmation Modal --}}
<div class="modal fade" id="toggleStatusModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
<div class="modal-content border-0 shadow-lg" style="border-radius:16px;overflow:hidden;">
<div class="modal-header border-0 text-white" style="background:linear-gradient(135deg,#f59e0b,#d97706);">
<h6 class="modal-title fw-bold mb-0" style="font-family:'Cairo',sans-serif;">
<i class="bi bi-toggle-on me-2"></i>تغيير حالة الموقف
</h6>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center p-4">
<p class="mb-0 fw-600" style="color:#0f172a;font-family:'Cairo',sans-serif;">
هل تريد تغيير حالة هذا الموقف؟
</p>
</div>
<div class="modal-footer border-0 pt-0 pb-4 px-4 gap-2">
<button type="button" class="btn btn-light flex-fill fw-600" style="font-family:'Cairo',sans-serif;border-radius:10px;"
data-bs-dismiss="modal">إلغاء</button>
<button type="button" id="toggleStatusConfirmBtn"
class="btn btn-warning flex-fill fw-bold text-white"
style="font-family:'Cairo',sans-serif;border-radius:10px;">
<i class="bi bi-check2 me-1"></i>تأكيد
</button>
</div>
</div>
</div>
</div>
{{-- Delete Lot Confirmation Modal --}}
<div class="modal fade" id="deleteLotModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
<div class="modal-content border-0 shadow-lg" style="border-radius:16px;overflow:hidden;">
<div class="modal-header border-0 text-white" style="background:linear-gradient(135deg,#dc2626,#991b1b);">
<h6 class="modal-title fw-bold mb-0" style="font-family:'Cairo',sans-serif;">
<i class="bi bi-trash3 me-2"></i>حذف الموقف
</h6>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center p-4">
<div class="mb-3" style="font-size:2.5rem;">⚠️</div>
<p class="fw-700 mb-1" style="color:#0f172a;font-family:'Cairo',sans-serif;">
حذف "<span id="deleteLotName"></span>"
</p>
<p class="text-muted small mb-0">سيتم حذف جميع بيانات الموقف نهائياً ولا يمكن التراجع.</p>
</div>
<div class="modal-footer border-0 pt-0 pb-4 px-4 gap-2">
<button type="button" class="btn btn-light flex-fill fw-600" style="font-family:'Cairo',sans-serif;border-radius:10px;"
data-bs-dismiss="modal">إلغاء</button>
<button type="button" id="deleteLotConfirmBtn"
class="btn btn-danger flex-fill fw-bold"
style="font-family:'Cairo',sans-serif;border-radius:10px;">
<i class="bi bi-trash3 me-1"></i>حذف نهائياً
</button>
</div>
</div>
</div>
</div>
@push('scripts')
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
window.onerror = (msg, src, line) => { alert('JS خطأ في السطر ' + line + ':\n' + msg); };
// ── Toast helper ─────────────────────────────────────────────────────────
function showToast(msg, type = 'success') {
const colors = { success:'#10b981', danger:'#ef4444', warning:'#f59e0b', info:'#3b82f6' };
const t = document.createElement('div');
t.style.cssText = `position:fixed;bottom:1.25rem;inset-inline-end:1.25rem;z-index:9999;
background:${colors[type]||colors.success};color:#fff;padding:.75rem 1.25rem;border-radius:10px;
font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:600;
box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .25s;max-width:360px;`;
t.textContent = msg;
document.body.appendChild(t);
requestAnimationFrame(() => { t.style.opacity = '1'; });
setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 3500);
}
// ── Parking lots data from server ─────────────────────────────────────────
const lotsData = @json($parkingLots->items());
@@ -591,7 +662,7 @@ function previewImage(input) {
function editLot(id) {
const lot = lotsData.find(l => l.id === id);
if (!lot) { alert('لم يتم العثور على بيانات الموقف'); return; }
if (!lot) { showToast('لم يتم العثور على بيانات الموقف', 'danger'); return; }
editingId = id;
document.getElementById('modalLabel').textContent = 'تعديل: ' + lot.name;
@@ -632,12 +703,12 @@ async function saveLot() {
if (result.success) {
location.reload();
} else if (result.errors) {
const msgs = Object.values(result.errors).flat().join('\n');
alert(msgs);
const msgs = Object.values(result.errors).flat().join(' — ');
showToast(msgs, 'danger');
} else {
alert(result.message || 'خطأ في العملية');
showToast(result.message || 'خطأ في العملية', 'danger');
}
} catch(err) { alert('خطأ في الاتصال: ' + err.message); }
} catch(err) { showToast('خطأ في الاتصال', 'danger'); }
finally { setBtnLoading(false); }
}
@@ -646,14 +717,27 @@ function setBtnLoading(on) {
document.getElementById('submitSpinner').classList.toggle('d-none', !on);
}
let pendingToggleId = null;
const toggleModal = new bootstrap.Modal(document.getElementById('toggleStatusModal'));
function toggleStatus(id) {
if (!confirm('تغيير حالة الموقف؟')) return;
fetch(`/admin/parking-lots/${id}/toggle`, {
method: 'POST',
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
}).then(r => r.json()).then(d => d.success ? location.reload() : alert(d.message));
pendingToggleId = id;
toggleModal.show();
}
document.getElementById('toggleStatusConfirmBtn').addEventListener('click', async () => {
if (!pendingToggleId) return;
toggleModal.hide();
try {
const res = await fetch(`/admin/parking-lots/${pendingToggleId}/toggle`, {
method: 'POST',
headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content }
});
const d = await res.json();
d.success ? location.reload() : showToast(d.message || 'حدث خطأ', 'danger');
} catch { showToast('خطأ في الاتصال', 'danger'); }
});
document.getElementById('searchInput').addEventListener('keypress', e => {
if (e.key === 'Enter') doSearch();
});
@@ -685,7 +769,7 @@ function openPricingModal(id, name) {
updatePricingPreview();
bootstrap.Modal.getOrCreateInstance(document.getElementById('pricingModal')).show();
} catch(e) {
alert('خطأ في فتح نافذة التسعير:\n' + e.message);
showToast('خطأ في فتح نافذة التسعير', 'danger');
}
}
@@ -726,7 +810,7 @@ async function savePricing() {
const base = parseFloat(document.getElementById('p_base').value);
if (isNaN(base) || base < 0) {
alert('يرجى إدخال سعر أساسي صحيح');
showToast('يرجى إدخال سعر أساسي صحيح', 'warning');
return;
}
@@ -755,21 +839,33 @@ async function savePricing() {
bootstrap.Modal.getInstance(document.getElementById('pricingModal'))?.hide();
location.reload();
} else {
alert(data.message || 'خطأ في الحفظ');
showToast(data.message || 'خطأ في الحفظ', 'danger');
}
} catch {
alert('خطأ في الاتصال');
showToast('خطأ في الاتصال', 'danger');
} finally {
document.getElementById('savePricingBtn').disabled = false;
document.getElementById('pricingSpinner').classList.add('d-none');
}
}
async function deleteLot(id, name) {
if (!confirm(`حذف الموقف "${name}"؟\nسيتم حذف جميع بيانات الموقف نهائياً.`)) return;
let pendingDeleteId = null;
const deleteModal = new bootstrap.Modal(document.getElementById('deleteLotModal'));
function deleteLot(id, name) {
pendingDeleteId = id;
document.getElementById('deleteLotName').textContent = name;
deleteModal.show();
}
document.getElementById('deleteLotConfirmBtn').addEventListener('click', async () => {
if (!pendingDeleteId) return;
const btn = document.getElementById('deleteLotConfirmBtn');
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>جاري الحذف...';
deleteModal.hide();
try {
const res = await fetch(`/admin/parking-lots/${id}`, {
const res = await fetch(`/admin/parking-lots/${pendingDeleteId}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
@@ -780,12 +876,16 @@ async function deleteLot(id, name) {
if (data.success) {
location.reload();
} else {
alert(data.message || 'تعذّر الحذف');
showToast(data.message || 'تعذّر الحذف', 'danger');
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-trash3 me-1"></i>حذف نهائياً';
}
} catch {
alert('خطأ في الاتصال');
showToast('خطأ في الاتصال', 'danger');
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-trash3 me-1"></i>حذف نهائياً';
}
}
});
</script>
@endpush
resources/views/auth/register.blade.php
+36
View File
@@ -45,6 +45,42 @@
</div>
</div>
<div class="mb-3">
<label class="form-label">رقم الهاتف</label>
@php
$countries = [
['🇸🇾','سوريا','+963'],['🇸🇦','السعودية','+966'],['🇦🇪','الإمارات','+971'],
['🇯🇴','الأردن','+962'],['🇱🇧','لبنان','+961'],['🇮🇶','العراق','+964'],
['🇪🇬','مصر','+20'],['🇴🇲','عُمان','+968'],['🇶🇦','قطر','+974'],
['🇰🇼','الكويت','+965'],['🇧🇭','البحرين','+973'],['🇾🇪','اليمن','+967'],
['🇵🇸','فلسطين','+970'],['🇲🇦','المغرب','+212'],['🇩🇿','الجزائر','+213'],
['🇹🇳','تونس','+216'],['🇱🇾','ليبيا','+218'],['🇸🇩','السودان','+249'],
['🇹🇷','تركيا','+90'],['🇮🇷','إيران','+98'],['🇩🇪','ألمانيا','+49'],
['🇫🇷','فرنسا','+33'],['🇬🇧','بريطانيا','+44'],['🇺🇸','أمريكا','+1'],
['🇷🇺','روسيا','+7'],['🇨🇳','الصين','+86'],['🇮🇳','الهند','+91'],
['🇦🇺','أستراليا','+61'],['🇮🇹','إيطاليا','+39'],['🇪🇸','إسبانيا','+34'],
['🇧🇷','البرازيل','+55'],['🇵🇰','باكستان','+92'],['🇳🇬','نيجيريا','+234'],
];
$oldCountry = old('phone_country', '+963');
@endphp
<div class="input-group @error('phone') is-invalid @enderror">
<input type="tel" name="phone_local" value="{{ old('phone_local') }}" required
class="form-control @error('phone') is-invalid @enderror"
style="border-color:#e2e8f0;"
placeholder="912345678" dir="ltr">
<select name="phone_country" dir="ltr"
style="max-width:130px;background:#f8fafc;border-color:#e2e8f0;color:#374151;font-family:'Cairo',sans-serif;font-size:.875rem;cursor:pointer;"
class="form-select">
@foreach($countries as [$flag, $label, $code])
<option value="{{ $code }}" {{ $oldCountry === $code ? 'selected' : '' }}>
{{ $flag }} {{ $code }}
</option>
@endforeach
</select>
</div>
@error('phone')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
</div>
<div class="mb-3">
<label class="form-label">كلمة السر</label>
<div class="input-group">
resources/views/index.blade.php
+220 -3
View File
@@ -218,6 +218,100 @@
</div>
</div>
{{-- ══ BOOKING FORM MODAL ══════════════════════════════════════════════════ --}}
<div class="modal fade" id="bookingModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
<div class="modal-content" style="border:none;border-radius:1rem;overflow:hidden;">
{{-- Top banner: lot info --}}
<div style="background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:1.25rem 1.5rem;">
<div class="d-flex align-items-center gap-3">
<div style="width:42px;height:42px;background:rgba(99,102,241,.25);border-radius:.625rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
<i class="bi bi-p-square-fill" style="color:#a5b4fc;font-size:1.2rem;"></i>
</div>
<div class="flex-grow-1 min-width-0">
<div id="bookingLotName" class="fw-700 text-truncate" style="color:#f8fafc;font-size:.95rem;"></div>
<div id="bookingLotMeta" class="text-xs mt-1" style="color:#94a3b8;"></div>
</div>
<button type="button" class="btn-close btn-close-white flex-shrink-0" data-bs-dismiss="modal"></button>
</div>
</div>
{{-- Booker identity (read-only) --}}
<div style="background:#f8fafc;padding:.75rem 1.5rem;border-bottom:1px solid #f1f5f9;">
<div class="d-flex align-items-center gap-2">
<i class="bi bi-person-check-fill" style="color:#10b981;font-size:.95rem;"></i>
<span class="text-xs fw-600" style="color:#475569;" id="bookingUserInfo"></span>
</div>
</div>
<div class="p-4">
{{-- Alert --}}
<div id="bookingAlert" class="d-none mb-3"></div>
<div class="row g-3">
{{-- Plate number --}}
<div class="col-12">
<label class="form-label fw-600" style="font-size:.82rem;color:#374151;">
<i class="bi bi-car-front me-1" style="color:#6366f1;"></i>
رقم لوحة السيارة
</label>
<input type="text" id="bkPlate" class="form-control fw-700"
style="letter-spacing:.1em;text-transform:uppercase;font-size:1rem;text-align:center;"
placeholder="أ ب ج 1234" dir="ltr">
</div>
{{-- Date/time --}}
<div class="col-6">
<label class="form-label fw-600" style="font-size:.82rem;color:#374151;">
<i class="bi bi-play-circle me-1" style="color:#10b981;"></i>
من
</label>
<input type="datetime-local" id="bkStart" class="form-control" dir="ltr" style="font-size:.85rem;">
</div>
<div class="col-6">
<label class="form-label fw-600" style="font-size:.82rem;color:#374151;">
<i class="bi bi-stop-circle me-1" style="color:#ef4444;"></i>
إلى
</label>
<input type="datetime-local" id="bkEnd" class="form-control" dir="ltr" style="font-size:.85rem;">
</div>
{{-- Price summary --}}
<div class="col-12">
<div id="bookingPriceSummary" style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:.625rem;padding:.875rem 1rem;">
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="text-xs" style="color:#64748b;">المدة</span>
<span class="fw-600 text-xs" id="bkDuration" style="color:#0f172a;">--</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="text-xs" style="color:#64748b;">السعر / ساعة</span>
<span class="fw-600 text-xs" id="bkHourlyRate" style="color:#0f172a;">--</span>
</div>
<div style="border-top:1px dashed #bbf7d0;margin:.5rem 0;"></div>
<div class="d-flex justify-content-between align-items-center">
<span class="fw-700" style="color:#065f46;font-size:.85rem;">المبلغ الإجمالي</span>
<span class="fw-800" id="bkTotal" style="color:#059669;font-size:1.15rem;">--</span>
</div>
</div>
</div>
</div>
</div>
<div class="px-4 pb-4 d-flex gap-2">
<button type="button" class="btn btn-sm fw-600"
style="background:#f1f5f9;color:#475569;border:none;border-radius:.5rem;font-family:'Cairo',sans-serif;padding:.5rem 1rem;"
data-bs-dismiss="modal">إلغاء</button>
<button type="button" id="confirmBookingBtn"
class="btn btn-sm fw-700 flex-grow-1"
style="background:#10b981;color:#fff;border:none;border-radius:.5rem;font-family:'Cairo',sans-serif;padding:.5rem;">
<i class="bi bi-check-lg me-1"></i>تأكيد الحجز
</button>
</div>
</div>
</div>
</div>
{{-- ══ MOBILE BOTTOM NAV ══════════════════════════════════════════════════ --}}
<nav class="mobile-bottom-nav" aria-label="التنقل الرئيسي">
<a href="#" class="mob-nav-item active" data-tab="list"
@@ -402,15 +496,138 @@
getModal().show();
}
// ── Auth state (from server) ──────────────────────────────────────────
const authUser = @auth {
id: {{ auth()->id() }},
name: {{ Js::from(auth()->user()->name) }},
phone: {{ Js::from(auth()->user()->phone ?? '') }}
} @else null @endauth;
// ── Reserve ───────────────────────────────────────────────────────────
document.getElementById('reserveBtn').addEventListener('click', () => {
if (!current || current.avail <= 0) return;
alert(`تم حجز مكان في ${current.name}!\nالعنوان: ${current.address}\nالسعر: ${fmtPrice(current.price)} / ساعة`);
current.avail--;
if (!authUser) {
// Guest — redirect to login, come back after
window.location.href = '{{ route('login') }}';
return;
}
// Logged in — open booking form
getModal().hide();
renderList(lots);
openBookingModal(current);
});
// ── Booking modal ─────────────────────────────────────────────────────
let bookingModal = null;
function getBookingModal() {
if (!bookingModal) bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));
return bookingModal;
}
function toLocalInput(date) {
const pad = n => String(n).padStart(2, '0');
return `${date.getFullYear()}-${pad(date.getMonth()+1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
}
function calcTotal() {
const start = document.getElementById('bkStart').value;
const end = document.getElementById('bkEnd').value;
if (!start || !end || !current) return;
const diffMs = new Date(end) - new Date(start);
if (diffMs <= 0) { resetPrice(); return; }
const hours = Math.ceil(diffMs / 3600000); // round up per fee logic
const total = hours * current.price;
document.getElementById('bkDuration').textContent = hours + (hours === 1 ? ' ساعة' : ' ساعات');
document.getElementById('bkHourlyRate').textContent = fmtPrice(current.price);
document.getElementById('bkTotal').textContent = fmtPrice(total);
}
function resetPrice() {
document.getElementById('bkDuration').textContent = '--';
document.getElementById('bkHourlyRate').textContent = '--';
document.getElementById('bkTotal').textContent = '--';
}
document.getElementById('bkStart').addEventListener('change', calcTotal);
document.getElementById('bkEnd').addEventListener('change', calcTotal);
function openBookingModal(lot) {
document.getElementById('bookingLotName').textContent = lot.name;
document.getElementById('bookingLotMeta').textContent = lot.address + ' · ' + fmtPrice(lot.price) + ' / ساعة';
document.getElementById('bookingUserInfo').textContent =
authUser.name + (authUser.phone ? ' | ' + authUser.phone : '');
document.getElementById('bkPlate').value = '';
// Default: now → now+2h
const now = new Date();
const later = new Date(now.getTime() + 2 * 3600 * 1000);
document.getElementById('bkStart').value = toLocalInput(now);
document.getElementById('bkEnd').value = toLocalInput(later);
calcTotal();
document.getElementById('bookingAlert').className = 'd-none mb-3';
document.getElementById('bookingAlert').innerHTML = '';
getBookingModal().show();
}
document.getElementById('confirmBookingBtn').addEventListener('click', async () => {
const plate = document.getElementById('bkPlate').value.trim();
const start = document.getElementById('bkStart').value;
const end = document.getElementById('bkEnd').value;
const alertEl = document.getElementById('bookingAlert');
const showErr = msg => {
alertEl.className = 'alert border-0 rounded-3 py-2 mb-3 text-sm';
alertEl.style.cssText = 'background:rgba(239,68,68,.1);color:#b91c1c;';
alertEl.innerHTML = `<i class="bi bi-exclamation-triangle me-1"></i>${msg}`;
};
if (!plate) return showErr('الرجاء إدخال رقم لوحة السيارة.');
if (!start) return showErr('الرجاء تحديد وقت البدء.');
if (!end) return showErr('الرجاء تحديد وقت الانتهاء.');
if (new Date(end) <= new Date(start)) return showErr('وقت الانتهاء يجب أن يكون بعد وقت البدء.');
const btn = document.getElementById('confirmBookingBtn');
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>جاري الحجز...';
try {
const resp = await axios.post('/reserve', {
parking_lot_id: current.id,
vehicle_plate: plate,
start_time: start.replace('T', ' ') + ':00',
end_time: end.replace('T', ' ') + ':00',
});
if (resp.data.success) {
getBookingModal().hide();
current.avail = Math.max(0, current.avail - 1);
renderList(lots);
showToast('تم الحجز بنجاح! يمكنك متابعة حجوزاتك من حسابي.');
}
} catch (err) {
const errors = err.response?.data?.errors;
const msg = errors
? Object.values(errors).flat().join(' — ')
: (err.response?.data?.message || 'حدث خطأ، الرجاء المحاولة مجدداً.');
showErr(msg);
} finally {
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>تأكيد الحجز';
}
});
// ── Toast ─────────────────────────────────────────────────────────────
function showToast(msg) {
const t = document.createElement('div');
t.style.cssText = 'position:fixed;bottom:80px;inset-inline-start:50%;transform:translateX(-50%);background:#0f172a;color:#f8fafc;padding:.6rem 1.25rem;border-radius:.625rem;font-size:.85rem;font-weight:600;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.25);white-space:nowrap;';
t.innerHTML = `<i class="bi bi-check-circle-fill me-2" style="color:#10b981;"></i>${msg}`;
document.body.appendChild(t);
setTimeout(() => t.remove(), 4000);
}
// ── Search ────────────────────────────────────────────────────────────
function doSearch() {
const term = document.getElementById('searchInput').value.trim().toLowerCase();
resources/views/layouts/admin.blade.php
+1 -1
View File
@@ -111,7 +111,7 @@
<a href="{{ route('parking.index') }}"
class="btn btn-sm d-none d-md-inline-flex align-items-center"
style="background:#f1f5f9;color:#475569;border:none;border-radius:.5rem;font-family:'Cairo',sans-serif;"
target="_blank">
>
<i class="bi bi-globe2 me-1"></i>الموقع العام
</a>
{{-- Mobile: user avatar + logout --}}
resources/views/operator/dashboard.blade.php
+78 -14
View File
@@ -590,11 +590,57 @@ $gradients = [
</div>
</div>
{{-- ══════════════════════════════════════════════════════════════════════
ACTIVATE RESERVATION CONFIRM MODAL
══════════════════════════════════════════════════════════════════════ --}}
<div class="modal fade" id="activateConfirmModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width:400px;">
<div class="modal-content border-0 shadow-lg" style="border-radius:16px;overflow:hidden;">
<div class="modal-header text-white border-0" style="background:linear-gradient(135deg,#1e3c72,#2a5298);">
<h6 class="modal-title fw-bold mb-0" style="font-family:'Cairo',sans-serif;">
<i class="bi bi-box-arrow-in-right me-2"></i>تأكيد فتح البوابة
</h6>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center p-4">
<div class="mb-3" style="font-size:2.5rem;">🚗</div>
<p class="mb-1 fw-600" style="color:#0f172a;font-family:'Cairo',sans-serif;">
هل تريد تفعيل هذا الحجز؟
</p>
<p class="text-muted small mb-0">سيتم تسجيل وقت الدخول الآن وفتح البوابة للسيارة.</p>
</div>
<div class="modal-footer border-0 pt-0 pb-4 px-4 gap-2">
<button type="button" class="btn btn-light flex-fill fw-600" style="font-family:'Cairo',sans-serif;border-radius:10px;"
data-bs-dismiss="modal">إلغاء</button>
<button type="button" id="activateConfirmBtn"
class="btn btn-primary flex-fill fw-bold"
style="font-family:'Cairo',sans-serif;border-radius:10px;">
<i class="bi bi-check2-circle me-1"></i>تأكيد الدخول
</button>
</div>
</div>
</div>
</div>
@push('scripts')
<script>
const lots = {!! $parkingLots->toJson() !!};
const csrf = document.querySelector('meta[name="csrf-token"]').content;
// ── Toast helper ───────────────────────────────────────────────────────
function showToast(msg, type = 'success') {
const colors = { success: '#10b981', danger: '#ef4444', warning: '#f59e0b', info: '#3b82f6' };
const t = document.createElement('div');
t.style.cssText = `position:fixed;bottom:1.25rem;inset-inline-end:1.25rem;z-index:9999;
background:${colors[type]||colors.success};color:#fff;padding:.75rem 1.25rem;border-radius:10px;
font-family:'Cairo',sans-serif;font-size:.9rem;font-weight:600;
box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;transition:opacity .25s;max-width:320px;`;
t.textContent = msg;
document.body.appendChild(t);
requestAnimationFrame(() => { t.style.opacity = '1'; });
setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300); }, 3500);
}
function selectLot(id) { window.location = '/operator/dashboard?lot_id=' + id; }
@if(!$selectedLot)
@@ -670,12 +716,12 @@ async function submitCheckIn() {
btn.innerHTML = '<i class="bi bi-check2-circle me-1"></i>تم!';
setTimeout(() => location.reload(), 700);
} else {
alert(data.message || 'حدث خطأ');
showToast(data.message || 'حدث خطأ', 'danger');
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>تأكيد الدخول';
}
} catch {
alert('خطأ في الاتصال');
showToast('خطأ في الاتصال', 'danger');
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>تأكيد الدخول';
}
@@ -692,8 +738,28 @@ document.getElementById('newEntryModal').addEventListener('hidden.bs.modal', ()
});
// ── Activate reservation ───────────────────────────────────────────────
async function activateRes(id, btn) {
if (!confirm('تأكيد فتح البوابة لهذا الحجز؟')) return;
let pendingActivateId = null;
let pendingActivateBtn = null;
let activateModal = null;
function getActivateModal() {
if (!activateModal) activateModal = new bootstrap.Modal(document.getElementById('activateConfirmModal'));
return activateModal;
}
function activateRes(id, btn) {
pendingActivateId = id;
pendingActivateBtn = btn;
getActivateModal().show();
}
document.getElementById('activateConfirmBtn').addEventListener('click', async () => {
const id = pendingActivateId;
const btn = pendingActivateBtn;
if (!id || !btn) return;
getActivateModal().hide();
const orig = btn.innerHTML;
btn.disabled = true;
btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
@@ -703,21 +769,19 @@ async function activateRes(id, btn) {
});
const data = await res.json();
if (data.success) {
// Check-in button → success state
btn.classList.replace('btn-primary', 'btn-success');
btn.innerHTML = '<i class="bi bi-check-circle me-1"></i>تم الدخول';
// Enable checkout button
const co = document.getElementById('checkout-' + id);
if (co) { co.disabled = false; }
} else {
alert(data.message || 'حدث خطأ');
showToast(data.message || 'حدث خطأ', 'danger');
btn.innerHTML = orig; btn.disabled = false;
}
} catch {
alert('خطأ في الاتصال');
showToast('خطأ في الاتصال', 'danger');
btn.innerHTML = orig; btn.disabled = false;
}
}
});
// ── Receipt modal ──────────────────────────────────────────────────────
let receiptModal = null;
@@ -748,7 +812,7 @@ async function openReceipt(id) {
try {
const res = await fetch(`/operator/${id}/checkout-preview`);
const data = await res.json();
if (!data.success) { alert(data.message); return; }
if (!data.success) { showToast(data.message || 'حدث خطأ', 'danger'); getModal().hide(); return; }
const d = data.data;
document.getElementById('rcpt-lot').textContent = d.lot_name;
@@ -766,7 +830,7 @@ async function openReceipt(id) {
</div>`).join('');
document.getElementById('rcpt-breakdown').innerHTML =
rows || '<p class="text-xs text-center" style="color:#94a3b8;">لا تفاصيل</p>';
} catch { alert('تعذّر تحميل بيانات الفاتورة'); }
} catch { showToast('تعذّر تحميل بيانات الفاتورة', 'danger'); getModal().hide(); }
}
function selectPayment(method) {
@@ -777,7 +841,7 @@ function selectPayment(method) {
document.getElementById('confirmPayBtn').addEventListener('click', async () => {
if (!currentBookingId) return;
if (selectedPayment === 'upload' && !document.getElementById('paymentProofFile').files.length) {
alert('يرجى رفع إيصال الدفع'); return;
showToast('يرجى رفع إيصال الدفع', 'warning'); return;
}
const btn = document.getElementById('confirmPayBtn');
btn.disabled = true;
@@ -800,12 +864,12 @@ document.getElementById('confirmPayBtn').addEventListener('click', async () => {
if (card) { card.style.transition='opacity .4s'; card.style.opacity='0'; setTimeout(()=>card.remove(),400); }
setTimeout(() => location.reload(), 600);
} else {
alert(data.message || 'حدث خطأ');
showToast(data.message || 'حدث خطأ', 'danger');
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-check2-circle me-1"></i>تأكيد الدفع';
}
} catch {
alert('خطأ في الاتصال');
showToast('خطأ في الاتصال', 'danger');
btn.disabled = false;
btn.innerHTML = '<i class="bi bi-check2-circle me-1"></i>تأكيد الدفع';
}
resources/views/user/profile.blade.php
+63 -2
View File
@@ -30,6 +30,9 @@
<div>
<h2 class="fw-800 mb-1" style="font-size:1.15rem;color:#0f172a;">{{ $user->name }}</h2>
<p class="mb-1 text-sm" style="color:#64748b;">{{ $user->email }}</p>
@if($user->phone)
<p class="mb-1 text-sm" style="color:#64748b;" dir="ltr">{{ $user->phone }}</p>
@endif
@php
$roleLabel = match($user->role) {
'admin' => 'مدير النظام',
@@ -52,15 +55,20 @@
</div>
</div>
{{-- ── Edit name ───────────────────────────────────────────────────────── --}}
{{-- ── Edit profile ──────────────────────────────────────────────────── --}}
<div class="col-md-6">
<div class="card h-100">
<div class="card-header">
<span class="fw-700" style="font-size:.9rem;">
<i class="bi bi-person me-2" style="color:#6366f1;"></i>تعديل الاسم
<i class="bi bi-person me-2" style="color:#6366f1;"></i>تعديل البيانات الشخصية
</span>
</div>
<div class="card-body p-4">
@if(session('success'))
<div class="alert border-0 rounded-3 py-2 mb-3 text-sm" style="background:rgba(16,185,129,.1);color:#065f46;">
<i class="bi bi-check-circle me-1"></i>{{ session('success') }}
</div>
@endif
@if($errors->updateName->any())
<div class="alert alert-danger border-0 rounded-3 py-2 mb-3 text-sm">
{{ $errors->updateName->first() }}
@@ -76,6 +84,59 @@
value="{{ old('name', $user->name) }}"
placeholder="أدخل اسمك الكامل">
</div>
<div class="mb-3">
<label class="form-label">رقم الهاتف</label>
@php
// Split stored phone back into country code + local number
$storedPhone = $user->phone ?? '';
$knownCodes = ['+380','+351','+234','+249','+218','+216','+213','+212',
'+974','+973','+971','+970','+968','+967','+966','+965',
'+964','+963','+962','+961','+92','+91','+90','+86',
'+81','+61','+55','+49','+39','+34','+33','+20',
'+98','+44','+7','+1'];
$savedCountry = old('phone_country', '+963');
$savedLocal = old('phone_local', $storedPhone);
foreach ($knownCodes as $kc) {
if (str_starts_with($storedPhone, $kc)) {
$savedCountry = $kc;
$savedLocal = substr($storedPhone, strlen($kc));
break;
}
}
$countries = [
['🇸🇾','سوريا','+963'],['🇸🇦','السعودية','+966'],['🇦🇪','الإمارات','+971'],
['🇯🇴','الأردن','+962'],['🇱🇧','لبنان','+961'],['🇮🇶','العراق','+964'],
['🇪🇬','مصر','+20'],['🇴🇲','عُمان','+968'],['🇶🇦','قطر','+974'],
['🇰🇼','الكويت','+965'],['🇧🇭','البحرين','+973'],['🇾🇪','اليمن','+967'],
['🇵🇸','فلسطين','+970'],['🇲🇦','المغرب','+212'],['🇩🇿','الجزائر','+213'],
['🇹🇳','تونس','+216'],['🇱🇾','ليبيا','+218'],['🇸🇩','السودان','+249'],
['🇹🇷','تركيا','+90'],['🇮🇷','إيران','+98'],['🇩🇪','ألمانيا','+49'],
['🇫🇷','فرنسا','+33'],['🇬🇧','بريطانيا','+44'],['🇺🇸','أمريكا','+1'],
['🇷🇺','روسيا','+7'],['🇨🇳','الصين','+86'],['🇮🇳','الهند','+91'],
['🇦🇺','أستراليا','+61'],['🇮🇹','إيطاليا','+39'],['🇪🇸','إسبانيا','+34'],
['🇧🇷','البرازيل','+55'],['🇵🇰','باكستان','+92'],['🇳🇬','نيجيريا','+234'],
];
@endphp
<div class="input-group @if($errors->updateName->has('phone_local')) is-invalid @endif">
<input type="tel" name="phone_local"
value="{{ $savedLocal }}"
class="form-control @if($errors->updateName->has('phone_local')) is-invalid @endif"
style="border-color:#e2e8f0;"
placeholder="912345678" dir="ltr">
<select name="phone_country" dir="ltr"
style="max-width:130px;background:#f8fafc;border-color:#e2e8f0;color:#374151;font-family:'Cairo',sans-serif;font-size:.875rem;cursor:pointer;"
class="form-select">
@foreach($countries as [$flag, $label, $code])
<option value="{{ $code }}" {{ $savedCountry === $code ? 'selected' : '' }}>
{{ $flag }} {{ $code }}
</option>
@endforeach
</select>
</div>
@if($errors->updateName->has('phone_local'))
<div class="invalid-feedback d-block">{{ $errors->updateName->first('phone_local') }}</div>
@endif
</div>
<div class="mb-3">
<label class="form-label">البريد الإلكتروني</label>
<input type="email"