{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">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h3 mb-0">Přehled databází</h2>
    </div>

    <form n:name="sdfImportForm" class="d-none">
        <input n:name="loginId">
        <input n:name="sdf" accept=".sdf">
        <button n:name="send">Import</button>
    </form>

    <div class="alert alert-danger" n:if="$presenter['sdfImportForm']->hasErrors()">
        <ul class="mb-0 ps-3">
            <li n:foreach="$presenter['sdfImportForm']->errors as $error">{$error}</li>
        </ul>
    </div>

    <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 databází</div>
                <div class="fs-4 fw-bold text-primary">{$celkemCount} 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-success border-4">
                <div class="text-muted small">Aktivní</div>
                <div class="fs-4 fw-bold text-success">{$aktivniCount} ks</div>
            </div>
        </div>
    </div>

    <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="databaze-table">
                <thead class="table-light">
                    <tr>
                        <th>Databáze</th>
                        <th>Server</th>
                        <th>Login</th>
                        <th class="text-center">Firma ID</th>
                        <th>Poslední přihlášení</th>
                        <th class="text-center">Stav</th>
                        <th class="text-center">Role</th>
                        <th>Poslední import SDF</th>
                        <th class="text-end" data-orderable="false">Akce</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $loginy as $login}
                        <tr n:class="!$login->AKTIVNI ? 'table-light text-muted'">
                            <td data-label="Databáze" class="fw-bold" data-order="{$login->DATABASE}">
                                <i class="bi bi-database me-1 text-muted"></i>{$login->DATABASE}
                            </td>
                            <td data-label="Server">{$login->SERVER}</td>
                            <td data-label="Login">
                                <a href="mailto:{$login->EMAIL}" class="text-decoration-none">{$login->EMAIL}</a>
                            </td>
                            <td data-label="Firma ID" class="text-center">{$login->FIRMA_ID}</td>
                            <td data-label="Poslední přihlášení" data-order="{if $login->POSLEDNI_PRIHLASENI}{$login->POSLEDNI_PRIHLASENI|date:'YmdHis'}{/if}">
                                {if $login->POSLEDNI_PRIHLASENI}
                                    {$login->POSLEDNI_PRIHLASENI|date:'d.m.Y H:i'}
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td data-label="Stav" class="text-center" data-order="{$login->AKTIVNI}">
                                {if $login->AKTIVNI}
                                    <span class="badge bg-success">Aktivní</span>
                                {else}
                                    <span class="badge bg-secondary">Neaktivní</span>
                                {/if}
                            </td>
                            <td data-label="Role" class="text-center" data-order="{$login->IS_ADMIN}">
                                {if $login->IS_ADMIN}
                                    <span class="badge bg-dark">Admin</span>
                                {else}
                                    <span class="badge bg-light text-dark border">Uživatel</span>
                                {/if}
                            </td>
                            <td data-label="Poslední import SDF" data-order="{$login->SDF_SOUBOR}">
                                {if $login->SDF_SOUBOR}
                                    <div class="fw-semibold">{$login->SDF_SOUBOR}</div>
                                    <div class="small text-muted">
                                        nahráno {$login->SDF_NAHRANO|date:'d.m.Y H:i'}
                                        {if $login->SDF_VELIKOST_TEXT}
                                            · {$login->SDF_VELIKOST_TEXT}
                                        {/if}
                                    </div>
                                    <div class="small text-success" n:if="$login->SDF_IMPORTOVANO">
                                        importováno {$login->SDF_IMPORTOVANO|date:'d.m.Y H:i'}
                                    </div>
                                {else}
                                    <span class="text-muted">—</span>
                                {/if}
                            </td>
                            <td class="text-end text-nowrap cell-actions">
                                <button type="button"
                                        class="btn btn-sm btn-success js-sdf-import"
                                        data-login-id="{$login->ID}"
                                        data-database="{$login->DATABASE}"
                                        title="Smaže stávající zákazníky, faktury, položky a platby a nahradí je daty ze SDF">
                                    <i class="bi bi-box-arrow-in-down me-1"></i>Import
                                </button>
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
</div>

<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() {
    $('#databaze-table').DataTable({
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/cs.json'
        },
        order: [[0, 'asc']],
        pageLength: 25,
        autoWidth: false
    });

    const $form = $('form[id$="-sdfImportForm"], #frm-sdfImportForm').first();
    const $loginId = $form.find('[name="loginId"]');
    const $file = $form.find('input[type="file"]');

    $(document).on('click', '.js-sdf-import', function() {
        const database = $(this).data('database');
        if (!confirm('VAROVÁNÍ: Import ze SDF do databáze ' + database + ' SMAŽE všechna stávající data této firmy (zákazníky, faktury, položky a platby) a nahradí je obsahem souboru.\n\nOpravdu chcete pokračovat?')) {
            return;
        }
        $loginId.val($(this).data('login-id'));
        $file.val('');
        $file.trigger('click');
    });

    $file.on('change', function() {
        if (this.files && this.files.length) {
            $form.trigger('submit');
        }
    });
});
</script>
{/syntax}