{% extends 'core/base.html' %}
{% load currency_filters %}
{% load static %}

{% block title %}Yesterday Summary - SwiftPOS{% endblock %}

{% block topbar_title %}
Yesterday Summary
{% endblock %}

{% block content %}
<div class="container-fluid px-0">

    <!-- Toast Messages -->
    <div class="swiftpos-toast-container">
        {% if messages %}
            {% for message in messages %}
                <div class="swiftpos-toast swiftpos-toast-{{ message.tags }}">
                    <div class="toast-icon">
                        {% if message.tags == 'success' %}
                            <i class="fas fa-check-circle"></i>
                        {% elif message.tags == 'error' or message.tags == 'danger' %}
                            <i class="fas fa-exclamation-circle"></i>
                        {% elif message.tags == 'warning' %}
                            <i class="fas fa-exclamation-triangle"></i>
                        {% else %}
                            <i class="fas fa-info-circle"></i>
                        {% endif %}
                    </div>
                    <div class="toast-text">
                        {{ message }}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>

    <!-- Branch selector (Option B) -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
        <div>
            <h5 class="mb-0">Yesterday's Performance</h5>
            <div class="text-muted small">
                Branch-based breakdown for yesterday.
            </div>
        </div>

        <div>
            {% if user_role == 'admin' or user_role == 'superadmin' or user_role == 'super_admin' %}
                <form method="get" class="d-flex gap-2 align-items-center">
                    <!-- Keep filters when switching branch -->
                    {% if payment_method %}
                        <input type="hidden" name="payment_method" value="{{ payment_method }}">
                    {% endif %}
                    {% if min_amount %}
                        <input type="hidden" name="min_amount" value="{{ min_amount }}">
                    {% endif %}

                    <label class="small text-muted me-1 mb-0">Branch:</label>
                    <select name="branch" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="all" {% if selected_branch_id == 'all' %}selected{% endif %}>
                            All branches
                        </option>
                        {% for branch in branches %}
                            <option value="{{ branch.id }}" {% if selected_branch_id|default:'' == branch.id|stringformat:'s' %}selected{% endif %}>
                                {{ branch.name }}
                            </option>
                        {% endfor %}
                    </select>
                </form>
            {% else %}
                <div class="small text-muted">
                    Branch: <strong>{{ request.user.branch.name|default:"Not assigned" }}</strong>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Top summary cards -->
    <style>
        .premium-card {
            border: none;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background: white;
            overflow: hidden;
            position: relative;
        }
        .premium-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }
        .premium-icon-wrap {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }
        .premium-list-item {
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.03);
            padding: 1rem 1.25rem;
            transition: background-color 0.2s ease;
        }
        .premium-list-item:hover {
            background-color: #f8fafc;
        }
        .premium-list-item:last-child {
            border-bottom: none;
        }
    </style>
    
    <div class="row g-3 mb-4">
        <!-- Yesterday Revenue -->
        <div class="col-12 col-sm-6 col-lg-3">
             <div class="premium-card h-100 p-4 border-0" style="background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%);">
                <div class="d-flex justify-content-between align-items-start h-100 flex-column">
                    <div class="w-100 d-flex justify-content-between align-items-start">
                        <div>
                            <div class="text-white-50 small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Revenue (Yesterday)</div>
                            <h3 class="fw-bolder mb-1 text-white">{% money summary.total_revenue %}</h3>
                        </div>
                        <div class="premium-icon-wrap bg-white bg-opacity-25 text-white shadow-sm">
                            <i class="fas fa-wallet fa-lg"></i>
                        </div>
                    </div>
                    <div class="small fw-medium text-white-50 mt-auto pt-2">
                        {{ summary.total_transactions }} transaction{{ summary.total_transactions|pluralize }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Cash -->
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start h-100 flex-column">
                    <div class="w-100 d-flex justify-content-between align-items-start">
                        <div>
                            <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Cash Sales</div>
                            <h3 class="fw-bolder mb-1 text-success">{% money summary.cash_revenue %}</h3>
                        </div>
                        <div class="premium-icon-wrap" style="background: rgba(34,197,94,.1); color: #16a34a;">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                    </div>
                    <div class="small fw-medium text-secondary mt-auto pt-2">
                        {{ summary.cash_transactions }} cash txn
                    </div>
                </div>
            </div>
        </div>

        <!-- Transfers -->
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start h-100 flex-column">
                    <div class="w-100 d-flex justify-content-between align-items-start">
                        <div>
                            <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Transfers</div>
                            <h3 class="fw-bolder mb-1 text-info">{% money summary.transfer_revenue %}</h3>
                        </div>
                        <div class="premium-icon-wrap" style="background: rgba(59,130,246,.1); color: #3b82f6;">
                            <i class="fas fa-university"></i>
                        </div>
                    </div>
                    <div class="small fw-medium text-secondary mt-auto pt-2">
                        {{ summary.transfer_transactions }} transfer txn
                    </div>
                </div>
            </div>
        </div>

        <!-- POS + Mobile combined -->
        <div class="col-12 col-sm-6 col-lg-3">
            <div class="premium-card h-100 p-4">
                <div class="d-flex justify-content-between align-items-start h-100 flex-column">
                    <div class="w-100 d-flex justify-content-between align-items-start">
                        <div>
                            <div class="text-muted small fw-bold text-uppercase tracking-wide mb-2" style="letter-spacing: 0.5px; font-size: 0.7rem;">Card + Mobile</div>
                            <h3 class="fw-bolder mb-1 text-primary">{% money summary.pos_revenue %}</h3>
                        </div>
                        <div class="premium-icon-wrap" style="background: rgba(139,92,246,.1); color: #8b5cf6;">
                            <i class="fas fa-credit-card"></i>
                        </div>
                    </div>
                    <div class="small fw-medium text-secondary mt-auto pt-2">
                        POS: {% money summary.pos_revenue %} · Mobile: {% money summary.mobile_money_revenue %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Unusual transactions -->
    <div class="premium-card mb-4 sp-animate-card">
        <div class="p-3 bg-light bg-opacity-50 border-bottom d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                <i class="fas fa-triangle-exclamation text-warning"></i> Unusual Transactions
            </h6>
            <span class="small text-muted fw-medium py-1 px-3 bg-white rounded-pill border">
                Orders &gt; {{ currency_symbol }}{{ min_amount|default:"0"|floatformat:2 }} or manual flags
            </span>
        </div>
        <div class="list-group list-group-flush p-0 m-0">
            {% if unusual_transactions %}
                {% for unusual in unusual_transactions %}
                    <div class="premium-list-item d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-warning bg-opacity-10 text-warning d-flex align-items-center justify-content-center border border-warning border-opacity-25" style="width: 40px; height: 40px;">
                                <i class="fas fa-exclamation"></i>
                            </div>
                            <div>
                                <a href="{% url 'sales:print_receipt' unusual.order.id %}" class="fw-bold text-decoration-none text-primary d-block mb-1">
                                    {{ unusual.order.order_number }}
                                </a>
                                <div class="text-muted small fw-medium">
                                    {{ unusual.order.created_at|date:"M d, Y \· H:i" }} — <i class="fas fa-wallet fa-xs me-1"></i>{{ unusual.order.get_payment_method_display }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-end">
                            <div class="fw-bolder text-dark mb-1">{% money unusual.order.final_amount %}</div>
                            <div class="d-flex align-items-center gap-2 justify-content-end">
                                {% if unusual.resolved %}
                                    <span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle">Resolved</span>
                                {% else %}
                                    <span class="badge rounded-pill bg-warning text-dark border border-warning shadow-sm">Pending</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="text-center py-5">
                    <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(16, 185, 129, 0.1); color: #10b981; width: 64px; height: 64px; font-size: 2rem;">
                        <i class="fas fa-shield-check"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">No Flags Yesterday</h6>
                    <p class="text-muted small mb-0">All transactions proceeded normally.</p>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Yesterday orders list -->
    <div class="premium-card mb-4 sp-animate-card">
        <div class="p-3 bg-light bg-opacity-50 border-bottom d-flex justify-content-between align-items-center">
            <h6 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
                <i class="fas fa-list text-primary"></i> Yesterday Orders
            </h6>
            <div class="d-flex gap-2">
                <form method="get" class="d-flex gap-2 align-items-center m-0">
                    <input type="hidden" name="export" value="csv">
                    {% if selected_branch_id %}
                        <input type="hidden" name="branch" value="{{ selected_branch_id }}">
                    {% endif %}
                    {% if payment_method %}
                        <input type="hidden" name="payment_method" value="{{ payment_method }}">
                    {% endif %}
                    {% if min_amount %}
                        <input type="hidden" name="min_amount" value="{{ min_amount }}">
                    {% endif %}
                    <button type="submit" class="btn btn-outline-secondary btn-sm rounded-pill px-3 fw-medium">
                        <i class="fas fa-file-export me-1"></i> CSV
                    </button>
                </form>

                <button type="button" class="btn btn-primary btn-sm rounded-pill px-3 shadow-sm fw-medium" onclick="window.print();">
                    <i class="fas fa-print me-1"></i> Print
                </button>
            </div>
        </div>
        
        <div class="list-group list-group-flush p-0 m-0">
            {% if yesterday_orders %}
                {% for order in yesterday_orders %}
                    <div class="premium-list-item d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div class="d-flex align-items-center gap-3">
                            <div class="rounded-circle bg-light border d-flex align-items-center justify-content-center text-muted" style="width: 40px; height: 40px;">
                                <i class="fas fa-receipt"></i>
                            </div>
                            <div>
                                <a href="{% url 'sales:print_receipt' order.id %}" class="fw-bold text-decoration-none text-dark d-block">
                                    {{ order.order_number }}
                                </a>
                                <div class="text-muted small fw-medium mt-1">
                                    <i class="far fa-clock me-1 text-primary text-opacity-50"></i>{{ order.created_at|date:"H:i A" }} 
                                    <span class="mx-1">&bull;</span>
                                    <i class="fas fa-user-circle me-1 text-primary text-opacity-50"></i>{{ order.customer_name|default:"Walk-in" }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-end">
                            <div class="fw-bolder text-dark mb-1">{% money order.final_amount %}</div>
                            <span class="badge rounded-pill bg-light text-dark border px-2 py-1 shadow-sm">
                                <i class="fas fa-wallet fa-xs me-1 text-muted"></i>{{ order.get_payment_method_display }}
                            </span>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="text-center py-5">
                    <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(100,116,139,.1); color: #64748b; width: 64px; height: 64px; font-size: 2rem;">
                        <i class="fas fa-box-open"></i>
                    </div>
                    <h6 class="fw-bold text-dark mb-1">No Orders</h6>
                    <p class="text-muted small mb-0">No orders were found for this branch yesterday.</p>
                </div>
            {% endif %}
        </div>
    </div>

</div>
{% endblock %}