{% extends "base.html" %}
{% block title %}Business Twin{% endblock %}
{% block page_title %}Digital Business Twin{% endblock %}

{% block content %}
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(0,212,255,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-coins" style="color: #00D4FF; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Revenue</h5>
            <a href="{{ url_for('business_twin.revenue') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(244,114,182,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-receipt" style="color: #F472B6; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Expenses</h5>
            <a href="{{ url_for('business_twin.expenses') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(139,92,246,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-users" style="color: #8B5CF6; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Customers</h5>
            <a href="{{ url_for('business_twin.customers') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(16,185,129,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-user-tie" style="color: #10B981; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Employees</h5>
            <a href="{{ url_for('business_twin.employees') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(245,158,11,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-truck" style="color: #F59E0B; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Suppliers</h5>
            <a href="{{ url_for('business_twin.suppliers') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(59,130,246,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-boxes" style="color: #3B82F6; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Inventory</h5>
            <a href="{{ url_for('business_twin.inventory') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card p-4 text-center">
            <div style="width: 56px; height: 56px; border-radius: 14px; background: rgba(236,72,153,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;">
                <i class="fas fa-building" style="color: #EC4899; font-size: 22px;"></i>
            </div>
            <h5 style="font-weight: 600;">Departments</h5>
            <a href="{{ url_for('business_twin.departments') }}" class="btn btn-outline-glass btn-sm mt-2">View Twin</a>
        </div>
    </div>
</div>

<div class="glass-card p-4">
    <h5 class="mb-3" style="font-weight: 600;">Business Summary</h5>
    <div class="row g-4">
        <div class="col-md-6">
            <table class="table-glass">
                <tr><td style="color: var(--text-secondary);">Company</td><td class="text-end" style="font-weight: 500;">{{ company.company_name if company else 'Not Set' }}</td></tr>
                <tr><td style="color: var(--text-secondary);">Industry</td><td class="text-end" style="font-weight: 500;">{{ company.industry if company else 'Not Set' }}</td></tr>
                <tr><td style="color: var(--text-secondary);">Type</td><td class="text-end" style="font-weight: 500;">{{ company.business_type if company else 'Not Set' }}</td></tr>
                <tr><td style="color: var(--text-secondary);">Size</td><td class="text-end" style="font-weight: 500;">{{ company.company_size if company else 'Not Set' }}</td></tr>
            </table>
        </div>
        <div class="col-md-6">
            <table class="table-glass">
                <tr><td style="color: var(--text-secondary);">Employees</td><td class="text-end" style="font-weight: 500;">{{ employees }}</td></tr>
                <tr><td style="color: var(--text-secondary);">Customers</td><td class="text-end" style="font-weight: 500;">{{ customers }}</td></tr>
                <tr><td style="color: var(--text-secondary);">Suppliers</td><td class="text-end" style="font-weight: 500;">{{ suppliers }}</td></tr>
                <tr><td style="color: var(--text-secondary);">Departments</td><td class="text-end" style="font-weight: 500;">{{ departments|length }}</td></tr>
                <tr><td style="color: var(--text-secondary);">SKUs</td><td class="text-end" style="font-weight: 500;">{{ inventory_items }}</td></tr>
            </table>
        </div>
    </div>
</div>
{% endblock %}