@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