<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Daily Business Summary</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: #f3f4f6; margin: 0; padding: 20px; color: #1f2937; }
        .container { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
        .header { background: linear-gradient(135deg, #4c1d95, #6366f1); color: #ffffff; padding: 30px; text-align: center; }
        .header h1 { margin: 0; font-size: 24px; font-weight: 700; }
        .header p { margin: 10px 0 0 0; opacity: 0.9; font-size: 15px; }
        .content { padding: 30px; }
        .metrics-grid { display: flex; gap: 15px; margin-bottom: 30px; }
        .metric-card { flex: 1; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; text-align: center; }
        .metric-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b; font-weight: 600; margin-bottom: 5px; }
        .metric-value { font-size: 20px; font-weight: 700; color: #0f172a; }
        .metric-value.profit { color: #10b981; }
        .section-title { font-size: 18px; font-weight: 700; border-bottom: 2px solid #f1f5f9; padding-bottom: 10px; margin-bottom: 20px; color: #1e293b; }
        .insight { margin-bottom: 15px; padding-left: 15px; border-left: 4px solid #e2e8f0; }
        .insight-high { border-left-color: #ef4444; }
        .insight-medium { border-left-color: #f59e0b; }
        .insight-low { border-left-color: #10b981; }
        .insight h3 { margin: 0 0 5px 0; font-size: 15px; }
        .insight p { margin: 0; font-size: 14px; color: #475569; line-height: 1.5; }
        .footer { background: #f8fafc; padding: 20px; text-align: center; font-size: 13px; color: #64748b; border-top: 1px solid #e2e8f0; }
        .button { display: inline-block; padding: 10px 20px; background: #6366f1; color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 600; margin-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>{{ biz_name }}</h1>
            <p>Daily Business Summary for {{ yesterday|date:"l, d M Y" }}</p>
        </div>
        
        <div class="content">
            <h2 class="section-title">📊 Key Metrics</h2>
            
            <div style="display: table; width: 100%; border-spacing: 10px; margin-bottom: 20px;">
                <div style="display: table-cell; text-align: center; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0;">
                    <div class="metric-title">Revenue</div>
                    <div class="metric-value">{{ sym }}{{ revenue|floatformat:2 }}</div>
                </div>
                <div style="display: table-cell; text-align: center; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0;">
                    <div class="metric-title">Estimated Profit</div>
                    <div class="metric-value profit">{{ sym }}{{ total_profit|floatformat:2 }}</div>
                </div>
                <div style="display: table-cell; text-align: center; background: #f8fafc; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0;">
                    <div class="metric-title">Orders</div>
                    <div class="metric-value">{{ order_count }}</div>
                </div>
            </div>

            <h2 class="section-title">💡 Today's Insights</h2>
            {% for insight in top_insights %}
                <div class="insight insight-{{ insight.priority }}">
                    <h3>{{ insight.title }}</h3>
                    <p>{{ insight.description }}</p>
                </div>
            {% empty %}
                <p>No new insights generated for today. Keep selling and we'll track the trends!</p>
            {% endfor %}

            <div style="text-align: center; margin-top: 30px;">
                <a href="https://app.swiftpos.ng/{{ slug }}/dashboard/" class="button">View Full Dashboard</a>
            </div>
        </div>
        
        <div class="footer">
            <p>&copy; {% now "Y" %} SwiftPOS Multi-tenant System.</p>
            <p>You received this because email reports are enabled in your Company Settings.</p>
        </div>
    </div>
</body>
</html>
