{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 class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm p-3 bg-white border-start border-danger border-4">
                <div class="text-muted small">Zbývá uhradit</div>
                <div class="fs-4 fw-bold text-danger">{$zbyvaSum|number:2, ',', ' '} CZK</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 n:attr="method => 'get', action => $presenter->link('this', ['rok' => null, 'mesic' => null])" 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 n:foreach="$roky as $r" value="{$r}" {if $selectedRok == $r}selected{/if}>{$r}</option>
                </select>
            </div>
            <div class="col-auto">
                <select name="mesic" class="form-select form-select-sm" onchange="this.form.submit()">
                    <option value="" {if $selectedMesic === ''}selected{/if}>-- Všechny měsíce --</option>
                    <option value="1" {if $selectedMesic == '1'}selected{/if}>Leden</option>
                    <option value="2" {if $selectedMesic == '2'}selected{/if}>Únor</option>
                    <option value="3" {if $selectedMesic == '3'}selected{/if}>Březen</option>
                    <option value="4" {if $selectedMesic == '4'}selected{/if}>Duben</option>
                    <option value="5" {if $selectedMesic == '5'}selected{/if}>Květen</option>
                    <option value="6" {if $selectedMesic == '6'}selected{/if}>Červen</option>
                    <option value="7" {if $selectedMesic == '7'}selected{/if}>Červenec</option>
                    <option value="8" {if $selectedMesic == '8'}selected{/if}>Srpen</option>
                    <option value="9" {if $selectedMesic == '9'}selected{/if}>Září</option>
                    <option value="10" {if $selectedMesic == '10'}selected{/if}>Říjen</option>
                    <option value="11" {if $selectedMesic == '11'}selected{/if}>Listopad</option>
                    <option value="12" {if $selectedMesic == '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 table-cards 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-end">Zaplaceno</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-label="Číslo" data-order="{$f->CISLO}">
                                <a n:href="FakturaEdit:edit $f->ID" class="fw-bold text-decoration-none">
                                    {$f->CISLO}
                                </a>
                            </td>
                            <!-- Odběratel -->
                            <td data-label="Odběratel">{$f->O_PRAJM ?: '—'}</td>
                            <!-- Datum vystavení -->
                            <td data-label="Vystaveno" data-order="{$f->DATUM_VYSTAVENI|date:'Ymd'}">
                                {$f->DATUM_VYSTAVENI|date:'d.m.Y'}
                            </td>
                            <!-- Datum splatnosti -->
                            <td data-label="Splatnost" data-order="{$f->DATUM_SPLATNOSTI|date:'Ymd'}"
                                class="{if $f->STAV_UHRADY !== 'PAID' && ($f->DATUM_SPLATNOSTI|date:'Y-m-d') < $dnes}text-danger fw-bold{/if}">
                                {$f->DATUM_SPLATNOSTI|date:'d.m.Y'}
                            </td>
                            <!-- Částka celkem -->
                            <td data-label="Částka" class="text-end fw-bold" data-order="{$f->CASTKA_CELKEM}">
                                {$f->CASTKA_CELKEM|number:2, ',', ' '} CZK
                            </td>
                            <!-- Zaplaceno -->
                            <td data-label="Zaplaceno" class="text-end {if $f->STAV_UHRADY === 'PAID'}text-success{elseif $f->ZAPLACENO > 0}text-warning{else}text-danger{/if}"
                                data-order="{$f->ZAPLACENO}">
                                {$f->ZAPLACENO|number:2, ',', ' '} CZK
                            </td>
                            <!-- Stav -->
                            <td data-label="Stav" class="text-center" data-order="{$f->STAV_UHRADY}">
                                <span class="badge {if $f->STAV_UHRADY === 'PAID'}bg-success{elseif $f->STAV_UHRADY === 'PARTIAL'}bg-info text-dark{else}bg-warning text-dark{/if}">
                                    {if $f->STAV_UHRADY === 'PAID'}Zaplaceno{elseif $f->STAV_UHRADY === 'PARTIAL'}Částečně{else}Neuhrazeno{/if}
                                </span>
                            </td>
                            <!-- Sloupec AKCE -->
                            <td class="text-end text-nowrap cell-actions">
                                <a href="{link FakturaEdit:edit $f->ID}#uhrady"
                                    class="btn btn-sm {if $f->STAV_UHRADY === 'PAID'}btn-outline-secondary{else}btn-outline-success{/if} me-1"
                                    title="Upravit úhrady">
                                    <i class="bi bi-cash-coin"></i>
                                </a>

                                <a n:href="pdf $f->ID" class="btn btn-sm btn-outline-secondary me-1" title="Stáhnout PDF">
                                    <i class="bi bi-file-earmark-pdf"></i>
                                </a>

                                <a n:href="pdf $f->ID, tisk => true" target="_blank" class="btn btn-sm btn-outline-dark me-1" title="Tisk">
                                    <i class="bi bi-printer"></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,
        autoWidth: false
    });
});
</script>
{/syntax}