{block content}

<!-- DataTables CSS s Bootstrap 5 vzhledem -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.6/css/dataTables.bootstrap5.min.css">

<div class="container-fluid py-3">
    <!-- Hlavička s přehledovými kartami -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h3 mb-0">Přehled faktur</h2>
        <a n:href="FakturaEdit:new" class="btn btn-success">
            <i class="bi bi-plus-circle me-1"></i>Vystavit fakturu
        </a>
    </div>

    <!-- Souhrnné statistiky -->
    <div class="row g-3 mb-4">
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-primary border-4">
                <div class="text-muted small">Celkem v tomto období</div>
                <div class="fs-4 fw-bold text-primary">{$celkemSum|number:2, ',', ' '} CZK</div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-warning border-4">
                <div class="text-muted small">Neuhrazené faktury</div>
                <div class="fs-4 fw-bold text-warning">{$neuhrazenoCount} ks</div>
            </div>
        </div>
    </div>

    <!-- Filtrační lišta (Rok / Měsíc) -->
    <div class="card p-3 mb-4 border-0 shadow-sm bg-light">
        <form method="get" class="row g-2 align-items-center">
            <div class="col-auto">
                <label class="col-form-label fw-bold">Filtr roku/měsíce:</label>
            </div>
            <div class="col-auto">
                <select name="rok" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="2026" {if ($vybranyRok ?? date('Y')) == 2026}selected{/if}>2026</option>
                    <option value="2025" {if ($vybranyRok ?? date('Y')) == 2025}selected{/if}>2025</option>
                </select>
            </div>
            <div class="col-auto">
                <select name="mesic" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="">-- Všechny měsíce --</option>
                    <option value="1" {if ($vybranyMesic ?? '') == '1'}selected{/if}>Leden</option>
                    <option value="2" {if ($vybranyMesic ?? '') == '2'}selected{/if}>Únor</option>
                    <option value="3" {if ($vybranyMesic ?? '') == '3'}selected{/if}>Březen</option>
                    <option value="4" {if ($vybranyMesic ?? '') == '4'}selected{/if}>Duben</option>
                    <option value="5" {if ($vybranyMesic ?? '') == '5'}selected{/if}>Květen</option>
                    <option value="6" {if ($vybranyMesic ?? '') == '6'}selected{/if}>Červen</option>
                    <option value="7" {if ($vybranyMesic ?? '') == '7'}selected{/if}>Červenec</option>
                    <option value="8" {if ($vybranyMesic ?? '') == '8'}selected{/if}>Srpen</option>
                    <option value="9" {if ($vybranyMesic ?? '') == '9'}selected{/if}>Září</option>
                    <option value="10" {if ($vybranyMesic ?? '') == '10'}selected{/if}>Říjen</option>
                    <option value="11" {if ($vybranyMesic ?? '') == '11'}selected{/if}>Listopad</option>
                    <option value="12" {if ($vybranyMesic ?? '') == '12'}selected{/if}>Prosinec</option>
                </select>
            </div>
        </form>
    </div>

    <!-- Tabulka Faktur -->
    <div class="card shadow-sm border-0 p-3 bg-white">
        <div class="table-responsive">
            <table class="table table-hover align-middle w-100" id="faktury-table">
                <thead class="table-light">
                    <tr>
                        <th>Číslo</th>
                        <th>Odběratel</th>
                        <th>Vystaveno</th>
                        <th>Splatnost</th>
                        <th class="text-end">Částka</th>
                        <th class="text-center">Stav</th>
                        <th class="text-end" data-orderable="false">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $faktury as $f}
                        <tr>
                            <!-- Číslo dokladu -->
                            <td data-order="{$f->CISLO}">
                                <a n:href="FakturaDetail:default $f->ID" class="fw-bold text-decoration-none">
                                    {$f->CISLO}
                                </a>
                            </td>
                            <!-- Odběratel -->
                            <td>{$f->O_PRAJM ?: '—'}</td>
                            <!-- Datum vystavení -->
                            <td data-order="{$f->DATUM_VYSTAVENI|date:'Ymd'}">
                                {$f->DATUM_VYSTAVENI|date:'d.m.Y'}
                            </td>
                            <!-- Datum splatnosti -->
                            <td data-order="{$f->DATUM_SPLATNOSTI|date:'Ymd'}">
                                {$f->DATUM_SPLATNOSTI|date:'d.m.Y'}
                            </td>
                            <!-- Částka celkem -->
                            <td class="text-end fw-bold" data-order="{$f->CASTKA_CELKEM}">
                                {$f->CASTKA_CELKEM|number:2, ',', ' '} CZK
                            </td>
                            <!-- Stav -->
                            <td class="text-center" data-order="{$f->STAV}">
                                <span class="badge {if $f->STAV === 'PAID'}bg-success{else}bg-warning text-dark{/if}">
                                    {if $f->STAV === 'PAID'}Zaplaceno{else}Neuhrazeno{/if}
                                </span>
                            </td>
                            <!-- Sloupec AKCE -->
                            <td class="text-end text-nowrap">
                                <!-- Přepnutí stavu úhrady -->
                                <a n:href="uhradit! $f->ID" 
                                class="btn btn-sm {if $f->STAV === 'PAID'}btn-outline-warning{else}btn-outline-success{/if} me-1" 
                                title="{if $f->STAV === 'PAID'}Označit jako neuhrazeno{else}Označit jako zaplaceno{/if}">
                                    <i class="bi {if $f->STAV === 'PAID'}bi-x-circle{else}bi-check-circle{/if}"></i>
                                </a>

                                <!-- Detail faktury -->
                                <a n:href="FakturaDetail:default $f->ID" class="btn btn-sm btn-outline-info me-1" title="Zobrazit detail">
                                    <i class="bi bi-eye"></i>
                                </a>

                                <!-- Editace faktury -->
                                <a n:href="FakturaEdit:edit $f->ID" class="btn btn-sm btn-outline-primary me-1" title="Upravit">
                                    <i class="bi bi-pencil"></i>
                                </a>

                                <!-- Smazání faktury -->
                                <a n:href="delete! $f->ID" 
                                   class="btn btn-sm btn-outline-danger" 
                                   title="Smazat fakturu" 
                                   onclick="return confirm('Opravdu si přejete smazat tuto fakturu?');">
                                    <i class="bi bi-trash"></i>
                                </a>
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- DataTables JS & jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net@1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.6/js/dataTables.bootstrap5.min.js"></script>

{syntax off}
<script>
$(document).ready(function() {
    $('#faktury-table').DataTable({
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/cs.json'
        },
        order: [[2, 'desc']], // Výchozí řazení podle data vystavení sestupně
        pageLength: 25
    });
});
</script>
{/syntax}