250 lines
8.6 KiB
PHP
250 lines
8.6 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h2><i class="fas fa-user"></i> Guest Profile</h2>
|
|
<div>
|
|
<button class="btn btn-success me-2" onclick="issueVoucher()">
|
|
<i class="fas fa-ticket-alt"></i> Issue Voucher
|
|
</button>
|
|
<button class="btn btn-primary" onclick="checkInGuest()">
|
|
<i class="fas fa-sign-in-alt"></i> Check In
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Left Panel - Basic Info -->
|
|
<div class="col-md-4">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Basic Information</h5>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<div id="qrCode" class="mb-3"></div>
|
|
<h4 id="guestName">John Doe</h4>
|
|
<p class="text-muted" id="guestPhone">+961 3 123456</p>
|
|
<div class="mb-3">
|
|
<span class="badge bg-secondary" id="loyaltyTier">Silver</span>
|
|
<small class="text-muted d-block">Loyalty Points: <span id="loyaltyPoints">150</span></small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Loyalty ID:</strong> <span id="loyaltyId">LOY-001</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Nationality:</strong> <span id="nationality">Lebanese</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Language:</strong> <span id="language">English</span>
|
|
</div>
|
|
<div class="mb-3">
|
|
<strong>Birthday:</strong> <span id="birthday">1990-01-01</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Quick Actions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<button class="btn btn-outline-primary btn-sm w-100 mb-2" onclick="addNote()">
|
|
<i class="fas fa-sticky-note"></i> Add Note
|
|
</button>
|
|
<button class="btn btn-outline-success btn-sm w-100 mb-2" onclick="awardPoints()">
|
|
<i class="fas fa-star"></i> Award Points
|
|
</button>
|
|
<button class="btn btn-outline-info btn-sm w-100 mb-2" onclick="viewHistory()">
|
|
<i class="fas fa-history"></i> Full History
|
|
</button>
|
|
<button class="btn btn-outline-warning btn-sm w-100" onclick="editProfile()">
|
|
<i class="fas fa-edit"></i> Edit Profile
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Panel - Timeline -->
|
|
<div class="col-md-5">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Visit Timeline</h5>
|
|
</div>
|
|
<div class="card-body" style="max-height: 600px; overflow-y: auto;">
|
|
<div class="timeline" id="visitTimeline">
|
|
<!-- Timeline items will be loaded here -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-primary"></div>
|
|
<div class="timeline-content">
|
|
<h6>Checked into Seven Hotel</h6>
|
|
<small class="text-muted">Today, 2:30 PM - Room 301</small>
|
|
<p>Spend: $150</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-success"></div>
|
|
<div class="timeline-content">
|
|
<h6>Dined at La Taverna</h6>
|
|
<small class="text-muted">Yesterday, 8:00 PM</small>
|
|
<p>Spend: $75 - Italian Cuisine</p>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-marker bg-info"></div>
|
|
<div class="timeline-content">
|
|
<h6>Beach Visit - Coral Bay</h6>
|
|
<small class="text-muted">3 days ago, 10:00 AM</small>
|
|
<p>Spend: $25 - Day Pass</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel - Tags & Suggestions -->
|
|
<div class="col-md-3">
|
|
<!-- Tags -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Tags</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="guestTags">
|
|
<span class="badge bg-primary me-1 mb-1">beach_lover</span>
|
|
<span class="badge bg-success me-1 mb-1">family</span>
|
|
<span class="badge bg-warning me-1 mb-1">jetski_fan</span>
|
|
</div>
|
|
<button class="btn btn-outline-secondary btn-sm w-100 mt-2" onclick="addTag()">
|
|
<i class="fas fa-plus"></i> Add Tag
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cross-sell Suggestions -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5>Cross-sell Suggestions</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="suggestion-item mb-3 p-2 border rounded">
|
|
<h6>Coral Bay Beach Package</h6>
|
|
<p class="small text-muted">Based on hotel stays, suggest beach access</p>
|
|
<button class="btn btn-sm btn-outline-primary">Recommend</button>
|
|
</div>
|
|
<div class="suggestion-item mb-3 p-2 border rounded">
|
|
<h6>Taiga Sky Nightclub</h6>
|
|
<p class="small text-muted">Restaurant visitor, suggest nightlife</p>
|
|
<button class="btn btn-sm btn-outline-primary">Recommend</button>
|
|
</div>
|
|
<div class="suggestion-item p-2 border rounded">
|
|
<h6>La Taverna Dinner</h6>
|
|
<p class="small text-muted">Hotel guest, suggest dining experience</p>
|
|
<button class="btn btn-sm btn-outline-primary">Recommend</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>Recent Notes</h5>
|
|
</div>
|
|
<div class="card-body" style="max-height: 200px; overflow-y: auto;">
|
|
<div class="note-item mb-2">
|
|
<small class="text-muted">Today - Reception</small>
|
|
<p class="mb-0">Guest requested late checkout for tomorrow.</p>
|
|
</div>
|
|
<div class="note-item mb-2">
|
|
<small class="text-muted">Yesterday - Restaurant</small>
|
|
<p class="mb-0">Celebrating anniversary, very satisfied with service.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
left: -35px;
|
|
top: 5px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -31px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.timeline-content {
|
|
background: #f8f9fa;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.suggestion-item {
|
|
background: #f8f9fa;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Generate QR Code
|
|
const qrCodeContainer = document.getElementById('qrCode');
|
|
const qrCode = new QRCode(qrCodeContainer, {
|
|
text: 'LOY-001',
|
|
width: 128,
|
|
height: 128
|
|
});
|
|
});
|
|
|
|
function checkInGuest() {
|
|
// Implement check-in functionality
|
|
alert('Check-in functionality to be implemented');
|
|
}
|
|
|
|
function issueVoucher() {
|
|
// Implement voucher issuance
|
|
alert('Voucher issuance to be implemented');
|
|
}
|
|
|
|
function addNote() {
|
|
// Implement add note functionality
|
|
alert('Add note functionality to be implemented');
|
|
}
|
|
|
|
function awardPoints() {
|
|
// Implement award points functionality
|
|
alert('Award points functionality to be implemented');
|
|
}
|
|
|
|
function addTag() {
|
|
// Implement add tag functionality
|
|
alert('Add tag functionality to be implemented');
|
|
}
|
|
</script>
|
|
@endsection
|