{% extends "admin_panel/base.html" %}

{% block dashboard_content %}
<section class="dashboard-hero">
    <div>
        <span class="dashboard-chip">Overview</span>
        <h2>Control enquiries, website settings, and content from one place.</h2>
        <p>Business users can review new enquiries, update settings, and jump into the content editors without touching code.</p>
    </div>
    <div class="dashboard-hero-cta">
        <a class="dashboard-link" href="{% url 'dashboard_enquiries' %}"><i data-lucide="inbox"></i>Open Enquiries</a>
        <form method="post" class="mt-2">
            {% csrf_token %}
            <input type="hidden" name="action" value="reset_visitor_counter">
            <button type="submit" class="dashboard-link dashboard-link-ghost w-100">
                <i data-lucide="refresh-cw"></i>
                Reset Counter
            </button>
        </form>
    </div>
</section>

<section class="stats-grid">
    <article class="stat-card">
        <i data-lucide="users"></i>
        <strong>{{ total_visitors }}</strong>
        <span>Total Visitors</span>
    </article>
    <article class="stat-card">
        <i data-lucide="heart"></i>
        <strong>{{ total_website_likes }}</strong>
        <span>Website Likes</span>
    </article>
    <article class="stat-card">
        <i data-lucide="star"></i>
        <strong>{{ average_rating }}</strong>
        <span>Average Rating</span>
    </article>
    <article class="stat-card">
        <i data-lucide="message-square-heart"></i>
        <strong>{{ total_reviews }}</strong>
        <span>Total Reviews</span>
    </article>
    <article class="stat-card">
        <i data-lucide="hourglass"></i>
        <strong>{{ pending_reviews }}</strong>
        <span>Pending Reviews</span>
    </article>
    <article class="stat-card">
        <i data-lucide="badge-check"></i>
        <strong>{{ approved_reviews }}</strong>
        <span>Approved Reviews</span>
    </article>
    <article class="stat-card">
        <i data-lucide="ban"></i>
        <strong>{{ rejected_reviews }}</strong>
        <span>Rejected Reviews</span>
    </article>
    <article class="stat-card">
        <i data-lucide="mail"></i>
        <strong>{{ total_enquiries }}</strong>
        <span>Total Enquiries</span>
    </article>
    <article class="stat-card">
        <i data-lucide="briefcase-business"></i>
        <strong>{{ total_packages }}</strong>
        <span>Holiday Packages</span>
    </article>
    <article class="stat-card">
        <i data-lucide="map-pinned"></i>
        <strong>{{ total_destinations }}</strong>
        <span>Destinations</span>
    </article>
    <article class="stat-card">
        <i data-lucide="images"></i>
        <strong>{{ total_gallery_images }}</strong>
        <span>Gallery Images</span>
    </article>
    <article class="stat-card">
        <i data-lucide="car-front"></i>
        <strong>{{ total_cab_services }}</strong>
        <span>Cab Services</span>
    </article>
</section>

<section class="dashboard-panel">
    <div class="panel-head">
        <div>
            <span class="dashboard-chip">Latest Reviews</span>
            <h3>Newest customer feedback</h3>
        </div>
        <a href="{% url 'dashboard_reviews' %}">Manage reviews</a>
    </div>
    <div class="table-responsive">
        <table class="table dashboard-table align-middle">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Rating</th>
                    <th>Status</th>
                    <th>Review</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                {% for review in latest_reviews %}
                    <tr>
                        <td><strong>{{ review.name }}</strong><br><small>{{ review.city|default:'-' }}</small></td>
                        <td>{{ review.rating }} / 5</td>
                        <td><span class="status-pill status-{{ review.status }}">{{ review.get_status_display }}</span></td>
                        <td>{{ review.review|truncatewords:14 }}</td>
                        <td>{{ review.created_at|date:"d M Y" }}</td>
                    </tr>
                {% empty %}
                    <tr><td colspan="5" class="text-center text-muted py-4">No reviews yet.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>

<section class="dashboard-grid">
    <article class="dashboard-panel">
        <div class="panel-head">
            <div>
                <span class="dashboard-chip">Recent Enquiries</span>
                <h3>Latest submissions</h3>
            </div>
            <a href="{% url 'dashboard_enquiries' %}">View all</a>
        </div>
        <div class="table-responsive">
            <table class="table dashboard-table align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Destination</th>
                        <th>Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for enquiry in recent_enquiries %}
                        <tr>
                            <td>
                                <strong>{{ enquiry.name }}</strong><br>
                                <small>{{ enquiry.phone }}</small>
                            </td>
                            <td>{{ enquiry.destination|default:'-' }}</td>
                            <td>{{ enquiry.date_of_travel|default:'-' }}</td>
                            <td><span class="status-pill status-{{ enquiry.status }}">{{ enquiry.get_status_display }}</span></td>
                        </tr>
                    {% empty %}
                        <tr><td colspan="4" class="text-center text-muted py-4">No enquiries yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </article>

    <article class="dashboard-panel">
        <div class="panel-head">
            <div>
                <span class="dashboard-chip">Shortcuts</span>
                <h3>Management links</h3>
            </div>
        </div>
        <div class="shortcut-grid">
            {% for item in quick_links %}
                <a class="shortcut-card" href="{{ item.url }}">
                    <i data-lucide="{{ item.icon }}"></i>
                    <strong>{{ item.title }}</strong>
                </a>
            {% endfor %}
        </div>
        <div class="shortcut-grid shortcut-grid-muted mt-3">
            {% for item in content_links %}
                <a class="shortcut-card shortcut-card-soft" href="{{ item.url }}" target="_blank" rel="noopener">
                    <i data-lucide="{{ item.icon }}"></i>
                    <strong>{{ item.title }}</strong>
                </a>
            {% endfor %}
        </div>
    </article>
</section>

<section class="dashboard-panel mt-4">
    <div class="panel-head">
        <div>
            <span class="dashboard-chip">Status Mix</span>
            <h3>Current enquiry pipeline</h3>
        </div>
    </div>
    <div class="status-bars">
        {% for code, label in status_breakdown.items %}
            <div class="status-bar-row">
                <div class="status-bar-label">{{ code|capfirst }}</div>
                <div class="status-bar-track"><span style="width: {{ label }}%;"></span></div>
                <div class="status-bar-count">{{ label }}</div>
            </div>
        {% endfor %}
    </div>
</section>
{% endblock %}