{% extends "base.html" %}

{% block title %}Gösterge Paneli | FaturaYol{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12 mb-4">
            <h2 class="fw-bold">Gösterge Paneli</h2>
            <p class="text-muted">Fatura yönetim sistemine genel bakış.</p>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row">
        <div class="col-md-4">
            <div class="card stat-card">
                <div class="stat-icon bg-primary-soft">
                    <i class="bi bi-building"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Toplam Firma</h6>
                    <h3 class="fw-bold mb-0">{{ toplam_firma }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card">
                <div class="stat-icon bg-success-soft">
                    <i class="bi bi-file-earmark-text"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Toplam Fatura</h6>
                    <h3 class="fw-bold mb-0">{{ toplam_fatura }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card stat-card">
                <div class="stat-icon bg-warning-soft">
                    <i class="bi bi-currency-dollar"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1">Toplam Harcama</h6>
                    <h3 class="fw-bold mb-0">₺{{ toplam_harcama|floatformat:2 }}</h3>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <!-- Recent Invoices Table -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
                    <h5 class="mb-0 fw-bold">Son Eklenen Faturalar</h5>
                    <a href="#" class="btn btn-sm btn-outline-primary">Tümünü Gör</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th class="ps-4">Fatura No</th>
                                    <th>Firma</th>
                                    <th>Tarih</th>
                                    <th>Toplam</th>
                                    <th>Durum</th>
                                    <th class="text-end pe-4">İşlem</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for fatura in son_faturalar %}
                                <tr>
                                    <td class="ps-4 fw-medium">{{ fatura.fatura_no }}</td>
                                    <td>{{ fatura.firma.ad }}</td>
                                    <td>{{ fatura.tarih|date:"d.m.Y" }}</td>
                                    <td class="fw-bold">₺{{ fatura.genel_toplam }}</td>
                                    <td>
                                        {% if fatura.islenmis %}
                                        <span class="badge bg-success-soft text-success">İşlendi</span>
                                        {% else %}
                                        <span class="badge bg-warning-soft text-warning">Bekliyor</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end pe-4">
                                        <button class="btn btn-sm btn-light"><i class="bi bi-eye"></i></button>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="6" class="text-center py-5 text-muted">Henüz fatura eklenmemiş.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold">Hızlı İşlemler</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary text-start py-3 px-4 rounded-3 d-flex align-items-center">
                            <i class="bi bi-plus-circle-fill me-3 fs-4"></i>
                            <div>
                                <div class="fw-bold">Fatura Yükle</div>
                                <div class="small opacity-75">PDF dosyasını sürükle bırak</div>
                            </div>
                        </button>
                        <button class="btn btn-outline-secondary text-start py-3 px-4 rounded-3 d-flex align-items-center">
                            <i class="bi bi-folder-plus me-3 fs-4"></i>
                            <div>
                                <div class="fw-bold">Klasör Tara</div>
                                <div class="small opacity-75">Yerel dizindeki faturaları bul</div>
                            </div>
                        </button>
                        <button class="btn btn-outline-secondary text-start py-3 px-4 rounded-3 d-flex align-items-center">
                            <i class="bi bi-building-add me-3 fs-4"></i>
                            <div>
                                <div class="fw-bold">Yeni Firma Ekle</div>
                                <div class="small opacity-75">Firma bilgilerini manuel tanımla</div>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
