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

{% block title %}Daily Dashboard - SwiftPOS{% endblock %}

{% block topbar_title %}
Daily Sales
{% 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">Today's Sales Overview</h5>
            <div class="text-muted small">
                Branch-based daily metrics.
            </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">
                    <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>

    <!-- Metric 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">
        <!-- Total Revenue -->
        <div class="col-12 col-sm-6 col-xl-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 (Today)</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>

        <!-- Net Profit -->
        <div class="col-12 col-sm-6 col-xl-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;">Net Profit</div>
                            <h3 class="fw-bolder mb-1 text-success">{{ currency_symbol }}{{ summary.total_profit|default:0|floatformat:2 }}</h3>
                        </div>
                        <div class="premium-icon-wrap" style="background: rgba(16,185,129,.10); color: #10b981;">
                            <i class="fas fa-chart-line"></i>
                        </div>
                    </div>
                    <div class="small fw-medium text-secondary mt-auto pt-2">
                        Based on cost price × quantity
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Mix -->
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="premium-card h-100 p-4">
                <div class="text-muted small fw-bold text-uppercase tracking-wide mb-3" style="letter-spacing: 0.5px; font-size: 0.7rem;">Payment Mix</div>
                <div class="d-flex justify-content-between small mb-2 align-items-center">
                    <span class="text-muted fw-medium"><i class="fas fa-money-bill-wave me-2 text-success"></i> Cash</span>
                    <span class="fw-bold text-dark">{% money summary.cash_revenue %}</span>
                </div>
                <div class="d-flex justify-content-between small mb-2 align-items-center">
                    <span class="text-muted fw-medium"><i class="fas fa-university me-2 text-info"></i> Transfer</span>
                    <span class="fw-bold text-dark">{% money summary.transfer_revenue %}</span>
                </div>
                <div class="d-flex justify-content-between small mb-2 align-items-center">
                    <span class="text-muted fw-medium"><i class="fas fa-credit-card me-2 text-primary"></i> POS</span>
                    <span class="fw-bold text-dark">{% money summary.pos_revenue %}</span>
                </div>
                <div class="d-flex justify-content-between small align-items-center">
                    <span class="text-muted fw-medium"><i class="fas fa-mobile-screen me-2" style="color: #6366f1;"></i> Mobile</span>
                    <span class="fw-bold text-dark">{% money summary.mobile_money_revenue %}</span>
                </div>
            </div>
        </div>

        <!-- Credit outstanding -->
        <div class="col-12 col-sm-6 col-xl-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;">Today's Credit</div>
                            <h3 class="fw-bolder mb-1 text-danger">{{ currency_symbol }}{{ summary.credit_outstanding|default:0|floatformat:2 }}</h3>
                        </div>
                        <div class="premium-icon-wrap" style="background: rgba(220,38,38,.10); color: #dc2626;">
                            <i class="fas fa-hand-holding"></i>
                        </div>
                    </div>
                    <div class="small fw-medium text-secondary mt-auto pt-2">
                        Balance from today’s credit sales
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Payment method breakdown -->
    <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-chart-pie text-primary"></i> Payment Method Breakdown
            </h6>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-3 fw-medium" onclick="location.reload();">
                    <i class="fas fa-rotate me-1"></i> Refresh
                </button>
                <button type="button" class="btn btn-outline-primary btn-sm rounded-pill px-3 fw-medium" onclick="window.print();">
                    <i class="fas fa-print me-1"></i> Print
                </button>
            </div>
        </div>
        <div class="card-body p-4">
            <div class="row g-3">
                <div class="col-md-3 col-6">
                    <div class="p-4 rounded-4 text-center border" style="background:#f8fafc; border-color:#e2e8f0;">
                        <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(34,197,94,.1); color: #22c55e;">
                            <i class="fas fa-money-bill-wave"></i>
                        </div>
                        <h5 class="fw-bolder text-dark mb-1">{% money summary.cash_revenue %}</h5>
                        <div class="small text-muted fw-semibold">
                            Cash ({{ summary.cash_transactions }})
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="p-4 rounded-4 text-center border" style="background:#f8fafc; border-color:#e2e8f0;">
                        <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(59,130,246,.1); color: #3b82f6;">
                            <i class="fas fa-university"></i>
                        </div>
                        <h5 class="fw-bolder text-dark mb-1">{% money summary.transfer_revenue %}</h5>
                        <div class="small text-muted fw-semibold">
                            Transfer ({{ summary.transfer_transactions }})
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="p-4 rounded-4 text-center border" style="background:#f8fafc; border-color:#e2e8f0;">
                        <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(99,102,241,.1); color: #6366f1;">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h5 class="fw-bolder text-dark mb-1">{% money summary.pos_revenue %}</h5>
                        <div class="small text-muted fw-semibold">
                            POS ({{ summary.pos_transactions }})
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-6">
                    <div class="p-4 rounded-4 text-center border" style="background:#f8fafc; border-color:#e2e8f0;">
                        <div class="premium-icon-wrap mx-auto mb-3" style="background: rgba(16,185,129,.1); color: #10b981;">
                            <i class="fas fa-mobile-screen"></i>
                        </div>
                        <h5 class="fw-bolder text-dark mb-1">{% money summary.mobile_money_revenue %}</h5>
                        <div class="small text-muted fw-semibold">
                            Mobile ({{ summary.mobile_money_transactions }})
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Top selling items & low stock -->
    <div class="row g-4">
        <div class="col-lg-6">
            <div class="premium-card h-100 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-chart-line text-success"></i> Top Selling Items (Today)
                    </h6>
                </div>
                <div class="list-group list-group-flush p-0 m-0">
                    {% if top_selling_items %}
                        {% for item in top_selling_items %}
                            <div class="premium-list-item d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-dark mb-1">{{ item.product__name }}</div>
                                    <div class="text-muted small fw-medium text-uppercase">{{ item.product__sku }}</div>
                                </div>
                                <div class="text-end">
                                    <div class="text-success fw-bolder mb-1">{% money item.total_revenue %}</div>
                                    <span class="badge rounded-pill bg-light text-dark shadow-sm px-2 py-1">
                                        {{ item.total_quantity }} units
                                    </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-store-slash"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-1">No Sales Yet</h6>
                            <p class="text-muted small mb-0">No sales recorded for this branch today.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Low stock quick view -->
        <div class="col-lg-6">
            <div class="premium-card h-100 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-box-open text-warning"></i> Low Stock (Quick View)
                    </h6>
                    <a href="{% url 'inventory:product_list' %}" class="btn btn-sm btn-outline-warning text-dark fw-medium rounded-pill px-3">
                        Manage stock
                    </a>
                </div>
                <div class="list-group list-group-flush p-0 m-0">
                    {% if low_stock_products %}
                        {% for product in low_stock_products %}
                            <div class="premium-list-item d-flex justify-content-between align-items-center">
                                <div>
                                    <div class="fw-bold text-dark mb-1">{{ product.name }}</div>
                                    <div class="text-muted small fw-medium text-uppercase">{{ product.sku }}</div>
                                </div>
                                <div>
                                    <span class="badge rounded-pill bg-warning text-dark px-3 py-2 fw-bold shadow-sm">
                                        {{ product.stock_quantity }} left
                                    </span>
                                </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-check"></i>
                            </div>
                            <h6 class="fw-bold text-dark mb-1">Stock is Healthy</h6>
                            <p class="text-muted small mb-0">No low stock alerts today.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}