{% extends "base.html" %}

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

{% block content %}
<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ış ve hızlı istatistikler.</p>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card stat-card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center p-4">
                <div class="bg-primary-soft stat-icon me-3" style="width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #dbeafe; color: #2563eb;">
                    <i class="bi bi-building" style="font-size: 1.5rem;"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1 small text-uppercase fw-bold">Toplam Firma</h6>
                    <h3 class="fw-bold mb-0 text-primary">{{ toplam_firma }}</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center p-4">
                <div class="bg-success-soft stat-icon me-3" style="width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d;">
                    <i class="bi bi-file-earmark-text" style="font-size: 1.5rem;"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1 small text-uppercase fw-bold">Toplam Fatura</h6>
                    <h3 class="fw-bold mb-0 text-success">{{ toplam_fatura }}</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center p-4">
                <div class="bg-warning-soft stat-icon me-3" style="width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fef9c3; color: #a16207;">
                    <i class="bi bi-cash-stack" style="font-size: 1.5rem;"></i>
                </div>
                <div>
                    <h6 class="text-muted mb-1 small text-uppercase fw-bold">Toplam Harcama</h6>
                    <h3 class="fw-bold mb-0 text-warning">₺{{ toplam_harcama|floatformat:2 }}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-2">
    <!-- Recent Invoices Table -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between border-0">
                <h5 class="mb-0 fw-bold"><i class="bi bi-clock-history me-2 text-primary"></i>Son Eklenen Faturalar</h5>
                <a href="{% url 'fatura_arsivi' %}" class="btn btn-sm btn-link text-decoration-none">Tümünü Gör <i class="bi bi-arrow-right"></i></a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead>
                            <tr class="bg-light">
                                <th class="ps-4 border-0">Fatura No</th>
                                <th class="border-0">Firma</th>
                                <th class="border-0">Tarih</th>
                                <th class="border-0">Toplam</th>
                                <th class="text-end pe-4 border-0">İşlem</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for fatura in son_faturalar %}
                            <tr>
                                <td class="ps-4 fw-medium text-dark">{{ fatura.fatura_no }}</td>
                                <td>
                                    <span class="badge bg-light text-dark fw-medium border px-2 py-1">{{ fatura.firma.ad }}</span>
                                </td>
                                <td class="text-muted">{{ fatura.tarih|date:"d.m.Y" }}</td>
                                <td class="fw-bold text-primary">₺{{ fatura.genel_toplam }}</td>
                                <td class="text-end pe-4">
                                    <a href="{% url 'fatura_detay' fatura.pk %}" class="btn btn-sm btn-light rounded-pill">
                                        <i class="bi bi-eye"></i> İncele
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <div class="opacity-50 mb-3">
                                        <i class="bi bi-file-earmark-plus" style="font-size: 3rem;"></i>
                                    </div>
                                    <p class="text-muted mb-0">Henüz fatura eklenmemiş.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-white py-3 border-0">
                <h5 class="mb-0 fw-bold"><i class="bi bi-lightning-fill me-2 text-warning"></i>Hızlı İşlemler</h5>
            </div>
            <div class="card-body">
                <div class="d-grid gap-3">
                    <a href="{% url 'fatura_ekle' %}" class="btn btn-primary text-start p-3 rounded-4 d-flex align-items-center shadow-sm border-0 text-decoration-none" style="background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);">
                        <div class="bg-white bg-opacity-25 rounded-3 p-2 me-3">
                            <i class="bi bi-plus-circle-fill fs-4"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-white">Fatura Yükle</div>
                            <div class="small text-white opacity-75">PDF dosyasını seçin</div>
                        </div>
                    </a>
                    
                    <a href="{% url 'firma_ekle' %}" class="btn btn-outline-light text-dark text-start p-3 rounded-4 d-flex align-items-center border bg-light bg-opacity-50 text-decoration-none">
                        <div class="bg-white rounded-3 p-2 me-3 shadow-sm text-primary">
                            <i class="bi bi-folder-plus fs-4"></i>
                        </div>
                        <div>
                            <div class="fw-bold text-dark">Yeni Firma Ekle</div>
                            <div class="small text-muted">Sisteme yeni tedarikçi kaydet</div>
                        </div>
                    </a>
                </div>
                
                <div class="mt-4 p-4 rounded-4 bg-primary bg-opacity-10 border border-primary border-opacity-10">
                    <h6 class="fw-bold text-primary mb-2"><i class="bi bi-info-circle-fill me-2"></i>Biliyor muydunuz?</h6>
                    <p class="small text-muted mb-0">Sistemimiz OCR teknolojisi sayesinde faturadaki tüm kalemleri otomatik olarak ayrıştırabilir.</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
