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

{% block title %}Waiter Sales Report{% endblock %}

{% block heading %}
Waiter Sales Report
{% endblock %}

{% block stylesheets %}
<style>
    .waiter-report-page .filter-form {
        background: #fff !important;
        border: 1px solid #e3e6f0 !important;
        border-radius: 8px !important;
        padding: 12px !important;
        margin-bottom: 12px;
    }

    .waiter-report-page .summary-card {
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        background: #fff;
        padding: 12px;
        margin-bottom: 12px;
        box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, .08);
    }

    .waiter-report-page .summary-title {
        font-size: 12px;
        font-weight: 700;
        color: #6c757d;
        margin-bottom: 4px;
    }

    .waiter-report-page .summary-value {
        font-size: 22px;
        font-weight: 900;
        color: #000;
    }

    .waiter-report-page .report-card {
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        box-shadow: 0 0.15rem 1.75rem rgba(58, 59, 69, .08);
    }

    .waiter-report-page table.table th {
        background: #f8f9fc;
        color: #000;
        font-size: 13px;
        white-space: nowrap;
    }

    .waiter-report-page table.table td {
        color: #000;
        font-size: 13px;
        vertical-align: middle;
    }

    .waiter-report-page .amount {
        text-align: right;
        font-weight: 700;
    }

    .waiter-report-page .badge-status {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 700;
        background: #1cc88a;
        color: #fff;
    }

    .waiter-report-page .empty-row {
        padding: 25px !important;
        text-align: center;
        color: #6c757d !important;
        font-weight: 700;
    }

    .waiter-report-page .pagination-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }

    @media (max-width: 767.98px) {
        .waiter-report-page .pagination-wrap {
            justify-content: center;
            flex-wrap: wrap;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="waiter-report-page">

    <form method="get" class="filter-form">
        <div class="row">

            <div class="col-md-2 mb-2">
                <label class="font-weight-bold text-dark mb-1">Start Date</label>
                <input
                    type="date"
                    name="start"
                    value="{{ start }}"
                    class="form-control form-control-sm"
                >
            </div>

            <div class="col-md-2 mb-2">
                <label class="font-weight-bold text-dark mb-1">End Date</label>
                <input
                    type="date"
                    name="end"
                    value="{{ end }}"
                    class="form-control form-control-sm"
                >
            </div>

            <div class="col-md-3 mb-2">
                <label class="font-weight-bold text-dark mb-1">Waiter / Table Man</label>
                <select name="waiter" class="form-control form-control-sm">
                    <option value="0">All Waiters</option>
                    {% for waiter in waiters %}
                        <option value="{{ waiter.t_id }}" {% if waiter_t_id == waiter.t_id %}selected{% endif %}>
                            {{ waiter.name }}{% if waiter.mobile %} - {{ waiter.mobile }}{% endif %}
                        </option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-md-3 mb-2">
                <label class="font-weight-bold text-dark mb-1">Search</label>
                <input
                    type="text"
                    name="q"
                    value="{{ q }}"
                    class="form-control form-control-sm"
                    placeholder="Order, table, customer, waiter..."
                >
            </div>

            <div class="col-md-2 mb-2 d-flex align-items-end">
                <button type="submit" class="btn btn-primary btn-sm btn-block">
                    <i class="fas fa-search"></i> Filter
                </button>
            </div>

        </div>
    </form>

    <div class="row">

        <div class="col-md-6">
            <div class="summary-card">
                <div class="summary-title">Total Orders</div>
                <div class="summary-value">{{ total_orders }}</div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="summary-card">
                <div class="summary-title">Total Sale Amount</div>
                <div class="summary-value">Rs {{ total_sale_amount|floatformat:2 }}</div>
            </div>
        </div>

    </div>

    <div class="card report-card">
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0">
                    <thead>
                        <tr>
                            <th style="width:80px;">Order #</th>
                            <th style="width:150px;">Date / Time</th>
                            <th style="width:150px;">Waiter</th>
                            <th style="width:120px;">Type</th>
                            <th style="width:130px;">Table / Ref</th>
                            <th>Customer</th>
                            <th style="width:100px;">Status</th>
                            <th style="width:120px;" class="amount">Subtotal</th>
                            <th style="width:120px;" class="amount">Tax</th>
                            <th style="width:130px;" class="amount">Total</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for row in rows %}
                            <tr>
                                <td>
                                    <strong>{{ row.order_no }}</strong>
                                </td>

                                <td>
                                    {{ row.created_at|date:"d-m-Y h:i A" }}
                                </td>

                                <td>
                                    {{ row.waiter_name }}
                                </td>

                                <td>
                                    {{ row.order_type }}
                                </td>

                                <td>
                                    {{ row.table_name }}
                                </td>

                                <td>
                                    {% if row.customer_name %}
                                        <strong>{{ row.customer_name }}</strong>
                                    {% else %}
                                        -
                                    {% endif %}

                                    {% if row.customer_phone %}
                                        <br>
                                        <small>{{ row.customer_phone }}</small>
                                    {% endif %}
                                </td>

                                <td>
                                    <span class="badge-status">{{ row.status }}</span>
                                </td>

                                <td class="amount">
                                    {{ row.subtotal|floatformat:2 }}
                                </td>

                                <td class="amount">
                                    {{ row.tax_amount|floatformat:2 }}
                                </td>

                                <td class="amount">
                                    {{ row.grand_total|floatformat:2 }}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="10" class="empty-row">
                                    No waiter sales found.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>

                    <tfoot>
                        <tr>
                            <td colspan="9" class="text-right font-weight-bold">
                                Grand Total
                            </td>
                            <td class="amount">
                                Rs {{ total_sale_amount|floatformat:2 }}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            {% if page_obj %}
                <div class="pagination-wrap">
                    {% if page_obj.has_previous %}
                        <a
                            class="btn btn-light btn-sm"
                            href="?page={{ page_obj.previous_page_number }}{% if query_string %}&{{ query_string }}{% endif %}"
                        >
                            Previous
                        </a>
                    {% endif %}

                    <span class="text-dark font-weight-bold">
                        Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
                    </span>

                    {% if page_obj.has_next %}
                        <a
                            class="btn btn-light btn-sm"
                            href="?page={{ page_obj.next_page_number }}{% if query_string %}&{{ query_string }}{% endif %}"
                        >
                            Next
                        </a>
                    {% endif %}
                </div>
            {% endif %}

        </div>
    </div>

</div>
{% endblock %}