{block content}

<div class="container-fluid">

    <!-- Flash zprávy / Toast -->
    <div n:foreach="$flashes as $flash" class="alert alert-{$flash->type} alert-dismissible fade show auto-dismiss my-3 shadow-sm" role="alert">
        <i class="bi bi-check-circle-fill me-2"></i>
        <strong>{$flash->message}</strong>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Souhrnné statistiky -->
    <div class="row g-3 my-2">
        <div class="col-md-6">
            <div class="content-card d-flex align-items-center p-3 border-start border-primary border-4">
                <div class="fs-1 text-primary me-3"><i class="bi bi-cash-stack"></i></div>
                <div>
                    <div class="text-muted small">Celkem fakturováno ({$vybranyRok}{if $vybranyMesic}/{$vybranyMesic}{/if})</div>
                    <div class="fs-4 fw-bold">{$celkemSum|number:2, ',', ' '} CZK</div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="content-card d-flex align-items-center p-3 border-start border-warning border-4">
                <div class="fs-1 text-warning me-3"><i class="bi bi-exclamation-triangle"></i></div>
                <div>
                    <div class="text-muted small">Neuhrazené faktury v období</div>
                    <div class="fs-4 fw-bold">{$neuhrazenoCount} ks</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hlavní tabulka faktur -->
    <div class="content-card my-3">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h4 mb-0" style="color: var(--header-bg);">
                <i class="bi bi-folder2-open me-2"></i>Vydané faktury
            </h2>
            <a  class="btn btn-success btn-sm">
                <i class="bi bi-plus-lg me-1"></i>Vystavit novou fakturu
            </a>
        </div>

        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Číslo faktury</th>
                        <th>Odběratel</th>
                        <th>Vystaveno</th>
                        <th>Splatnost</th>
                        <th class="text-end">Celková částka</th>
                        <th class="text-center">Stav</th>
                        <th class="text-end">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $faktury as $faktura}
                        <tr>
                            <td class="fw-bold">
                                <a n:href="FakturaDetail:default $faktura->ID" class="text-decoration-none">
                                    {$faktura->CISLO}
                                </a>
                            </td>
                            <td>
                                <div class="fw-semibold">{$faktura->O_PRAJM ?: 'Nespecifikovaný odběratel'}</div>
                                <div class="text-muted small" n:if="$faktura->O_IC">IČ: {$faktura->O_IC}</div>
                            </td>
                            <td>{$faktura->DATUM_VYSTAVENI|date:'d.m.Y'}</td>
                            <td>
                                <span n:class="$faktura->DATUM_SPLATNOSTI < new \DateTime() && $faktura->STAV !== 'PAID' ? 'text-danger fw-bold'">
                                    {$faktura->DATUM_SPLATNOSTI|date:'d.m.Y'}
                                </span>
                            </td>
                            <td class="text-end fw-bold fs-6">
                                {($faktura->CASTKA_CELKEM ?? 0)|number:2, ',', ' '} CZK
                            </td>
                            <td class="text-center">
                                {if $faktura->STAV === 'PAID'}
                                    <span class="badge bg-success-subtle text-success border border-success">
                                        <i class="bi bi-check-circle me-1"></i>Uhrazeno
                                    </span>
                                {else}
                                    <span class="badge bg-danger-subtle text-danger border border-danger">
                                        <i class="bi bi-clock me-1"></i>Neuhrazeno
                                    </span>
                                {/if}
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm" role="group">
                                    <!-- Detail / Náhled -->
                                    <a n:href="FakturaDetail:default $faktura->ID" 
                                       class="btn btn-outline-info" 
                                       title="Detail faktury">
                                        <i class="bi bi-eye"></i>
                                    </a>

                                    <!-- Úprava -->
                                    <a n:href="FakturaEdit:edit $faktura->ID" 
                                       class="btn btn-outline-primary" 
                                       title="Upravit fakturu">
                                        <i class="bi bi-pencil"></i>
                                    </a>

                                    <!-- Přepnutí úhrady -->
                                    <a n:href="uhradit! $faktura->ID" 
                                       class="btn {$faktura->STAV === 'PAID' ? 'btn-outline-secondary' : 'btn-outline-success'}" 
                                       title="Změnit stav úhrady">
                                        <i n:class="bi, $faktura->STAV === 'PAID' ? 'bi-x-circle' : 'bi-check2-all'"></i>
                                    </a>

                                    <!-- Smazání -->
                                    <a n:href="delete! $faktura->ID" 
                                       class="btn btn-outline-danger" 
                                       onclick="return confirm('Opravdu chcete smazat tuto fakturu včetně všech položek?');"
                                       title="Smazat fakturu">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    {else}
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">
                                <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                                Pro zadaný filtr (rok {$vybranyRok}{if $vybranyMesic}, měsíc {$vybranyMesic}{/if}) nebyly nalezeny žádné faktury.
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const alerts = document.querySelectorAll('.alert.auto-dismiss');
        alerts.forEach(alert => {
            setTimeout(() => {
                alert.classList.remove('show');
                alert.classList.add('fade');
                setTimeout(() => alert.remove(), 500);
            }, 3000);
        });
    });
</script>