{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>

    <!-- Vyhledávací a filtrační lišta nad tabulkou -->
    <div class="content-card my-3">
        <form n:attr="method => 'get', action => $presenter->link('Zakaznik:default')" class="row g-2 align-items-center">
            <div class="col-md-5">
                <div class="input-group">
                    <span class="input-group-text bg-white text-muted"><i class="bi bi-search"></i></span>
                    <input type="text" name="search" value="{$search}" class="form-control" placeholder="Hledat podle příjmení, jména, IČ nebo města...">
                </div>
            </div>
            
            <div class="col-md-3">
                <select name="zobrazit" class="form-select" onchange="this.form.submit()">
                    <option value="aktivni" {if $zobrazit === 'aktivni'}selected{/if}>Pouze aktivní zákazníci</option>
                    <option value="vse" {if $zobrazit === 'vse'}selected{/if}>Všichni zákazníci</option>
                    <option value="neaktivni" {if $zobrazit === 'neaktivni'}selected{/if}>Pouze neaktivní</option>
                </select>
            </div>

            <div class="col-md-2">
                <button type="submit" class="btn btn-outline-primary w-100">
                    <i class="bi bi-funnel me-1"></i>Filtrovat
                </button>
            </div>

            <div class="col-md-2 text-end">
                <a n:href="ZakaznikEdit:new" class="btn btn-success w-100">
                    <i class="bi bi-person-plus-fill me-1"></i>Nový zákazník
                </a>
            </div>
        </form>
    </div>

    <!-- Tabulka Zákazníků -->
    <div class="content-card my-3">
        <div class="table-responsive">
            <table class="table table-hover align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Jméno / Firma</th>
                        <th>Adresa</th>
                        <th>IČ / DIČ</th>
                        <th>Kontakt</th>
                        <th class="text-center">Stav</th>
                        <th class="text-end">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $zakaznici as $z}
                        <tr n:class="!$z->AKTIVNI ? 'table-light text-muted'">
                            <td class="fw-bold">
                                {$z->PRIJMENI} {$z->JMENO}
                            </td>
                            <td>
                                {if $z->ULICE || $z->MESTO}
                                    <div>{$z->ULICE}</div>
                                    <div class="small text-muted">{$z->PSC} {$z->MESTO}</div>
                                {else}
                                    <span class="text-muted small">—</span>
                                {/if}
                            </td>
                            <td>
                                {if $z->IC}
                                    <div>IČ: {$z->IC}</div>
                                    <div class="small text-muted" n:if="$z->DIC">DIČ: {$z->DIC}</div>
                                {else}
                                    <span class="text-muted small">—</span>
                                {/if}
                            </td>
                            <td>
                                {if $z->TELEFON}
                                    <div><i class="bi bi-telephone me-1 text-muted"></i>{$z->TELEFON}</div>
                                {/if}
                                {if $z->EMAIL}
                                    <div class="small"><i class="bi bi-envelope me-1 text-muted"></i><a href="mailto:{$z->EMAIL}" class="text-decoration-none">{$z->EMAIL}</a></div>
                                {/if}
                                {if !$z->TELEFON && !$z->EMAIL}
                                    <span class="text-muted small">—</span>
                                {/if}
                            </td>
                            <td class="text-center">
                                {if $z->AKTIVNI}
                                    <span class="badge bg-success-subtle text-success border border-success">Aktivní</span>
                                {else}
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary">Neaktivní</span>
                                {/if}
                            </td>
                            <td class="text-end">
                                <div class="btn-group btn-group-sm" role="group">
                                    <!-- Úprava -->
                                    <a n:href="ZakaznikEdit:edit $z->ID" 
                                       class="btn btn-outline-primary" 
                                       title="Upravit zákazníka">
                                        <i class="bi bi-pencil"></i>
                                    </a>

                                    <!-- Přepnutí stavu Aktivní / Neaktivní -->
                                    <a n:href="toggleAktivni! $z->ID" 
                                       class="btn {$z->AKTIVNI ? 'btn-outline-secondary' : 'btn-outline-success'}" 
                                       title="{$z->AKTIVNI ? 'Deaktivovat' : 'Aktivovat'}">
                                        <i n:class="bi, $z->AKTIVNI ? 'bi-person-x' : 'bi-person-check'"></i>
                                    </a>

                                    <!-- Smazání -->
                                    <a n:href="delete! $z->ID" 
                                       class="btn btn-outline-danger" 
                                       onclick="return confirm('Opravdu chcete smazat tohoto zákazníka?');"
                                       title="Smazat zákazníka">
                                        <i class="bi bi-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    {else}
                        <tr>
                            <td colspan="6" class="text-center py-4 text-muted">
                                <i class="bi bi-people fs-2 d-block mb-2"></i>
                                Nebyli nalezeni žádní zákazníci odpovídající zadaným kritériím.
                            </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>