{% extends "base.html" %}

{% block title %}Dashboard - {{ app_settings.company_name }}{% endblock %}
{% block page_title %}Dashboard{% endblock %}

{% block content %}
<!-- Stats Cards - 2 per row on mobile -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6 mb-4 sm:mb-6 lg:mb-8">
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="flex-1">
                <p class="text-blue-100 text-xs sm:text-sm mb-1">Total Pelanggan</p>
                <h3 class="text-xl sm:text-2xl lg:text-3xl font-bold">{{ total_customers }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 p-2 sm:p-3 lg:p-4 rounded-lg mt-2 sm:mt-0 self-end sm:self-auto">
                <i class="fas fa-users text-lg sm:text-2xl lg:text-3xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="flex-1">
                <p class="text-green-100 text-xs sm:text-sm mb-1">Total Produk</p>
                <h3 class="text-xl sm:text-2xl lg:text-3xl font-bold">{{ total_products }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 p-2 sm:p-3 lg:p-4 rounded-lg mt-2 sm:mt-0 self-end sm:self-auto">
                <i class="fas fa-box text-lg sm:text-2xl lg:text-3xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="flex-1">
                <p class="text-purple-100 text-xs sm:text-sm mb-1">Total Transaksi</p>
                <h3 class="text-xl sm:text-2xl lg:text-3xl font-bold">{{ total_sales }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 p-2 sm:p-3 lg:p-4 rounded-lg mt-2 sm:mt-0 self-end sm:self-auto">
                <i class="fas fa-shopping-cart text-lg sm:text-2xl lg:text-3xl"></i>
            </div>
        </div>
    </div>

    <div class="bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-3 sm:p-4 lg:p-6 text-white">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="flex-1">
                <p class="text-orange-100 text-xs sm:text-sm mb-1">Penjualan Hari Ini</p>
                <h3 class="text-base sm:text-xl lg:text-2xl font-bold">Rp {{ "{:,.0f}".format(today_sales) }}</h3>
            </div>
            <div class="bg-white bg-opacity-20 p-2 sm:p-3 lg:p-4 rounded-lg mt-2 sm:mt-0 self-end sm:self-auto">
                <i class="fas fa-money-bill-wave text-lg sm:text-2xl lg:text-3xl"></i>
            </div>
        </div>
    </div>
</div>

<div class="bg-gradient-to-br from-teal-500 to-teal-600 rounded-lg sm:rounded-xl shadow-md p-4 text-white">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div class="flex-1">
            <p class="text-teal-100 text-xs sm:text-sm mb-1">Uang di Laci (Cash)</p>
            <h3 class="text-xl sm:text-2xl font-bold">Rp {{ "{:,.0f}".format(uang_laci) }}</h3>
            <p class="text-xs mt-1 text-teal-100 opacity-80">Saldo Kas Fisik</p>
        </div>
        <div class="bg-white bg-opacity-20 p-3 rounded-lg">
            <i class="fas fa-cash-register text-2xl"></i>
        </div>
    </div>
</div>

<!-- Alert Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4 lg:gap-6 mb-4 sm:mb-6 lg:mb-8">
    <div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6">
        <div class="flex items-center justify-between mb-3 sm:mb-4">
            <h3 class="text-sm sm:text-base lg:text-lg font-bold text-gray-800">
                <i class="fas fa-hand-holding-usd text-red-500 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Piutang Belum Lunas
            </h3>
        </div>
        <div class="text-xl sm:text-2xl lg:text-3xl font-bold text-red-600">Rp {{ "{:,.0f}".format(piutang) }}</div>
        <p class="text-gray-600 text-xs sm:text-sm mt-1 sm:mt-2">Total tagihan ke pelanggan</p>
        <a href="{{ url_for('payments') }}" class="inline-block mt-2 sm:mt-3 lg:mt-4 text-blue-600 hover:text-blue-800 active:text-blue-900 font-semibold text-xs sm:text-sm">
            Kelola Piutang <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6">
        <div class="flex items-center justify-between mb-3 sm:mb-4">
            <h3 class="text-sm sm:text-base lg:text-lg font-bold text-gray-800">
                <i class="fas fa-file-invoice-dollar text-orange-500 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Hutang Belum Lunas
            </h3>
        </div>
        <div class="text-xl sm:text-2xl lg:text-3xl font-bold text-orange-600">Rp {{ "{:,.0f}".format(hutang) }}</div>
        <p class="text-gray-600 text-xs sm:text-sm mt-1 sm:mt-2">Total tagihan dari supplier</p>
        <a href="{{ url_for('payables') }}" class="inline-block mt-2 sm:mt-3 lg:mt-4 text-blue-600 hover:text-blue-800 active:text-blue-900 font-semibold text-xs sm:text-sm">
            Kelola Hutang <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6">
        <div class="flex items-center justify-between mb-3 sm:mb-4">
            <h3 class="text-sm sm:text-base lg:text-lg font-bold text-gray-800">
                <i class="fas fa-boxes text-yellow-500 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Stok Rendah
            </h3>
        </div>
        <div class="text-xl sm:text-2xl lg:text-3xl font-bold text-yellow-600">{{ low_stock }} Produk</div>
        <p class="text-gray-600 text-xs sm:text-sm mt-1 sm:mt-2">Produk di bawah stok minimum</p>
        <a href="{{ url_for('products') }}" class="inline-block mt-2 sm:mt-3 lg:mt-4 text-blue-600 hover:text-blue-800 active:text-blue-900 font-semibold text-xs sm:text-sm">
            Lihat Produk <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>

    <div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg p-4 sm:p-5 lg:p-6">
        <div class="flex items-center justify-between mb-3 sm:mb-4">
            <h3 class="text-sm sm:text-base lg:text-lg font-bold text-gray-800">
                <i class="fas fa-tools text-purple-500 mr-1 sm:mr-2 text-sm sm:text-base"></i>
                Reparasi Aktif
            </h3>
        </div>
        <div class="text-xl sm:text-2xl lg:text-3xl font-bold text-purple-600">{{ repair_in_progress }} Order</div>
        <p class="text-gray-600 text-xs sm:text-sm mt-1 sm:mt-2">
            Dikerjakan &middot; Siap diambil: <span class="font-semibold text-green-600">{{ repair_ready }}</span>
        </p>
        <a href="{{ url_for('repairs') }}" class="inline-block mt-2 sm:mt-3 lg:mt-4 text-blue-600 hover:text-blue-800 active:text-blue-900 font-semibold text-xs sm:text-sm">
            Buka Jasa Reparasi <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>
</div>

<!-- Recent Sales -->
<div class="bg-white rounded-lg sm:rounded-xl shadow-md sm:shadow-lg overflow-hidden">
    <div class="p-3 sm:p-4 lg:p-6 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-blue-100">
        <h3 class="text-base sm:text-lg lg:text-xl font-bold text-gray-800">
            <i class="fas fa-history text-blue-600 mr-1 sm:mr-2 text-sm sm:text-base"></i>
            Penjualan Terbaru
        </h3>
    </div>
    
    <!-- Mobile Card View -->
    <div class="block lg:hidden divide-y divide-gray-100">
        {% for sale in recent_sales %}
        <div class="p-3 hover:bg-gray-50 active:bg-gray-100 transition-colors">
            <div class="flex justify-between items-start mb-2">
                <div class="flex-1">
                    <div class="flex items-center gap-2 mb-1">
                        <span class="text-xs font-bold text-blue-600">{{ sale.nomor_nota }}</span>
                        {% if sale.status == 'Lunas' %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-700">Lunas</span>
                        {% else %}
                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-red-100 text-red-700">Belum Lunas</span>
                        {% endif %}
                    </div>
                    <p class="text-sm font-semibold text-gray-900">{{ sale.customer.nama }}</p>
                    <p class="text-xs text-gray-500 mt-0.5">{{ sale.tanggal.strftime('%d/%m/%Y %H:%M') }}</p>
                </div>
                <div class="text-right">
                    <p class="text-base font-bold text-gray-900">Rp {{ "{:,.0f}".format(sale.total_bayar) }}</p>
                </div>
            </div>
        </div>
        {% else %}
        <div class="p-8 text-center text-gray-400">
            <i class="fas fa-inbox text-4xl mb-2"></i>
            <p class="text-sm">Belum ada transaksi</p>
        </div>
        {% endfor %}
    </div>

    <!-- Desktop Table View -->
    <div class="hidden lg:block overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">No. Nota</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Pelanggan</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Tanggal</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Total</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
                {% for sale in recent_sales %}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">{{ sale.nomor_nota }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ sale.customer.nama }}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">{{ sale.tanggal.strftime('%d/%m/%Y %H:%M') }}</td>
                    <td class="px-4 py-3 text-sm font-semibold text-gray-900">Rp {{ "{:,.0f}".format(sale.total_bayar) }}</td>
                    <td class="px-4 py-3">
                        {% if sale.status == 'Lunas' %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Lunas</span>
                        {% else %}
                        <span class="px-2 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">Belum Lunas</span>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                        <i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
                        <p>Belum ada transaksi</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}