{% extends "base.html" %}

{% block content %}
<div class="row mb-4 align-items-center">
    <div class="col-md-8">
        <h1 class="display-5">Welcome back, Host</h1>
        <p class="lead text-muted">Here's what's happening with your properties and loyalty program.</p>
    </div>
    <div class="col-md-4 text-md-end">
        <a href="/admin/core/guest/add/" class="btn btn-primary">+ Add New Guest</a>
    </div>
</div>

<!-- Stats Row -->
<div class="row g-4 mb-5">
    <div class="col-md-4">
        <div class="card stat-card p-4">
            <h6 class="text-uppercase text-muted fw-bold small">Total Guests</h6>
            <h2 class="mb-0">{{ total_guests }}</h2>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card p-4">
            <h6 class="text-uppercase text-muted fw-bold small">Properties</h6>
            <h2 class="mb-0">{{ total_properties }}</h2>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card p-4">
            <h6 class="text-uppercase text-muted fw-bold small">Total Stays</h6>
            <h2 class="mb-0">{{ total_stays }}</h2>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Recent Stays -->
    <div class="col-lg-8">
        <div class="card p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h4 class="mb-0">Recent Stays</h4>
                <a href="{% url 'guest_list' %}" class="btn btn-sm btn-outline-secondary">View All</a>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Guest</th>
                            <th>Property</th>
                            <th>Check-in</th>
                            <th>Nights</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for stay in recent_stays %}
                        <tr>
                            <td>
                                <div class="fw-bold">{{ stay.guest }}</div>
                                <small class="text-muted">{{ stay.guest.email }}</small>
                            </td>
                            <td>{{ stay.property.name }}</td>
                            <td>{{ stay.check_in|date:"M d, Y" }}</td>
                            <td><span class="badge bg-teal-soft text-dark border">{{ stay.total_nights }}</span></td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="4" class="text-center py-4">No stays recorded yet.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Recent Guests / Quick Actions -->
    <div class="col-lg-4">
        <div class="card p-4 mb-4">
            <h4 class="mb-4">Newest Guests</h4>
            <ul class="list-unstyled">
                {% for guest in recent_guests %}
                <li class="d-flex align-items-center mb-3">
                    <div class="avatar-circle me-3">{{ guest.first_name|first }}{{ guest.last_name|first }}</div>
                    <div>
                        <div class="fw-bold">{{ guest }}</div>
                        <small class="text-muted">Joined {{ guest.created_at|date:"M d" }}</small>
                    </div>
                </li>
                {% empty %}
                <li class="text-muted">No guests yet.</li>
                {% endfor %}
            </ul>
        </div>
        
        <div class="card p-4 bg-primary text-white border-0">
            <h5 class="mb-3">Launch a Campaign</h5>
            <p class="small opacity-75">Ready to reach out? Send a special offer to your past guests to boost repeat bookings.</p>
            <a href="{% url 'campaign_list' %}" class="btn btn-light btn-sm fw-bold">Create Campaign</a>
        </div>
    </div>
</div>

<style>
    .bg-teal-soft {
        background-color: #F0FDFA;
    }
    .avatar-circle {
        width: 40px;
        height: 40px;
        background-color: var(--accent-teal);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 0.8rem;
    }
</style>
{% endblock %}
